fist commit
After Width: | Height: | Size: 3.6 KiB |
After Width: | Height: | Size: 4.5 KiB |
|
@ -0,0 +1,19 @@
|
|||
“AS代码转换工具”可将as3件导出为egret项目ts代码。作为EgretConversion附属工具,可以在as3件有更改时,单独转换该as3件,而不用转换整个项目。
|
||||
|
||||
**如何使用“AS代码转换工具”单独转换as3件?**
|
||||
|
||||
点击工具栏的按钮“SWF转换工具”
|
||||
|
||||
![](56b1ac1e245c0.png)
|
||||
|
||||
打开AS代码转换面板:
|
||||
|
||||
![](56b1ac1e2e299.png)
|
||||
|
||||
具体操作:
|
||||
|
||||
1. 直接把as3文件或文件夹拖到面板中
|
||||
|
||||
2. 转换后的代码会在C:\Users\xxxx\Desktop\astemp中
|
||||
|
||||
3. 可以直接把代码拷贝到egret项目中直接使用(错误自己还是需要改的)
|
After Width: | Height: | Size: 17 KiB |
After Width: | Height: | Size: 85 KiB |
|
@ -0,0 +1,69 @@
|
|||
“SWF转换工具”可将swf文件导出为Egret项目可用的资源。作为Egret Conversion附属工具,可以在swf文件有更改时,单独转换该swf文件,而不用转换整个项目。要注意的是,“SWF转换工具”是为Egret定制的工具,转出的格式只能用于egret项目(需要三方库的支持),无法在其他h5项目中使用。
|
||||
|
||||
## 一、如何使用“SWF转换工具”单独转换swf文件?
|
||||
|
||||
点击工具栏的按钮“SWF转换工具”
|
||||
|
||||
![](56b1ac0cbd1f8.jpg)
|
||||
|
||||
打开SWFExporter面板:
|
||||
|
||||
![](56b1ac0d06bb9.jpg)
|
||||
|
||||
1:提示信息区
|
||||
|
||||
2:swf文件的导出位置
|
||||
|
||||
3:当前导出swf文件的进度信息
|
||||
|
||||
4:正在导出的swf文件全路径
|
||||
|
||||
以Flashbuilder项目为例:
|
||||
|
||||
从Flash项目的bin-debug或源码目录下拖入一个或多个swf文件到面板中,也可拖入目录。转换时在面板底部显示有转换的进度,当转换完成将显示“complete!”。
|
||||
|
||||
如果选择了一个转换项目,所有转换的swf都会生成资源到转换项目下的egret项目resource/swfres目录下。
|
||||
|
||||
如果没有选择任何转换项目,所有转换的swf都会生成到桌面上resource/swfres下。
|
||||
|
||||
## 二、怎样在 Egret 项目中使用生成的资源?
|
||||
|
||||
把生成到resource/swfres路径下的资源文件夹拷贝到egret项目的相应位置(resource下)。然后可以像在flash中写as3代码一样加载swf文件。
|
||||
|
||||
例如在as3中这样写:
|
||||
|
||||
```
|
||||
var url:String = "123.swf";
|
||||
var urlRequest:URLRequest = new URLRequest(url);
|
||||
var loader:Loader = new Loader();
|
||||
loader.load(urlRequest, null);
|
||||
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
|
||||
```
|
||||
|
||||
在egret项目中这样写:
|
||||
|
||||
```
|
||||
var url:String = "123.swf";
|
||||
var urlRequest:egret.URLRequest = new egret.URLRequest(url);
|
||||
var loader:flash.Loader = new flash.Loader();
|
||||
loader.load(urlRequest,null);
|
||||
loader.contentLoaderInfo.addEventListener(egret.Event.COMPLETE,flash.bind(this.onLoadComplete,this),null);
|
||||
```
|
||||
|
||||
可以看到egret项目的typescript代码直接加载了swf格式的文件。
|
||||
|
||||
egret项目直接支持swf文件格式吗?答案是不支持。
|
||||
|
||||
而使用Egret Conversion转换生成的egret项目支持swf。这是因为EgretConversion在底层封装了swf文件格式,在代码层模拟了这一功能,请看下文讲解。
|
||||
|
||||
## 三、egret中是怎么实现载入swf的?
|
||||
|
||||
在flash中可以直接加载swf格式的文件,然后从文件中取到各种资源,而egret是不支持swf文件格式的。Egret Conversion通过转换操作,将flash项目的as3语法翻译为egret项目的ts语法,将swf文件解析为可为egret项目识别的资源格式,通过底层的封装最终可在代码层直接加载swf。要注意的是,这种加载swf并不是真的load了一个.swf文件,而是在底层载入了经过转换后的图片等文件。
|
||||
|
||||
## 四、支持swf资源的三方库
|
||||
|
||||
Egret Conversion转换的swf资源可在任意egret项目中使用,通过导入一个开源的三方库。
|
||||
|
||||
获得三方库:用EgretConversion转换任意一个flash项目(可以用示例项目),在生成的egret项目中,src/as3目录即是这个三方库文件。
|
||||
|
||||
将三方库拷贝到自己的egret项目相应路径下。
|
After Width: | Height: | Size: 454 KiB |
After Width: | Height: | Size: 78 KiB |
After Width: | Height: | Size: 19 KiB |
|
@ -0,0 +1,47 @@
|
|||
转换Flash项目只是第一步,用EgretConversion转换完项目并按照提示修改错误的语法,以保证项目可以通过编译,然后才能运行项目 。这里提供一些技巧以便于您能快速调试自己的项目。
|
||||
|
||||
1. 源项目只需转换一次,剩余的工作都在Egret项目端完成。
|
||||
|
||||
2. 做好项目备份。
|
||||
|
||||
EgretConversion不会修改源Flash项目的任何内容,但是每次转换操作会覆盖Egret项目的所有代码。因此如果在Egret端已经修复了很多错误,需要谨慎使用“转换按钮”。建议是转换过项目之后所有的改动在Egret端做,不要在Flash项目中继续修改as3代码。
|
||||
|
||||
3. Egret项目开发工具可以使用Egret Wing或者Webstorm或者visual studio。wing的断点调试功能很方便。
|
||||
|
||||
4. 在Chrome中调试Egret的程序,可以断点查看运行时变量值。
|
||||
|
||||
5. 给Chrome安装Egret Inspector插件(从Egret下载器里下载),可以直观的看到显示对象的层级关系,并可动态修改所选目标的属性值以查看效果。查看当前帧率也在这里:
|
||||
|
||||
![](56b1ac3f5904b.jpg)
|
||||
|
||||
6. 修改舞台背景色。舞台背景默认是黑色。
|
||||
|
||||
打开Egret项目launcher下的index.html文件,修改 background: #000000;字段
|
||||
|
||||
7. 设置横竖屏,如上。修改 <meta name="screen-orientation" content="portrait"/>
|
||||
|
||||
8. 以WebGL模式运行项目:(Filter等效果只有在WebGL模式下有效果)
|
||||
|
||||
打开Egret项目下launcher下的egret_loader.js,修改var rendererType = 0;变量为1。
|
||||
|
||||
9. 修改舞台默认大小。
|
||||
|
||||
打开Egret项目下launcher下的egret_loader.js,修改egret.StageDelegate.getInstance().setDesignSize(600,600);
|
||||
|
||||
10. 修改帧频
|
||||
|
||||
打开Egret项目下launcher下的egret_loader.js,修改stage.frameRate = 10;
|
||||
|
||||
要注意的是该值必须为可被60整除的数(10,15,20,30,60),否则在运行时会将60作为默认值。
|
||||
|
||||
![](56b1ac402f21a.jpg)
|
||||
|
||||
11. 更新老项目的库文件
|
||||
|
||||
EgretConversion升级之后,库文件(as3目录下的类库)会有所更新。创建新的转换项目会使用最新的库文件,对于之前的转换项目,需要把最新的库文件拷贝到项目中替换旧文件。也可以在自动检测到库更新后点“更新配置”自动更新。
|
||||
|
||||
![](56b1ac409fa73.jpg)
|
||||
|
||||
12. 更新老项目的引擎版本
|
||||
|
||||
本机升级Egret后,在命令行中cd到egret项目目录,执行egret upgrade升级项目,然后执行egret build -e编译项目。
|
|
@ -0,0 +1,201 @@
|
|||
### 一,工具基本功能报错
|
||||
|
||||
* 无法新建转换项目
|
||||
|
||||
新建转换项目时,工具没有反应,进入假死状态。这种情况下可能与本地没有配置好egret环境有关,参考[准备与安装](../../Conversion/installation/README.md)。
|
||||
|
||||
* 项目转换后编译报错
|
||||
|
||||
首先确定本机当前所用的Egret版本为EgretConversion所要求的版本。如果低于所需最低版本,则要更新Egret([准备与安装](../../Conversion/installation/README.md))。
|
||||
|
||||
* 3000端口被占用,无法运行项目
|
||||
|
||||
egret本机项目运行在3000端口上,需要结束其他占用了3000端口的进程。参考“Getting Started”文档的“KILL3000端口”部分。
|
||||
|
||||
### 二,代码转换报错
|
||||
|
||||
* 类型转换报错
|
||||
|
||||
ts中任意类型转换报错,可在表达式前加<any>强转一下。
|
||||
|
||||
使用'as'操作符做类型转换时,如果要转为Class类型,会有一个编译报错:
|
||||
|
||||
“error TS2304: Cannot find name 'any'.”
|
||||
|
||||
例如从加载的swf中取链接类定义:
|
||||
|
||||
```
|
||||
var btnCls:Class = loaderInfo.applicationDomain.getDefinition("MyButton") as Class;
|
||||
```
|
||||
|
||||
转换之后的TS代码为:
|
||||
|
||||
```
|
||||
var btnCls:any = <any>as3.As3As(loaderInfo.applicationDomain.getDefinition ("MyButton"),any);
|
||||
```
|
||||
|
||||
这是因为ts中没有与Class对应的类类型,需要手动修改如下:
|
||||
|
||||
```
|
||||
var cls:any = <any>loaderInfo.applicationDomain.getDefinition ("MyButton");
|
||||
```
|
||||
|
||||
* 类型转换报错error TS2345
|
||||
|
||||
```
|
||||
private myFunc():void{
|
||||
var employees:Array<any>;
|
||||
var isManager:Function = function (element:any,index:number,arr:Array<any>):boolean
|
||||
{
|
||||
return true;
|
||||
};
|
||||
employees.filter(isManager);
|
||||
}
|
||||
```
|
||||
|
||||
编译时经常会报错: error TS2345: Argument of type 'Function' is not assignable to parameter of type '(value: any, index: number, array: any[]) => boolean'.
|
||||
|
||||
大部分情况下这是编译器的误报,可以忽略不管。也可以手动在右侧表达式前加<any>强转,再次编译就不会报类型强转的错误。
|
||||
|
||||
* 接口继承接口,类型判定需手动修改。
|
||||
|
||||
* 判断一个对象是否实现了某接口,需手动修改。
|
||||
|
||||
* 对于闭包,如果有嵌套的写法可能会转换失效,根据错误提示修改写法。
|
||||
|
||||
* 对于出现的API警告,有未实现的API请参考手册里“手动填充API”章节。
|
||||
|
||||
* namespace引起的转换错误
|
||||
|
||||
暂时不支持命名空间的语法规则,as3中的namespace在ts中被忽略,在as3的namesapce中定义的变量和方法视为public属性。因此要防止同名变量的冲突,例如在类MyClass.as中定义变量如下:
|
||||
|
||||
```
|
||||
public var nsvar1:int = 10;
|
||||
ns1 var nsvar1:int = 30;//ns1是我定义的命名空间
|
||||
```
|
||||
|
||||
在转换为ts代码之后为:
|
||||
|
||||
```
|
||||
public nsvar1:number = 10;
|
||||
public nsvar1:number = 30;//这里会与类变量冲突
|
||||
```
|
||||
|
||||
对于此冲突,目前需要手动修改,namespace写法在EgretConversion的后续版本中将会支持。
|
||||
|
||||
* 子类父类同名属性同名方法冲突
|
||||
|
||||
as3代码中子类可以override父类的方法,可以重新定义重名属性(改变属性的访问域private/public/protected),可以定义重名的static属性/方法。
|
||||
|
||||
对于同名的属性/方法,EgretConversion在转换之后,会重命名子类中的同名属性/方法,以与父类区分。
|
||||
|
||||
如以下基类与子类:
|
||||
|
||||
```
|
||||
public class BaseCls
|
||||
{
|
||||
public var myVar:int;
|
||||
public static var TYPE:String = "red";
|
||||
public function func():void{
|
||||
}
|
||||
public static function sfunc():void{
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```
|
||||
public class ExtendCls extends BaseCls
|
||||
{
|
||||
protected var myVar:int;//改变属性访问限制
|
||||
public static var TYPE:String = "red";//重定义static变量
|
||||
public override function func():void{//override函数
|
||||
}
|
||||
public static function sfunc():void{//重定义static函数
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
看下转换后的ts代码:
|
||||
|
||||
```
|
||||
class ExtendCls extends BaseCls {
|
||||
protected myVar_ExtendCls:number = 0;//重命名
|
||||
public static TYPE_static_ExtendCls:string;//重命名
|
||||
public func() {
|
||||
}
|
||||
public static sfunc_static_ExtendCls() {//重命名
|
||||
}
|
||||
}
|
||||
ExtendCls.TYPE_static_ExtendCls = "red";
|
||||
```
|
||||
|
||||
|
||||
* get set方法在ts中不可调用super,需要手动修改。
|
||||
|
||||
如果在as3中子类重写了get 或set方法,转换后在ts端不会报错,但是子类无法获取父类的 get/set方法了。
|
||||
|
||||
例如父类中有get & set方法:
|
||||
|
||||
```
|
||||
private _age:number = 0;
|
||||
public get age():number{
|
||||
return this._age;
|
||||
}
|
||||
public set age(value:number){
|
||||
this._age = value;
|
||||
}
|
||||
```
|
||||
|
||||
子类中重写set:
|
||||
|
||||
```
|
||||
public override set age(value:number){
|
||||
….
|
||||
}
|
||||
```
|
||||
|
||||
子类中将无法访问 age的get方法。
|
||||
|
||||
EgretConversion转换as3项目后会重命名get set方法的方法名。如:
|
||||
|
||||
```
|
||||
protected set age_ExtendCls(value:number)
|
||||
```
|
||||
|
||||
三,资源转换报错
|
||||
|
||||
* 转换过程中有swf文件无法转换(卡死、闪退)
|
||||
|
||||
在转换swf资源时,如果卡在某个swf文件无法转换可能导致工具的崩溃、闪退、卡死等现象。一般是由于工具尚不支持的功能引起的。解决办法:可暂时通过删除该swf以跳过转换该资源。并将有问题文件提交给官方。有下列情形的可按照相应的办法解决:
|
||||
|
||||
a. avm1格式的swf,需要在fla中重新发布为avm2格式。
|
||||
|
||||
b. 有视频等尚不支持的资源类型,可以在fla中删除尚不支持的资源,重新发布swf。
|
||||
|
||||
* 转换过程死循环,重复转同一个swf文件
|
||||
|
||||
使用SwfExporter工具单独转有问题的swf。或者重启EgretConversion继续转换。
|
||||
|
||||
* swf有更改需要重新导出
|
||||
|
||||
已经转过的swf不会重新转换,如果原swf文件有改动,需删除已经转换出的资源文件夹(在resource\swfres目录下)。或者使用“swf转换工具”的功能拖入swf文件转换。
|
||||
|
||||
* 文本都是白色
|
||||
|
||||
升级egret到2.0.3之后的版本。
|
||||
|
||||
* 转换后动画播放不正确
|
||||
|
||||
是否用帧代码控制播放了,比如加个stop()。目前转换项目会忽略帧代码。
|
||||
|
||||
其他错误联系官方团队。
|
||||
|
||||
论坛热帖 [转换错误解决方案](http://bbs.egret.com/thread-10741-1-1.html)
|
||||
|
||||
----
|
||||
|
||||
EgretConversion联系方式:
|
||||
|
||||
官方QQ群:Egret Conversion VIP 249685517
|
||||
|
||||
官方论坛:[http://bbs.egret.com/forum.php?mod=forumdisplay&fid=70](http://bbs.egret.com/forum.php?mod=forumdisplay&fid=70)
|
After Width: | Height: | Size: 8.9 KiB |
After Width: | Height: | Size: 34 KiB |
|
@ -0,0 +1,66 @@
|
|||
本文讲述EgretConversion中遇到的API报错的处理方式。包括没有实现的Flash类,没有实现的Flash属性、API接口等的手动补充方法。
|
||||
|
||||
在转换完项目后,“API警告统计”页面会显示所有未能转换的Flash类或属性,并在详情页定位到项目代码的位置。如果项目必须使用这些类或函数则必须补全这些API,即在egret项目端有相应的flash api的映射。
|
||||
|
||||
手动补全过程如下:
|
||||
|
||||
### 1. 配置csv表:
|
||||
|
||||
配置文件CSV表结构
|
||||
|
||||
| 类别 | 含义 |
|
||||
|--|--|
|
||||
| 类 | as3 中的类 全路径 |
|
||||
| 继承类 | s3 中的父类 全路径 |
|
||||
| 静态 | 静态1 非静态不填写 |
|
||||
| 属性 | 对象的属性 |
|
||||
| 属性get/set | 读1 只写2 读写不 填写|
|
||||
| 函数 | 对象的方法 |
|
||||
| 类型 | 类型、方法的返回值类型 |
|
||||
| 转换类 | ts 中对应的类 |
|
||||
| 是否需要删除前缀 | 静态属性、静态方法才写 |
|
||||
| 转换属性| 属性对应不一致填写(mouseEnable /uchEnabled) |
|
||||
| 转换属性格式 | 是1 给属性方法转成object[“xxx”]而不是object.xxx |
|
||||
| 转换函数 | 应as3.sorton |
|
||||
| 转换参数 | 意义不一样时 a.b() as3.sorton (a,b) 应填写b0 a1 |
|
||||
| 是否转换实现 | 是1 否0 |
|
||||
| 错误提示 | 可以备注错误信息 |
|
||||
| 权重 | api出现频率 |
|
||||
| 测试 | 是否测试过 |
|
||||
|
||||
填写完后放到项目文件夹的config目录下:
|
||||
|
||||
![](56b1abfa0ce8e.png)
|
||||
|
||||
## 2. 增加映射的类文件或API
|
||||
|
||||
除了填写配置表还要补充相应的ts文件才能正确执行,例如api目录下的配置表对应的文件大部分都在Egret引擎中,也有少部分在扩展库as3中
|
||||
|
||||
![](56b1abfa302f6.png)
|
||||
|
||||
具体操作步骤:
|
||||
|
||||
**1. 当发现缺失的API需要补充时,从附件“API模板”中找到API的文件。**
|
||||
|
||||
例如没找到InvokeEventReason类的STANDARD属性,这是一个静态属性。在egret项目中没找到InvokeEventReason.ts这个类,说明当前还没有实现这个API。
|
||||
|
||||
**2. 在egret项目目录相应目录下创建ts类。**
|
||||
|
||||
InvokeEventReason的flash包路径为flash.desktop.InvokeEventReason,在目录C:\Users\chenpeng\Desktop\out\demo1\src\as3\flash\desktop下创建InvokeEventReason.ts文件。填充内容如下:
|
||||
|
||||
```
|
||||
module flash
|
||||
{
|
||||
export class InvokeEventReason
|
||||
{
|
||||
public static STANDARD:string = "standard";
|
||||
public static NOTIFICATION:string = "notification";
|
||||
public static OPEN_URL:string = "openUrl";
|
||||
public static LOGIN:string = "login";
|
||||
constructor(){
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**3.InvokeEventReason.csv放到C:\Users\chenpeng\Desktop\out\config\api\flash\desktop下。**
|
After Width: | Height: | Size: 4.8 KiB |
After Width: | Height: | Size: 7.5 KiB |
After Width: | Height: | Size: 2.5 KiB |
After Width: | Height: | Size: 2.7 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 3.1 KiB |
After Width: | Height: | Size: 3.7 KiB |
After Width: | Height: | Size: 576 B |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 929 B |
After Width: | Height: | Size: 3.0 KiB |
After Width: | Height: | Size: 1.1 MiB |
After Width: | Height: | Size: 504 KiB |
|
@ -0,0 +1,187 @@
|
|||
前面的文章介绍了Egret Conversion的界面,示例项目的演示。本文将讲述新手如何开始使用工具,更加详细的讲述工具的功能和细节,在转换过程中的问题和解决办法。
|
||||
|
||||
在开始转换一个Flash的项目之前,建议您先阅读[EgretConversion FAQ](../..//Conversion/questions/README.md)文档,以了解本工具目前的可用范围。
|
||||
|
||||
接下来以转换工具自带的示例项目“连连看”为例,演示创建转换项目到最终执行的整个过程。
|
||||
|
||||
## 首先获取示例项目
|
||||
|
||||
在Egret Conversion工具中切换到“欢迎界面”页面,选择“示例项目一:连连看”,工具立刻开始解压连连看项目到系统的文档文件夹下,windows系统下解压后的项目路径为:C:\Users\***\Documents\project\LianLianKan,我把这个项目拷贝到D盘下并重新命名为FlashGame,以便路径更短便于下文的截图展示。接下来开始转换项目:
|
||||
|
||||
### 1. 创建转换项目
|
||||
|
||||
点“新建转换项目”,在弹框中填入相应的参数如下:
|
||||
|
||||
![](56b1ab987e000.png)
|
||||
|
||||
名称EgretGame是指转换后的Egret项目名称,这个可以取任何名字(合法的文件夹名)。
|
||||
|
||||
项目路径选择刚才的FlashGame目录路径。
|
||||
|
||||
输出路径填入的是转换项目目录,与转换相关的配置文件及转换后的Egret项目,log等都保存在这个目录下。建议提前创建一个空的目录,然后拷贝目录路径到输出路径,在工作区中删除转换项目时可以选择删除整个目录,因此要小心影响到不相关文件。
|
||||
|
||||
**提示:输出路径支持中文路径。**
|
||||
|
||||
FlashGame这个项目是flash builder项目,在源项目类型中选择“FlashBuilder项目”。
|
||||
|
||||
源项目类型可以选择“FlashBuilder项目”、“FlashDevelop项目”、“Flash Professional项目”、“其他Flash项目”四个选项。根据自己的项目类型来选择正确的类型。工具根据项目类型来自动识别项目的目录结构。
|
||||
|
||||
![](56b1ab9895aef.png)
|
||||
|
||||
不能自动识别的项目需要手动填入项目的代码路径、项目启动文件、资源路径。
|
||||
|
||||
**填好配置后,点确定按钮即开始创建转换项目。工具将在转换项目的目录下生成项目配置文件、日志文件夹、以及一个空的Egret项目。此时工具在后台进行以下一些操作:**
|
||||
|
||||
1. 调用egret的命令来创建一个新的egret项目LianLianKan。
|
||||
|
||||
提示:如果没有安装egret,则无法创建项目,现象就是在日志区没有任何输出信息,工具卡在这里。
|
||||
|
||||
2. 从工具的安装目录下copy启动文件EgretMain.ts、API转换配置表到到”输出目录/config“目录下。
|
||||
|
||||
3. 从工具安装目录下copy文件LoadingUI.ts到”输出目录/LianLianKan/src/LoadingUI.ts“。
|
||||
|
||||
4. copy类库(与flash一一对应的ts类库)到”输出目录/LianLianKan/src“下。
|
||||
|
||||
5. 生成项目属性文件conversion.cts,存储项目的配置信息。
|
||||
|
||||
如果成功创建了转换项目,在日志区有如下信息输出:
|
||||
|
||||
![](56b1ab989f694.png)
|
||||
|
||||
此时按钮”转换Flash项目“会高亮显示。
|
||||
|
||||
### 2. 转换项目
|
||||
|
||||
点按钮”转换Flash项目“,工具在后台将执行以下步骤:
|
||||
|
||||
#### 源码转换:
|
||||
|
||||
1)工具会根据一些好的语法转换规则和”输出路径/config“下的API映射关系转换as3源码到“输出路径/名称/src”目录下。
|
||||
|
||||
具体的源码转换步骤如下:
|
||||
|
||||
1. 载入API转换配置,分析配置表中的类信息
|
||||
|
||||
2. 载入as3源码,解析源码的语法结构,类的继承关系,基本类信息,如类的成员名称,类型信息等。
|
||||
|
||||
![](56b1ab98afb53.png)
|
||||
|
||||
3. 按照文件逐一进行类型检查、转换特殊语法结构、API名称变换,最后把该文件的语法树打印成ts文件。
|
||||
|
||||
![](56b1ab98bdbdc.png)
|
||||
|
||||
2) copy并适当修改”输出路径\config\EgretMain.ts”文件到”输出路径\名称\src\EgretMain.ts”,主要修改启动类的名称和Embed资源列表。
|
||||
|
||||
### 资源拷贝
|
||||
|
||||
自动copy Flash项目输出目录(如bin-debug)下的资源文件,如png、xml、txt等文件,到D:\ConversionOut\EgretGame\对应的目录下。
|
||||
|
||||
![](56b1ab98d19a8.png)
|
||||
|
||||
### swf资源转换
|
||||
|
||||
转换Flash项目输出目录下的swf资源文件,并生成对应的资源到
|
||||
|
||||
”输出路径\名称\resources\”对应的目录下
|
||||
|
||||
![](56b1ab98dffc5.png)
|
||||
|
||||
### 显示转换过程的统计信息
|
||||
|
||||
![](56b1ab98efc4a.png)
|
||||
|
||||
1) 代码文件转换率,统计了代码文件个数,以及成功生成的文件个数。
|
||||
|
||||
如果有文件生成失败则会在文件转换信息面板下显示
|
||||
|
||||
![](56b1ab990bea9.png)
|
||||
|
||||
1. 源码转换错误
|
||||
|
||||
例如在LianLianKan.as中写了如下代码:
|
||||
|
||||
![](56b1ab991d532.png)
|
||||
|
||||
则会在面板中有如下提示:
|
||||
|
||||
![](56b1ab992cda3.png)
|
||||
|
||||
出现这种情况就要根据提示查看源代码是否有语法错误,或者用了很生僻的写法,目前工具还没有记录这种写法。
|
||||
|
||||
2. 资源转换错误
|
||||
|
||||
遇到无法转换的swf文件,可以根据log信息查看哪个资源转换出错。目前工具对低版本swf文件的支持可能有问题,也缺少对视频等资源的支持。
|
||||
|
||||
可以采取的措施是暂时删除该类型资源或该swf文件,等待后续工具版本对资源的更多支持。
|
||||
|
||||
2) API转换率,是指用了多少个API,其中有API错误的个占比是多少,详细信息在
|
||||
|
||||
![](56b1ab993d585.png)
|
||||
|
||||
![](56b1ab994d310.png)
|
||||
|
||||
API的问题一共分为4种:
|
||||
|
||||
1. 缺少类信息。有以下几种情况:
|
||||
|
||||
情况一:文件转换失败,导致整个文件的结构信息都没有解析出来,其它代码中引用了这个文件的类或方法就会报缺少类信息错误。
|
||||
|
||||
情况二:用了第三方库swc,工具解析的过程中无法得知swc中的类信息。如果是这种情况请把swc中的代码文件复制到项目的src目录下。
|
||||
|
||||
情况三:使用了未支持的flash类库,比如AIR的一些类库,或者flex的类库,这种情况也会导致找不到类信息。
|
||||
|
||||
2. 缺少属性信息。主要是因为没有解析到相关类里有这个属性名称。
|
||||
|
||||
3. 没有实现的类。在API转换表(见附录)中填写了标志“是否转换实现”。
|
||||
|
||||
4. 没有实现的属性。在API转换表中填写了标志“是否转换实现”。
|
||||
|
||||
### 3. 编译项目
|
||||
|
||||
在代码和资源转换完成之后,下一步是编译项目。当然前提是项目转换之后没有严重的错误。
|
||||
|
||||
点第二步“编译Egret项目”。此时编译的是Egret的项目了。
|
||||
|
||||
如果出现编译错误请参考提示说明,或者参见开发者中心的[文档说明](http://edn.egret.com/cn/)。在代码和资源转换完成之后,下一步是编译项目。当然前提是项目转换之后没有严重的错误。
|
||||
|
||||
点第二步“编译Egret项目”。此时编译的是Egret的项目了。
|
||||
|
||||
如果出现编译错误请参考提示说明,或者参见开发者中心的[文档说明](http://edn.egret.com/cn/)。
|
||||
|
||||
### 4. 运行项目
|
||||
|
||||
点第三步“运行Egret项目”。
|
||||
|
||||
连连看小游戏在我的默认浏览器chrome上运行了。
|
||||
|
||||
![](56b1ab9bc0ca0.png)
|
||||
|
||||
注意,本地项目都会运行在3000端口上, 如果3000端口被占用,请先kill掉占用程序再尝试启动项目。见“附1:KILL 3000端口”。
|
||||
|
||||
### 5. 查看与调试
|
||||
|
||||
游戏运行起来之后可在浏览器中调试程序。建议用chrome启动游戏。
|
||||
|
||||
在chrome中右键菜单里选择“审查元素”,打开相应的的js文件,可以断点执行,查看变量的内容等。
|
||||
|
||||
选择Egret标签页可以查看当前帧率,可以定位到游戏中具体的对象上,然后在右侧更改该对象的属性可实时生效。例如我找到右侧一个小格子,对其旋转45度,效果如下:
|
||||
|
||||
![](56b1ab9f1566a.png)
|
||||
|
||||
附1:KILL 3000端口
|
||||
|
||||
MAC下:
|
||||
|
||||
打开终端:sudo lsof -i :3000
|
||||
|
||||
sudo kill -9 xxxx
|
||||
|
||||
Windows下:
|
||||
|
||||
先查询占用3000端口的pid:
|
||||
|
||||
netstat –ano | findstr 3000
|
||||
|
||||
杀掉进程:
|
||||
|
||||
Taskkill /pid xxxx /f
|
After Width: | Height: | Size: 132 KiB |
After Width: | Height: | Size: 43 KiB |
After Width: | Height: | Size: 706 KiB |
|
@ -0,0 +1,46 @@
|
|||
安装好EgretConversion后,为了快速上手,可以用工具自带的示例项目来熟悉基本操作流程。
|
||||
|
||||
**查看示例项目的流程如下:**
|
||||
|
||||
----
|
||||
|
||||
打开工具后,自动切换到了欢迎界面。
|
||||
|
||||
**1. 选择欢迎界面的“导入示例项目”->“示例项目一:连连看”。**
|
||||
|
||||
工具将自动跳转到“转换步骤”页面,并开始加压示例项目的过程,在下方的日志区会显示当前解压进度,大概20秒左右解压完成。
|
||||
|
||||
然后开始自动创建一个空egret项目并编译。
|
||||
|
||||
**2. 在创建egret项目完成后,按照转换页面的提示,依次点“转换Flash项目”,“编译Egret项目”,“运行Egret项目”,即可自动在浏览器中打开转换之后的html5游戏。**
|
||||
|
||||
![](56b1abe353e63.jpg)
|
||||
|
||||
**3.步走:**
|
||||
|
||||
![](56b1abe4280de.jpg)
|
||||
|
||||
运行效果:
|
||||
|
||||
![](56b1abe57ee5e.jpg)
|
||||
|
||||
可以看到游戏成功在浏览器页面上运行起来了,而没有使用flash player。
|
||||
|
||||
这里要注意的是:开发时最好使用chrome浏览器,如果当前无法自动弹出浏览器页面,可以手动在浏览器里打开
|
||||
|
||||
**3. 查看示例项目代码**
|
||||
|
||||
打开的示例项目源码位置如下,可用相应IDE打开查看。
|
||||
|
||||
源Flash builder项目:C:\Users\***\Documents\project\LianLianKan
|
||||
|
||||
生成的egret项目: C:\Users\***\Documents\project\llk\lianliankanhttp://localhost:3000/launcher/index.html。
|
||||
|
||||
**4. 修改代码查看转换结果**
|
||||
|
||||
如果修改原flash项目,需要从“转换Flash项目”这一步转换项目。
|
||||
|
||||
如果修改的是egret项目,从“编译Egret项目”这一步开始。
|
||||
|
||||
注意:“转换Flash项目”操作会重新生成所有代码,如果在转换后的egret项目有修改要注意备份。
|
||||
|
After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 33 KiB |
After Width: | Height: | Size: 22 KiB |
|
@ -0,0 +1,67 @@
|
|||
## 使用EgretConversion转换工具之前需要做哪些准备工作呢?
|
||||
|
||||
### 一. 在本机安装Egret环境
|
||||
|
||||
转换工具EgretConversion可将Flash的项目转换为基于Egret的项目。因此需要事先安装Egret Engine,否则工具无法运作。
|
||||
|
||||
Egret Engine下载地址在[http://www.egret.com/products/engine.html](http://www.egret.com/products/engine.html),这里提供了Egret最新发行版和各个历史版本,目前提供的有Windows和Mac两个版本的下载。
|
||||
|
||||
下载之后直接双击安装。
|
||||
|
||||
检查是否安装Egret Engine成功,可在命令行中输入Egret,如果列出了可用的Egret命令列表,这就表明已经安装成功。
|
||||
|
||||
下面是egret安装文档链接:
|
||||
|
||||
[安装与部署](../../Engine2D/projectConfig/installation/README.md)
|
||||
|
||||
二. 使用EgretConversion所需的Egret版本
|
||||
|
||||
工具使用特定版本的Egret,当前EgretConversion使用的是 [2.0版本的Egret](http://www.egret.com/products/engine.html)。
|
||||
|
||||
如果本机正在使用的Egret版本低于EgretConversion所要求的版本号,则可能出现转换后项目报错情况。
|
||||
|
||||
查看本机Egret版本的命令为`egret info`
|
||||
|
||||
这是我的本机版本:
|
||||
|
||||
![](56b1abb8c38c2.jpg)
|
||||
|
||||
配置本机Egret版本为EgretConversion可用的版本:
|
||||
|
||||
a. 在引擎管理面板升级Egret为最新版。[参考Egret引擎更新](http://edn.egret.com/cn/docs/page/581#检查更新按钮)
|
||||
|
||||
b. 切换egret版本:
|
||||
|
||||
通过在引擎管理面板配置Egret位置可以切换到其他版本Egret。
|
||||
|
||||
![](56b1abb8e5249.jpg)
|
||||
|
||||
点“更改”按钮选择其他路径下的egret为要使用的版本。
|
||||
|
||||
不同版本的Egret可从github获取到,egret的github地址是[https://github.com/egret-labs/egret-core](https://github.com/egret-labs/egret-core)。
|
||||
|
||||
更换Egret版本后用egret info命令检查最新版本号,然后重新启动EgretConversion工具,否则工具创建的egret项目依然是之前版本的。
|
||||
|
||||
注意:如果升级了EgretConversion,所需的Egret版本也可能会提升。打开EgretConversion后会自动检测到Egret的版本并提示升级。
|
||||
|
||||
### 三、安装EgretConversion
|
||||
|
||||
Egret配置正确后,接下来安装EgretConversion:
|
||||
|
||||
下载地址:http://www.egret.com/egretconversion,也可通过引擎管理面板获取和升级EgretConversion。
|
||||
|
||||
安装EgretConversion,安装过程的任何问题请联系我们的支持团队。
|
||||
|
||||
### 四、升级EgretConversion
|
||||
|
||||
在引擎管理面板中升级EgretConversion到最新的版本。打开EgretConversion,选择已存在的项目有如下类库升级提示:
|
||||
|
||||
![](56b1abb921522.jpg)
|
||||
|
||||
点更新配置升级旧项目到最新的工具类库。
|
||||
|
||||
EgretConversion联系方式:
|
||||
|
||||
官方QQ群:Egret Conversion VIP 249685517
|
||||
|
||||
官方论坛:[http://bbs.egret.com/forum.php?mod=forumdisplay&fid=70](http://bbs.egret.com/forum.php?mod=forumdisplay&fid=70)
|
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 34 KiB |
After Width: | Height: | Size: 24 KiB |
After Width: | Height: | Size: 9.8 KiB |
After Width: | Height: | Size: 44 KiB |
After Width: | Height: | Size: 47 KiB |
After Width: | Height: | Size: 64 KiB |
After Width: | Height: | Size: 56 KiB |
After Width: | Height: | Size: 79 KiB |
After Width: | Height: | Size: 43 KiB |
After Width: | Height: | Size: 50 KiB |
|
@ -0,0 +1,121 @@
|
|||
本文档对EgretConversion工具做个大概介绍,通过本文档可以总览工具的所有功能特征,每个功能的具体用法在之后相应的文档中做详细解释。
|
||||
|
||||
## 一、菜单
|
||||
|
||||
**菜单->文件**
|
||||
|
||||
![](56b1abcd6d6dd.jpg)
|
||||
|
||||
新建转换项目:这是EgretConversion的入口,所有的转换项目都要从这里创建。点击将弹出”新建转换项目“面板,填入项目名称、项目路径、项目类型、输出路径等几项参数。确定后将创建一个转换项目。
|
||||
|
||||
导入转换项目:导入一个之前已经创建好的转换项目。点击将弹出”导入项目“面板,选择或输入转换项目目录即可导入已存在的转换项目。
|
||||
|
||||
**菜单->帮助**
|
||||
|
||||
![](56b1abcdad74e.jpg)
|
||||
|
||||
欢迎界面:点击后标签页跳转到欢迎页
|
||||
|
||||
官网:点击在浏览器中打开Egret官网页面。
|
||||
|
||||
文档中心:点击在浏览器中打开EDN中心。
|
||||
|
||||
官方论坛:点击在浏览器中打开官方论坛。
|
||||
|
||||
使用手册:点击在浏览器中打开EgretConversion文档页面。
|
||||
|
||||
提交bug:点击弹出”问题反馈“面板,可直接在这里提交遇到的bug,或者给工具的开发团队提任何建议等反馈。并可上传附件。
|
||||
|
||||
关于EgretConversion:点击打开关于面板,主要用于查看当前EgretConversion版本号。
|
||||
|
||||
## 二、工具栏
|
||||
|
||||
![](56b1abcdd1b27.jpg)
|
||||
|
||||
1:"新建转换项目"按钮,功能同菜单->文件->新建转换项目。
|
||||
|
||||
2:"导入转换项目"按钮,功能同菜单->文件->导入转换项目。
|
||||
|
||||
3:"转换"按钮,点击将开始转换Flash的项目到Egret的项目,转换过程在日志区中会有相关提示。详见后续文档。
|
||||
|
||||
4:"编译"按钮,点击将编译转换后的Egret项目,编译过程在日志区有相关提示,编译错误会直接显示在日志区。详见后续文档。
|
||||
|
||||
5:"运行"按钮,如果编译通过,点击将直接运行egret的项目。详见后续文档。
|
||||
|
||||
6:"停止运行"按钮,如果转换后的项目正在运行,点击可关闭egret内部服务器,再刷新浏览器页面项目就无法运行了。参考运行项目。
|
||||
|
||||
7:"SWF转换工具"按钮,点击打开转换swf面板,拖入swf文件即可单独转换为egret项目的资源。这部分在后面的文档中做详细解释。
|
||||
|
||||
8:"问题反馈"按钮,功能同菜单->帮助->提交Bug。
|
||||
|
||||
## 三、项目工作区
|
||||
|
||||
![](56b1abcde7e59.jpg)
|
||||
|
||||
项目工作区位于界面左侧,这里列出了之前创建的转换项目。点选某个项目,在工具中所做的操作都是针对该项目。左键选择项目,右键可打开快捷菜单:
|
||||
|
||||
![](56b1abce13e7e.jpg)
|
||||
|
||||
删除:删除选中的转换项目。会弹出删除确定面板:
|
||||
|
||||
![](56b1abce322a2.jpg)
|
||||
|
||||
同时删除包含:删除项目的同时删掉转换项目目录下的所有文件。
|
||||
|
||||
不删除内容:只删除项目在工作区的引用,不真实删项目文件。
|
||||
|
||||
项目属性:点击打开项目的属性配置界面:
|
||||
|
||||
![](56b1abce99c22.jpg)
|
||||
|
||||
浏览输出目录:点击直接打开转换项目目录。
|
||||
|
||||
新建转换项目:功能同菜单->文件->新建转换项目。
|
||||
|
||||
导入转换项目:功能同菜单->文件->导入转换项目。
|
||||
|
||||
**标签页**
|
||||
|
||||
![](56b1abced2c08.jpg)
|
||||
|
||||
1:转换步骤:转换项目时的工作区,详见下文。
|
||||
|
||||
2:转换信息:转换完项目后,代码文件与swf文件的转换情况报告在这里全部列出。
|
||||
|
||||
3:语法差异:在as3代码转换到ts代码后,typescript与actionscript不兼容语法都在这里列出,可以对照提示逐条修改。详见后续文档的语法差异部分。
|
||||
|
||||
4:API警告统计:转换过程中遇到的API或者不可转换的as3类在这里列出,详见后续文档如何手动修复此类警告信息。
|
||||
|
||||
5:欢迎界面:转换工具的欢迎页。有转换项目、导入项目等快捷方式,示例项目,相关教程链接等。
|
||||
|
||||
6:登陆:提供登陆和注册功能,登陆后可以特定身份提交bug反馈给官方。
|
||||
|
||||
## 四、日志区
|
||||
|
||||
![](56b1abcf53c29.jpg)
|
||||
|
||||
日志区实时显示转换项目当前进度,log信息,提示信息等。
|
||||
|
||||
## 五、转换步骤标签页:
|
||||
|
||||
![](56b1abcf709b9.jpg)
|
||||
|
||||
转换Flash项目:功能同工具栏->转换按钮
|
||||
|
||||
编译Egret项目:功能同工具栏->编译按钮
|
||||
|
||||
运行Egret项目:功能同工具栏->运行按钮
|
||||
|
||||
## 六、转换率评估区
|
||||
|
||||
![](56b1abcfbe8a8.jpg)
|
||||
|
||||
* 代码文件转换率:as3文件到ts文件转换情况,每个as3的文件都会被转换对应的ts文件,语法从actionscript3转换为typescript的语法。这里显示了文件转换个数。点击条目会切换到”转换信息“页面,在这里可看到具体的哪个文件转换成功了,哪个转换失败了。
|
||||
|
||||
* API转换率:统计了Flash的API转换到Egret过程中,API成功转换的个数和比例,此数值越高越好。点击条目会切换到“API警告统计”标签页。见“API警告统计”说明。
|
||||
|
||||
* 类型识别率:统计了as3与ts在语法上类型转换一项上的个数统计与转换比例,此数值越高越好。点击条目会切换到“语法差异”。见“语法差异”说明。
|
||||
|
||||
* swf文件转换率:swf文件被解析的个数统计。点击条目会切换到”转换信息“页面,在这里可看到具体的哪个文件转换成功了,哪个转换失败了。
|
||||
|
||||
* 总体评价:对上述几项数值做出的综合评估,大体反应当前项目转换到egret的比例。此项数值越高越好,但也不表明100%就表示完全转换成功,不到100%就是转换失败,具体情况需视项目而论。
|
|
@ -0,0 +1,100 @@
|
|||
* EgretConversion适用范围
|
||||
|
||||
使用Flash工具actionscript3.0语言开发的页游项目。
|
||||
|
||||
通过EgretConversion的转换,可以把项目中as3代码转换为基于egret的typescript代码,把swf资源文件转换为egret项目可以使用的资源类型。
|
||||
|
||||
* EgretConversion不适用范围
|
||||
|
||||
暂不支持3D内容。
|
||||
|
||||
暂不支持Starling项目。
|
||||
|
||||
不支持flex组件及flash原生组件(fl下的组件)。
|
||||
|
||||
不支持blendMode,遮罩。
|
||||
|
||||
* EgretConversion需要的Egret Engine版本
|
||||
|
||||
EC2.3.0支持egret2.0.5之前的版本,EC2.5+支持egret2.5+
|
||||
|
||||
* 是否支持骨骼动画
|
||||
|
||||
暂不支持
|
||||
|
||||
* 可否使用第三方库
|
||||
|
||||
必须使用开源的第三方,不支持第三方以SWC的方式使用。需要将三方库的源码放入项目中作为项目代码的一部分,如果SWC中有资源,需要提取出来改为用loader的方式加载使用。
|
||||
|
||||
* 是否支持链接类,链接类命名有什么限制
|
||||
|
||||
支持链接类,链接类命名规则无限制。
|
||||
|
||||
* 是否支持中文路径和文件名
|
||||
|
||||
支持。
|
||||
|
||||
* 是否支持加密
|
||||
|
||||
不支持加密过的swf文件解析,或者其他方式改写过swf。
|
||||
|
||||
* 为什么swf中的矢量图在转换为Egret后有锯齿?
|
||||
|
||||
swf中的矢量图在Egret端以位图的形式呈现,如果缩放则会出现模糊有锯齿的现象。现已默认开启图片的smoothing效果来抗锯齿。
|
||||
|
||||
* 是否支持转换swf中的音频
|
||||
|
||||
部分支持,可以导出库里的音频文件,暂不支持时间轴上的音频
|
||||
|
||||
* 是否支持转换swf中的视频
|
||||
|
||||
不支持
|
||||
|
||||
* 是否支持swf中的帧代码
|
||||
|
||||
不支持
|
||||
|
||||
* 是否支持滤镜Filter
|
||||
|
||||
不支持
|
||||
|
||||
* 是否支持九切
|
||||
|
||||
支持位图九切,支持矢量图形九切。
|
||||
|
||||
* 是否支持文档类
|
||||
|
||||
不支持swf的文档类。如果有文档类,把文档类与swf分离。
|
||||
|
||||
* 是否支持embed标签
|
||||
|
||||
支持嵌入图片和文本文件,不支持嵌入swf、字体、音频等。
|
||||
|
||||
* 对文本的字体支持
|
||||
|
||||
swf中的文本在转换之后都会使用设备字体来显示。不支持嵌入字,要使用嵌入字需要在egret项目中通过TextureMerger工具来制作。
|
||||
|
||||
* 无法导入示例Demo?
|
||||
|
||||
现象:点击欢迎界面的“导入示例项目”,选择示例项目,但工具卡住无法创建Egret项目。
|
||||
|
||||
解决办法:1.检查是否安装了Egret。2.以管理员方式重新打开工具。
|
||||
|
||||
* 是否支持as1、as2时代的项目
|
||||
|
||||
大部分此类项目未经过测试。as1、as2时代的项目可以尝试转换,但是建议改写为as3项目再转
|
||||
|
||||
* 是否支持老版swf资源(flash8以前avm1格式)
|
||||
|
||||
一般支持,可以像使用avm2的swf那样使用。不过对于avm1编译的的swf(flash8以前版本),最好用Flash Pro或者CC重新导出为avm2格式,否则有可能无法分析其中一些资源。
|
||||
|
||||
* 转换的swf文件在H5项目中使用
|
||||
|
||||
转换swf得到的资源只能在egret项目中使用,不支持其他H5项目
|
||||
|
||||
|
||||
EgretConversion联系方式:
|
||||
|
||||
官方QQ群:Egret Conversion VIP 249685517
|
||||
|
||||
官方论坛:http://bbs.egret.com/forum.php?mod=forumdisplay&fid=70
|
After Width: | Height: | Size: 394 KiB |
|
@ -0,0 +1,108 @@
|
|||
![](LmDmsz1.jpg)
|
||||
|
||||
## Egret Conversion 2.0.1 特性解读
|
||||
|
||||
Egret Conversion是一款可以快速的将现有的Flash项目转换到Egret HTML5项目的转换工具。随着 Egret Conversion 版本的不断迭代,其转换项目的成功率进一步提升。
|
||||
|
||||
### 单文件转换
|
||||
|
||||
在2.0.0以前的版本中我们有着非常多的需求是,转换一些功能相对独立的代码模块,如A*,通信库以及自定义的功能类等等,旧有的方法:
|
||||
|
||||
1. 建立一个新的Flash项目。
|
||||
|
||||
1. 复制所需代码到新的项目中。
|
||||
|
||||
1. 新建一个转换项目导入Flash项目。
|
||||
|
||||
1. 转换Flash项目-》编辑Egret项目-》运行
|
||||
|
||||
我们每次都需要通过复杂的步骤去转换我们需要的一些功能模块或资源,现在通过单文件转换功能,我们可以非常方便的将ActionScript 3代码以及SWF转换为Egret项目所使用的语言或资源,不管从转换成本与调试成本都极大的提高了我们效率,通过拖拽方式进行便捷转换。友好反馈机制,可以了解到转换过程中一些问题所在,方便定位去修复问题。
|
||||
|
||||
> 注意:这里指的单文件转换不只是单个文件,也可以是文件夹形式。
|
||||
|
||||
### 支持Flash Pro项目
|
||||
|
||||
通过Flash Pro建立的项目或文档类现在可以进行导入。
|
||||
|
||||
![](wtBCdKy.png)
|
||||
|
||||
现在Egret Conversion可以直接导入的项目包含Flash Pro、Flash Builder、FlashDeveloper以及自定义模式。自定义模式允许我们设置代码路径、AS启动类、资源路径三项来确定我们项目导入的基本参数。
|
||||
|
||||
### 支持final public class的写法
|
||||
|
||||
后续对于新添加语法分析的部分直接看代码比较直观,现在可以转换类似的代码:
|
||||
|
||||
```
|
||||
package
|
||||
{
|
||||
public final class Math
|
||||
{
|
||||
//...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 支持全局函数的写法
|
||||
|
||||
```
|
||||
package starling.utils
|
||||
{
|
||||
public function deg2rad(deg:Number):Number
|
||||
{
|
||||
return deg / 180.0 * Math.PI;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 支持全局变量的写法
|
||||
|
||||
```
|
||||
package Math
|
||||
{
|
||||
public var E:Number = 2.718 ;
|
||||
}
|
||||
```
|
||||
|
||||
### 引擎更新
|
||||
|
||||
Egret Conversion是基于Egret引擎最新版进行语法转换,有时候我们由于调试或其他原因,我们的引擎版本可能低于转换要求的版本。使我们转换出现一些问题,主要集中在缺少引擎新增API。 现在通过内部的检测机制给出提示信息定位问题:
|
||||
|
||||
* 为保证转换项目正常运行,请更新 Egret Engine 到 2.0.n
|
||||
|
||||
* 未找到Egret引擎,请安装Egret引擎
|
||||
|
||||
### Retina屏幕适配
|
||||
|
||||
### 需要手动解决的
|
||||
|
||||
目前遇到的一些问题,不过这些问题都可以通过简单方式避免:
|
||||
|
||||
1. int.MAXVALUE 转换后变成 number["MAXVALUE" + ""] 这个是要手动修改成 Number.MAX_VALUE 当然这样不能保证你的逻辑是对的。
|
||||
|
||||
1. Socket 转换 后变成 WebSocket 的同时服务器也是要修改的,不然会出现 WebSocket connection to 'ws://xxx:8080/' failed: Connection closed before receiving a handshake response 握手失败。
|
||||
|
||||
1. set、get同名方法子类重写会出现出错。目前需要规避这类写法。
|
||||
|
||||
1. namespace 暂时不推荐使用。Retina屏幕适配与代码以及资源无关,主要是为了软件在一些高分屏(视网膜显示屏)提供更加友好的体验。其实从这里能看出团队对于用户的的态度。不过还是希望把重点放在对代码与资源的转换上。
|
||||
|
||||
### 修复
|
||||
|
||||
* [修复] ts 修改LoaderInfo.ts 资源重复加载
|
||||
|
||||
* [修复]英文状态下Api详细提示界面排版错乱
|
||||
|
||||
* [修复]修改导入项目不能转换项目
|
||||
|
||||
* [修复]修改再次打开Egret Conversion 已创建项目运行报错
|
||||
|
||||
* [修复]修复代码转换bug,跳过namespace导致的无法转换代码(代码转换遇到namespace 失败 ,转换继续进行)
|
||||
|
||||
* [修复]单独转换swf卡死问题
|
||||
|
||||
* [修复]修改再次打开Egret Conversion 已创建项目运行报错
|
||||
|
||||
* [修复]修复代码转换bug,跳过namespace导致的无法转换代码
|
||||
|
||||
* [优化]界面表格放缩异常
|
||||
|
||||
* [优化]单独转换swf弹框增加提示信息,转换过程进度等
|
After Width: | Height: | Size: 7.0 KiB |
After Width: | Height: | Size: 394 KiB |
After Width: | Height: | Size: 6.5 KiB |
After Width: | Height: | Size: 3.8 KiB |
After Width: | Height: | Size: 8.5 KiB |
After Width: | Height: | Size: 5.8 KiB |
After Width: | Height: | Size: 5.9 KiB |
|
@ -0,0 +1,67 @@
|
|||
![](566002be9965b.jpg)
|
||||
|
||||
## Egret Conversion 2.2.0 特性解读
|
||||
|
||||
在 Egret Conversion 进入2.0以来,团队更加注重优化用户体验,解决实际项目转换过程中遇到的问题。让我们一起来看看,刚刚发布的 Egret Conversion 2.2.0 带来了哪些优化和新功能来帮助我们把 Flash 项目转换成 Egret 项目吧。
|
||||
|
||||
### 遇到类库需要升级怎么办?
|
||||
|
||||
需要手动拷贝过去?不需要这么做。在新版本的 Egret Conversion 里,选择项目,如果需要升级类库的话将会有下面的提示:
|
||||
|
||||
![](566002beba851.png)
|
||||
|
||||
点击更新项目配置,工具会将旧项目升级到最新的工具类库。Egret Conversion 新增的检测项目类库是否需要升级并给出提示的功能,方便我们在转换过程中快速定位到问题所在,并轻松解决之。同样的,在其他方面 Egret Conversion 2.2.0 也做出了相应的优化改善。
|
||||
|
||||
### 优化的swf转换工具
|
||||
|
||||
单swf文件导出资源增加识别项目源码中swf的能力,项目源代码路径下swf可通过SWF转换工具(SWFExporter)直接生成到egret资源目录下。
|
||||
|
||||
![](566002bed5690.png)
|
||||
|
||||
遇到坑了怎么办呢?在日志区域打印着转换的过程,我们可以直接看到遇到了哪些坑,是否能跳过去。
|
||||
|
||||
![](566002bee0d7a.png)
|
||||
|
||||
上面我拖拽了两个swf文件,可以看到头一个转换成功,并且输出到了相关文件夹下。第二个文件告诉我转换失败,并不是一个swf文件。看来我要检查一下我的文件本身了。转换成功的文件我就可以在 egret 项目中使用了。
|
||||
|
||||
### 提升转出项目的质量
|
||||
|
||||
我们把 Flash 项目转换成 egret 项目之后,当然要先看看转换的效果如何。为了提高转出项目的质量 Egret Conversion 2.2.0 修复和优化了很多内容:
|
||||
|
||||
* 动态文本颜色只显示白色的bug修复,现在可以显示正确的颜色了。
|
||||
|
||||
* 动画播放过程中跳动现象已修复。
|
||||
|
||||
* 优化了动画播放性能,增加了缓存机制。
|
||||
|
||||
* UI对复杂多层级面板支持更好。
|
||||
|
||||
### 新特性
|
||||
|
||||
* 增加对位图填充矢量图形的支持,完美支持填充的位图缩放、旋转及打散后使用部分图形。
|
||||
|
||||
* 静态文本使用字形字体,不再导出为图片。统一转换为使用设备字体,以提升效率和支持文字着色。
|
||||
|
||||
### 发布项目
|
||||
|
||||
现在可以直接将转换好的 egret 项目发布出来了。
|
||||
|
||||
![](566002bef10be.png)
|
||||
|
||||
转换 Flash 项目到 egret 项目之后可以编译-运行 egret 项目来查看效果。之后可以直接点击上面的发布按钮来发布一份 html5 版本的项目啦。
|
||||
|
||||
![](566002bf0d586.png)
|
||||
|
||||
上面就是刚刚发布出来的html5项目。
|
||||
|
||||
#### Egret Conversion 还在不断完善当中
|
||||
|
||||
Egret Conversion 2.2.0 还修优化了很多地方,比如大幅减少了工具卡死闪退等。
|
||||
|
||||
Egret Conversion 还在不断完善当中,希望您能留下宝贵意见。
|
||||
|
||||
EgretConversion联系方式:
|
||||
|
||||
官方QQ群:Egret Conversion VIP 249685517
|
||||
|
||||
官方论坛:http://bbs.egret.com/forum.php?mod=forumdisplay&fid=70
|
|
@ -0,0 +1,8 @@
|
|||
Egret Conversion v2.5.3
|
||||
|
||||
更新日志
|
||||
|
||||
[更新]对engine 3.0.5的支持。
|
||||
[修复]修复 BitmapData 的 BUG。
|
||||
Windows版本下载
|
||||
Mac版本下载
|
After Width: | Height: | Size: 185 KiB |
After Width: | Height: | Size: 6.0 KiB |
After Width: | Height: | Size: 3.9 KiB |
After Width: | Height: | Size: 152 KiB |
After Width: | Height: | Size: 4.8 KiB |
After Width: | Height: | Size: 5.1 KiB |
After Width: | Height: | Size: 3.8 KiB |
After Width: | Height: | Size: 3.9 KiB |
After Width: | Height: | Size: 5.0 KiB |
After Width: | Height: | Size: 4.7 KiB |
|
@ -0,0 +1,148 @@
|
|||
Version 2.0.0
|
||||
|
||||
Egret Technology
|
||||
|
||||
Egret Conversion 2.0 产品白皮书
|
||||
|
||||
2015年7月
|
||||
|
||||
![](56b1ab7ed42f8.png)
|
||||
|
||||
**Egret Conversion 2.0 产品白皮书**
|
||||
|
||||
## 什么是Egret Conversion 2.0?
|
||||
|
||||
Egret Conversion是白鹭时代推出的一款重要产品,可以快速的将现有的Flash项目转换到Egret HTML5项目。界面友好易用,无需其他工具的辅助。功能强大可扩展,支持AS3各种复杂语法特性,涵盖绝大部分的Flash API,并且支持swf资源的直接转换。
|
||||
|
||||
随着Flash技术移动版的缺失和HTML5市场的不断成熟,越来越多的Flash项目需要向HTML5平台迁移转换。而Flash工程师更加迫切的需要选择一款高效易用,成熟度和认可度高的HTML5引擎作为技术移植和项目转换的目标。
|
||||
|
||||
Egret Conversion提供的是一整套的项目转换解决方案。不仅能够帮助开发者高效的迁移Flash项目,而且提供后期项目优化和维护的高效解决方案;不仅帮助生成Egret HTML5项目,还可以帮助转换后的项目更好的接入HTML5整个生态渠道,享受更好的后期服务。
|
||||
|
||||
Egret Conversion的产品特性:
|
||||
|
||||
* 集成化界面,转换过程的所有操作均在这一个工具中完成。通过自带的demo项目可迅速了解整个转换流程。
|
||||
|
||||
* 支持99%的AS3语法特性,甚至包括Embed等标签,Dictionary,XML,For each...
|
||||
|
||||
* 对Flash API的支持达到90%以上。
|
||||
|
||||
* API定制功能可以轻松自行扩展尚未支持的API,无需等待新版本的发布。
|
||||
|
||||
* 轻松扩展第三方库。可用工具快速转换第三方库。
|
||||
|
||||
* 对swf强大的支持,支持直接转换swf资源。对位图、文本、SimpleButton、矢量动画、帧动画、声音等常用类型有良好的支持。
|
||||
|
||||
* 支持动态创建链接类对象。
|
||||
|
||||
* 转换过程全面的智能提示。
|
||||
|
||||
* 丰富详尽的转换结果报告,包括语法兼容性及转换率报告,API转换和警告列表,类型提示列表报告,资源转换报告等。
|
||||
|
||||
|
||||
|
||||
## Egret Conversion 2.0能用来做什么?
|
||||
|
||||
1. 转换AS3项目到Egret HTML5项目。
|
||||
|
||||
2. 转换Flash第三方类库、个人类库到Egret HTML5项目。
|
||||
|
||||
3. 支持使用Flash制作的swf资源转换成Egret可用的资源。
|
||||
|
||||
4. 支持位图,动画,矢量等单个资源的转换。
|
||||
|
||||
|
||||
|
||||
## 为什么选择Egret Conversion 2.0?
|
||||
|
||||
### 1. 强大的HTML5游戏引擎Egret Engine
|
||||
|
||||
* Flash页游领域是个成熟的市场,有很多成功优秀的案例。随着Flash移动版的缺失和HTML5市场的逐渐火爆,大量优秀的传统Flash项目需要快速低成本的往移动端迁移。而Flash开发者也需要寻找一个市场覆盖广,熟识度高,易上手的引擎做项目的平台迁移。
|
||||
|
||||
* 白鹭引擎Egret Engine为HTML5而生,引领H5游戏整个生态的发展,其基于TypeScript语言封装的语法结构与Flash AS3非常相似,所以Egret成为Flash开发者在做项目转换时考虑的首选方向。
|
||||
|
||||
### 2. 项目转换功能的强大
|
||||
|
||||
* 支持AS3的绝大部分语法结构,类、接口、函数、各种语句、操作符等。
|
||||
|
||||
* 支持AS3的特殊语法结构和类型,如Embed、for each和XML、Dictionary等。
|
||||
|
||||
* 支持Flash制作的swf资源的转换。
|
||||
|
||||
### 3. 简洁的操作,实现高效转换
|
||||
|
||||
无需任何配置,从打开Egret Conversion 2.0到转换完成一个Egret项目只需简单几步操作即可。
|
||||
|
||||
![](56b1ab7e9c3df.jpg)
|
||||
|
||||
### 4. 全面友好的提示,支持错误的快速定位和解决
|
||||
|
||||
简洁的转换率报表让你了解整体的转换情况。
|
||||
|
||||
![](56b1ab7f293c3.png)
|
||||
|
||||
在转换过程中不可避免的会出现Flash和Egret不兼容的地方,比如语法兼容性问题,API兼容性问题,这些都不用你担心,工具会告诉你问题出在哪,只要按照我们建议的方案修改即可。
|
||||
|
||||
### 5. 强大的后续Egret项目调优,打包,发布以及运营的一站式解决方案的支持
|
||||
|
||||
选择了Egret Conversion 2.0就是选择了Egret HTML5工具流和发布平台解决方案,从产品研发,项目转换,调试优化,打包发布到上线运营,一站式解决方案,解决后顾之忧。
|
||||
|
||||
转换后的Egret项目运行在集成Runtime的渠道平台上,将获得接近于原始页游项目的性能体验。Egret开放平台更可以帮助转换后的项目迅速接入HTML5主流渠道,实现流量变现。
|
||||
|
||||
![](56b1ab7fb9336.jpg)
|
||||
|
||||
## Egret Conversion 2.0 入门
|
||||
|
||||
**使用Egret Conversion 2.0之前需要先下载更新Egret Engine 最新版本。从官网下载Egret Engine:[http://www.egret.com/products/engine.html](http://www.egret.com/products/engine.html)**
|
||||
|
||||
* 新建一个转换项目
|
||||
|
||||
![](56b1ab7fd7fa7.png)
|
||||
|
||||
点击确定后会在输出路径D:\ConversionOut下创建一个名为EgretGame的Egret项目,并且Copy一些必要的配置文件到D:\ConversionOut\config目录下。
|
||||
|
||||
* 点击转换按钮
|
||||
|
||||
![](56b1ab8004933.png)
|
||||
|
||||
1) 源码转换。工具会根据已写好的语法转换规则和D:\ConversionOut\config目录下的API映射关系转换as3源码到D:\ConversionOut\EgretGame\src目录下。
|
||||
|
||||
2) 资源拷贝。自动copy Flash项目输出目录(如bin-debug)下的资源文件,如png、xml、txt等文件,到D:\ConversionOut\EgretGame\对应的目录下。
|
||||
|
||||
3) swf资源转换。转换Flash项目输出目录下的swf资源文件,并生成对应的资源到D:\ConversionOut\EgretGame\resources\对应的目录下
|
||||
|
||||
在上面的每一个过程中都会输出日志到主界面下面的日志面板中:
|
||||
|
||||
![](56b1ab80266aa.png)
|
||||
|
||||
并且生成一个转换统计结果:
|
||||
|
||||
![](56b1ab805b4a6.png)
|
||||
|
||||
统计结果的每一项都会反映当前项目的转换概况。
|
||||
|
||||
* 点击编译按钮
|
||||
|
||||
![](56b1ab8075879.png)
|
||||
|
||||
点击后工具会调用Egret Engine的build命令,编译转换后的Egret项目。
|
||||
|
||||
编译的错误提示会在日志窗口显示出来。
|
||||
|
||||
* 点击运行按钮
|
||||
|
||||
![](56b1ab80979fd.png)
|
||||
|
||||
点击后工具会调用Egret Engine的run命令,可以在浏览器中预览Egret项目效果。
|
||||
|
||||
更加详细的Egret Conversion 2.0使用方法请参考:[http://edn.egret.com/cn/](http://edn.egret.com/cn/)
|
||||
|
||||
更多信息
|
||||
|
||||
Egret官方网站 [http://www.egret.com](http://www.egret.com)
|
||||
|
||||
Egret Conversion 2.0产品页 [http://www.egret.com/products-conversion](http://www.egret.com/products-conversion)
|
||||
|
||||
开发者中心 [http://edn.egret.com/cn/](http://edn.egret.com/cn/)
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,347 @@
|
|||
|
||||
```javascript
|
||||
{
|
||||
// DragonBones 数据名称
|
||||
"name": "dragonBonesName",
|
||||
// 数据版本
|
||||
"version": "5.0",
|
||||
// 兼容版本
|
||||
"compatibleVersion": "4.5",
|
||||
// 动画帧频
|
||||
"frameRate": 24,
|
||||
// 自定义数据 (可选属性 默认: null)
|
||||
"userData": null,
|
||||
// 骨架列表
|
||||
"armature": [{
|
||||
// 骨架名称 (一个 DragonBones 数据可包含多个骨架)
|
||||
"name": "armatureName",
|
||||
// 动画帧频 (可选属性 默认: 使用全局帧频)
|
||||
"frameRate": 24,
|
||||
// 动画类型 (可选属性 默认: "Armature")
|
||||
// ["Armature": 骨骼动画, "MovieClip": 基本动画, "Stage": 场景动画]
|
||||
"type": "Armature",
|
||||
// 自定义数据 (可选属性 默认: null)
|
||||
"userData": null,
|
||||
// 添加到舞台后的默认行为列表 (可选属性 默认: null)
|
||||
"defaultActions": [
|
||||
// 此骨架播放指定动画
|
||||
["gotoAndPlay", "animationName"],
|
||||
// 此骨架播放指定动画并停止
|
||||
["gotoAndStop", "animationName"],
|
||||
],
|
||||
// 此骨架包含的骨骼列表
|
||||
"bone": [{
|
||||
// 骨骼名称
|
||||
"name": "boneName",
|
||||
// 父级骨骼的名称
|
||||
"parent": "parentBoneName",
|
||||
// 自定义数据 [任何类型] (可选属性 默认: null)
|
||||
"userData": null,
|
||||
// 骨骼注册到骨架的位移/ 斜切/ 缩放 (可选属性 默认: null)
|
||||
"transform": {
|
||||
"x": 0.00, // 水平位移 (可选属性 默认: 0.00)
|
||||
"y": 0.00, // 垂直位移 (可选属性 默认: 0.00)
|
||||
"skX": 0.0000, // 水平斜切 (可选属性 默认: 0.0000)
|
||||
"skY": 0.0000, // 垂直斜切 (可选属性 默认: 0.0000)
|
||||
"scX": 1.0000, // 垂直缩放 (可选属性 默认: 1.0000)
|
||||
"scY": 1.0000, // 垂直缩放 (可选属性 默认: 1.0000)
|
||||
}
|
||||
}],
|
||||
// 此骨架包含的插槽列表
|
||||
"slot": [{
|
||||
// 插槽名称
|
||||
"name": "slotName",
|
||||
// 插槽所属的骨骼名称
|
||||
"parent": "parentBoneName",
|
||||
// 默认显示对象的索引 (可选属性 默认: 0)
|
||||
"displayIndex": 0,
|
||||
// 混合模式 (可选属性 默认: null)
|
||||
"blendMode": null,
|
||||
// 自定义数据 [任何类型] (可选属性 默认: null)
|
||||
"userData": null,
|
||||
// 显示对象的颜色叠加 (可选属性 默认: null)
|
||||
"color": {
|
||||
"aM": 100, // 透明叠加 [0~100] (可选属性 默认: 100)
|
||||
"rM": 100, // 红色叠加 [0~100] (可选属性 默认: 100)
|
||||
"gM": 100, // 绿色叠加 [0~100] (可选属性 默认: 100)
|
||||
"bM": 100, // 蓝色叠加 [0~100] (可选属性 默认: 100)
|
||||
"aO": 0.00, // 透明偏移 [-255~255] (可选属性 默认: 0)
|
||||
"rO": 0.00, // 红色偏移 [-255~255] (可选属性 默认: 0)
|
||||
"gO": 0.00, // 绿色偏移 [-255~255] (可选属性 默认: 0)
|
||||
"bO": 0.00, // 蓝色偏移 [-255~255] (可选属性 默认: 0)
|
||||
},
|
||||
// 添加到舞台后的行为列表 (可选属性 默认: null)
|
||||
"actions": [
|
||||
// 子骨架播放指定动画 (仅对显示对象为骨架时有效)
|
||||
["gotoAndPlay", "animationName"],
|
||||
|
||||
// 子骨架播放指定动画并停止 (仅对显示对象为骨架时有效)
|
||||
["gotoAndStop", "animationName"],
|
||||
]
|
||||
}],
|
||||
// 此骨架包含的皮肤列表
|
||||
"skin": [{
|
||||
// 皮肤名称
|
||||
"name": "skinName",
|
||||
// 此皮肤包含的插槽列表
|
||||
"slot": [{
|
||||
// 插槽名称
|
||||
"name": "slotName",
|
||||
// 此插槽包含的显示对象列表
|
||||
"display": [{
|
||||
// 显示对象名称
|
||||
"name": "displayName",
|
||||
// 显示对象类型 (可选属性 默认: "image")
|
||||
// ["image": 贴图, "armature": 骨架, "mesh": 网格, "boundingBox": 包围盒, ... 其他扩展的类型]
|
||||
"type": "image",
|
||||
// 子骨架指向的骨架名、网格包含的贴图名 (可选属性 默认: null, 仅对子骨架、网格有效)
|
||||
"path": "path",
|
||||
// 共享网格的索引 (可选属性 默认: null, 仅对网格有效)
|
||||
"share": "meshName",
|
||||
// 是否继承动画 (可选属性 默认: true, 仅对共享网格有效)
|
||||
"inheritFFD": true,
|
||||
// 包围盒类型 (可选属性 默认: "rectangle", 仅对包围盒有效)
|
||||
// ["rectangle": 矩形, "ellipse": 椭圆, "polygon": 自定义多边形]
|
||||
"subType": "rectangle",
|
||||
// 显示对象颜色 (可选属性 默认: 0, 仅对包围盒有效)
|
||||
"color": 0,
|
||||
// 显示对象相对于骨骼的位移/ 斜切/ 缩放 (可选属性 默认: null)
|
||||
"transform": {
|
||||
"x": 0.00, // 水平位移 (可选属性 默认: 0.00)
|
||||
"y": 0.00, // y 垂直位移 (可选属性 默认: 0.00)
|
||||
"skX": 0.0000, // 水平斜切 (可选属性 默认: 0.0000)
|
||||
"skY": 0.0000, // 垂直斜切 (可选属性 默认: 0.0000)
|
||||
"scX": 1.0000, // 垂直缩放 (可选属性 默认: 1.0000)
|
||||
"scY": 1.0000, // 垂直缩放 (可选属性 默认: 1.0000)
|
||||
},
|
||||
// 显示对象的轴点 (可选属性 默认: null, 对骨架无效)
|
||||
"pivot": {
|
||||
"x": 0.50, // 水平轴点 [0.00~1.00] (可选属性 默认: 0.50)
|
||||
"y": 0.50, // 垂直轴点 [0.00~1.00] (可选属性 默认: 0.50)
|
||||
},
|
||||
// 矩形或椭圆的宽高 (可选属性 默认: 0, 仅对包围盒有效),
|
||||
"width": 100, "height": 100,
|
||||
// 顶点相对显示对象轴点的坐标列表 (可选属性 默认: null, 仅对网格或自定义多边形包围盒有效)
|
||||
// [x0, y0, x1, y1, ...]
|
||||
"vertices": [-64.00, -64.00, 64.00, -64.00, 64.00, 64.00, -64.00, 64.00],
|
||||
// 顶点的 UV 坐标列表 (可选属性 默认: null, 仅对网格有效)
|
||||
// [u0, v0, u1, v1, ...]
|
||||
"uvs": [0.0000, 0.0000, 1.0000, 0.0000, 1.0000, 1.0000, 0.0000, 1.0000],
|
||||
// 三角形顶点索引列表 (可选属性 默认: null, 仅对网格有效)
|
||||
"triangles": [0, 1, 2, 2, 3, 0],
|
||||
// 顶点权重列表 (可选属性 默认: null, 仅对网格有效)
|
||||
// [骨骼数量, 骨骼索引, 权重, ..., ...]
|
||||
"weights": [1, 0, 1.00, 2, 0, 0.50, 1, 0.50],
|
||||
// 蒙皮插槽注册的矩阵变换 (可选属性 默认: null, 仅对网格有效)
|
||||
// [a, b, c, d, tx, ty]
|
||||
"slotPose": [1.0000, 0.0000, 0.0000, 1.0000, 0.00, 0.00],
|
||||
// 蒙皮骨骼注册的矩阵变换 (可选属性 默认: null, 仅对网格有效)
|
||||
// [骨骼索引, a, b, c, d, tx, ty, ...]
|
||||
"bonePose": [0, 1.0000, 0.0000, 0.0000, 1.0000, 0.00, 0.00]
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
// 此骨架包含的 ik 约束列表
|
||||
"ik": [{
|
||||
// ik 约束名称
|
||||
"name": "ikName",
|
||||
// 绑定骨骼的名称
|
||||
"bone": "boneName",
|
||||
// 目标骨骼的名称
|
||||
"target": "ikBoneName",
|
||||
// 弯曲方向 (可选属性 默认: true)
|
||||
// [true: 正方向/ 顺时针, false: 反方向/ 逆时针]
|
||||
"bendPositive": true,
|
||||
// 骨骼链的长度 (可选属性 默认: 0)
|
||||
// [0: 只约束 bone, n: 约束 bone 及 bone 向上 n 级的父骨骼]
|
||||
"chain": 0,
|
||||
// 权重 [0.00: 不约束 ~ 1.00: 完全约束] (可选属性 默认: 1.00)
|
||||
"weight": 1.00
|
||||
}],
|
||||
// 此骨架包含的动画列表
|
||||
"animation": [{
|
||||
// 动画名称
|
||||
"name": "animationName",
|
||||
// 循环播放次数 [0: 循环播放无限次, n: 循环播放 n 次] (可选属性 默认: 1)
|
||||
"playTimes": 1,
|
||||
// 动画帧长度 (可选属性 默认: 1)
|
||||
"duration": 1,
|
||||
// 此动画包含的关键帧列表 (可选属性 默认: null)
|
||||
"frame": [{
|
||||
// 帧长度 (可选属性 默认: 1)
|
||||
"duration": 1,
|
||||
// 帧声音 (可选属性 默认: null)
|
||||
"sound": "soundName",
|
||||
// 帧事件列表 (可选属性 默认: null)
|
||||
"events": [{
|
||||
// 事件名称
|
||||
"name": "eventName",
|
||||
// 骨骼名称 (可选属性 默认: null)
|
||||
"bone": "boneName",
|
||||
// 插槽名称 (可选属性 默认: null)
|
||||
"slot": "slotName",
|
||||
// 事件参数列表 (可选属性 默认: null)
|
||||
"ints":[0, 1, 2],
|
||||
"floats":[0.01, 1.01, 2.01],
|
||||
"strings":["a", "b", "c"]
|
||||
}],
|
||||
// 帧行为列表 (可选属性 默认: null)
|
||||
"actions": [
|
||||
// 此骨架播放指定动画
|
||||
["gotoAndPlay", "animationName"],
|
||||
// 此骨架播放指定动画并停止
|
||||
["gotoAndStop", "animationName"],
|
||||
]
|
||||
}],
|
||||
|
||||
// 深度排序时间轴
|
||||
"zOrder": {
|
||||
"frame": [{
|
||||
// 帧长度 (可选属性 默认: 1)
|
||||
"duration": 1,
|
||||
// 插槽偏移 [slotIndexA, offsetA, slotIndexB, offsetB, ...] (可选属性 默认: null)
|
||||
"zOrder": [0, 2, 4, 1, 6, -1]
|
||||
}]
|
||||
},
|
||||
|
||||
// 此动画包含的骨骼时间轴列表 (可选属性 默认: null)
|
||||
"bone": [{
|
||||
// 时间轴名称 (与骨骼名称对应)
|
||||
"name": "boneName",
|
||||
// 时间轴缩放 (可选属性 默认: 1.00)
|
||||
"scale": 1.00,
|
||||
// 时间轴偏移 (可选属性 默认: 0.00)
|
||||
"offset": 0.00,
|
||||
// 此时间轴包含的关键帧列表 (可选属性 默认: null)
|
||||
"frame": [{
|
||||
// 帧长度 (可选属性 默认: 1)
|
||||
"duration": 1,
|
||||
// 缓动类型 [0: 由 tweenEasing 或 curve 描述缓动类型,1~N: 其他扩展缓动类型枚举(具体如何枚举未来再定义)] (可选属性 默认: 0)
|
||||
"tweenType": 0,
|
||||
// 缓动值 [0.00: 线性, null: 无缓动] (可选属性 默认: null)
|
||||
"tweenEasing": 0.00,
|
||||
// 贝塞尔曲线缓动参数列表 [x1, y1, x2, y2, ...] (可选属性 默认: null)
|
||||
"curve": [0.00, 0.00, 1.00, 1.00],
|
||||
// 骨骼的位移/ 斜切/ 缩放 (可选属性 默认: null)
|
||||
"transform": {
|
||||
"x": 0.00, // 水平位移 (可选属性 默认: 0.00)
|
||||
"y": 0.00, // 垂直位移 (可选属性 默认: 0.00)
|
||||
"skX": 0.0000, // 水平斜切 (可选属性 默认: 0.0000)
|
||||
"skY": 0.0000, // 垂直斜切 (可选属性 默认: 0.0000)
|
||||
"scX": 1.0000, // 垂直缩放 (可选属性 默认: 1.0000)
|
||||
"scY": 1.0000 // 垂直缩放 (可选属性 默认: 1.0000)
|
||||
},
|
||||
}]
|
||||
}],
|
||||
// 此动画包含的插槽时间轴列表
|
||||
"slot": [{
|
||||
// 时间轴名称 (与插槽名称对应)
|
||||
"name": "slotName",
|
||||
// 此时间轴包含的关键帧列表 (可选属性 默认: null)
|
||||
"frame": [{
|
||||
// 帧长度 (可选属性 默认: 1)
|
||||
"duration": 1,
|
||||
// 缓动类型 [0: 由 tweenEasing 描述缓动类型,N: 其他扩展缓动属性] (可选属性 默认: 0)
|
||||
"tweenType": 0,
|
||||
// 补间缓动 [0.00: 线性, null: 无缓动] (可选属性 默认: null)
|
||||
"tweenEasing": 0.00,
|
||||
// 补间缓动贝塞尔曲线 [x1, y1, x2, y2, ...] (可选属性 默认: null)
|
||||
"curve": [0.00, 0.00, 1.00, 1.00],
|
||||
// 此帧的显示对象索引 (皮肤中对应的插槽显示对象列表) (可选属性 默认: 0)
|
||||
"displayIndex": 0,
|
||||
// 显示对象的颜色叠加 (可选属性 默认: null)
|
||||
"color": {
|
||||
"aM": 100, // 透明叠加 [0~100] (可选属性 默认: 100)
|
||||
"rM": 100, // 红色叠加 [0~100] (可选属性 默认: 100)
|
||||
"gM": 100, // 绿色叠加 [0~100] (可选属性 默认: 100)
|
||||
"bM": 100, // 蓝色叠加 [0~100] (可选属性 默认: 100)
|
||||
"aO": 0.00, // 透明偏移 [-255~255] (可选属性 默认: 0)
|
||||
"rO": 0.00, // 红色偏移 [-255~255] (可选属性 默认: 0)
|
||||
"gO": 0.00, // 绿色偏移 [-255~255] (可选属性 默认: 0)
|
||||
"bO": 0.00, // 蓝色偏移 [-255~255] (可选属性 默认: 0)
|
||||
},
|
||||
// 播放到当前帧时,执行的动作行为列表 (可选属性 默认: null)
|
||||
"actions": [
|
||||
// 子骨架播放指定动画 (仅对显示对象为骨架时有效)
|
||||
["gotoAndPlay", "animationName"],
|
||||
// 子骨架播放指定动画并停止 (仅对显示对象为骨架时有效)
|
||||
["gotoAndStop", "animationName"],
|
||||
]
|
||||
}],
|
||||
}],
|
||||
// 此动画包含的自由变形时间轴列表 (可选属性 默认: null)
|
||||
"ffd": [{
|
||||
// 时间轴名称 (与网格名称对应)
|
||||
"name": "timelineName",
|
||||
// 皮肤名称
|
||||
"skin": "skinName",
|
||||
// 插槽名称
|
||||
"slot": "slotName",
|
||||
// 此时间轴包含的关键帧列表 (可选属性 默认: null)
|
||||
"frame": [{
|
||||
// 帧长度 (可选属性 默认: 1)
|
||||
"duration": 1,
|
||||
// 缓动类型 [0: 由 tweenEasing 描述缓动类型,N: 其他扩展缓动属性] (可选属性 默认: 0)
|
||||
"tweenType": 0,
|
||||
// 补间缓动 [0.00: 线性, null: 无缓动] (可选属性 默认: null)
|
||||
"tweenEasing": 0.00,
|
||||
// 补间缓动贝塞尔曲线 [x1, y1, x2, y2, ...] (可选属性 默认: null)
|
||||
"curve": [0.00, 0.00, 1.00, 1.00],
|
||||
// 顶点坐标列表索引偏移 (可选属性 默认: 0)
|
||||
"offset": 0,
|
||||
// 顶点坐标相对位移列表 [x0, y0, x1, y1, ...] (可选属性 默认: null)
|
||||
"vertices": [0.01, 0.01]
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}
|
||||
```
|
||||
|
||||
------------------------------
|
||||
# 5.0 相对 4.5 格式变化
|
||||
|
||||
## Root
|
||||
* 增加 "compatibleVersion" 属性。
|
||||
* 删除 "isGlobal" 属性。
|
||||
* 不再支持绝对坐标,只支持相对坐标,相当于isGlobal设置为0。
|
||||
* isGlobal为1的情况(绝对坐标)只存在于使用2.3及以前的数据格式。
|
||||
* 从3.0开始支持相对坐标,于是引入isGlobal属性用于向下兼容,同时支持相对坐标和绝对坐标。
|
||||
* 从5.0开始不再支持绝对坐标。
|
||||
|
||||
## Display
|
||||
* 增加 "path" 属性,与 name 区分,用于标识图片指向的贴图路径、Mesh包含的贴图路径或子骨架指向的骨架名。
|
||||
* name属性的意义变为display的唯一标示符,不再代表路径。
|
||||
|
||||
## 支持包围盒
|
||||
* "display"的"type" 属性的值增加 "boundingBox" ,用于标记包围盒。
|
||||
* 包围盒类型的 display 会包含如下属性
|
||||
* "subType" : 标记包围盒的类型,可能的值为"rectangle": 矩形, "ellipse": 椭圆, "polygon": 自定义多边形
|
||||
* "width", "height": 宽高(仅对矩形或椭圆类型的包围盒生效)
|
||||
* "vertices": 顶点列表(仅对自定义多边形类型的包围盒生效)
|
||||
|
||||
## 支持共享网格(Linked Mesh)
|
||||
* 网格类型的Display增加 "share" 属性,可以通过设置share属性将之变为共享网格。
|
||||
* 共享网格可以通过 "inheritFFD" 属性控制共享网格是否继承主网格的FFD动画。
|
||||
|
||||
## 支持动画中改变插槽的显示顺序(ZOrder)
|
||||
* "animation" 中增加 "zOrder" 属性,代表深度排序时间轴
|
||||
* "zOrder" 包含frames属性,代表时间轴上的关键帧列表。包含的每个关键帧对象会包含如下属性:
|
||||
* "duration": 关键帧持续的长度。
|
||||
* "zOrder": 该关键帧上zOrder需要变化的插槽以及变化的幅度组成的数组。
|
||||
|
||||
## 事件统一由主时间轴抛出,支持多事件和事件参数列表
|
||||
* 去掉骨骼时间轴包含的关键帧的event属性。(版本升级的时候会把数据移动到主时间轴相同位置的关键帧上)
|
||||
* "animation" 的 "frame"(主时间轴包含的关键帧列表)包含的关键帧数据的 event 属性改为 "events", 表示需要在该帧上抛出的事件列表。
|
||||
* 事件对象包含如下属性
|
||||
* "name": 事件名
|
||||
* "bone": 抛出事件的骨骼,默认为null(原骨骼时间轴包含的事件,将把骨骼名记录在这里)
|
||||
* "slot": 抛出事件的插槽,默认为null(该属性和上面的bone属性不可能同时存在,都不存在代表事件由骨架抛出)
|
||||
* "ints": 整形参数列表
|
||||
* "floats": 浮点形参数列表
|
||||
* "strings": 字符串形参数列表
|
||||
|
||||
## 增加更多缓动类型的定义
|
||||
* "frame"包含的关键帧数据增加 "tweenType" 属性。
|
||||
* "tweenType" 默认为0 代表由 tweenEasing 或 curve 描述缓动类型(和4.5一致)
|
||||
* "tweenType" 不为0 代表使用其他扩展缓动类型的枚举,具体每个枚举代表的意义未来再定义。
|
|
@ -0,0 +1,26 @@
|
|||
有时在游戏的运行过程中,需要动态的改变动画的播放速度。DragonBones 提供了几种不同的方式,可以在不同的场景下,实现动画的变速效果。
|
||||
|
||||
* 第一种:调节动画速度
|
||||
|
||||
对时钟的调节一般是要影响一组动画。如果要直接调节某个动画的播放速度,DragonBones提供了更加直接的接口。直接调节animation中的timeScale属性即可。
|
||||
|
||||
~~~javascript
|
||||
let armatureDisplay = factory.buildArmatureDisplay("Dragon");
|
||||
armatureDisplay.animation.timeScale = 0.5;
|
||||
~~~
|
||||
|
||||
* 第二种:调节动画状态速度
|
||||
|
||||
对动画速度的调节会影响到所有的动画状态,如果你只想调节角色动画中某一个动画状态的速度,则需要对播放动画之后产生的 AnimationState 实例进行操作。
|
||||
|
||||
~~~javascript
|
||||
let armatureDisplay = factory.buildArmatureDisplay("Dragon");
|
||||
armatureDisplay.play("walk").timeScale = 0.5;
|
||||
~~~
|
||||
|
||||
可以访问示例中心查看参考示例的效果和下载源码:
|
||||
* [DragonBones 在线演示](http://dragonbones.com/demo/index.html)
|
||||
* [DragonBones 事例源码](https://github.com/DragonBones/DragonBonesJS/tree/master/Egret/Demos)
|
||||
|
||||
|
||||
|
After Width: | Height: | Size: 50 KiB |
After Width: | Height: | Size: 186 KiB |
After Width: | Height: | Size: 118 KiB |
After Width: | Height: | Size: 57 KiB |
|
@ -0,0 +1,76 @@
|
|||
# DragonBones局部换装与全局换装
|
||||
|
||||
DragonBones 4.7中增加一些全新API,并提供全新的局部换装与整体换装功能。
|
||||
|
||||
### 创建DragonBones动画新API
|
||||
|
||||
`dragonBones.EgretFactory`中内置文件解析器,可以方便的设置骨骼动画数据,同时新增`buildArmatureDisplay`方法,快速获取骨骼动画所需要的显示对象。
|
||||
|
||||
```
|
||||
//定义dragonBones.EgretFactory对象
|
||||
private factory:dragonBones.EgretFactory;
|
||||
|
||||
this.factory = new dragonBones.EgretFactory();
|
||||
this.factory.parseDragonBonesData(RES.getRes("man_json"));
|
||||
this.factory.parseTextureAtlasData(RES.getRes("man_texture_json"), RES.getRes("man_texture_png"));
|
||||
|
||||
//直接生成骨骼动画显示对象,该对象实现IArmatureDisplay接口
|
||||
var ar:dragonBones.EgretArmatureDisplay = this.factory.buildArmatureDisplay("man");
|
||||
ar.animation.play("runFront",0);
|
||||
ar.x = 200;
|
||||
ar.y = 800;
|
||||
this.addChild( ar );
|
||||
```
|
||||
|
||||
`dragonBones.EgretArmatureDisplay`对象会自动绑定`WorkClock`,无需手动添加。
|
||||
|
||||
运行后效果如图:
|
||||
|
||||
![](db1.png)
|
||||
|
||||
### 局部换装
|
||||
|
||||
原有换装方案,可以替换对应slot中的图片实现,但会存在图片位置错位问题。新版本局部换装功能,可通过DragonBones预设置替换内容实现此功能。
|
||||
|
||||
原始动画如下:
|
||||
|
||||
![](db2.png)
|
||||
|
||||
我们可以替换其头发的内容,新建一个DragonBones项目,将新头发加入其资源库,然后放入场景中。
|
||||
|
||||
具体替换创建新项目的原因在于获取图片轴点与骨骼原点的相对位置。
|
||||
|
||||
在新项目中调整好头发的位置后,导出数据。
|
||||
|
||||
![](db3.png)
|
||||
|
||||
在上面的代码中继续添加如下代码。
|
||||
|
||||
```
|
||||
this.factory.parseDragonBonesData(RES.getRes("new_json"));
|
||||
this.factory.parseTextureAtlasData(RES.getRes("new_texture_json"), RES.getRes("new_texture_png"));
|
||||
|
||||
this.factory.replaceSlotDisplay( "NewProject", "Armature", "ti", "bb", ar.armature.getSlot("Atoufa"));
|
||||
```
|
||||
|
||||
通过`replaceSlotDisplay`方法来替换其中头发的内容,其中第一个参数为DragonBonesName,如果你在解析DragonBones数据时为添加其参数,那么该参数可以填写`null`或者填写项目名称。
|
||||
|
||||
后面三个参数均为数据源标记,最后一个参数则是要替换的目标slot。
|
||||
|
||||
编译后运行效果如图:
|
||||
|
||||
![](db4.png)
|
||||
|
||||
**你可以在新项目中放置多个即将替换的纹理素材,然后在局部替换时,选择你所需要的贴图纹理。**
|
||||
|
||||
### 全局换装
|
||||
|
||||
全局换装可实现将一个骨骼动画的骨架中全部贴图替换,如果使用全局换装功能,则新骨骼动画纹理集与源骨骼动画纹理集必须尺寸以及内部元素尺寸相同。
|
||||
|
||||
你可以使用如下代码来进行全局换装
|
||||
|
||||
```
|
||||
ar.armature.replaceTexture(RES.getRes("new_db_texture_png"));
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
在做大型游戏项目时,我们可能会为不同的角色设计相同的动画。这种情况下,可以利用 DragonBones 的动画复用功能,轻松实现这个需求。
|
||||
DragonBones 的动画复用功能够把同名骨骼的动画数据从一个骨架拷贝到另一个骨架中。
|
||||
|
||||
正常播放两个骨骼动画代码如下:
|
||||
|
||||
~~~javascript
|
||||
let egretFactory = dragonBones.EgretFactory.factory;
|
||||
|
||||
egretFactory.parseDragonBonesData(RES.getRes("DragonBonesDataA"));
|
||||
egretFactory.parseTextureAtlasData(RES.getRes("TextureAtlasDataA"), RES.getRes("TextureAtlasA"));
|
||||
|
||||
egretFactory.parseDragonBonesData(RES.getRes("DragonBonesDataB"));
|
||||
egretFactory.parseTextureAtlasData(RES.getRes("TextureAtlasDataB"), RES.getRes("TextureAtlasB"));
|
||||
|
||||
// let armatureDisplayA = egretFactory.buildArmatureDisplay("armatureA");
|
||||
// this.addChild(armatureDisplayA);
|
||||
// armatureDisplayA.x = 200;
|
||||
// armatureDisplayA.y = 300;
|
||||
// armatureDisplayA.scaleX = 0.5;
|
||||
// armatureDisplayA.scaleY = 0.5;
|
||||
|
||||
let armatureDisplayB = egretFactory.buildArmatureDisplay("armatureB");
|
||||
this.addChild(armatureDisplayB);
|
||||
armatureDisplayB.x = 200;
|
||||
armatureDisplayB.y = 300;
|
||||
armatureDisplayB.scaleX = 0.5;
|
||||
armatureDisplayB.scaleY = 0.5;
|
||||
|
||||
egretFactory.copyAnimationsToArmature(armatureDisplayB, "armatureA");
|
||||
|
||||
armatureDisplayB.animation.play("animationName");
|
||||
~~~
|
||||
|
||||
使用 `Factory` 中的 `copyAnimationsToArmature` 方法可实现该效果。
|
||||
`copyAnimationsToArmature` 方法第一个参数为接收动画数据的骨架,第二个参数为被拷贝动画数据的骨架名称。
|
||||
|
||||
可以访问示例中心查看参考示例的效果和下载源码:
|
||||
* [DragonBones 在线演示](http://www.dragonbones.com/demo/egret/animation_copy_test/index.html)
|
||||
* [DragonBones 事例源码](https://github.com/DragonBones/DragonBonesJS/blob/master/Egret/Demos/src/demo/AnimationCopyTest.ts)
|
After Width: | Height: | Size: 100 KiB |
After Width: | Height: | Size: 135 KiB |
|
@ -0,0 +1,52 @@
|
|||
首先从DragonBones Pro中导出一份骨骼动画数据。你可以点击下面的连接下载。
|
||||
|
||||
[Robot.zip](55937e0a59ba9.zip)
|
||||
|
||||
我们通过Res Depot工具将资源中的`texture.png`,`texture.json`和`RobotGame_1.json` 添加到项目组中。
|
||||
|
||||
使用RES模块加载资源完成后,可以创建基于DragonBones的骨骼动画。
|
||||
|
||||
实例化DragonBones所需要的数据。
|
||||
|
||||
~~~ javascript
|
||||
var dragonbonesData = RES.getRes( "RobotGame_1_json" );
|
||||
var textureData = RES.getRes( "texture_json" );
|
||||
var texture = RES.getRes( "texture_png" );
|
||||
~~~
|
||||
|
||||
DragonBones动画由工厂类进行管理,可以使用EgretFactory对象来处理所有的动画数据以及贴图。
|
||||
步骤如下:
|
||||
|
||||
1. 解析外部数据,并添加至EgretFactory中
|
||||
2. 设置动画中绑定的贴图
|
||||
|
||||
~~~ javascript
|
||||
let egretFactory: dragonBones.EgretFactory = dragonBones.EgretFactory.factory;
|
||||
egretFactory.parseDragonBonesData(dragonbonesData);
|
||||
egretFactory.parseTextureAtlasData(textureData, texture);
|
||||
~~~
|
||||
|
||||
数据准备好后,需要从数据中提取出需要的骨架系统。在DragonBones中,骨架有多个骨骼组成。每个骨架中绑定了当前骨架的动画数据。
|
||||
|
||||
`let armatureDisplay: dragonBones.EgretArmatureDisplay = egretFactory.buildArmatureDisplay("robot");`
|
||||
|
||||
通过`buildArmatureDisplay`方法,我们提取名称为`robot`的骨架。要想在舞台中看到该骨架,我们需要将其显性的添加到的舞台当中,可以使用下面语句。
|
||||
|
||||
~~~ javascript
|
||||
this.addChild(armatureDisplay);
|
||||
armatureDisplay.x = 200;
|
||||
armatureDisplay.y = 300;
|
||||
armatureDisplay.scaleX = 0.5;
|
||||
armatureDisplay.scaleY = 0.5;
|
||||
|
||||
armatureDisplay.animation.play("Walk");
|
||||
~~~
|
||||
|
||||
`armatureDisplay`是名称为`robot`的骨架对象的显示对象。将其添加到显示列表中,就可以在舞台中看到当前提取的机器人。效果如图:
|
||||
|
||||
![](56c3144fce23f.png)
|
||||
|
||||
需要播放的动画名称,可参考下图,在DragonBones Pro中,动画面板罗列了所有可播放的动画名称。
|
||||
|
||||
![](56c314504fd66.png)
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
DragonBones作为Egret引擎的扩展库已经集成在安装包中。如果你的项目需要使用到DragonBones,需要在项目配置中开启DragonBones配置项。操作步骤如下:
|
||||
|
||||
1、新建 Egret项目
|
||||
|
||||
2、修改项目中的 egretProperties.json文件
|
||||
|
||||
在配置文件中,找到modules标签,添加DragonBones绑定项。
|
||||
|
||||
```
|
||||
"name": "dragonbones"
|
||||
```
|
||||
|
||||
添加后配置内容如下:
|
||||
|
||||
~~~ javascript
|
||||
"modules": [
|
||||
{
|
||||
"name": "egret"
|
||||
},
|
||||
{
|
||||
"name": "game"
|
||||
},
|
||||
{
|
||||
"name": "tween"
|
||||
},
|
||||
{
|
||||
"name": "res"
|
||||
},
|
||||
{
|
||||
"name": "dragonbones"
|
||||
}
|
||||
]
|
||||
~~~
|
||||
|
||||
3、重新编译项目
|
||||
|
||||
|
||||
重新编译请执行 `egret build -e`
|
||||
|
||||
通过上述三个步骤操作,你可以在项目中直接使用DragonBones。
|
||||
|
||||
测试配置是否成功,可以使用下面语句进行调试。在控制台中直接打印出当前 DragonBones 的版本。
|
||||
|
||||
```
|
||||
console.log(dragonBones.DragonBones.VERSION);
|
||||
```
|
|
@ -0,0 +1,423 @@
|
|||
## 4.5 数据格式标准说明
|
||||
```javascript
|
||||
{
|
||||
// DragonBones 数据名称
|
||||
"name": "dragonBonesName",
|
||||
// 数据版本
|
||||
"version": "4.5",
|
||||
// 动画帧频
|
||||
"frameRate": 24,
|
||||
// 是否使用绝对数据 [0: 使用相对数据, 1: 使用绝对数据] (可选属性 默认: 1)
|
||||
"isGlobal": 1,
|
||||
// 骨架列表
|
||||
"armature": [{
|
||||
// 骨架名称 (一个 DragonBones 数据可包含多个骨架)
|
||||
"name": "armatureName",
|
||||
// 动画帧频 (可选属性 默认: 使用全局帧频)
|
||||
"frameRate": 24,
|
||||
// 动画类型 (可选属性 默认: "Armature")
|
||||
// ["Armature": 骨骼动画, "MovieClip": 基本动画, "Stage": 场景动画]
|
||||
"type": "Armature",
|
||||
// 自定义数据 [任何类型] (可选属性 默认: null)
|
||||
"userData": null,
|
||||
// 添加到舞台后的默认行为列表 (可选属性 默认: null)
|
||||
"defaultActions": [
|
||||
// 此骨架播放指定动画
|
||||
["gotoAndPlay", "animationName"],
|
||||
// 此骨架播放指定动画并停止
|
||||
["gotoAndStop", "animationName"],
|
||||
],
|
||||
// 此骨架包含的骨骼列表
|
||||
"bone": [{
|
||||
// 骨骼名称
|
||||
"name": "boneName",
|
||||
// 父级骨骼的名称
|
||||
"parent": "parentBoneName",
|
||||
// 自定义数据 [任何类型] (可选属性 默认: null)
|
||||
"userData": null,
|
||||
// 骨骼注册到骨架的位移/ 斜切/ 缩放 (可选属性 默认: null)
|
||||
"transform": {
|
||||
"x": 0.00, // 水平位移 (可选属性 默认: 0.00)
|
||||
"y": 0.00, // 垂直位移 (可选属性 默认: 0.00)
|
||||
"skX": 0.0000, // 水平斜切 (可选属性 默认: 0.0000)
|
||||
"skY": 0.0000, // 垂直斜切 (可选属性 默认: 0.0000)
|
||||
"scX": 1.0000, // 垂直缩放 (可选属性 默认: 1.0000)
|
||||
"scY": 1.0000, // 垂直缩放 (可选属性 默认: 1.0000)
|
||||
}
|
||||
}],
|
||||
// 此骨架包含的插槽列表
|
||||
"slot": [{
|
||||
// 插槽名称
|
||||
"name": "slotName",
|
||||
// 插槽所属的骨骼名称
|
||||
"parent": "parentBoneName",
|
||||
// 默认显示对象的索引 (可选属性 默认: 0)
|
||||
"displayIndex": 0,
|
||||
// 混合模式 (可选属性 默认: null)
|
||||
"blendMode": null,
|
||||
// 自定义数据 [任何类型] (可选属性 默认: null)
|
||||
"userData": null,
|
||||
// 显示对象的颜色叠加 (可选属性 默认: null)
|
||||
"color": {
|
||||
"aM": 100, // 透明叠加 [0~100] (可选属性 默认: 100)
|
||||
"rM": 100, // 红色叠加 [0~100] (可选属性 默认: 100)
|
||||
"gM": 100, // 绿色叠加 [0~100] (可选属性 默认: 100)
|
||||
"bM": 100, // 蓝色叠加 [0~100] (可选属性 默认: 100)
|
||||
"aO": 0.00, // 透明偏移 [-255~255] (可选属性 默认: 0)
|
||||
"rO": 0.00, // 红色偏移 [-255~255] (可选属性 默认: 0)
|
||||
"gO": 0.00, // 绿色偏移 [-255~255] (可选属性 默认: 0)
|
||||
"bO": 0.00, // 蓝色偏移 [-255~255] (可选属性 默认: 0)
|
||||
},
|
||||
// 添加到舞台后的行为列表 (可选属性 默认: null)
|
||||
"actions": [
|
||||
// 子骨架播放指定动画 (仅对显示对象为骨架时有效)
|
||||
["gotoAndPlay", "animationName"],
|
||||
// 子骨架播放指定动画并停止 (仅对显示对象为骨架时有效)
|
||||
["gotoAndStop", "animationName"],
|
||||
]
|
||||
}],
|
||||
// 此骨架包含的皮肤列表
|
||||
"skin": [{
|
||||
// 皮肤名称
|
||||
"name": "skinName",
|
||||
// 此皮肤包含的插槽列表
|
||||
"slot": [{
|
||||
// 插槽名称
|
||||
"name": "slotName",
|
||||
// 此插槽包含的显示对象列表
|
||||
"display": [{
|
||||
// 显示对象名称
|
||||
"name": "displayName",
|
||||
// 显示对象类型 (可选属性 默认: "image")
|
||||
// ["image": 贴图, "armature": 骨架, "mesh": 网格, ... 其他扩展的类型]
|
||||
"type": "image",
|
||||
// 显示对象相对于骨骼的位移/ 斜切/ 缩放 (可选属性 默认: null)
|
||||
"transform": {
|
||||
"x": 0.00, // 水平位移 (可选属性 默认: 0.00)
|
||||
"y": 0.00, // y 垂直位移 (可选属性 默认: 0.00)
|
||||
"skX": 0.0000, // 水平斜切 (可选属性 默认: 0.0000)
|
||||
"skY": 0.0000, // 垂直斜切 (可选属性 默认: 0.0000)
|
||||
"scX": 1.0000, // 垂直缩放 (可选属性 默认: 1.0000)
|
||||
"scY": 1.0000, // 垂直缩放 (可选属性 默认: 1.0000)
|
||||
},
|
||||
// 显示对象的轴点 (可选属性 默认: null, 仅对贴图或网格有效)
|
||||
"pivot": {
|
||||
"x": 0.50, // 水平轴点 [0.00~1.00] (可选属性 默认: 0.50)
|
||||
"y": 0.50, // 垂直轴点 [0.00~1.00] (可选属性 默认: 0.50)
|
||||
},
|
||||
// 顶点的 UV 坐标列表 (可选属性 默认: null, 仅对网格有效)
|
||||
// [u0, v0, u1, v1, ...]
|
||||
"uvs": [0.0000, 0.0000, 1.0000, 0.0000, 1.0000, 1.0000, 0.0000, 1.0000],
|
||||
// 三角形顶点索引列表 (可选属性 默认: null, 仅对网格有效)
|
||||
"triangles": [0, 1, 2, 2, 3, 0],
|
||||
// 顶点权重列表 (可选属性 默认: null, 仅对网格有效)
|
||||
// [顶点索引, 骨骼索引, 权重, ...]
|
||||
"weights": [0, 0, 1.00, 1, 0, 1.00, 2, 0, 1.00, 3, 0, 1.00],
|
||||
// 顶点相对显示对象轴点的坐标列表 (可选属性 默认: null, 仅对网格有效)
|
||||
// [x0, y0, x1, y1, ...]
|
||||
"vertices": [-64.00, -64.00, 64.00, -64.00, 64.00, 64.00, -64.00, 64.00],
|
||||
// 蒙皮插槽注册的矩阵变换 (可选属性 默认: null, 仅对网格有效)
|
||||
// [x, y, skewX, skewY, scaleX, scaleY]
|
||||
"slotPose": [0.00, 0.00, 0.0000, 0.0000, 1.0000, 1.0000],
|
||||
// 蒙皮骨骼注册的矩阵变换 (可选属性 默认: null, 仅对网格有效)
|
||||
// [骨骼索引, x, y, skewX, skewY, scaleX, scaleY, ...]
|
||||
"bonePose": [0, 0.00, 0.00, 0.0000, 0.0000, 1.0000, 1.0000],
|
||||
"edges": [0, 1, 1, 2, 2, 3, 3, 1],
|
||||
"userEdges": [],
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
|
||||
// 此骨架包含的 ik 约束列表
|
||||
"ik": [{
|
||||
// ik 约束名称
|
||||
"name": "ikName",
|
||||
// 绑定骨骼的名称
|
||||
"bone": "boneName",
|
||||
// 目标骨骼的名称
|
||||
"target": "ikBoneName",
|
||||
// 弯曲方向 (可选属性 默认: true)
|
||||
// [true: 正方向/ 顺时针, false: 反方向/ 逆时针]
|
||||
"bendPositive": true,
|
||||
// 骨骼链的长度 (可选属性 默认: 0)
|
||||
// [0: 只约束 bone, n: 约束 bone 及 bone 向上 n 级的父骨骼]
|
||||
"chain": 0,
|
||||
// 权重 [0.00: 不约束 ~ 1.00: 完全约束] (可选属性 默认: 1.00)
|
||||
"weight": 1.00
|
||||
}],
|
||||
// 此骨架包含的动画列表
|
||||
"animation": [{
|
||||
// 动画名称
|
||||
"name": "animationName",
|
||||
// 循环播放次数 [0: 循环播放无限次, n: 循环播放 n 次] (可选属性 默认: 1)
|
||||
"playTimes": 1,
|
||||
// 动画帧长度 (可选属性 默认: 1)
|
||||
"duration": 1,
|
||||
// 此动画包含的关键帧列表 (可选属性 默认: null)
|
||||
"frame": [{
|
||||
// 帧长度 (可选属性 默认: 1)
|
||||
"duration": 1,
|
||||
// 帧事件 (可选属性 默认: null)
|
||||
"event": "eventName",
|
||||
// 帧声音 (可选属性 默认: null)
|
||||
"sound": "soundName",
|
||||
// 帧行为列表 (可选属性 默认: null)
|
||||
"actions": [
|
||||
// 此骨架播放指定动画
|
||||
["gotoAndPlay", "animationName"],
|
||||
// 此骨架播放指定动画并停止
|
||||
["gotoAndStop", "animationName"],
|
||||
]
|
||||
}],
|
||||
// 此动画包含的骨骼时间轴列表 (可选属性 默认: null)
|
||||
"bone": [{
|
||||
// 时间轴名称 (与骨骼名称对应)
|
||||
"name": "boneName",
|
||||
// 时间轴缩放 (可选属性 默认: 1.00)
|
||||
"scale": 1.00,
|
||||
// 时间轴偏移 (可选属性 默认: 0.00)
|
||||
"offset": 0.00,
|
||||
// 此时间轴包含的关键帧列表 (可选属性 默认: null)
|
||||
"frame": [{
|
||||
// 帧长度 (可选属性 默认: 1)
|
||||
"duration": 1,
|
||||
// 补间缓动 [0.00: 线性, null: 无缓动] (可选属性 默认: null)
|
||||
"tweenEasing": 0.00,
|
||||
// 补间缓动曲线 [x1, y1, x2, y2, ...: 贝塞尔曲线] (可选属性 默认: null)
|
||||
"curve": [0.00, 0.00, 1.00, 1.00],
|
||||
// 帧事件 (可选属性 默认: null)
|
||||
"event": "eventName",
|
||||
// 帧声音 (可选属性 默认: null)
|
||||
"sound": "soundName",
|
||||
// 骨骼的位移/ 斜切/ 缩放 (可选属性 默认: null)
|
||||
"transform": {
|
||||
"x": 0.00, // 水平位移 (可选属性 默认: 0.00)
|
||||
"y": 0.00, // 垂直位移 (可选属性 默认: 0.00)
|
||||
"skX": 0.0000, // 水平斜切 (可选属性 默认: 0.0000)
|
||||
"skY": 0.0000, // 垂直斜切 (可选属性 默认: 0.0000)
|
||||
"scX": 1.0000, // 垂直缩放 (可选属性 默认: 1.0000)
|
||||
"scY": 1.0000 // 垂直缩放 (可选属性 默认: 1.0000)
|
||||
},
|
||||
}]
|
||||
}],
|
||||
// 此动画包含的插槽时间轴列表
|
||||
"slot": [{
|
||||
// 时间轴名称 (与插槽名称对应)
|
||||
"name": "slotName",
|
||||
// 此时间轴包含的关键帧列表 (可选属性 默认: null)
|
||||
"frame": [{
|
||||
// 帧长度 (可选属性 默认: 1)
|
||||
"duration": 1,
|
||||
// 补间缓动 [0.00: 线性, null: 无缓动] (可选属性 默认: null)
|
||||
"tweenEasing": 0.00,
|
||||
// 补间缓动曲线 [x1, y1, x2, y2, ...: 贝塞尔曲线] (可选属性 默认: null)
|
||||
"curve": [0.00, 0.00, 1.00, 1.00],
|
||||
// 此帧的显示对象索引 (皮肤中对应的插槽显示对象列表) (可选属性 默认: 0)
|
||||
"displayIndex": 0,
|
||||
// 显示对象的颜色叠加 (可选属性 默认: null)
|
||||
"color": {
|
||||
"aM": 100, // 透明叠加 [0~100] (可选属性 默认: 100)
|
||||
"rM": 100, // 红色叠加 [0~100] (可选属性 默认: 100)
|
||||
"gM": 100, // 绿色叠加 [0~100] (可选属性 默认: 100)
|
||||
"bM": 100, // 蓝色叠加 [0~100] (可选属性 默认: 100)
|
||||
"aO": 0.00, // 透明偏移 [-255~255] (可选属性 默认: 0)
|
||||
"rO": 0.00, // 红色偏移 [-255~255] (可选属性 默认: 0)
|
||||
"gO": 0.00, // 绿色偏移 [-255~255] (可选属性 默认: 0)
|
||||
"bO": 0.00, // 蓝色偏移 [-255~255] (可选属性 默认: 0)
|
||||
},
|
||||
// 播放到当前帧时,执行的动作行为列表 (可选属性 默认: null)
|
||||
"actions": [
|
||||
// 子骨架播放指定动画 (仅对显示对象为骨架时有效)
|
||||
["gotoAndPlay", "animationName"],
|
||||
// 子骨架播放指定动画并停止 (仅对显示对象为骨架时有效)
|
||||
["gotoAndStop", "animationName"],
|
||||
]
|
||||
}],
|
||||
}],
|
||||
// 此动画包含的自由变形时间轴列表 (可选属性 默认: null)
|
||||
"ffd": [{
|
||||
// 时间轴名称 (与插槽名称对应)
|
||||
"name": "slotName",
|
||||
// 此时间轴包含的关键帧列表 (可选属性 默认: null)
|
||||
"frame": [{
|
||||
// 帧长度 (可选属性 默认: 1)
|
||||
"duration": 1,
|
||||
// 补间缓动 [0.00: 线性, null: 无缓动] (可选属性 默认: null)
|
||||
"tweenEasing": 0.00,
|
||||
// 补间缓动曲线控制点列表 [x1, y1, x2, y2, ...: 贝塞尔曲线] (可选属性 默认: null)
|
||||
"curve": [0.00, 0.00, 1.00, 1.00],
|
||||
// 顶点坐标列表索引偏移 (可选属性 默认: 0)
|
||||
"offset": 0,
|
||||
// 顶点坐标列表 [x0, y0, x1, y1, ...: 相对位移] (可选属性 默认: null)
|
||||
"vertices": [0.01, 0.01]
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}
|
||||
```
|
||||
|
||||
------------------------------
|
||||
|
||||
# 4.5 相对 4.0 格式变化
|
||||
|
||||
* Armature
|
||||
1. 增加 "frameRate" 属性: 可为每个骨架设置独立帧率
|
||||
2. 增加 "type" 属性: 骨骼动画/基本动画/场景动画
|
||||
3. 增加 "defaultActions" 列表: 可为骨架分配默认行为 (删除 "gotoAndPlay" 属性, 其功能与 "actions" 合并)
|
||||
4. 增加 "ik" 列表
|
||||
|
||||
* Slot
|
||||
1. 增加 "actions" 列表: 插槽可为子骨架分配默认行为 (删除 "gotoAndPlay" 属性, 其功能与 "actions" 合并)
|
||||
|
||||
* Display
|
||||
1. "type" 属性增加 "mesh" 类型以及与其匹配的其他属性
|
||||
|
||||
* Animation
|
||||
1. 增加 "ffd" 时间轴
|
||||
|
||||
* Frame
|
||||
1. 增加 "actions" 列表: 控制子骨架行为 (删除 "action" "gotoAndPlay" 属性, 其功能与 "actions" 合并)
|
||||
|
||||
* actions
|
||||
暂时只支持 "gotoAndPlay" 行为, 后续会扩展更多对动画的控制行为和交互行为
|
||||
|
||||
------------------------------
|
||||
|
||||
# 4.0 相对 3.0 格式变化
|
||||
|
||||
* Armature 中包含Slot列表
|
||||
|
||||
* Skin 中增加默认Skin, 默认skin有如下特性:
|
||||
1. 在skin列表中排第一
|
||||
2. 名字为空字符串“”
|
||||
3. 包含的slot会同时存在于其他的skin,相当于保存所有其他skin中共有的slot(相当于其他skin的基类)
|
||||
|
||||
* Skin中包含的Slot的Display的transform属性中不在有pX,pY属性
|
||||
1. Display不再有初始轴点属性,所有display的轴点均为中心点。
|
||||
2. 因为display在运动时的轴点是骨骼的原点,所以这里的轴点信息可以在初始化时换算成display的位置信息,从而可以完美还原动画。
|
||||
|
||||
* Animation中有下面的改动
|
||||
1. 去掉"tweenEasing": 动画不会覆盖关键帧的缓动值
|
||||
2. 去掉"autoTween": 动画不会覆盖关键帧的补件值
|
||||
3. "loop"改名为"playtime"
|
||||
4. "colorTransform"改名为"color"
|
||||
|
||||
* 区分Bone时间轴和Slot时间轴
|
||||
1. Bone时间轴包含平移旋转缩放,自定义事件和声音事件
|
||||
2. Slot时间轴包含颜色变换,dispalyIndex变换和zorder变换
|
||||
|
||||
* Armature, Bone 和Slot中均添加了userData字段用于记录用户自定义信息,同时方便第三方扩展
|
||||
|
||||
* Frame中有如下改动
|
||||
1. 中去掉了hide 属性,动画中如果想隐藏某个插槽,改为设置dispalyIndex为-1. visible属性完全留给开发者使用,用于动态设置slot是否隐藏。
|
||||
2. 增加curve属性,使用贝塞尔曲线描述动画补间的缓动效果
|
||||
|
||||
## 4.0 数据格式标准说明
|
||||
|
||||
——DragonBones 4.1 依然沿用 4.0 的数据格式规范——
|
||||
|
||||
~~~ javascript
|
||||
{
|
||||
// DB数据名称,不同的DB数据文件内可以有同名的骨架,在这种情况下这个字段用于区分骨架所对应的数据。
|
||||
"name": "dataName",
|
||||
// DB版本号
|
||||
"version": "4.0",
|
||||
// DB动画帧频
|
||||
"frameRate": 24
|
||||
//【可选属性】是否使用绝对数据,默认0(使用相对数据)
|
||||
"isGlobal": 0,
|
||||
"armature": [{
|
||||
"name": "armatureName", // 骨架名称,一个数据文件可以有多个骨架
|
||||
"userData": //【可选属性】自定义数据区,可以是任何类型,默认是空
|
||||
"bone": [{ // 骨架中拥有的所有骨骼列表
|
||||
"name": "boneName" // 骨骼名称
|
||||
"parent": "parentBoneName" // 父骨骼名称
|
||||
"userData": //【可选属性】自定义数据区,可以是任何类型,默认是空
|
||||
"length": 0 //【可选属性】骨骼长度,默认0
|
||||
// x:X轴坐标偏移, y: Y轴坐标偏移,默认0
|
||||
// scX:X轴缩放值,scY:Y轴缩放值,默认1
|
||||
// skX:X轴旋转值,skY:Y轴旋转值, 默认0
|
||||
"transform": {x, y, scX, scY, skX, skY}// 骨骼的属性参数(属性可选)
|
||||
]
|
||||
"slot": [{ // 骨架中拥有的插槽列表
|
||||
"name": "slotName" // 插槽名称
|
||||
"parent": "parentBoneName" // 插槽绑定的骨骼
|
||||
"userData": //【可选属性】自定义数据区,可以是任何类型,默认是空
|
||||
"displayIndex": 0 //【可选属性】插槽中的默认图片在插槽包含的图片列表中的索引。默认是0
|
||||
"blendMode"="" //【可选属性】混合模式。默认值是空。
|
||||
}]
|
||||
"skin": [{ // 骨架中拥有的皮肤列表
|
||||
"name": "skinName" // 皮肤名称,默认皮肤name为"",包含所有其他皮肤公用的插槽
|
||||
"slot": [{ // 皮肤中包含的插槽列表
|
||||
"name": "slotName" // 插槽名称
|
||||
"display": [{ // 插槽中拥有的显示对象列表
|
||||
"name": "displayName" // 显示对象对应的显示对象名称,包含二级目录相对路径
|
||||
"type": "image" // 显示对象类型,可为图片(image),子骨架(armature)
|
||||
// 可以根据不同引擎自由扩充。
|
||||
"transform": {x, y, scX, scY, skX, skY} // 显示对象的属性参数(属性可选),
|
||||
// x:X轴坐标偏移, y: Y轴坐标偏移,默认0
|
||||
// scX:X轴缩放值,scY:Y轴缩放值,默认1
|
||||
// skX:X轴旋转值,skY:Y轴旋转值, 默认0
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
"animation": [{ // 骨架中拥有的动画列表
|
||||
"name": "animationName" // 动画名称
|
||||
"duration":0 // 动画总帧数
|
||||
"fadeInTime": 0 //【可选属性】淡入时间,默认为0
|
||||
"scale": 1 //【可选属性】动画时间轴的缩放,默认为1,数值越大,播放时间越长, 目前DB Pro暂未实现
|
||||
"playTimes": 1 //【可选属性】播放次数,默认为1,0是无限循环
|
||||
"frame": [{ // 动画中包含的关键帧列表
|
||||
"duration": 1 //【可选属性】关键帧持续帧数,默认1
|
||||
"event": //【可选属性】关键帧包含事件名,默认为空
|
||||
"sound": //【可选属性】关键帧包含声音名,默认为空
|
||||
"action": //【可选属性】跳转动作名,默认为空
|
||||
}]
|
||||
"bone": [{ // 动画中包含的骨骼列表(骨骼时间轴列表)
|
||||
"name": "boneName" // 骨骼名称
|
||||
"scale": 1 //【可选属性】骨骼时间轴缩放值,默认是1(不缩放)
|
||||
"offset": 0 //【可选属性】骨骼时间轴延时[0, 1],默认值为0
|
||||
// 比如一个循环跑步动作有 4 秒, 其中对腿的动作设置此值为 0.25
|
||||
// 那么腿的循环比其他骨骼动作提前1秒。
|
||||
"pX": 0 //【可选属性】默认值为0 代表动画的中该骨骼轴点的初始值。
|
||||
// 这个属性只有用相对Parent的数据才有意义
|
||||
// 如果用相对Global的数据,这个值会在数据解析时被覆盖。
|
||||
"pY": 0 //【可选属性】默认值为0 代表动画的中该骨骼轴点的初始值。
|
||||
// 这个属性只有用相对Parent的数据才有意义
|
||||
// 如果用相对Global的数据,这个值会在数据解析时被覆盖。
|
||||
"frame": [{ // 骨骼时间轴包含的关键帧列表
|
||||
"duration": 1 //【可选属性】关键帧持续帧数,默认1
|
||||
"tweenEasing":0 //【可选属性】是否缓动,默认为NaN,不缓动,0:线性缓动。
|
||||
"tweenRotate":0 //【可选属性】顺时针或逆时针旋转几周,从补间动画中读取, 必须为整数,默认值为0。
|
||||
"event": //【可选属性】关键帧包含事件名,默认为空
|
||||
"sound": //【可选属性】关键帧包含声音名,默认为空
|
||||
"transform": {x, y, scX, scY, skX, skY} // 此帧骨骼的属性参数(属性可选)
|
||||
// x:X轴坐标偏移, y: Y轴坐标偏移,默认0
|
||||
// scX:X轴缩放值,scY:Y轴缩放值,默认1
|
||||
// skX:X轴旋转值,skY:Y轴旋转值, 默认0
|
||||
}]
|
||||
}]
|
||||
"slot": [{ // 动画中拥有的插槽列表(插槽时间轴列表)
|
||||
"name": "slotName" // 插槽的名称
|
||||
"scale": 1 //【可选属性】插槽的缩放值,默认是1
|
||||
"offset": 0 //【可选属性】动作的延时[0, 1],默认值为0
|
||||
// 比如一个循环跑步动作有 4 秒,其中对腿的动作设置此值为 0.25
|
||||
// 那么腿的循环比其他骨骼动作提前1秒。
|
||||
"frame": [{ // 插槽中的关键帧列表
|
||||
"duration": 1 //【可选属性】关键帧持续帧数,默认1
|
||||
"displayIndex":0 //【可选属性】此帧中显示图片的索引,默认是0, -1不显示
|
||||
// 对应是skin里的slot中的图片列表索引
|
||||
"visible":1 //【可选属性】此帧中插槽是否可见,默认是1。
|
||||
"zOrder": 0 //【可选属性】插槽所在的层级,默认是0
|
||||
"hide": 0 //【可选属性】是否隐藏,默认是0(不隐藏)
|
||||
"tweenEasing":0 //【可选属性】是否缓动,默认为NaN,不缓动,0:线性缓动。
|
||||
"action": //【可选属性】此帧执行的动作,默认是空
|
||||
"color": {aM, rM, gM, bM, aO, rO, gO, bO} // 颜色叠加。所有属性均为可选属性,默认值如下:
|
||||
// aO,rO,gO,bO默认值为0; aM,rM,gM,bM 默认值为100
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}
|
||||
~~~
|
After Width: | Height: | Size: 90 KiB |
After Width: | Height: | Size: 94 KiB |
After Width: | Height: | Size: 212 KiB |
After Width: | Height: | Size: 160 KiB |
After Width: | Height: | Size: 183 KiB |
After Width: | Height: | Size: 193 KiB |
After Width: | Height: | Size: 193 KiB |
After Width: | Height: | Size: 203 KiB |
|
@ -0,0 +1,41 @@
|
|||
DragonBones 本身并不实现事件派发,动画事件和自定义事件的派发与接收都依赖引擎的事件系统,这样可以使得 DragonBones 的事件融合到所支持的各个引擎的事件系统之中。
|
||||
|
||||
在 Egret 中,DragonBones 是依赖 EgretArmatureDisplay 来派发和接收事件的,所以通过对其进行事件监听,就可以收到所有来自骨架的动画事件和自定义事件(更多关于 Egret 的事件知识请参考 Egret 的相关教程和文档)。
|
||||
|
||||
[dragonBones.EventObject](http://developer.egret.com/cn/apidoc/index/name/dragonBones.EventObject) 定义了 DragonBones 中相关的事件类型,同时他也会做为一个事件参数通过 [dragonBones.EgretEvent](http://developer.egret.com/cn/apidoc/index/name/dragonBones.EgretEvent) 传递给事件监听器。
|
||||
|
||||
代码如下:
|
||||
|
||||
~~~javascript
|
||||
let armatureDisplay = factory.buildArmatureDisplay("armatureName");
|
||||
this.addChild(armatureDisplay);
|
||||
|
||||
// Event listener.
|
||||
function animationEventHandler(event: dragonBones.EgretEvent): void {
|
||||
let eventObject = event.eventObject;
|
||||
console.log(eventObject.animationState.name, event.type, eventObject.name ? eventObject.name : "");
|
||||
}
|
||||
|
||||
// Add animation event listener.
|
||||
armatureDisplay.addEventListener(dragonBones.EventObject.START, animationEventHandler, this);
|
||||
armatureDisplay.addEventListener(dragonBones.EventObject.LOOP_COMPLETE, animationEventHandler, this);
|
||||
armatureDisplay.addEventListener(dragonBones.EventObject.COMPLETE, animationEventHandler, this);
|
||||
armatureDisplay.addEventListener(dragonBones.EventObject.FADE_IN, animationEventHandler, this);
|
||||
armatureDisplay.addEventListener(dragonBones.EventObject.FADE_IN_COMPLETE, animationEventHandler, this);
|
||||
armatureDisplay.addEventListener(dragonBones.EventObject.FADE_OUT, animationEventHandler, this);
|
||||
armatureDisplay.addEventListener(dragonBones.EventObject.FADE_OUT_COMPLETE, animationEventHandler, this);
|
||||
|
||||
// Add animation custom event listener.
|
||||
armatureDisplay.addEventListener(dragonBones.EventObject.FRAME_EVENT, animationEventHandler, this);
|
||||
|
||||
// Add animation sound event listener.
|
||||
factory.soundEventManager.addEventListener(dragonBones.EventObject.SOUND_EVENT, animationEventHandler, this);
|
||||
~~~
|
||||
|
||||
* 自定义事件可以在 DragonBones Pro 中的事件时间轴添加。[视频教程](http://player.youku.com/embed/XMjY0MjU4ODU4NA==)
|
||||
* 自定义事件可以配置自定义参数。
|
||||
* 声音事件可以通过 factory 的 soundEventManager 实例统一监听,而不必为每个骨架单独监听。
|
||||
|
||||
可以访问示例中心查看参考示例的效果和下载源码:
|
||||
* [DragonBones 在线演示](http://www.dragonbones.com/demo/egret/animation_base_test/index.html)
|
||||
* [DragonBones 事例源码](https://github.com/DragonBones/DragonBonesJS/blob/master/Egret/Demos/src/demo/AnimationBaseTest.ts)
|
|
@ -0,0 +1,33 @@
|
|||
在制作拥有复杂灵活的动画角色时,可以通过 DragonBones 提供的动画遮罩和动画混合功能,大幅的降低设计师的动画开发工作量,从程序的角度灵活控制动画。例如一个人物上半身可以直立、弯腰、开火。下半身可以直立、下蹲、跑动。并且上下半身的动作可以灵活组合,例如角色可以站立开火、下蹲开火、跑动开火。而所有的这些动作都是由玩家的操控实时控制的。如果要设计师设计所有的这些动画,需要排列组合的制作 3x3 共 9 种动画,其中包含了大量的重复劳动,通过 DragonBones 的动画遮罩和动画融合的功能,设计师只需为上下半身分别设计 3 种动画,也就是一共 6 种动画,剩下的事交给程序实现就可以了。
|
||||
|
||||
下面分别介绍动画混合和动画遮罩这两个功能。
|
||||
|
||||
* 动画混合
|
||||
动画混合是指一个骨架同时可以播放多个动画。例如下面的代码,可以让角色同时播放跑步和开火的动画。
|
||||
|
||||
~~~javascript
|
||||
armatureDisplay.animation.fadeIn("run", 0.2, 0, 0, "NORMAL_ANIMATION_GROUP");
|
||||
armatureDisplay.animation.fadeIn("fire", 0.1, 1, 0, "ATTACK_ANIMATION_GROUP");
|
||||
~~~
|
||||
|
||||
* 动画遮罩
|
||||
动画遮罩就是只将动画的一部分呈现出来,例如下面的代码,将只播放head和body两个骨头的跑步动画,其他骨头将维持原姿势不动。
|
||||
|
||||
~~~javascript
|
||||
let animationState = armatureDisplay.animation.fadeIn("run");
|
||||
animationState.addBoneMask("head");
|
||||
animationState.addBoneMask("body_u");
|
||||
~~~
|
||||
|
||||
这个功能就是通过 AnimationState 的 addBoneMask 这个 API 来实现的。
|
||||
|
||||
这里需要解释的一点就是 DragonBones 骨骼动画在运行时有一个组的概念,我们可以让动画在一个组中播放,当另一个动画被设置为在相同组中播放时,之前播放的同组动画就会停止,所以我们可以把希望同时播放的动画放在不同的组里。就像上面的代码中,我们可以把开火放到上半身组,跑步放到下半身组,这样角色就可以同时开火和跑步了。
|
||||
|
||||
最后将动画遮罩和动画混合一起使用,代码如下
|
||||
|
||||
~~~javascript
|
||||
armatureDisplay.animation.fadeIn("run", 0.2, 0, 0, "NORMAL_ANIMATION_GROUP");
|
||||
|
||||
let animationState = armatureDisplay.animation.fadeIn("fire", 0.1, 1, 0, "ATTACK_ANIMATION_GROUP");
|
||||
animationState.addBoneMask("body_u");
|
||||
~~~
|
After Width: | Height: | Size: 129 KiB |
After Width: | Height: | Size: 157 KiB |
|
@ -0,0 +1,76 @@
|
|||
DragonBones 系统中允许创建多个骨骼动画,用户可以创建多个 Factory 来管理不同的骨骼动画,也可使用同一个 Factory 来管理多个骨骼动画。
|
||||
* 当使用一个 Factory 时,需要注意避免龙骨数据或骨架数据重名。
|
||||
* 如果没有特殊需求,建议不要使用多个 Factory 实例
|
||||
|
||||
使用多个EgretFactory方法可参考**创建骨骼动画**一节。
|
||||
范例如下:
|
||||
|
||||
~~~javascript
|
||||
let dragonbonesData = RES.getRes( "RobotGame_1_json" );
|
||||
let textureData = RES.getRes( "texture_json" );
|
||||
let texture = RES.getRes( "texture_png" );
|
||||
|
||||
//
|
||||
let egretFactoryA = new dragonBones.EgretFactory();
|
||||
egretFactoryA.parseDragonBonesData(dragonbonesData);
|
||||
egretFactoryA.parseTextureAtlasData(textureData, texture);
|
||||
|
||||
let armatureDisplayA = egretFactoryA.buildArmatureDisplay("robot");
|
||||
this.addChild(armatureDisplayA);
|
||||
armatureDisplayA.x = 200;
|
||||
armatureDisplayA.y = 300;
|
||||
armatureDisplayA.scaleX = 0.5;
|
||||
armatureDisplayA.scaleY = 0.5;
|
||||
|
||||
//
|
||||
let egretFactoryB = new dragonBones.EgretFactory();
|
||||
egretFactoryB.parseDragonBonesData(dragonbonesData);
|
||||
egretFactoryB.parseTextureAtlasData(textureData, texture);
|
||||
|
||||
let armatureDisplayB = egretFactoryB.buildArmatureDisplay("robot");
|
||||
this.addChild(armatureDisplayB);
|
||||
armatureDisplayB.x = 250;
|
||||
armatureDisplayB.y = 350;
|
||||
armatureDisplayB.scaleX = 0.5;
|
||||
armatureDisplayB.scaleY = 0.5;
|
||||
~~~
|
||||
|
||||
效果如图:
|
||||
|
||||
![](56c314eb7853f.png)
|
||||
|
||||
使用同一 Factory 方法如下:
|
||||
|
||||
~~~javascript
|
||||
let dragonbonesDataA = RES.getRes( "RobotGame_1_json" );
|
||||
let textureDataA = RES.getRes( "texture_json" );
|
||||
let textureA = RES.getRes( "texture_png" );
|
||||
|
||||
let dragonbonesDataB = RES.getRes("Dragon_json");
|
||||
let textureDataB = RES.getRes("dragontexture_json");
|
||||
let textureB = RES.getRes("dragontexture_png");
|
||||
|
||||
let egretFactory = dragonBones.EgretFactory.factory;
|
||||
egretFactory.parseDragonBonesData(dragonbonesDataA);
|
||||
egretFactory.parseTextureAtlasData(textureDataA, textureA);
|
||||
egretFactory.parseDragonBonesData(dragonbonesDataB);
|
||||
egretFactory.parseTextureAtlasData(textureDataB, textureB);
|
||||
|
||||
let armatureDisplayA = dragonbonesFactory.buildArmatureDisplay("robot");
|
||||
this.addChild(armatureDisplayA);
|
||||
armatureDisplayA.x = 200;
|
||||
armatureDisplayA.y = 300;
|
||||
armatureDisplayA.scaleX = 0.5;
|
||||
armatureDisplayA.scaleY = 0.5;
|
||||
|
||||
let armatureDisplayB = dragonbonesFactory.buildArmatureDisplay("Dragon");
|
||||
this.addChild(armatureDisplayB);
|
||||
armatureDisplayB.x = 250;
|
||||
armatureDisplayB.y = 350;
|
||||
armatureDisplayB.scaleX = 0.5;
|
||||
armatureDisplayB.scaleY = 0.5;
|
||||
~~~
|
||||
|
||||
效果如图:
|
||||
|
||||
![](56c314eba5994.png)
|