diff --git a/Conversion/ASCodeTool/56b1ac1e245c0.png b/Conversion/ASCodeTool/56b1ac1e245c0.png new file mode 100644 index 0000000..03150fc Binary files /dev/null and b/Conversion/ASCodeTool/56b1ac1e245c0.png differ diff --git a/Conversion/ASCodeTool/56b1ac1e2e299.png b/Conversion/ASCodeTool/56b1ac1e2e299.png new file mode 100644 index 0000000..24bfbe1 Binary files /dev/null and b/Conversion/ASCodeTool/56b1ac1e2e299.png differ diff --git a/Conversion/ASCodeTool/README.md b/Conversion/ASCodeTool/README.md new file mode 100644 index 0000000..b5944de --- /dev/null +++ b/Conversion/ASCodeTool/README.md @@ -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项目中直接使用（错误自己还是需要改的） \ No newline at end of file diff --git a/Conversion/SWFTool/56b1ac0cbd1f8.jpg b/Conversion/SWFTool/56b1ac0cbd1f8.jpg new file mode 100644 index 0000000..2a0ed48 Binary files /dev/null and b/Conversion/SWFTool/56b1ac0cbd1f8.jpg differ diff --git a/Conversion/SWFTool/56b1ac0d06bb9.jpg b/Conversion/SWFTool/56b1ac0d06bb9.jpg new file mode 100644 index 0000000..314308f Binary files /dev/null and b/Conversion/SWFTool/56b1ac0d06bb9.jpg differ diff --git a/Conversion/SWFTool/README.md b/Conversion/SWFTool/README.md new file mode 100644 index 0000000..b4b2e98 --- /dev/null +++ b/Conversion/SWFTool/README.md @@ -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项目相应路径下。 \ No newline at end of file diff --git a/Conversion/debugger/56b1ac3f5904b.jpg b/Conversion/debugger/56b1ac3f5904b.jpg new file mode 100644 index 0000000..72b20fc Binary files /dev/null and b/Conversion/debugger/56b1ac3f5904b.jpg differ diff --git a/Conversion/debugger/56b1ac402f21a.jpg b/Conversion/debugger/56b1ac402f21a.jpg new file mode 100644 index 0000000..7096104 Binary files /dev/null and b/Conversion/debugger/56b1ac402f21a.jpg differ diff --git a/Conversion/debugger/56b1ac409fa73.jpg b/Conversion/debugger/56b1ac409fa73.jpg new file mode 100644 index 0000000..2ccba09 Binary files /dev/null and b/Conversion/debugger/56b1ac409fa73.jpg differ diff --git a/Conversion/debugger/README.md b/Conversion/debugger/README.md new file mode 100644 index 0000000..43b8ea4 --- /dev/null +++ b/Conversion/debugger/README.md @@ -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. 设置横竖屏，如上。修改 + +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编译项目。 \ No newline at end of file diff --git a/Conversion/errorDeal/README.md b/Conversion/errorDeal/README.md new file mode 100644 index 0000000..1a195f5 --- /dev/null +++ b/Conversion/errorDeal/README.md @@ -0,0 +1,201 @@ +### 一，工具基本功能报错 + +* 无法新建转换项目 + +新建转换项目时，工具没有反应，进入假死状态。这种情况下可能与本地没有配置好egret环境有关，参考[准备与安装](../../Conversion/installation/README.md)。 + +* 项目转换后编译报错 + +首先确定本机当前所用的Egret版本为EgretConversion所要求的版本。如果低于所需最低版本，则要更新Egret（[准备与安装](../../Conversion/installation/README.md)）。 + +* 3000端口被占用，无法运行项目 + +egret本机项目运行在3000端口上，需要结束其他占用了3000端口的进程。参考“Getting Started”文档的“KILL3000端口”部分。 + +### 二，代码转换报错 + +* 类型转换报错 + +ts中任意类型转换报错，可在表达式前加强转一下。 + +使用'as'操作符做类型转换时，如果要转为Class类型，会有一个编译报错： + +“error TS2304: Cannot find name 'any'.” + +例如从加载的swf中取链接类定义： + +``` +var btnCls:Class = loaderInfo.applicationDomain.getDefinition("MyButton") as Class; +``` + +转换之后的TS代码为： + +``` +var btnCls:any = as3.As3As(loaderInfo.applicationDomain.getDefinition ("MyButton"),any); +``` + +这是因为ts中没有与Class对应的类类型，需要手动修改如下： + +``` +var cls:any = loaderInfo.applicationDomain.getDefinition ("MyButton"); +``` + +* 类型转换报错error TS2345 + +``` +private myFunc():void{ + var employees:Array; + var isManager:Function = function (element:any,index:number,arr:Array):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'. + +大部分情况下这是编译器的误报，可以忽略不管。也可以手动在右侧表达式前加强转，再次编译就不会报类型强转的错误。 + +* 接口继承接口，类型判定需手动修改。 + +* 判断一个对象是否实现了某接口，需手动修改。 + +* 对于闭包，如果有嵌套的写法可能会转换失效，根据错误提示修改写法。 + +* 对于出现的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) \ No newline at end of file diff --git a/Conversion/fillingConfiguration/56b1abfa0ce8e.png b/Conversion/fillingConfiguration/56b1abfa0ce8e.png new file mode 100644 index 0000000..02c09d3 Binary files /dev/null and b/Conversion/fillingConfiguration/56b1abfa0ce8e.png differ diff --git a/Conversion/fillingConfiguration/56b1abfa302f6.png b/Conversion/fillingConfiguration/56b1abfa302f6.png new file mode 100644 index 0000000..be7499b Binary files /dev/null and b/Conversion/fillingConfiguration/56b1abfa302f6.png differ diff --git a/Conversion/fillingConfiguration/README.md b/Conversion/fillingConfiguration/README.md new file mode 100644 index 0000000..781087f --- /dev/null +++ b/Conversion/fillingConfiguration/README.md @@ -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下。** \ No newline at end of file diff --git a/Conversion/guide/56b1ab987e000.png b/Conversion/guide/56b1ab987e000.png new file mode 100644 index 0000000..9281586 Binary files /dev/null and b/Conversion/guide/56b1ab987e000.png differ diff --git a/Conversion/guide/56b1ab9895aef.png b/Conversion/guide/56b1ab9895aef.png new file mode 100644 index 0000000..6927156 Binary files /dev/null and b/Conversion/guide/56b1ab9895aef.png differ diff --git a/Conversion/guide/56b1ab989f694.png b/Conversion/guide/56b1ab989f694.png new file mode 100644 index 0000000..96b287d Binary files /dev/null and b/Conversion/guide/56b1ab989f694.png differ diff --git a/Conversion/guide/56b1ab98afb53.png b/Conversion/guide/56b1ab98afb53.png new file mode 100644 index 0000000..a6a2e83 Binary files /dev/null and b/Conversion/guide/56b1ab98afb53.png differ diff --git a/Conversion/guide/56b1ab98bdbdc.png b/Conversion/guide/56b1ab98bdbdc.png new file mode 100644 index 0000000..5ce80ab Binary files /dev/null and b/Conversion/guide/56b1ab98bdbdc.png differ diff --git a/Conversion/guide/56b1ab98d19a8.png b/Conversion/guide/56b1ab98d19a8.png new file mode 100644 index 0000000..fdd2bce Binary files /dev/null and b/Conversion/guide/56b1ab98d19a8.png differ diff --git a/Conversion/guide/56b1ab98dffc5.png b/Conversion/guide/56b1ab98dffc5.png new file mode 100644 index 0000000..3701377 Binary files /dev/null and b/Conversion/guide/56b1ab98dffc5.png differ diff --git a/Conversion/guide/56b1ab98efc4a.png b/Conversion/guide/56b1ab98efc4a.png new file mode 100644 index 0000000..49c5e4b Binary files /dev/null and b/Conversion/guide/56b1ab98efc4a.png differ diff --git a/Conversion/guide/56b1ab990bea9.png b/Conversion/guide/56b1ab990bea9.png new file mode 100644 index 0000000..1b82dfa Binary files /dev/null and b/Conversion/guide/56b1ab990bea9.png differ diff --git a/Conversion/guide/56b1ab991d532.png b/Conversion/guide/56b1ab991d532.png new file mode 100644 index 0000000..43f7d57 Binary files /dev/null and b/Conversion/guide/56b1ab991d532.png differ diff --git a/Conversion/guide/56b1ab992cda3.png b/Conversion/guide/56b1ab992cda3.png new file mode 100644 index 0000000..d0a9465 Binary files /dev/null and b/Conversion/guide/56b1ab992cda3.png differ diff --git a/Conversion/guide/56b1ab993d585.png b/Conversion/guide/56b1ab993d585.png new file mode 100644 index 0000000..d6fc862 Binary files /dev/null and b/Conversion/guide/56b1ab993d585.png differ diff --git a/Conversion/guide/56b1ab994d310.png b/Conversion/guide/56b1ab994d310.png new file mode 100644 index 0000000..e4aeea4 Binary files /dev/null and b/Conversion/guide/56b1ab994d310.png differ diff --git a/Conversion/guide/56b1ab9bc0ca0.png b/Conversion/guide/56b1ab9bc0ca0.png new file mode 100644 index 0000000..c9309ef Binary files /dev/null and b/Conversion/guide/56b1ab9bc0ca0.png differ diff --git a/Conversion/guide/56b1ab9f1566a.png b/Conversion/guide/56b1ab9f1566a.png new file mode 100644 index 0000000..d7c0cda Binary files /dev/null and b/Conversion/guide/56b1ab9f1566a.png differ diff --git a/Conversion/guide/README.md b/Conversion/guide/README.md new file mode 100644 index 0000000..7a4570b --- /dev/null +++ b/Conversion/guide/README.md @@ -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 \ No newline at end of file diff --git a/Conversion/importProj/56b1abe353e63.jpg b/Conversion/importProj/56b1abe353e63.jpg new file mode 100644 index 0000000..d34d4e8 Binary files /dev/null and b/Conversion/importProj/56b1abe353e63.jpg differ diff --git a/Conversion/importProj/56b1abe4280de.jpg b/Conversion/importProj/56b1abe4280de.jpg new file mode 100644 index 0000000..88c8fcd Binary files /dev/null and b/Conversion/importProj/56b1abe4280de.jpg differ diff --git a/Conversion/importProj/56b1abe57ee5e.jpg b/Conversion/importProj/56b1abe57ee5e.jpg new file mode 100644 index 0000000..c8051da Binary files /dev/null and b/Conversion/importProj/56b1abe57ee5e.jpg differ diff --git a/Conversion/importProj/README.md b/Conversion/importProj/README.md new file mode 100644 index 0000000..eaaac2b --- /dev/null +++ b/Conversion/importProj/README.md @@ -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项目有修改要注意备份。 + diff --git a/Conversion/installation/56b1abb8c38c2.jpg b/Conversion/installation/56b1abb8c38c2.jpg new file mode 100644 index 0000000..6b2c919 Binary files /dev/null and b/Conversion/installation/56b1abb8c38c2.jpg differ diff --git a/Conversion/installation/56b1abb8e5249.jpg b/Conversion/installation/56b1abb8e5249.jpg new file mode 100644 index 0000000..3b58191 Binary files /dev/null and b/Conversion/installation/56b1abb8e5249.jpg differ diff --git a/Conversion/installation/56b1abb921522.jpg b/Conversion/installation/56b1abb921522.jpg new file mode 100644 index 0000000..fdcfbd1 Binary files /dev/null and b/Conversion/installation/56b1abb921522.jpg differ diff --git a/Conversion/installation/README.md b/Conversion/installation/README.md new file mode 100644 index 0000000..8a79551 --- /dev/null +++ b/Conversion/installation/README.md @@ -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) \ No newline at end of file diff --git a/Conversion/introduction/56b1abcd6d6dd.jpg b/Conversion/introduction/56b1abcd6d6dd.jpg new file mode 100644 index 0000000..9e0fae3 Binary files /dev/null and b/Conversion/introduction/56b1abcd6d6dd.jpg differ diff --git a/Conversion/introduction/56b1abcdad74e.jpg b/Conversion/introduction/56b1abcdad74e.jpg new file mode 100644 index 0000000..867338f Binary files /dev/null and b/Conversion/introduction/56b1abcdad74e.jpg differ diff --git a/Conversion/introduction/56b1abcdd1b27.jpg b/Conversion/introduction/56b1abcdd1b27.jpg new file mode 100644 index 0000000..1871f13 Binary files /dev/null and b/Conversion/introduction/56b1abcdd1b27.jpg differ diff --git a/Conversion/introduction/56b1abcde7e59.jpg b/Conversion/introduction/56b1abcde7e59.jpg new file mode 100644 index 0000000..16fd765 Binary files /dev/null and b/Conversion/introduction/56b1abcde7e59.jpg differ diff --git a/Conversion/introduction/56b1abce13e7e.jpg b/Conversion/introduction/56b1abce13e7e.jpg new file mode 100644 index 0000000..bf70293 Binary files /dev/null and b/Conversion/introduction/56b1abce13e7e.jpg differ diff --git a/Conversion/introduction/56b1abce322a2.jpg b/Conversion/introduction/56b1abce322a2.jpg new file mode 100644 index 0000000..975ef7c Binary files /dev/null and b/Conversion/introduction/56b1abce322a2.jpg differ diff --git a/Conversion/introduction/56b1abce99c22.jpg b/Conversion/introduction/56b1abce99c22.jpg new file mode 100644 index 0000000..b9935d2 Binary files /dev/null and b/Conversion/introduction/56b1abce99c22.jpg differ diff --git a/Conversion/introduction/56b1abced2c08.jpg b/Conversion/introduction/56b1abced2c08.jpg new file mode 100644 index 0000000..27b5233 Binary files /dev/null and b/Conversion/introduction/56b1abced2c08.jpg differ diff --git a/Conversion/introduction/56b1abcf53c29.jpg b/Conversion/introduction/56b1abcf53c29.jpg new file mode 100644 index 0000000..e092b15 Binary files /dev/null and b/Conversion/introduction/56b1abcf53c29.jpg differ diff --git a/Conversion/introduction/56b1abcf709b9.jpg b/Conversion/introduction/56b1abcf709b9.jpg new file mode 100644 index 0000000..723ceaf Binary files /dev/null and b/Conversion/introduction/56b1abcf709b9.jpg differ diff --git a/Conversion/introduction/56b1abcfbe8a8.jpg b/Conversion/introduction/56b1abcfbe8a8.jpg new file mode 100644 index 0000000..9a1fcd8 Binary files /dev/null and b/Conversion/introduction/56b1abcfbe8a8.jpg differ diff --git a/Conversion/introduction/README.md b/Conversion/introduction/README.md new file mode 100644 index 0000000..08d91d4 --- /dev/null +++ b/Conversion/introduction/README.md @@ -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%就是转换失败，具体情况需视项目而论。 \ No newline at end of file diff --git a/Conversion/questions/README.md b/Conversion/questions/README.md new file mode 100644 index 0000000..a612c47 --- /dev/null +++ b/Conversion/questions/README.md @@ -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 \ No newline at end of file diff --git a/Conversion/update/update201/LmDmsz1.jpg b/Conversion/update/update201/LmDmsz1.jpg new file mode 100644 index 0000000..7d48a15 Binary files /dev/null and b/Conversion/update/update201/LmDmsz1.jpg differ diff --git a/Conversion/update/update201/README.md b/Conversion/update/update201/README.md new file mode 100644 index 0000000..b262b36 --- /dev/null +++ b/Conversion/update/update201/README.md @@ -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弹框增加提示信息，转换过程进度等 \ No newline at end of file diff --git a/Conversion/update/update201/wtBCdKy.png b/Conversion/update/update201/wtBCdKy.png new file mode 100644 index 0000000..8bd115b Binary files /dev/null and b/Conversion/update/update201/wtBCdKy.png differ diff --git a/Conversion/update/update220/566002be9965b.jpg b/Conversion/update/update220/566002be9965b.jpg new file mode 100644 index 0000000..7d48a15 Binary files /dev/null and b/Conversion/update/update220/566002be9965b.jpg differ diff --git a/Conversion/update/update220/566002beba851.png b/Conversion/update/update220/566002beba851.png new file mode 100644 index 0000000..1dbbb88 Binary files /dev/null and b/Conversion/update/update220/566002beba851.png differ diff --git a/Conversion/update/update220/566002bed5690.png b/Conversion/update/update220/566002bed5690.png new file mode 100644 index 0000000..93e6598 Binary files /dev/null and b/Conversion/update/update220/566002bed5690.png differ diff --git a/Conversion/update/update220/566002bee0d7a.png b/Conversion/update/update220/566002bee0d7a.png new file mode 100644 index 0000000..348a548 Binary files /dev/null and b/Conversion/update/update220/566002bee0d7a.png differ diff --git a/Conversion/update/update220/566002bef10be.png b/Conversion/update/update220/566002bef10be.png new file mode 100644 index 0000000..1ca63b5 Binary files /dev/null and b/Conversion/update/update220/566002bef10be.png differ diff --git a/Conversion/update/update220/566002bf0d586.png b/Conversion/update/update220/566002bf0d586.png new file mode 100644 index 0000000..b701a9b Binary files /dev/null and b/Conversion/update/update220/566002bf0d586.png differ diff --git a/Conversion/update/update220/README.md b/Conversion/update/update220/README.md new file mode 100644 index 0000000..d9a4511 --- /dev/null +++ b/Conversion/update/update220/README.md @@ -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 \ No newline at end of file diff --git a/Conversion/update/update253/README.md b/Conversion/update/update253/README.md new file mode 100644 index 0000000..436bbe5 --- /dev/null +++ b/Conversion/update/update253/README.md @@ -0,0 +1,8 @@ +Egret Conversion v2.5.3 + +更新日志 + +[更新]对engine 3.0.5的支持。 +[修复]修复 BitmapData 的 BUG。 +Windows版本下载 +Mac版本下载 \ No newline at end of file diff --git a/Conversion/whitePaper/56b1ab7e9c3df.jpg b/Conversion/whitePaper/56b1ab7e9c3df.jpg new file mode 100644 index 0000000..06df8b7 Binary files /dev/null and b/Conversion/whitePaper/56b1ab7e9c3df.jpg differ diff --git a/Conversion/whitePaper/56b1ab7ed42f8.png b/Conversion/whitePaper/56b1ab7ed42f8.png new file mode 100644 index 0000000..4ef2b8d Binary files /dev/null and b/Conversion/whitePaper/56b1ab7ed42f8.png differ diff --git a/Conversion/whitePaper/56b1ab7f293c3.png b/Conversion/whitePaper/56b1ab7f293c3.png new file mode 100644 index 0000000..18b6492 Binary files /dev/null and b/Conversion/whitePaper/56b1ab7f293c3.png differ diff --git a/Conversion/whitePaper/56b1ab7fb9336.jpg b/Conversion/whitePaper/56b1ab7fb9336.jpg new file mode 100644 index 0000000..e1d5ffd Binary files /dev/null and b/Conversion/whitePaper/56b1ab7fb9336.jpg differ diff --git a/Conversion/whitePaper/56b1ab7fd7fa7.png b/Conversion/whitePaper/56b1ab7fd7fa7.png new file mode 100644 index 0000000..9281586 Binary files /dev/null and b/Conversion/whitePaper/56b1ab7fd7fa7.png differ diff --git a/Conversion/whitePaper/56b1ab8004933.png b/Conversion/whitePaper/56b1ab8004933.png new file mode 100644 index 0000000..ec377e1 Binary files /dev/null and b/Conversion/whitePaper/56b1ab8004933.png differ diff --git a/Conversion/whitePaper/56b1ab80266aa.png b/Conversion/whitePaper/56b1ab80266aa.png new file mode 100644 index 0000000..dbe36a4 Binary files /dev/null and b/Conversion/whitePaper/56b1ab80266aa.png differ diff --git a/Conversion/whitePaper/56b1ab805b4a6.png b/Conversion/whitePaper/56b1ab805b4a6.png new file mode 100644 index 0000000..18b6492 Binary files /dev/null and b/Conversion/whitePaper/56b1ab805b4a6.png differ diff --git a/Conversion/whitePaper/56b1ab8075879.png b/Conversion/whitePaper/56b1ab8075879.png new file mode 100644 index 0000000..ca2e847 Binary files /dev/null and b/Conversion/whitePaper/56b1ab8075879.png differ diff --git a/Conversion/whitePaper/56b1ab80979fd.png b/Conversion/whitePaper/56b1ab80979fd.png new file mode 100644 index 0000000..dba6ba2 Binary files /dev/null and b/Conversion/whitePaper/56b1ab80979fd.png differ diff --git a/Conversion/whitePaper/README.md b/Conversion/whitePaper/README.md new file mode 100644 index 0000000..f32decf --- /dev/null +++ b/Conversion/whitePaper/README.md @@ -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/) + + + diff --git a/DB/dbLibs/5foramt/README.md b/DB/dbLibs/5foramt/README.md new file mode 100644 index 0000000..2d8e965 --- /dev/null +++ b/DB/dbLibs/5foramt/README.md @@ -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 代表使用其他扩展缓动类型的枚举，具体每个枚举代表的意义未来再定义。 diff --git a/DB/dbLibs/animationSpeed/README.md b/DB/dbLibs/animationSpeed/README.md new file mode 100644 index 0000000..20ca0af --- /dev/null +++ b/DB/dbLibs/animationSpeed/README.md @@ -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) + + + diff --git a/DB/dbLibs/changeClothing/577f7e440fb58.png b/DB/dbLibs/changeClothing/577f7e440fb58.png new file mode 100644 index 0000000..d052dba Binary files /dev/null and b/DB/dbLibs/changeClothing/577f7e440fb58.png differ diff --git a/DB/dbLibs/changeClothing/577f7e442a524.png b/DB/dbLibs/changeClothing/577f7e442a524.png new file mode 100644 index 0000000..0ff4386 Binary files /dev/null and b/DB/dbLibs/changeClothing/577f7e442a524.png differ diff --git a/DB/dbLibs/changeClothing/577f7e4445bba.png b/DB/dbLibs/changeClothing/577f7e4445bba.png new file mode 100644 index 0000000..bac41a6 Binary files /dev/null and b/DB/dbLibs/changeClothing/577f7e4445bba.png differ diff --git a/DB/dbLibs/changeClothing/577f7e4460b84.png b/DB/dbLibs/changeClothing/577f7e4460b84.png new file mode 100644 index 0000000..0eb7a29 Binary files /dev/null and b/DB/dbLibs/changeClothing/577f7e4460b84.png differ diff --git a/DB/dbLibs/changeClothing/README.md b/DB/dbLibs/changeClothing/README.md new file mode 100644 index 0000000..707fc97 --- /dev/null +++ b/DB/dbLibs/changeClothing/README.md @@ -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")); +``` + + diff --git a/DB/dbLibs/copy/README.md b/DB/dbLibs/copy/README.md new file mode 100644 index 0000000..bf7ac10 --- /dev/null +++ b/DB/dbLibs/copy/README.md @@ -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) diff --git a/DB/dbLibs/createAnimation/55937e0a59ba9.zip b/DB/dbLibs/createAnimation/55937e0a59ba9.zip new file mode 100644 index 0000000..debd9a0 Binary files /dev/null and b/DB/dbLibs/createAnimation/55937e0a59ba9.zip differ diff --git a/DB/dbLibs/createAnimation/56c3144fce23f.png b/DB/dbLibs/createAnimation/56c3144fce23f.png new file mode 100644 index 0000000..dfaf7c5 Binary files /dev/null and b/DB/dbLibs/createAnimation/56c3144fce23f.png differ diff --git a/DB/dbLibs/createAnimation/56c314504fd66.png b/DB/dbLibs/createAnimation/56c314504fd66.png new file mode 100644 index 0000000..dd092a6 Binary files /dev/null and b/DB/dbLibs/createAnimation/56c314504fd66.png differ diff --git a/DB/dbLibs/createAnimation/README.md b/DB/dbLibs/createAnimation/README.md new file mode 100644 index 0000000..441aa0a --- /dev/null +++ b/DB/dbLibs/createAnimation/README.md @@ -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) + diff --git a/DB/dbLibs/createProject/README.md b/DB/dbLibs/createProject/README.md new file mode 100644 index 0000000..0f6da27 --- /dev/null +++ b/DB/dbLibs/createProject/README.md @@ -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); +``` diff --git a/DB/dbLibs/dataFormat/README.md b/DB/dbLibs/dataFormat/README.md new file mode 100644 index 0000000..c9d07b7 --- /dev/null +++ b/DB/dbLibs/dataFormat/README.md @@ -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 + }] + }] + }] + }] +} +~~~ diff --git a/DB/dbLibs/events/567b5c831a732.png b/DB/dbLibs/events/567b5c831a732.png new file mode 100644 index 0000000..c12364b Binary files /dev/null and b/DB/dbLibs/events/567b5c831a732.png differ diff --git a/DB/dbLibs/events/567b5c83ad7a9.png b/DB/dbLibs/events/567b5c83ad7a9.png new file mode 100644 index 0000000..183ba42 Binary files /dev/null and b/DB/dbLibs/events/567b5c83ad7a9.png differ diff --git a/DB/dbLibs/events/567b5c847db08.png b/DB/dbLibs/events/567b5c847db08.png new file mode 100644 index 0000000..3a8db1d Binary files /dev/null and b/DB/dbLibs/events/567b5c847db08.png differ diff --git a/DB/dbLibs/events/567b5c85ae7c9.png b/DB/dbLibs/events/567b5c85ae7c9.png new file mode 100644 index 0000000..ac4b0d3 Binary files /dev/null and b/DB/dbLibs/events/567b5c85ae7c9.png differ diff --git a/DB/dbLibs/events/567b5c893a5c3.png b/DB/dbLibs/events/567b5c893a5c3.png new file mode 100644 index 0000000..b99c52f Binary files /dev/null and b/DB/dbLibs/events/567b5c893a5c3.png differ diff --git a/DB/dbLibs/events/567b5c8ab158f.png b/DB/dbLibs/events/567b5c8ab158f.png new file mode 100644 index 0000000..3256849 Binary files /dev/null and b/DB/dbLibs/events/567b5c8ab158f.png differ diff --git a/DB/dbLibs/events/567b5c8d06710.png b/DB/dbLibs/events/567b5c8d06710.png new file mode 100644 index 0000000..bf2013d Binary files /dev/null and b/DB/dbLibs/events/567b5c8d06710.png differ diff --git a/DB/dbLibs/events/567b5c90d72c2.png b/DB/dbLibs/events/567b5c90d72c2.png new file mode 100644 index 0000000..2bcc9a4 Binary files /dev/null and b/DB/dbLibs/events/567b5c90d72c2.png differ diff --git a/DB/dbLibs/events/README.md b/DB/dbLibs/events/README.md new file mode 100644 index 0000000..f104fab --- /dev/null +++ b/DB/dbLibs/events/README.md @@ -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) diff --git a/DB/dbLibs/maskAndMixed/README.md b/DB/dbLibs/maskAndMixed/README.md new file mode 100644 index 0000000..a429b5e --- /dev/null +++ b/DB/dbLibs/maskAndMixed/README.md @@ -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"); +~~~ diff --git a/DB/dbLibs/morePeopleAnimation/56c314eb7853f.png b/DB/dbLibs/morePeopleAnimation/56c314eb7853f.png new file mode 100644 index 0000000..2f404e5 Binary files /dev/null and b/DB/dbLibs/morePeopleAnimation/56c314eb7853f.png differ diff --git a/DB/dbLibs/morePeopleAnimation/56c314eba5994.png b/DB/dbLibs/morePeopleAnimation/56c314eba5994.png new file mode 100644 index 0000000..7db0c50 Binary files /dev/null and b/DB/dbLibs/morePeopleAnimation/56c314eba5994.png differ diff --git a/DB/dbLibs/morePeopleAnimation/README.md b/DB/dbLibs/morePeopleAnimation/README.md new file mode 100644 index 0000000..a555286 --- /dev/null +++ b/DB/dbLibs/morePeopleAnimation/README.md @@ -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) diff --git a/DB/dbLibs/motionControlskeleton/563ac3634b09d.gif b/DB/dbLibs/motionControlskeleton/563ac3634b09d.gif new file mode 100644 index 0000000..ebc21de Binary files /dev/null and b/DB/dbLibs/motionControlskeleton/563ac3634b09d.gif differ diff --git a/DB/dbLibs/motionControlskeleton/README.md b/DB/dbLibs/motionControlskeleton/README.md new file mode 100644 index 0000000..a76b4db --- /dev/null +++ b/DB/dbLibs/motionControlskeleton/README.md @@ -0,0 +1,20 @@ +--- +title: 控制骨骼运动 +--- +有的时候，对于一个有趣的游戏，仅仅播放预先设置的骨骼动画是不够的，我们需要角色具有动态可控的动作。令人高兴的是DragonBones提供了访问并控制骨骼框架里每根骨头的方法，让你的角色在游戏中随意运动。 +下面示例通过鼠标在场景中的移动来控制骨骼。我们创建了一个跟随鼠标运动的小鸟，小龙人会与小鸟保持一定距离，同时小龙人的头和胳膊会跟随小鸟运动而做出不同姿势，非常有趣。完整的项目代码可以在示例中心下载此示例。 + +[程序控制骨骼运动](http://edn.egret.com/cn/index.php/article/index/id/691) + +下面看一下实现这个功能的关键代码段。 + +~~~javascript +this.head = this.armature.getBone("head"); +this.head.offset.rotation = r; +~~~ + +从上面代码我们可以看到，通过方法dragonBones.Armature.getBone(_name:String):Bone来获取某个骨骼。骨骼中的offset是一个DBTransform对象，是专门用于给开发者设置叠加的变换信息的，包括平移，旋转，缩放，等等。我们可以根据游戏逻辑的需要对设置这些参数，从而实现动态控制此骨骼的效果。 + +>注意offset的值是叠加到骨骼上现有的变换，并不是取代骨骼上现有的变换。 + +![](563ac3634b09d.gif) diff --git a/DB/dbLibs/replaceTexture/577f7e442a524.png b/DB/dbLibs/replaceTexture/577f7e442a524.png new file mode 100644 index 0000000..0ff4386 Binary files /dev/null and b/DB/dbLibs/replaceTexture/577f7e442a524.png differ diff --git a/DB/dbLibs/replaceTexture/577f7e4445bba.png b/DB/dbLibs/replaceTexture/577f7e4445bba.png new file mode 100644 index 0000000..bac41a6 Binary files /dev/null and b/DB/dbLibs/replaceTexture/577f7e4445bba.png differ diff --git a/DB/dbLibs/replaceTexture/577f7e4460b84.png b/DB/dbLibs/replaceTexture/577f7e4460b84.png new file mode 100644 index 0000000..0eb7a29 Binary files /dev/null and b/DB/dbLibs/replaceTexture/577f7e4460b84.png differ diff --git a/DB/dbLibs/replaceTexture/README.md b/DB/dbLibs/replaceTexture/README.md new file mode 100644 index 0000000..f35d08b --- /dev/null +++ b/DB/dbLibs/replaceTexture/README.md @@ -0,0 +1,43 @@ +### 局部换装 + +原有换装方案，可以替换对应slot中的图片实现，但会存在图片位置错位问题。新版本局部换装功能，可通过DragonBones预设置替换内容实现此功能。 + +原始动画如下： + +![](577f7e442a524.png) + +我们可以替换其头发的内容，新建一个DragonBones项目，将新头发加入其资源库，然后放入场景中。 + +具体替换创建新项目的原因在于获取图片轴点与骨骼原点的相对位置。 + +在新项目中调整好头发的位置后，导出数据。 + +![](577f7e4445bba.png) + +在上面的代码中继续添加如下代码。 + +~~~javascript +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。 + +编译后运行效果如图： + +![](577f7e4460b84.png) + +你可以在新项目中放置多个即将替换的纹理素材，然后在局部替换时，选择你所需要的贴图纹理。 + +### 全局换装 + +全局换装可实现将一个骨骼动画的骨架中全部贴图替换，如果使用全局换装功能，则新骨骼动画纹理集与源骨骼动画纹理集必须尺寸以及内部元素尺寸相同。 + +你可以使用如下代码来进行全局换装 + +~~~javascript +ar.armature.replaceTexture(RES.getRes("new_db_texture_png")); +~~~ diff --git a/DB/dbLibs/speedMode/56c315065bd6b.png b/DB/dbLibs/speedMode/56c315065bd6b.png new file mode 100644 index 0000000..cc6e992 Binary files /dev/null and b/DB/dbLibs/speedMode/56c315065bd6b.png differ diff --git a/DB/dbLibs/speedMode/README.md b/DB/dbLibs/speedMode/README.md new file mode 100644 index 0000000..a25b566 --- /dev/null +++ b/DB/dbLibs/speedMode/README.md @@ -0,0 +1,207 @@ +## 极速模式简介 + +*DragonBones 4.1 (后面简称DB)引入了一套极速模式，目的在于一定程度上解决DB在H5-canvas上的性能问题。* + +abbcc + +我们知道目前包括db在内的骨骼动画解决方案，普遍因为角色中需要绘制的图片比较多draw call比较高，在canvas上的性能都不是很理想。而对drawcall的优化技术上比较复杂，难度比较大，所以4.1中的极速模式是从另一个角度减少CPU的计算，来优化性能。 + +DB的骨骼动画能够支持非常细腻的动画补间和融合,同时这些功能也会在每帧消耗大量的CPU计算，极速模式在一定程度上削减了这些功能，一方面能够保留核心功能供90%的动画需求维持原有效果，另一方面能够减少一些不常用的功能所带来的不必要的性能消耗，同时为进一步优化性能的数据缓存铺平道路。 + +这是一个普通模式和极速模式的性能和功能对比表格: + +|| 普通模式 | 极速模式 | 极速模式+数据缓存 | +| -- | -- | -- | -- | +| 性能对比 | 100% | 110% | 180% | +|动画间过渡| √| √| √| +|动画补间| √ |√| √| +|动态动画补间| √| √| ×| +|颜色变换| √| √| √| +|帧动画| √| √| √| +|动画变速| √| √| √| +|局部换肤| √| √| √| +|整体换肤| √| ×| ×| +|动态骨骼增加删除| √| ×| ×| +|动画部分播放| √| ×| ×| +|多动画融合| √| ×| ×| +|程序控制动画幅度| √ |×| ×| +|时间轴事件| √ |√ |√| + +根据上表可以看出，使用极速模式的动画失去了大部分动态控制的功能。 + +另外因为极速模式的动画缓存在不同的同种骨架间是可以共用的，所以在这里官方建议，极速模式更适合游戏中会大量出现的，动画不是特别复杂的NPC角色。对于玩家控制的角色，如果使用到了任何极速模式不支持的特性，建议还是使用普通模式。 + +## 快速使用极速模式 + +DB给开发者提供了一套最简单的使用极速模式的方法，仅需两行代码的修改就能完成模式切换，并开启数据缓存（红色的部分就是需要改动的部分） + +先看一下原先使用DragonBones需要写的代码： + +``` +this.factory = new dragonBones.EgretFactory(); +this.factory.addSkeletonData(dragonBones.DataParser.parseDragonBonesData(skeletonData), "dragon"); +this.factory.addTextureAtlas(new dragonBones.EgretTextureAtlas(texture, textureData), "dragon"); +var armature:dragonBones.Armature = this.factory.buildArmature("Dragon"); +armature.animation.gotoAndPlay(“Walk”,0,-1,0); +this.addChild(armature.display); +``` + +再看一下使用极速模式的代码: + +``` +this.factory = new dragonBones.EgretFactory(); +this.factory.addSkeletonData(dragonBones.DataParser.parseDragonBonesData(skeletonData), "dragon"); +this.factory.addTextureAtlas(new dragonBones.EgretTextureAtlas(texture, textureData), "dragon"); +var armature:dragonBones.FastArmature = this.factory.buildFastArmature("Dragon"); //构建FastArmature +armature.enableAnimationCache(30); //开启数据缓存，30代表采样帧频，推荐设置为12~30，达到性能和动画流畅度的最佳平衡点。 +armature.animation.gotoAndPlay(“Walk”,0,-1,0); +this.addChild(armature.display); +``` + +## 极速模式详解 + +喜欢刨根问底的开发者，可能想知道这两行代码的背后隐藏了什么，下面就为您揭秘： + +首先看第一句 + +``` +this.factory.buildFastArmature("Dragon"); //构建FastArmature +``` + +可以很直白的告诉大家，这句的背后跟普通模式是一模一样的，就是根据AnimationData来为Armature构建骨骼和插槽，只不过这次返回的是FastArmature而不是Armautre。 + +FastArmature是跟Armature完全独立并列的两套体系，FastArmature里面使用的是FastBone，FastSlot。动画系统使用的是FastAnimation和FastAnimationState，时间轴使用的是FastBoneTimelineState，FastSlotTimelineState。所有的这些类都在dragonbones/fast这个文件夹里。 + +之所以这样设计就是希望在完全向下兼容的基础上实现一套功能简化版本的骨骼动画系统。 这套Fast骨骼动画体系在功能上和原始版本的区别就是之前表格列出来的区别。 + +其中最显著的就是Fast骨骼动画体系不再支持动画融合了，从代码上可以看到： + +FastAnimation中包含的是FastAnimationState实例 + +``` +public animationState:FastAnimationState = new FastAnimationState(); +``` + +而Animation中包含的是animationStateList，一个数组。 + +``` +private _animationStateList:Array; +``` + +这个区别所带来的动画上的效果的不同有如下两点： + +1. 极速模式不支持动画融合 + +因为FastAnimation中只包含一个FastAnimationState实例，也就是说任何时间，同一时间一个角色只会播放一个动画。一个动画的开始就意味着之前一个动画的结束。 + +而普通模式的Animation中，一个角色是可以同时播放多个动画的，也就是动画融合功能。例如一个奔跑的角色被子弹打中身体后仰。就可以通过让这个角色同时播放奔跑和后仰两个动作来实现，这样当这个角色站立时中弹和下蹲时中弹，都可以用类似的方式实现，而不需要动画设计师额外设计动画。这个功能在极速模式中已经不再支持了。 + +2. 动画过渡原理和效果发生变化 + +普通模式的动画过渡是通过动画融合来实现的，也就是说例如角色要从播放动作A过渡到播放动作B，那Animation要做的就是控制动作A淡出同时动作B淡入，在A淡出B淡入的这段时间里，实际上角色在同时播放动作A和动作B (动画融合)，通过对A和B权重（weight）的控制调节（A的权重从1降为0，B的权重从0升为1），实现从A到B的过渡。 + +极速模式因为不支持动画融合，所以动画过渡是通过当前形态和即将播放动作的第一帧的形态做线性补间实现的，效果上会比普通模式的略显生硬。不过话说回来，很多游戏中的动画都是不需要动画过渡这个功能的，所以这个变动对这些游戏几乎没有影响。 + +极速模式舍弃动画融合这个功能，最主要的目的其实是为实现数据缓存这个功能铺平道路。之前说过，极速模式是通过减少CPU计算实现性能提升的，那么减少CPU计算的极致就是把计算结果缓存下来。 + +---- + +下面看看极速模式是如何生成并使用数据缓存的： + +在db源代码中有个叫cache的文件夹里面包含所有的好数据缓存有关的类。其中最重要的就是AnimationCacheManager和AnimationCache这两个类。AnimationCacheManager是使用数据缓存的入口，也是AnimationCache的管理器。AnimationCache负责对某个特定的动画进行缓存。 + + +![](56c315065bd6b.png) + +下面这段代码是FastArmature的enableAnimationCache 方法，里面对AnimationCacheManager做了全套操作，实现对当前骨架生成缓存。 + +``` +/** + * 开启动画缓存 + * @param {number} 帧速率，每秒缓存多少次数据，越大越流畅,若值小于零会被设置为动画数据中的默认帧率 + * @param {Array} 需要缓存的动画列表，如果为null，则全部动画都缓存 + * @param {boolean} 动画是否是循环动画，仅在3.0以下的数据格式使用，如果动画不是循环动画请设置为false，默认为true。 + * @return {AnimationCacheManager} 返回缓存管理器，可以绑定到其他armature以减少内存 + */ +public enableAnimationCache(frameRate:number, animationList:Array = null, loop:boolean = true):AnimationCacheManager{ + var animationCacheManager:AnimationCacheManager = AnimationCacheManager.initWithArmatureData(this.armatureData,frameRate); + if(animationList){ + var length:number = animationList.length; + for(var i:number = 0;i < length;i++){ + var animationName:string = animationList[i]; + animationCacheManager.initAnimationCache(animationName); + } + } + else{ + animationCacheManager.initAllAnimationCache(); + } + animationCacheManager.setCacheGeneratorArmature(this); + animationCacheManager.generateAllAnimationCache(loop); + + animationCacheManager.bindCacheUserArmature(this); + this.enableCache = true; + return animationCacheManager; +} +``` + +这段代码中最重要的几个操作如下： + +``` +animationCacheManager.initAnimationCache(animationName);//初始化动画缓存 +animationCacheManager.setCacheGeneratorArmature(this);//设置缓存生成器 +animationCacheManager.generateAllAnimationCache(loop);//生成缓存 +animationCacheManager.bindCacheUserArmature(this);//绑定缓存使用者 +``` + +从中可以看到AnimationCacheManager的工作原理分为一下4步： + +1. 初始化动画缓存 + +2. 设置缓存生成器 + +3. 生成缓存 + +4. 绑定缓存使用者 + +进行完这四步之后，当一个FastArmature播放的时候，就会自动从动画缓存中拿数据了。 + +需要注意的是这段代码中用到的几个参数 + +1. frameRate 帧频。 + +这里的帧频代表的是动画的缓存采样帧频。帧频越高，动画越平滑，初始化速度越慢，播放速度也越慢。帧频越低，动画越不平滑，初始化速度越快，播放速度也越快。 + +一般来说这里的帧频设置为12~30是比较合适的，如果超过30，即便游戏达到了这个帧率，人眼也分辨不太出来。低于12的话会有明显的卡顿感。 + +2. animationList 动画列表 + +这个参数代表希望缓存的动画列表。你可以根据游戏的需要，将一部分动画缓存，另一部分不缓存（实时计算） + +3. loop 是否循环播放 + +这个参数代表动画在缓存采样时，采用循环播放的方式还是只播放1次。是否循环的区别在于从动画的最后一帧到第一帧是否有补间产生。这里建议根据角色动画的需要，需要循环播放的动画就循环采样，只需要播放一次的动画，就不循环采样。 + + +深入使用数据缓存 + +FastArmature的enableAnimationCache 方法给开发者提供了快速开启缓存的方法，操作简单但不够灵活。如果开发者希望灵活的使用数据缓存，就需要直接操作AnimationCacheManager了。 + +下面介绍几种需要直接操作AnimationCacheManager的情况： + +1. 游戏中大量相同的角色，可以复用同一个AnimationCacheManager + +很多游戏中都会有大量的NPC角色，这些角色的特点是数量多，重复，并且动作相对简单。这种类型的角色是最适合用极速模式的。对于这类角色，我们可以使用同一个AnimationCacheManager，设置一个缓存生成器，其他的都作为绑定的缓存使用者，这样能够大幅提高效率。 + +``` +animationCacheManager.setCacheGeneratorArmature(a1); +animationCacheManager.generateAllAnimationCache(); +animationCacheManager.bindCacheUserArmatures([a1,a2,a3,a4,a5]); +``` + +2. 游戏初始化一下生成所有动画缓存太卡，可以分角色分动画逐个生成。 + +一般来说，游戏在初始化的时候要初始化大量的角色，如果一上来就生成所有动画的缓存可能会产生比较明显的卡顿效果。这时您可以采用分步加载的策略，为角色一个动作一个动作的的生成缓存数据。 + +``` +animationCacheManager.generateAnimationCache(animationName); +``` diff --git a/DB/dbPro/advancedFeatures/IK/56d6a71568f12.png b/DB/dbPro/advancedFeatures/IK/56d6a71568f12.png new file mode 100644 index 0000000..97299f7 Binary files /dev/null and b/DB/dbPro/advancedFeatures/IK/56d6a71568f12.png differ diff --git a/DB/dbPro/advancedFeatures/IK/56d6a715729de.png b/DB/dbPro/advancedFeatures/IK/56d6a715729de.png new file mode 100644 index 0000000..7bdc66c Binary files /dev/null and b/DB/dbPro/advancedFeatures/IK/56d6a715729de.png differ diff --git a/DB/dbPro/advancedFeatures/IK/56d6a715801f5.png b/DB/dbPro/advancedFeatures/IK/56d6a715801f5.png new file mode 100644 index 0000000..db71776 Binary files /dev/null and b/DB/dbPro/advancedFeatures/IK/56d6a715801f5.png differ diff --git a/DB/dbPro/advancedFeatures/IK/56d6a715900f8.png b/DB/dbPro/advancedFeatures/IK/56d6a715900f8.png new file mode 100644 index 0000000..28d695d Binary files /dev/null and b/DB/dbPro/advancedFeatures/IK/56d6a715900f8.png differ diff --git a/DB/dbPro/advancedFeatures/IK/README.md b/DB/dbPro/advancedFeatures/IK/README.md new file mode 100644 index 0000000..a531ea6 --- /dev/null +++ b/DB/dbPro/advancedFeatures/IK/README.md @@ -0,0 +1,55 @@ + +#### 简介 +IK是反向动力学Inverse Kinematics的缩写。 + +DragonBones Pro 从 4.5.0 开始支持IK约束功能 + +FK为正向动力学的缩写。通常情况下，父骨骼带动子骨骼运动即为正向动力学。例如，大臂带动小臂，大腿带动小腿。 +IK与FK相反，用来实现由下而上的驱动。例如，做俯卧撑时，手撑住地面，支起身体。 + +下图就是一个典型的IK约束的例子。 +大腿为父骨骼，小腿围子骨骼。两个骨骼被IK约束在红色的约束目标上。 +特别注意的是红色的骨骼并非为小腿的子骨骼。而是和大腿骨骼同级的骨骼。 + +![](56d6a71568f12.png) + +拖动红色的约束目标骨骼，IK约束便会不断调整父子骨骼的旋转值，使得子骨骼的末端固定在约束目标骨骼上。 + +#### 添加IK约束 +选中骨骼后在属性面板可以看到两个IK约束按钮，点击便可创建IK约束。 + +![](56d6a715729de.png) + +- 末端创建约束目标： 在选中骨骼的骨骼末端自动创建约束目标骨骼并绑定IK约束。 +- 自定义拾取约束目标： 手动指定作为约束目标的骨骼，并绑定IK约束。 + +#### IK约束特性： +- 绑定了IK约束的骨骼外框显示为红色 +- 作为IK约束目标的骨骼整体显示为红色 +- 单根骨骼可以绑定IK约束 +- 两根连续父子骨骼可以绑定IK约束 +- 两个以上骨骼无法绑定IK约束 +- 非连续父子骨骼无法绑定IK约束 +- 非父子骨骼无法绑定IK约束 +- 所选骨骼的直接或间接子骨骼不能手动指定为IK约束目标骨骼 +- 关闭“旋转”继承的骨骼无法绑定IK约束 +- 绑定了Ik约束的骨骼不能关闭“旋转”继承 + +添加了IK约束的骨骼的属性面板如下 + +![](56d6a715801f5.png) + +其中IK约束属性部分包括： +- 名称：IK约束的名称，默认为自动命名，也可以重命名。 +- 骨骼：IK约束所绑定的骨骼 +- 目标：作为约束目标的骨骼的名称 +- 弯曲：IK的弯曲方向 +- IK权重：IK约束影响骨骼的权重 + +*当前的版本中还不支持在动画播放中变换弯曲和Ik权重的值。* + +约束目标骨骼的属性面板如下： + +![](56d6a715900f8.png) + +其中IK约束目标属性和IK约束属性相同，只是没有目标项，因为约束目标即为约束目标骨骼本身。 \ No newline at end of file diff --git a/DB/dbPro/advancedFeatures/curveEditor/README.md b/DB/dbPro/advancedFeatures/curveEditor/README.md new file mode 100644 index 0000000..f806138 --- /dev/null +++ b/DB/dbPro/advancedFeatures/curveEditor/README.md @@ -0,0 +1,66 @@ +DragonBones 4.1 新添加了曲线编辑器面板，在这个面板中，您可以对帧与帧间的补间应用曲线来实现不同的补间效果。 + +进入动画模式，选中一个关键帧（其后含有补间的关键帧），然后点击时间轴上的曲线按钮。如下图： + +![](p1.png) + +曲线编辑器面板打开，如下图： + +![](p2.png) + +拖动上下的两个手柄可以手动调整曲线。 + +![](p3.png) + +面板右下方为预置曲线设置 + +![](p4.png) + +由由左到右依次为，无，线性，淡入，淡出，淡入淡出。每个预设的曲线图如下： + +![](p5.png) + +应用曲线后的时间轴如下图： + +![](p6.png) + +曲线特性： +* Y坐标轴上，向上最大值为200%，向下最小值为-100%。 +* 预置的“无”曲线对应的就是无补间的效果。 +* 曲线适用于： + * 骨骼的旋转，移动，缩放。 + * 插槽的颜色变换，透明度变化。 +* 曲线面板只存在于动画制作模式 +* 应用了曲线的两帧间新插入一帧，则切割产生的两端补间，左侧的继承原有曲线，右侧的为默认的线性。 +* 三个前后相连的关键帧，其中前两帧间有曲线A，后两帧间有曲线B，删掉中间的关键帧，剩下的两帧间会应用曲线A，曲线B被删除。 +* 以下情况曲线编辑器面板置空： + +复选关键帧: +* 关键帧为当前层的最后一帧 +* 选中事件层关键帧时 +* 无关键帧选中时 + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/DB/dbPro/advancedFeatures/curveEditor/p1.png b/DB/dbPro/advancedFeatures/curveEditor/p1.png new file mode 100644 index 0000000..ae245eb Binary files /dev/null and b/DB/dbPro/advancedFeatures/curveEditor/p1.png differ diff --git a/DB/dbPro/advancedFeatures/curveEditor/p2.png b/DB/dbPro/advancedFeatures/curveEditor/p2.png new file mode 100644 index 0000000..338c30b Binary files /dev/null and b/DB/dbPro/advancedFeatures/curveEditor/p2.png differ diff --git a/DB/dbPro/advancedFeatures/curveEditor/p3.png b/DB/dbPro/advancedFeatures/curveEditor/p3.png new file mode 100644 index 0000000..cff23a5 Binary files /dev/null and b/DB/dbPro/advancedFeatures/curveEditor/p3.png differ diff --git a/DB/dbPro/advancedFeatures/curveEditor/p4.png b/DB/dbPro/advancedFeatures/curveEditor/p4.png new file mode 100644 index 0000000..57b4e72 Binary files /dev/null and b/DB/dbPro/advancedFeatures/curveEditor/p4.png differ diff --git a/DB/dbPro/advancedFeatures/curveEditor/p5.png b/DB/dbPro/advancedFeatures/curveEditor/p5.png new file mode 100644 index 0000000..3a40a53 Binary files /dev/null and b/DB/dbPro/advancedFeatures/curveEditor/p5.png differ diff --git a/DB/dbPro/advancedFeatures/curveEditor/p6.png b/DB/dbPro/advancedFeatures/curveEditor/p6.png new file mode 100644 index 0000000..0705c52 Binary files /dev/null and b/DB/dbPro/advancedFeatures/curveEditor/p6.png differ diff --git a/DB/dbPro/advancedFeatures/grid/56d7e66a32338.png b/DB/dbPro/advancedFeatures/grid/56d7e66a32338.png new file mode 100644 index 0000000..2651137 Binary files /dev/null and b/DB/dbPro/advancedFeatures/grid/56d7e66a32338.png differ diff --git a/DB/dbPro/advancedFeatures/grid/56d7e66a42ef3.png b/DB/dbPro/advancedFeatures/grid/56d7e66a42ef3.png new file mode 100644 index 0000000..0cfb19a Binary files /dev/null and b/DB/dbPro/advancedFeatures/grid/56d7e66a42ef3.png differ diff --git a/DB/dbPro/advancedFeatures/grid/56d7e66a674ec.png b/DB/dbPro/advancedFeatures/grid/56d7e66a674ec.png new file mode 100644 index 0000000..06a5212 Binary files /dev/null and b/DB/dbPro/advancedFeatures/grid/56d7e66a674ec.png differ diff --git a/DB/dbPro/advancedFeatures/grid/56d7e66a7dfa7.png b/DB/dbPro/advancedFeatures/grid/56d7e66a7dfa7.png new file mode 100644 index 0000000..1bd3000 Binary files /dev/null and b/DB/dbPro/advancedFeatures/grid/56d7e66a7dfa7.png differ diff --git a/DB/dbPro/advancedFeatures/grid/56d7e66a93a42.png b/DB/dbPro/advancedFeatures/grid/56d7e66a93a42.png new file mode 100644 index 0000000..30fdc1c Binary files /dev/null and b/DB/dbPro/advancedFeatures/grid/56d7e66a93a42.png differ diff --git a/DB/dbPro/advancedFeatures/grid/56d7e66aa892f.png b/DB/dbPro/advancedFeatures/grid/56d7e66aa892f.png new file mode 100644 index 0000000..b55cab5 Binary files /dev/null and b/DB/dbPro/advancedFeatures/grid/56d7e66aa892f.png differ diff --git a/DB/dbPro/advancedFeatures/grid/README.md b/DB/dbPro/advancedFeatures/grid/README.md new file mode 100644 index 0000000..85d36c8 --- /dev/null +++ b/DB/dbPro/advancedFeatures/grid/README.md @@ -0,0 +1,44 @@ +#### 简介 +网格可以用来实现图片的任意变形和扭曲。 +DragonBones Pro 从4.5.0开始支持网格的创建和编辑。 + +#### 创建网格 +选中插槽或插槽内的图片，在属性面板，点击转换成网格按钮。 + +![](56d7e66a32338.png) + +![](56d7e66a42ef3.png) + +图片转换为网格后，插槽和图片的属性面板如下 + +![](56d7e66a93a42.png) + +![](56d7e66aa892f.png) + +点击“编辑网格”按钮，便可以打开网格编辑器面板，开始编辑网格。 +点击“重置网格”按钮，网格中图片和网格顶点的对应关系会被重置，图片会恢复原有的形状。 +点击“转换为图片”按钮，可以将网格重新转换回图片。 + +#### 网格编辑器 +![](56d7e66a7dfa7.png) + +下方工具栏由左至右依次是： +- 顶点数：显示网格中顶点的个数 +- 编辑工具：用来移动顶点（快捷键为Q） +- 添加工具：用来添加顶点（快捷键为W) +- 删除工具：用来删除顶点（快捷键为E) +- 边线工具：用来勾画网格边线的工具。注意，使用这个工具时，原有的顶点和边线会被全部清除。 +- 重置工具：顶点会被重置为默认状态和数量。（四个顶点分居正方形的四个角） + +使用添加工具可以添加顶点，通过拖拽还可以添加自定义连线。如下图 +![](56d7e66a674ec.png) + +A或B点和四个角的顶点间的连线是灰色的，这是自动生成的连线。 +A和B之间的连线是黄色的，这是通过拖拽生成的自定义连线。 + +#### 网格特性 +- 网格拉伸图片到达的尺寸最大不能超过2048x2048 +- 网格的边线必须是闭合的，如果绘制的边线没有手动绘制闭合，边线会自动闭合。 +- 网格的旋转中心点为原图片的旋转中心点，不会因为网格边线的重新绘制或图片的拉伸而改变 +- 当前版本中还不支持网格顶点基于权重绑定于指定骨骼 +- 动画模式下，网格在时间轴上有独立的图层，对顶点的位移操作可以在时间轴上添加关键帧 \ No newline at end of file diff --git a/DB/dbPro/advancedFeatures/skinWeights/5732eaaa853d9.png b/DB/dbPro/advancedFeatures/skinWeights/5732eaaa853d9.png new file mode 100644 index 0000000..e292b9b Binary files /dev/null and b/DB/dbPro/advancedFeatures/skinWeights/5732eaaa853d9.png differ diff --git a/DB/dbPro/advancedFeatures/skinWeights/5732eaaa9e514.png b/DB/dbPro/advancedFeatures/skinWeights/5732eaaa9e514.png new file mode 100644 index 0000000..ef5071b Binary files /dev/null and b/DB/dbPro/advancedFeatures/skinWeights/5732eaaa9e514.png differ diff --git a/DB/dbPro/advancedFeatures/skinWeights/5732eaaab3b2a.png b/DB/dbPro/advancedFeatures/skinWeights/5732eaaab3b2a.png new file mode 100644 index 0000000..f43e887 Binary files /dev/null and b/DB/dbPro/advancedFeatures/skinWeights/5732eaaab3b2a.png differ diff --git a/DB/dbPro/advancedFeatures/skinWeights/5732eaaac19af.png b/DB/dbPro/advancedFeatures/skinWeights/5732eaaac19af.png new file mode 100644 index 0000000..7152af8 Binary files /dev/null and b/DB/dbPro/advancedFeatures/skinWeights/5732eaaac19af.png differ diff --git a/DB/dbPro/advancedFeatures/skinWeights/5732eaaae3d8f.png b/DB/dbPro/advancedFeatures/skinWeights/5732eaaae3d8f.png new file mode 100644 index 0000000..764df8a Binary files /dev/null and b/DB/dbPro/advancedFeatures/skinWeights/5732eaaae3d8f.png differ diff --git a/DB/dbPro/advancedFeatures/skinWeights/5732eaaaed970.png b/DB/dbPro/advancedFeatures/skinWeights/5732eaaaed970.png new file mode 100644 index 0000000..3398ed7 Binary files /dev/null and b/DB/dbPro/advancedFeatures/skinWeights/5732eaaaed970.png differ diff --git a/DB/dbPro/advancedFeatures/skinWeights/5732eaab0a297.png b/DB/dbPro/advancedFeatures/skinWeights/5732eaab0a297.png new file mode 100644 index 0000000..c330738 Binary files /dev/null and b/DB/dbPro/advancedFeatures/skinWeights/5732eaab0a297.png differ diff --git a/DB/dbPro/advancedFeatures/skinWeights/5732eaab2554a.png b/DB/dbPro/advancedFeatures/skinWeights/5732eaab2554a.png new file mode 100644 index 0000000..edc3f35 Binary files /dev/null and b/DB/dbPro/advancedFeatures/skinWeights/5732eaab2554a.png differ diff --git a/DB/dbPro/advancedFeatures/skinWeights/README.md b/DB/dbPro/advancedFeatures/skinWeights/README.md new file mode 100644 index 0000000..0b728e2 --- /dev/null +++ b/DB/dbPro/advancedFeatures/skinWeights/README.md @@ -0,0 +1,41 @@ +### 简介 +蒙皮是指将网格点绑定在指定的骨骼上，基于绑定时分配的权重，网格点随着骨骼的运动而移动。蒙皮使得繁琐复杂的网格点操作只要通过简单的骨骼操作便能实现。 + +### 绑定方法 + +1. 首先要将图片转化为网格，并添加网格点。具体方法请参看[网格](../grid/README.md) +2. 选中网格，并在属性面板勾选“开启编辑”。（或者切换到权重工具![](5732eaaaed970.png)，直接选择网格，便自动开启权重编辑) + +![](5732eaaac19af.png) + +3. 开启编辑后，点击“绑定骨骼”按钮，然后依次点选需要权重绑定的骨骼。选中的骨骼会被自动分配一个颜色以便和其他的绑定骨骼区分开来。 + +![](5732eaaa853d9.png) + +![](5732eaab2554a.png) + +4. 骨骼绑定结束后，右键点击空白处，便会基于骨骼和网格点的相对位置自动计算分配权重。（若在初次绑定后再添加新的绑定骨骼到列表中，便不会再自动计算权重，这时可以点击属性面板中的“自动权重”按钮再次自动计算权重）骨骼绑定，权重计算完毕后如下图。此时每根骨骼的权重都是0，因为我们选中的是整个网格。 + +![](5732eaaa9e514.png) + +单独选中一个网格点的话，在属性面板便可以看到这个网格点分配给每根绑定骨骼的权重占比了。每根骨骼的权重比可以通过拖拽滑块儿调整。如下图 + +![](5732eaaab3b2a.png) + +### 权重工具 +在上边介绍的绑定方法中，绑定结束后，选中网格点，在属性面板可以调整绑定骨骼的权重占比。更便捷的方法是使用权重工具来调整。 +在工具栏选中权重工具![](5732eaaaed970.png)后，选中网格，便可直观的看出每个网格点中不同的绑定骨骼所占的权重。权重以饼状图展示，饼状图中的颜色与骨骼的颜色相对应。 + +![](5732eaab0a297.png) + +单独选中一根绑定骨骼，然后选择一个网格点（若不选择，会提示需要选择一个网格点），然后按住鼠标左键，上下拖动，便可以改变选中骨骼在选中网格点中的权重占比。 + +![](5732eaaae3d8f.png) + +依次选择不同的网格点，便可以调整选中骨骼在不同网格点中的权重占比。 +如果需要快速的把一个网格点的所有权重100%的分配给选中骨骼，只要在选中骨骼的情况下，按住ALt键，然后依次点中要完全分配权重的点即可。 + +绑定及权重分配完毕后，便可以通过调整骨骼来控制网格的变形了。 + +### 注意事项 +> 由于蒙皮消耗的性能比较大，目前只能在 webgl 渲染模式下可使用。 diff --git a/DB/dbPro/advancedFeatures/yangCongPi/README.md b/DB/dbPro/advancedFeatures/yangCongPi/README.md new file mode 100644 index 0000000..9b28ca7 --- /dev/null +++ b/DB/dbPro/advancedFeatures/yangCongPi/README.md @@ -0,0 +1,26 @@ +洋葱皮是DragonBones Pro 4.1 新增加的功能。开启洋葱皮功能后，会同时显示前后N帧（默认为3帧）的影图，方便动画师更好的定位角色动作，使连续动画更流畅。 + +进入动画模式，点击时间轴工具栏上的洋葱皮按钮开启洋葱皮功能，如下图： + +![](p1.png) + +洋葱皮功能开启后，主场景上的动画出现蓝色（前导帧）和红色（后续帧）的影图。如下图： + +![](p2.png) + +同时，时间轴的绿色播放指针会出现前后默认覆盖3帧的洋葱皮显示区域，左侧的调整手柄为红色，右侧的调整手柄为蓝色。如下图： + +![](p3.png) + +拖动蓝色或红色手柄可以调整蓝色或红色洋葱皮显示的帧的多少。覆盖的帧数越多，在主场景中显示的影图越多。洋葱皮显示区会随着绿色播放指针的移动而移动。 + +动画播放过程中，绿色播放指针上的洋葱皮显示区域会隐藏。主场景上，红色和蓝色的影图会随原始动画一起播放，蓝色影图的动画动作超前于原始动画，红色影图的动画动作后滞于原始动画。 + +洋葱皮的特性： +* 蓝或红色的洋葱皮显示区域最长不能超过动画剪辑本身的长度。 +* 虽然动画剪辑默认循环播放，但当绿色播放指针在第0帧的时候，主场景中没有红色洋葱皮影图显示。当绿色播放指针在最末一帧时，主场景中没有蓝色洋葱皮影图显示。 + + + + + diff --git a/DB/dbPro/advancedFeatures/yangCongPi/p1.png b/DB/dbPro/advancedFeatures/yangCongPi/p1.png new file mode 100644 index 0000000..c8489f3 Binary files /dev/null and b/DB/dbPro/advancedFeatures/yangCongPi/p1.png differ diff --git a/DB/dbPro/advancedFeatures/yangCongPi/p2.png b/DB/dbPro/advancedFeatures/yangCongPi/p2.png new file mode 100644 index 0000000..3d17d1a Binary files /dev/null and b/DB/dbPro/advancedFeatures/yangCongPi/p2.png differ diff --git a/DB/dbPro/advancedFeatures/yangCongPi/p3.png b/DB/dbPro/advancedFeatures/yangCongPi/p3.png new file mode 100644 index 0000000..9320b0d Binary files /dev/null and b/DB/dbPro/advancedFeatures/yangCongPi/p3.png differ diff --git a/DB/dbPro/animation/keyframe/README.md b/DB/dbPro/animation/keyframe/README.md new file mode 100644 index 0000000..e125833 --- /dev/null +++ b/DB/dbPro/animation/keyframe/README.md @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/DB/dbPro/animation/mode/README.md b/DB/dbPro/animation/mode/README.md new file mode 100644 index 0000000..0744d4b --- /dev/null +++ b/DB/dbPro/animation/mode/README.md @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/DB/dbPro/animation/preview/README.md b/DB/dbPro/animation/preview/README.md new file mode 100644 index 0000000..e044c69 --- /dev/null +++ b/DB/dbPro/animation/preview/README.md @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/DB/dbPro/animation/skeletonCreated/README.md b/DB/dbPro/animation/skeletonCreated/README.md new file mode 100644 index 0000000..1d4b97b --- /dev/null +++ b/DB/dbPro/animation/skeletonCreated/README.md @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/DB/dbPro/animation/skeletonOperation/README.md b/DB/dbPro/animation/skeletonOperation/README.md new file mode 100644 index 0000000..22f0d14 --- /dev/null +++ b/DB/dbPro/animation/skeletonOperation/README.md @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/DB/dbPro/animation/slotOperation/README.md b/DB/dbPro/animation/slotOperation/README.md new file mode 100644 index 0000000..caeb27d --- /dev/null +++ b/DB/dbPro/animation/slotOperation/README.md @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/DB/dbPro/basicConcept/framework/5576af50e0f98.png b/DB/dbPro/basicConcept/framework/5576af50e0f98.png new file mode 100644 index 0000000..7866deb Binary files /dev/null and b/DB/dbPro/basicConcept/framework/5576af50e0f98.png differ diff --git a/DB/dbPro/basicConcept/framework/566538afd7dc6.png b/DB/dbPro/basicConcept/framework/566538afd7dc6.png new file mode 100644 index 0000000..590df66 Binary files /dev/null and b/DB/dbPro/basicConcept/framework/566538afd7dc6.png differ diff --git a/DB/dbPro/basicConcept/framework/566538b0096b1.png b/DB/dbPro/basicConcept/framework/566538b0096b1.png new file mode 100644 index 0000000..a408532 Binary files /dev/null and b/DB/dbPro/basicConcept/framework/566538b0096b1.png differ diff --git a/DB/dbPro/basicConcept/framework/566538b0157d4.png b/DB/dbPro/basicConcept/framework/566538b0157d4.png new file mode 100644 index 0000000..056ee09 Binary files /dev/null and b/DB/dbPro/basicConcept/framework/566538b0157d4.png differ diff --git a/DB/dbPro/basicConcept/framework/56653d3bd7b5e.png b/DB/dbPro/basicConcept/framework/56653d3bd7b5e.png new file mode 100644 index 0000000..3ee9861 Binary files /dev/null and b/DB/dbPro/basicConcept/framework/56653d3bd7b5e.png differ diff --git a/DB/dbPro/basicConcept/framework/README.md b/DB/dbPro/basicConcept/framework/README.md new file mode 100644 index 0000000..3037292 --- /dev/null +++ b/DB/dbPro/basicConcept/framework/README.md @@ -0,0 +1,30 @@ +骨架是骨骼的集合，骨架中至少包含一个骨骼。一个项目中可以包含多付骨架。 + +下图中的armatureName及其以下的树状结构便是一个典型的骨架。 + +![](5576af50e0f98.png) + +DragonBones Pro 从4.3开始，支持多骨架项目。 + +DragonBones的制作最早是依赖Flash Pro进行的。Flash Pro中的影片剪辑是可以嵌套的，对应到DragonBones格式中就是骨架的嵌套。 + +Flash Pro制作的包含多骨架或子骨架的DragonBones动画可以完美的用DragonBones Pro进行导入和再次编辑。 + +下图中便是一个DB导入的包含多骨架的Flash Pro项目。 + +![](566538b0157d4.png) + +导入的多骨架项目中的多个骨架会显示在资源库面板中，每个骨架中包含一个库目录，指向硬盘中的一个文件夹。 + +不同的骨架可以使用不同的库目录，也可以共享同一个库目录 + +鼠标悬浮到子骨架上可以显示骨架的预览图。 + +![](56653d3bd7b5e.png) + + +另外工具栏了增加了两个工具按钮，上图中红色框选的，分别是创建骨架和修改库路径。 + +点击添加骨架按钮，会弹出新建骨架对话框。新建骨架的时候要指定骨架对应的库路径。 + +![](566538afd7dc6.png) \ No newline at end of file diff --git a/DB/dbPro/basicConcept/image/README.md b/DB/dbPro/basicConcept/image/README.md new file mode 100644 index 0000000..eca0de9 --- /dev/null +++ b/DB/dbPro/basicConcept/image/README.md @@ -0,0 +1,18 @@ +图片是最基本的设计素材，项目所需的图片都放在资源面板里。图片需要以插槽为中介来和骨骼绑定。如下图，“头”骨骼下有“嘴”，“头”和“眼睛“三个插槽，三个插槽下又分别有一个同名的图片。绑定后，图片依附于骨骼，随着骨骼的变动而变动（旋转，缩放，平移）。 + +![](p1.png) + +DragonBones Professional支持纹理集和图片文件两种图片整理方式。 +* 纹理集，一个文件里包括所有的图片，每个图片可以单独引用。 +* 图片文件， 每一个图片都是单一的文件。 + +左侧为图片文件在资源库中的呈现方式。右侧为纹理集在资源库中的呈现方式。 + +![](p2.png) + +图片特性： +* 图片不能重命名。 +* 同一张图片可以多次被添加到场景中。 +* 如果图片在资源库的子目录中，场景树中图片的全名会包括子目录名。如下图 + +![](p3.png) diff --git a/DB/dbPro/basicConcept/image/p1.png b/DB/dbPro/basicConcept/image/p1.png new file mode 100644 index 0000000..39a414b Binary files /dev/null and b/DB/dbPro/basicConcept/image/p1.png differ diff --git a/DB/dbPro/basicConcept/image/p2.png b/DB/dbPro/basicConcept/image/p2.png new file mode 100644 index 0000000..da220ce Binary files /dev/null and b/DB/dbPro/basicConcept/image/p2.png differ diff --git a/DB/dbPro/basicConcept/image/p3.png b/DB/dbPro/basicConcept/image/p3.png new file mode 100644 index 0000000..7fc7df1 Binary files /dev/null and b/DB/dbPro/basicConcept/image/p3.png differ diff --git a/DB/dbPro/basicConcept/inherit/README.md b/DB/dbPro/basicConcept/inherit/README.md new file mode 100644 index 0000000..8981d2e --- /dev/null +++ b/DB/dbPro/basicConcept/inherit/README.md @@ -0,0 +1,4 @@ +DragonBones Professional中父子组件间存在继承关系。父子可以是骨骼和骨骼，也可以是骨骼和插槽。子组件会继承父组件的移动，缩放和旋转。 +* 移动的继承是指子组件随父组件移动相同的距离和方向。 +* 缩放的继承是指子组件随父组件缩放相同的大小比例。 +* 旋转的继承是指子组件会随父组件以相同的圆心，旋转相同的角度和方向。 diff --git a/DB/dbPro/basicConcept/skeleton/README.md b/DB/dbPro/basicConcept/skeleton/README.md new file mode 100644 index 0000000..ba78c56 --- /dev/null +++ b/DB/dbPro/basicConcept/skeleton/README.md @@ -0,0 +1,43 @@ + +骨骼是骨骼动画的基本组成部分。骨骼可以旋转，缩放，平移。 + +![](p1.png) + +骨骼创建的方法有两种： + +1. 选择骨骼创建工具，在主场景内按住鼠标左键并拖拽。 +2. 点击场景树面板上的创建骨骼按钮，会创建一个骨骼点。 + +DragonBones Pro 4.3 开始支持骨骼创建自动绑定图片。 + +自动绑定功能可以在首选项窗口开启和关闭。 + +当这个功能开启时，在用户通过创建骨骼工具拖拽创建骨骼时，系统就会智能的选择最匹配的图片，在松开鼠标时，骨骼创建完成，同时被选中的图片就会绑定到该骨骼上，并且骨骼会以绑定的图片命名。 + +骨骼的起点和终点都要在图片内，才能完成自动绑定。 + +如果用户对系统匹配的结果不满意，可以按下Ctrl键临时关闭自动匹配功能，在这种情况下松开鼠标，就不会有任何图片被绑定。同时，保持Ctrl按下，便处于手动绑定模式，用户就可以用鼠标选择指定图片（可以指定多张）绑定到刚刚创建的骨骼中。松开Ctrl键，绑定就会生效。然后可以继续创建骨骼自动绑定。 + +DragonBones Pro 4.5.0 开始，可以设置骨骼对父骨骼旋转和缩放的继承开关。 + +默认缩放和旋转都是勾选的，表示继承父骨骼的缩放和旋转。 +* 不勾选“缩放”，表示不继承父骨骼的缩放。此时父骨骼的缩放不会影响所选的子骨骼。 +* 不勾选“旋转”，表示不继承父骨骼的旋转。此时无论父骨骼怎么旋转，子骨骼始终指向同一个方向。（添加了IK约束的骨骼无法关闭旋转继承，关闭了旋转继承的骨骼无法添加IK约束） + +DragonBones Pro 4.5.0 开始，选中骨骼后，鼠标悬停在骨骼末端，会出现绿色圆圈，拖动圆圈可以改变骨骼长度。 + + + + + + + + + + + + + + + + diff --git a/DB/dbPro/basicConcept/skeleton/p1.png b/DB/dbPro/basicConcept/skeleton/p1.png new file mode 100644 index 0000000..087a6f5 Binary files /dev/null and b/DB/dbPro/basicConcept/skeleton/p1.png differ diff --git a/DB/dbPro/basicConcept/slot/README.md b/DB/dbPro/basicConcept/slot/README.md new file mode 100644 index 0000000..c3e3673 --- /dev/null +++ b/DB/dbPro/basicConcept/slot/README.md @@ -0,0 +1,48 @@ +插槽是图片的容器，是骨骼和图片的桥梁。主场景中，图片的层次关系由插槽在层级面板的层次关系体现。如下图，“左小臂”在“左上臂”的上面，主场景中呈现的效果是“左小臂”盖住“左上臂”。 + +![](p1.png) + +创建插槽的方法有三种： + +1. 直接从资源面板拖拽图片到主场景中。 +2. 从资源面板拖拽图片到场景树面板中的任一骨骼上。 +3. 选定某骨骼，点击场景树面板上的添加插槽按钮。 + +插槽特性： +* 插槽可以为空，不包含任何图片。 +* 一个骨骼下可以有多个插槽。 +* 同一个骨骼下的插槽在主场景中呈现时可以有不同的层次关系。层级关系仅由层级面板内的排序决定。 +* 一个插槽下可以有多张图片，但同一时间只能有一张图片处于显示状态，其他的图片会处于隐藏状态。插槽内的图片也可以全部处于隐藏状态。 +* 插槽可以删除，可以重命名。 +* 插槽删除后，其包含的图片将一同被删除。 +* 插槽的名字在同一个项目中是唯一的，不能重名。 +* 插槽内不能包含其他插槽。 +* 插槽内不能包含骨骼。 +* 插槽的位置，缩放，旋转参数其实就是其中包含的处于显示状态的图片的位置，缩放，旋转参数，如果插槽内所有图片都处于隐藏状态，则插槽的位置，缩放，旋转为空。 +* 插槽可以被复选。 + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/DB/dbPro/basicConcept/slot/p1.png b/DB/dbPro/basicConcept/slot/p1.png new file mode 100644 index 0000000..90aff0c Binary files /dev/null and b/DB/dbPro/basicConcept/slot/p1.png differ diff --git a/DB/dbPro/export/exportAnimation/README.md b/DB/dbPro/export/exportAnimation/README.md new file mode 100644 index 0000000..822ea3c --- /dev/null +++ b/DB/dbPro/export/exportAnimation/README.md @@ -0,0 +1,92 @@ +DragonBones Professional 支持导出DragonBones，MovieClip和序列帧格式。 + +##### 导出DragonBones, 表示导出DragonBones骨骼动画格式: +* 导出位置默认为“我的文档”+项目名，用户可以手动指定。如果导出zip包，则包文件会出现在指定的输出路径下。如果导出项目文件夹，则会在指定的输出路径下建立和项目名相同的子目录，其下包含数据文件和图片。 +* 配套纹理支持纹理集和图片文件。如果选择纹理集，右侧会显示纹理集预览，如果选择图片文件，右侧为空。 +* 数据格式支持json和xml。 +* 输出比例默认为1。用户可以输入数值来控制导出项目的缩放。（4096x4096为单张纹理集的最大尺寸，超过此尺寸输出的比例将缩小） +* 填充背景颜色，默认为不勾选，勾选后用户可以点击右边的颜色方块儿打开颜色选择窗口，选择需要作为背景色的颜色。 +* 打包zip，默认为不勾选，也就是导出项目文件夹。勾选则导出zip包形式的项目文件。 + +##### 导出MovieClip， 表示导出MovieClip动画格式： +* 导出位置的设置和规则与导出DragonBones相同。 +* MovieClip只支持导出为纹理集。 +* 输出比例设置与导出DragonBones相同。 +* 背景色设置与导出DragonBones相同。 + +##### 导出序列帧，表示导出序列帧： +* 纹理集：序列帧图片会集合到一张或几张纹理集上导出（取决于纹理集最大宽度和高度的设置，参看下边的纹理集设置） +* 图片文件：每一帧动画会导出成单张的图片文件。 +* 导出内容：可以选择导出“全部动画”或“当前动画”。 +* 输出比例设置与导出DragonBones相同。 +* 背景色设置与导出DragonBones相同。（只有选择纹理集时可以设置背景色，图片文件不支持设置背景色） + +##### 纹理集设置 +选中纹理集，点击右侧“设置…"按钮可以打开纹理集设置窗口，如下图： +* 透明区域裁剪：生成纹理集的时候裁剪掉图片周围的透明区域，使得纹理集尺寸最小，再次导入时会恢复被裁剪掉的透明区域范围。忠实还原原有项目。 +* 2的幂：确保输出图片的尺寸大小为 2 的幂。 +* 正方形： 导出的纹理集长宽相等，为正方形。 +* 背景色：与外层的导出数据窗口上的选项相同，而且彼此同步。 +* 水平间距：纹理集中，图片间的左右间距。 +* 垂直间距：纹理集中，图片间的上下间隔。 +* 自动尺寸：勾选后DB会按照一张纹理集自动设置纹理集尺寸。 + * 如果“自动尺寸”没有勾选，便可以设置“最大宽度”和“最大高度”。 + * 通过“最大宽度”和“最大高度”的设置可以实现多纹理集的导出。这是考虑到有些移动设备最大支持1024x1024尺寸的纹理集，通过导出多纹理集，便能解决这个问题。当要导出的纹理超过最大宽度和高度后，纹理集便会分页，生成多纹理集。导出多纹理集的同时，也会生成对应的多配置文件。 +* 输出比例：与外层的导出数据窗口上的选项相同，而且彼此同步。 +* 输出尺寸：显示输出的纹理集的尺寸。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/DB/dbPro/hotkey/hotkey/README.md b/DB/dbPro/hotkey/hotkey/README.md new file mode 100644 index 0000000..8d2a363 --- /dev/null +++ b/DB/dbPro/hotkey/hotkey/README.md @@ -0,0 +1,24 @@ + +| 功能 | 主快捷键 | 副快捷键 | +|:------------- |:---------------:| -------------:| +| 撤销 | Ctrl + Z| | +| 重做 | Ctrl + Y| Ctrl + Shift + Z | +| 删除骨骼/插槽/图片/关键帧 | Delete | Backspace | +| 选择工具 | V | | +| Pose工具 | P | | +| 移动工具 |H | | +| 创建骨骼工具 | N | | +| 插槽上移一层 | [ | | +| 插槽下移一层 | ] | | +| 新建项目 | Ctrl + N | | +| 打开项目 | Ctrl + O | | +| 保存项目 | Ctrl + S | | +| 导入 | | Ctrl + I | +| 导出 | | Ctrl + E | +| 播放动画 | Enter | | +|预览| | Ctrl + Enter | +| 添加/更新关键帧 | K | | +| 复制关键帧 | Ctrl + C | | +| 粘贴关键帧 | Ctrl + V | | +| 左移时间轴播放指针 | ， | | +| 右移时间轴播放指针 | . | | diff --git a/DB/dbPro/import/importCommandLine/README.md b/DB/dbPro/import/importCommandLine/README.md new file mode 100644 index 0000000..e33b919 --- /dev/null +++ b/DB/dbPro/import/importCommandLine/README.md @@ -0,0 +1,30 @@ +DragonBones pro 从 4.3 开始支持命令行导入，实现批处理 +``` typescript +Import ( dbdata=""，texturefolder=""， textureatlas="xxx.png"， texturedata="" dbdatapack=""，plugin="auto"，projectname=""，projectpath="") +``` + +命令名：import +参数列表： + +|参数|说明| +| ------------ | ------------ | +|dbdata|散图或纹理集项目中，导入项目的数据问题路径。| +|texturefolder|散图项目中，图片资源路径。| +|textureatlas|纹理集项目中，纹理集图片资源路径。| +|texturedata|纹理集项目中，纹理集数据文件资源路径。| +|dbdatapack|zip项目中，zip文件的资源路径。| +|plugin|【可选参数】仅当导入的项目是散图项目或纹理集项目时可用，用于指定导入所使用的插件名称。默认是auto，即会根据实际数据自动选择插件解析，如为任意不存在插件名称，会使用DragonBonesPro自带引擎解析。| +|projectname|【可选参数】导入后新项目的名称，默认为原数据的名称。| +|projectpath|【可选参数】导入后新项目的地址，默认为用户文档目录下DBProjects文件夹下。| + +上表所示参数中，根据不同的导入类型，需要填写的必选参数是不同的 +- 导入散图项目：dbdata, texturefolder 是必选参数 +示例： `DragonBonesPro import dbdata="C:\Demon.ExportJson" texturefolder="C:\texture" plugin="auto" projectname="new" projectpath="C:\ceshi"` + +- 导入纹理集项目：dbdata，textureatlas，texturedata 是必选参数 +示例： `DragonBonesPro import dbdata="C:\Demon.ExportJson" textureatlas="C:\Demon0.png" texturedata="C:\Demon0.plist" plugin="auto" projectname="new" projectpath="C:\ceshi"` + +- 导入数据包项目：dbdatapack是必选参数 +示例： `DragonBonesPro import dbdatapack="C:\DragonOpening.zip" projectname="new" projectpath="C:\ceshi"` +  +注意：以上三种导入类型是互斥的，导入时只可根据一种导入类型填写参数。 diff --git a/DB/dbPro/import/importCosos/README.md b/DB/dbPro/import/importCosos/README.md new file mode 100644 index 0000000..73daf87 --- /dev/null +++ b/DB/dbPro/import/importCosos/README.md @@ -0,0 +1,14 @@ +基于内置的Cocos和Spine导入插件，DragonBones支持导入Cocos和Spine的导出项目。 + +如果用户选择导入Cocos或Spine的导出项目，以Spine为例导入窗口扩展如下 + +导入Spine的项目时，支持导入图片文件或纹理集项目。导入图片文件时，用户需要手动指定图片目录的路径。导入纹理集项目时，会自动加载纹理集和配置文件所在的位置，如果加载失败，用户需要手动指定。 + +当前版本只能导入到新建项目，导入到当前项目不可用。 +项目名称默认为导入的项目文件的文件名。 + +项目位置默认为“我的文档”+项目名称。DragonBones Professional会记住上一次用户选择的路径，勾选了“使用默认位置”的话，DragonBones Professional 会默认使用上一次用户选择的路径。 不勾选“使用默认位置“的话，用户可以手动指定项目保存的位置。 + +如果图片目录上找不到皮肤，完成按钮也是亮起的，可以点击。以保证用户可以导入不包含图片的项目文件。 + + diff --git a/DB/dbPro/import/importFolder/5576ba3ab6ac9.png b/DB/dbPro/import/importFolder/5576ba3ab6ac9.png new file mode 100644 index 0000000..26fd433 Binary files /dev/null and b/DB/dbPro/import/importFolder/5576ba3ab6ac9.png differ diff --git a/DB/dbPro/import/importFolder/README.md b/DB/dbPro/import/importFolder/README.md new file mode 100644 index 0000000..9650fda --- /dev/null +++ b/DB/dbPro/import/importFolder/README.md @@ -0,0 +1,53 @@ +如果项目文件为文件夹形式，则选择相应的项目数据文件，json, xml或 amf。 + +DragonBones Professional 会自动判断项目使用的是图片文件还是纹理集，然后切换对应的导入选项，用户也可以手动切换。 + +a ). 纹理集 + +如果是纹理集，导入窗口扩展如下 + +纹理集路径和配置文件路径默认与项目数据文件在同级目录下。用户可以手动指定。 + +DragonBones pro 从4.3开始支持多纹理集的导入。 + +可以添加复数的纹理集文件和配置文件。（注：每个纹理集都要有一个对应的配置文件，也就是纹理集和配置文件是成对出现的。） + +* 导入到新建项目：新建一个项目，将导入项目放在其中。 +* 导入到当前项目：导入的项目会添加到当前项目中。DragonBones pro从4.3开始支持多骨架，新导入到当前项目中的骨架会显示在资源库中。 + +项目名称默认为导入的项目文件的文件名。 + +项目位置默认为“我的文档”+项目名称。DragonBones Professional会记住上一次用户选择的路径，勾选了“使用默认位置”的话，DragonBones Professional 会默认使用上一次用户选择的路径。 不勾选“使用默认位置“的话，用户可以手动指定项目保存的位置。 + +b ). 图片文件 + +如果是图片文件，导入窗口扩展如下 + +![](5576ba3ab6ac9.png) + +皮肤路径默认为项目数据文件所在目录+texture，用户也可以手动指定。 + +* 导入到新建项目：新建一个项目，将导入项目放在其中。 +* 导入到当前项目：导入的项目会添加到当前项目中。DragonBones pro从4.3开始支持多骨架，新导入到当前项目中的骨架会显示在资源库中。 + +项目名称默认为导入的项目文件的文件名。 + +项目位置默认为“我的文档”+项目名称。DragonBones Professional会记住上一次用户选择的路径，勾选了“使用默认位置”的话，DragonBones Professional 会默认使用上一次用户选择的路径。 不勾选“使用默认位置“的话，用户可以手动指定项目保存的位置。 + +如果图片目录上找不到皮肤，完成按钮也是亮起的，可以点击。以保证用户可以导入不包含图片的项目文件。 + + + + + + + + + + + + + + + + diff --git a/DB/dbPro/import/importPNG/5576ba6ac0a4f.png b/DB/dbPro/import/importPNG/5576ba6ac0a4f.png new file mode 100644 index 0000000..3561458 Binary files /dev/null and b/DB/dbPro/import/importPNG/5576ba6ac0a4f.png differ diff --git a/DB/dbPro/import/importPNG/README.md b/DB/dbPro/import/importPNG/README.md new file mode 100644 index 0000000..c1c5425 --- /dev/null +++ b/DB/dbPro/import/importPNG/README.md @@ -0,0 +1,11 @@ +如果用户选择集成数据的PNG，导入窗口扩展如下 + +![](5576ba6ac0a4f.png) + +当前版本只能导入到新建项目，导入到当前项目不可用。 + +项目名称默认为导入的项目文件的文件名。 + +项目位置默认为“我的文档”+项目名称。DragonBones Professional会记住上一次用户选择的路径，勾选了“使用默认位置”的话，DragonBones Professional 会默认使用上一次用户选择的路径。 不勾选“使用默认位置“的话，用户可以手动指定项目保存的位置。 + + diff --git a/DB/dbPro/import/importPSD/5576bace6bf73.png b/DB/dbPro/import/importPSD/5576bace6bf73.png new file mode 100644 index 0000000..3aabeaf Binary files /dev/null and b/DB/dbPro/import/importPSD/5576bace6bf73.png differ diff --git a/DB/dbPro/import/importPSD/README.md b/DB/dbPro/import/importPSD/README.md new file mode 100644 index 0000000..a3f8901 --- /dev/null +++ b/DB/dbPro/import/importPSD/README.md @@ -0,0 +1,29 @@ +DragonBones Professional提供脚本文件，可以很方便将Photoshop中的设计图导出成DragonBones Professional支持的，可以导入的项目文件。 + +* 在windows系统上，脚本文件的位置是： + * **{Dragon Bones Professional的安装目录}\PSExportDB.jsx** + +* 在Mac系统上，在应用程序中找到DragonBones Pro.app，然后右键单击选择显示包内容，然后在以下位置可以找到脚本文件： + * **/Contents/Resources/PSExportDB.jsx** + +在Photoshop中，打开设计图，然后依次在菜单中选择文件->脚本->浏览， 然后在打开的系统定位窗口中找到PSExportDB.jsx文件，选择打开。弹出如下对话框： + +![](5576bace6bf73.png) + +* Export PNGs 导出图片 +* Export JSON 导出json文件 +* Ignore Hidden Layers 忽略隐藏图层 +* Image Scale 整体缩放比例 + +依照需求设置好，点击OK。Photoshop便开始导出。导出完成后，在设计图所在的目录下会生成一个 DragonBones/{PSD的文件名}/ 的目录，如果你导出时同时勾选了PNGs和JSON，其下会有和.psd文件同名的一个json文件和一个texture目录。Texture目录下是所有的PNG图片文件。 + +导入时，在DragonBones Professional的导入窗口选择导出的json文件，纹理类型选择“图片文件”，便可以把设计图导入到DragonBones Professional中了。 + +导入后，图片的相对位置，大小和相互间的层级关系都和PS中完全相同。 + + + + + + + diff --git a/DB/dbPro/import/importZip/5576b9b8f0ad9.png b/DB/dbPro/import/importZip/5576b9b8f0ad9.png new file mode 100644 index 0000000..dd99da4 Binary files /dev/null and b/DB/dbPro/import/importZip/5576b9b8f0ad9.png differ diff --git a/DB/dbPro/import/importZip/README.md b/DB/dbPro/import/importZip/README.md new file mode 100644 index 0000000..1377ffa --- /dev/null +++ b/DB/dbPro/import/importZip/README.md @@ -0,0 +1,13 @@ + +如果选择zip包的项目文件，导入窗口扩展成如下 + +![](5576b9b8f0ad9.png) + +当前版本只能导入到新建项目，导入到当前项目不可用。 + +项目名称默认为导入的项目文件的文件名。 + +项目位置默认为“我的文档”+项目名称。DragonBones Professional会记住上一次用户选择的路径，勾选了“使用默认位置”的话，DragonBones Professional 会默认使用上一次用户选择的路径。 不勾选“使用默认位置“的话，用户可以手动指定项目保存的位置。 + + + diff --git a/DB/dbPro/interface/animationPanel/README.md b/DB/dbPro/interface/animationPanel/README.md new file mode 100644 index 0000000..100e534 --- /dev/null +++ b/DB/dbPro/interface/animationPanel/README.md @@ -0,0 +1,13 @@ + +![动画面板](p1.png) + +动画面板用于显示和编辑动画剪辑。右上角按钮依次为：新建动画剪辑按钮，克隆动画剪辑按钮，重命名和删除动画剪辑按钮。此面板只能在动画制作下显示。 + +动画面板下边的三个参数分别是： +* 动画时间：不可编辑。单位为秒。动画剪辑的实际持续时间依照帧率和动画剪辑的总帧数计算得出。 +* 过度时间：默认值为0, 可编辑。单位为秒。用来设定游戏中不同动画间的过度时间。 +* 播放次数：默认值为0, 可编辑。用来设定游戏中动画的重复次数，当设为0时表示无限次重复。 + + + + diff --git a/DB/dbPro/interface/animationPanel/p1.png b/DB/dbPro/interface/animationPanel/p1.png new file mode 100644 index 0000000..a969976 Binary files /dev/null and b/DB/dbPro/interface/animationPanel/p1.png differ diff --git a/DB/dbPro/interface/firstChoice/56664a7fcc767.png b/DB/dbPro/interface/firstChoice/56664a7fcc767.png new file mode 100644 index 0000000..7307d86 Binary files /dev/null and b/DB/dbPro/interface/firstChoice/56664a7fcc767.png differ diff --git a/DB/dbPro/interface/firstChoice/README.md b/DB/dbPro/interface/firstChoice/README.md new file mode 100644 index 0000000..8a98877 --- /dev/null +++ b/DB/dbPro/interface/firstChoice/README.md @@ -0,0 +1,15 @@ +在菜单栏，选择 文件->首选项，可以开启首选项窗口。 +![](56664a7fcc767.png) +- 常规 + - 删除前确认：默认勾选，删除骨骼，插槽或图片时会弹出删除确认窗口。如果不勾选则不会弹出确认窗口。 + - 图片平滑显示：默认勾选，此时DragonBones Pro中的图片会使用平滑显示。不勾选的话，图片不会做平滑处理，图片看起来会更锐利和清晰，但可能会出现锯齿。 + - 骨骼自动绑定图片：默认勾选，创建骨骼时，会自动绑定和骨骼重合的图片。不勾选的话，便不会自动绑定。 +- 颜色尺寸 + - 背景颜色：设置主工作场景的背景色。（不会影响导出，只改变工作场景的背景色） + - 骨骼颜色：设置骨骼的颜色。 + - 背景尺寸：设置背景方格的尺寸。 + - 骨骼尺寸：设置骨骼的显示尺寸。 +- 账户 +登陆Egret社区账号。 +- 恢复默认值 +恢复所有首选项的默认设置。 \ No newline at end of file diff --git a/DB/dbPro/interface/inheritToolbar/5576b6120294c.png b/DB/dbPro/interface/inheritToolbar/5576b6120294c.png new file mode 100644 index 0000000..1b68ded Binary files /dev/null and b/DB/dbPro/interface/inheritToolbar/5576b6120294c.png differ diff --git a/DB/dbPro/interface/inheritToolbar/README.md b/DB/dbPro/interface/inheritToolbar/README.md new file mode 100644 index 0000000..bab64f4 --- /dev/null +++ b/DB/dbPro/interface/inheritToolbar/README.md @@ -0,0 +1,21 @@ + + +![](5576b6120294c.png) + +* 显示/可选/继承工具用于打开和关闭骨骼和插槽的显示，可选，继承关系。 + +* 显示: 打开时，骨骼或插槽在主场景中可见。关闭时，骨骼或插槽在主场景中不可见。 + +* 可选：打开时，骨骼或插槽在主场景中可以被选中。关闭时，骨骼或插槽在主场景中不可以被选中。 + +* 继承：打开时，骨骼或插槽会继承父骨骼的动作。关闭时，骨骼或插槽不会继承父骨骼的动作。 + + + +特性： + +* 骨骼和插槽的显示在骨架装配和动画制作下均可用。 + +* 骨骼和插槽的可选在动画制作下，骨骼默认为可选且可修改，插槽默认为不可选且不可修改。 + +* 骨骼和插槽的继承在动画制作下默认为继承且不可修改。 \ No newline at end of file diff --git a/DB/dbPro/interface/levelPanel/README.md b/DB/dbPro/interface/levelPanel/README.md new file mode 100644 index 0000000..5534b46 --- /dev/null +++ b/DB/dbPro/interface/levelPanel/README.md @@ -0,0 +1,3 @@ +![层级面板](p1.png) + +层级面板用于显示和编辑主场景中插槽的上下层级关系。可以通过拖拽改变插槽间的层级关系。选中插槽后，也可以点击右上角的向上一层和向下一层按钮或快捷键[]来改变层级关系。此面板只出现在骨架装配模式下。 diff --git a/DB/dbPro/interface/levelPanel/p1.png b/DB/dbPro/interface/levelPanel/p1.png new file mode 100644 index 0000000..90aff0c Binary files /dev/null and b/DB/dbPro/interface/levelPanel/p1.png differ diff --git a/DB/dbPro/interface/mainInterface/README.md b/DB/dbPro/interface/mainInterface/README.md new file mode 100644 index 0000000..35f4840 --- /dev/null +++ b/DB/dbPro/interface/mainInterface/README.md @@ -0,0 +1,9 @@ +![](p1.png) + +1. 主场景。 装配骨架和制作动画的主要操作区域。 +2. 系统工具栏。 项目操作的工具栏。 +3. 主场景工具栏。 鼠标模式切换的工具栏。 +4. 编辑模式切换。 切换骨架装配和动画制作。 +5. 显示/可选/继承 开关面板。 骨架和插槽的显示/可选/继承的开关面板。 +6. 其他面板。 包括场景树、层级、变换、动画、属性和资源面板。 +7. 时间轴面板。 diff --git a/DB/dbPro/interface/mainInterface/p1.png b/DB/dbPro/interface/mainInterface/p1.png new file mode 100644 index 0000000..3a8a78b Binary files /dev/null and b/DB/dbPro/interface/mainInterface/p1.png differ diff --git a/DB/dbPro/interface/modeToolbar/README.md b/DB/dbPro/interface/modeToolbar/README.md new file mode 100644 index 0000000..1838c27 --- /dev/null +++ b/DB/dbPro/interface/modeToolbar/README.md @@ -0,0 +1,3 @@ +![](p1.png) + +编辑模式切换控件用于切换骨架装配和动画制作。 diff --git a/DB/dbPro/interface/modeToolbar/p1.png b/DB/dbPro/interface/modeToolbar/p1.png new file mode 100644 index 0000000..9bd2290 Binary files /dev/null and b/DB/dbPro/interface/modeToolbar/p1.png differ diff --git a/DB/dbPro/interface/propertiesPanel/README.md b/DB/dbPro/interface/propertiesPanel/README.md new file mode 100644 index 0000000..f548291 --- /dev/null +++ b/DB/dbPro/interface/propertiesPanel/README.md @@ -0,0 +1,29 @@ + +![插槽属性面板](p1.png) ![骨骼属性面板](p2.png) ![骨骼帧的属性](p3.png) + +属性面板用于显示和编辑骨骼或插槽的各种属性值。a为插槽的属性面板，b为骨骼的属性面板, c为骨骼帧的属性面板。此面板在骨架装配和动画制作下均可显示。（骨骼帧属性面板只出现在动画制作） + +a ). 插槽的属性： + +不含图片的空插槽的属性只有名字，名字可以编辑，效果和重命名相同。 + +包含有图片的插槽的属性包括：名字，显示图片，颜色和透明度。 +* 其中名字可以编辑，效果和重命名相同。 +* 显示图片为当前插槽内可见并显示的图片，插槽内的所有图片都会在这个下拉列表中。显示图片显示为“空”时，插槽内的所有图片均隐藏，没有图片被显示。 +* 颜色为叠加在图片上的颜色，点击会打开颜色选择窗口。默认为白色，表示无颜色叠加。 +* 透明度默认为100%，表示不透明。最小为0%，表示完全透明。 + +b ). 骨骼的属性包括： + +名字和长度。其中名字可以编辑，效果和重命名相同。长度可以编辑，控制骨骼的长度。（动画制作模式下，长度和名字都不可编辑） + +c ). 骨骼帧的属性包括： + +名称和动作。名称不可编辑。动作包括三个属性：事件，跳转，声音。可以根据游戏开发的要求填写相应的值。 + + + + + + + diff --git a/DB/dbPro/interface/propertiesPanel/p1.png b/DB/dbPro/interface/propertiesPanel/p1.png new file mode 100644 index 0000000..543b8ce Binary files /dev/null and b/DB/dbPro/interface/propertiesPanel/p1.png differ diff --git a/DB/dbPro/interface/propertiesPanel/p2.png b/DB/dbPro/interface/propertiesPanel/p2.png new file mode 100644 index 0000000..cba72c9 Binary files /dev/null and b/DB/dbPro/interface/propertiesPanel/p2.png differ diff --git a/DB/dbPro/interface/propertiesPanel/p3.png b/DB/dbPro/interface/propertiesPanel/p3.png new file mode 100644 index 0000000..68896cf Binary files /dev/null and b/DB/dbPro/interface/propertiesPanel/p3.png differ diff --git a/DB/dbPro/interface/resourcesPanel/README.md b/DB/dbPro/interface/resourcesPanel/README.md new file mode 100644 index 0000000..a0ed9a8 --- /dev/null +++ b/DB/dbPro/interface/resourcesPanel/README.md @@ -0,0 +1,11 @@ + +![资源面板](p1.png) + +右上角按钮依次为：导入资源按钮，打开库文件夹按钮和刷新按钮。此面板只可以在骨架装配模式下显示。 + +项目所使用的所有图片都保存在资源面板中。DragonBones Professional每个项目的资源库都对应一个系统中实际存在的文件夹，文件夹中DragonBones Professional所支持的PNG图片都会被显示在资源面板中。 + +可以通过由系统其他文件夹向DragonBones Professional 的资源面板中拖拽PNG文件的方法，向资源库里添加图片，相应的PNG文件也会被拷贝到对应的资源库文件夹中。也可以点击“导入资源”按钮，在弹出的系统窗口中指定要添加的资源PNG文件。 + + + diff --git a/DB/dbPro/interface/resourcesPanel/p1.png b/DB/dbPro/interface/resourcesPanel/p1.png new file mode 100644 index 0000000..d2406fe Binary files /dev/null and b/DB/dbPro/interface/resourcesPanel/p1.png differ diff --git a/DB/dbPro/interface/sceneTreePanel/README.md b/DB/dbPro/interface/sceneTreePanel/README.md new file mode 100644 index 0000000..00e2acc --- /dev/null +++ b/DB/dbPro/interface/sceneTreePanel/README.md @@ -0,0 +1,16 @@ +![](p1.png) + +场景树面板用于显示和编辑主场景中骨骼和插槽的父子树形关系。 + +右上角按钮依次为：点骨骼创建按钮，插槽创建按钮，重命名按钮和删除按钮。 + +骨架装配模式下，双击场景树中的骨骼或插槽会弹出重命名窗口。 + +此面板在骨架装配和动画制作下均可显示。但在动画制作下，不可编辑。 + +骨骼和插槽可以在场景树中复选。 + +骨骼继承关系在场景树中的编辑： +* 骨骼间的继承关系可以通过在场景树面板内拖拽改变。 +* 子骨骼可以被拖拽到同级或父及其以上的骨骼下。 +* 父骨骼不能被拖拽到它的子骨骼及其以下骨骼下。 diff --git a/DB/dbPro/interface/sceneTreePanel/p1.png b/DB/dbPro/interface/sceneTreePanel/p1.png new file mode 100644 index 0000000..cd9d714 Binary files /dev/null and b/DB/dbPro/interface/sceneTreePanel/p1.png differ diff --git a/DB/dbPro/interface/sharePanel/README.md b/DB/dbPro/interface/sharePanel/README.md new file mode 100644 index 0000000..480aff1 --- /dev/null +++ b/DB/dbPro/interface/sharePanel/README.md @@ -0,0 +1,16 @@ + +提供了一个展示您优秀作品的平台，通过作品分享功能，您可以将自己满意作品分享给大家。 +通过点击系统工具栏上的作品分享按钮或文件菜单中的作品分享选项进入作品分享页面。 + +![](p1.png) + +首先需要用Egret ID登陆（Egret ID,就是Egret开发者社区的账号），如果没有注册，请先访问开发者社区注册一个Egret ID。 + +![](p2.png) + +登陆后，作品分享页面弹出 + +![](p3.png) + +当前选中项目会作为准备分享的作品，您可以填写作品的名称和描述。然后附上一张作品的截图。填写好您的详细联系方式。勾选“同意EDN开发者内容协议”，然后点击“上传”按钮，就可以将您的作品分享出去。 + diff --git a/DB/dbPro/interface/sharePanel/p1.png b/DB/dbPro/interface/sharePanel/p1.png new file mode 100644 index 0000000..c5b01bc Binary files /dev/null and b/DB/dbPro/interface/sharePanel/p1.png differ diff --git a/DB/dbPro/interface/sharePanel/p2.png b/DB/dbPro/interface/sharePanel/p2.png new file mode 100644 index 0000000..89700d7 Binary files /dev/null and b/DB/dbPro/interface/sharePanel/p2.png differ diff --git a/DB/dbPro/interface/sharePanel/p3.png b/DB/dbPro/interface/sharePanel/p3.png new file mode 100644 index 0000000..73594ab Binary files /dev/null and b/DB/dbPro/interface/sharePanel/p3.png differ diff --git a/DB/dbPro/interface/systemToolbar/README.md b/DB/dbPro/interface/systemToolbar/README.md new file mode 100644 index 0000000..849579d --- /dev/null +++ b/DB/dbPro/interface/systemToolbar/README.md @@ -0,0 +1,14 @@ +![](p1.png) + +从左到右的按钮依次是：新建项目，打开项目，保存项目，撤销，重做，导入，导出，预览，作品分享。 + +* 新建项目，用于新建一个项目，点击将打开新建项目对话框。 +* 打开项目，用于打开一个已有项目，点击将打开系统指定文件对话框。 +* 保存项目，如果当前的项目有更改，保存项目按钮将亮起，点击将保存当前项目，项目保存后，保存按钮暗掉。 +* 撤销，用于撤销上一次的编辑操作。 +* 重做，用于重做上一次撤销掉的编辑操作。 +* 导入，用于导入一个支持的项目文件格式，点击将打开导入对话框。 +* 导出，用于导出项目，点击将打开导出对话框。 +* 预览， 在浏览器中预览动画的运行效果。如果项目包含多个动画剪辑，可以在浏览器中鼠标左键单击来切换。 +* 作品分享，打开作品分享上传页面。 + diff --git a/DB/dbPro/interface/systemToolbar/p1.png b/DB/dbPro/interface/systemToolbar/p1.png new file mode 100644 index 0000000..7d4de29 Binary files /dev/null and b/DB/dbPro/interface/systemToolbar/p1.png differ diff --git a/DB/dbPro/interface/timelinePanel/README.md b/DB/dbPro/interface/timelinePanel/README.md new file mode 100644 index 0000000..58be491 --- /dev/null +++ b/DB/dbPro/interface/timelinePanel/README.md @@ -0,0 +1,116 @@ + +![](p1.png) + +时间轴面板用于动画剪辑的编辑。此面板只能在动画制作下显示。 + +a ). 播放控制工具 + +![](p2.png) + +时间轴面板上的播放控制工具，用于控制动画剪辑的播放。由左向右依次为：回到首帧按钮，前一帧按钮，倒放按钮，播放按钮，下一帧按钮，最后一帧按钮，播放速度控制滑块，当前帧，当前时间，帧率。 +* 播放速度控制滑块的控制范围是0.1x ~ 10x。 +* 当前帧：可编辑，输入具体的帧数，绿色播放指针便会跳转到相应的帧数。拖动绿色指针或播放动画，当前帧的数值也会跟着相应的变化。 +* 当前时间：不可编辑，基于当前帧和帧率计算得出。 +* 帧率：可编辑，默认为24fps。设定每一秒钟的动画有多少帧。 + + +b ). 帧编辑工具栏 + +![](p3.png) + +帧编辑工具栏，由左向右依次为：洋葱皮按钮，复制帧按钮，剪切帧按钮，粘贴帧按钮，删除帧按钮。 + +* 洋葱皮按钮：开关洋葱皮功能。 +* 复制帧按钮：选中关键帧后点击，帧的参数便被复制到剪切板中。 +* 剪切帧按钮：选中关键帧后点击，帧的参数便被剪切到剪切板中。 +* 粘贴帧按钮: 剪切板中的帧参数可以被粘贴到时间轴的任意帧数，任意层（骨骼层和插槽层的帧不能互相粘贴，关键帧中记录的参数是与上一个关键帧的相对变动值，0帧的相对变动值均为0），也可以覆盖已存在关键帧。 +* 删除帧按钮: 删除当前选中帧。 + +c ). 时间轴工具栏 + +![](p4.png) + +时间轴工具栏，由左向右依次为：折叠列表，展开列表，向右移动帧，向左移动帧，自动关键帧按钮，添加关键帧按钮，曲线图面板按钮。 +* 折叠列表：折叠时间轴上所有的层。 +* 展开列表：展开时间轴上所有的层。 +* 向右移动一帧，向左移动一帧： 点击按钮将整体移动选中关键帧以右的所有关键帧。若左侧的上一帧已有关键帧，则不能再向左移动，向左移动关键帧按钮将灰掉。 +* 自动关键帧：具有开关两种状态的按钮，白色为关，红色为开。开启后，对骨骼或插槽的改动将会在绿色播放指针所在帧和相应的骨骼或插槽层上自动添加关键帧。 +* 添加关键帧按钮： 三种状态按钮，白色表示无改动，无关键帧。黄色表示有改动未添加或更新关键帧。红色表示无改动已添加或更新关键帧。白色或黄色状态下，点击按钮，将在绿色播放指针所在帧和相应骨骼层或插槽层上添加或更新关键帧。红色状态下点击无效果。红色或白色状态下，改动骨骼或插槽，按钮将变为黄色，表示骨骼或插槽发生改动。无骨骼或插槽选中时，按钮不可用。 +* 曲线图面板按钮：开关曲线图面板。 + +d ). 时间轴缩放工具 + +![](p5.png) + +时间轴缩放工具用于控制时间轴的比例缩放。左侧为适合屏幕按钮，-和+按钮控制缩小和放大。拖动滑块也可以控制缩放。 + +e ). 时间轴 + +![](p6.png) + +* 骨骼层内关键帧为白色，插槽层内关键帧为黄色，事件层内关键帧为红色,含有事件，跳转，声音的骨骼关键帧为粉色。 +* 时间轴的第一层为动画剪辑层，不能直接编辑，在其他任意层添加关键帧后，动画剪辑层便会出现菱形方块，表示当前帧下某层或多层存在关键帧。白色表示为骨骼层关键帧，黄色表示插槽层关键帧，红色为事件层关键帧，粉色为存在多种层混合的关键帧。选中菱形方块便选中这一帧数下的所有关键帧。可以进行整体左右平移，拖拽，复制，剪切，粘贴，删除。 +* 只要相应帧数下存在关键帧，时间轴标尺上便会出现红线，时间轴标尺不会随时间轴的上下滚动条滚动，始终可见。 +* 时间轴的第一级为骨骼层或事件层，第二级为插槽层，插槽层相对骨骼层向右缩进一层。时间轴内不体现父子骨骼的层级关系。事件层只有一层。 +* 选中的层会高亮，对应层的骨骼或插槽也会被选中，反之，选中骨骼或插槽，对应的层也会被选中。 +* 关键帧可以在时间轴同层内任意拖拽。 + +帧的框选 + +DragonBones Pro 4.2 开始支持时间轴内的帧的框选操作。在时间轴内可以框选所要操作的帧，选中后，可以对帧进行，复制，剪切，删除等操作。 + +框选后，鼠标移动到选框内部，鼠标光标变为十字四向箭头时，点击拖拽，可以左右平移选中帧。 + +平移后效果如下图。 + +框选后，鼠标移动到选框边缘，鼠标光标变为左右箭头时，点击拖拽，可以缩放选中帧的间距，进而改变动画的速度。 + +缩放后，效果如下图。 + +按住Ctrl键可以连续框选帧。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/DB/dbPro/interface/timelinePanel/p1.png b/DB/dbPro/interface/timelinePanel/p1.png new file mode 100644 index 0000000..fc2723c Binary files /dev/null and b/DB/dbPro/interface/timelinePanel/p1.png differ diff --git a/DB/dbPro/interface/timelinePanel/p2.png b/DB/dbPro/interface/timelinePanel/p2.png new file mode 100644 index 0000000..4c98e4b Binary files /dev/null and b/DB/dbPro/interface/timelinePanel/p2.png differ diff --git a/DB/dbPro/interface/timelinePanel/p3.png b/DB/dbPro/interface/timelinePanel/p3.png new file mode 100644 index 0000000..c178ba8 Binary files /dev/null and b/DB/dbPro/interface/timelinePanel/p3.png differ diff --git a/DB/dbPro/interface/timelinePanel/p4.png b/DB/dbPro/interface/timelinePanel/p4.png new file mode 100644 index 0000000..98a990d Binary files /dev/null and b/DB/dbPro/interface/timelinePanel/p4.png differ diff --git a/DB/dbPro/interface/timelinePanel/p5.png b/DB/dbPro/interface/timelinePanel/p5.png new file mode 100644 index 0000000..e55ac6b Binary files /dev/null and b/DB/dbPro/interface/timelinePanel/p5.png differ diff --git a/DB/dbPro/interface/timelinePanel/p6.png b/DB/dbPro/interface/timelinePanel/p6.png new file mode 100644 index 0000000..bb6552a Binary files /dev/null and b/DB/dbPro/interface/timelinePanel/p6.png differ diff --git a/DB/dbPro/interface/transformPanel/README.md b/DB/dbPro/interface/transformPanel/README.md new file mode 100644 index 0000000..937a1c3 --- /dev/null +++ b/DB/dbPro/interface/transformPanel/README.md @@ -0,0 +1,10 @@ +变换面板用来显示和修改骨骼或插槽的x，y坐标（相对于父的），缩放比例和旋转角度，还有图片的尺寸（仅限插槽或图片时显示）。 + +左侧为骨骼的变换面板，右侧为插槽的变换面板。 + +此面板在骨架装配和动画制作下均可显示。 + +可以通过↑↓方向按钮微调数值框中的数值。 + +*注：当骨骼或插槽复选时，变换面板内数值为空。 + diff --git a/DB/dbPro/introduction/introduction/561766be2385d.png b/DB/dbPro/introduction/introduction/561766be2385d.png new file mode 100644 index 0000000..a6cd94c Binary files /dev/null and b/DB/dbPro/introduction/introduction/561766be2385d.png differ diff --git a/DB/dbPro/introduction/introduction/README.md b/DB/dbPro/introduction/introduction/README.md new file mode 100644 index 0000000..ec117a5 --- /dev/null +++ b/DB/dbPro/introduction/introduction/README.md @@ -0,0 +1,6 @@ +![image](561766be2385d.png) + +DragonBones Pro 是一套由Egret团队制作的独立的骨骼动画编辑器。 + +本用户手册将具体的介绍DragonBones Pro的每一项功能的使用方法与规则。 + diff --git a/DB/dbPro/plugin/pluginManager/5603c12d92c3c.png b/DB/dbPro/plugin/pluginManager/5603c12d92c3c.png new file mode 100644 index 0000000..904a89b Binary files /dev/null and b/DB/dbPro/plugin/pluginManager/5603c12d92c3c.png differ diff --git a/DB/dbPro/plugin/pluginManager/5603c18967fbb.png b/DB/dbPro/plugin/pluginManager/5603c18967fbb.png new file mode 100644 index 0000000..aa315cd Binary files /dev/null and b/DB/dbPro/plugin/pluginManager/5603c18967fbb.png differ diff --git a/DB/dbPro/plugin/pluginManager/5603c1a853a5d.png b/DB/dbPro/plugin/pluginManager/5603c1a853a5d.png new file mode 100644 index 0000000..66e575d Binary files /dev/null and b/DB/dbPro/plugin/pluginManager/5603c1a853a5d.png differ diff --git a/DB/dbPro/plugin/pluginManager/5603c1cd3c8f7.png b/DB/dbPro/plugin/pluginManager/5603c1cd3c8f7.png new file mode 100644 index 0000000..34ba23c Binary files /dev/null and b/DB/dbPro/plugin/pluginManager/5603c1cd3c8f7.png differ diff --git a/DB/dbPro/plugin/pluginManager/56176f5e50be3.png b/DB/dbPro/plugin/pluginManager/56176f5e50be3.png new file mode 100644 index 0000000..cdee10f Binary files /dev/null and b/DB/dbPro/plugin/pluginManager/56176f5e50be3.png differ diff --git a/DB/dbPro/plugin/pluginManager/README.md b/DB/dbPro/plugin/pluginManager/README.md new file mode 100644 index 0000000..3adb3d7 --- /dev/null +++ b/DB/dbPro/plugin/pluginManager/README.md @@ -0,0 +1,20 @@ +DragonBones Pro 4.2 新增插件系统，通过插件系统使得DragonBones Pro具有更好可扩展性。插件可由第三方基于DragonBones Pro的插件规范来开发。 + +在帮助菜单中选择“插件管理”打开插件管理窗口。 +![](5603c12d92c3c.png) +插件管理窗口如下 +![](56176f5e50be3.png) +右上角的按钮依次为：打开插件目录，安装插件，卸载选中插件。 +- 打开插件目录：点击按钮会打开DragonBones Pro安装插件的目录。直接拷贝插件文件夹（不是.expl文件）到插件目录，启动DragonBones Pro便可以自动安装插件。 +- 安装插件： 点击按钮后，系统窗口弹出，指定插件安装包（DragonBones Pro的插件包扩展名为.expl），便可完成插件的安装。 +- 卸载选中插件： 在插件列表中选中需要移除的插件，然后点击卸载按钮便可卸载相应插件。 + +安装后的插件，可以在列表中的设置列设为“开启”或“禁用”。 + +DragonBones Pro 4.2 默认安装了 Cocos 1.x 和 Spine 2.x 的导入插件。这两个插件安装并开启后，在导入界面便可以看到支持导入Cocos和spine项目的提示了 +![](5603c18967fbb.png) +以Spine项目为例，选中Spine项目的json文件，便会自动使用Spine的导入插件。也可以点击“选择插件”按钮来手动指定使用的导入插件。 +![](5603c1a853a5d.png) +插件选择窗口如下 +![](5603c1cd3c8f7.png) +其中"DragonBones Pro"为默认内置导入插件，不会显示在插件管理窗口。（如果使用错误的导入出插件导入项目，会提示更换使用正确插件） \ No newline at end of file diff --git a/DB/dbPro/plugin/specification/README.md b/DB/dbPro/plugin/specification/README.md new file mode 100644 index 0000000..8dc6f9e --- /dev/null +++ b/DB/dbPro/plugin/specification/README.md @@ -0,0 +1,113 @@ +# 概述 +DragonBonesPro4.2 开放了插件规范，并实现了导入插件的管理，目的是让用户可以方便的将任意格式动画数据通过插件导入到DragbonesPro中来进行二次编辑，并生成DragonBones格式动画，从而在包括Egret在内的任意的支持DragonBones的引擎中运行动画。本文会介绍编写插件的基本规范，以及目前版本中如何编写一个DragonBones的导入插件。 + +# 插件命名规范 +插件统一扩展名为expl，本质是个zip包，内部至少需要包含*.excfg，*.png，*.js，3个文件。其中： +- *.excfg为json格式的插件配置文件。 +- *.png为插件的图标，标准尺寸为32x32。 +- *.js文件为插件的主脚本文件。不同类型的插件，js脚本的内容标准可能不同。例如DBPro的导入插件，需要继承egretPluginSdk.js中的DBImportTemplate类，重写所有的方法。（注：egretPluginSdk 是用于编写egret工具链中可扩展插件的框架，目前只包含DBPro的导入插件需要的基础类和方法。egretPluginSdk.js在DragonBonesPro安装目录下的plugins目录下） + +#### 插件编写规范 +*.excfg 文件格式具体如下，例如Spine插件 +~~~ typescript +{ + "name":"Spine 2.x Importer", //插件的名称 + "path":["spine.js"],//插件的主脚本以及包含脚本 + "description":"Spine 2.x Importer can import Spine 2.x animation data to DragonBonesPro",//插件的描述 + "author":"Egret Engine",//插件的开发者 + "version":"1.0.0",//插件的版本号 + "icon":"icon.png"//插件的图标(32*32) +} +~~~ + +*.js文件格式具体如下，例如Spine导入插件，继承的是egretPluginSdk.js中DBImportTemplate类。DBImportTemplate 类格式如下： +~~~ typescript +var DBImportTemplate = (function () { + function DBImportTemplate() { + this._type = "DBImportTemplate"; + } + /**支持导入的数据文件的扩展名**/ + DBImportTemplate.prototype.dataFileExtension = function () { + return ["*"]; + }; + /**支持导入的数据文件的描述**/ + DBImportTemplate.prototype.dataFileDescription = function () { + return ""; + }; + /**纹理集数据文件扩展名**/ + DBImportTemplate.prototype.textureAtlasDataFileExtension = function () { + return ["*"]; + }; + /**查验导入数据是否支持纹理集**/ + DBImportTemplate.prototype.isSupportTextureAtlas = function () { + return false; + }; + /**查验导入数据是否支持本解析器**/ + DBImportTemplate.prototype.checkDataValid = function (data) { + return true; + }; + /**导入数据的解析**/ + DBImportTemplate.prototype.convertToDBData = function (data) { + return data; + }; + /**纹理集的解析**/ + DBImportTemplate.prototype.convertToDBTextureAtlasData = function (data) { + return data; + }; + DBImportTemplate.prototype.type = function () { + return this._type; + }; + return DBImportTemplate; +})(); +~~~ + +需要注意的是，*.js的入口类必须命名为main，例如Spine数据导入插件大致内容如下： +~~~ typescript +var __extends = (this && this.__extends) || function (d, b) { + for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; + function __() { this.constructor = d; } + __.prototype = b.prototype; + d.prototype = new __(); +}; +var main = (function (_super) { + __extends(main, _super); + function main() { + _super.apply(this, arguments); + } + main.prototype.dataFileExtension = function () { + return ["Json"]; + }; + main.prototype.dataFileDescription = function () { + return "Spine data"; + }; + main.prototype.textureAtlasDataFileExtension = function () { + return ["atlas", "texture"]; + }; + main.prototype.isSupportTextureAtlas = function () { + return true; + }; + main.prototype.convertToDBTextureAtlasData = function (data) { + var dbTexture = {}; + return JSON.stringify(dbTexture); + }; + main.prototype.checkDataValid = function (spineJson) { + return false; + }; + main.prototype.convertToDBData = function (spineJson) { + var DBJson = {}; + try { + ... + } + catch (e) { + } + return JSON.stringify(DBJson); + }; + return main; +})(DBImportTemplate); +~~~ +注意：为了保证插件的安全性，开发者必须要在代码中加上try catch。 + +最后，DragonBonesPro中自带的两个插件就在安装目录的plugins文件夹中，“Cocos 1.x Importer.expl” 和“Spine 2.x Importer.expl”可以做为完整的例子用于参考。 + +# 插件的安装使用： +目前DragonBonesPro插件的安装方式是在帮助菜单下打开插件管理面板，点击右上角安装插件，选择expl格式的文件，即可完成安装。接下来的版本会支持双击安装。 diff --git a/DB/update/update400/README.md b/DB/update/update400/README.md new file mode 100644 index 0000000..109fa3a --- /dev/null +++ b/DB/update/update400/README.md @@ -0,0 +1,27 @@ +版本：4.0.0 +发布日期：2015-06-16 +更新内容： + +【新特性】独立编辑器DragonBones Pro + +【新特性】通过DragonBones Pro直接编辑骨架，皮肤，动画 + +【新特性】多项目管理 + +【新特性】可视化的时间轴 + +【新特性】资源库支持图片和纹理集 + +【新特性】一键导出数据和纹理集或者图片 + +【新特性】支持Spine数据格式 + +【新特性】支持PhotoShop导出数据 + +【新特性】支持dragonBones4.0的数据 + +【新特性】支持dragonBones3.0的数据 + +【新特性】分离骨骼时间轴和插槽时间轴，控制更灵活 + +【优化】数据体积较小约50% \ No newline at end of file diff --git a/DB/update/update411/README.md b/DB/update/update411/README.md new file mode 100644 index 0000000..e69c8f6 --- /dev/null +++ b/DB/update/update411/README.md @@ -0,0 +1,18 @@ +版本：4.1.1 +发布日期：2015-08-5 + +更新内容： + +【新增】新增曲线编辑器，用于制作动画缓动效果。 + +【新增】新增洋葱皮工具，方便动画前后帧对位。 + +【新增】新增IK Pose工具，给角色摆姿势更方便。 + +【新增】新增Egret H5 预览功能，真正的所见即所得。 + +【新增】增强纹理导出功能。 + +【新增】场景支持元件多选，时间轴支持帧多选。 + +【修复】修复了DB Pro中骨架无法改名的bug \ No newline at end of file diff --git a/DB/update/update421/README.md b/DB/update/update421/README.md new file mode 100644 index 0000000..94892b3 --- /dev/null +++ b/DB/update/update421/README.md @@ -0,0 +1,18 @@ +版本：4.2.1 +发布日期：2015-10-9 + +更新内容： + +【新增】增加“基本动画项目”类型，适合制作不需要骨架关系的补间动画。 + +【新增】支持导出Egret MovieClip 数据格式。 + +【新增】开放导入插件标准，允许用户自己编写安装导入插件。 + +【新增】新增Cocos导入插件，支持导入Cocos 1.x骨骼动画。 + +【增强】增强Spine导入功能，支持导入Spine格式的纹理集。 + +【增强】增强时间轴操作，支持拖拽移动、框选、框选后平移缩放，跨动画粘贴关键帧。 + +【修复】修复若干AS和TS库的Bug。 \ No newline at end of file diff --git a/DB/update/update432/README.md b/DB/update/update432/README.md new file mode 100644 index 0000000..17a9eee --- /dev/null +++ b/DB/update/update432/README.md @@ -0,0 +1,24 @@ +版本：4.3.2 +发布日期：2015-12-9 + +更新内容： + +【新增】支持多骨架和骨架嵌套，可以在项目中新建骨架，可以将骨骼动画导入到当前项目。 + +【新增】支持dbswf格式矢量纹理集。导出不同比例数据时，矢量图可以实现无损缩放。 + +【新增】支持导入导出多纹理集。 + +【新增】支持命令行导入，实现批处理。 + +【新增】支持导出序列帧。 + +【新增】增加首选项面板，设置用户偏好。 + +【增强】增强骨骼创建功能，创建骨骼时可以自动绑定图片。 + +【增强】增强场景树和时间轴，可控制单个显示显示对象的可见可选。 + +【增强】增强变换面板，可通过快捷键微调。 + +【修复】修复基本动画项目无法正确另存为的bug。 \ No newline at end of file diff --git a/DB/update/update451/README.md b/DB/update/update451/README.md new file mode 100644 index 0000000..12d454c --- /dev/null +++ b/DB/update/update451/README.md @@ -0,0 +1,29 @@ +版本：4.5.1 + +发布日期：2016-03-15 + +更新内容： + +【新增】支持网格(Mesh)和自由变形动画(柔体动画)。 + +【新增】支持反向动力学约束（IK Constraint） + +【新增】增加主舞台。 + +【新增】增加右键菜单。 + +【新增】增加一键生成序列帧动画功能。 + +【新增】增加骨骼的继承缩放和继承旋转功能。 + +【增强】增强元件嵌套功能，增加子元件的播放动画设置。 + +【增强】改进骨骼缩放的叠加效果，支持骨架整体的非等比缩放和反转。 + +【增强】IK Pose功能改为通过拖拽骨骼顶端的控制器设置。 + +【增强】选中图片时，父骨骼会处于半高亮状态，方便用户找到骨骼和图片的对应关系。 + +【增强】可以通过鼠标滚轮调节输入框的数据。 + +【修复】修复欢迎界面连续关闭两次后功能失效的问题。 \ No newline at end of file diff --git a/DB/update/update461/README.md b/DB/update/update461/README.md new file mode 100644 index 0000000..d446b59 --- /dev/null +++ b/DB/update/update461/README.md @@ -0,0 +1,37 @@ +版本：4.6.1 + +发布日期：2016-05-13 + +更新内容： + +【新增】支持骨骼绑定权重，制作蒙皮动画。 + +【新增】场景树增加搜索功能。 + +【新增】场景树增加智能过滤功能。 + +【新增】支持按Ctrl+#将选中项目编组。 + +【新增】在工具栏最右侧增加按钮可以打开意见收集面板。 + +【新增】在帮助菜单中加入问卷调查系统。 + +【新增】在窗口菜单中加入重置面板布局的功能。 + +【新增】AS库支持Starling2.0。 + +【增强】鼠标右键可以拖动舞台平移。 + +【增强】多选对象可以批量编辑属性。 + +【增强】鼠标悬浮在骨骼和图片上时显示提示。 + +【增强】在选择父亲和IK时弹出提示。 + +【增强】提升序列帧动画的性能300%。 + +【增强】改为在编辑Mesh边界的过程中不允许保存，以防止产生非法数据。 + +【修复】修复IK约束在有些情况下计算结果不正确的问题。 + +【修复】修复面板布局无法保存的问题。 \ No newline at end of file diff --git a/DB/update/update470/README.md b/DB/update/update470/README.md new file mode 100644 index 0000000..a7a5f7e --- /dev/null +++ b/DB/update/update470/README.md @@ -0,0 +1,27 @@ +版本：4.7.0 + +发布日期：2016-07-05 + +更新内容： + +【动态漫画】新增动态漫画项目类型，用于制作包含动画的条漫。 + +【动态漫画】支持导入漫画的PS原画，编辑舞台最大限度还原漫画原始布局。 + +【动态漫画】动画编辑简单易学，无需时间轴，即可快速制作动态漫画。 + +【动态漫画】一键发布基于H5的条漫作品，无需编码支持手指滑动滚屏。 + +【龙骨动画】安装时自动安装FlashPro导出插件。 + +【龙骨动画】扩展Spine导入插件，支持Spine 1.x, 2.x, 3.x 数据格式 + +【龙骨动画】改进了创建骨骼项目的流程，加入了模版的选择。 + +【龙骨动画】右键菜单加入显示全部的功能 + +【运行库】运行库加入对cocos2dx 3.7及以上版本的支持，支持DB4.5格式的全部功能，包括网格蒙皮IK。 + +【运行库】运行库重构，合并普通模式与极速模式，增加若干API。 + +【运行库】运行库增强换装功能，增强了局部换装功能，解决轴点错位问题，支持一键整体换装，支持纹理延迟加载。 \ No newline at end of file diff --git a/DB/update/update471/README.md b/DB/update/update471/README.md new file mode 100644 index 0000000..a9771fe --- /dev/null +++ b/DB/update/update471/README.md @@ -0,0 +1,27 @@ +DragonBones 4.7.1 + +更新日志 + +【动态漫画】新增动态漫画项目类型，用于制作包含动画的条漫。 + +【动态漫画】支持导入漫画的PS原画，编辑舞台最大限度还原漫画原始布局。 + +【动态漫画】动画编辑简单易学，无需时间轴，即可快速制作动态漫画。 + +【动态漫画】一键发布基于H5的条漫作品，无需编码支持手指滑动滚屏。 + +【龙骨动画】在帮助菜单中增加安装FlashPro导出插件的功能。 + +【龙骨动画】扩展Spine导入插件，支持Spine 1.x, 2.x, 3.x 数据格式。 + +【龙骨动画】改进了创建骨骼项目的流程，加入了模版的选择。 + +【龙骨动画】点击项目标签的路径提示能够打开项目所在目录。 + +【龙骨动画】右键菜单加入显示全部的功能。 + +【运行库】运行库加入对cocos2dx 3.x的支持，支持DB4.5格式的全部功能，包括网格蒙皮IK。 + +【运行库】运行库重构，合并普通模式与极速模式，增加若干API。 + +【运行库】运行库增强换装功能，增强了局部换装功能，解决轴点错位问题，支持一键整体换装，支持纹理延迟加载。 \ No newline at end of file diff --git a/DB/update/update472/README.md b/DB/update/update472/README.md new file mode 100644 index 0000000..3dd7148 --- /dev/null +++ b/DB/update/update472/README.md @@ -0,0 +1,27 @@ +版本：4.7.2 +发布日期：2016-08-17 +更新内容： + +【动态漫画】新增抖动，摆动，心跳 三种动作。 + +【动态漫画】新增消失类型的动作，移出和渐隐。 + +【动态漫画】旋转动作增加循环属性。 + +【动态漫画】图片层级调整功能，快捷键“-”，“+”，“Ctrl +‘+’”， “Ctrl +‘-’”。 + +【龙骨动画】时间轴支持shift键多选。 + +【龙骨动画】导入到当前项目的骨架，可以撤销。 + +【体验优化】预览增加二维码，扫码后，在移动端预览。 + +【体验优化】预览支持缩放和移动位置。（pc端Ctrl+鼠标拖拽为缩放，鼠标拖拽为移动，移动端支持单指移动，手势缩放）。 + +【Bug修复】修复当前正在编辑的骨架不能被删除的bug。 + +【Bug修复】修复隐藏图片，洋葱皮没有隐藏的bug。 + +【Bug修复】修复个别情况下导出序列帧图片画面不完整的bug。 + +【Bug修复】修复PS导出插件因PS单位不为像素而导致的导出图片不完整的bug。 \ No newline at end of file diff --git a/DB/update/update473/README.md b/DB/update/update473/README.md new file mode 100644 index 0000000..63565fb --- /dev/null +++ b/DB/update/update473/README.md @@ -0,0 +1,13 @@ +版本：4.7.3 + +发布日期：2016-08-31 + +更新内容： + +【动态漫画】新增闪烁，翻转，掉落出现，三种动作。 + 【动态漫画】新增变换面板，可以精确调节图片的位置，缩放，角度和透明度的值。 + 【动态漫画】循环动作优化，循环动作可以一直循环下去。 + 【体验优化】舞台场景和动态漫画场景缩放时，缩放中心在鼠标指针的位置。 + 【体验优化】预览自适应，预览时根据场景的大小自动缩放使动画显示完整。 + 【Bug修复】修复删除骨骼再撤销，插槽的层级可能错乱的bug。 + 【Bug修复】修复使用pose工具后撤销，pose点位置可能错乱的bug。 \ No newline at end of file diff --git a/DB/update/update474/README.md b/DB/update/update474/README.md new file mode 100644 index 0000000..944fe91 --- /dev/null +++ b/DB/update/update474/README.md @@ -0,0 +1,12 @@ +版本：4.7.4 + +发布日期：2016-09-21 + +更新内容： + +【新增】素材替换功能，可在场景，场景树右键或者属性面板中点击按钮弹出素材替换窗口。 + 【增强】ps导出插件增强，支持一键导入到DragonBonesPro中。 + 【增强】Spine导入插件增强，支持Spine到最新版本3.3.07。 + 【增强】支持键盘方向键微调mesh点坐标。 + 【增强】鼠标拖拽快速开关时间轴上的隐藏锁定。 + 【Bug修复】修复Mac上在通过DBPro中安装flash插件,可能导致崩溃的问题。 \ No newline at end of file diff --git a/DB/update/update481/README.md b/DB/update/update481/README.md new file mode 100644 index 0000000..193073a --- /dev/null +++ b/DB/update/update481/README.md @@ -0,0 +1,12 @@ +版本：4.8.1 + +发布日期：2016-10-12 + +更新内容： + +【新增】支持导出白鹭极速格式的数据。能提升2到3倍运行效率，节省70%内存，配置文件体积减少50% + 【新增】支持混合模式（正常，叠加，擦除） + 【新增】资源库支持删除、重命名 + 【增强】调整层级时可实时显示结果 + 【增强】支持把插槽拖拽到另一个插槽里，合并两个插槽中的内容 + 【增强】拖拽对象到场景树上时，鼠标停留在折叠的项目上，折叠的项目会自动展开 \ No newline at end of file diff --git a/DB/update/update561/README.md b/DB/update/update561/README.md new file mode 100644 index 0000000..0e9c083 --- /dev/null +++ b/DB/update/update561/README.md @@ -0,0 +1,15 @@ +版本：5.6.1 + +发布日期：2018-8-22 + +更新内容： + +【新增】曲线预设功能。 + +【新增】放大或缩小舞台快捷键。 + +【修复】从骨架项目动画模式切换到影片剪辑模式崩溃问题。 + +【修复】新创建项目未保存切换资源库路径报错。 + +【修复】补间动画无法复制粘贴关键帧的bug。 diff --git a/Developer/updateDetail/developers/README.md b/Developer/updateDetail/developers/README.md new file mode 100644 index 0000000..e69de29 diff --git a/Engine2D/bitmapTexture/bitmapTexture/56614ea87fa1a.jpg b/Engine2D/bitmapTexture/bitmapTexture/56614ea87fa1a.jpg new file mode 100644 index 0000000..2c37312 Binary files /dev/null and b/Engine2D/bitmapTexture/bitmapTexture/56614ea87fa1a.jpg differ diff --git a/Engine2D/bitmapTexture/bitmapTexture/README.md b/Engine2D/bitmapTexture/bitmapTexture/README.md new file mode 100644 index 0000000..71c7353 --- /dev/null +++ b/Engine2D/bitmapTexture/bitmapTexture/README.md @@ -0,0 +1,103 @@ + +位图的使用需要纹理的支持，在Egret中，默认隐藏了纹理的操作，所有操作均针对于显示对象进行。但位图的显示依然基于纹理。在显示一张图片时， 需要使用 `Bitmap` 类，这是egret中的图片类，而纹理则来自于所加载的资源图片。通常情况下，用单张图片作为纹理，游戏中也会大量使用纹理集来进行渲染。 + +## 1.创建 +使用 `Bitmap` 类创建图片对象，代码如下： + +```javascript +private img:egret.Bitmap = new egret.Bitmap(); +``` + +此时得到一个位图对象，将它添加到显示列表中，还不会看到任何内容。因为该位图对象仅仅是一个“空对象”，还没有为它指定任何的纹理。 + +给该位图对象指定一个纹理，在画面中显示出渲染的文件。 + +指定纹理的方式是设置 `Bitmap` 中的 `texture` 属性。 + +``` +img.texture = RES.getRes("图片ID"); +``` + +## 2.资源配置 +上面一行代码为位图添加纹理，它有一个输入参数："图片ID"。 + +所有加载的资源都会有一个唯一ID，这个ID绝大部分取自图片文件名称，也有一些资源会定义一些其他的ID。这些图片的组织方式都是由一个json文件描述的。 + +下面是一个标准的资源配置文件： + +```json +{ + "resources": + [ + {"name":"bgImage","type":"image","url":"assets/bg.jpg"}, + {"name":"egretIcon","type":"image","url":"assets/egret_icon.png"}, + {"name":"description","type":"json","url":"config/description.json"} + ], + "groups": + [ + {"name":"preload","keys":"bgImage,egretIcon"} + ] +} +``` + +在一个json资源配置文件中，应该包含两大部分，一个是组，另一个是资源。 + +### 2.1.资源 + +资源包含在“resources”中，游戏中所有使用到的资源都应包含在此。每一个资源拥有三个属性。 + +1. name：对应资源的唯一ID编号 + +2. type：资源类型 + +3. url：当前资源的路径 + +### 2.2.组 + +组包含在“groups”中，组的概念是将不同的资源分类，当逻辑启动加载后，可以选择以组为单位进行加载。 + +## 3.示例 + +示例代码如下： + +```javascript +class BitmapTest extends egret.DisplayObjectContainer{ + + public constructor() { + super(); + this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this); + } + + private async onAddToStage(event:egret.Event) { + RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onGroupComplete, this); + await RES.loadConfig("resource/default.res.json", "resource/"); + await RES.loadGroup("preload"); + } + + private onGroupComplete() { + var img:egret.Bitmap = new egret.Bitmap(); + img.texture = RES.getRes("bgImage"); + this.addChild(img); + } +} +``` + +编译运行后，效果如下图： + +![](56614ea87fa1a.jpg) + + +## 3.其他方式创建位图 +### 3.1 您还可以通过其他方式创建位图，例如 base64 +```javascript + let str64 = "iVBORw0KGgoAAAANSUhEUgAAAHM..." + egret.BitmapData.create("base64",str64,(bitmapData)=>{ + let texture = new egret.Texture(); + texture.bitmapData = bitmapData; + let bmp = new egret.Bitmap(texture); + this.addChild(bmp) +}) +``` +[示例demo](http://tool.egret-labs.org/DocZip/engine/core/display/base64Demo.zip) + + diff --git a/Engine2D/bitmapTexture/fillMode/56614f986ab98.png b/Engine2D/bitmapTexture/fillMode/56614f986ab98.png new file mode 100644 index 0000000..a237944 Binary files /dev/null and b/Engine2D/bitmapTexture/fillMode/56614f986ab98.png differ diff --git a/Engine2D/bitmapTexture/fillMode/56614f988d39e.png b/Engine2D/bitmapTexture/fillMode/56614f988d39e.png new file mode 100644 index 0000000..0fc2885 Binary files /dev/null and b/Engine2D/bitmapTexture/fillMode/56614f988d39e.png differ diff --git a/Engine2D/bitmapTexture/fillMode/README.md b/Engine2D/bitmapTexture/fillMode/README.md new file mode 100644 index 0000000..aa35a05 --- /dev/null +++ b/Engine2D/bitmapTexture/fillMode/README.md @@ -0,0 +1,79 @@ + +位图的填充方式有两种， + +* 拉伸图像以填充区域 + +* 重复图像以填充区域 + +### 1.拉伸图像填充 +创建 `Bitmap` 对象时会默认选择第一种填充方式。 + +下面是的示例中，使用默认填充方式。使用的纹理图片为一张100*100的图片。图像宽度设置为2倍，高度设置为3倍。 + +```javascript +class BitmapTest extends egret.DisplayObjectContainer{ + public constructor() + { + super(); + this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this); + } + private onAddToStage(event:egret.Event) { + RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onGroupComp, this); + RES.loadConfig("resource/resource.json", "resource/"); + RES.loadGroup("preload"); + } + private onGroupComp() + { + var img:egret.Bitmap = new egret.Bitmap(); + img.texture = RES.getRes("box"); + img.width *= 2; + img.height *= 3; + this.addChild(img); + } +} +``` + + +编译后运行，效果如图： + +![](56614f986ab98.png) + + +### 2.重复图像填充 + +设置填充方法需要改变 `Bitmap` 中的 `fillMode` 属性。 + +```javascript +img.fillMode = egret.BitmapFillMode.REPEAT +``` + +具体示例代码如下： + +```javascript +class BitmapTest extends egret.DisplayObjectContainer{ + public constructor() + { + super(); + this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this); + } + private onAddToStage(event:egret.Event) { + RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onGroupComp, this); + RES.loadConfig("resource/resource.json", "resource/"); + RES.loadGroup("preload"); + } + private onGroupComp() + { + var img:egret.Bitmap = new egret.Bitmap(); + img.texture = RES.getRes("box"); + img.fillMode = egret.BitmapFillMode.REPEAT; + img.width *= 2; + img.height *= 3; + this.addChild(img); + } +} +``` + +编译后运行，效果如图： + +![](56614f988d39e.png) + diff --git a/Engine2D/bitmapTexture/ktx/README.md b/Engine2D/bitmapTexture/ktx/README.md new file mode 100644 index 0000000..4aa5c57 --- /dev/null +++ b/Engine2D/bitmapTexture/ktx/README.md @@ -0,0 +1,81 @@ +## KTX 纹理压缩使用说明 + +### 一.关于 KTX +KTX (Khronos Texture) 是一种纹理存储格式，大部分移动设备的 GPU 均支持这种格式。可以有效降低设备的显存占用，提高运行效率和稳定性。 + +* 关于 KTX 的具体信息，可以参考下述2个文档： + * [KTX 描述说明](https://www.khronos.org/opengles/sdk/tools/KTX/) + * [KTX 文件格式说明](https://www.khronos.org/opengles/sdk/tools/KTX/file_format_spec/) + +![](p1.png) + +如上图所示，第一步我们先把普通的 png\jpg 图片，转换成 `ios` 系统支持的 PVRTC 和安卓系统支持的 `ETC1` 格式的纹理。第二步再把纹理打包为 KTX 格式。 + +**注：ktx 有很多种格式，如 astc, dxt, pvrtc, etc1，etc2。白鹭引擎在 iOS 平台只支持 pvrtc, 安卓平台只支持 etc1** + +我们制作了一个 ktx 转换工具：[下载地址和说明文档](../ktxtool/README.md) + +也可以使用其他的转换工具: + +- [PowerVRSDK](https://www.imgtec.com/developers/powervr-sdk-tools/) +- [Mali_Texture_Compression_Tool](https://developer.arm.com/tools-and-software/graphics-and-gaming/graphics-development-tools/mali-texture-compression-tool) +- [texture-compressor](https://www.npmjs.com/package/texture-compressor) + + +### 二.如何使用 KTX +**[KTX 使用示例下载](http://tool.egret-labs.org/DocZip/engine/KTXHello_v2.zip)** + +上面是一个 `HelloWorld` 的示例项目，其中只把 `egret_icon.png` 这个图片转换为 `KTX` 格式使用。 + +#### 1.资源说明 +在 `resource/assets` 目录下，`egret_icon` 有如下几种格式，引擎会根据不同平台来读取不同的格式： + +``` +egret_icon.png +egret_icon.pvr.ktx +egret_icon_alpha.ktx +egret_icon.ktx +``` +* `egret_icon.png`：PC 平台使用。 +* `egret_icon.pvr.ktx`：pvr 格式的 ktx，iOS 平台使用 +* `egret_icon.ktx`(etc1 格式的颜色纹理) 和 `egret_icon_alpha.ktx`(alpha遮罩纹理)：安卓平台使用。**注：也可以把 2 个 ktx 文件合成一个文件，具体方法请参考 [高级示例 v1.3](http://tool.egret-labs.org/DocZip/engine/CompressedTextureDemo_1.3.zip)，该示例我们后续还会更新完善** + +#### 2.代码说明 + +![](p2.png) + +在 `Main.ts` 中的 `loadResource` 方法里，我们加了几行代码。 + +* `ignoreResource` 方法表示只有 `egret_icon.png` 这个图片才会进入 `ktx` 的使用流程，其他资源全部忽略 +* `CompressTextureProcessor` 是加载资源的处理器，我们把它注册到了 `AssetsManager` 资源管理器中。具体的处理逻辑，请看示例中的代码。 + +#### 3.显示效果 +![](p3.png) + +为了更容易看出效果，我们把 `egret_icon.png` 换成了另外一张白鹭小鸟，而 `ktx` 格式还是标准 `HelloWorld ` 里的白鹭图标。 + +从上图中很容易看出，左侧是 `PC` 浏览器中的显示效果，因为不支持 `ktx` 格式，显示的是 `png` 图片。而右侧的 `iOS` 手机浏览器，因为支持 `ktx` 格式，显示的是 `pvr` 纹理格式的图片。 + +#### 4.远程加载 KTX 资源 +您可以使用 `AssetsManager` 自动远程加载资源。也可以使用 `URLLoader` 自己控制资源加载。 + +* 注意： + * 因为 ktx 不是普通的图片格式，不能使用 ImageLoader 加载。 + * URLLoader.dataFormat 要设置成 BINARY 二进制格式 + +使用 `URLLoader` 加载和显示 ktx 纹理 ，[可以参考此示例](http://tool.egret-labs.org/DocZip/engine/KTXURLLoader_v1.0.zip) + + +#### 5.KTX 性能测试 +[纹理提交速度对比测试 v1.3](http://tool.egret-labs.org/DocZip/engine/ktx/CompressedTexturePerformance_v1.3.zip) 点击屏幕，可以对比测试提交 png 与 ktx 纹理的耗时和GPU占用等项目，详细说明请看 demo 里的 readme 说明文档。 + +机型|平台|3000张ktx内存占用|3000张png内存占用 +-----------|--------|----|----|----|---- +华为P8|WebView|380M|1G + +#### 6.各小游戏平台对 `KTX` 纹理支持的状况: + +系统/平台 | 微信小游戏 | 百度小游戏 | 小米快游戏 | OPPO 小游戏| vivo 小游戏 +------------- | ------------- | -------------| -------------| -------------| ------------- +Android ETC1 | ✅ | ✅| ✅| ✅| ✅ +iOS PVRTC | ✅ | ❌ | ❌ | ❌ | ❌ diff --git a/Engine2D/bitmapTexture/ktx/p1.png b/Engine2D/bitmapTexture/ktx/p1.png new file mode 100644 index 0000000..e7afbd3 Binary files /dev/null and b/Engine2D/bitmapTexture/ktx/p1.png differ diff --git a/Engine2D/bitmapTexture/ktx/p2.png b/Engine2D/bitmapTexture/ktx/p2.png new file mode 100644 index 0000000..ab970b0 Binary files /dev/null and b/Engine2D/bitmapTexture/ktx/p2.png differ diff --git a/Engine2D/bitmapTexture/ktx/p3.png b/Engine2D/bitmapTexture/ktx/p3.png new file mode 100644 index 0000000..6574580 Binary files /dev/null and b/Engine2D/bitmapTexture/ktx/p3.png differ diff --git a/Engine2D/bitmapTexture/ktxfaq/README.md b/Engine2D/bitmapTexture/ktxfaq/README.md new file mode 100644 index 0000000..6157202 --- /dev/null +++ b/Engine2D/bitmapTexture/ktxfaq/README.md @@ -0,0 +1,37 @@ +## KTX 纹理压缩常见问题 + +#### 我使用的图片转换成 KTX 后在 iOS 手机上显示变形了 +答：因为 iOS 使用的 ktx 是 PVRTC 格式的。PVRTC 必须是正方形（边长为2的N次方，如128、256、512），`否则会强制转换成正方形，显示出来就变形了`。建议把资源打包成正方型的 SpriteSheet 纹理集后，再转换成 ktx 格式使用。 + +正方形纹理使用示例，[可以参考此Demo](http://tool.egret-labs.org/DocZip/engine/KTXSquare.zip) +![](p1.png) + +#### 为什么图片转换成 KTX 后体积变大了？会占用更多的内存影响游戏性能吗？ +##### 答： +* PVRTC 格式的 ktx，因为会转换成正方形，所以体积会变大。例如原图尺寸为 228x380 的图片，转换成 PVRTC 的 ktx 后，尺寸为 512x512 +* ETC1 格式的 ktx，因为会转换成纹理 ktx 和 alpha 通道 ktx，所以体积会变大。 +* 文件体积变大并不会占用更多的内存。ktx 是一种 GPU 能直接读取并显示的格式，使得图像无需解压即可进行渲染，节约大量的内存。 + + + +#### 原始资源加上转换后的 ktx 资源，包体变的很大怎么处理？ +##### 答： +* 我们建议初始包体里只放普通的 png、jpg 图片，然后根据设备信息远程加载适合 该平台使用的 ktx 资源。 +* 不过 ktx 文件体积大，远程加载资源的时候会慢一些，这个就需要开发者权衡资源加载时间和游戏性能之间的利弊了。 +* 服务器可以开启 gzip ，ktx 压缩后的体积会很小。[或者直接把 ktx 打包成 zip 使用](http://tool.egret-labs.org/DocZip/engine/ktx/ktx_zip.zip) + + +#### etc1 的 ktx 和 png ，哪种格式的帧频更快？ +答：png 在 shader 中调用一次 texture2D ，而 etc1 格式的 ktx 会多调用一次用于获取 alpha 遮罩，所以在 benchMark 极限测试下会有性能损失。[etc1 ktx 和 png 的帧频对比 benchmark](http://tool.egret-labs.org/DocZip/engine/ktx/KTX_VS_PNG.zip) + + +#### KTX 文件在 web 服务器上用什么 MIME 映射 +答：KTX 是一种二进制格式，MIME 设置成 `application/octet-stream +` + +#### Egret 发布的原生游戏，是否支持 KTX +答：iOS 和 Android 的 Egret Naive 原生项目，都已经支持 KTX + +#### 游戏的资源很多，显存不够用了，KTX 是否是唯一的解决方式： +答：请确保您已经在游戏中完善的进行了资源管理，例如使用 `RES.destroyRes()` 方法销毁不用的资源。如果显存还是过大，可以尝试使用 ktx。 + diff --git a/Engine2D/bitmapTexture/ktxfaq/p1.png b/Engine2D/bitmapTexture/ktxfaq/p1.png new file mode 100644 index 0000000..2f7552f Binary files /dev/null and b/Engine2D/bitmapTexture/ktxfaq/p1.png differ diff --git a/Engine2D/bitmapTexture/ktxtool/README.md b/Engine2D/bitmapTexture/ktxtool/README.md new file mode 100644 index 0000000..8d67481 --- /dev/null +++ b/Engine2D/bitmapTexture/ktxtool/README.md @@ -0,0 +1,88 @@ +KTX 转换工具使用说明 + +#### [点此下载](http://tool.egret-labs.org/DocZip/tools/egret-texture-generator-0.1.0.tgz) +该工具还处于测试阶段，完成后我们会上传到 npm，作为标准库使用。现在暂时还需要开发者自己下载安装。 + +#### 安装 +``` +npm install 路径/egret-texture-generator-0.1.0.tgz +``` +#### 命令行使用方法 +在`egret-texture-generator-0.1.0.tgz`安装目录执行命令 +``` +npx egret-texture-generator --t 资源路径 +``` + +后面还可以加更多的可选参数： +``` +--t [path] --q [low|high] --pf [normal|canvas|canvasalpha] --pbpp [2|4] [--ie] +``` + +**注：用默认参数转换出来的 PVRTC 格式的 KTX，质量很差。建议使用下面这几个参数：`--pf canvasalpha --pbpp 4`** + +选项 + +* --t +必需，资源项目绝对路径，工具会把该目录下的图片转换成 ktx 格式 +* --q +可选，ktx转换质量。 + * `low`：低质量，默认值。 + * `high`：最高质量。 +**注意**：设置为 `high` 时，转换速度会很慢 + +* --pf +可选，PVRTC格式填充类型，当资源格式不匹配时，转换成PVRTC后图片尺寸会增加，该参数用于处理如何填充增加的部分。 + * `normal`：默认值，缩放图片，会导致图片变形。 + * `canvas`：原始图片尺寸不变，其他区域根据图片类型填充不同的颜色。**png**图片透明填充，非**png**图片黑色填充。 + * `canvasalpha`：原始图片尺寸不变，其他区域透明填充。 + + **注意**：PVRTC格式有如下限制 + * 高度和宽度必须是2的幂 + * 必须为正方形，即高度和宽度相等 + + +* --pbpp +可选，PVRTC格式每像素色彩位数。 + * `2`：2 bits，默认值。 + * `4`：4 bits。 + + 设置4 bits时转换后的图片质量会优于2 bits但同时文件大小会增加。 + +* --ie +可选，是否跳过已转换过的资源。 + * `false`：始终进行转换，默认值。 + * `true`：如果资源对应的.ktx文件已存在则跳过。 + +#### 注意事项 +当转换格式选择PVRTC时，转换完成后可能会出现如下的警告信息 + +``` + ............. +[malitc-7]Perceptually weighted RMSE: 0.0363376 +[malitc-8]Perceptual PSNR: 81.6949 + .............. + + +由于PVRTC限制，以下资源在转换成PVRTC格式后会发生变形 +1. 高度和宽度必须是2的幂 +2. 必须为正方形，即高度和宽度相等 +参考：https://en.wikipedia.org/wiki/PVRTC + + +D:\tools\CompressedTextureTool\resource\assets\activity_bg.png +D:\tools\CompressedTextureTool\resource\assets\bg.jpg +D:\tools\CompressedTextureTool\resource\assets\bg_jpeg.jpeg +D:\tools\CompressedTextureTool\resource\assets\bird.png +D:\tools\CompressedTextureTool\resource\assets\egret_icon.png +D:\tools\CompressedTextureTool\resource\assets\good.png +D:\tools\CompressedTextureTool\resource\assets\hero.png +D:\tools\CompressedTextureTool\resource\assets\mc1\chunli1.png +D:\tools\CompressedTextureTool\resource\assets\weapon.png + +``` + +如果出现以上警告信息，说明资源格式与PVRTC要求的格式不匹配。请确保列出的资源格式满足以下要求： +1. 高度和宽度必须是2的幂 +2. 必须为正方形，即高度和宽度相等 + +或者不将列出的资源压缩为PVRTC格式。 \ No newline at end of file diff --git a/Engine2D/bitmapTexture/scale9Grid/556564e1ddd8d.png b/Engine2D/bitmapTexture/scale9Grid/556564e1ddd8d.png new file mode 100644 index 0000000..6ac2dfb Binary files /dev/null and b/Engine2D/bitmapTexture/scale9Grid/556564e1ddd8d.png differ diff --git a/Engine2D/bitmapTexture/scale9Grid/556564e1e524c.png b/Engine2D/bitmapTexture/scale9Grid/556564e1e524c.png new file mode 100644 index 0000000..51088a4 Binary files /dev/null and b/Engine2D/bitmapTexture/scale9Grid/556564e1e524c.png differ diff --git a/Engine2D/bitmapTexture/scale9Grid/556564e1e5d41.png b/Engine2D/bitmapTexture/scale9Grid/556564e1e5d41.png new file mode 100644 index 0000000..e7e36d0 Binary files /dev/null and b/Engine2D/bitmapTexture/scale9Grid/556564e1e5d41.png differ diff --git a/Engine2D/bitmapTexture/scale9Grid/556564e1e68d5.png b/Engine2D/bitmapTexture/scale9Grid/556564e1e68d5.png new file mode 100644 index 0000000..8bd604f Binary files /dev/null and b/Engine2D/bitmapTexture/scale9Grid/556564e1e68d5.png differ diff --git a/Engine2D/bitmapTexture/scale9Grid/README.md b/Engine2D/bitmapTexture/scale9Grid/README.md new file mode 100644 index 0000000..11df490 --- /dev/null +++ b/Engine2D/bitmapTexture/scale9Grid/README.md @@ -0,0 +1,82 @@ + +## 使用 +通常情况下为了游戏画面中的美观程度，会使用一些圆角矩形或者边缘不规则的矩形。 在游戏中，经常会对这些图形进行拉伸，那么拉伸后的图形会发生变形。为了让边缘不会因为拉伸而变形，可以使用“九宫格”。 + +下图是一个圆角矩形 + +![](556564e1ddd8d.png) + +将这个圆角矩形横向拉伸，边缘的拉伸变化如下图： + +![](556564e1e524c.png) + +上面的效果不符合要求，会影响美观。希望无论图片如何拉伸，圆角始终不会变形，如下图。 + +![](556564e1e5d41.png) + +九宫格系统可以实现上述效果。 + +![](556564e1e68d5.png) + +上图中，用四条虚线将圆角矩形分割为9个区域，其中四个区域(图中区域编号1，3，7，9)包含了圆角矩形的四个圆角。拉伸图像时，1，3，7，9区域不拉伸，2，8区域仅横向拉伸，4，6区域仅纵向拉伸，5区域横向纵向都拉伸。 + +设置九宫格的属性是 `Bitmap` 类中的 `scale9Grid` 属性。 + +下面是一个完整的示例代码，这个示例中，放置两个 `Bitmap` 对象，两个 `Bitmap` 对象都将 width 设置为原来的2倍。其中一个添加九宫格数据，另外一个不添加九宫格数据。 + +```javascript +class BitmapTest extends egret.DisplayObjectContainer{ + public constructor() { + super(); + this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this); + } + + private onAddToStage(event:egret.Event) { + RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onGroupComp, this); + RES.loadConfig("resource/resource.json", "resource/"); + RES.loadGroup("preload"); + } + private onGroupComp() { + var img:egret.Bitmap = new egret.Bitmap(); + img.texture = RES.getRes("box"); + img.width *= 2; + this.addChild(img); + var img2:egret.Bitmap = new egret.Bitmap(); + img2.texture = RES.getRes("box"); + var rect:egret.Rectangle = new egret.Rectangle(30,31,40,41); + img2.scale9Grid =rect; + img2.width *= 2; + img2.y = 150; + this.addChild(img2); + } +} +``` + +上面的代码中，创建了一个类型为 `Rectangle` 的对象。该对象用来存放九宫格数据。初始化时填入了四个参数。 + +* 30：区域1 的宽度值。 + +* 31：区域1 的高度值 + +* 40：区域2 的宽度值 + +* 41：区域4 的高度值 + +> 注意：设置九宫宽高的时候尽量使用整数，否则有些浏览器可能会出现“黑线”。 + +## 错误处理 + +在正常情况下，九宫格区域的宽度和高度要小于图片的宽度和高度，位置在图片内部。如果设置的九宫格位置或者宽度和高度异常的情况下会报如下错误： + +```javascript +Warning #1018: 9宫格设置错误 +``` + +具体来讲正确的九宫格设置为: +```javascript +x + w < 图片宽度; +y + h < 图片高度; +``` +其中`x`和`y`是设置九宫格的位置，w和h为设置九宫格的宽和高。其中 x,y,w,h 应大于等于 0。 + +> 在 Egret 3.0.3 之前的版本中 x,y,w,h 是不能设置为 0 的。 diff --git a/Engine2D/bitmapTexture/screenshots/55cd9c0ddeeb5.png b/Engine2D/bitmapTexture/screenshots/55cd9c0ddeeb5.png new file mode 100644 index 0000000..308a9e7 Binary files /dev/null and b/Engine2D/bitmapTexture/screenshots/55cd9c0ddeeb5.png differ diff --git a/Engine2D/bitmapTexture/screenshots/55cd9c0e37c9a.png b/Engine2D/bitmapTexture/screenshots/55cd9c0e37c9a.png new file mode 100644 index 0000000..0944611 Binary files /dev/null and b/Engine2D/bitmapTexture/screenshots/55cd9c0e37c9a.png differ diff --git a/Engine2D/bitmapTexture/screenshots/README.md b/Engine2D/bitmapTexture/screenshots/README.md new file mode 100644 index 0000000..4e2bf81 --- /dev/null +++ b/Engine2D/bitmapTexture/screenshots/README.md @@ -0,0 +1,90 @@ +## 1.动态纹理类`egret.RenderTexture` + +egret 中位图的显示基于纹理，通常静态纹理的获取方式有下面四种： + +* 从已经创建出来的Bitmap中直接取 texture 属性。 + +* 通过 `RES.getRes("run_down_png");`（如果有使用Res模块）直接获取 + +* 通过URLLoader加载后获取 + +* 通过 ImageLoader 加载的，将获取的 data 赋值给 Texture 对象的 bitmapData. + +除此之外，egret 提供了动态纹理类`egret.RenderTexture`，用来将显示对象及其子对象绘制成为一个纹理，以实现截图功能。 + +```javascript +var renderTexture:egret.RenderTexture = new egret.RenderTexture(); +renderTexture.drawToTexture(displayObject); +``` + + +## 2.方法 + +### 2.1.toDataURL() +`egret.RenderTexture`中的`toDataURL()`方法，将纹理转换成以 "data:image/png;base64," 开头的base64数据。 + +用法为： `texture.toDataURL("image/png", new egret.Rectangle(20, 20, 100, 100));` + +* 第一个参数是所需要转成的格式，目前只支持 “image/png” 和 “image/jpeg”。 + +* 第二个参数是截取的区域，默认为`texture`整个大小。 + +> 注意： +因为是对`texture`本身进行的截取转换，所以即便`Bitmap`有缩放等变形操作，也不会影响`texture`截取区域的大小。 + +### 2.2.saveToFile() +`egret.RenderTexture`中的`saveToFile()`方法，裁剪指定区域并保存成图片。 + +用法为：`texture.saveToFile("image/png", "a/down.png", new egret.Rectangle(20, 20, 100, 100));` + +* 第一个参数是图片格式 + +* 第二个参数是保存的文件名称（路径）. + +* 第三个参数是截取的区域 + +> 注意： +浏览器只支持保存名称，所以像 "a/down.png" 这种写法，浏览器会自动将其改成"a-down.png"。图片会保存在浏览器下载的位置。 + +> Native下是可以保存路径的。图片会保存在游戏的私有空间，路径中不能有 "../"。 +这里为了兼容所有的平台，建议大家不要使用路径。 + +#### 示例 +保存截屏测试，代码如下： + +```javascript +var texture:egret.Texture = RES.getRes("run_png"); +texture.saveToFile("image/png", "a/down.png", new egret.Rectangle(20, 20, 100, 100)); +``` + +下面给出使用`saveToFile()`后生成的视图。 + +原图 + +![](55cd9c0ddeeb5.png) + +截取后图 + +![](55cd9c0e37c9a.png) + +### 2.3.drawToTexture() + +`egret.RenderTexture`中的`saveToFile()`方法，将指定显示对象绘制为一个纹理 + +需要注意的是，这个方法会把当前的纹理清除，如果想要保留之前的纹理，需要使用 2 个 `RenderTexture` 交替绘制。 + +交替使用 `RenderTexture` 示例代码: + +```javascript +if (this.bmp.texture == this.renderTexture) { + this.renderTexture2.drawToTexture(this, new egret.Rectangle(0, 0, 1024, 768)); + this.bmp.texture = this.renderTexture2; +} else { + this.renderTexture.drawToTexture(this, new egret.Rectangle(0, 0, 1024, 768)); + this.bmp.texture = this.renderTexture; +} +``` + +其中 `this.bmp` 是保存画板的位图对象，`this.renderTexture` 和 `this.renderTexture2` 是用来保存纹理的 `RenderTexture` 对象。 + +更新画板的纹理时使用与当前不同的 `RenderTexture` 对象保证上一次的纹理不被清空。 diff --git a/Engine2D/bitmapTexture/useTexture/566150114f41c.png b/Engine2D/bitmapTexture/useTexture/566150114f41c.png new file mode 100644 index 0000000..b21d427 Binary files /dev/null and b/Engine2D/bitmapTexture/useTexture/566150114f41c.png differ diff --git a/Engine2D/bitmapTexture/useTexture/5661501178058.png b/Engine2D/bitmapTexture/useTexture/5661501178058.png new file mode 100644 index 0000000..6d4e802 Binary files /dev/null and b/Engine2D/bitmapTexture/useTexture/5661501178058.png differ diff --git a/Engine2D/bitmapTexture/useTexture/README.md b/Engine2D/bitmapTexture/useTexture/README.md new file mode 100644 index 0000000..d49af5d --- /dev/null +++ b/Engine2D/bitmapTexture/useTexture/README.md @@ -0,0 +1,170 @@ +纹理集是将一些零碎的小图放到一张大图当中。游戏中经常使用到纹理集。 + + +Egret内置了纹理集的支持，在编写代码之前，需要先制作一张纹理集，具体使用的工具可以选择业内比较流行的 Texture Merger。 具体使用方法请参考[Texture Merger](../../../tools/TextureMerger/manual/README.md)。 + +## 使用步骤 + +* 首先制作一张纹理集，拼合后的效果如下： + + ![](566150114f41c.png) + + +同时生成的对应的json文件如下： + +```json +{ + "file": "dogs.png", + "frames": { + "dog1": { + "x": 322, + "y": 2, + "w": 184, + "h": 222, + "offX":0, + "offY":0, + "sourceW":184, + "sourceH":222 + }, + "dog2": { + "x": 307, + "y": 226, + "w": 147, + "h": 154, + "offX":0, + "offY":0, + "sourceW":147, + "sourceH":154 + }, + "dog3": { + "x": 2, + "y": 2, + "w": 318, + "h": 217, + "offX":0, + "offY":0, + "sourceW":318, + "sourceH":217 + }, + "dog4": { + "x": 2, + "y": 393, + "w": 298, + "h": 201, + "offX":0, + "offY":0, + "sourceW":298, + "sourceH":201 + }, + "dog5": { + "x": 2, + "y": 221, + "w": 303, + "h": 170, + "offX":0, + "offY":0, + "sourceW":303, + "sourceH":170 + }, + "dog6": { + "x": 2, + "y": 596, + "w": 245, + "h": 125, + "offX":0, + "offY":0, + "sourceW":245, + "sourceH":125 + } + } +} +``` + + +* 将资源文件拷贝到项目文件夹中的 `resource/assets/` 目录下，同时修改资源配置文件 `default.res.json` 。 + +资源配置文件内容如下： + +```json +{ +"resources": + [ + {"name":"dogs","type":"sheet","url":"assets/dogs.json"} + ], +"groups": + [ + {"name":"preload","keys":"dogs"} + ] +} +``` + +* 编写代码： + +```javascript +class BitmapTest extends egret.DisplayObjectContainer{ + public constructor() + { + super(); + this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this); + } + private onAddToStage(event:egret.Event) { + RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onGroupComplete, this); + RES.loadConfig("resource/default.res.json", "resource/"); + RES.loadGroup("preload"); + } + private onGroupComplete() + { + var txtr:egret.Texture = RES.getRes( "dogs#dog1" ); + var img:egret.Bitmap = new egret.Bitmap( txtr ); + this.addChild(img); + } +} +``` + +注意其中一行： + +```javascript +var txtr:egret.Texture = RES.getRes( "dogs#dog1" ); +``` + +其中dogs为纹理集，id为该纹理集中的一个资源id。 + +编译后运行，效果如图： + + +![](5661501178058.png) + + +## 那么在 HTML5 游戏中使用纹理集的好处是什么呢？ + +* 第一个 在游戏中使用纹理集能够帮助你的游戏提高加载速度，从而减少你的带宽成本，更快速的 HTTP 加载时间。 + +下面我为大家展示第一个例子：我们下载一张来自服务器的 4096 x 4096 一张 3.2M 的纹理，需要的时间为 50 毫秒。再加上一个纹理集的配置文件仅仅增加了 10 毫秒，如果我们不使用纹理集，采用加载单张小图，即加载 59 张小图。整体的加载时间将会发生巨大的变化，即将从 50 毫秒提升至 877 毫秒，即增加了 14 倍。 +> 注意这里只为演示效果直观，所以采用了 4096 x 4096，在游戏开发中强烈建议不用超过 2048. + +使用纹理集 + +![](x01.png); + +未使用纹理集 + +![](x02.png); + +我们知道浏览器本身对 HTTP 请求的数量也是有限制的，而当到达了这一限制时，浏览器便会阻塞之后的请求。 +如果你拥有 4千个待请求的 HTTP，但是这时候却只能同时进行 6 个连接，所以后面的请求便只能被暂时搁置着。所以除了能够减少加载时间，同样也能够减少 HTTP 的请求数量。 + + +* 第二个 在 webgl 模式下，能够进行硬件加速。这也就意味着 GPU 将处理图像和转化。这时使用了纹理集可以降低 GPU 渲染批次（Draw）来提升渲染性能，每个纹理都必须在绘制出几何体图像前与 GPU 连接在一起，并且特定的 GPU 都必须拥有一个特定数量的纹理槽，所以在抽样单位间进行纹理转化将需要花费大量的时间。而纹理集则能够通过让 GPU 将一个单一纹理绑定在图像驱动器上而减少转化所需要的额外开销，也就是减少少 Draw 的次数，而提升游戏的性能。 + +使用纹理集 + +![](x03.png); + +未使用纹理集 + +![](x04.png); + +在图中可以很明确的看出如果不使用纹理集时 Draw 的次数应该为 8，在使用了纹理集时 Draw 的数量仅为 1，这个简单的例子足以说明纹理集对 Draw 数量的影响程度。有很多开发者遇到 Draw 的数量太高，其实合理的使用纹理图集会很好的减少 Draw 数量。 + +关于纹理集先介绍到这里，后期将会更深入的介绍如何根据实际项目来使用纹理集。 + diff --git a/Engine2D/bitmapTexture/useTexture/x01.png b/Engine2D/bitmapTexture/useTexture/x01.png new file mode 100644 index 0000000..bf36d7e Binary files /dev/null and b/Engine2D/bitmapTexture/useTexture/x01.png differ diff --git a/Engine2D/bitmapTexture/useTexture/x02.png b/Engine2D/bitmapTexture/useTexture/x02.png new file mode 100644 index 0000000..0193c17 Binary files /dev/null and b/Engine2D/bitmapTexture/useTexture/x02.png differ diff --git a/Engine2D/bitmapTexture/useTexture/x03.png b/Engine2D/bitmapTexture/useTexture/x03.png new file mode 100644 index 0000000..65af959 Binary files /dev/null and b/Engine2D/bitmapTexture/useTexture/x03.png differ diff --git a/Engine2D/bitmapTexture/useTexture/x04.png b/Engine2D/bitmapTexture/useTexture/x04.png new file mode 100644 index 0000000..b85e901 Binary files /dev/null and b/Engine2D/bitmapTexture/useTexture/x04.png differ diff --git a/Engine2D/bricksgame/question/.DS_Store b/Engine2D/bricksgame/question/.DS_Store new file mode 100644 index 0000000..a015c45 Binary files /dev/null and b/Engine2D/bricksgame/question/.DS_Store differ diff --git a/Engine2D/bricksgame/question/README.md b/Engine2D/bricksgame/question/README.md new file mode 100644 index 0000000..5fef250 --- /dev/null +++ b/Engine2D/bricksgame/question/README.md @@ -0,0 +1,100 @@ +# 新手教程 + +针对目前玩一玩平台的部分相关问题，在此做出回应。日后会持续更新。 + +首先，强调一些玩一玩平台的技术限制： + - 玩一玩平台不支持基于DOM Document对象的HTML元素处理 + - 玩一玩平台不支持皮肤的远程加载，所有皮肤必须声明到egret项目的 `default.thm.json` 文件当中。 + - 不允许动态执行代码能力。 + + 接下来向诸位开发者汇总一下进来的玩一玩平台开发普遍问题以及解决方案： + +## 问题 +### 我的玩一玩项目为什么在Xcode上运行没有问题，可在手机QQ上加载不出图片，也没有报错？ + +答：这种问题基本可以确定是文件根目录缺少前缀导致的。玩一玩平台的路径要求前缀为 `"GameRes://"` ,egret中针对其做了资源配置的处理。可以查看js/main.js文件，查看以下两段代码。 + +![资源加载配置路径](./ziyuan03.png) + +![皮肤加载配置路径](./pifu02.png) + +这两段代码如果与图示相同，之后的资源加载就无需加入前缀了。 + +## 打包好玩一玩项目，运行到手机上完全黑屏，资源加载也没有问题。 + +答：如果是直接通过 [厘米游戏](http://hudong.qq.com/) 的游戏管理上传的包，有一下两种情况。 + +- 安卓端与ios端都显示为黑屏。 + + 可能是混淆导致类名变动的问题，使得找不到egret项目的主入口类。需要在js/main.js文件中加入以下代码。 + + ![类名混淆](./calss04.png) + + 这样，代码即使经过提交混淆也可以找到主类了。 + + - 只有安卓端显示黑屏，ios显示正常。 + + ios平台与安卓平台的差异导致promise在两个平台上的不同。需要替换提交包中 `js/promise.js` 文件。目前在安卓端可以稳定运行的promise.js文件地址为:https://github.com/egret-labs/egret-target-bricks/tree/master/template/PublicBrickEngineGame/Res/js 。下载并更新 `js/promise.js` 文件后，还需要手动修改 `manifest.js` 文件。 + + ![promise引用](./promise01.png) + + 保证在manifest.js文件中第一个被引用即可。 + + ## socket在玩一玩平台是不支持吗？为什么socket一直连接不上？ + socket在玩一玩平台是支持的。socket连接不上可能是 `manifest.js` 中引用导致的问题。 + 首先，确认您的原egret项目引用了我们提供的socket通讯库。 + 之后，检查发布后的 `manifest.js` 文件。 + + ![socket引用](./socket04.png) + + 确保socket.js库在`egret.js`与`egret.bricks.js`之间引用。 + 这样就可以保证socket库加载成功了。调用egret.WebSocket API即可调用socket。 + +## 游戏在Xcode环境下正常运行，但上传提交至平台后进行真机测试时安卓端黑屏，iOS端卡在加载至99%的地方。 + +答：如果您遇到的情况如下： + + - 您的游戏在Xcode中正常运行无报错信息。 + + - 对于安卓端：在手Q中直接替换游戏包，游戏正常运行无报错信息； + + - 对于iOS端，在测试手Q中替换游戏包，游戏正常运行无报错信息。 + + - 经过上传提交至平台后进行真机测试时安卓端黑屏，iOS端卡在加载至99%的地方。 + +那么，您的代码极有可能因受到玩一玩平台代码混淆机制的影响而无法正常运作。 + +通过 [厘米游戏](http://hudong.qq.com/) 的游戏管理上传的包会被进行代码混淆，因此当您的代码在不经过上传环节时，可以正常运行，并且不会暴露出任何问题。如果您将Bricks引擎申明的变量或接口申明为局部变量，该变量的作用域将覆盖掉原本Bricks引擎申明的变量，并且在上传之后，该局部变量会被混淆。 + +例如，如果您为方便使用而申明了一个局部变量GameStatusInfo，如下图所示。 + + ![类名混淆](./local01.jpg) + +则正常代码如下： + +![类名混淆](./local03.jpg) + +经过代码混淆后，代码如下： + +![类名混淆](./local02.jpg) + +此时原本的GameStatusInfo被混淆为As。此时Bricks引擎申明的GameStatusInfo.QQVer无法被访问到，而As.QQVer为undefined，因此导致游戏无法正常运行。 + +我们强烈建议您用declare的方式来访问Bricks引擎已申明的变量、接口。 + +在*.d.ts文件中进行如下声明： + +``` javascript +declare var GameStatusInfo: { + roomId: number, +} +``` + +即可在项目中使用Bricks引擎提供的相关变量和接口，避免混淆机制的困扰。 + + +``` +console.log("开始游戏roomID:“ + GameStatusInfo.roomId); +``` + +有更多的相关问题请您到egret论坛bbs.egret.com参与讨论。我们也会持续更新问题以及解决方案。 \ No newline at end of file diff --git a/Engine2D/bricksgame/question/calss04.png b/Engine2D/bricksgame/question/calss04.png new file mode 100644 index 0000000..080311a Binary files /dev/null and b/Engine2D/bricksgame/question/calss04.png differ diff --git a/Engine2D/bricksgame/question/local01.jpg b/Engine2D/bricksgame/question/local01.jpg new file mode 100644 index 0000000..9200c0e Binary files /dev/null and b/Engine2D/bricksgame/question/local01.jpg differ diff --git a/Engine2D/bricksgame/question/local02.jpg b/Engine2D/bricksgame/question/local02.jpg new file mode 100644 index 0000000..ea5ee12 Binary files /dev/null and b/Engine2D/bricksgame/question/local02.jpg differ diff --git a/Engine2D/bricksgame/question/local03.jpg b/Engine2D/bricksgame/question/local03.jpg new file mode 100644 index 0000000..7c490b6 Binary files /dev/null and b/Engine2D/bricksgame/question/local03.jpg differ diff --git a/Engine2D/bricksgame/question/pifu02.png b/Engine2D/bricksgame/question/pifu02.png new file mode 100644 index 0000000..3ea6161 Binary files /dev/null and b/Engine2D/bricksgame/question/pifu02.png differ diff --git a/Engine2D/bricksgame/question/promise01.png b/Engine2D/bricksgame/question/promise01.png new file mode 100644 index 0000000..30e2259 Binary files /dev/null and b/Engine2D/bricksgame/question/promise01.png differ diff --git a/Engine2D/bricksgame/question/socket04.png b/Engine2D/bricksgame/question/socket04.png new file mode 100644 index 0000000..6495121 Binary files /dev/null and b/Engine2D/bricksgame/question/socket04.png differ diff --git a/Engine2D/bricksgame/question/ziyuan03.png b/Engine2D/bricksgame/question/ziyuan03.png new file mode 100644 index 0000000..775aadc Binary files /dev/null and b/Engine2D/bricksgame/question/ziyuan03.png differ diff --git a/Engine2D/bricksgame/start/README.md b/Engine2D/bricksgame/start/README.md new file mode 100644 index 0000000..d7f7062 --- /dev/null +++ b/Engine2D/bricksgame/start/README.md @@ -0,0 +1,169 @@ +# 新手教程 + +[新手教程](#新手教程) + + +- [什么是玩一玩平台](#什么是玩一玩平台) + +- [如何将白鹭游戏引擎制作的游戏发布到玩一玩平台](#如何将白鹭游戏引擎制作的游戏发布到玩一玩平台) + +- [其他版本引擎发布](#其他版本引擎发布) + +- [更新内容](#更新内容) + +- [已知问题](#已知问题) + + +
+ +## 什么是玩一玩平台 +在手机 QQ 最新版本更新中，提供了一系列为游戏服务的底层接口，包含渲染、音频、本地存储、社交接口等，通过这些接口，开发者可以制作小游戏并运行在手机 QQ 中。 + +玩一玩的底层采用了 QQ 团队自主研发的 bricks 引擎，与 HTML5 环境不同的是，bricks 引擎提供了更高层次的 API 封装，并提供了物理模块，多人音视频模块，AI模块，网络，存储，云，手势等功能，并在上层同样提供基于 JavaScript 的接口，其基础架构如下 + +![bricksEngine](./bricksEngine.png) + + +目前白鹭引擎已经添加了对于玩一玩开发的支持，您只要使用白鹭引擎开发，就可以将游戏发布至 QQ 玩一玩平台上。其技术原理如下： + +![egret_to_wanyiwan](./egret_to_wanyiwan.png) + +通过这种方式，开发者只需要使用白鹭引擎的最新版本，通过使用白鹭引擎完整工具流，就可以快速创建、开发与发布玩一玩小游戏，而无需过多的关注底层技术细节。 + + +## 如何将白鹭游戏引擎制作的游戏发布到玩一玩平台 + +这次更新中，我们添加了图形化界面支持。现在 Egret Launcher 支持一键式将 Egret 游戏项目发布为玩一玩平台游戏项目。 + +首先通过 Egret Launcher 创建项目。建议您以 `5.1.5` 及以上的版本进行玩一玩平台的游戏开发。如果您使用的引擎版本为 `5.1.x` 系列版本但低于 `5.1.4` ，您可以查看[其他版本引擎发布](#其他版本引擎发布)来发布到玩一玩平台。 + +我们以 `5.1.5` 版本引擎为例。 + +![egret_project01](./egret_project01.png) + +在项目列表中找到创建好的项目，通过 发布设置 按钮选择发布的类型。 + +![egret_project02](./egret_project02.png) + +在 QQ玩一玩 标签中填写要发布的包名。 + +![egret_project02](./egret_project03.png) + +发布成功后会在项目的同级目录下生成发布后的文件。 + +![egret_project02](./egret_project04.png) + +最后用Xcode打开 `HelloWorld_bricks/PublicBrickGameEngine.xcodeproject` ,您就可以进行玩一玩平台的游戏开发调试了。更多文档可以参见玩一玩的[开发者文档](http://hudong.qq.com/)。 + +当然，您也可以在原始项目中执行 `egret run --target bricks` ,也能通过Xcode打开发布完的项目。 + +* 注：目前玩一玩只支持 MacOS 开发，我们正在和玩一玩团队共同努力，争取尽快提供 Windows 下的开发调试环境。 +* 目前执行 egret run --target bricks 命令会提示编译项目失败，但只是显示问题，并不影响开发。该问题会在下个版本中修复。 + + +## 其他版本引擎发布 + +如果您的引擎为 `5.1.x` 但低于 `5.1.5` ，我们可以通过修改配置文件的方法进行发布。 + +以下介绍的方法仅在 `5.1.2` , ` 5.1.3 ` 版本中适用。 + +以 5.1.2 版本为例，我们需要在 `./scripts`文件夹中添加一个 `bricks/bricks.ts`的文件。 + +```javascript +import * as fs from 'fs'; +import * as path from 'path'; +type ManifestConfig = { + initial: string[], + game: string[] +} +export class BricksPlugin implements plugins.Command { + constructor() { + } + async onFile(file: plugins.File) { + const filename = file.origin; + if (filename == 'manifest.json') { + const contents = file.contents.toString(); + const jsonData: ManifestConfig = JSON.parse(contents); + let content = ''; + for (let item of jsonData.initial) { + if (item != 'js/promise.js' && item != 'js/promise.min.js') { + content += `BK.Script.loadlib("GameRes://${item}");\n` + } + if (item == "js/egret.js" || item == 'js/egret.min.js') { + content += `BK.Script.loadlib("GameRes://egret.bricks.js");\n` + } + } + for (let item of jsonData.game) { + content += `BK.Script.loadlib("GameRes://${item}");\n` + } + file.path = file.dirname + '/manifest.js' + file.contents = new Buffer(content); + } + return file; + } + async onFinish(pluginContext) { + } +} +``` + +同时，在`./scripts/config.ts`，在其中添加如下代码： + +```javascript +import { BricksPlugin } from './bricks/bricks'; +``` +```javascript + if (target == 'bricks') { + const outputDir = `../${projectName}_bricks/PublicBrickEngineGame/Res`; + return { + outputDir, + commands: [ + new CompilePlugin({ libraryType: "debug" }), + new ExmlPlugin('commonjs'), // 非 EUI 项目关闭此设置 + new ManifestPlugin({ output: 'manifest.json' }), + new BricksPlugin() + ] + } + } +``` +之后，您就可以按照上面介绍的[如何将白鹭游戏引擎制作的游戏发布到玩一玩平台](#如何将白鹭游戏引擎制作的游戏发布到玩一玩平台)的方法发布游戏了。 + + +# 更新内容 + +本周白鹭引擎对玩一玩平台的支持进行了较大的改善，重点修复了以下问题： + +* 添加了对 EUI 的支持 +* 添加了对 DragonBones 的支持 +* 添加了对 Graphics 的支持 +* 添加了对 Mesh 的支持 +* 添加了显示对象的 blendMode与scrollRect属性的支持 +* 添加了对 LocalStorage 的支持 +* 添加了对 WebSocket 的支持 +* 修复了二进制数据无法加载的 BUG +* 修复了九宫格渲染错误的 BUG +* 修复了多个文本渲染及文本布局的 BUG +* 修复了 HTTP 请求无法发送 post 请求的 BUG + +# 已知问题 +白鹭引擎目前尚有以下功能尚未支持玩一玩平台 + +* 渲染相关 + * 不规则遮罩 + * 动态截屏 + * 位图缓存 +* 触摸相关 + * 像素级碰撞检测 + * 点击穿透 +* 调试相关 + * 脏矩形调试显示 + * fps监视器 + * 屏幕调试日志 + +以上功能预计在以后的更新中逐个支持。 + +同时，由于玩一玩平台的 bricks 引擎目前处于内测状态，仍然存在一些问题，目前我们暂时不建议开发者在玩一玩平台使用以下功能： + +* 贝塞尔曲线绘制 +* 视频播放 + +以上问题我们会和玩一玩平台的工程师保持紧密沟通，争取尽快解决。 \ No newline at end of file diff --git a/Engine2D/bricksgame/start/bricksEngine.png b/Engine2D/bricksgame/start/bricksEngine.png new file mode 100644 index 0000000..93f67ee Binary files /dev/null and b/Engine2D/bricksgame/start/bricksEngine.png differ diff --git a/Engine2D/bricksgame/start/egret_project01.png b/Engine2D/bricksgame/start/egret_project01.png new file mode 100644 index 0000000..850b3b2 Binary files /dev/null and b/Engine2D/bricksgame/start/egret_project01.png differ diff --git a/Engine2D/bricksgame/start/egret_project02.png b/Engine2D/bricksgame/start/egret_project02.png new file mode 100644 index 0000000..35cbb74 Binary files /dev/null and b/Engine2D/bricksgame/start/egret_project02.png differ diff --git a/Engine2D/bricksgame/start/egret_project03.png b/Engine2D/bricksgame/start/egret_project03.png new file mode 100644 index 0000000..cf67713 Binary files /dev/null and b/Engine2D/bricksgame/start/egret_project03.png differ diff --git a/Engine2D/bricksgame/start/egret_project04.png b/Engine2D/bricksgame/start/egret_project04.png new file mode 100644 index 0000000..70d225c Binary files /dev/null and b/Engine2D/bricksgame/start/egret_project04.png differ diff --git a/Engine2D/bricksgame/start/egret_to_wanyiwan.png b/Engine2D/bricksgame/start/egret_to_wanyiwan.png new file mode 100644 index 0000000..62fb295 Binary files /dev/null and b/Engine2D/bricksgame/start/egret_to_wanyiwan.png differ diff --git a/Engine2D/bricksgame/start/xcode.png b/Engine2D/bricksgame/start/xcode.png new file mode 100644 index 0000000..9d9aa3b Binary files /dev/null and b/Engine2D/bricksgame/start/xcode.png differ diff --git a/Engine2D/callJS/tsCallJs/README.md b/Engine2D/callJS/tsCallJs/README.md new file mode 100644 index 0000000..ee8c5cd --- /dev/null +++ b/Engine2D/callJS/tsCallJs/README.md @@ -0,0 +1,111 @@ + +## 1.说明 + +* ts 是 js 的超集，因此只要是 js 与 js 可以互相调用的，ts 均可以调用，只不过需要增加声明来解决编译时报错。 + +* ts 最终生成的文件为 js，因此 js 调用 ts 其实就是 js 调用 js（ts 生成的 js 文件）。 + +## 2.ts 调用 js + +### 步骤 + +* 找到 js 调用 js 的方法。 + +* 增加方法调用的声明。 请参考 [如何生成 .d.ts](http://developer.egret.com/cn/github/egret-docs/extension/threes/dts/index.html) 。 + +### 示例 + +* js 内的方法 + +~~~javascript +function callJsFunc(msg) { + console.log("msg from egret : " + msg); +} +~~~ + +* ts 内声明 + +~~~javascript +declare function callJsFunc(msg:string);//可以放在 ts 文件内（建议在顶部或者底部，中间的没试过）或者单独放到一个 .d.ts 文件中，请不要放在其他类型的文件内。msg 类型根据函数体判断。 +~~~ + +* ts 内调用 + +~~~javascript +callJsFunc("hello js"); +~~~ + +* 输出 + +~~~javascript +msg from egret : hello js +~~~ + + +> 总结：在 js 调用 js 的基础上增加声明。其他的比如变量等，也是按上面步骤来实现。 + + +## 3.js 调用 ts + +js 调用 ts 其实就是 ts 调用 ts，由于 ts 调用 ts 可能会有同模块下的省略写法，因此只要使用不同模块下的调用来写即可。 + +### 步骤 + +* 找到非同一模块下 ts 的调用（比如 ```example.A.CallEgretFunc("hello")```）。 + +* 完全按上面调用的方式来写 (比如上面的 ```example.A.CallEgretFunc("hello")```)。 + +### 示例 + +* ts 内的方法 + +~~~javascript +module exampleA { + export class A { + public callEgretMethod(msg:string):void { + console.log("method msg from js : " + msg); + } + + public static CallEgretFunc(msg:string):void { + console.log("static msg from js : " + msg); + } + } +} +~~~ + + +* 非同一模块下 ts 调用 + +~~~javascript +module exampleB { + export function b() { + //调用方法 + var a:exampleA.A = new exampleA.A(); + a.callEgretMethod("method"); + + //调用静态函数 + exampleA.A.CallEgretFunc("function"); + } +} +~~~ + + + +* js 内调用 + + +~~~javascript +var a = new exampleA.A();//去掉 a 的类型 +a.callEgretMethod("method"); + +exampleA.A.CallEgretFunc("function"); +~~~ + +* 输出 + +~~~javascript +method msg from js : method +static msg from js : function +~~~ + +> 总结：相当于非同一个模块下的 ts 调用 ts。其他的比如变量等，也是按上面步骤来实现。 diff --git a/Engine2D/cmdExtensionPlugin/api/006tKfTcly1ftt0qjetboj31kw11fqg6.png b/Engine2D/cmdExtensionPlugin/api/006tKfTcly1ftt0qjetboj31kw11fqg6.png new file mode 100644 index 0000000..3bfd5fe Binary files /dev/null and b/Engine2D/cmdExtensionPlugin/api/006tKfTcly1ftt0qjetboj31kw11fqg6.png differ diff --git a/Engine2D/cmdExtensionPlugin/api/006tKfTcly1ftt0qlp9r9j31kw11fdsu.png b/Engine2D/cmdExtensionPlugin/api/006tKfTcly1ftt0qlp9r9j31kw11fdsu.png new file mode 100644 index 0000000..b62977f Binary files /dev/null and b/Engine2D/cmdExtensionPlugin/api/006tKfTcly1ftt0qlp9r9j31kw11fdsu.png differ diff --git a/Engine2D/cmdExtensionPlugin/api/006tKfTcly1ftwmn9vae5j30ea0og409.png b/Engine2D/cmdExtensionPlugin/api/006tKfTcly1ftwmn9vae5j30ea0og409.png new file mode 100644 index 0000000..27a3130 Binary files /dev/null and b/Engine2D/cmdExtensionPlugin/api/006tKfTcly1ftwmn9vae5j30ea0og409.png differ diff --git a/Engine2D/cmdExtensionPlugin/api/006tKfTcly1ftzzaieuuxj31kw104wqe.png b/Engine2D/cmdExtensionPlugin/api/006tKfTcly1ftzzaieuuxj31kw104wqe.png new file mode 100644 index 0000000..4f0df58 Binary files /dev/null and b/Engine2D/cmdExtensionPlugin/api/006tKfTcly1ftzzaieuuxj31kw104wqe.png differ diff --git a/Engine2D/cmdExtensionPlugin/api/006tNc79ly1ftvgmpt1gyj31kw11sna8.png b/Engine2D/cmdExtensionPlugin/api/006tNc79ly1ftvgmpt1gyj31kw11sna8.png new file mode 100644 index 0000000..643725d Binary files /dev/null and b/Engine2D/cmdExtensionPlugin/api/006tNc79ly1ftvgmpt1gyj31kw11sna8.png differ diff --git a/Engine2D/cmdExtensionPlugin/api/README.md b/Engine2D/cmdExtensionPlugin/api/README.md new file mode 100644 index 0000000..8ca9222 --- /dev/null +++ b/Engine2D/cmdExtensionPlugin/api/README.md @@ -0,0 +1,747 @@ +# 命令行扩展插件 API 文档 + +## 脚本插件目录结构 + +``` +scripts + |-- api.d.ts // 文档 + |-- config.ts // 构建脚本入口 + |-- myplugin.ts // 开发者自定义插件的示例 + |-- node.d.ts // node的.d.ts 文件 +``` + +## 插件运行机制简介 + +开发者执行 ` build` 和 ` publish` 的时候，可以执行不同的插件。 + +在项目构建的时候会自动执行 ` config.ts` 文件中的 ` buildConfig` 函数。 + +> 这个函数的功能是返回一个对象，对象中的内容会根据执行不同的命令返回相对应的输出路径和需要执行的插件，插件在返回对象的 commands 数组中实例化后就会执行。 + + + +` config.ts` 有多个版本对应着不同的平台： + +![image-20180803171144641](./006tKfTcly1ftwmn9vae5j30ea0og409.png) + +发布到不同平台时，执行的` config.ts`是不同的，比如执行 ： + +```shell +egret publish --target wxgame +``` + +发布到微信小游戏，执行的是 ` config.wxgame.ts`。 + +## 运行调用 + +> config.ts + +```typescript + +else if (command == 'publish') { + const outputDir = `bin-release/web/${version}`; + return { + outputDir, + + // ----------调用开始----------- + // commands数组中实例化之后，就会执行该插件 + commands: [ + new CustomPlugin(), + new CompilePlugin({ libraryType: "release", defines: { DEBUG: false, RELEASE: true } }), + new ExmlPlugin('commonjs'), // 非 EUI 项目关闭此设置 + new UglifyPlugin([{ + sources: ["main.js"], + target: "main.min.js" + }]), + new RenamePlugin({ + verbose: true, hash: 'crc32', matchers: [ + { from: "**/*.js", to: "[path][name]_[hash].[ext]" } + ] + }), + new ManifestPlugin({ output: "manifest.json" }), + ] + // ----------调用结束------------ + + + } + } +``` + +插件按照**数组顺序**调用。 + +为了方便开发者使用，Egret内置了一些常用插件。 + +---- + + + + + +## 插件---ExmlPlugin + +### 定义 + +EXML 插件，用于使用不同的策略来发布 EXML 文件。 + +### 语法 + +```typescript +new ExmlPlugin(publishPolicy: EXML_Publish_Policy) +``` + +### 参数值 + +| 参数 | 类型 | 描述 | +| ---- | ---- | --- | +| default | string | 使用 egretProperties.json 中的 exmlPublishPolicy 中的策略 | +| debug| string | 默认策略，用于开发环境 | +| contents | string | 将 EXML 的内容写入到主题文件中 | +| gjs| string | 将生成的JS文件写入到主题文件中 | +| commonjs | string | 将EXML合并为一个 CommonJS 风格的文件 | +| commonjs2 | string | 将EXML合并为一个含有解析方法和皮肤定义的文件，且皮肤抽离为一份配置 | + +### 细节 + +如果当前项目非EUI项目，请关掉这个设置。 + + + +## 插件---UglifyPlugin + +### 定义 + +混淆插件，用来压缩混淆代码。 + +### 语法 + +```typescript +new UglifyPlugin([{ + sources: ["main.js"], + target: "main.min.js" +}]) +``` + +### 参数值 + +UglifyPlugin 的参数是一个数组，数组中的值是一个 ` UglifyPluginOption`对象，对象属性如下： + +| 参数 | 类型 | 描述 | +| ------- | -------- | ---------------- | +| sources | string[] | 需要被压缩的文件 | +| target | string | 压缩后的文件名 | + + + +## 插件---RenamePlugin + +### 定义 + +修改文件名插件，用哈希算法给文件名生成一个独一无二的后缀。 + +### 语法 + +```typescript +new RenamePlugin({ + verbose: true, hash: 'crc32', matchers: [ + { from: "**/*.js", to: "[path][name]_[hash].[ext]" } + ] +}) +``` + +### 参数值 + +RenamePlugin 的参数是一个对象，对象属性如下： + +| 参数 | 类型 | 描述 | +| -------- | --------- | ------------------------------------------------------------ | +| verbose | boolean | 是否输出日志 (可选参数) | +| hash | string | 采用何种 hash 算法，目前暂时只支持 crc32 (可选参数) | +| matchers | Matcher[] | 设置匹配规则，将指定文件进行改名
该参数是个数组，允许设置多个匹配规则，数组内是Matcher对象 | + +Matcher对象： + +匹配机制，将满足 ` from` 的文件输出为 ` to` 格式的文件。 + +` from` 采用 glob 表达式 ,` to` 包含 ` path` 、` name`、 ` hash`、 ` ext` 四个变量。 + +示例： + +```typescript +// 将所有的文件（*表示通配符，匹配所有情况）输出为to的格式 +{ from:"resource/**.*" , to:"[path][name]_[hash].[ext]" } +``` + + + +## 插件---ManifestPlugin + +### 定义 + +生成 manifest 文件，这个文件会被用于记录 JavaScript 文件的版本号。 + +### 语法 + +```typescript +new ManifestPlugin({ output: "manifest.json" }) +``` + +### 参数值 + +ManifestPlugin的参数是一个对象，属性如下： + +| 参数 | 类型 | 描述 | +| ------- | ------- | ----------------------------------------- | +| output | string | 输出的文件名，支持 json 与 js 两种格式 | +| hash | string | 使用的算法，暂只支持 “crc32” (可选参数) | +| verbose | boolean | 是否输出转换过程 (可选参数) | + + + +## 插件---CompilePlugin + +### 定义 + +编译插件，根据参数选择不同的编译方式。 + +### 语法 + +```typescript +new CompilePlugin({ libraryType: "release", defines: { DEBUG: false, RELEASE: true } }) +``` + +### 参数值 + +CompilePlugin 的参数是一个对象，属性如下： + +| 参数 | 类型 | 描述 | +| ----------- | ------ | ----------------------------- | +| libraryType | string | 可选取值 "debug" \| “release" | +| defines | any | 定义 （可选参数） | + +### 细节 + +libraryType参数设置编译的模式。 + +设置为 debug 时，发布后的js文件不会被混淆压缩，保留可读性，方便debug。 + +![image-20180731140029051](./006tKfTcly1ftt0qlp9r9j31kw11fdsu.png) + + + +设置为 release 时，发布后的js文件会被混淆压缩。 + +![image-20180731140130770](./006tKfTcly1ftt0qjetboj31kw11fqg6.png) + + + +## 插件---IncrementCompilePlugin + +### 定义 + +增量编译, 重新编译程序代码中更改的那部分代码 （常用在开发模式，发布时请使用 `CompilePlugin`）。 + +### 语法 + +```typescript +new IncrementCompilePlugin() +``` + +### 细节 + +这个插件生成的 JavaScript 代码不会被添加到构建管线中，后续其他插件无法获取生成的 js 文件。 + +这个功能将会在未来被 watch 模式代替掉。 + + + + + +## 插件---EmitResConfigFilePlugin + +### 定义 + +用来生成 res.json 文件或者 res.js 文件。 + +### 语法 + +```typescript +new EmitResConfigFilePlugin({ + output: "resource/default.res.json", + + // typeSelector方法，写在下面 + typeSelector: config.typeSelector, + + // 根据传进来的路径p，生成文件name + nameSelector: p => { + // 获取文件名，然后把 '.' 替换成 '_' + return path.basename(p).replace(/\./gi, "_") + }, + + // 根据传进来的路径p，生成group + groupSelector: p => { + // 这里数据写死，可以根据自己的需求自定 + return "preload" + } +}) + + //…………其他代码………… + +// 根据传进来的path，判断文件的类型 +typeSelector: (path) => { + const ext = path.substr(path.lastIndexOf(".") + 1); + const typeMap = { + "jpg": "image", + "png": "image", + "webp": "image", + "json": "json", + "fnt": "font", + "pvr": "pvr", + "mp3": "sound", + "zip": "zip", + "sheet": "sheet", + "exml": "text" + } + let type = typeMap[ext]; + if (type == "json") { + if (path.indexOf("sheet") >= 0) { + type = "sheet"; + } else if (path.indexOf("movieclip") >= 0) { + type = "movieclip"; + }; + } + return type; +} + +``` + +### 参数值 + +EmitResConfigFilePlugin的参数是一个对象，参数如下： + +| 参数 | 类型 | 描述 | +| ------------- | -------- | ---------------------------------------------------------- | +| output | string | 生成路径，可以指定生成为 *.res.js 文件或者 *.res.json 文件 | +| typeSelector | function | 一个方法，根据返回值决定文件的类型 | +| nameSelector | function | 一个方法，根据返回值决定文件的name | +| groupSelector | function | 一个方法，根据返回值决定文件的组 | + +` typeSelector` , `nameSelector `, `groupSelector` 三个方法都有一个默认参数 p，即每个文件的完整路径。 + + + +### typeSelector + +``` typescript + typeSelector: (path) => { + const ext = path.substr(path.lastIndexOf(".") + 1); + const typeMap = { + "jpg": "image", + "png": "image", + "webp": "image", + "json": "json", + "fnt": "font", + "pvr": "pvr", + "mp3": "sound", + "zip": "zip", + "sheet": "sheet", + "exml": "text" + } + let type = typeMap[ext]; + if (type == "json") { + if (path.indexOf("sheet") >= 0) { + type = "sheet"; + } else if (path.indexOf("movieclip") >= 0) { + type = "movieclip"; + }; + } + return type; + } +``` + +先通过完整路径获取到文件的后缀名，然后在typeMap中找到对应的文件类型，接着判断”sheet"和"movieclip”类型，最后返回type。 + +根据开发者不同的需求可以自定义返回的文件类型，比如可以将json文件作为text文件返回。 + +### nameSelector + +```typescript +nameSelector: p => { + return path.basename(p).replace(/\./gi, "_") +} +``` + +获取到文件名，然后将文件名中的 “.” 替换为 “_” ，然后返回。 + +res.json中资源的“name”属性的值的命名方式，就是由这个方法定义的。 + +###groupSelector + +```typescript +groupSelector: p => { + return "preload" +} +``` + +方法中直接返回了 preload ，说明所有的文件都直接放在了 “preload” 组中。 + +开发者可以自定义分组方式，比如根据文件所在的文件夹来分组。 + +```typescript +groupSelector: p => { + // 把p分割成数组 + let arr = p.split('/') + // 数组中倒数第二个就是文件夹名 + return arr[arr.length - 2] +} +``` + +根据不同的父级文件夹分组。 + + + +## 插件---CleanPlugin + +### 定义 + +清理，用来重置清空文件夹。 + +### 语法 + +```typescript +new CleanPlugin({ matchers: ["js", "resource"] }) +``` + +### 参数值 + +CleanPlugin的参数是一个对象，属性如下： + +| 参数 | 类型 | 描述 | +| -------- | ----- | ---------------------------------- | +| matchers | array | 数组，数组内是需要清理的文件夹名称 | + +### 细节 + +matchers 的值是需要清理的文件夹的名称，这个文件夹名是相对于publish的outputDir，也就是发布后生成的文件夹，语法中实例表示清理 js和resource两个文件夹。一般作为第一个插件运行，清空上一次生成的资源。 + + + +## 插件---ResSplitPlugin + +### 定义 + +分离资源目录，将指定的文件拷贝到其他的文件夹内。 + +### 语法 + +```typescript +new ResSplitPlugin({ + verbose: true, + matchers: [ + { from:"resource/**" , to:"dir" } + ] +}) +``` + +### 参数值 + +ResSplitPlugin的参数是一个对象，对象属性如下： + +| 参数 | 类型 | 描述 | +| -------- | ------- | --------------------------------- | +| verbose | boolean | 是否输出日志 | +| matchers | array | 一个数组，数组内的项是Matcher对象 | + +`Matcher` 有两个属性，`from` 、`to` + +> 将满足 from 的文件输出到 to + +### 细节 + +ResSplitPlugin插件在`publish`时使用，可以将资源目录分离到别的文件夹。 + +在开发微信小游戏的时候，可以使用这个插件将资源放到初始包外，减小游戏包体积。 + +案例：[如何使用缓存资源](http://developer.egret.com/cn/github/egret-docs/Engine2D/minigame/usingcache/index.html) + + + +## 插件---ZipPlugin + +压缩插件，把代码压缩成某种格式。 + +### 用法 + +```typescript +new ZipPlugin({ + mergeSelector: config.mergeSelector +}) + //……其他代码 +mergeSelector(p) { + // do something +} +``` + +### 参数值 + +ZipPlugin的参数是一个对象，属性如下： + +| 参数 | 类型 | 描述 | +| ------------- | -------- | -------------------------------- | +| mergeSelector | function | 一个方法，根据返回值决定如何压缩 | + +### 细节 + +使用ZipPlugin插件之前，需要安装cross-zip 和 cross-zip-cli， 在终端中输入： + +```shell +//全局安装 +npm install cross-zip -g +npm install cross-zip-cli -g +``` + +安装完成之后才可以使用这个插件。 + +```typescript +new ZipPlugin({ + mergeSelector: path => { + + // 如果文件是assets/Button/路径下的， 压缩到assets/but.zip + if (path.indexOf("assets/Button/") >= 0) { + return "assets/but.zip" + } + } +}) +``` + +![image-20180802164312618](./006tNc79ly1ftvgmpt1gyj31kw11sna8.png) + +（图中项目是新建的默认EUI项目） + + + +## 插件---TextureMergerPlugin + +### 定义 + +使用 TextureMerger 实现纹理自动合并，通常与ConvertResConfigFilePlugin插件配合使用。 + +### 语法 + +```typescript +new TextureMergerPlugin({textureMergerRoot:[ 'resource']}) +``` + +### 参数值 + +| 参数 | 类型 | 描述 | +| ----------------- | ---- | ---------------------- | +| textureMergerRoot | 数组 | 数组内的值表示扫描路径 | + +插件只合成textureMergerRoot参数中指定的目录中的tmproject + +### 细节 + +插件依赖 TextureMerger 1.7 以上的版本。 + +TextureMergerPlugin根据项目中的`tmproject`文件进行合图操作（暂时需要关闭TextureMerger工具才能使用）,通过TextureMerger工具的命令行控制完成。 + +#### 生成tmproject文件 + +* 开发者通过wing做出一款游戏后，我们建议使用TextureMerger工具进行合图操作，这样主要目的就是可以自由设置，开发者可以根据项目的需求来调节最后的显示效果和合图的方式。使用[TextureMerger工具](http://developer.egret.com/cn/github/egret-docs/tools/TextureMerger/update/update172/index.html)生成`tmproject`文件。 + + + +* 当游戏项目比较小，对资源配置的要求不高时，开发者可以选择使用一个自动化的脚本来处理生成`tmproject`文件。 + + 脚本 autoMerger.js，主要将对应的res.json里面的组进行合并图集操作，支持粒子，龙骨，位图字体的筛选，支持多个res.json，自动扫描配置好的res.json，但是由于资源引用问题，建议将所有res.json合并为一个文件后，然后再执行这个脚本去生成对应的tmproject文件，因为针对的是比较普遍的情况，所以性能比较低，如果开发者所需项目命名比较规范统一，建议修改脚本去提高性能，使用此脚本时开发者看不到最终显示效果，如果组的资源过多，很有可能导致合完的图集很大，大量空白区域被闲置，**因此建议开发者修改组之后或是采用[TextureMerger工具](http://developer.egret.com/cn/github/egret-docs/tools/TextureMerger/manual/index.html)进行拆分**，以达到最好的效果。 + + 脚本使用： + + 将合图插件autoMerger.js拷贝到所需工程的scripts目录下（其他目录可能导致发布流程被破坏），修改autoMerger.js里面的两个参数。 + + ```typescript + // 要扫描的res.json文件数组 + var resjsons = ["default.res.json"]; + ``` + + ```typescript + // tmproject文件的输出目录， 必须在resource目录下 + var targetDir = "resource/TextureMerger"; + ``` + + 在Egret Wing中打开终端，或使用其他终端进入当前项目根目录： + + ```shell + node scripts/autoMerger.js + ``` + +#### autoMerget脚本 + + +```typescript +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +var fs = require("fs"); +var path = require("path"); +var resjsons = ["resource/default.res.json"]; //要扫描的res.json文件 +var targetDir = "resource/TextureMerger"; //输出目录 +var pathNor = path.relative(targetDir, "resource"); //返回一个相对路径 +var tempindex = 0; +//创建输出文件夹 +if (resjsons.length > 0) { + if (!fs.existsSync(targetDir)) { + + // var paths = path.normalize(targetDir).split("\\"); //windows 下使用 + var paths = path.normalize(targetDir).split("\/"); //mac linux 下使用 + + var target = "."; + for (var _i = 0, paths_1 = paths; _i < paths_1.length; _i++) { + var p = paths_1[_i]; + + // target += ("\\" + p); // windows 下使用 + target += ("\/" + p); // mac linux 下使用 + + if (!fs.existsSync(target)) + // 根据路径创建文件夹 + fs.mkdirSync(target); + } + } +} +var _loop_1 = function (resJson) { + // 判断是否是res.json文件 + if (fs.existsSync(resJson) && resJson.indexOf("res.json") > -1) { + var defaultJson = fs.readFileSync(resJson, "utf-8"); + // 解析res.json文件内容 + var defaultObject = JSON.parse(defaultJson); + var groups = defaultObject.groups; //组 + var resources = defaultObject.resources; //资源 + var resourcesHash_1 = {}; // 用来存放resources的资源信息 + + // 遍历resources + for (var _i = 0, resources_1 = resources; _i < resources_1.length; _i++) { + var resource = resources_1[_i]; + resourcesHash_1[resource.name] = resource.url; + } + + // 遍历groups + for (var _a = 0, groups_1 = groups; _a < groups_1.length; _a++) { + var group = groups_1[_a]; + var tmproject = {}; //用来存放tmproject文件的信息 + // tmproject文件配置 + tmproject["options"] = { + "layoutMath": "2", + "sizeMode": "2n", + "useExtension": 1, + "layoutGap": 1, + "extend": 0 + }; + // projectName + tmproject["projectName"] = group.name + "_" + tempindex; + // 版本 + tmproject["version"] = 5; + tempindex++; + + // 获取res.json分组的keys, 并分割成数组 + var oldkeys = group.keys.split(","); + var oldkeysHash = {}; + // 遍历oldkeys + for (var _b = 0, oldkeys_1 = oldkeys; _b < oldkeys_1.length; _b++) { + var key = oldkeys_1[_b]; + // 保存到oldkeysHash对象中 + oldkeysHash[key] = true; + } + + var newKeys = []; + // 遍历oldkeys + for (var _c = 0, oldkeys_2 = oldkeys; _c < oldkeys_2.length; _c++) { + var key = oldkeys_2[_c]; + if (key.indexOf("json") == -1) { + if (!oldkeysHash[key.replace("png", "json")]) { //粒子和龙骨对应的图集不合图 + if (!oldkeysHash[key.replace("png", "fnt")]) //位图字体 + newKeys.push(key); + } + else if (key.indexOf("jpg") > -1) { + newKeys.push(key); + } + } + } + oldkeysHash = {}; + oldkeys = []; + // files路径 + var urls = newKeys.map(function (key) { + return path.join(pathNor, resourcesHash_1[key]); + }); + tmproject["files"] = urls; + // 根据tmproject写入文件 + if (urls.length > 0) { + fs.writeFileSync(path.join(targetDir, tmproject["projectName"] + ".tmproject"), JSON.stringify(tmproject)); + } + tmproject = {}; + } + } +}; +//根据数组开始扫描 +for (var _a = 0, resjsons_1 = resjsons; _a < resjsons_1.length; _a++) { + var resJson = resjsons_1[_a]; + _loop_1(resJson); +} + +``` + + + + +#### 调用插件 + +publish之后，会在打包后的文件夹的resource目录下生成一个TextureMerger文件夹，文件夹内就是合并完成后的纹理集。 + +![image-20180806144123553](./006tKfTcly1ftzzaieuuxj31kw104wqe.png) + +此时纹理集并没有被添加到 res.json 配置中，需要使用[ConvertResConfigFilePlugin](#ConvertResConfigFilePlugin)插件。 + + + +## 插件---ConvertResConfigFilePlugin + +### 定义 + +对原有的资源进行筛选，将合图之前的小图资源引用删除，增加对合并图集的引用加载，通常与TextureMergerPlugin插件配合使用。 + +### 语法 + +```typescript +new ConvertResConfigFilePlugin({ + resourceConfigFiles: [{ + filename: "resource/default.res.json", root: "resource/" }], + nameSelector: (p) => { + return path.basename(p).split(".").join("_"); + } +}) +``` + +### 参数值 + +ConvertResConfigFilePlugin的参数是一个对象，属性如下： + +| 参数 | 类型 | 描述 | +| ------------------- | ------- | ---------------------------------- | +| resourceConfigFiles | array | 数组，数组中是一个对象 | +| nameSelector | funcion | 一个方法，根据返回值决定文件的name | +| TM_Verbose | boolean | 是否输出警告 | + +resourceConfigFiles 数组中的对象属性中，filename属性是被修改的配置文件，root属性是资源路径，应该与游戏业务逻辑里面的相一致，同时整个插件执行的时候，只扫描这个root文件夹下面的资源。 + +### 细节 + +nameSelector函数主要是规定了怎么资源的url名字转为对应res.json中的名字，默认情况就是上面所示，如果开发者有自己的统一规范可以替换掉这里的逻辑。 + +如果开发者资源名称和url名称没有统一的规范，建议先统一修改res.json的引用设置再去调用此插件。 + +当TM_Verbose打印出警告的时候，表示有多个res.json 都引用同一份合图结果，证明证明这个资源没有划分好（不影响代码执行）。 + +### TIP + +当文件打包出的图集在res.json文件上级的时候，是不能使用的，在res.json中不能出现 `../` 这种向上级寻找资源的语法，因此开发者如果要使用合图插件，只能将tmproject文件放到与res.json或是它的子集中去。另外可能存在很多res.json都会引用同一份的合图，这份合图的位置就要保证在所有res.json文件的子集下。 + + + diff --git a/Engine2D/cmdExtensionPlugin/plugin/01.jpg b/Engine2D/cmdExtensionPlugin/plugin/01.jpg new file mode 100644 index 0000000..ff11f78 Binary files /dev/null and b/Engine2D/cmdExtensionPlugin/plugin/01.jpg differ diff --git a/Engine2D/cmdExtensionPlugin/plugin/02.jpg b/Engine2D/cmdExtensionPlugin/plugin/02.jpg new file mode 100644 index 0000000..698c236 Binary files /dev/null and b/Engine2D/cmdExtensionPlugin/plugin/02.jpg differ diff --git a/Engine2D/cmdExtensionPlugin/plugin/03.jpg b/Engine2D/cmdExtensionPlugin/plugin/03.jpg new file mode 100644 index 0000000..ce9730b Binary files /dev/null and b/Engine2D/cmdExtensionPlugin/plugin/03.jpg differ diff --git a/Engine2D/cmdExtensionPlugin/plugin/README.md b/Engine2D/cmdExtensionPlugin/plugin/README.md new file mode 100644 index 0000000..b23d5c8 --- /dev/null +++ b/Engine2D/cmdExtensionPlugin/plugin/README.md @@ -0,0 +1,105 @@ +## 命令行扩展插件 + +### 脚本插件目录结构 + +``` +scripts + |-- api.d.ts // 文档 + |-- config.ts // 构建脚本入口 + |-- myplugin.ts // 开发者自定义插件的示例 + |-- node.d.ts // node的.d.ts 文件 +``` + +### 插件运行机制简介 + +开发者在 build 和 publish 的时候可以执行自定义插件，在项目构建时会执行 config.ts 文件中的 buildConfig 函数，这个函数的功能是返回一个对象，对象中的内容会根据执行不同的命令返回相对应的输出路径和需要执行的插件，插件在返回对象的 commands 数组中实例化后就会执行。 + +![image](01.jpg) + +### 插件编写规范 + +扩展的插件要实现 plugins.Command 接口，接口中有两个方法，onFile 方法会在项目中的每个文件都会执行此函数，返回 file 表示保留此文件，返回 null 表示将此文件从构建管线中删除，传入的参数是实现了 File 接口的类型。onFinish 方法会在所有文件均执行完后，最终会执行此函数，传入的参数是实现了 CommandContext 接口的类型。基本结构如图： + +![image](02.jpg) + +### 内置插件简介 + +另外为了开发者的便利性，我们已经内置了几个常用的插件，详细的介绍请您查看 api.d.ts 文件。 + +### 开发插件示例 + +我们要的功能很简单，只是在编译后 js 文件名添加这次编译的时间戳，以便达到对 js 文件版本控制。 +首先在 scripts 文件中建立 TestPlugin.ts 文件，并实现 plugins.Command 接口。 + +```javascript +export class TestPlugin implements plugins.Command { + constructor() { + } + async onFile(file: plugins.File) { + return file; + } + async onFinish(commandContext: plugins.CommandContext) { + } +} +``` + +我们要保存时间戳和已修改的 js 文件名字，就要声明这几个属性来保存，然后在构造函数里生成时间戳，代码如下： + +```javascript +private timeStamp: number; //时间戳 + +private modifyInitial: Array = []; //保存修改过的库文件 js 文件名字 +private modifyGame: Array = []; //保存修改过的 main 文件 js 文件名字 + +private manifestPath: string; //保存 manifest 路径 + +constructor() { + this.timeStamp = Date.now(); +} +``` + +然后我来扩展 onFile 的方法，先判断类型为 js 的文件，使用 file.extname 来判断，如果为 js 文件将生成好的时间戳加到 js 文件的名字上，我们还将所有修改的 js 文件重新放到 manifest.json 中，所以要将 manifest 路径和修改过的 js 文件名字保存起来以便我们后续修改，最后返回这个文件。代码如下： + +```javascript +async onFile(file: plugins.File) { + const extName = file.extname; + if (extName == ".js") { + const pos = file.path.lastIndexOf("."); + const prefix = file.path.slice(0, pos); + const nowName = prefix + this.timeStamp + extName; + file.path = nowName; + + if (file.basename.indexOf("main.min") >= 0) { + this.modifyGame.push(file.relative); + } else { + this.modifyInitial.push(file.relative); + } + } + + if (file.basename.indexOf("manifest.json") >= 0) { + this.manifestPath = file.relative; + } + return file; +} +``` + +我们还需在 onFinish 方法中处理 manifest.json 文件，先将所有保存好的 js 文件名字放到一个对象中，然后将这个对象转换为一个 JSON 字符串，最后保利用 createFile 方法修改 manifest 文件。代码如下： + +```javascript +async onFinish(commandContext: plugins.CommandContext) { + let obj = { + initial: this.modifyInitial, + game: this.modifyGame + }; + const serialize = JSON.stringify(obj); + commandContext.createFile(this.manifestPath, new Buffer(serialize)); +} +``` + +现在我们已经完成了这小小的插件，要想使用还需要把我们的插件引入到 config.ts 文件中，首先使用 import 引入我们的插件，例：import { testPlugin } from './TestPlugin';然后在 buildConfig 的返回值的 commands 数组中实例化这个插件：new testPlugin()。最后执行命令 egret publish 命令的运行结果如图： + +![image](03.jpg) + +### 小结 + +通过这篇文档，大家已经能够非常容易的编写 Egret 命令行插件了，有任何问题大家到论坛上提问即可，白鹭官方会有专职人员为你解答。 diff --git a/Engine2D/cmdExtensionPlugin/teach/README.md b/Engine2D/cmdExtensionPlugin/teach/README.md new file mode 100644 index 0000000..105b768 --- /dev/null +++ b/Engine2D/cmdExtensionPlugin/teach/README.md @@ -0,0 +1,426 @@ +# 插件使用案例教程 + +## 引言 + +本文不详细介绍各插件的细节，只展示使用方法，如果开发者对细节有兴趣可以参考 [API 文档](http://developer.egret.com/cn/github/egret-docs/Engine2D/cmdExtensionPlugin/api/index.html)。 + +为了让开发者以更简单的使用Egret内置的插件，我们将通过一个案例来展示插件的具体使用方法和注意事项。**本文基于引擎5.2.7，低于该版本的引擎可能部分功能无效** + +本文案例从一个刚编写完成的[eui卡牌项目](http://bbs.egret.com/thread-50009-1-1.html)开始发布到微信小游戏，为了让代码包的**体积更小**，**更好管理**，逐步添加使用不同的插件，以实现不同的需求。[源文件下载地址](http://tool.egret-labs.org/DocZip/engine/plugin-egret-eui-demo2.zip) +### todos + +* 使用UglifyPlugin将代码混淆压缩 +* 使用ResSplitPlugin把部分资源分离出去 +* 使用ZipPlugin把文件压缩成zip格式 +* 使用TextureMergerPlugin将纹理合并，且用ConvertResConfigFilePlugin修改res.json配置文件 + + + +## 项目初始化 + +1. 把index.html中的`data-scale-mode`改成`fixedWidth` +2. 打开EgretLauncher，将本项目发布成微信小游戏 +3. 打开微信开发者工具 + + + +## 使用UglifyPlugin压缩代码 + +在微信开发者工具可以看到，js文件夹中5个库文件和一个`main.js`。 + +现在需求是是要把库文件压缩到一个文件`lib.min.js`中。 + +回到EgretWing，编辑sctipts下的config.wxgame.ts： + +```javascript +//***其他代码*** +// + +if (command == 'build') { + return { + outputDir, + commands: [ + // 清理js，resource文件夹 + new CleanPlugin({ matchers: ["js", "resource"] }), + new CompilePlugin({ libraryType: "debug", defines: { DEBUG: true, RELEASE: false } }), + new ExmlPlugin('commonjs'), // 非 EUI 项目关闭此设置 + new WxgamePlugin(), + + // 压缩插件 + new UglifyPlugin([ + { + // 需要被压缩的文件 + sources: [ + "libs/modules/egret/egret.js", + "libs/modules/eui/eui.js", + "libs/modules/assetsmanager/assetsmanager.js", + "libs/modules/tween/tween.js", + ], + // 压缩后的文件 + target: "lib.min.js" + } + ]), + + new ManifestPlugin({ output: 'manifest.js' }) + ] + } + } + +// +// ***其他代码*** +``` + +保存后在终端执行： + +```shell +egret build +``` + +可以在微信开发者工具看到发布后的代码，js文件夹内的库文件已经被压缩到lib.min.js。 + +但是报错，找不到eui，这是因为自动生成的`manifest.js`里面对js的引用顺序出错，需要优先引用lib.min.js + +打开根目录下的`manifest.js`， 修改一下引用顺序。 + +```javascript +require("js/lib.min.js") +require("js/main.js") +require("js/default.thm.js") +``` + +每次编译的时候`manifest.js`都会被重新生成，所以我们使用一个自定义脚本来修改他们的顺序 + +打开 scripts下的myPlugin.ts : + +```typescript +/** + * 示例自定义插件，您可以查阅 http://developer.egret.com/cn/2d/projectConfig/cmdExtensionPluginin/ + * 了解如何开发一个自定义插件 + */ +export class CustomPlugin implements plugins.Command { + private buffer + constructor() { + } + + async onFile(file: plugins.File) { + // 保存manifest.js文件的内容 + if(file.basename.indexOf('manifest.js') > -1) { + this.buffer = file.contents + } + return file; + } + + async onFinish(commandContext: plugins.CommandContext) { + // 把'lib.min.js'移到第一位 + + if (this.buffer) { + let contents: string = this.buffer.toString() + let arr = contents.split('\n') + let lib + arr.forEach((item, index) => { + if (item.indexOf('lib.min.js') > -1) { + lib = item + arr.splice(index, 1) + } + }) + if (lib != null) { + arr.unshift(lib) + } + + let newCont = arr.join('\n') + commandContext.createFile('manifest.js', new Buffer(newCont)) + } + } +} +``` + +这个文件就是用来自定义插件的，在config.wxgame.ts中已经默认引用，所以只需要调用即可，注意调用顺序 + +```typescript +new ManifestPlugin({ output: 'manifest.js' }), +// 在manifest.js生成之后调用 +new CustomPlugin() +``` + + + + + +## 使用ResSplitPlugin分离资源文件 + +因为微信对代码包的大小是有限制的，总大小不能超过4M（使用分包功能可以提升到8M），所以我们需要通过ResSplitPlugin把某些游戏资源文件分离出去，将游戏资源放置在一个外部CDN服务器上，需要的时候动态加载即可。 + +编辑config.wxgame.ts： + +```javascript +// ***其他代码*** +// + +new ResSplitPlugin({ + verbose: false, matchers: + [ + // from 使用glob表达式来匹配文件， projectName就是项目的名字 + { from: "resource/art/about/**.**", to: `${projectName}_wxgame_remote` }, + { from: "resource/art/heros_goods/**.**", to: `${projectName}_wxgame_remote` } + ] +}) + +// ***其他代码*** +``` + +保存后在终端执行： + +```shell +egret build +``` + +微信开发者工具中resource > art 下的`about`和`heros_goods`已经不在了。 + +被分离出去的在 Egret 项目根目录中 `egret-eui-demo_wxgame_remote` 文件夹内。 + + + +* *注意 1：* 需要开发者自己写逻辑，判断一下如果是微信游戏时，哪些资源是从远程加载的，哪些是放在本地的 +* *注意 2：* 为了便于调试，我们把资源放在了 Egret 项目根目录中 `egret-eui-demo_wxgame_remote` 文件夹内，正式发布的一般放在 CDN 上 + + + +## 使用ZipPlugin把文件压缩成zip格式 + +为了减少加载次数和传输量，我们可以把文件压缩成zip格式，使用的时候可以使用第三方库JSZip来读取使用zip文件。 + +使用ZipPlugin插件之前，需要安装cross-zip 和 cross-zip-cli ， 在终端中输入： + +```shell +//全局安装 +npm install cross-zip -g +npm install cross-zip-cli -g +``` +安装完成之后，在config.wxgame.ts添加代码： + +```typescript +new ZipPlugin({ + mergeSelector: p => { + // 如果文件是assets/路径下的， 压缩到assets.zip + if (p.indexOf("assets/") >= 0) { + return "assets.zip" + } + } +}) +``` + +项目中其实assets里面的资源都是没有用到的，这里我们用它来演示压缩插件的使用。 + +保存后在终端执行： + +```shell +egret build +``` + +执行之后可以在微信开发者工具看到，resource目录下原来的assets文件夹已经被压缩成了assets.zip。 + + + +## 使用TextureMergerPlugin，ConvertResConfigFilePlugin合并纹理集 + +项目中使用的图片资源都是单独的png文件，在加载的时候每张图片都会单独请求。我们可以通过合并纹理集的方式把这些图片合成一张图，以减少请求数量。 +使用插件之前，我们需要有纹理集的配置文件`tmpropject`， 可以用两种方式生成： + +1. 安装[TextureMerger工具](https://egret.com/downloads/texture.html) +2. 执行脚本生成 + +这里使用第二种方法，使用脚本autoMerger.js： + +```js +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +var fs = require("fs"); +var path = require("path"); +var resjsons = ["resource/default.res.json"]; //要扫描的res.json文件 +var targetDir = "resource/TextureMerger"; //输出目录 +var pathNor = path.relative(targetDir, "resource"); //返回一个相对路径 +var tempindex = 0; +//创建输出文件夹 +if (resjsons.length > 0) { + if (!fs.existsSync(targetDir)) { + + // var paths = path.normalize(targetDir).split("\\"); //windows 下使用 + var paths = path.normalize(targetDir).split("\/"); //mac linux 下使用 + + var target = "."; + for (var _i = 0, paths_1 = paths; _i < paths_1.length; _i++) { + var p = paths_1[_i]; + + // target += ("\\" + p); // windows 下使用 + target += ("\/" + p); // mac linux 下使用 + + if (!fs.existsSync(target)) + // 根据路径创建文件夹 + fs.mkdirSync(target); + } + } +} +var _loop_1 = function (resJson) { + // 判断是否是res.json文件 + if (fs.existsSync(resJson) && resJson.indexOf("res.json") > -1) { + var defaultJson = fs.readFileSync(resJson, "utf-8"); + // 解析res.json文件内容 + var defaultObject = JSON.parse(defaultJson); + var groups = defaultObject.groups; //组 + var resources = defaultObject.resources; //资源 + var resourcesHash_1 = {}; // 用来存放resources的资源信息 + + // 遍历resources + for (var _i = 0, resources_1 = resources; _i < resources_1.length; _i++) { + var resource = resources_1[_i]; + resourcesHash_1[resource.name] = resource.url; + } + + // 遍历groups + for (var _a = 0, groups_1 = groups; _a < groups_1.length; _a++) { + var group = groups_1[_a]; + var tmproject = {}; //用来存放tmproject文件的信息 + // tmproject文件配置 + tmproject["options"] = { + "layoutMath": "2", + "sizeMode": "2n", + "useExtension": 1, + "layoutGap": 1, + "extend": 0 + }; + // projectName + tmproject["projectName"] = group.name + "_" + tempindex; + // 版本 + tmproject["version"] = 5; + tempindex++; + + // 获取res.json分组的keys, 并分割成数组 + var oldkeys = group.keys.split(","); + var oldkeysHash = {}; + // 遍历oldkeys + for (var _b = 0, oldkeys_1 = oldkeys; _b < oldkeys_1.length; _b++) { + var key = oldkeys_1[_b]; + // 保存到oldkeysHash对象中 + oldkeysHash[key] = true; + } + + var newKeys = []; + // 遍历oldkeys + for (var _c = 0, oldkeys_2 = oldkeys; _c < oldkeys_2.length; _c++) { + var key = oldkeys_2[_c]; + if (key.indexOf("json") == -1) { + if (!oldkeysHash[key.replace("png", "json")]) { //粒子和龙骨对应的图集不合图 + if (!oldkeysHash[key.replace("png", "fnt")]) //位图字体 + newKeys.push(key); + } + else if (key.indexOf("jpg") > -1) { + newKeys.push(key); + } + } + } + oldkeysHash = {}; + oldkeys = []; + // files路径 + var urls = newKeys.map(function (key) { + return path.join(pathNor, resourcesHash_1[key]); + }); + tmproject["files"] = urls; + // 根据tmproject写入文件 + if (urls.length > 0) { + fs.writeFileSync(path.join(targetDir, tmproject["projectName"] + ".tmproject"), JSON.stringify(tmproject)); + } + tmproject = {}; + } + } +}; +//根据数组开始扫描 +for (var _a = 0, resjsons_1 = resjsons; _a < resjsons_1.length; _a++) { + var resJson = resjsons_1[_a]; + _loop_1(resJson); +} + + +``` + +把这个脚本放在scripts文件夹内，这个脚本是根据项目的`default.res.json`文件的内容来生成`tmpropject`文件 + +在终端中执行： + +```shell +node scripts/autoMerger.js +``` +执行成功之后可以在resource文件夹中看到多出了一个TextureMerger文件夹，里面就是根据`default.res.json`分组生成的`tmpropject`文件。 + +现在只需要执行TextureMergerPlugin插件就可以自动合并，这里需要注意TextureMergerPlugin依赖 TextureMerger 1.7 以上的版本，如果不符合请自行安装，并且在运行时TextureMerger需要处于关闭状态。 + +```typescript +new TextureMergerPlugin({textureMergerRoot:[ 'resource']}) +``` + +保存后在终端执行： + +```shell +egret build +``` + +执行完成后，在微信开发者工具可以看到，resource > TextureMerger 内新增了三个png文件，就是合并之后的纹理集。游戏运行的时候只需要加载这三个纹理集就可以，无需加载那些单独的png文件但是需要去res.json里面配置，把单独的资源引用都删除，加上纹理集的引用。 + +这些操作当然不需要手动去完成，现在只需要使用ConvertResConfigFilePlugin插件就可以实现这个功能。 + +编辑config.wxgame.ts： + +```typescript +new TextureMergerPlugin({textureMergerRoot:[ 'resource']}) + +new ConvertResConfigFilePlugin({ + resourceConfigFiles: [{ filename: "resource/default.res.json", root: "resource/" }], + nameSelector: (p) => { + return path.basename(p).split(".").join("_") + }, + TM_Verbose: true +}) +``` + +保存后在终端执行： + +```shell +egret build +``` + +在微信开发者工具中，打开调试器，在network面板可以看到加载的纹理集。 + +这里有个注意事项，在游戏中点击英雄按钮，切换到英雄场景时，会发现列表里面的图片加载不出来。 + +在network面板可以看到加载请求是单独的png文件，而不是纹理集。 + +这是因为列表中的图片地址是直接使用url。 + +```typescript +// 原始数组 +let dataArr:any[] = [ + {image: 'resource/art/heros_goods/heros01.png', name: '亚特伍德', value: '评价: 很特么厉害, 为所欲为', isSelected: false}, + {image: 'resource/art/heros_goods/heros02.png', name: '亚特伍德', value: '评价: 很特么厉害, 为所欲为', isSelected: false}, + {image: 'resource/art/heros_goods/heros03.png', name: '亚特伍德', value: '评价: 很特么厉害, 为所欲为', isSelected: true}, + {image: 'resource/art/heros_goods/heros04.png', name: '亚特伍德', value: '评价: 很特么厉害, 为所欲为', isSelected: false}, + {image: 'resource/art/heros_goods/heros05.png', name: '亚特伍德', value: '评价: 很特么厉害, 为所欲为', isSelected: false}, + {image: 'resource/art/heros_goods/heros06.png', name: '亚特伍德', value: '评价: 很特么厉害, 为所欲为', isSelected: false}, + {image: 'resource/art/heros_goods/heros07.png', name: '亚特伍德', value: '评价: 很特么厉害, 为所欲为', isSelected: false} +] +// 转成eui数据 +let euiArr:eui.ArrayCollection = new eui.ArrayCollection(dataArr) +// 把list_hero数据源设置成euiArr +this.list_hero.dataProvider = euiArr +// 设置list_hero的项呈视器 (这里直接写类名,而不是写实例) +this.list_hero.itemRenderer = heroList_item +``` + +这种引用方式的图片，需要开发者手动在代码中修改，将图片地址修改成纹理集中的图片。 + + + +## 结语 + +本文通过使用UglifyPlugin，ResSplitPlugin，ZipPlugin，TextureMergerPlugin，ConvertResConfigFilePlugin插件，使项目发布到微信小程序之后的代码包体积减小，用户发起的请求数变少，且将代码混淆压缩。 + +使用Egret自带的插件，已经可以满足开发者的基本需求，如果有针对项目的特殊需求，可以选择[自定义插件](../../cmdExtensionPlugin/plugin/README.md)。 + diff --git a/Engine2D/colorEffects/blendMode/README.md b/Engine2D/colorEffects/blendMode/README.md new file mode 100644 index 0000000..2188f12 --- /dev/null +++ b/Engine2D/colorEffects/blendMode/README.md @@ -0,0 +1,48 @@ + +混合模式是指同一个显示容器中的两个显示对象重叠时，重叠区域如何呈现的方式，也就是两个显示对象的重叠区域像素如何混合产生结果像素。 + +## 1.覆盖混合 + +### 说明 + +覆盖混合，表示为"normal"，该显示对象出现在背景前面。显示对象的像素值将覆盖背景的像素值。在显示对象为透明的区域，背景是可见的。 + +### 设置 +通常不设置混合模式，默认就是覆盖混合。设置图片为覆盖模式的代码： +```img.blendMode = egret.BlendMode.NORMAL;``` + +### 效果 +使用覆盖混合的效果： + +![](normal.png) + + +## 2.叠加混合 + +### 说明 + +叠加混合，表示为"add" ：将显示对象的原色值添加到它的背景颜色中，上限值为 0xFF。此设置通常用于使两个对象间的加亮溶解产生动画效果。 + +### 设置 +设置图片为覆盖模式的代码： +```img.blendMode = egret.BlendMode.ADD;``` + +### 效果 +使用叠加混合的效果： + +![](add.png) + +## 3.擦除混合 + +### 说明 +擦除混合，表示为"erase" ：根据显示对象的 Alpha 值擦除背景。即不透明区域将被完全擦除。 + +### 设置 +设置图片为覆盖模式的代码： +```img.blendMode = egret.BlendMode.ERASE;``` + +### 效果 +使用擦除混合的效果： + +![](erase.png) + \ No newline at end of file diff --git a/Engine2D/colorEffects/blendMode/add.png b/Engine2D/colorEffects/blendMode/add.png new file mode 100644 index 0000000..7e04e3b Binary files /dev/null and b/Engine2D/colorEffects/blendMode/add.png differ diff --git a/Engine2D/colorEffects/blendMode/erase.png b/Engine2D/colorEffects/blendMode/erase.png new file mode 100644 index 0000000..ca3189e Binary files /dev/null and b/Engine2D/colorEffects/blendMode/erase.png differ diff --git a/Engine2D/colorEffects/blendMode/normal.png b/Engine2D/colorEffects/blendMode/normal.png new file mode 100644 index 0000000..c2a9ff4 Binary files /dev/null and b/Engine2D/colorEffects/blendMode/normal.png differ diff --git a/Engine2D/colorEffects/filter/57398262999f1.png b/Engine2D/colorEffects/filter/57398262999f1.png new file mode 100644 index 0000000..3f7fc8f Binary files /dev/null and b/Engine2D/colorEffects/filter/57398262999f1.png differ diff --git a/Engine2D/colorEffects/filter/57398262a82f2.png b/Engine2D/colorEffects/filter/57398262a82f2.png new file mode 100644 index 0000000..9185a35 Binary files /dev/null and b/Engine2D/colorEffects/filter/57398262a82f2.png differ diff --git a/Engine2D/colorEffects/filter/57398262b8b53.png b/Engine2D/colorEffects/filter/57398262b8b53.png new file mode 100644 index 0000000..00c878f Binary files /dev/null and b/Engine2D/colorEffects/filter/57398262b8b53.png differ diff --git a/Engine2D/colorEffects/filter/57398262da6c7.png b/Engine2D/colorEffects/filter/57398262da6c7.png new file mode 100644 index 0000000..3d5876b Binary files /dev/null and b/Engine2D/colorEffects/filter/57398262da6c7.png differ diff --git a/Engine2D/colorEffects/filter/5739826305543.png b/Engine2D/colorEffects/filter/5739826305543.png new file mode 100644 index 0000000..d56c806 Binary files /dev/null and b/Engine2D/colorEffects/filter/5739826305543.png differ diff --git a/Engine2D/colorEffects/filter/5739826314d12.png b/Engine2D/colorEffects/filter/5739826314d12.png new file mode 100644 index 0000000..287df3d Binary files /dev/null and b/Engine2D/colorEffects/filter/5739826314d12.png differ diff --git a/Engine2D/colorEffects/filter/5739826334769.png b/Engine2D/colorEffects/filter/5739826334769.png new file mode 100644 index 0000000..642a15a Binary files /dev/null and b/Engine2D/colorEffects/filter/5739826334769.png differ diff --git a/Engine2D/colorEffects/filter/57398263469d8.png b/Engine2D/colorEffects/filter/57398263469d8.png new file mode 100644 index 0000000..20c99d7 Binary files /dev/null and b/Engine2D/colorEffects/filter/57398263469d8.png differ diff --git a/Engine2D/colorEffects/filter/README.md b/Engine2D/colorEffects/filter/README.md new file mode 100644 index 0000000..c7ea74d --- /dev/null +++ b/Engine2D/colorEffects/filter/README.md @@ -0,0 +1,250 @@ +## 1.发光滤镜 + +### 1.1.说明 +使用 `GlowFilter` 类可以对显示对象应用发光效果。发光样式的选项包括内侧发光、外侧发光以及挖空模式。 +这里创建一个函数用来对传入的显示对象用给定的参数进行发光滤镜处理。 +在接下的示例代码中，要传给滤镜的参数，将首先以局部变量的方式定义，并把每个参数的含义在注释部分进行说明。然后将这些参数填充到滤镜的构造函数相应位置。注意，为了结构清晰便于理解代码，所定义的局部变量与滤镜的构造函数参数将一一对应，并且顺序也是完全一致的。 + +### 1.2.设置 +白鹭小鸟在程序中用一张位图表示： +```var img:egret.Bitmap;``` + +创建滤镜： + +``` javascript +var color:number = 0x33CCFF; /// 光晕的颜色，十六进制，不包含透明度 +var alpha:number = 0.8; /// 光晕的颜色透明度，是对 color 参数的透明度设定。有效值为 0.0 到 1.0。例如，0.8 设置透明度值为 80%。 +var blurX:number = 35; /// 水平模糊量。有效值为 0 到 255.0（浮点） +var blurY:number = 35; /// 垂直模糊量。有效值为 0 到 255.0（浮点） +var strength:number = 2; /// 压印的强度，值越大，压印的颜色越深，而且发光与背景之间的对比度也越强。有效值为 0 到 255。暂未实现 +var quality:number = egret.BitmapFilterQuality.HIGH; /// 应用滤镜的次数，建议用 BitmapFilterQuality 类的常量来体现 +var inner:boolean = false; /// 指定发光是否为内侧发光，暂未实现 +var knockout:boolean = false; /// 指定对象是否具有挖空效果，暂未实现 + +var glowFilter:egret.GlowFilter = new egret.GlowFilter( color, alpha, blurX, blurY, + strength, quality, inner, knockout ); +``` + +最后对位图对象应用发光滤镜： +``` javascript +img.filters = [ glowFilter ]; +``` + +### 1.3.效果 +如图是使用滤镜前后的效果对比： +![egret-bird-filter-no][] ![egret-bird-filter-glow][] + +[egret-bird-filter-no]: egret-bird-filter-no.png +[egret-bird-filter-glow]: egret-bird-filter-glow.png + +## 2.颜色矩阵滤镜 + +### 2.1.说明 +ColorMatrixFilter--颜色矩阵滤镜(egret.ColorMatrixFilter) 在颗粒等级上提供更好的控制显示对象的颜色转换方式。ColorMatrixFilter为 4行5列的多维矩阵(20个元素的数组)。下图为等效的矩阵。 + + ![](57398262999f1.png) + + +### 2.2.设置 + +下面是一个图片灰度化的示例。首先准备一张图片： + + ![](57398263469d8.png) + +然后通过下面颜色转换矩阵代码添加一个“灰度化”的效果: + +```javascript +var hero:egret.Bitmap = new egret.Bitmap(); +hero.texture = RES.getRes("hero_png"); +this.addChild(hero); +//颜色矩阵数组 +var colorMatrix = [ + 0.3,0.6,0,0,0, + 0.3,0.6,0,0,0, + 0.3,0.6,0,0,0, + 0,0,0,1,0 +]; + +var colorFlilter = new egret.ColorMatrixFilter(colorMatrix); +hero.filters = [colorFlilter]; +``` + +在上述示例中，首先新建了一个显示对象，然后新建了一个颜色转换矩阵 `ColorMatrixFilter`,并通过显示对象的 `filters` 属性来设置滤镜。显示对象的 `filters` 属性包含当前与显示对象关联的每个滤镜对象的索引数组。 + +实现效果的关键是颜色转换矩阵的设置。上面我们将每个颜色通道都乘相同的系数来实现灰度效果。 + +### 2.3.效果 + + ![](5739826334769.png) + +> 通过 ColorMatrixFilter 的 matrix 属性可以设置颜色矩阵。需要注意的是不能直接通过 `colorFlilter.matrix[4] = 100;` 这样的方式直接修改颜色矩阵。只能通过获得数组的引用然后修改,最后重置矩阵： + +```javascript +//获得数组。 +var test = colorFlilter.matrix; +//修改数组中的值。 +test[4] = 100; +//重置矩阵。 +colorFlilter.matrix = test; +``` + +### 2.4.矩阵数据说明 + +在上面例子中我们实现了灰度图的效果，下面介绍颜色矩阵的含义： + +![](57398262999f1.png) + +实际的颜色值由下面的公式决定： + +``` javascript +redResult = (a[0] * srcR) + (a[1] * srcG) + (a[2] * srcB) + (a[3] * srcA) + a[4]; +greenResult = (a[5] * srcR) + (a[6] * srcG) + (a[7] * srcB) + (a[8] * srcA) + a[9]; +blueResult = (a[10] * srcR) + (a[11] * srcG) + (a[12] * srcB) + (a[13] * srcA) + a[14]; +alphaResult = (a[15] * srcR) + (a[16] * srcG) + (a[17] * srcB) + (a[18] * srcA) + a[19]; +``` + +公式中 srcR、srcG、srcB、srcA 表示原始显示对象的像素值, a 是颜色矩阵。新的红绿蓝和alpha通道实际由颜色矩阵和原始图片的像素值同时决定。颜色矩阵中的 Off 可以直接设置偏移量加上相应的 R G B A 的值的乘积即为最终的颜色值。所以与原来完全相同的矩阵转换应该是下面这样的： + +```javascript +var colorMatrix = [ + 1,0,0,0,0, + 0,1,0,0,0, + 0,0,1,0,0, + 0,0,0,1,0 +]; +``` + +下面是几个颜色矩阵设置示例： + +#### 设置红色偏移量 + +在颜色矩阵中直接设置每一行中最后一个值即可设置偏移量，直接设置红色通道的偏移量，结果整张图片变红。 + +```javascript +var colorMatrix = [ + 1,0,0,0,100, + 0,1,0,0,0, + 0,0,1,0,0, + 0,0,0,1,0 +]; +``` + +修改代码中的颜色矩阵数组，编译运行得到如下效果图： + +![](57398262a82f2.png) + +> 需要注意的 R G B 通道对应的偏移量的值应该为 -255 ~ 255，Alpha 通道对应的偏移量取值范围为 -255 ~ 255.应避免传入除数字外其他类型的值，比如字符串等。 + +#### 绿色加倍 + +如果想使绿色通道加倍,colorMatrix[6] 加倍即可： + +```javascript +var colorMatrix = [ + 1,0,0,0,0, + 0,2,0,0,0, + 0,0,1,0,0, + 0,0,0,1,0 +]; +``` + +![](57398262b8b53.png) + +#### 红色决定蓝色值 + +如果要使结果图像中的蓝色与原图的红色数量相等，将colorMatrix[10]设为1， colorMatrix[12]设为0 ,即结果的蓝色值完全由原始的红色值决定： + +```javascript +var colorMatrix = [ + 1,0,0,0,0, + 0,1,0,0,0, + 1,0,0,0,0, + 0,0,0,1,0 +]; +``` + +![](5739826305543.png) + +#### 增加亮度 + +增加亮度的最简单途径是给每个颜色值添加相同的偏移量。 + +```javascript +var colorMatrix = [ + 1,0,0,0,100, + 0,1,0,0,100, + 0,0,1,0,100, + 0,0,0,1,0 +]; +``` + +![](57398262da6c7.png) + + +通过"颜色矩阵滤镜"可以完成除了亮度和灰度之外复杂的颜色调整，如调整对比度，饱和度和色相等。 + + +## 3.模糊滤镜 +### 3.1.设置 +在 Egret 中，通过 `BlurFilter` 类设置模糊滤镜。 + +```javascript +var hero:egret.Bitmap = new egret.Bitmap(); +hero.texture = RES.getRes("hero_png"); +this.addChild(hero); + +var blurFliter = new egret.BlurFilter( 1 , 1); +hero.filters = [blurFliter]; +``` + +和颜色转换矩阵类似，实例化一个 `BlurFilter` 并将其保存到显示对象的 `filters` 属性中即可。其中实例化 `BlurFilter` 有两个参数，即为 x 、y 方向的模糊度。 +值越大效果越模糊。 + +### 3.2.效果 +![](5739826314d12.png) + +> 需要注意的是模糊滤镜对性能的消耗比较大，应谨慎使用。普通显示对象可以开启 `cacheAsBitmap` 提高一些性能。 + +> 显示对象的 `filters` 属性可以保存多个滤镜效果，比如同时使用` hero.filters = [blurFliter,colorFlilter];` 模糊和颜色矩阵滤镜效果。多个效果同时生效。 + +## 4.投影滤镜 + +### 4.1.说明 +阴影算法基于模糊滤镜使用同一个框型滤镜。投影样式有多个选项，包括内侧或外侧阴影和挖空模式。 + +### 4.2.设置 +白鹭小鸟在程序中用一张位图表示： +```var img:egret.Bitmap;``` + +创建滤镜，在定义局部变量时，对每一个参数的含义在注释部分进行简要的说明： + + +``` javascript +var distance:number = 6; /// 阴影的偏移距离，以像素为单位 +var angle:number = 45; /// 阴影的角度，0 到 360 度 +var color:number = 0x000000; /// 阴影的颜色，不包含透明度 +var alpha:number = 0.7; /// 光晕的颜色透明度，是对 color 参数的透明度设定 +var blurX:number = 16; /// 水平模糊量。有效值为 0 到 255.0（浮点） +var blurY:number = 16; /// 垂直模糊量。有效值为 0 到 255.0（浮点） +var strength:number = 0.65; /// 压印的强度，值越大，压印的颜色越深，而且阴影与背景之间的对比度也越强。有效值为 0 到 255。暂未实现 +var quality:number = egret.BitmapFilterQuality.LOW; /// 应用滤镜的次数，暂无实现 +var inner:boolean = false; /// 指定发光是否为内侧发光 +var knockout:boolean = false; /// 指定对象是否具有挖空效果 + +var dropShadowFilter:egret.DropShadowFilter = new egret.DropShadowFilter( distance, angle, color, alpha, blurX, blurY, + strength, quality, inner, knockout ); +``` + +最后对位图对象应用投影滤镜： +``` javascript +img.filters = [ dropShadowFilter ]; +``` + +### 4.3.效果 +下图是使用滤镜前后的效果对比： +![egret-bird-filter-no][] ![egret-bird-filter-shadow][] + +对比发光滤镜，可以看到投影滤镜的构造函数正好比发光滤镜多出前两个参数：`distance` 和 `angle` 。在投影滤镜的 `distance` 和 `angle` 属性设置为 0 时，投影滤镜与发光滤镜极为相似。 + +[egret-bird-filter-no]: egret-bird-filter-no.png +[egret-bird-filter-shadow]: egret-bird-filter-shadow.png diff --git a/Engine2D/colorEffects/filter/egret-bird-filter-glow.png b/Engine2D/colorEffects/filter/egret-bird-filter-glow.png new file mode 100644 index 0000000..aa2266a Binary files /dev/null and b/Engine2D/colorEffects/filter/egret-bird-filter-glow.png differ diff --git a/Engine2D/colorEffects/filter/egret-bird-filter-no.png b/Engine2D/colorEffects/filter/egret-bird-filter-no.png new file mode 100644 index 0000000..5304ed0 Binary files /dev/null and b/Engine2D/colorEffects/filter/egret-bird-filter-no.png differ diff --git a/Engine2D/colorEffects/filter/egret-bird-filter-shadow.png b/Engine2D/colorEffects/filter/egret-bird-filter-shadow.png new file mode 100644 index 0000000..3beca67 Binary files /dev/null and b/Engine2D/colorEffects/filter/egret-bird-filter-shadow.png differ diff --git a/Engine2D/colorEffects/shader/README.md b/Engine2D/colorEffects/shader/README.md new file mode 100644 index 0000000..ac139a2 --- /dev/null +++ b/Engine2D/colorEffects/shader/README.md @@ -0,0 +1,95 @@ + +### 1.使用说明 + +egret 5.0.3 以上版本中提供了 `egret.CustomFilter` ，供开发者自由扩展滤镜，实现各种定制化效果。 +> 该功能仅在web和微端环境下支持 + + +`CustomFilter` 构造函数中需要传入顶点着色器和片段着色器程序的字符串，以及 `uniforms` 对象 + +* 开发者可以根据项目需求自行编写顶点着色器和片段着色器程序 + +* 顶点着色器中`aVertexPosition`，`aTextureCoord`，`aColor`，`projectionVector`属性由引擎传入 + +* 引擎渲染之前会将 `uniforms` 对象的属性上传到着色器中，开发者可以每帧改变 `uniforms` 对象的属性达到实现不同效果的需求。该属性目前只支持数字和数组 + +* `egret.CustomFilter` 同时提供了 `padding` 属性，该属性为滤镜的内边距，如果自定义滤镜所需区域比原区域大（如引擎提供的描边滤镜），需要手动设置该属性。该属性以像素为单位 + +更详细的使用方法请参考[API文档](http://developer.egret.com/cn/apidoc/index/name/egret.CustomFilter#methodSummary)。 + +### 2.实战教程 + +下面示例实现一个黑白方块背景的效果，首先创建一个game项目，之后在Main.ts中createGameScene函数最后插入顶点着色器代码： + +```javascript +let vertexSrc = + "attribute vec2 aVertexPosition;\n" + + "attribute vec2 aTextureCoord;\n" + + "attribute vec2 aColor;\n" + + + "uniform vec2 projectionVector;\n" + + + "varying vec2 vTextureCoord;\n" + + + "const vec2 center = vec2(-1.0, 1.0);\n" + + + "void main(void) {\n" + + " gl_Position = vec4( (aVertexPosition / projectionVector) + center , 0.0, 1.0);\n" + + " vTextureCoord = aTextureCoord;\n" + + "}"; +``` + +在之后插入片段着色器代码： + +```javascript +let fragmentSrc = + "precision lowp float;\n" + + + "varying vec2 vTextureCoord;\n" + + + "uniform float width;\n" + + "uniform float height;\n" + + + "void main(void) {\n" + + "vec4 fg;\n" + + "if(mod(floor(vTextureCoord.x / width) + floor(vTextureCoord.y / height), 2.0) == 0.0) {" + + "fg = vec4(1,1,1,1);" + + "}" + + "else {" + + "fg = vec4(0,0,0,1);" + + "}" + + "gl_FragColor = fg;\n" + + "}"; +``` +在代码中定义了每个方格的宽高，这两个值由`uniforms`属性传入。之后根据uv信息以及传入的宽高，利用取余函数算出奇偶数，通过奇偶决定方格是黑色还是白色。 + +对背景图使用自定义滤镜，设定每个方格大小为50像素： + +```javascript +let size = 50; +let filter = new egret.CustomFilter(vertexSrc, fragmentSrc, { width: size / stageW, height: size / stageH }); +sky.filters = [filter]; +``` + +运行效果如下图，发现背景图变成了黑白交替的方格，每个方格大小为50像素。 + +![](heibai.png) + +之后再通过帧函数改变方格大小(uniforms属性)： + +```javascript +let inc = 1; +this.stage.addEventListener(egret.Event.ENTER_FRAME, function () { + size += inc; + if (size >= 80) { + inc = -1; + } + if (size <= 50) { + inc = 1; + } + filter.uniforms.width = size / stageW; + filter.uniforms.height = size / stageH; +}, this); +``` + +再次运行游戏，会发现每帧方格的大小都会相应变化 diff --git a/Engine2D/colorEffects/shader/heibai.png b/Engine2D/colorEffects/shader/heibai.png new file mode 100644 index 0000000..acc8ca9 Binary files /dev/null and b/Engine2D/colorEffects/shader/heibai.png differ diff --git a/Engine2D/colorEffects/tint/README.md b/Engine2D/colorEffects/tint/README.md new file mode 100644 index 0000000..2879763 --- /dev/null +++ b/Engine2D/colorEffects/tint/README.md @@ -0,0 +1,34 @@ + +从 Egret 5.2.24 版本开始，`DisplayObject` 中新增加了一个 `tint` 属性，可以给当前对象设置填充色. + +**注意：该功能还处于测试阶段，可以用于游戏调试，正式版本请谨慎使用。** + +下面是一个示例，给图片加上不同的填充色。 + +```javascript +let texture: egret.Texture = RES.getRes('bird_png'); + +let b1 = new egret.Bitmap(); +b1.texture = texture; +this.addChild(b1) + +let b2 = new egret.Bitmap(); +b2.texture = texture; +b2.tint = 0xff0000 +b2.x = 150; +this.addChild(b2) + +let b3 = new egret.Bitmap(); +b3.texture = texture; +b3.tint = 0x00ff00 +b3.x = 300; +this.addChild(b3) + +let b4 = new egret.Bitmap(); +b4.texture = texture; +b4.tint = 0x4169E1 +b4.x = 450; +this.addChild(b4) +``` + +![](./p1.png) diff --git a/Engine2D/colorEffects/tint/p1.png b/Engine2D/colorEffects/tint/p1.png new file mode 100644 index 0000000..ea2e84d Binary files /dev/null and b/Engine2D/colorEffects/tint/p1.png differ diff --git a/Engine2D/debug/debug/README.md b/Engine2D/debug/debug/README.md new file mode 100644 index 0000000..b00a5e1 --- /dev/null +++ b/Engine2D/debug/debug/README.md @@ -0,0 +1,79 @@ + +## 1.使用 DEBUG 编译参数 +开发者经常写一些希望仅在开发阶段使用的代码，来进行数据校验、输出日志等。 + +Egret 提供了 `DEBUG` 这一全局变量来实现这样的功能。 + +下面的代码校验 `value` 是不是由4个数字组成，如果不是，输出指定的错误信息。 + +```javascript + if (DEBUG) { + var rect = value.split(","); + if (rect.length != 4 || isNaN(parseInt(rect[0])) || isNaN(parseInt(rect[1])) || + isNaN(parseInt(rect[2])) || isNaN(parseInt(rect[3]))) { + egret.$error(2016, this.currentClassName, toXMLString(node)); + } + } +``` + +在发行版生成过程中，Egret 命令行会移除 `if(DEBUG){ ... }` 这一整个代码块，保持发行版包体的精简。 + +Egret 还提供了另外一个与 `DEBUG` 对应的编译参数 `RELEASE`，用来编写只在发行版中运行的代码。 + + +## 2.使用内置日志输出面板 + +在PC端可使用 `console` 提供的诸多方法输出日志，然后使用浏览器提供的开发者工具查看。 + +但是在移动端这个方式受到了限制，大多数移动端浏览器没有查看日志的方法。 +因此 Egret 集成了向屏幕输出日志的功能，以方便移动设备调试。 + +![显示日志](p1.png) + +在 index.html 文件中有如下代码块： + +```css +
+
+``` + +通过 data-show-log： 设置是否在屏幕中显示日志。 true 显示，false 不显示。 + +在代码中可以直接调用 `egret.log(message?:any, ...optionalParams:any[])` 来输出日志。 + +data-show-fps-style 可以设置日志的位置，文字大小和背景颜色 + +## 3.显示帧频信息 + +`data-show-fps="true/false"` 设置是否显示帧频信息，当这个值为 `true` 时 Egret 会在舞台的左上角显示 FPS 和 其他性能指标 + +* FPS: 60 - 帧频 + +* Draw: 13 - 每帧 draw 方法调用的平均次数 + +* Cost: 0,0 - 1)Ticker 和 EnterFrame 阶段显示的耗时; 2)绘制显示对象耗时（单位是ms） + +**注：** 5.2 之前的版本 Cost 有3个值，分别为：1）Ticker 和 EnterFrame 阶段显示的耗时; 2）每帧舞台所有事件处理和矩阵运算耗时; 3）绘制显示对象耗时（单位是ms） + +## 4.动态隐藏和显示信息面板 +在游戏页面，FPS 面板和调试信息面板是在同一个 `div` 标签里。在引擎 `5.2.23` 版本之后，该 `div` 标签增加了`id`值 `egret-fps-panel`， +当您在 `index.html` 里开启信息面板后， +`data-show-fps="true" data-show-log="true"`。可以通过代码动态隐藏和显示这个面板。**注意** 该功能只有在 pc 的浏览器中才有效。 + +```css +//隐藏面板 +document.getElementById('egret-fps-panel').style.visibility ="hidden"; +//显示面板 +document.getElementById('egret-fps-panel').style.visibility ="visible"; +``` + + \ No newline at end of file diff --git a/Engine2D/debug/debug/p1.png b/Engine2D/debug/debug/p1.png new file mode 100644 index 0000000..6df8d12 Binary files /dev/null and b/Engine2D/debug/debug/p1.png differ diff --git a/Engine2D/displayObjecContainer/addAndRemove/5668e2533b617.png b/Engine2D/displayObjecContainer/addAndRemove/5668e2533b617.png new file mode 100644 index 0000000..2dea467 Binary files /dev/null and b/Engine2D/displayObjecContainer/addAndRemove/5668e2533b617.png differ diff --git a/Engine2D/displayObjecContainer/addAndRemove/5668e25358e2b.png b/Engine2D/displayObjecContainer/addAndRemove/5668e25358e2b.png new file mode 100644 index 0000000..12ca10a Binary files /dev/null and b/Engine2D/displayObjecContainer/addAndRemove/5668e25358e2b.png differ diff --git a/Engine2D/displayObjecContainer/addAndRemove/5668e25372b48.png b/Engine2D/displayObjecContainer/addAndRemove/5668e25372b48.png new file mode 100644 index 0000000..c483c2b Binary files /dev/null and b/Engine2D/displayObjecContainer/addAndRemove/5668e25372b48.png differ diff --git a/Engine2D/displayObjecContainer/addAndRemove/5668e2537f781.png b/Engine2D/displayObjecContainer/addAndRemove/5668e2537f781.png new file mode 100644 index 0000000..0dc42ec Binary files /dev/null and b/Engine2D/displayObjecContainer/addAndRemove/5668e2537f781.png differ diff --git a/Engine2D/displayObjecContainer/addAndRemove/5668e253912b4.png b/Engine2D/displayObjecContainer/addAndRemove/5668e253912b4.png new file mode 100644 index 0000000..176fae2 Binary files /dev/null and b/Engine2D/displayObjecContainer/addAndRemove/5668e253912b4.png differ diff --git a/Engine2D/displayObjecContainer/addAndRemove/5668e253a0fc6.png b/Engine2D/displayObjecContainer/addAndRemove/5668e253a0fc6.png new file mode 100644 index 0000000..b72b0c6 Binary files /dev/null and b/Engine2D/displayObjecContainer/addAndRemove/5668e253a0fc6.png differ diff --git a/Engine2D/displayObjecContainer/addAndRemove/README.md b/Engine2D/displayObjecContainer/addAndRemove/README.md new file mode 100644 index 0000000..00dcc46 --- /dev/null +++ b/Engine2D/displayObjecContainer/addAndRemove/README.md @@ -0,0 +1,165 @@ +在Egret中建立显示对象和渲染显示对象是两个过程。建立显示对象后，对象会处于内存中，但不会参与渲染过程，只有把显示对象放到显示列表后，显示对象才会参与渲染过程。如果想将某个显示对象从渲染过程中删除，只需要将其移除显示列表即可。 + +## 添加显示对象到显示列表 + +当创建一个显示对象后，就可以将其添加到显示列表中，首先我们绘制一个Sprite，这个Sprite是一个宽高为100的绿色正方形。 + +``` +var spr:egret.Sprite = new egret.Sprite(); +spr.graphics.beginFill( 0x00ff00 ); +spr.graphics.drawRect(0, 0, 100, 100); +spr.graphics.endFill(); +``` + +上面的代码就是我们所说的建立显示对象的过程，这一步完成后我们可以测试一下程序，在舞台中看不到任何内容。接下来我们将 spr 添加到显示列表中。 + +``` +this.addChild( spr ); +``` + +添加这句代码之后，我们再次编译运行程序，此时你可以在浏览器中看到效果如图： + +![](5668e2533b617.png) + +代码中 `addChild` 就是将 `spr` 添加到显示列表中。我们前面介绍过，显示列表是一个树状结构，这里 `spr` 的上一级就是 `this`，也就是我们的文档类。文档类是 `stage` 舞台的第一个子对象。 + +下面是关于当前示例的层级示意图: + +![](5668e25358e2b.png) + +## 删除显示对象 + +上面我们介绍了如何添加一个显示对象到显示列表中，下面来介绍一下如何将显示对象从显示列表中删除。 + +执行删除的函数非常简单，使用 `removeChild` 方法即可删除一个显示对象。 + +``` +this.removeChild( spr ); +``` + +执行删除操作与添加显示对象操作类似，我们将被删除的显示对象作为参数传递给 `removeChild` 方法。示例中 `spr` 就是被删除的显示对象，而 `this` 则是 `spr` 的父级。 + +## 显示对象操作的注意点 + +### 显示对象独立于显示列表 + +虽然我们的显示对象在运行时会被高频率的添加删除到显示列表，但显示对象独立于显示列表。简单解释一下，当我们创建一个显示对象Sprite时，该对象拥有自己的坐标属性，旋转角度属性等。这些属性都是显示对象独立拥有的。一旦该显示对象被键入到显示列表之中，Egret就会按照显示对象的状态进行显示。 + +当用户将显示对象从显示列表中移除后，这些状态依然存在。将一个显示对象移除显示列表后，该对象并非在内存中被销毁。我们只是不让显示对象参与渲染而已。 + +我们来通过一段代码来观察一下显示对象在容器中的操作与状态改变。 + +``` +//创建了一个类型为Sprite的显示对象 +var spr:egret.Sprite = new egret.Sprite(); +spr.graphics.beginFill( 0x00ff00 ); +spr.graphics.drawRect(0, 0, 100, 100); +spr.graphics.endFill(); +//该对象存在，被添加到显示列表中，在画面中显示 +this.addChild( spr ); +//该对象存在，但已被移除显示列表，画面上不显示 +this.removeChild( spr ); +//该对象存在，驻于内存中 +``` + +### 相对坐标系 + +显示对象的坐标系是相对坐标系，而非绝对坐标系。 + +当我们将一个显示对象的x,y坐标值均设置为100的时候，该坐标值表示，当前显示对象居于父级原点100，100的位置。我们通过下面一个实例来看一下具体区别。 + +首先我们建立两个容器，为了能够方便的看清效果，我们将两个容器的宽高都设置为100*100，同时将两个容器分别设置为红色和绿色。 + +绿色的容器x轴设置为120像素。 + +红色的容器y轴设置为130像素 + +将两个容器都添加到显示列表中，他们的父级都是文档类。下面是示例代码： + +``` +var sprcon1:egret.Sprite = new egret.Sprite(); +sprcon1.graphics.beginFill( 0x00ff00 ); +sprcon1.graphics.drawRect(0, 0, 100, 100); +sprcon1.graphics.endFill(); +this.addChild( sprcon1 ); +sprcon1.x = 120; + +var sprcon2:egret.Sprite = new egret.Sprite(); +sprcon2.graphics.beginFill( 0xff0000 ); +sprcon2.graphics.drawRect(0, 0, 100, 100); +sprcon2.graphics.endFill(); +this.addChild( sprcon2 ); +sprcon2.y = 130; +``` + +此时运行后的效果如下： + +![](5668e25372b48.png) + +然后我们绘制一个宽高为50的蓝色正方形，我们将这个正方形的x轴和y轴都设置为10像素。下面我们分别将这个蓝色的正方形添加到不同的容器中，以便查看效果。 + +创建并绘制一个蓝色正方形的代码： + +``` +var spr:egret.Sprite = new egret.Sprite(); +spr.graphics.beginFill( 0x0000ff ); +spr.graphics.drawRect( 0, 0, 50, 50 ); +spr.graphics.endFill(); +spr.x = 10; +spr.y = 10 +``` + +添加到文档类的显示容器中： + +``` +this.addChild( spr ); +``` + +运行效果： + +![](5668e2537f781.png) + +添加到sprcon1绿色容器中： + +``` +sprcon1.addChild( spr ); +``` + +运行效果： + +![](5668e253912b4.png) + +添加到sprcon2红色容器中： + +``` +sprcon2.addChild( spr ); +``` + +运行效果： + +![](5668e253a0fc6.png) + +### 多次添加显示对象到显示列表 + +同一个显示对象无论被代码加入显示列表多少次，在屏幕上只绘制一次。 + +如果一个显示对象A被添加到了B这个容器中，然后A又被添加到了C容器中。那么在第二次执行 C.addChild(A) 的时候，A自动的从B容器中被删除，然后添加到C容器中。 + +### 删除操作的注意点 + +当我们想要删除一个显示对象的时候需要执行的操作是： + +`容器对象.removeChild( 显示对象 );` + +但执行这个删除操作，我们的“显示对象”必须拥有父级。换句话说，被删除的显示对象必须存在于容器对象当中。 + +如果当前删除显示对象不在容器对象之中，那么在JavaScript控制台中你将看见报错信息：`Uncaught Error: [Fatal]child未被addChild到该parent:` + +避免这种问题的处理方法非常简单，就是当你每次removeChild之前，你都对即将要被删除的显示对象做一次判断，判断它是否拥有父级。判断的代码如下： + +``` +if( spr.parent ) { + spr.parent.removeChild( spr ); +} +``` + diff --git a/Engine2D/displayObjecContainer/childen/566143a3d8886.jpg b/Engine2D/displayObjecContainer/childen/566143a3d8886.jpg new file mode 100644 index 0000000..5456031 Binary files /dev/null and b/Engine2D/displayObjecContainer/childen/566143a3d8886.jpg differ diff --git a/Engine2D/displayObjecContainer/childen/566143a4018b9.jpg b/Engine2D/displayObjecContainer/childen/566143a4018b9.jpg new file mode 100644 index 0000000..5456031 Binary files /dev/null and b/Engine2D/displayObjecContainer/childen/566143a4018b9.jpg differ diff --git a/Engine2D/displayObjecContainer/childen/README.md b/Engine2D/displayObjecContainer/childen/README.md new file mode 100644 index 0000000..7f69d12 --- /dev/null +++ b/Engine2D/displayObjecContainer/childen/README.md @@ -0,0 +1,83 @@ +想要获取一个容器的子对象，我们有两种方式可以选择，第一种是通过子对象的深度值来获取子对象，第二种是通过子对象的 name 属性来获取。 + +## 通过深度获取 + +通过深度值获取子对象可以使用 `getChildAt` 方法，具体使用方式如下： + +`容器.getChildAt( 深度值 );` + +我们来看一段示例代码，这段代码中我们向一个容器中存放了两个方块，通过深度来获取其中一个方块，并调整他的透明度。 + +``` +var sprcon:egret.Sprite = new egret.Sprite(); +this.addChild( sprcon ); +sprcon.x = 10; + +var spr1:egret.Sprite = new egret.Sprite(); +spr1.graphics.beginFill( 0xff0000 ); +spr1.graphics.drawRect( 0, 0, 100, 100 ); +spr1.graphics.endFill(); +spr1.x = 50; +spr1.name = "sprite1"; +sprcon.addChild( spr1 ); + +var spr2:egret.Sprite = new egret.Sprite(); +spr2.graphics.beginFill( 0x00ff00 ); +spr2.graphics.drawRect( 0, 0, 100, 100 ); +spr2.graphics.endFill(); +spr2.x = 100; +spr2.y = 50; +spr2.name = "sprite2"; +sprcon.addChild( spr2 ); + +var _spr:egret.DisplayObject = sprcon.getChildAt( 1 ); +_spr.alpha = 0.5; +``` + +编译并运行代码，效果如图： + +![](566143a3d8886.jpg) + +## 通过 Name 获取 + +第二种方式是通过显示对象的 `name` 属性来获取，这种方式更加直接简单。我们来看一下示例代码： + +``` +var sprcon:egret.Sprite = new egret.Sprite(); +this.addChild( sprcon ); +sprcon.x = 10; + +var spr1:egret.Sprite = new egret.Sprite(); +spr1.graphics.beginFill( 0xff0000 ); +spr1.graphics.drawRect( 0, 0, 100, 100 ); +spr1.graphics.endFill(); +spr1.x = 50; +spr1.name = "sprite1"; +sprcon.addChild( spr1 ); + +var spr2:egret.Sprite = new egret.Sprite(); +spr2.graphics.beginFill( 0x00ff00 ); +spr2.graphics.drawRect( 0, 0, 100, 100 ); +spr2.graphics.endFill(); +spr2.x = 100; +spr2.y = 50; +spr2.name = "sprite2"; +sprcon.addChild( spr2 ); + +var _spr:egret.DisplayObject = sprcon.getChildByName( "sprite2" ); +_spr.alpha = 0.5; +``` + +编译并运行代码，效果如图： + +![](566143a4018b9.jpg) + +## 获取方式对比 + +我们通过深度值和 name 属性获取子对象的作用是相同的，但Egret在内部事项原理却大大不同。 + +使用深度值获取子对象，Egret会根据当前容器的显示列表查找指定深度的显示对象，并作为返回值返回给用户。这种检索方式是快速的，不需要进行大量运算。 + +通过name属性来获取子对象，Egret内部首先会对当前容器的所有子对象进行编译，同时匹配相同的name属性值，当发现相同name属性的时候，则将该子对象作为返回值返回给用户。虽然在Egret内部进行了相关算法优化，但还是在一定程度上消耗了一些性能。 + +推荐使用第一种方法，通过深度值来获取子对象。 \ No newline at end of file diff --git a/Engine2D/displayObjecContainer/concept/5565355e688c7.png b/Engine2D/displayObjecContainer/concept/5565355e688c7.png new file mode 100644 index 0000000..94183b7 Binary files /dev/null and b/Engine2D/displayObjecContainer/concept/5565355e688c7.png differ diff --git a/Engine2D/displayObjecContainer/concept/README.md b/Engine2D/displayObjecContainer/concept/README.md new file mode 100644 index 0000000..c6f9448 --- /dev/null +++ b/Engine2D/displayObjecContainer/concept/README.md @@ -0,0 +1,69 @@ +## 概念 + +所有的容器全部继承自 `DisplayObjectContainer` 类，这个名称为 `DisplayObjectContainer` 的类又继承自 `DisplayObject` 。也就是说，在Egret中，所有的容器其实也继承自 `DisplayObject`。 + +在Egret中,`DisplayObjectContainer` 封装了一些显示列表中常用的功能。在后面的内容中，我们将详细介绍显示列表的操作。这些常用操作主要分为四类： + +* 添加、删除子对象 + +* 访问子对象 + +* 检测子对象 + +* 设置叠放次序 + +## Sprite + +在Egret中，我们还有一个其他的容器：`Sprite`。 + +如果你查看Sprite类的内容,你会发现，`Sprite`仅仅是继承 `DisplayObjectContainer`。同时添加了一个Graphics功能。 + +> 关于Graphics功能我们会在矢量绘图部分进行详细讲解。 + +## 自定义容器 + +想要自定义一个容器非常容易，我们编写一个类，并且继承 DisplayObjectContainer 即可。当然，如果你想实现相关的Graphics绘图功能，你也可以继承 Sprite。 + +下面是一个自定义容器类的示例，这里我们定义了一个GridSprite。这个类默认会绘制一个红蓝相间的格子。 + +``` +class GridSprite extends egret.Sprite +{ + public constructor() + { + super(); + this.drawGrid(); + } + + private drawGrid() + { + this.graphics.beginFill( 0x0000ff ); + this.graphics.drawRect( 0, 0, 50,50 ); + this.graphics.endFill(); + + this.graphics.beginFill( 0x0000ff ); + this.graphics.drawRect( 50, 50, 50, 50); + this.graphics.endFill(); + + this.graphics.beginFill( 0xff0000 ); + this.graphics.drawRect( 50, 0, 50,50 ); + this.graphics.endFill(); + + this.graphics.beginFill( 0xff0000 ); + this.graphics.drawRect( 0, 50, 50,50 ); + this.graphics.endFill(); + } +} +``` + +在文档类中，我们实例化 `GridSprite` 即可。 + +``` +var _myGrid:GridSprite = new GridSprite(); +this.addChild( _myGrid ); +``` + +编译运行效果如下： + +![](5565355e688c7.png) + diff --git a/Engine2D/displayObjecContainer/depthManagement/566d13d7e2212.png b/Engine2D/displayObjecContainer/depthManagement/566d13d7e2212.png new file mode 100644 index 0000000..e88e26d Binary files /dev/null and b/Engine2D/displayObjecContainer/depthManagement/566d13d7e2212.png differ diff --git a/Engine2D/displayObjecContainer/depthManagement/566d13d810a78.png b/Engine2D/displayObjecContainer/depthManagement/566d13d810a78.png new file mode 100644 index 0000000..15eee47 Binary files /dev/null and b/Engine2D/displayObjecContainer/depthManagement/566d13d810a78.png differ diff --git a/Engine2D/displayObjecContainer/depthManagement/566d13d822cef.png b/Engine2D/displayObjecContainer/depthManagement/566d13d822cef.png new file mode 100644 index 0000000..a33c4b4 Binary files /dev/null and b/Engine2D/displayObjecContainer/depthManagement/566d13d822cef.png differ diff --git a/Engine2D/displayObjecContainer/depthManagement/566d13d8359d6.png b/Engine2D/displayObjecContainer/depthManagement/566d13d8359d6.png new file mode 100644 index 0000000..2216e6f Binary files /dev/null and b/Engine2D/displayObjecContainer/depthManagement/566d13d8359d6.png differ diff --git a/Engine2D/displayObjecContainer/depthManagement/566d13d84e325.png b/Engine2D/displayObjecContainer/depthManagement/566d13d84e325.png new file mode 100644 index 0000000..7d2dc09 Binary files /dev/null and b/Engine2D/displayObjecContainer/depthManagement/566d13d84e325.png differ diff --git a/Engine2D/displayObjecContainer/depthManagement/566d13d868ed3.png b/Engine2D/displayObjecContainer/depthManagement/566d13d868ed3.png new file mode 100644 index 0000000..8b8a05a Binary files /dev/null and b/Engine2D/displayObjecContainer/depthManagement/566d13d868ed3.png differ diff --git a/Engine2D/displayObjecContainer/depthManagement/566d13d877864.png b/Engine2D/displayObjecContainer/depthManagement/566d13d877864.png new file mode 100644 index 0000000..a49d6a3 Binary files /dev/null and b/Engine2D/displayObjecContainer/depthManagement/566d13d877864.png differ diff --git a/Engine2D/displayObjecContainer/depthManagement/README.md b/Engine2D/displayObjecContainer/depthManagement/README.md new file mode 100644 index 0000000..7d7ae17 --- /dev/null +++ b/Engine2D/displayObjecContainer/depthManagement/README.md @@ -0,0 +1,225 @@ +每一个容器都会有一个自己的深度管理功能，这个深度管理就好像我们排队一样。 + +![](566d13d7e2212.png) + +每一个显示对象在其父级的容器中都应该拥有一个属于自己的深度值，而且这个值相对于同级显示对象应该是唯一的。这个深度值实际上就是一个显示对象的叠放次序。我们也称之为 *“z-次序”*。 + +深度是由每个容器的子对象列表所管理。每个容器都清楚自己拥有多少个子对象。我们可以通过容器的 `numChildren` 属性来获取当前容器的子对象数量。 + +`容器.numChildren` + +在对深度的控制管理中，Egret提供了一些方便有效的深度管理API。下面我们就对深度管理功能做一些介绍。 + +## 深度顺序 + +Egret中容器的深度都是从0开始的，当一个显示对象第一个被添加到容器中时，它的深度值为0。这个显示对象也处于容器的最底层。当我们添加第二个显示对象的时候，他的深度值为1，并且在第一个显示对象上方。如果两个显示对象发生了相交，那么我们可以从视觉上看到，第二个显示对象遮挡住第一个显示对象。 + +下面的示例中，我们创建了两个显示对象，并且让他们发生遮挡，一次来查看显示对象的深度值关系。 + +``` +var spr1:egret.Sprite = new egret.Sprite(); +spr1.graphics.beginFill( 0xff0000 ); +spr1.graphics.drawRect( 0, 0, 100, 100); +spr1.graphics.endFill(); +this.addChild( spr1 ); + +var spr2:egret.Sprite = new egret.Sprite(); +spr2.graphics.beginFill( 0x00ff00 ); +spr2.graphics.drawRect( 0, 0, 80, 80); +spr2.graphics.endFill(); +spr2.x = 50; +spr2.y = 50; +this.addChild( spr2 ); +``` + +运行效果如下： + +![](566d13d810a78.png) + +## 添加/删除指定深度的对象 + +我们默认使用的 `addChild` 方法会默认按照当前子对象深度进行排序，从0开始，每次深度加1，以此类推。 + +当我们想讲某一个显示对象添加到一个指定深度的时候，我们需要使用 `addChildAt` 方法。这个操作很像排队时插队的想象。 + +![](566d13d822cef.png) + +使用 `addChildAt` 方法也非常的容易，具体使用方法如下： + +`容器.addChildAt( 显示对象, 深度值 )` + +我们来看一个具体的演示代码，我们随机绘制四个颜色不同的正方形，将它们依次叠加排列，然后新建一个显示对象，并且放到深度为1的位置。 + +``` +var sprcon:egret.Sprite = new egret.Sprite(); +this.addChild( sprcon ); +sprcon.x = 10; + +for(var i:number = 0; i<4; i++) +{ + var spr:egret.Sprite = new egret.Sprite(); + spr.graphics.beginFill( 0xffffff * Math.random() ); + spr.graphics.drawRect( 0, 0, 100, 100); + spr.graphics.endFill(); + spr.x = i*20; + sprcon.addChild( spr ); +} + +var sprNew:egret.Sprite = new egret.Sprite(); +sprNew.graphics.beginFill( 0xff0000 ); +sprNew.graphics.drawRect( 0, 0, 300, 150 ); +sprNew.graphics.endFill(); +sprNew.x = 10; +sprNew.y = 50; +sprcon.addChildAt( sprNew, 1 ); +``` + +运行效果如图： + +![](566d13d8359d6.png) + +我们不仅仅可以再添加显示对象时指定显示对象的深度，在删除显示对象时依然可以通过深度来进行控制。 + +我们可以使用 容器.removeChild( 显示对象 ) 将一个显示对象移除显示列表，同样，还可以使用 + +容器.removeChildAt( 深度值 ) 来删除一个指定深度的显示对象。 + +我们通过上上面示例代码的修改，将深度值为2的显示对象移除显示列表。 + +``` +var sprcon:egret.Sprite = new egret.Sprite(); +this.addChild( sprcon ); +sprcon.x = 10; + +for(var i:number = 0; i<4; i++) +{ + var spr:egret.Sprite = new egret.Sprite(); + spr.graphics.beginFill( 0xffffff * Math.random() ); + spr.graphics.drawRect( 0, 0, 100, 100); + spr.graphics.endFill(); + spr.x = i*20; + sprcon.addChild( spr ); +} + +var sprNew:egret.Sprite = new egret.Sprite(); +sprNew.graphics.beginFill( 0xff0000 ); +sprNew.graphics.drawRect( 0, 0, 300, 150 ); +sprNew.graphics.endFill(); +sprNew.x = 10; +sprNew.y = 50; +sprcon.addChildAt( sprNew, 1 ); + +sprcon.removeChildAt( 2 ); +``` + +运行效果如下： + +![](566d13d84e325.png) + +有时候我们想一次性将一个容器内的所有子对象全部删除，那么我们不需要使用复杂的遍历操作来想子对象一一删除，例如： + +``` +var numChild:number = sprcon.numChildren; +for(var t:number = 0; t 注意：如果对位图进行缩放或拉伸，图像会发生模糊。 + +图3中展示了关于透明度的操作。显示对象的默认透明度为"1"，表示完全不透明，通过 alpha 属性访问修改透明度。alpha取值范围为 0-1。示例代码如下： + +```javascript +var shape:egret.Shape = new egret.Shape(); +shape.alpha = 0.4; +``` + +图4中展示了显示对象的旋转操作，旋转角度可通过 rotation 属性访问修改。将图中的矩形旋转30°，示例代码如下： + +```javascript +var shape:egret.Shape = new egret.Shape(); +shape.rotation = 30; +``` + +上图展示了显示对象中常用的可视属性，下面列表是显示对象的全部可视属性。 + +* alpha：透明度 +* width：宽度 +* height：高度 +* rotation：旋转角度 +* scaleX：横向缩放 +* scaleY：纵向缩放 +* skewX：横向斜切 +* skewY：纵向斜切 +* visible：是否可见 +* x：X轴坐标值 +* y：Y轴坐标值 +* anchorOffsetX：对象绝对锚点X +* anchorOffsetY：对象绝对锚点Y + +### 3.核心显示类 + +不同的内容对应不同的显示对象，Egret 中一共封装了8个显示相关的核心类，如下表。 + +| 类 | 描述 | +| --- | --- | +| DisplayObject | 显示对象基类，所有显示对象均继承自此类 | +| Bitmap | 位图，用来显示图片 | +| Shape | 用来显示矢量图，可以使用其中的方法绘制矢量图形 | +| TextField | 文本类 | +| BitmapText | 位图文本类 | +| DisplayObjectContainer | 显示对象容器接口，所有显示对象容器均实现此接口 | +| Sprite | 带有矢量绘制功能的显示容器 | +| Stage | 舞台类 | + +### 4.自定义显示对象类 + +自定义显示对象类需要继承自 `DisplayObject`的具体子类，例如`Shape`或者`TextField`。 + +示例代码如下： + +* 创建 +创建一个名称为 `MyGrid` 的类，并且继承自 `Shape` 。具体代码如下： + +```javascript +class MyGrid extends egret.Shape{ + public constructor(){ + super(); + this.drawGrid(); + } + + private drawGrid(){ + this.graphics.beginFill( 0x0000ff ); + this.graphics.drawRect( 0, 0, 50,50 ); + this.graphics.endFill(); + + this.graphics.beginFill( 0x0000ff ); + this.graphics.drawRect( 50, 50, 50, 50); + this.graphics.endFill(); + + this.graphics.beginFill( 0xff0000 ); + this.graphics.drawRect( 50, 0, 50,50 ); + this.graphics.endFill(); + + this.graphics.beginFill( 0xff0000 ); + this.graphics.drawRect( 0, 50, 50,50 ); + this.graphics.endFill(); + } +} +``` + +在 `MyGrid` 中绘制了一个红蓝相间的2*2格子，然后修改文档类`Main`，在文档类中创建并显示 `MyGrid`类的实例，具体代码如下： + + +```javascript +class Main extends egret.DisplayObjectContainer{ + public constructor(){ + super(); + this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this); + } + + private onAddToStage(event:egret.Event){ + var _myGrid:MyGrid = new MyGrid(); + this.addChild( _myGrid ); + } +} +``` + +* 效果 +编译并测试，在浏览器中看到如下图的效果。 + +![](556534d84ca7f.png) + +## 显示容器 +### 1.基本概念 +所有的显示容器全部继承自 `DisplayObjectContainer` 类，该类继承自 `DisplayObject` 。也就是说，在Egret中，所有的容器都继承自 `DisplayObject`。 + +在Egret中,`DisplayObjectContainer` 封装了一些显示列表中常用的功能，将在后面文档中详细介绍。这些常用操作主要分为四类： + +* 添加、删除子对象 + +* 访问子对象 + +* 检测子对象 + +* 设置叠放次序 + +>在Egret中，显示对象被分为两大类：一种是可以包括其他显示对象的显示对象容器，简称为“容器”。另外一种是单纯的显示对象，除自身以外不能包括其他显示对象，简称“非容器对象”。 + +### 2.Sprite + +在Egret中，`Sprite`是一个常用的容器。 + +`Sprite`继承自 `DisplayObjectContainer`，同时添加了Graphics功能。 + +> 关于Graphics功能，会在矢量绘图部分进行详细讲解。 + +### 3.自定义容器 + +自定义容器，可编写一个类，继承 `DisplayObjectContainer` 。如果要同时实现Graphics绘图功能，可继承 `Sprite`。 + +下面是一个自定义容器类的示例，该示例定义了一个`GridSprite`类。这个类默认绘制一个红蓝相间的格子。 + +```javascript +class GridSprite extends egret.Sprite +{ + public constructor() + { + super(); + this.drawGrid(); + } + + private drawGrid() + { + this.graphics.beginFill( 0x0000ff ); + this.graphics.drawRect( 0, 0, 50,50 ); + this.graphics.endFill(); + + this.graphics.beginFill( 0x0000ff ); + this.graphics.drawRect( 50, 50, 50, 50); + this.graphics.endFill(); + + this.graphics.beginFill( 0xff0000 ); + this.graphics.drawRect( 50, 0, 50,50 ); + this.graphics.endFill(); + + this.graphics.beginFill( 0xff0000 ); + this.graphics.drawRect( 0, 50, 50,50 ); + this.graphics.endFill(); + } +} +``` + +在文档类中，实例化 `GridSprite` 即可。 + +```javascript +var _myGrid:GridSprite = new GridSprite(); +this.addChild( _myGrid ); +``` + +编译运行效果如下： + +![](5565355e688c7.png) + + +## 显示列表 +显示列表用来管理和组织容器和非容器对象，当某个显示对象处在显示列表中，就可以在画面中看到该对象。当显示对象从显示列表中移除后，该对象从画面中消失。 + +在Egret内部维护着一个显示列表，开发者无需关心该列表是如何运行，只需对自己的显示对象进行相应的操作。下面以一个例子说明显示列表的工作方式。 + +表达下图所示的场景 + +![](5565305cb440c.png) + +* 明确显示对象层级架构 + +在实际的操作中，可以把显示列表看成树状结构。 + +在这个树状结构中，处于最上层的是“舞台”。对应到程序中，是 `stage` 对象。舞台是Egret显示架构中最根本的显示容器。每个Egret应有且只有一个`stage`对象。舞台是这个显示树结构的根节点。 + +在舞台中，我们还拥有一个主容器。这个容器就是文档类所创建的容器。每一个Egret都会拥有一个文档类，这个文档类必须是一个显示对象容器。 + +在这个场景中，包含了一个场景背景，背景是由背景图和一颗大树组成的。另外两个元素分别是人物和草地。其树状结构如下图： + +![](5565305cb55a6.png) + +上面的树状结构图就是Egret的“显示列表”。 diff --git a/Engine2D/displayObject/resetDepth/README.md b/Engine2D/displayObject/resetDepth/README.md new file mode 100644 index 0000000..95ce1e4 --- /dev/null +++ b/Engine2D/displayObject/resetDepth/README.md @@ -0,0 +1,37 @@ +重设子对象深度有2种方法:[使用 setChildIndex ](../depthManagement/README.md#4重设子对象深度)和使用 zIndex. + +从 Egret 5.2.24 版本开始，`DisplayObject` 中新增加了一个 `zIndex` 属性，可以设置对象的 Z 轴顺序。该值越大，越靠近顶部。 + +在 PC 的 Chrome 浏览器和安卓系统中，`zIndex` 的效率比 `setChildIndex` 高很多。极限测试时可以达到10倍以上。 + +在 iOS 系统中，两种方式的效率基本一致，没有很大区别，这跟系统浏览器的内核有关。 + +**注意，要给一个对象使用 zIndex，包含此显示对象的 DisplayObjectContainer 对象一定要设置 sortableChildren = true，开启排序功能，否则设置 zIndex 是无效的** + +```javascript +let container = new egret.Sprite(); +container.sortableChildren = true;//注意，一定要设置为true +this.addChild(container); + +let texture: egret.Texture = RES.getRes('bird_png'); + +let b1 = new egret.Bitmap(); +b1.texture = texture; +b1.x = 100; +this.addChild(b1) + +let b2 = new egret.Bitmap(); +b2.texture = texture; +b2.x = 270; +this.addChild(b2) + +let b3 = new egret.Bitmap(); +b3.texture = texture; +b3.x = 440; +this.addChild(b3) + + +b2.zIndex = 3;//将第二个图片设置到顶部 +``` +![](./p1.png) + diff --git a/Engine2D/displayObject/resetDepth/p1.png b/Engine2D/displayObject/resetDepth/p1.png new file mode 100644 index 0000000..b17f3c8 Binary files /dev/null and b/Engine2D/displayObject/resetDepth/p1.png differ diff --git a/Engine2D/displayObject/transform/556535128a4a2.png b/Engine2D/displayObject/transform/556535128a4a2.png new file mode 100644 index 0000000..c82e04b Binary files /dev/null and b/Engine2D/displayObject/transform/556535128a4a2.png differ diff --git a/Engine2D/displayObject/transform/556535128b8ba.png b/Engine2D/displayObject/transform/556535128b8ba.png new file mode 100644 index 0000000..4375a3b Binary files /dev/null and b/Engine2D/displayObject/transform/556535128b8ba.png differ diff --git a/Engine2D/displayObject/transform/README.md b/Engine2D/displayObject/transform/README.md new file mode 100644 index 0000000..babbf8e --- /dev/null +++ b/Engine2D/displayObject/transform/README.md @@ -0,0 +1,210 @@ + +## 1.锚点的操作 +每个显示对象都包含一个锚点,锚点默认位于显示对象的左上角。 + +当设置一个显示对象的坐标位置时,会以锚点为参照改变显示对象的绘图位置。同时,锚点相对于显示对象的位置也是可以改变的。 + +### 默认锚点 + +```javascript +class AnchorTest extends egret.DisplayObjectContainer +{ + public constructor() + { + super(); + this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this); + } + + private onAddToStage(event:egret.Event) + { + var shp:egret.Shape = new egret.Shape(); + shp.graphics.beginFill( 0x00ff00 ); + shp.graphics.drawRect( 0, 0, 100, 100 ); + shp.graphics.endFill(); + shp.x = 100; + shp.y = 100; + this.addChild( shp ); + } +} +``` + +上面的代码中，绘制了一个绿色的正方形，锚点默认在正方形的左上角位置，通过设置 `shp` 的 `x`、`y`属性来改变正方形的位置。 + +效果如下图： + +![](556535128a4a2.png) + +### 修改锚点 + +可通过`anchorOffsetX`和 `anchorOffsetY`属性访问修改锚点的位置。 + +修改上例锚点的位置，让锚点居于正方形左上角x轴 50 像素的位置，代码如下： + +```javascript +shp.anchorOffsetX = 50; +``` + +再次编译项目并测试，效果如下： + +![](556535128b8ba.png) + +可以看到，绿色正方形位置依然是x：100，y：100。但实际效果中，正方形的位置和上一张图中的位置有明显的差异。这是因为修改了锚点的位置。 + +## 2.位置和平移 + +### 位置 +通过的 x 和 y 属性可访问修改显示对象的位置。 + +``` javascript +container.x = 17; +container.y = 212; +``` + +显示对象定位系统将舞台视为一个笛卡尔坐标系（带有水平 x 轴和垂直 y 轴的常见网格系统）。坐标系的原点（x 和 y 轴相交的 0,0 坐标）位于舞台的左上角。从原点开始，x 轴的值向右为正，向左为负，而 y 轴的值向下为正，向上为负（与典型的图形系统相反）。例如，通过前面的代码行可以将对象 container 移到 x 轴坐标 17（原点向右 17 个像素）和 y 轴坐标 212（原点向下 212 个像素）。 + +默认创建显示对象时，x 和 y 属性均设置为 0，对象在其父容器的左上角。 + +### 本地坐标和舞台坐标 + +x 和 y 属性始终是指显示对象相对于其父显示对象坐标轴的 (0,0) 坐标的位置。因此，对于包含在 DisplayObjectContainer 实例内的 Shape 实例（如圆），如果将 Shape 对象的 x 和 y 属性设置为 0，会将圆放在 DisplayObjectContainer 的左上角，但该位置不一定是舞台的左上角。若要确定对象相对于全局舞台坐标的位置，可以使用任何显示对象的 globalToLocal() 方法将坐标从全局（相对于舞台）坐标转换为本地（相对于显示对象容器）坐标，如下所示： + +```javascript +//创建一个空的 DisplayObjectContainer，把它的 x 和 y 坐标都改为 +var container: egret.DisplayObjectContainer = new egret.DisplayObjectContainer(); +container.x = 200; +container.y = 200; +this.addChild(container); + +//画一个红色的圆，添加到 container 中 +var circle: egret.Shape = new egret.Shape(); +circle.graphics.beginFill(0xff0000); +circle.graphics.drawCircle(25,25,25); +circle.graphics.endFill(); +container.addChild(circle); + +//给圆增加点击事件 +circle.touchEnabled = true; +circle.addEventListener(egret.TouchEvent.TOUCH_TAP,onClick,this); + +function onClick():void{ + //把舞台左上角的坐标(0,0)转换为 container 内部的坐标 + var targetPoint: egret.Point = container.globalToLocal(0,0); + //重新定位圆，可以看到圆形移到了屏幕的左上角 + circle.x = targetPoint.x; + circle.y = targetPoint.y; +} +``` + +同样，也可以使用 DisplayObject 类的 localToGlobal() 方法将本地坐标转换为舞台坐标。 + +### 平移 + +通过触摸移动显示对象，示例代码如下： + +当手指按到屏幕时监听 TOUCH_MOVE 事件，每次手指移动时调用`onMove()`函数，使拖动的对象跳到手指所在的x,y坐标。当手指离开屏幕后取消监听，对象停止跟随。 + +```javascript +//设定2个偏移量 +var offsetX:number; +var offsetY:number; + +//画一个红色的圆 +var circle: egret.Shape = new egret.Shape(); +circle.graphics.beginFill(0xff0000); +circle.graphics.drawCircle(25,25,25); +circle.graphics.endFill(); +this.addChild(circle); + +//手指按到屏幕，触发 startMove 方法 +circle.touchEnabled = true; +circle.addEventListener(egret.TouchEvent.TOUCH_BEGIN,startMove,this); + +//手指离开屏幕，触发 stopMove 方法 +circle.addEventListener(egret.TouchEvent.TOUCH_END,stopMove,this); + +function startMove(e:egret.TouchEvent):void{ + //计算手指和圆形的距离 + offsetX = e.stageX - circle.x; + offsetY = e.stageY - circle.y; + //手指在屏幕上移动，会触发 onMove 方法 + this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE,onMove,this); +} + +function stopMove(e:egret.TouchEvent) {console.log(22); + //手指离开屏幕，移除手指移动的监听 + this.stage.removeEventListener(egret.TouchEvent.TOUCH_MOVE,onMove,this); +} +function onMove(e:egret.TouchEvent):void{ + //通过计算手指在屏幕上的位置，计算当前对象的坐标，达到跟随手指移动的效果 + circle.x = e.stageX - offsetX; + circle.y = e.stageY - offsetY; +} +``` + +## 3.尺寸和缩放 + +有两种方式可测量和操作显示对象的大小：尺寸属性（width 和 height）或缩放属性（scaleX 和 scaleY）。 + +### 尺寸 +尺寸属性 `width` 和 `height` 最初设置为对象的大小，以像素为单位。可以通过读取这些属性的值来确定显示对象的大小,也可以指定新值来更改对象的大小，如下所示： + +``` javascript +//设定对象的大小 +mySprite.width = 50; +mySprite.height = 100; +``` +更改显示对象的 height 或 width 会导致缩放对象。 + +### 缩放 + +通过缩放属性 `scaleX` 和 `scaleY` 可以等比更改显示对象的大小，如下面代码: + +```javascript +//设定对象的大小 +mySprite.scaleX = 2; +mySprite.scaleY = 2; +``` + +将显示对象的宽和高同时放大了2倍。缩放是相对于显示对象的锚点进行的。 + +## 4.旋转 + +使用 `rotation` 属性可以旋转显示对象，将其设置为一个数字（以度为单位），表示要应用于该对象的旋转量，正数为顺时针，负数为逆时针。旋转是相对于显示对象的锚点进行的。 + +下面代码使 `mySprit` 以锚点为圆心，顺时针旋转45°。 + +```javascript +//把对象旋转 45 度（一整周旋转的 1/8） +mySprite.rotation = 45; +``` + +## 5.斜切 + +斜切是对图像在2D空间进行的一种平行矩阵变形。 + +斜切可从两个方向进行控制，对X方向的斜切将导致矩形的底边在X方向发生相应的偏移。 + +![skewX_compare][] + +如上图所示，是对白鹭小鸟进行X方向斜切10所达到的结果。左边是未变形的原始图片，右边是变形后的图片。 + +```javascript +//设定对象的X方向斜切 +mySprite.skewX = 10; +``` + +同理，对Y方向的斜切将导致矩形的右侧边在Y方向发生相应的偏移。 + +![skewY_compare][] + +如上图所示，是对白鹭小鸟进行Y方向斜切10所达到的结果。 + +[skewX_compare]: skewX_compare.png +[skewY_compare]: skewY_compare.png + +```javascript +//设定对象的Y方向斜切 +mySprite.skewY = 10; +``` + +在适当的动画呈现场合使用斜切变形，可以在不增加图片资源的前提下实现灵活而有趣的效果。 diff --git a/Engine2D/displayObject/transform/skewX_compare.png b/Engine2D/displayObject/transform/skewX_compare.png new file mode 100644 index 0000000..6b6ad04 Binary files /dev/null and b/Engine2D/displayObject/transform/skewX_compare.png differ diff --git a/Engine2D/displayObject/transform/skewY_compare.png b/Engine2D/displayObject/transform/skewY_compare.png new file mode 100644 index 0000000..0770625 Binary files /dev/null and b/Engine2D/displayObject/transform/skewY_compare.png differ diff --git a/Engine2D/event/event/README.md b/Engine2D/event/event/README.md new file mode 100644 index 0000000..27f817f --- /dev/null +++ b/Engine2D/event/event/README.md @@ -0,0 +1,37 @@ +Event类是所有事件类的基类。当创建一个自定义事件的时候，事件应该继承自Event类。同时Event类也包含一些事件。这些事件通常与显示列表，显示对象的状态有关。 + +在使用Event类时，有以下几个属性与方法需要注意。 + +* 首先是构造函数中的三个参数，`type`、`bubbles`和`cancelable`。 + + * `type`指定事件的类型，在“约会”的例子中，`type`事件类型为“DATE”。我们经常使用的事件类型有“ADDED”、“COMPLETE”等。 + + * `bubbles`是指定事件是否参与事件流的冒泡阶段，关于事件流，会在后面的小节中介绍。 + + * `cancelable`表示是否可以取消与事件关联的默认动作。 + +* 另外还需要关注的属性是`target`，这个属性表示事件的目标，也就是事件的发送者。其他的一些方法都与事件流有关，后面的内容会进行详细介绍。 + +### 自定义事件 + +通常情况下，游戏中都会编写一些自定义事件，在上一小节中，已经编写过一个“约会”的自定义事件了，下面是详细代码。 + +```javascript +class DateEvent extends egret.Event +{ + public static DATE:string = "约会"; + public _year:number = 0; + public _month:number = 0; + public _date:number = 0; + public _where:string = ""; + public _todo:string = ""; + public constructor(type:string, bubbles:boolean=false, cancelable:boolean=false) + { + super(type,bubbles,cancelable); + } +} +``` + +上述自定义事件类`DateEvent`继承自 `egret.Event` 类。同时定义一个名称为 `DATE` 的属性，该属性为静态属性，类型为字符串。 + +上述自定义事件定义了一些事件中所需要的数据，这些数据包括日期，地点，做什么。在自定义事件类的时候，开发者可以根据自己的需要来定义事件类型和事件数据。 diff --git a/Engine2D/event/listener/README.md b/Engine2D/event/listener/README.md new file mode 100644 index 0000000..c203fb9 --- /dev/null +++ b/Engine2D/event/listener/README.md @@ -0,0 +1,65 @@ +事件侦听器也就是事件的处理者，负责接收事件携带的信息，并在接收到该事件后执行特定的代码。 + +Egret中，事件的侦听器必须是一个函数。事件的发送者必须是 `egret.EventDispatcher` 类或者子类的实例。只有事件发送者才能侦听事件，并且可以注册侦听器。 + +侦听事件分为两个部分，第一是建立侦听器，侦听器可以是独立的函数，也可以是某一个对象的方法。第二步是注册侦听器，使用事件发送者的 `addEventListener()` 将相应的事件分配给侦听器。 + +下面是注册侦听函数的定义。 + +```javascript +public addEventListener(type:string, listener:Function, thisObject:any, useCapture:boolean = false, priority:number = 0) +``` + + +* `type`：事件类型，必选。 + +* `listener`：用来处理事件的侦听器，必选。 + +* `thisObject`：作用域，必选，一般填写this。因为TypeScript与JavaScript的this作用域不同，其this指向也会不同。如果不填写this的话，那么编译后的代码会发生错误。 关于this的问题，可以学习JavaScript中的原型链。 + +* `useCapture`: 确定侦听器是运行于捕获阶段还是运行于冒泡阶段，可选。设置为 true，则侦听器只在捕获阶段处理事件，而不在冒泡阶段处理事件。设置为 false，则侦听器只在冒泡阶段处理事件。 + +* `priority`： 事件侦听器的优先级，可选。优先级由一个带符号的整数指定。数字越大，优先级越高。优先级为 n 的所有侦听器会在优先级为 n -1 的侦听器之前得到处理。如果两个或更多个侦听器共享相同的优先级，则按照它们的添加顺序进行处理。默认优先级为 0。 + +### 1.创建侦听器 + +侦听器必须是函数，它可以是一个独立函数，也可以是一个实例的方法。侦听器必须有一个参数，并且这个参数必须是 Event 类实例或其子类的实例， 同时，侦听器的返回值必须为空（void）。范例代码如下： + +```javascript +listenerName(evt:Event):void {...} +``` + +### 2.注册侦听器与移除侦听器 + +只有事件的发送者才可以注册侦听器，事件的发送者必须是 `EventDispatcher` 类或其子类的实例。移除侦听器也同理，通常情况下，注册侦听器与移除侦听器都是成对出现。 + +注册侦听器 + +```javascript +事件发送者.addEventListener(事件类型, 侦听器, this); +``` + +移除侦听器 + +```javascript +事件发送者.removeEventListener(事件类型, 侦听器, this); +``` + +### 3.检测侦听器 + +如果需要在逻辑中检测某一个事件发送者是否注册了侦听器，有两个方法可以使用。 一个是 `hasEventListener` ,另外一个是 `willTrigger` 。两个方法执行效果相同，都是判断一个事件发送者是否注册了某一个类型的事件。 + +如果该事件类型已经被注册过，返回 `true`，如果没有被注册过，返回 `false`。 + +```javascript +事件发送者.hasEventListener(事件类型); +``` + +### 4.TouchEvent的启动开关 + +TouchEvent的启动开关 `touchEnabled` 指定此对象是否接收触摸或其他用户输入。默认值为 false，实例将不接收任何触摸事件（或其他用户输入事件）。如果将 `touchEnabled`设置为 true，则显示对象实例将会接收触摸事件或其他用户输入事件。要更改显示对象的所有子级的 touchEnabled 行为，请使用 `DisplayObjectContainer.touchChildren`。 + +实际使用过程，如果某些显示对象需要侦听TouchEvent，请先打开： +```javascript +显示对象实例.touchEnabled = true; +``` diff --git a/Engine2D/event/principle/566143cb47133.png b/Engine2D/event/principle/566143cb47133.png new file mode 100644 index 0000000..10d028b Binary files /dev/null and b/Engine2D/event/principle/566143cb47133.png differ diff --git a/Engine2D/event/principle/README.md b/Engine2D/event/principle/README.md new file mode 100644 index 0000000..7b437f0 --- /dev/null +++ b/Engine2D/event/principle/README.md @@ -0,0 +1,21 @@ +Egret中的事件机制是一套业内标准的事件处理架构。所提供的事件模式也非常的清晰、强大和高效。 + +在Egret中，事件模型定义了一套标准的生成和处理事件消息的方法，使程序中的对象可以相互交互，通信，保持自身状态和相应变化。简单的说，数据的提供者只管发出数据对象，只要确保数据对象是 `egret.Event` 类或者子类的实例即可。这种数据对象 ，称为`事件（Event）`。数据对象的发出者，称之为事件`发送者（Event dispatcher）`。同时，接受事件的对象，称为 `事件侦听者（Event listener)`。 + +以下是一个简单的例子。 + +当我们想要和男（女）朋友约会的时候，通常都会有一个约会的发起者，同时还有个一个约会对象。那么这个邀请过程，就是一个典型的事件过程。 + +这个过程请见下图： + +![](566143cb47133.png) + +男朋友是事件`发送者`，邀请约会就是男朋友发送的`事件`。而女朋友就是`事件侦听器`。 + +这个事件，包含三条主要内容：事件的类型，事件的目标，事件的相关数据。事件的类型就是邀请约会，女朋友会 根据事件的不同，来执行不同的任务。比如，事件是“邀请约会”，那么女朋友可能会执行，梳妆打扮，然后赴约。如果事件 是“肚子饿了”，那么女朋友会执行买菜做饭。 + +事件的`目标`，就是事件的发送者。如果没有这个信息，那么女朋友接到事件后，就无法知道是谁要约她，或者是谁饿了。 + +事件的`数据`，就是事件所要包含的信息。上面的约会事件中，事件的信息可以包括事件，地点，干什么。同理，“肚子饿了”这个事件，要包含的信息是想吃些什么，在家里吃还是去外面吃等等。当然，也有一些事件是不包含信息的，例如“捶背”，事件 接受者只要收到这个事件，直接执行就可以了。 + +根据上面这个例子，可以进一步了解Egret中的事件执行流程了。 diff --git a/Engine2D/event/priority/README.md b/Engine2D/event/priority/README.md new file mode 100644 index 0000000..5e7b436 --- /dev/null +++ b/Engine2D/event/priority/README.md @@ -0,0 +1,8 @@ +通过制定事件的优先级来设置事件侦听器的执行顺序。 + +可以在注册侦听器的时候制定事件的优先级。 +```javascript +public addEventListener(type:string, listener:Function, thisObject:any, useCapture:boolean = false, priority:number = 0) +``` + +制定优先级需要设置 `priority` 属性。该属性为一个number类型，当数字越大，则优先级越大。在触发事件的时候优先级越高，越先执行。 diff --git a/Engine2D/event/process/566143f9ec1bc.png b/Engine2D/event/process/566143f9ec1bc.png new file mode 100644 index 0000000..fc2152f Binary files /dev/null and b/Engine2D/event/process/566143f9ec1bc.png differ diff --git a/Engine2D/event/process/README.md b/Engine2D/event/process/README.md new file mode 100644 index 0000000..54ff2d8 --- /dev/null +++ b/Engine2D/event/process/README.md @@ -0,0 +1,99 @@ +事件机制包含4个步骤：注册侦听器，发送事件，侦听事件，移除侦听器。这四个步骤是按照顺序来执行的。 + +注册侦听器，即指定事件由哪个对象的哪个方法来接受。在上一节约会的例子中，我们指定由男朋友来发送事件，由女朋友来接受事件。 + +只有在注册侦听器后，发送的事件才能被侦听。而且发送的事件必须和侦听器事件的类型匹配。在发送事件后，侦听器才能侦听到事件。 + +下面通过实例展示“约会”这个事件发送过程，以及代码编写过程。 + +### 文档类 + +```javascript +class SampleDate extends egret.DisplayObjectContainer +{ + public constructor() + { + super(); + + //创建一个男朋友 + var boy:Boy = new Boy(); + boy.name = "男朋友"; + //创建一个女朋友 + var girl:Girl = new Girl(); + girl.name = "女朋友"; + //注册侦听器 + boy.addEventListener(DateEvent.DATE,girl.getDate,girl); + //男朋友发送要求 + boy.order(); + //约会邀请完成后，移除侦听器 + boy.removeEventListener(DateEvent.DATE,girl.getDate,girl); + } +} +``` + +### 男朋友类 + +```javascript +class Boy extends egret.Sprite +{ + public constructor() + { + super(); + } + public order() + { + //生成约会事件对象 + var daterEvent:DateEvent = new DateEvent(DateEvent.DATE); + //添加对应的约会信息 + daterEvent._year = 2014; + daterEvent._month = 8; + daterEvent._date = 2; + daterEvent._where = "肯德基"; + daterEvent._todo = "共进晚餐"; + //发送要求事件 + this.dispatchEvent(daterEvent); + } +} +``` + +### 女朋友类 + +```javascript +class Girl extends egret.Sprite +{ + public constructor() + { + super(); + } + + public getDate(evt:DateEvent) + { + console.log("得到了" + evt.target.name + "的邀请！" ); + console.log("会在" + evt._year + "年" + evt._month + "月" + evt._date + "日，在"+ evt._where+ evt._todo); + } +} +``` + +### 约会事件类 + +```javascript +class DateEvent extends egret.Event +{ + public static DATE:string = "约会"; + public _year:number = 0; + public _month:number = 0; + public _date:number = 0; + public _where:string = ""; + public _todo:string = ""; + + public constructor(type:string, bubbles:boolean=false, cancelable:boolean=false) + { + super(type,bubbles,cancelable); + } +} +``` + +编译并运行，效果如图： + +![](566143f9ec1bc.png) + diff --git a/Engine2D/event/touchEvent/568e5eb1eef1f.png b/Engine2D/event/touchEvent/568e5eb1eef1f.png new file mode 100644 index 0000000..0cc0dab Binary files /dev/null and b/Engine2D/event/touchEvent/568e5eb1eef1f.png differ diff --git a/Engine2D/event/touchEvent/568e5eb20e0fe.png b/Engine2D/event/touchEvent/568e5eb20e0fe.png new file mode 100644 index 0000000..29a95f2 Binary files /dev/null and b/Engine2D/event/touchEvent/568e5eb20e0fe.png differ diff --git a/Engine2D/event/touchEvent/README.md b/Engine2D/event/touchEvent/README.md new file mode 100644 index 0000000..f5ed489 --- /dev/null +++ b/Engine2D/event/touchEvent/README.md @@ -0,0 +1,131 @@ +### 1.触摸事件 +对于移动游戏，触摸事件是最常用的用户交互事件类型。Egret 为触摸事件设置了专门的触摸事件类`egret.TouchEvent`。 + +其包含的事件类型主要有： +* TOUCH_BEGIN：当用户第一次触摸启用触摸的设备时（例如，用手指触摸配有触摸屏的移动电话或平板电脑）触发 +* TOUCH_CANCEL：由于某个事件取消了触摸时触发 +* TOUCH_END：当用户移除与启用触摸的设备的接触时（例如，将手指从配有触摸屏的移动电话或平板电脑上抬起）触发 +* TOUCH_MOVE：当用户触碰设备并移动时进行触发，而且会连续触发，直到接触点被删除 +* TOUCH_TAP：当用户在触摸设备上与开始触摸的同一 DisplayObject 实例上抬起接触点时触发（相当与点击事件） + +在Egret中使用触摸事件时，需要打开显示对象的触摸事件开关，即将该显示对象的`touchEnabled`属性设置为`true`。代码示例如下： + +```javascript +class TouchEventTest extends egret.DisplayObjectContainer +{ + public constructor() + { + super(); + this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this); + } + private onAddToStage(event:egret.Event) + { + //添加显示文本 + this.drawText(); + //绘制一个透明度为1的绿色矩形，宽高为100*80 + var spr1:egret.Sprite = new egret.Sprite(); + spr1.graphics.beginFill(0x00ff00, 1); + spr1.graphics.drawRect(0, 0, 100, 80); + spr1.graphics.endFill(); + spr1.width = 100; + spr1.height = 80; + this.addChild( spr1 ); + //设置显示对象可以相应触摸事件 + spr1.touchEnabled = true; + //注册事件 + spr1.addEventListener( egret.TouchEvent.TOUCH_TAP, this.onTouch, this ); + this.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onTouchTap, this); + this.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onTouchTaps, this, true); + } + private onTouch( evt:egret.TouchEvent ) + { + this.txt.text += "\n点击了spr1"; + } + private onTouchTap( evt:egret.TouchEvent ) + { + this.txt.text += "\n容器冒泡侦听\n---------"; + } + private onTouchTaps( evt:egret.TouchEvent ) + { + this.txt.text += "\n容器捕获侦听"; + } + //绘制文本 + private txt:egret.TextField; + private drawText():void + { + this.txt = new egret.TextField(); + this.txt.size = 12; + this.txt.x = 250; + this.txt.width = 200; + this.txt.height = 200; + this.txt.text = "事件文字"; + this.addChild( this.txt ); + } +} +``` + +### 2.取消触摸事件 + +取消触摸事件，在由于某个事件 取消了触摸 时触发。 + +以点击事件为例，一个点击的流程一般会触发3个 touch 事件：`TouchBegin` 触摸开始，`TouchEnd` 触摸结束，`TouchTap` 点击。 + +在某些特殊情况，比如 EUI 中的 `Scroller` 滚动列表，当手指点中它后，首先抛出一个 `TouchBegin`，如果此时没有滚动，直接离开屏幕，那么还是原来标准的流程，抛出 `TouchEnd` 和 `TouchTap`。但是当手指滚动它以后，则会抛出一个 `TouchCancel` 事件，而后续的 `TouchEnd` 和 `TouchTap` 事件就不会被触发了。 + +下面是一个示例代码，创建一个滚动列表并增加监听 + +~~~javascript +var scroller = new eui.Scroller(); +var list = new eui.List(); +list.itemRendererSkinName = ` + ` +var ac = new eui.ArrayCollection([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]); +list.dataProvider = ac; +scroller.viewport = list; +scroller.height = 200; +this.addChild(scroller); + +scroller.addEventListener(egret.TouchEvent.TOUCH_BEGIN,()=>{console.log("111 Scroller Begin")},this); +list.addEventListener(egret.TouchEvent.TOUCH_BEGIN,()=>{console.log("111 List Begin")},this); + +scroller.addEventListener(egret.TouchEvent.TOUCH_END,()=>{console.log("222 Scroller END")},this); +list.addEventListener(egret.TouchEvent.TOUCH_END,()=>{console.log("222 List END")},this); + +scroller.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{console.log("33 Scroller Tap")},this); +list.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{console.log("33 List Tap")},this); + +scroller.addEventListener(egret.TouchEvent.TOUCH_CANCEL,()=>{console.log("44 Scroller cancel")},this); +list.addEventListener(egret.TouchEvent.TOUCH_CANCEL,()=>{console.log("44 List cancel")},this); +~~~ + + +当没有滚动，点击列表后，会依次抛出以下事件。 + +~~~javascript +111 List Begin +111 Scroller Begin +222 List END +222 Scroller END +33 List Tap +33 Scroller Tap +~~~ + +![](568e5eb1eef1f.png) + +上图为点击后的样子 + +当滚动 `scroller` 以后，会抛出 `TouchCancel`，后续的 touch 事件不会被触发。 + +~~~javascript +111 List Begin +111 Scroller Begin +44 List cancel +44 Scroller cancel +~~~ + +![](568e5eb20e0fe.png) + +另外 `TouchCancel` 触发以后，说明触摸被取消了，本次触摸被选中的选项条也会恢复成选中前的状态。 diff --git a/Engine2D/facebookInstantGames/README.md b/Engine2D/facebookInstantGames/README.md new file mode 100644 index 0000000..cac2fff --- /dev/null +++ b/Engine2D/facebookInstantGames/README.md @@ -0,0 +1,364 @@ +# Facebook Instant Games 开发快速指南 + +开发者可以基于现有的Egret HTML5游戏迁移到Facebook Instant Games平台，也可以开发全新针对于Facebook Instant Games平台的HTML5游戏。 + +本指南旨在带领开发者快速使用Egret工具提交并测试Facebook Instant Games平台游戏，其涉及平台功能与规则限制，请参考Facebook官方文档。 + +## 创建 Facebook Instant Games 应用 + +您需要在 [https://developers.facebook.com](https://developers.facebook.com) 登录您的Facebook账号 + +![](a1.png) + +在我的应用中，点击**添加新应用**，填写应用相关信息，如下图： + +![](a2.png) + +进入到新创建的项目详情面板中，在添加商品中，选择**Facebook Instant Games**，如图： + +![](a3.png) + +在小游戏详情面板中，填写基本信息 + +![](a4.png) + +进入到**虚拟主机**产品，点击**生成素材上传访问口令**按钮，将生成的口令保存，以备后用，如图： + +![](a5.png) + +![](a6.png) + +## 创建 Egret 项目 + +创建Egret项目，扩展库中需要选择`Facebook Instant Games` + +![](a7.png) + +## 编写代码或迁移您的项目 + +关于API，您可查看 [Egret文档中心](http://developer.egret.com/cn/apidoc/) 以获取更详细的说明。 + +此处以一个示例项目为例，代码如下： + +##### Button.ts + +~~~ javascript +class Button extends egret.Sprite { + + public constructor(label: string) { + super(); + this.drawText(label); + this.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.touch_begin, this); + this.addEventListener(egret.TouchEvent.TOUCH_END, this.touch_end, this); + this.addEventListener(egret.TouchEvent.TOUCH_TAP, this.click, this); + this.draw(); + this.touchEnabled = true; + } + + private touch_begin(evt: egret.TouchEvent): void { + this.isUp = false; + this.draw(); + } + private touch_end(evt: egret.TouchEvent): void { + this.isUp = true; + this.draw(); + } + private click(evt: egret.TouchEvent): void { + this.dispatchEvent(new egret.Event("CHAGE_STAGE")); + } + + private isUp: boolean = true; + private draw(): void { + this.graphics.clear(); + this.removeChildren(); + if (this.isUp) { + this.drawUp(); + } else { + this.drawDown(); + } + this.addChild(this.textF); + } + + private textF: egret.TextField; + private drawText(label: string): void { + if (this.textF == null) { + let text: egret.TextField = new egret.TextField(); + text.text = label; + text.width = (Context.stageWidth - 30) / 2; + text.height = 35; + text.size = 22; + text.verticalAlign = egret.VerticalAlign.MIDDLE; + text.textAlign = egret.HorizontalAlign.CENTER; + this.textF = text; + this.textF.strokeColor = 0x292b2f; + } + } + + private drawUp(): void { + this.graphics.beginFill(0x666666); + this.graphics.lineStyle(2, 0x282828); + this.graphics.drawRoundRect(0, 0, (Context.stageWidth - 30) / 2, 35, 15, 15); + this.graphics.endFill(); + + this.graphics.lineStyle(2, 0x909090, 0.5); + this.graphics.moveTo(5, 2); + this.graphics.lineTo((Context.stageWidth - 30) / 2 - 5, 2); + this.graphics.endFill(); + + this.graphics.lineStyle(2, 0x676767, 0.7); + this.graphics.moveTo(5, 37); + this.graphics.lineTo((Context.stageWidth - 30) / 2 - 5, 37); + this.graphics.endFill(); + + this.textF.stroke = 0; + } + private drawDown(): void { + this.graphics.beginFill(0x3b3b3b); + this.graphics.lineStyle(2, 0x282828); + this.graphics.drawRoundRect(0, 0, (Context.stageWidth - 30) / 2, 35, 15, 15); + this.graphics.endFill(); + + this.graphics.lineStyle(2, 0x313131, 0.5); + this.graphics.moveTo(5, 2); + this.graphics.lineTo((Context.stageWidth - 30) / 2 - 5, 2); + this.graphics.endFill(); + + this.graphics.lineStyle(2, 0x676767, 0.7); + this.graphics.moveTo(5, 37); + this.graphics.lineTo((Context.stageWidth - 30) / 2 - 5, 37); + this.graphics.endFill(); + + this.textF.stroke = 1; + } +} +~~~ + +##### Context.ts + +~~~ javascript +class Context { + static stageWidth: number = 0; + static stageHeight: number = 0; + + public static init(_stage: egret.Stage): void { + Context.stageWidth = _stage.stageWidth; + Context.stageHeight = _stage.stageHeight; + } +} +~~~ + + +##### Menu.ts + +~~~ javascript +class Menu extends egret.Sprite { + + public constructor(title: string) { + super(); + + this.graphics.lineStyle(2, 0x282828); + this.graphics.moveTo(0, 35); + this.graphics.lineTo(Context.stageWidth, 35); + this.graphics.endFill(); + + this.graphics.lineStyle(2, 0x6a6a6a); + this.graphics.moveTo(0, 37); + this.graphics.lineTo(Context.stageWidth, 37); + this.graphics.endFill(); + + this.drawText(title); + this.addChild(this.textF); + } + + private textF: egret.TextField; + private drawText(label: string): void { + if (this.textF == null) { + let text: egret.TextField = new egret.TextField(); + text.text = label; + text.width = Context.stageWidth + text.height = 35; + text.size = 22; + text.verticalAlign = egret.VerticalAlign.MIDDLE; + text.textAlign = egret.HorizontalAlign.CENTER; + this.textF = text; + this.textF.strokeColor = 0x292b2f; + } + } + + private viewNum: number = 0; + + public addTestFunc(label: string, callback: Function, target: Object): void { + let btn: Button = new Button(label); + + btn.x = (Context.stageWidth - 30) / 2 + 20; + btn.y = 48 + this.viewNum* 47; + + this.addChild(btn); + btn.addEventListener("CHAGE_STAGE", callback, target); + this.viewNum++; + } +} +~~~ + +##### Main.ts + +~~~ javascript +class Main extends egret.DisplayObjectContainer { + + public static menu: any; + private static _that: egret.DisplayObjectContainer; + public constructor() { + super(); + this.once(egret.Event.ADDED_TO_STAGE, this.addStage, this); + } + + private addStage(evt: egret.Event): void { + this.initializeAsync(); + + FBInstant.startGameAsync().then(() => { + egret.log("start game"); + Main._that = this; + Context.init(this.stage); + Main.menu = new Menu("Egret Facebook SDK Demo") + this.addChild(Main.menu); + this.createMenu(); + }); + } + + public static backMenu(): void { + Main._that.removeChildren(); + Main._that.addChild(Main.menu); + } + + private createMenu(): void { + Main.menu.addTestFunc("baseinfo", this.baseinfo, this); + Main.menu.addTestFunc("quit", this.quit, this); + Main.menu.addTestFunc("logEvent", this.logEvent, this); + Main.menu.addTestFunc("shareAsync", this.shareAsync, this); + Main.menu.addTestFunc("player", this.player, this); + Main.menu.addTestFunc("getConnectedPlayersAsync", this.getEgretConnectedPlayersAsync, this); + Main.menu.addTestFunc("contextinfo", this.contextinfo, this); + Main.menu.addTestFunc("share", this.share, this); + } + + private initializeAsync(): void { + FBInstant.initializeAsync().then(function () { + egret.log("getLocale:", FBInstant.getLocale()); + egret.log("getPlatform:", FBInstant.getPlatform()); + egret.log("getSDKVersion", FBInstant.getSDKVersion()); + egret.log("getSupportedAPIs", FBInstant.getSupportedAPIs()); + egret.log("getEntryPointData", FBInstant.getEntryPointData()); + }) + + setTimeout(function () { + FBInstant.setLoadingProgress(100); + }, 1000); + } + + private baseinfo() { + egret.log("baseinfo"); + egret.log("getLocale:", FBInstant.getLocale()); + egret.log("getPlatform:", FBInstant.getPlatform()); + egret.log("getSDKVersion", FBInstant.getSDKVersion()); + egret.log("getSupportedAPIs", FBInstant.getSupportedAPIs()); + egret.log("getEntryPointData", FBInstant.getEntryPointData()); + } + + private quit(): void { + egret.log("quit"); + FBInstant.quit(); + } + + private logEvent(): void { + egret.log("logEvent"); + FBInstant.logEvent("test", 2, { "test": "ta" }); + } + + + private shareAsync(): void { + egret.log("shareAsync"); + let data: FBInstant.SharePayload = { + intent: "", + text: "", + image: "", + }; + FBInstant.shareAsync(data); + } + + + private player() { + egret.log("player"); + egret.log("player.getID", FBInstant.player.getID()); + egret.log("player.getName", FBInstant.player.getName()); + egret.log("player.getPhoto", FBInstant.player.getPhoto()); + } + + private async getEgretConnectedPlayersAsync() { + egret.log("frends info:::"); + let datas: FBInstant.ConnectedPlayer[] = await FBInstant.player.getConnectedPlayersAsync(); + egret.log(datas); + datas.forEach(element => { + egret.log("player.getID", element.getID()); + egret.log("player.getName", element.getName()); + egret.log("player.getPhoto", element.getPhoto()); + }); + } + + private contextinfo(): void { + egret.log("Context.getID", FBInstant.context.getID()); + egret.log("Context.getType", FBInstant.context.getType()); + } + + private share(): void { + egret.log("share"); + let data: FBInstant.SharePayload = { + intent: "", + text: "", + image: "", + }; + FBInstant.shareAsync(data); + } +} +~~~ + +## 开发建议 + +我们建议您，在开发过程中为接入预留接口。本机测试过程中可忽略Facebook接口，当需要在Facebook中测试时，再开启相关API。 + +## 打包上传 + +在 index.html 里引入 sdk 的 js 文件。注意：该 js 文件必须像下面这样远程加载，不能放到本地，否则无法通过 Facebook 的审核。 + +``` + +``` + +如果您安装了最新版本的Egret Wing，可点击发布按钮打开上传面板。或者可通过Egret Launcher，项目中的发布设置按钮打开上传面板。 + +选择**Facebook**选项卡，填写您的APP ID和刚刚生成的上传口令，在备注中，填写此次上传版本的描述信息。 + +![](a9.png) + +点击上传即可将当前项目打包并推送到Facebook服务器中。 + +## 测试 + +上传成功了，您可在应用管理后台看到刚刚上传的版本。 + +![](a11.png) + +如要对此版本进行测试，则点击**推送到生产环境** + +![](a12.png) + +当对应版本从“待命”变为“生产”后，则可对此版本进行测试。 + +在Facebook Instant Games中，点击**详情**，最下方的**分享游戏**，将当前游戏分享至您的Facebook信息流中。 + +![](a13.png) + +![](a14.png) + +在手机Facebook APP中点击您刚刚分享的游戏，可打开游戏进行测试。 + +![](a152.png) ![](a163.png) diff --git a/Engine2D/facebookInstantGames/a1.png b/Engine2D/facebookInstantGames/a1.png new file mode 100644 index 0000000..5291bdf Binary files /dev/null and b/Engine2D/facebookInstantGames/a1.png differ diff --git a/Engine2D/facebookInstantGames/a10.png b/Engine2D/facebookInstantGames/a10.png new file mode 100644 index 0000000..11853a4 Binary files /dev/null and b/Engine2D/facebookInstantGames/a10.png differ diff --git a/Engine2D/facebookInstantGames/a11.png b/Engine2D/facebookInstantGames/a11.png new file mode 100644 index 0000000..1125ee3 Binary files /dev/null and b/Engine2D/facebookInstantGames/a11.png differ diff --git a/Engine2D/facebookInstantGames/a12.png b/Engine2D/facebookInstantGames/a12.png new file mode 100644 index 0000000..e02428c Binary files /dev/null and b/Engine2D/facebookInstantGames/a12.png differ diff --git a/Engine2D/facebookInstantGames/a13.png b/Engine2D/facebookInstantGames/a13.png new file mode 100644 index 0000000..a470269 Binary files /dev/null and b/Engine2D/facebookInstantGames/a13.png differ diff --git a/Engine2D/facebookInstantGames/a14.png b/Engine2D/facebookInstantGames/a14.png new file mode 100644 index 0000000..8ec5a44 Binary files /dev/null and b/Engine2D/facebookInstantGames/a14.png differ diff --git a/Engine2D/facebookInstantGames/a15.png b/Engine2D/facebookInstantGames/a15.png new file mode 100644 index 0000000..f9ee4bf Binary files /dev/null and b/Engine2D/facebookInstantGames/a15.png differ diff --git a/Engine2D/facebookInstantGames/a152.png b/Engine2D/facebookInstantGames/a152.png new file mode 100644 index 0000000..da27ecc Binary files /dev/null and b/Engine2D/facebookInstantGames/a152.png differ diff --git a/Engine2D/facebookInstantGames/a16.png b/Engine2D/facebookInstantGames/a16.png new file mode 100644 index 0000000..34f0cdf Binary files /dev/null and b/Engine2D/facebookInstantGames/a16.png differ diff --git a/Engine2D/facebookInstantGames/a163.png b/Engine2D/facebookInstantGames/a163.png new file mode 100644 index 0000000..095ff6e Binary files /dev/null and b/Engine2D/facebookInstantGames/a163.png differ diff --git a/Engine2D/facebookInstantGames/a2.png b/Engine2D/facebookInstantGames/a2.png new file mode 100644 index 0000000..cd53ddc Binary files /dev/null and b/Engine2D/facebookInstantGames/a2.png differ diff --git a/Engine2D/facebookInstantGames/a3.png b/Engine2D/facebookInstantGames/a3.png new file mode 100644 index 0000000..18e49a8 Binary files /dev/null and b/Engine2D/facebookInstantGames/a3.png differ diff --git a/Engine2D/facebookInstantGames/a4.png b/Engine2D/facebookInstantGames/a4.png new file mode 100644 index 0000000..5b07172 Binary files /dev/null and b/Engine2D/facebookInstantGames/a4.png differ diff --git a/Engine2D/facebookInstantGames/a5.png b/Engine2D/facebookInstantGames/a5.png new file mode 100644 index 0000000..0e56374 Binary files /dev/null and b/Engine2D/facebookInstantGames/a5.png differ diff --git a/Engine2D/facebookInstantGames/a6.png b/Engine2D/facebookInstantGames/a6.png new file mode 100644 index 0000000..944fd26 Binary files /dev/null and b/Engine2D/facebookInstantGames/a6.png differ diff --git a/Engine2D/facebookInstantGames/a7.png b/Engine2D/facebookInstantGames/a7.png new file mode 100644 index 0000000..d7308ce Binary files /dev/null and b/Engine2D/facebookInstantGames/a7.png differ diff --git a/Engine2D/facebookInstantGames/a8.png b/Engine2D/facebookInstantGames/a8.png new file mode 100644 index 0000000..8277627 Binary files /dev/null and b/Engine2D/facebookInstantGames/a8.png differ diff --git a/Engine2D/facebookInstantGames/a9.png b/Engine2D/facebookInstantGames/a9.png new file mode 100644 index 0000000..6863467 Binary files /dev/null and b/Engine2D/facebookInstantGames/a9.png differ diff --git a/Engine2D/getStarted/helloWorld/56a1a8c3b9412.jpg b/Engine2D/getStarted/helloWorld/56a1a8c3b9412.jpg new file mode 100644 index 0000000..735c08f Binary files /dev/null and b/Engine2D/getStarted/helloWorld/56a1a8c3b9412.jpg differ diff --git a/Engine2D/getStarted/helloWorld/56a1a8c3eb90a.png b/Engine2D/getStarted/helloWorld/56a1a8c3eb90a.png new file mode 100644 index 0000000..17bdd48 Binary files /dev/null and b/Engine2D/getStarted/helloWorld/56a1a8c3eb90a.png differ diff --git a/Engine2D/getStarted/helloWorld/README.md b/Engine2D/getStarted/helloWorld/README.md new file mode 100644 index 0000000..a6b43d9 --- /dev/null +++ b/Engine2D/getStarted/helloWorld/README.md @@ -0,0 +1,88 @@ + +### 安装引擎 + +下载[Egret Engine](http://www.egret.com/products/engine.html),（可参考：[安装与部署](../../projectConfig/installation/README.md)）。 + +### 安装开发工具 + +打开 Egret Launcher，会显示登录界面，如下图。 + +![](./login.png) + +登陆成功后会显示 Egret Launcher 主界面。 + +![](./main.png) + +### 创建项目 + +1、点击菜单 `项目` -> `创建项目` 来创建项目，如下图。 + +![](./project1.png) + +也可以选择 `导入项目` 来导入已有项目。 + + +2、在弹出的新建项目面板中，设置项目的基本配置，如下图。 + +![](project2.png) + +* 项目名称 +当前项目的名称，如 HelloWorld。 + +* 项目路径 +该项目所存放的文件路径。 + +* 项目类型 +该项目的项目类型，如 Egret 游戏项目 ， Egret EUI 项目。 + +* 引擎版本 + 当前项目所使用的 Egret 的版本。 + +* 选择扩展库 +项目中需要使用的系统库。更多关于扩展库选择的介绍可以参考：[扩展库简介](../../projectConfig/extendRepSummary/README.md) + +* 舞台尺寸 + 默认游戏舞台的高度与宽度，以像素为单位. + +* 缩放模式 + 屏幕的适配方式，这里选择showALL模式。更多关于缩放模式的介绍可以参考：[屏幕适配](../../screenAdaptation/zoomMode/README.md) + +* 旋转方式 + 屏幕的旋转模式，这里选择auto模式。更多关于旋转设置的介绍可以参考：[屏幕适配](../../screenAdaptation/rotationMode/README.md) + +点击 `创建` ，创建Hello World项目。 + +项目可以直接在Egret Launcher 中进行打开，管理。 + +![](project3.png) + +### 项目结构 + +在Egret Wing左侧，可看到当前项目的目录结构： + +![](project4.png) + +各文件夹功能说明 +* .wing：包括 Egret 项目的任务配置文件和启动配置文件。 +* wingProperties.json：Egret Wing 项目配置文件。 +* bin-debug：项目调试时，所产生的文件存放于此目录。 +* libs：库文件，包括 Egret 核心库和其他扩展库存放于此目录。 +* resource：项目资源文件存放于此目录。 +* scripts：项目构建和发布时需要用到的脚本文件存放在此目录。 +* src：项目代码文件存放于此目录。 +* template：项目模板文件存放于此目录。 +* egretProperties.json：项目的配置文件。具体的配置说明可以参考：[EgretProperties说明](../../projectConfig/configFile/README.md) +* index.html：入口文件。具体的配置说明可以参考：[入口文件说明](../../projectConfig/indexFile/README.md) +* manifest.json：网页清单文件。 +* tsconfig.json：typescript 编译配置文件。 + + +### 运行项目 + +点击菜单“项目”->“构建”，编译项目，如下图。 + +![](build.png) + +构建完成之后点击菜单“项目”->“调试”，运行项目，如下图。 + +![](debug1.png) diff --git a/Engine2D/getStarted/helloWorld/arrow.png b/Engine2D/getStarted/helloWorld/arrow.png new file mode 100644 index 0000000..f94619e Binary files /dev/null and b/Engine2D/getStarted/helloWorld/arrow.png differ diff --git a/Engine2D/getStarted/helloWorld/build.png b/Engine2D/getStarted/helloWorld/build.png new file mode 100644 index 0000000..9be3d4b Binary files /dev/null and b/Engine2D/getStarted/helloWorld/build.png differ diff --git a/Engine2D/getStarted/helloWorld/create1.jpg b/Engine2D/getStarted/helloWorld/create1.jpg new file mode 100644 index 0000000..ddac2bd Binary files /dev/null and b/Engine2D/getStarted/helloWorld/create1.jpg differ diff --git a/Engine2D/getStarted/helloWorld/create2.jpg b/Engine2D/getStarted/helloWorld/create2.jpg new file mode 100644 index 0000000..ed86073 Binary files /dev/null and b/Engine2D/getStarted/helloWorld/create2.jpg differ diff --git a/Engine2D/getStarted/helloWorld/create3.png b/Engine2D/getStarted/helloWorld/create3.png new file mode 100644 index 0000000..93eb9d1 Binary files /dev/null and b/Engine2D/getStarted/helloWorld/create3.png differ diff --git a/Engine2D/getStarted/helloWorld/create4.jpg b/Engine2D/getStarted/helloWorld/create4.jpg new file mode 100644 index 0000000..2c640d1 Binary files /dev/null and b/Engine2D/getStarted/helloWorld/create4.jpg differ diff --git a/Engine2D/getStarted/helloWorld/debug1.png b/Engine2D/getStarted/helloWorld/debug1.png new file mode 100644 index 0000000..1017200 Binary files /dev/null and b/Engine2D/getStarted/helloWorld/debug1.png differ diff --git a/Engine2D/getStarted/helloWorld/down.jpg b/Engine2D/getStarted/helloWorld/down.jpg new file mode 100644 index 0000000..b4a74bf Binary files /dev/null and b/Engine2D/getStarted/helloWorld/down.jpg differ diff --git a/Engine2D/getStarted/helloWorld/login.png b/Engine2D/getStarted/helloWorld/login.png new file mode 100644 index 0000000..3d86cfa Binary files /dev/null and b/Engine2D/getStarted/helloWorld/login.png differ diff --git a/Engine2D/getStarted/helloWorld/main.png b/Engine2D/getStarted/helloWorld/main.png new file mode 100644 index 0000000..4182d3e Binary files /dev/null and b/Engine2D/getStarted/helloWorld/main.png differ diff --git a/Engine2D/getStarted/helloWorld/project1.png b/Engine2D/getStarted/helloWorld/project1.png new file mode 100644 index 0000000..4741223 Binary files /dev/null and b/Engine2D/getStarted/helloWorld/project1.png differ diff --git a/Engine2D/getStarted/helloWorld/project2.png b/Engine2D/getStarted/helloWorld/project2.png new file mode 100644 index 0000000..1cab8c3 Binary files /dev/null and b/Engine2D/getStarted/helloWorld/project2.png differ diff --git a/Engine2D/getStarted/helloWorld/project3.png b/Engine2D/getStarted/helloWorld/project3.png new file mode 100644 index 0000000..20b7cdc Binary files /dev/null and b/Engine2D/getStarted/helloWorld/project3.png differ diff --git a/Engine2D/getStarted/helloWorld/project4.png b/Engine2D/getStarted/helloWorld/project4.png new file mode 100644 index 0000000..489fe96 Binary files /dev/null and b/Engine2D/getStarted/helloWorld/project4.png differ diff --git a/Engine2D/getStarted/lifecycle/README.md b/Engine2D/getStarted/lifecycle/README.md new file mode 100644 index 0000000..f27d23b --- /dev/null +++ b/Engine2D/getStarted/lifecycle/README.md @@ -0,0 +1,51 @@ + +在游戏中，用户可以切换应用的前后台。在用户进入后台时，关闭游戏逻辑、渲染逻辑、背景音乐，可以保证更好的用户体验。 + + + +白鹭引擎从 4.1 版本开始引入生命周期管理器：```egret.lifecycle```。其代码示例如下： + +```typescript +egret.lifecycle.onPause = ()=> { + console.log("app 进入后台"); + egret.ticker.pause(); // 关闭渲染与心跳 +} +egret.lifecycle.onResume = ()=> { + console.log("app 进入前台"); + egret.ticker.resume(); // 打开渲染与心跳 +} +``` + +针对不同的游戏运行环境，开发者可以对生命周期管理器进行扩展，以手机QQ举例，其扩展如下： + +```typescript + +// 手机QQ注册了 appInBackgound 这一变量，在 TypeScript 中进行声明，防止报错 +declare interface Window { + + appInBackgound:boolean; +} + +egret.lifecycle.addLifecycleListener( (context)=>{ + + // 方法一：通过事件监听的方式进行通知 + document.addEventListener("qbrowserVisibilityChange", function(e:any){ + if (e.hidden){ + context.pause(); + } + else{ + context.resume(); + }; + }); + + // 方法二：在每一帧进行判断 + context.onUpdate = ()=> { + if (window.appInBackgound){ + context.pause(); + } + else{ + context.resume(); + } + } +} ) +``` diff --git a/Engine2D/hit/pixelHit/5565345c3987a.png b/Engine2D/hit/pixelHit/5565345c3987a.png new file mode 100644 index 0000000..2f6aa1f Binary files /dev/null and b/Engine2D/hit/pixelHit/5565345c3987a.png differ diff --git a/Engine2D/hit/pixelHit/5565345c3d61d.png b/Engine2D/hit/pixelHit/5565345c3d61d.png new file mode 100644 index 0000000..eb38e06 Binary files /dev/null and b/Engine2D/hit/pixelHit/5565345c3d61d.png differ diff --git a/Engine2D/hit/pixelHit/README.md b/Engine2D/hit/pixelHit/README.md new file mode 100644 index 0000000..5e54e91 --- /dev/null +++ b/Engine2D/hit/pixelHit/README.md @@ -0,0 +1,52 @@ + +像素碰撞检测，是判断显示对象的图案（非透明区域）是否与一点相交。同样使用 `hitTestPoint()` 方法，用法为： + +```javascript +var isHit:boolean = shp.hitTestPoint( x: number, y:number, true:boolean ); +``` + +相比于矩形碰撞检测，增加了第三个参数 `true` ，表示要使用像素碰撞检测。 + +* 示例代码1： + +```javascript +var shp:egret.Shape = new egret.Shape(); +shp.graphics.beginFill( 0xff0000 ); +shp.graphics.drawRect( 0,0,100,100); +shp.graphics.endFill(); +shp.width = 100; +shp.height = 100; +this.addChild( shp ); + +var isHit:boolean = shp.hitTestPoint( 10, 10, true ); +this.infoText.text = "isHit: " + isHit; +``` + +这段代码运行后效果与矩形碰撞检测的效果相同，如图： + +![](5565345c3987a.png) + +* 示例代码2： + +```javascript +var shp:egret.Shape = new egret.Shape(); +shp.graphics.beginFill( 0xff0000 ); +shp.graphics.drawCircle( 0, 0, 20); +shp.graphics.endFill(); +shp.width = 100; +shp.height = 100; +this.addChild( shp ); + +var isHit:boolean = shp.hitTestPoint( 25, 25, true ); +this.infoText.text = "isHit: " + isHit; +``` + +编译调试后，效果如下图： + +![](5565345c3d61d.png) + +文本中返回碰撞的结果，显示为 `false`，表示没有发生碰撞，与矩形碰撞检测的结果不同。 + +这是因为：矩形碰撞检测，是判断显示对象的包围盒是否与一点相交；而像素碰撞检测，是判断显示对象的图案（非透明区域）是否与一点相交。 + +>大量使用像素碰撞检测，会消耗更多的性能 diff --git a/Engine2D/hit/rectangleHit/5565345c3987a.png b/Engine2D/hit/rectangleHit/5565345c3987a.png new file mode 100644 index 0000000..2f6aa1f Binary files /dev/null and b/Engine2D/hit/rectangleHit/5565345c3987a.png differ diff --git a/Engine2D/hit/rectangleHit/5565345c3d62d.png b/Engine2D/hit/rectangleHit/5565345c3d62d.png new file mode 100644 index 0000000..4b55ba6 Binary files /dev/null and b/Engine2D/hit/rectangleHit/5565345c3d62d.png differ diff --git a/Engine2D/hit/rectangleHit/README.md b/Engine2D/hit/rectangleHit/README.md new file mode 100644 index 0000000..1406b1b --- /dev/null +++ b/Engine2D/hit/rectangleHit/README.md @@ -0,0 +1,103 @@ + +碰撞检测，判断显示对象是否与一点相交。 + +矩形碰撞检测，是判断显示对象的包围盒是否与一点相交。 + +Egret 提供 `hitTestPoint()` 方法进行碰撞检测，矩形碰撞检测的用法为： + +```javascript +var isHit:boolean = shp.hitTestPoint( x: number, y:number ); +``` + +`shp` 是待检测的显示对象，(x, y)是待检测的点的位置。如果发生碰撞，则方法返回 `true`,如果没有发生碰撞，则返回 `false`。 + +* 示例代码1： + +```javascript +class HitTest extends egret.DisplayObjectContainer +{ + public constructor() + { + super(); + this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this); + } + + private onAddToStage(event:egret.Event) + { + this.drawText(); + + var shp:egret.Shape = new egret.Shape(); + shp.graphics.beginFill( 0xff0000 ); + shp.graphics.drawRect( 0,0,100,100); + shp.graphics.endFill(); + shp.width = 100; + shp.height = 100; + this.addChild( shp ); + + var isHit:boolean = shp.hitTestPoint( 10, 10 ); + this.infoText.text = "isHit: " + isHit; + + } + + private infoText:egret.TextField; + private drawText() + { + this.infoText = new egret.TextField(); + this.infoText.y = 200; + this.infoText.text = "isHit"; + this.addChild( this.infoText ); + } +} +``` + +编译调试后，效果如下图： + +![](5565345c3987a.png) + +文本中返回碰撞的结果，显示为 `true`，表示发生了碰撞。 + +* 示例代码2： + +```javascript +class HitTest extends egret.DisplayObjectContainer +{ + public constructor() + { + super(); + this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this); + } + + private onAddToStage(event:egret.Event) + { + this.drawText(); + + var shp:egret.Shape = new egret.Shape(); + shp.graphics.beginFill( 0xff0000 ); + shp.graphics.drawCircle( 0, 0, 20); + shp.graphics.endFill(); + shp.width = 100; + shp.height = 100; + this.addChild( shp ); + + var isHit:boolean = shp.hitTestPoint( 25, 25 ); + this.infoText.text = "isHit: " + isHit; + } + + private infoText:egret.TextField; + private drawText() + { + this.infoText = new egret.TextField(); + this.infoText.y = 200; + this.infoText.text = "isHit: "; + this.addChild( this.infoText ); + } +} +``` + +编译调试后，效果如下图： + +![](5565345c3d62d.png) + +文本中返回碰撞的结果，显示为 `true`，表示发生了碰撞。 + +>注意：该点并未与红色圆形直接相交，而是与红色圆形的包围盒相交。 diff --git a/Engine2D/mask/mask/55653415102ac.png b/Engine2D/mask/mask/55653415102ac.png new file mode 100644 index 0000000..2310b36 Binary files /dev/null and b/Engine2D/mask/mask/55653415102ac.png differ diff --git a/Engine2D/mask/mask/5565341511ede.png b/Engine2D/mask/mask/5565341511ede.png new file mode 100644 index 0000000..36b7dfe Binary files /dev/null and b/Engine2D/mask/mask/5565341511ede.png differ diff --git a/Engine2D/mask/mask/55a32cdb75779.png b/Engine2D/mask/mask/55a32cdb75779.png new file mode 100644 index 0000000..fb47dd7 Binary files /dev/null and b/Engine2D/mask/mask/55a32cdb75779.png differ diff --git a/Engine2D/mask/mask/README.md b/Engine2D/mask/mask/README.md new file mode 100644 index 0000000..90979ea --- /dev/null +++ b/Engine2D/mask/mask/README.md @@ -0,0 +1,108 @@ + +遮罩的作用是指定一个显示对象的可见区域，所有显示对象都具备遮罩功能。 + +## 1.矩形遮罩 + +矩形遮罩，即显示对象的可见区域是方形显示区域而非不规则显示区域。 + +用法为：将一个矩形对象赋值给显示对象的 `mask` 属性。 + +~~~javascript +shp.mask = new egret.Rectangle(20,20,30,50); +~~~ + +> 如果 `rect` 发生变化，需要重新将 `rect` 赋值给 `shp.mask`。 + +下面示例中绘制了两个 `Shape` 对象，对其中一个 `Shape` 使用矩形遮罩，另外一个 `Shape` 当做参考。代码如下： + +~~~javascript +class Test extends egret.DisplayObjectContainer +{ + public constructor() + { + super(); + this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this); + } + + private onAddToStage(event:egret.Event) + { + var shp:egret.Shape = new egret.Shape(); + shp.graphics.beginFill( 0xff0000 ); + shp.graphics.drawRect( 0,0,100,100); + shp.graphics.endFill(); + this.addChild( shp ); + + var shp2:egret.Shape = new egret.Shape(); + shp2.graphics.beginFill( 0x00ff00 ); + shp2.graphics.drawCircle( 0,0, 20); + shp2.graphics.endFill(); + this.addChild( shp2 ); + shp2.x = 20; + shp2.y = 20; + } +} +~~~ + +编译运行，效果如下： + +![image](55653415102ac.png) + +现在对 `shp` 添加遮罩，具体代码如下： + +~~~javascript +var rect:egret.Rectangle = new egret.Rectangle(20,20,30,50); +shp.mask = rect; +~~~ + + +编译运行，效果如下： + +![image](5565341511ede.png) + +可以看到，红色的正方形添加了遮罩后只显示了(20,20,30,50)这部分的图像。而未添加遮罩的绿色圆形依然显示完整 + + +## 2.显示对象遮罩 + +显示对象遮罩，即显示对象的可见区域由另一个显示对象确定，可实现不规则遮罩。 + +用法为：将被遮罩显示对象的 `mask` 属性设置为遮罩对象： + +```javascript +//将maskSprite设置为mySprite的遮罩 +mySprite.mask = maskSprite; +``` +被遮罩的显示对象的显示区域，在用作遮罩的显示对象的全部不透明区域之内。例如，下面的代码创建一个包含 100 x 100 像素的红色正方形的 `Shape` 实例和一个包含半径为 25 个像素的蓝色圆的 `Sprite` 实例，它被设置为正方形的遮罩。正方形的显示区域，是由圆的不透明区域覆盖的那一部分。 + +```javascript +//画一个红色的正方形 + var square:egret.Shape = new egret.Shape(); + square.graphics.beginFill(0xff0000); + square.graphics.drawRect(0,0,100,100); + square.graphics.endFill(); + this.addChild(square); + +//画一个蓝色的圆形 +var circle:egret.Shape = new egret.Shape(); +circle.graphics.beginFill(0x0000ff); +circle.graphics.drawCircle(25,25,25); +circle.graphics.endFill(); +this.addChild(circle); + +square.mask = circle; +``` +最终效果如图所示 + +![](55a32cdb75779.png) + +用作遮罩的显示对象可设置动画、动态调整大小。遮罩显示对象不一定需要添加到显示列表中。但是，如果希望在缩放舞台时也缩放遮罩对象，或者如果希望支持用户与遮罩对象的交互（如调整大小），则必须将遮罩对象添加到显示列表中。 + +通过将 `mask` 属性设置为 `null` 可以删除遮罩： + +```javascript +mySprite.mask = null; +``` +> 不能使用一个遮罩对象来遮罩另一个遮罩对象。 + +> 显示对象作为遮罩，无需像矩形遮罩那样重复赋值 `mask`，但是 `mask` 必须是显示列表里的元素。 + diff --git a/Engine2D/minigame/QQPlay/README.md b/Engine2D/minigame/QQPlay/README.md new file mode 100644 index 0000000..5f28270 --- /dev/null +++ b/Engine2D/minigame/QQPlay/README.md @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Engine2D/minigame/advance/README.md b/Engine2D/minigame/advance/README.md new file mode 100644 index 0000000..1dd4ac2 --- /dev/null +++ b/Engine2D/minigame/advance/README.md @@ -0,0 +1,344 @@ +__注意：__ + +* 因为小游戏特殊机制，涉及到的小游戏接口主要逻辑都需要写在小游戏逻辑代码内，但是可以通过 Egret 代码来调用 +* 后续版本 Egret 将会提供调用小游戏接口模板，届时大家可以参照模板编写代码。 + +### 文件系统 + +文件系统有两类文件：代码包文件和本地文件。 + +#### 代码包文件 + +代码包文件指的是在项目目录中添加的文件。由于代码包文件大小限制，代码包文件适用于放置首次加载时需要的文件，对于内容较大或需要动态替换的文件，不推荐用添加到代码包中，推荐在小程序启动之后再用下载接口下载到本地。 + +##### 访问代码包文件 + +代码包文件的访问方式是从项目根目录开始写文件路径。 + +![](code-package.png) + +##### 修改代码包文件 + +代码包内的文件无法在运行后动态修改或删除，修改代码包文件需要重新发布版本。 + +#### 本地文件 + +本地文件指的是小程序被用户添加到手机后，会有一块独立的文件存储区域，以用户维度隔离。即同一台手机，每个微信用户不能访问到其他登录用户的文件，同一个用户不同 appId 之间的文件也不能互相访问。 + +![](file-sandbox.png) + + +本地文件的文件路径均为以下格式： + + {{协议名}}://文件路径 + +>其中，协议名在 iOS/Android 客户端为 "wxfile"，在开发者工具上为 "http"，开发者无需关注这个差异，也不应在代码中去硬编码完整文件路径。 + +##### 本地临时文件 + +本地临时文件只能通过调用特定接口产生，不能直接写入内容。本地临时文件产生后，仅在当前生命周期内有效，重启之后即不可用。因此，不可把本地临时文件路径存储起来下次使用。如果需要下次在使用，可通过 saveFile 或 copyFile 接口把本地临时文件转换成本地存储文件或本地用户文件。 + +示例 + + wx.chooseImage({ + success(res) { + const tempFilePaths = res.tempFilePaths // tempFilePaths 的每一项是一个本地临时文件路径 + } + }) + +##### 本地缓存文件 + +本地存储文件只能通过调用特定接口产生，不能直接写入内容。本地缓存文件产生后，重启之后仍可用。本地缓存文件只能通过 saveFile 接口将本地临时文件保存获得。 + +示例 + + wx.saveFile({ + tempFilePath: '', // 传入一个本地临时文件路径 + success(res) { + console.log(res.savedFilePath) // res.savedFilePath 为一个本地缓存文件路径 + } + }) + +>本地缓存文件是最初的设计，1.7.0 版本开始，提供了功能更完整的本地用户文件，可以完全覆盖本地缓存文件的功能，如果不需要兼容低于 1.7.0 版本，可以不使用本地缓存文件。 + +##### 本地用户文件 + +本地用户文件是从 1.7.0 版本开始新增的概念。我们提供了一个用户文件目录给开发者，开发者对这个目录有完全自由的读写权限。通过 wx.env.USER_DATA_PATH 可以获取到这个目录的路径。 + +示例 + + // 在本地用户文件目录下创建一个文件 a.txt，写入内容 "hello, world" + const fs = wx.getFileSystemManager() + fs.writeFileSync(`${wx.env.USER_DATA_PATH}/hello.txt`, 'hello, world', 'utf8') + +读写权限 + +| 接口、组件 | 读 | 写 | +|---|---|----| +|代码包文件|有|无| +|本地临时文件|有|无| +|本地缓存文件|有|无| +|本地用户文件|有|有| + +### 用户登陆签名 + +小程序的一部分后台(HTTP)接口要求验证用户登录态。开发者在调用时需提供以session_key为密钥生成的签名。其中session_key是指通过wx.login 获得的登录态。 + +#### 签名算法 + +目前支持的签名算法是 hmac_sha256。 对于POST请求，开发者生成签名的算法是： + + signature = hmac_sha256( post_data, session_key ) + +其中post_data为本次POST请求的数据包。特别地，对于GET请求，post_data等于长度为0的字符串。 + + signature = hmac_sha256( "", session_key ) + +##### 签名示例 + +例如开发者需要请求的HTTP（POST）接口，其中请求包为一个json字符串。 + + curl -d '{"foo":"bar"}' 'https://api.weixin.qq.com/some_api?access_token=xxx&openid=xxx&signature=???&sig_method=hmac_sha256' + +开发者需要计算出signature参数。假设用户当前有效的session_key 为 ： + + 'o0q0otL8aEzpcZL/FT9WsQ==' + +则开发者生成签名应该是 + + hmac_sha256('{"foo":"bar"}', 'o0q0otL8aEzpcZL/FT9WsQ==') = 654571f79995b2ce1e149e53c0a33dc39c0a74090db514261454e8dbe432aa0b + +开发者服务器发起的HTTP请求 + + curl -d '{"foo":"bar"}' 'https://api.weixin.qq.com/some_api?access_token=xxx&openid=xxx&signature=654571f79995b2ce1e149e53c0a33dc39c0a74090db514261454e8dbe432aa0b&sig_method=hmac_sha256' + +#### session_key 合法性校验 + +我们提供接口供开发者校验服务器所保存的登录态session_key是否合法。 为了保持session_key私密性，我们提供的校验接口本身不直接明文session_key，而是通过校验登录态签名完成。 + +##### 接口地址 + +请求方法：GET + + https://api.weixin.qq.com/wxa/checksession?access\_token=ACCESS\_TOKEN&signature=SIGNATURE&openid=OPENID&sig\_method=SIG\_METHOD + +##### 调用示例 + + curl -G 'https://api.weixin.qq.com/wxa/checksession?access_token=OsAoOMw4niuuVbfSxxxxxxxxxxxxxxxxxxx&signature=fefce01bfba4670c85b228e6ca2b493c90971e7c442f54fc448662eb7cd72509&openid=oGZUI0egBJY1zhBYw2KhdUfwVJJE&sig_method=hmac_sha256' + +##### 参数说明 + +| 参数 | 必填 | 说明 | +|---|---|----| +|access_token|是|接口调用凭证| +|openid|是|用户唯一标识符| +|signature|是|用户登录态签名| +|sig_method|是|用户登录态签名的哈希方法| +|buffer|是|托管数据，类型为字符串，长度不超过1000字节| + +##### 返回结果 + +正确时的返回JSON数据包如下： + + {"errcode":0,"errmsg":"ok"} + +错误时的返回JSON数据包如下（示例为签名错误）： + + {"errcode":87009,"errmsg":"invalid signature"} + +### 小游戏转发 + +用户在使用小游戏过程中，可转发消息给其他用户或群聊。 + +#### 转发菜单 + +点击右上角按钮，会弹出菜单，菜单中的“转发”选项默认不展示。通过 wx.showShareMenu 和 wx.hideShareMenu 可动态显示、隐藏这个选项。 + +#### 被动转发 + +用户点击右上角菜单中的“转发”选项后，会触发转发事件，如果小游戏通过 wx.onShareAppMessage 监听了这个事件，可通过返回自定义转发参数来修改转发卡片的内容，否则使用默认内容。 + +示例 + + wx.onShareAppMessage(() => { + // 用户点击了“转发”按钮 + return { + title: '转发标题' + } + }) + +#### 主动转发接口 + +游戏内可通过 wx.shareAppMessage接口直接调起转发界面，与被动转发类似，可以自定义转发卡片内容。 + +示例 + + wx.shareAppMessage({ + title: '转发标题' + }) + +#### withShareTicket 模式 + +通过 wx.updateShareMenu 接口可修改转发属性。如果设置 withShareTicket 为 true ，会有以下效果 + +* 选择联系人的时候只能选择一个目标，不能多选 +* 消息被转发出去之后，在会话窗口中无法被长按二次转发 +* 消息转发的目标如果是一个群聊，则 + * 会在转发成功的时候获得一个 shareTicket + * 每次用户从这个消息卡片进入的时候，也会获得一个 shareTicket，通过调用 wx.getShareInfo 接口传入 shareTicket 可以获取群相关信息 + +示例 + + // 设置 withShareTicket: true + wx.updateShareMenu({ + withShareTicket: true + }) + +#### 获取更多转发信息 + +通常开发者希望转发出去的小程序被二次打开的时候能够获取到一些信息，例如群的标识。现在通过调用 wx.showShareMenu 并且设置 withShareTicket 为 true ，当用户将小程序转发到任一群聊之后，可以获取到此次转发的 shareTicket，此转发卡片在群聊中被其他用户打开时，可以通过 getLaunchOptionsSync() 获取到另一个 shareTicket。这两步获取到的 shareTicket 均可通过 wx.getShareInfo() 接口可以获取到相同的转发信息。 + +### 用户数据的签名验证和加解密 + +#### 数据签名校验 + +为了确保开放接口返回用户数据的安全性，微信会对明文数据进行签名。开发者可以根据业务需要对数据包进行签名校验，确保数据的完整性。 + +签名校验算法涉及用户的session_key，通过 wx.login 登录流程获取用户session_key，并自行维护与应用自身登录态的对应关系。 +通过调用接口（如 wx.getUserInfo）获取数据时，接口会同时返回 rawData、signature，其中 signature = sha1( rawData + session_key ) +开发者将 signature、rawData 发送到开发者服务器进行校验。服务器利用用户对应的 session_key 使用相同的算法计算出签名 signature2 ，比对 signature 与 signature2 即可校验数据的完整性。 + +##### 如wx.getUserInfo的数据校验： + +接口返回的rawData： + + { + "nickName": "Band", + "gender": 1, + "language": "zh_CN", + "city": "Guangzhou", + "province": "Guangdong", + "country": "CN", + "avatarUrl": "http://wx.qlogo.cn/mmopen/vi_32/1vZvI39NWFQ9XM4LtQpFrQJ1xlgZxx3w7bQxKARol6503Iuswjjn6nIGBiaycAjAtpujxyzYsrztuuICqIM5ibXQ/0" + } + +用户的 session-key： + + HyVFkGl5F5OQWJZZaNzBBg== + +所以，用于签名的字符串为： + + {"nickName":"Band","gender":1,"language":"zh_CN","city":"Guangzhou","province":"Guangdong","country":"CN","avatarUrl":"http://wx.qlogo.cn/mmopen/vi_32/1vZvI39NWFQ9XM4LtQpFrQJ1xlgZxx3w7bQxKARol6503Iuswjjn6nIGBiaycAjAtpujxyzYsrztuuICqIM5ibXQ/0"}HyVFkGl5F5OQWJZZaNzBBg== + +使用sha1得到的结果为 + + 75e81ceda165f4ffa64f4068af58c64b8f54b88c + +#### 加密数据解密算法 + +接口如果涉及敏感数据（如wx.getUserInfo当中的 openId 和unionId ），接口的明文内容将不包含这些敏感数据。开发者如需要获取敏感数据，需要对接口返回的加密数据( encryptedData )进行对称解密。 解密算法如下： + +* 对称解密使用的算法为 AES-128-CBC，数据采用PKCS#7填充。 +* 对称解密的目标密文为 Base64_Decode(encryptedData)。 +* 对称解密秘钥 aeskey = Base64_Decode(session_key), aeskey 是16字节。 +* 对称解密算法初始向量 为Base64_Decode(iv)，其中iv由数据接口返回。 + +另外，为了应用能校验数据的有效性，我们会在敏感数据加上数据水印( watermark ) + +##### watermark参数说明： + +| 参数 | 类型 | 说明 | +|---|---|----| +|watermark|OBJECT|数据水印| +|appid|String|敏感数据归属appid，开发者可校验此参数与自身appid是否一致| +|timestamp|DateInt|敏感数据获取的时间戳, 开发者可以用于数据时效性校验| + +如接口wx.getUserInfo敏感数据当中的watermark： + + { + "openId": "OPENID", + "nickName": "NICKNAME", + "gender": GENDER, + "city": "CITY", + "province": "PROVINCE", + "country": "COUNTRY", + "avatarUrl": "AVATARURL", + "unionId": "UNIONID", + "watermark": + { + "appid":"APPID", + "timestamp":TIMESTAMP + } + } + +注：此前提供的加密数据（encryptData）以及对应的加密算法将被弃用，请开发者不要再依赖旧逻辑。 + +### 多线程 Worker + +对于游戏来说，每帧 16ms 是极其宝贵的，如果有一些可以异步处理的任务，可以放置于 Worker 中运行，待运行结束后，再把结果返回到主线程。Worker 运行于一个单独的全局上下文与线程中，不能直接调用主线程的方法，Worker 也不具备渲染的能力。 Worker 与主线程之间的数据传输，双方使用 postMessage 来发送数据，onMessage 来接收数据，传输的数据并不是直接共享，而是被复制的。 + +#### 配置 Worker 信息 + +在 game.json 中可配置 Worker 代码放置的目录，目录下的代码将被打包成一个文件： + +配置示例： + + { + "workers": "workers" + } + +#### 添加 Worker 代码文件 + +根据步骤 1 中的配置，在代码目录下新建以下两个入口文件： + + workers/request/index.js + workers/request/utils.js + workers/response/index.js + +添加后，目录结构如下： + + ├── game.js + ├── game.json + ├── project.config.json + └── workers + ├── request + │ ├── index.js + │ └── utils.js + └── response + └── index.js + +#### 编写 Worker 代码 + +在 workers/request/index.js 编写 Worker 响应代码 + + const utils = require('./utils') + + worker.onMessage(function (res) { + console.log(res) + }) + +#### 在主线程中初始化 Worker + +在主线程的代码 game.js 中初始化 Worker + + const worker = wx.createWorker('workers/request/index.js') // 文件名指定 worker 的入口文件路径，绝对路径 + +#### 主线程向 Worker 发送消息 + + worker.postMessage({ + msg: 'hello worker' + }) + +worker 对象的其它接口请看 worker接口说明 + +#### Tips + +* Worker 最大并发数量限制为 1 个，创建下一个前请用 Worker.terminate 结束当前 Worker +* Worker 内代码只能 require 指定 Worker 路径内的文件，无法引用其它路径 +* Worker 的入口文件由 wx.createWorker 时指定，开发者可动态指定 Worker 入口文件 +* Worker 内不支持 wx 系列的 API +* Workers 之间不支持发送消息 + +### 小结 + +目前文档的版本和微信小游戏官方版本一致，后续 Egret 会针对小游戏的 API 特性进行引擎方面的适配优化，以方便开发者更好、更方便的调用小游戏的接口。 \ No newline at end of file diff --git a/Engine2D/minigame/advance/code-package.png b/Engine2D/minigame/advance/code-package.png new file mode 100644 index 0000000..d952604 Binary files /dev/null and b/Engine2D/minigame/advance/code-package.png differ diff --git a/Engine2D/minigame/advance/file-sandbox.png b/Engine2D/minigame/advance/file-sandbox.png new file mode 100644 index 0000000..cf3bf68 Binary files /dev/null and b/Engine2D/minigame/advance/file-sandbox.png differ diff --git a/Engine2D/minigame/api/README.md b/Engine2D/minigame/api/README.md new file mode 100644 index 0000000..9e8ee28 --- /dev/null +++ b/Engine2D/minigame/api/README.md @@ -0,0 +1,132 @@ +### 如何在 Egret 中调用小游戏 API + +在 Egret 中是可以直接调用小游戏的 API 的，这篇文档简要介绍如何在 Egret 中使用小游戏的 API。 + +#### 新增 platform.ts 文件 + +![](platform.jpeg) + +在 src 下新增 platform.ts，代码如下 + +~~~javascript + /** + * 平台数据接口。 + * 由于每款游戏通常需要发布到多个平台上，所以提取出一个统一的接口用于开发者获取平台数据信息 + * 推荐开发者通过这种方式封装平台逻辑，以保证整体结构的稳定 + * 由于不同平台的接口形式各有不同，白鹭推荐开发者将所有接口封装为基于 Promise 的异步形式 + */ + declare interface Platform { + + getUserInfo(): Promise; + + login(): Promise + + } + + class DebugPlatform implements Platform { + async getUserInfo() { + return { nickName: "username" } + } + async login() { + + } + } + + + if (!window.platform) { + window.platform = new DebugPlatform(); + } + + + + declare let platform: Platform; + + declare interface Window { + + platform: Platform + } +~~~ + +这样就可以在 Egret 项目中使用 platform 里的方法了。但是如果我们当前的项目想要发布成 H5 游戏的话也不会报错，保证整个项目的兼容性。 + +#### 新增 platform.js 文件 + +通过文末的 [小游戏 API 文档](https://mp.weixin.qq.com/debug/wxagame/dev/document/render/canvas/wx.createCanvas.html)，我们可以方便的查看使用小游戏 API。 + +![](miniplatform.jpeg) + +我们 platform.js 代码编写如下 +~~~javascript + /** + * 请在白鹭引擎的Main.ts中调用 platform.login() 方法调用至此处。 + */ + + class WxgamePlatform { + + name = 'wxgame' + + login() { + return new Promise((resolve, reject) => { + wx.login({ + success: (res) => { + resolve(res) + } + }) + }) + } + + getUserInfo() { + return new Promise((resolve, reject) => { + wx.getUserInfo({ + withCredentials: true, + success: function (res) { + var userInfo = res.userInfo + var nickName = userInfo.nickName + var avatarUrl = userInfo.avatarUrl + var gender = userInfo.gender //性别 0：未知、1：男、2：女 + var province = userInfo.province + var city = userInfo.city + var country = userInfo.country + resolve(userInfo); + } + }) + }) + } + } + + + window.platform = new WxgamePlatform(); +~~~ +上述代码使用了小游戏的登陆 API，只需要在 Egret 项目中调用 platform.login() 方法即可。 + +#### 引入 platform.js + +但是在真正运行之前还需要将 platform.js 文件引入进去 + +![](require.jpeg) + +#### 调用小游戏的 API + +![](login.jpeg) + +最后只需要在你需要的地方添加方法就可了，搞定！ + +![](clean.jpeg) + +运行发现没有效果，因为我刚才已经登陆过了，所以选择清除登录状态。 + +![](case.jpeg) + +然后运行，搞定！ + +### 小结 + +因为上述过程 5.1.2 版本都已经集成，项目默认会有一个登陆方法的示例，大家可以按照示例使用其它的小游戏 API，为了保证最好的体验我们元旦回来后再进行更新，感谢大家一直以来的支持。 + +### 小游戏 API 调用注意事项 + +因为小游戏 API 运行需要小游戏环境，所以在 H5 上是无法直接预览的，所以你需要在「微信开发者工具」中预览效果。 + +![](first-game.jpg) + +更多 API 请查看：[小游戏 API 文档](https://mp.weixin.qq.com/debug/wxagame/dev/document/render/canvas/wx.createCanvas.html) diff --git a/Engine2D/minigame/api/case.jpeg b/Engine2D/minigame/api/case.jpeg new file mode 100644 index 0000000..eaf284f Binary files /dev/null and b/Engine2D/minigame/api/case.jpeg differ diff --git a/Engine2D/minigame/api/clean.jpeg b/Engine2D/minigame/api/clean.jpeg new file mode 100644 index 0000000..c3fc556 Binary files /dev/null and b/Engine2D/minigame/api/clean.jpeg differ diff --git a/Engine2D/minigame/api/first-game.jpg b/Engine2D/minigame/api/first-game.jpg new file mode 100644 index 0000000..c40cfd7 Binary files /dev/null and b/Engine2D/minigame/api/first-game.jpg differ diff --git a/Engine2D/minigame/api/login.jpeg b/Engine2D/minigame/api/login.jpeg new file mode 100644 index 0000000..16f351f Binary files /dev/null and b/Engine2D/minigame/api/login.jpeg differ diff --git a/Engine2D/minigame/api/miniplatform.jpeg b/Engine2D/minigame/api/miniplatform.jpeg new file mode 100644 index 0000000..cac7ed5 Binary files /dev/null and b/Engine2D/minigame/api/miniplatform.jpeg differ diff --git a/Engine2D/minigame/api/platform.jpeg b/Engine2D/minigame/api/platform.jpeg new file mode 100644 index 0000000..56e0651 Binary files /dev/null and b/Engine2D/minigame/api/platform.jpeg differ diff --git a/Engine2D/minigame/api/require.jpeg b/Engine2D/minigame/api/require.jpeg new file mode 100644 index 0000000..f045e1d Binary files /dev/null and b/Engine2D/minigame/api/require.jpeg differ diff --git a/Engine2D/minigame/cloudapi/README.md b/Engine2D/minigame/cloudapi/README.md new file mode 100644 index 0000000..a2ad75e --- /dev/null +++ b/Engine2D/minigame/cloudapi/README.md @@ -0,0 +1,104 @@ +# 微信小游戏数据库API +“小程序·云开发”是微信团队和腾讯云联合打造的“应用服务中台”。秉承高效、易用、安全、低成本的服务理念，为开发者提供稳定高性能的服务。“小程序·云开发”整合了微信公众平台和腾讯云的核心技术，提供云数据库、云存储、云函数、日志和监控等开发运维能力。通过“小程序·云开发”，开发者可无缝安全调用小程序的开放服务，提升开发效率，快速试错和落地产品。 + +“小程序·云开发”近期新推出的实时数据推送能力，可满足回合制游戏、聊天室、世界消息等小游戏场景需求，具备多端实时数据同步能力，让小游戏开发更高效便捷。 + +开发者可以在微信小游戏里直接调用API，就可以操作数据库的读写存储等功能，无需搭建服务器。提高开发效率，节约成本。 +[云开发介绍](https://developers.weixin.qq.com/minigame/dev/wxcloud/basis/getting-started.html) [数据库操作API](https://developers.weixin.qq.com/minigame/dev/wxcloud/reference-client-api/database/) + +### 一.使用前准备：开通云开发功能 +* 1.创建一个新的小游戏项目，勾选 `小程序.云开发`。 **注意：不能使用测试号** + +![](p1.png) + +* 2.在左上方的工具栏里点击`云开发` + +![](p2.png) + +* 3.在弹出的面板里点击`开通`,后续配置一些参数 + +![](p3.png) + +* 4.云开发功能开通完成后，在老项目的 `project.config.json` 中增加一个字段 `"cloudfunctionRoot": "cloudfunction/"`，指定云函数的本地目录 + +### 二.设置数据库 +* 1.打开云开发控制台 -> 数据库 -> `+` 创建一个名为 `logs` 的集合名称。 +* 2.点击 `添加记录`，使用系统自动生成的 id 创建一条记录。这个 id 在代码中会使用到。 +* 3.点击 `添加字段`，字段名称为 `content`，类型为 `array` +![](p4.png) +* 4.切换到 `权限设置`面板，把权限设置为 `所有用户可读，仅创建者可读写` +![](p5.png) + + +### 三.创建云函数 +因为数据库的权限问题，普通用户要想写入数据，必须使用云函数 + +* 1.首先在微信小游戏项目中创建一个 `cloudfunction` 文件夹，就是我们刚才在 `project.config.json` 中配置的。然后在微信开发者工具中右键单击这个文件夹,选择 `新建 Node.js 云函数`，然后创建一个名为 `addLog` 的云函数文件夹 + +![](p6.png) + + +* 2.将 `addLog` 文件夹内的 `index.js` 代码修改如下： + +~~~javascript +// 云函数入口文件 +const cloud = require('wx-server-sdk') +cloud.init() +// 云函数入口函数 +exports.main = async (event, context) => { + let newValue = event.value; + //获取数据库的引用 + const db = cloud.database() + //获取数据库中的数组 + let oldData = await db.collection('logs').doc('9390f2ff-0318-4826-87d8-78bf31568cab').get() + //获取内容的数组 + let content = oldData.data.content + //加入新的数据 + content.push(newValue) + //更新服务器上的数据 + let newData = await db.collection('logs').doc('9390f2ff-0318-4826-87d8-78bf31568cab').update({ + data:{ + content:content + } + }) + return newData +} +~~~ +* 3.右键在 `addLog` 文件夹上点击 `上传并部署：云端安装依赖` + + + + +### 四.代码调用 +* 1.增加服务器上的数据，只要调用刚才创建的 `addLog` 云函数就可以了。 + +~~~javascript +wx.cloud.callFunction({ + name: "addLog", + data: { + value: "abc" + Math.floor(Math.random() * 100) + }, + success: function (res): any { + console.log("增加信息成功", res.result) + }, + fail: function (err): any { + console.log("err", err) + } +}) +~~~ +* 2.获取服务器上的数据 + +~~~javascript +const db = wx.cloud.database() + +db.collection('logs').doc('9390f2ff-0318-4826-87d8-78bf31568cab').get().then(res => { + console.log('获取数据', res.data.content) +}) +~~~ + +本示例演示了如何增加和查询数据，前端调用 API 即可，不需要后端的开发工作，简化了开发流程。 + + +访问官网查询更多的[数据库操作API](https://developers.weixin.qq.com/minigame/dev/wxcloud/reference-client-api/database/) + +[本示例Demo的下载地址](http://tool.egret-labs.org/DocZip/engine/tencent/cloudapi.zip) 需要将里面的 appID 和数据库相关参数修改成您自己的才可以测试使用。 diff --git a/Engine2D/minigame/cloudapi/p1.png b/Engine2D/minigame/cloudapi/p1.png new file mode 100644 index 0000000..e75354f Binary files /dev/null and b/Engine2D/minigame/cloudapi/p1.png differ diff --git a/Engine2D/minigame/cloudapi/p2.png b/Engine2D/minigame/cloudapi/p2.png new file mode 100644 index 0000000..f47da34 Binary files /dev/null and b/Engine2D/minigame/cloudapi/p2.png differ diff --git a/Engine2D/minigame/cloudapi/p3.png b/Engine2D/minigame/cloudapi/p3.png new file mode 100644 index 0000000..e4d67b0 Binary files /dev/null and b/Engine2D/minigame/cloudapi/p3.png differ diff --git a/Engine2D/minigame/cloudapi/p4.png b/Engine2D/minigame/cloudapi/p4.png new file mode 100644 index 0000000..c057612 Binary files /dev/null and b/Engine2D/minigame/cloudapi/p4.png differ diff --git a/Engine2D/minigame/cloudapi/p5.png b/Engine2D/minigame/cloudapi/p5.png new file mode 100644 index 0000000..81cce23 Binary files /dev/null and b/Engine2D/minigame/cloudapi/p5.png differ diff --git a/Engine2D/minigame/cloudapi/p6.png b/Engine2D/minigame/cloudapi/p6.png new file mode 100644 index 0000000..2bfa4fa Binary files /dev/null and b/Engine2D/minigame/cloudapi/p6.png differ diff --git a/Engine2D/minigame/contrast/README.md b/Engine2D/minigame/contrast/README.md new file mode 100644 index 0000000..57d6563 --- /dev/null +++ b/Engine2D/minigame/contrast/README.md @@ -0,0 +1,83 @@ + +### 什么是 HTML5 游戏 + +HTML5 是 HTML 最新的修订版本，2014 年 10 月由万维网联盟（W3C）完成标准制定。目标是取代 1999 年所制定的 HTML4.01 和 XHTML1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。 + +广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。HTML5 添加了许多新的语法特征，其中包括 video、audio 和 canvas 元素，同时集成了 SVG 内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。 + +HTML5 游戏，简单来讲，可以看作是移动端的页游，无需下载软件即可体验。 + +##### 优点 + +* 即点即玩，碎片时间体验 +* 跨平台，手机、PC 均可体验 +* 流量成本低廉，易于推广 +* 开发成本低，快速迭代 + +##### 缺点 + +* 兼容性低，需要分别处理 +* 基础设备不完善，体验不好 +* 原生接口无法调用，游戏丰富度不够 +* 游戏性能需要提高，表现效果不够强 + + +### 什么是 原生游戏 + +原生游戏也称手机游戏，是指运行于手机上的手机客户端软件。由于是运行在手机上的客户端软件，所以可以方便的调用手机的摄像头、麦克风等原生接口，可以大大提高 原生游戏的游戏体验。而且，原生游戏可以直接调用 OpenGL 进行图像渲染，保证可以做出炫酷的 2D、3D 游戏。 + +##### 优点 + +* 原生接口调用，增强游戏丰富度 +* 游戏性能很高，表现效果很强 +* 引擎支持成熟，开发效率高 + +##### 缺点 + +* 包体过大，下载缓慢 +* 竞争激烈，用户获取成本高昂 +* 无法跨平台使用，影响分发 + + +### 什么是 小游戏 + +小游戏是一种即点即玩、无需下载的新的游戏体验形式，它可以让用户以全新的方式在微信上体验游戏。借助于微信社交关系链，游戏内可以显示积分排名等信息，而且用户还可以和好友进行竞技 PK。 + +##### 优点 + +* 即点即玩，碎片时间体验 +* 开发成本低，快速迭代 +* 原生接口调用，增强游戏丰富度 +* 游戏性能很高，表现效果很强 + +##### 缺点 + +* 只能在微信平台使用 +* 目前成功案例过少 + + +### 小游戏与 HTML5游戏、原生游戏对比 + +##### 表格 + +下表是根据即点即玩、跨平台、原生接口调用、性能、包体等方面进行的横向对比。 + +|类别|小游戏|HTML5 游戏|原生游戏| +|--|--|--|--| +|即点即玩|是|是|否| +|入口|微信|可以打开网页的地方|手机桌面| +|跨平台|否|是|否| +|原生接口调用|是|否|是| +|包体|小|小|大| +|流量成本|低|低|高| +|留存|高|低|高| +|性能|中|低|高| + + +##### 说明 + +小游戏不等于 原生游戏，也不等于 HTML5 游戏，小游戏可以看做是基于 Runtime 的 HTML5 游戏。 + +正因为这个结构，小游戏可以做到很多 HTML5 游戏做不到的事，比如性能可以无限接近 原生游戏，比如可以调用摄像头、麦克分、微信支付等原生接口；小游戏也可以做到很多 原生游戏做不到的事，比如包体极小 2 秒下载体验。 + +除此之外小游戏还解决了一直困扰 HTML5 游戏的二次进入的问题，小游戏可以通过微信下拉联系人列表显示最近小程序进行二次进入。 \ No newline at end of file diff --git a/Engine2D/minigame/introduction/README.md b/Engine2D/minigame/introduction/README.md new file mode 100644 index 0000000..aba2489 --- /dev/null +++ b/Engine2D/minigame/introduction/README.md @@ -0,0 +1,58 @@ +### 什么是小游戏 + +12 月 28 日消息，微信 iOS 版更新到 6.6.1 版本。该版本有两大亮点： + +* 小程序功能升级。主要包括 + * 微信在主界面新增了小程序任务栏的功能 + * 小程序菜单进行了升级，并提供小程序间快速切换的功能 + * 开放了小游戏开发文档和开发者工具 +* 小程序支持新类目——小游戏 + +![](upgrade.jpg) + +### 如何体验小游戏 + +#### 直接搜索「跳一跳」 + +你可以直接通过搜索框搜索「跳一跳」如下图所示 + +![](search.png) + +点击「跳一跳」即可体验小游戏 + +#### 在「发现」-「游戏」-「小游戏」中体验 + +当然，你也可以到「发现」-「游戏」-「小游戏」体验小游戏 + +![](game.png) + + +#### 快速启动小游戏 + +为了让用户更便捷地启动和使用小程序，微信在最新版 6.6.1 的主界面中，增加了小程序任务栏。用户可以通过下拉的动作，唤出任务栏，打开最近使用过的小程序或进入小程序历史列表。 + +![](switch.jpg) + +### 如何快速开发小游戏 + +小游戏的运行环境在 iOS 上是 JavaScriptCore，在 Android 上是 V8，都是没有 BOM 和 DOM 的运行环境，没有全局的 document 和 window 对象。因此当你希望使用 DOM API 来创建 Canvas 和 Image 等元素的时候，会引发错误。 + +也就是说如果直接使用主流的 HTML5 游戏引擎如 Egret、Cocos、Laya 开发的游戏是无法直接运行在小游戏上的。 + +小游戏为主流 HTML5 游戏引擎的适配提供了 Adapter，Adapter 可以使用 wx API 模拟 BOM 和 DOM。顾名思义，这是对基于浏览器环境的游戏引擎在小游戏运行环境下的一层适配层，使游戏引擎在调用 DOM API 和访问 DOM 属性时不会产生错误。 + + +##### HTML5 游戏引擎是否支持小游戏 + +在微信发布新版本后，白鹭引擎第一时间增加了对于微信小游戏开发的支持，开发者只需要使用白鹭引擎的最新版本，通过使用白鹭引擎完整工具流，就可以快速创建、开发与发布微信小游戏，而无需过多的关注底层技术细节。 + +![](egret.png) + + +##### 已有 HTML5 游戏是否可以转换为小游戏 + +首先，已有 HTML5 游戏是可以转换为小游戏的。 + +但是，Egret、Cocos、Laya 为了适配小游戏或多或少都修改了一些底层的业务逻辑，所以需要 HTML5 游戏先升级到对应引擎的最新版，然后按照小游戏的要求修改部分业务逻辑即可发布为小游戏。 + +以 Egret 为例，需要开发者最低将引擎版本升级到 5.1.1 版本，然后根据小游戏的资源、代码标准稍作修改即可发布为小游戏。 \ No newline at end of file diff --git a/Engine2D/minigame/introduction/egret.png b/Engine2D/minigame/introduction/egret.png new file mode 100644 index 0000000..0f635db Binary files /dev/null and b/Engine2D/minigame/introduction/egret.png differ diff --git a/Engine2D/minigame/introduction/game.png b/Engine2D/minigame/introduction/game.png new file mode 100644 index 0000000..a16676f Binary files /dev/null and b/Engine2D/minigame/introduction/game.png differ diff --git a/Engine2D/minigame/introduction/search.png b/Engine2D/minigame/introduction/search.png new file mode 100644 index 0000000..faa99ba Binary files /dev/null and b/Engine2D/minigame/introduction/search.png differ diff --git a/Engine2D/minigame/introduction/switch.jpg b/Engine2D/minigame/introduction/switch.jpg new file mode 100644 index 0000000..ab722a8 Binary files /dev/null and b/Engine2D/minigame/introduction/switch.jpg differ diff --git a/Engine2D/minigame/introduction/upgrade.jpg b/Engine2D/minigame/introduction/upgrade.jpg new file mode 100644 index 0000000..1ca3eba Binary files /dev/null and b/Engine2D/minigame/introduction/upgrade.jpg differ diff --git a/Engine2D/minigame/limit/README.md b/Engine2D/minigame/limit/README.md new file mode 100644 index 0000000..a1e76af --- /dev/null +++ b/Engine2D/minigame/limit/README.md @@ -0,0 +1,81 @@ + +### 4M 说法的由来 + +小游戏官方文档目前并没有明确指出包体不能超过 4M，但是从各个 CP 的反馈得到的结果是不能超过 4M，以后可能放宽限制，但是目前还是以 4M 为准优化游戏。 + +### 4M 到底指的是什么 + +##### 文件夹体积 + +提到小游戏不能超过 4M 大家的第一反应是就是引擎发布后的游戏文件夹大小或者引擎发布为小游戏文件夹的大小。 + +* 第一，这个包体肯定不是指引擎发布 H5 游戏后的游戏文件夹大小 +* 第二，这个包体也不是引擎发布为小游戏文件夹的大小 + +__工具截图说明__ + +![](tool1.png) + +如上图所示，点击预览后，开发者工具会将本地代码进行压缩，然后上传到小游戏服务器上。点击开发者工具右上角的「详情」我们可以看到，引擎发布为小游戏的文件夹大小是本地代码大小 1056KB，而实际上传到小游戏服务器的代码大小为 732KB，所以 4M 是指我们小游戏点击预览后经过开发者工具压缩后的包体体积。 + +##### 代码压缩 + +经过我们实验，对本地代码进行去格式和代码压缩对于最终的代码体积几乎没有影响，比如 + +![](tool2.png) + +如上图所示，我在本地对 egret.wxgame.js 和 weapp-adapter.js 进行代码去格式化及压缩，本地代码缩小到了 789KB，但是预览代码包体积依然是 732KB，所以衡量大家代码包体的最终标准是预览时的包体大小。 + +##### 小结 + +如果在「详情」-「上次预览」的大小不超过 4M 即符合标准。 + +### 一般 H5 游戏如何做？ + +在开始分析小游戏之前我们先回顾一下一般 H5 游戏的做法。 + +##### 轻度游戏做法 + +业内一般的标准是 H5 游戏最好保证玩家在看到首屏界面之前加载的代码及资源在 2M 以内，以《猫来了》为例 + +![](tool3.png) + +如上图所示，《猫来了》进入主场景前加载的所有资源在 2M 以内，剩下的 0.9M 是进入主场景以后加载的，这样能够让玩家尽可能短的时间内看到游戏画面。 + +##### 中重度游戏做法 + +还有一种方式就是在 2M 以内可以看到服务器选择界面或者角色选择界面，选择服务器后再加载 2M 左右的资源，这种方式适合比较重度的游戏，以《梦道》为例 + +![](tool4.png) + +如上图所示，首屏加载 2M 以内，进入选择服务器界面后后台加载了 1.1M 的资源，这种方式也是可行的。 + +![](tool5.png) + +选择服务器后又加载了 2M 左右的资源，进入选择角色界面，然后在后台加载了 6M 资源，这样把大量资源分到一个个小环节中分解掉。选择角色后再加载很少的一部分资源就可以直接进入游戏。 + +##### 小结 + +以上是处理首屏加载的两种方式，接下来咱们看一下小游戏应该如何做才能及如何小游戏的要求又能最大可能的保证玩家的游戏体验。 + +### 小游戏建议如何做 + +##### 欢乐消消消 + +经过了 H5 游戏首屏加载方式的分析，想必大家对于小游戏的加载方式也有些想法。下面以《欢乐消消消》为例 + +![](mobile1.jpg) + +如上图所示，4M 以内的资源在上述界面加载，如果像《跳一跳》一样，资源很少这个界面后就可以直接进入游戏，但是一般的商业游戏资源量没有这么少，所以《欢乐消消消》上述页面加载完毕后，启动了游戏本身的加载页面如下图 + +![](mobile2.jpg) + +第一个界面需要遵守小游戏不能超过 4M 的限制，但是下面这个页面就可以用来加载远程资源了，当然为了用户体验还是需要保证这次加载的资源大小在 2M 左右，其它的资源在进入主界面后在后台加载。 + +##### 小结 + +大家可以把所有代码加上 loading 界面的素材放到初始包体中，后续主界面需要的资源在 loading 界面加载，然后进入主界面是一个比较稳妥的方式。 + +### 如果代码逻辑超过了 4M 怎么办 + +但是有些游戏代码逻辑过于庞大，导致仅代码体积就超过了 4M，如果游戏包含了 EUI，白鹭引擎后续版本会对 EUI 文件体积进行优化，另一种方式是对游戏代码进行优化，这一部分我们会专门以一篇文章向大家讲解。 \ No newline at end of file diff --git a/Engine2D/minigame/limit/mobile1.jpg b/Engine2D/minigame/limit/mobile1.jpg new file mode 100644 index 0000000..e6cb8a1 Binary files /dev/null and b/Engine2D/minigame/limit/mobile1.jpg differ diff --git a/Engine2D/minigame/limit/mobile2.jpg b/Engine2D/minigame/limit/mobile2.jpg new file mode 100644 index 0000000..735846e Binary files /dev/null and b/Engine2D/minigame/limit/mobile2.jpg differ diff --git a/Engine2D/minigame/limit/tool1.png b/Engine2D/minigame/limit/tool1.png new file mode 100644 index 0000000..06b56a9 Binary files /dev/null and b/Engine2D/minigame/limit/tool1.png differ diff --git a/Engine2D/minigame/limit/tool2.png b/Engine2D/minigame/limit/tool2.png new file mode 100644 index 0000000..360a5ea Binary files /dev/null and b/Engine2D/minigame/limit/tool2.png differ diff --git a/Engine2D/minigame/limit/tool3.png b/Engine2D/minigame/limit/tool3.png new file mode 100644 index 0000000..cf1c48a Binary files /dev/null and b/Engine2D/minigame/limit/tool3.png differ diff --git a/Engine2D/minigame/limit/tool4.png b/Engine2D/minigame/limit/tool4.png new file mode 100644 index 0000000..ae7e737 Binary files /dev/null and b/Engine2D/minigame/limit/tool4.png differ diff --git a/Engine2D/minigame/limit/tool5.png b/Engine2D/minigame/limit/tool5.png new file mode 100644 index 0000000..39a55e7 Binary files /dev/null and b/Engine2D/minigame/limit/tool5.png differ diff --git a/Engine2D/minigame/minigameFAQ/README.md b/Engine2D/minigame/minigameFAQ/README.md new file mode 100644 index 0000000..77331d4 --- /dev/null +++ b/Engine2D/minigame/minigameFAQ/README.md @@ -0,0 +1,165 @@ +首先，再次强调一些微信小游戏的基础技术限制： + +* 不允许操作 DOM、BOM、如果必须改成小游戏相应的 API 调用方式，目前引擎会自动引入weapp-adapter.js 文件做兼容处理。 + +* 不允许动态执行代码的能力，eval、setTimeout 和 setInterval 函数的第一个参数不能为字符串，Function构造函数的参数不能为字符串。 + + +* 关于小游戏体积问题，小游戏的体积不得大于 4M，缓存不得大于 50M。具体的解释为： + + 1. 本地的代码和资源不得超过 4M。 + 2. 单个小游戏项目缓存的文件不能超过 50M，目前当缓存超过 50M 时后续的资源将不会缓存，未来新版的 AssetsManager 将会允许开发者自定义哪些资源需要缓存的机制。 + 3. 不允许从服务器下载脚本文件。 + + +接下来向诸位开发者汇总一下这两天开发者普遍遇到的问题以及解决方案： + +### 问题 + +#### 我在使用白鹭引擎 5.0 / 4.x / 3.x 版本，可以直接转换为微信小游戏么？ + +答：目前我们只支持白鹭引擎 5.1.x 版本发布为微信小游戏，推荐您使用最新的 5.1.2 版本。[升级教程](../../minigame/publish/README.md) + +#### 我在使用 egret res 库，5.1.2 创建的新项目使用的是 assetsmanager 库，这两个库有区别么？ + +答：assetsmanager 是 res 的替代方案，这两者的 API 有 90% 保持一致，但是仍然有一些小区别，主要是在 RES.Analyzer 上，如果您遇到了相关问题，您可以在 egretProperties.json 中修改模块配置，从 assetsmanager 修改回 res 并执行 egret clean ，这样就可以换成 res 资源管理库了。更改如图所示： + +![img](x02.png) + + +#### 微信开发者工具无法识别项目或者无法读取 manifest.js 文件 + +答：请确保您的微信开发者工具版本是 v1.02.1712280[下载连接](https://mp.weixin.qq.com/debug/wxagame/dev/devtools/download.html?scene=21#wechat_redirect)，遇到识别项目或者无法读取manifest.js 文件问题时先写检查下版本是不是太低导致的 + + +#### egret 设置横屏后微信小游戏不生效: + +答：需要在微信小游戏的项目中找到 game.json 文件，deviceOrientation 参数设置为 landscape，更多设置参考[官方文档](https://mp.weixin.qq.com/debug/wxagame/dev/index.html?t=201813)，如图： + +![img](x01.png) + +下一引擎版本将会自动切换屏幕旋转模式 + + + +#### 当老项目（5.1.2以前）升到到最新版时，发布小游戏项目报错： + +答：升级成功后，请首先保证 HTML5 版本可以正常运行，然后再尝试发布为微信小游戏，目前我们遇到了多位开发者通过创建 5.1.2 新项目后拷贝老项目代码和素材的方式尝试升级，由于忽视了修改 egretProperties.json 中的模块配置，导致运行失败的问题。[升级教程](../../minigame/publish/README.md) + +#### 在游戏使用到 egret.getDefinitionByName() 报错，找不到对应类时： + +答：需要将要反射的类挂载到 window 对象下，例如有个 class People{} 类，需要添加代码 window["People"] = People。[示例demo下载](http://developer.egret.com/cn/statics/downs/testglobal.zip) + +#### 在 EUI 中使用自定义组件，发布到微信小程序的 default.thm.js 报错提示找不到自定义组件，错误如图： + +![img](x03.png) + +答：参考上一条回答，需要将自定义组件暴露到全局作用域。 + +#### 在小游戏中报错 “Main is not defined” 时， + +答：请查看游戏的入口类名是否为 Main，如不是请修改为 Main。 + + +#### 找不到 "不检验安全域名、TLS 版本以及 HTTPS 证书" 时如何解决： + +答：目前可以在 project.config.json 中手动设置 urlCheck 为 false。 + +#### 第三方库 Proto Buffer 微信小游戏中使用报错： + +答： 因为 protobuf.js 内部包含了加载的逻辑，这部分逻辑需要适配到微信小游戏的 API 才可以使用，目前正在解决这个问题。 + +#### 在小游戏中播放声音停止后，立即播放会导致没有声音： + +答：播放的声音停止后延迟 100ms 再进行播放。 + +#### 短音效（长度小于 1s 的音效）连续播放会有卡顿、播放不出来等问题： + +答：小游戏的支持包升级到 v1.0.15 以上。 + +#### 小游戏屏幕出现闪烁问题： + +答：把开放数据域和主域的帧率都改成 60 帧。 + +#### 设置声音的音量无效。 + +答：目前不要设置声音的音量，由于小游戏原生的声音设置 volume 无效，我们正在和微信团队配合，争取尽快解决这个问题。 + +#### 在 iphone 7plus ios10 系统中会出现文字排版错误。 +答：解决方法：在进入游戏前先判断一下机型和系统型号，如果是 7plus，请切换到 canvas 模式来避免。 + +#### 使用 navigator.userAgent 在小游戏中获取信息时无论是什么手机的返回值都是一样的 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Mobile/14E8301 MicroMessenger/6.6.0 MiniGame NetType/WIFI Language/zh_CN', + +答：目前请暂时避免这种使用方式，这个问题已经反馈给微信团队。 + +#### 开发者已经安装了最新版微信开发工具，但是执行 egret run --target wxgame 命令时还是提示请安装最新版开发者工具。 + + +答：请开发者检查下自己的操作系统是否是 32位 Windows，这是 5.1.2 版本在 32位 Windows系统上的 BUG，我们会尽快修复，在此之前，建议开发者使用 egret publish --target wxgame 发布后，手动使用微信开发者工具打开。 + +#### 使用 eui 皮肤时报错 'parseFromString' of undefined，如何解决。 + +答：检查是否使用了 嵌入EXML到代码中，例： + +~~~javascript + var className = "skins.ButtonSkin"; + var exmlText = ` + ... + `; +~~~ + +需要改成单独的皮肤文件。 + + +#### 为什么真机关了调试模式就黑屏。 + +答：这个问题的本质原因是，您现在没有 appId，用的是体验账号，如果关闭调试模式的话，会触发微信的 request 域名验证，所以就失败了，这个问题只能等到微信开放注册机制才能解决。 + + +#### 目前白鹭小游戏支持解析 xml 了吗，该如何使用？ + +答： +* 升级小游戏支持库到1.0.12版本 +* 在微信开发者工具的 Console 控制台输入 **egret.wxgame.version** 应输出1.0.12 + +* 访问 [这里](./xmldom.zip) 下载小游戏xml支持库 +* 解压支持库，并拷贝到微信小游戏目录 +* 打开小游戏目录中 game.js +* 在 **egret.runEgret** 之前加入代码：**window.DOMParser = require("./xmldom/xmldom.js").DOMParser;** + +#### 为什么引入第三方库报 `第三方库 is not defined` 错误. + +答： +我们要再次强调小游戏有很多的限制，首先检查我们所使用的第三方库是否符合小游戏的标准，具体可以参考小游戏官方文档，如果不符合规范，我们只能自己来修改这个库以达到标准。后期我们会整理常用的库提供给开发者。 +经检查适合小游戏的标准，但还是会报我们使用的 **第三放库未定义**，需要我们把第三方库挂在到全局对象 window 上，我们可以在 wxgame.ts 的文件中添加。例如我们加入 zlib 库。如图： + +![](x04.png); + +#### 在 wing 调用小游戏开发工具，例如使用 run 命令，有如图提示： +![](x05.png); + +答： +请您直接使用微信开发者工具 打开这个小游戏项目即可。 + + +#### 升级到 5.1.5 时会报 `isMobile of function Capabilities` 错误 + +答： +升级小游戏包到最新版本（1.0.12）后，重新生成微信小游戏项目，可以解决。 + +今天就和大家分享这么多。有关更多的问题请您到 egret 论坛 bbs.egret.com 参与讨论。 + +#### WebGLRenderContext 在模拟器里报错 +![](error-5.png) + + window 系统下，部分独立显卡对模拟器的支持有问题，需要切换成集成显卡。 + +#### 为什么我动态设置帧频没有效果 +答：小游戏平台只能在 index.html 里设置，不能通过 stage.frameRate 方法动态修改 + +#### 为什么加载图片时，在模拟器中产生很多类似这种的报错信息 +![](error-6.png) + +答：这是为了解决骁龙CPU的手机上产生两份纹理引起的，只会在模拟器上报错，真机上没有影响。把微信小游戏项目里 `library/image.js` 这个`log`注释掉就可以了。 + +![](error-7.png) diff --git a/Engine2D/minigame/minigameFAQ/error-5.png b/Engine2D/minigame/minigameFAQ/error-5.png new file mode 100644 index 0000000..8bba5bb Binary files /dev/null and b/Engine2D/minigame/minigameFAQ/error-5.png differ diff --git a/Engine2D/minigame/minigameFAQ/error-6.png b/Engine2D/minigame/minigameFAQ/error-6.png new file mode 100644 index 0000000..ab57281 Binary files /dev/null and b/Engine2D/minigame/minigameFAQ/error-6.png differ diff --git a/Engine2D/minigame/minigameFAQ/error-7.png b/Engine2D/minigame/minigameFAQ/error-7.png new file mode 100644 index 0000000..10cac9c Binary files /dev/null and b/Engine2D/minigame/minigameFAQ/error-7.png differ diff --git a/Engine2D/minigame/minigameFAQ/x01.png b/Engine2D/minigame/minigameFAQ/x01.png new file mode 100644 index 0000000..3ff2ea8 Binary files /dev/null and b/Engine2D/minigame/minigameFAQ/x01.png differ diff --git a/Engine2D/minigame/minigameFAQ/x02.png b/Engine2D/minigame/minigameFAQ/x02.png new file mode 100644 index 0000000..c93aaac Binary files /dev/null and b/Engine2D/minigame/minigameFAQ/x02.png differ diff --git a/Engine2D/minigame/minigameFAQ/x03.png b/Engine2D/minigame/minigameFAQ/x03.png new file mode 100644 index 0000000..8125284 Binary files /dev/null and b/Engine2D/minigame/minigameFAQ/x03.png differ diff --git a/Engine2D/minigame/minigameFAQ/x04.png b/Engine2D/minigame/minigameFAQ/x04.png new file mode 100644 index 0000000..70b2b7b Binary files /dev/null and b/Engine2D/minigame/minigameFAQ/x04.png differ diff --git a/Engine2D/minigame/minigameFAQ/x05.png b/Engine2D/minigame/minigameFAQ/x05.png new file mode 100644 index 0000000..0785a47 Binary files /dev/null and b/Engine2D/minigame/minigameFAQ/x05.png differ diff --git a/Engine2D/minigame/minigameFAQ/xmldom.zip b/Engine2D/minigame/minigameFAQ/xmldom.zip new file mode 100644 index 0000000..6a66ce8 Binary files /dev/null and b/Engine2D/minigame/minigameFAQ/xmldom.zip differ diff --git a/Engine2D/minigame/openDataContext/README.md b/Engine2D/minigame/openDataContext/README.md new file mode 100644 index 0000000..c241a81 --- /dev/null +++ b/Engine2D/minigame/openDataContext/README.md @@ -0,0 +1,87 @@ +## 开放数据域的使用 + +### 小游戏开放注册并添加了关系链数据，这一篇主要讲述利用关系链数据开发社交类游戏。 + + ![](./a05.jpg) + + * 这张图片是来自于微信小游戏的跳一跳排行榜，小游戏不但开放了用户注册也把关系链数据开放了出来，有了这些数据，普通的开发者也可以开发出类似的排行榜功能，有了关系链数据，会大大增加游戏玩法，玩家之间的互动，给游戏带来了更大的趣味性。 + + * 小游戏主要提供了 ~~~wx.getFriendCloudStorage()~~~ 和 ~~~wx.getGroupCloudStorage()~~~ 两个 API 接口。但是为了保护关系链数据，小游戏增加了开放数据域的概念，开放数据域只能在离屏画布（sharedCanvas）上使用，这块画布和主域是可以共享的。我们需要把 sharedCanvas 绘制到主域上，这个过程需要开发者接触底层的 canvas 底层 API，对于不熟悉的同学会带来很大的不便，所以白鹭引擎对做了进一步的优化与封装。 + + * 请开发者先阅读微信小游戏开放数据的 [文档](https://mp.weixin.qq.com/debug/wxagame/dev/tutorial/open-ability/open-data.html?t=2018323) 这样对关系链会有更好的理解。 + +### 使用示例： + +1、白鹭引擎使用开放数据域的原理简介。关系链数据必须在开放数据域中获取。引擎在主域中使用 `window["sharedCanvas"]` 接口获取到 sharedCanvas，然后直接使用 sharedCanvas 作为 `egret.Bitmap` 的 `egret.BitmapData` ，即可将开放数据域添加在主域的egret舞台上。这样在使用上带来了极大的方便性。 + +2、由于 `开放数据域 是一个封闭、独立的 JavaScript 作用域`，因此开放数据域不能与主域共用一套 egret 文件。但如果引入了两套egret 文件又会使得小游戏包体的体积较大。为了减少发布后小游戏的大小，开发者需要直接在 `openDataContext/index.js` 文件中使用Canvas API进行画面绘制，有效减少了包体体积。为了方便开发者高效快速的使用开放数据域和离屏画布，该文件当中已经写好一套可直接使用的排行榜绘制逻辑，开发者可直接进行修改或资源替换，来实现预期的开放数据域的使用。 + +3、离屏画布的显示对象可直接在主域中通过以下的方式进行创建。 + +~~~javascript +//创建开放数据域显示对象 +var platform = window.platform; +this.bitmap = platform.openDataContext.createDisplayObject(null,this.stage.stageWidth, this.stage.stageHeight); +~~~ + +该接口在发布后的项目文件`platform.js`当中可进行查看。创建后的显示对象为 `egre.Bitmap` ，可直接添加到舞台上。 + +可通过与主域与开放数据域的单向数据接口进行通讯。主域可向开放数据域单方向发送消息。 + +~~~javascript + +//主域向子域发送自定义消息 +platform.openDataContext.postMessage({ + isDisplay: this.isdisplay, + text: 'hello', + year: (new Date()).getFullYear(), + command: "open" +}); + +~~~ + +子域可通过监听事件的方式获取到主域发送过来的自定义信息。 + +~~~javascript +wx.onMessage((data) => { + if (data.command == 'open') { + //显示开放域 + if (!hasCreateScene) { + //创建并初始化 + hasCreateScene = createScene(); + ... + } +} +~~~ + +开发者可通过这种方式通知开放域的显示与关闭，或者向开发数据域中传输数据。 + +4、开放数据域的绘制文件中已经拥有一个通过Canvas API绘制，较为完整的排行榜示例，开发者可以通过修改或者重构该文件来使用离屏画布。 + +index.js渲染出的默认画面如下图所示。 + +![](./a06.png) + +开发者可通过直接修改 `index.js` 中的 显示属性 数据来达到自己的预期效果，例如 修改`perPageMaxNum`可以改变每页最多显示的玩家个数， 修改 `fontSize` 可以改变字体的大小， 修改 `lastButtonX lastButtonY`来改变向上翻页按钮的位置。这些属性都可以在 `init()` 初始化函数中进行修改。 + +显示属性示例 + +![](./a08.png) + +init函数示例 + +![](./a07.png) + +建议不要使用固定数字的数值，而是以 `stageWidth stageHeight` 舞台宽高作为基数，以尽量减少不同手机出现的适配问题。 + +6、开放数据域文件夹中的 `assets` 文件夹负责存放开放数据域中需要用到的图片资源，而且开放数据域也可以跟主域使用相同的图片资源。但需要注意的是，开放数据域的资源需要单独加载。开发者可通过修改 `index.js` 文件中的 `assets` 资源组来进行资源加载，具体见示例 demo。 + +![](./a09.png) + + +### 注意事项 + * 一定要帧率为 60 帧。避免屏幕闪烁。 + * 开放数据域尽量少使用库。 + * 按照示例 demo 的流程，确认引擎、以及微信开发者工具都是最新了。开放数据还是报错请重新启动微信开发者工具。 + +今天就先写到这里，具体可以参考示例 demo，如您在开发过程中遇到任何问题，请登录官方论坛进行[讨论](http://bbs.egret.com)。示例 [demo](https://github.com/egret-labs/egret-target-wxgame/tree/master/demos/openDataContext) 下载。 diff --git a/Engine2D/minigame/openDataContext/a01.jpg b/Engine2D/minigame/openDataContext/a01.jpg new file mode 100644 index 0000000..fecda6d Binary files /dev/null and b/Engine2D/minigame/openDataContext/a01.jpg differ diff --git a/Engine2D/minigame/openDataContext/a02.jpg b/Engine2D/minigame/openDataContext/a02.jpg new file mode 100644 index 0000000..130c53d Binary files /dev/null and b/Engine2D/minigame/openDataContext/a02.jpg differ diff --git a/Engine2D/minigame/openDataContext/a03.jpg b/Engine2D/minigame/openDataContext/a03.jpg new file mode 100644 index 0000000..1c44afc Binary files /dev/null and b/Engine2D/minigame/openDataContext/a03.jpg differ diff --git a/Engine2D/minigame/openDataContext/a04.jpg b/Engine2D/minigame/openDataContext/a04.jpg new file mode 100644 index 0000000..7ab826d Binary files /dev/null and b/Engine2D/minigame/openDataContext/a04.jpg differ diff --git a/Engine2D/minigame/openDataContext/a05.jpg b/Engine2D/minigame/openDataContext/a05.jpg new file mode 100644 index 0000000..68ea1f4 Binary files /dev/null and b/Engine2D/minigame/openDataContext/a05.jpg differ diff --git a/Engine2D/minigame/openDataContext/a06.png b/Engine2D/minigame/openDataContext/a06.png new file mode 100644 index 0000000..5b52b89 Binary files /dev/null and b/Engine2D/minigame/openDataContext/a06.png differ diff --git a/Engine2D/minigame/openDataContext/a07.png b/Engine2D/minigame/openDataContext/a07.png new file mode 100644 index 0000000..7f9c28b Binary files /dev/null and b/Engine2D/minigame/openDataContext/a07.png differ diff --git a/Engine2D/minigame/openDataContext/a08.png b/Engine2D/minigame/openDataContext/a08.png new file mode 100644 index 0000000..7fa31a0 Binary files /dev/null and b/Engine2D/minigame/openDataContext/a08.png differ diff --git a/Engine2D/minigame/openDataContext/a09.png b/Engine2D/minigame/openDataContext/a09.png new file mode 100644 index 0000000..901f30d Binary files /dev/null and b/Engine2D/minigame/openDataContext/a09.png differ diff --git a/Engine2D/minigame/package/README.md b/Engine2D/minigame/package/README.md new file mode 100644 index 0000000..a1b7439 --- /dev/null +++ b/Engine2D/minigame/package/README.md @@ -0,0 +1,50 @@ +## 关于微信小游戏中新加入的分包加载 API +-------------------------------- +微信小游戏增加了分包加载功能(微信 6.6.7 客户端)，运用分包功能，小游戏代码包总上限可以从之前的 4 M提升至 8 M。开发者可以根据游戏品类和场景需要，在合适时机加载指定包，提升打开速度，优化用户体验。 + +微信小游戏之所以提供了分包的策略，最主要的目标是希望开发者将包体积尽可能降低，将首屏加载的压力分散到游戏逻辑中，保证尽快给玩家一个可以交互的界面，而不是停留在微信小游戏的启动页中。为此，微信小游戏本次更新中不仅仅更新了分包加载，也在管理后台的运维中心提供了加载性能监控功能，允许开发者针对上述数据数据分析功能，正是希望通过这些数据分析能力帮助开发者更精细化的优化小游戏的加载效率。 + +![](./pic1.jpg) + +因此，将微信的本次更新简单粗暴的理解为“包体积从4M提升到了8M”是片面的。也很不建议开发者直接这样做，因为目前您仍然要兼容微信不存在分包下载的老版本，如果您将您的游戏直接放置了8M的分包，就会在用户首次启动时必须加载完8M资源才能跳出启动页，这也不是很好的用户体验。 + +为此，白鹭引擎的策略是，引入一个 loading.js 的逻辑，并将其与白鹭引擎的核心代码（以及最简化的loading资源）打包为主包，然后在 loading.js 中去动态下载子包，并在下载过程中借助已经加载的白鹭引擎为用户渲染出 Loading 界面。 + +之所以将微信分包策略与白鹭引擎采用这种方式结合，是在效仿页游的分包机制。几乎所有的 Flash 页游都会至少存在两个 SWF 文件（可以近似理解为编译后的代码包文件），第一个SWF文件只负责加载逻辑并保持其体积尽可能小，而真正的业务逻辑由于代码总编译体积很大，都会放在后续加载。 + +最后用一张图概述： +![](./pic2.jpg) + +## 如何在白鹭引擎中使用分包下载 +------------------------ +借助于白鹭引擎 5.1 版引入的新的自定义构建管线功能，您无需升级白鹭引擎至最新版本，而只是在构建管线中添加一些插件，并调整少量逻辑就可以完成此改动。 + +考虑到这项功还没有经过长时间的测试，我们暂时不将该功能集成在引擎里，而是给开发者提供一个示例项目。开发者应首先在引擎提供的示例项目中将该功能跑通，然后再将其应用于您的正式项目。 + +#### 步骤一：下载示例项目 + +您可以在 [https://github.com/himuil/subPackageDemo](https://github.com/himuil/subPackageDemo) 处下载示例项目，该项目可以直接运行看到效果 + +该项目使用了 Egret 5.2.3 版本，但是您也可以将 `egretProperties.json` 中的 `engineVersion` 和 `compilerVersion` 调整为您的引擎版本，我们支持 5.1 以上的版本。 + +#### 步骤二：将该项目移植进您的游戏 + +* 将 scripts/wxgame/subpackage.ts 拷贝进您的项目 +* 修改 config.wxgame.ts，将 ManifestPlugin 替换为 SubPackagePlugin （注意，您需要修改 build 和 publish） +* 修改 config.wxgame.ts 中的 CleanPlugin，将 subpackage 对应的目录清除 +* 将示例项目的 EgretSubpackageLoading.js 拷贝进您的微信小游戏项目 +* 修改微信小游戏项目的 game.json，参考示例项目，引入 subpackages 属性 +* 修改微信小游戏项目的 game.js，参考示例项目，重点是添加调用 wx.loadSubPackage 的逻辑 + +#### 步骤三：高级用法 + +* 您可以通过修改 SubPackagePlugin 的参数和 game.json 的 subpackage 字段配置多个 subpackage +* 您可以在游戏过程运行中，而不是游戏初始化时加载某个 subpackage，比如您可以在游戏启动时只加载一个登陆页面，在用户登陆之后再加载游戏主逻辑。 +* 每个 subpackage 可以包含多个 js 文件 + +## 问题反馈 +-------------------------- + +该功能目前 **尚未在真实项目中得到验证**，如果您希望在您的项目中添加此功能，强烈建议您联系白鹭引擎官方团队，并时刻关注 https://github.com/himuil/subPackageDemo/issues ，我们非常鼓励您在这里提交您的反馈意见。 + + diff --git a/Engine2D/minigame/package/pic1.jpg b/Engine2D/minigame/package/pic1.jpg new file mode 100644 index 0000000..27607d9 Binary files /dev/null and b/Engine2D/minigame/package/pic1.jpg differ diff --git a/Engine2D/minigame/package/pic2.jpg b/Engine2D/minigame/package/pic2.jpg new file mode 100644 index 0000000..496c0d1 Binary files /dev/null and b/Engine2D/minigame/package/pic2.jpg differ diff --git a/Engine2D/minigame/publish/README.md b/Engine2D/minigame/publish/README.md new file mode 100644 index 0000000..cdbd3a1 --- /dev/null +++ b/Engine2D/minigame/publish/README.md @@ -0,0 +1,70 @@ +## 5.1.2 以后的项目 + +* 使用引擎为 5.1.2 引擎以上(包括 5.1.2)按照文档流程发布即可。 + +## 5.1.2 以前的项目 +由于目前的 5.0.x 引擎的项目不能直接升级到 5.1.x，需要我们手动建立一个空的 5.1.2 eui 项目，然后将原项目代码复制过去。 + +* 首先我们使用 launcher 创建一个 5.1.2 新项目。 +* 然后将现有游戏逻辑和资源拷贝至新项目中主要包括 src 目录、resource 目录、修改配置文件 egretProperties 后续无论是 HTML5 版本，iOS / Android 版本还是小程序版本，均使用这个新项目进行后续开发。 +* 全部拷贝以后，先测试下在 H5 中是否正常运行，一定要保证在 H5 中可以正常运行，再进行后续的操作。 +* 还要将 `ThemeAdapter` 类中的 `getTheme` 方法替换如下代码： + +~~~javascript + public getTheme(url: string, onSuccess: Function, onError: Function, thisObject: any): void { + function onResGet(e: string): void { + onSuccess.call(thisObject, e); + } + function onResError(e: RES.ResourceEvent): void { + if (e.resItem.url == url) { + RES.removeEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, onResError, null); + onError.call(thisObject); + } + } + if (typeof generateEUI !== 'undefined') { + egret.callLater(() => { + onSuccess.call(thisObject, generateEUI); + }, this); + } + else { + RES.addEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, onResError, null); + RES.getResByUrl(url, onResGet, this, RES.ResourceItem.TYPE_TEXT); + } + } +~~~ + +## 注意事项： + +* 小程序和小游戏中都移除了动态执行代码的能力，包括以下调用方式：eval 函数、setTimeout、 setInterval 函数第一个参数传入代码字符串执行、使用 Function 传入字符串构造函数、使用 GeneratorFunction 传入字符串构造生成器函数、 + +* 项目中使用了 egret.getDefinitionByName() 方法，需要将要反射的类挂载到全局 window 对象上，例：window["object1"] = object1 的方式。 + +* 项目中使用了自定义组件，需要将自定义组件挂载到全局 window 对象上，例：window["CustomCom"] = CustomCom 的方式。 + +* 检查是否使用了嵌入EXML到代码中，例： + +~~~javascript + var className = "skins.ButtonSkin"; + var exmlText = ` ... + `; +~~~ + +如果有需要改成单独的皮肤文件。 + +* ts 代码和 eui 是不允许相同的命令空间，例如： + +~~~javascript + + + +`; + + +namespace ui { + export class TestNameSpace { + public constructor() { + egret.log("测试命令空间输出"); + } + } +} +~~~ diff --git a/Engine2D/minigame/roadmap/README.md b/Engine2D/minigame/roadmap/README.md new file mode 100644 index 0000000..04cef99 --- /dev/null +++ b/Engine2D/minigame/roadmap/README.md @@ -0,0 +1,5 @@ +微信小游戏上线或将为HTML5行业带来重要利好，为行业带来机遇与挑战，后续发展有待行业从业者共同探索。白鹭科技作为HTML5引擎研发商致力于为开发者提供更为便捷的开发，白鹭引擎后续会与微信团队进行进一步的技术合作，完善使用白鹭引擎开发微信小游戏的开发体验。主要包含： + +* 将微信的文件读写 API 与白鹭引擎资源管理器进行更紧密的集成。 + +* 开发效率与工作流优化。 \ No newline at end of file diff --git a/Engine2D/minigame/subdomainCourse/README.md b/Engine2D/minigame/subdomainCourse/README.md new file mode 100644 index 0000000..6530fdb --- /dev/null +++ b/Engine2D/minigame/subdomainCourse/README.md @@ -0,0 +1,70 @@ + +## egrte 使用项目示例 + +### 开发环境准备 + +* Egret Launcher 1.0.32 以上版本（包括 1.0.32） +* 白鹭引擎 5.1.2 以上版本（包括 5.1.2） +* 微信小游戏`主域`模版 1.0.9 版本以上（包括 1.0.9）。获取方式 +* 微信小游戏`子域`模版 1.0.9 版本以上（包括 1.0.9）。获取方式 +* 准备最新版微信开发者工具 +* 从微信公众平台获取了小游戏的 appid，如您自己没有可以使用官方默认提供测试的 appid + +### 创建小游戏 + +* 在任意的文件目录建立一个空的目录为 miniGameSubdomain，在这个目录下使用 launcher 新建一个名为 egretMain 的项目，作为我们的主域项目 + +![img](x01.png) + +* 使用 launcher 将这个项目发布成微信小游戏。这时候可以在 miniGameSubdomain 下看到名为 egretMain_wxgame 的微信小游戏项目 + +![img](x02.png) + +* 在我们刚刚新建好的 miniGameSubdomain 目录中使用 launcher 新建一个名为 egretSub 的项目，作为我们的子域项目。 + +> 注意：由于小游戏对包体的限制，我们在建立子域项目时应该选择`游戏项目`，强烈建议开发者不要使用 `eui项目`。开发者如不使用 `tween动画`，也可以在 egretProperties.json 文件中删掉这个模块。 + +![img](x03.png) + +* 以上创建好后可以在 miniGameSubdomain 目录下看到三个文件夹，分别为 egretMain、egretMain_wxgame、egretSub。如图： + +![img](x04.png) + +* 打开新建的 egretSub 子域项目，在 script 目录中找到 config.ts 文件，然后找到发布微信平台的相关代码块 `if (target == 'wxgame')` 将输出目录变量 `outputDir` 的值改为 `../egretMain_wxgame/subContext`；备注：这个变量指向的是子域的发布目录，必须要和微信小游戏项目的目录名保持一致，如图： + +![img](x05.png) + +* 在 egretSub 项目中执行 egret publish --target wxgame，如果成功会在微信小游戏项目中的 subContext 文件夹下看到 js、resource 文件夹和一个 manifest.js 文件，如图： + +![img](x06.png) + +* 将我们提供好的子域模版解压后复制到 subContext 目录下。注意在子域中有个限制：子域不能访问文件系统，所以不能加载本地的json文件之类的，而图片因为用的是image所以可以加载的。 + +![img](x07.png) + +* 然后在 subContext 中的 sub.js 文件中需要更改配置，注意：`contentWidth、contentHeight、scaleMode、frameRate、orientation、audioType、`这些配置必须要个主域配置保持一致。 + +* 注意，如果使用子域，一定要在主域的项目的game.json中配置 ` "subContext":"subContext"`字段。 + +* 然后将代码: + +``` + const bitmapdata = new egret.BitmapData(window["sharedCanvas"]); + bitmapdata.$deleteSource = false; + const texture = new egret.Texture(); + texture._setBitmapData(bitmapdata); + const bitmap = new egret.Bitmap(texture); + bitmap.width = stageW; + bitmap.height = stageH; + this.addChild(bitmap); + bitmap.addEventListener(egret.Event.ENTER_FRAME, function () { + egret.WebGLUtils.deleteWebGLTexture(bitmapdata.webGLTexture); + bitmapdata.webGLTexture = null; + }, this); +``` + +复制到 egretMain 的项目中。简单的说下这段代码的原理，基本原理每帧获取离屏的 canvas ，然后根据获取的 canvas 绘制一个 Bitmap。将这个 Bitmap 添加到主域的舞台上，开发者也可以把这个 bitmap 放到任意的先是对象里。原理类似。 + +* 在 egretMain 项目中执行 egret run --target wxgame 发布项目并调起微信开发者工具，这样我们就以调试了。 + +> 注意：再次强调为了减少小游戏的体积，在由于创建 egret 项目时，会在项目添加一些模版文件，不需要的可和文件一定要记得删除，例如 resource 文件夹下面的配置文件，图片都是删除的。 \ No newline at end of file diff --git a/Engine2D/minigame/subdomainCourse/x01.png b/Engine2D/minigame/subdomainCourse/x01.png new file mode 100644 index 0000000..36dc1c5 Binary files /dev/null and b/Engine2D/minigame/subdomainCourse/x01.png differ diff --git a/Engine2D/minigame/subdomainCourse/x02.png b/Engine2D/minigame/subdomainCourse/x02.png new file mode 100644 index 0000000..1c5b066 Binary files /dev/null and b/Engine2D/minigame/subdomainCourse/x02.png differ diff --git a/Engine2D/minigame/subdomainCourse/x03.png b/Engine2D/minigame/subdomainCourse/x03.png new file mode 100644 index 0000000..1f1dc29 Binary files /dev/null and b/Engine2D/minigame/subdomainCourse/x03.png differ diff --git a/Engine2D/minigame/subdomainCourse/x04.png b/Engine2D/minigame/subdomainCourse/x04.png new file mode 100644 index 0000000..091a894 Binary files /dev/null and b/Engine2D/minigame/subdomainCourse/x04.png differ diff --git a/Engine2D/minigame/subdomainCourse/x05.png b/Engine2D/minigame/subdomainCourse/x05.png new file mode 100644 index 0000000..b24918a Binary files /dev/null and b/Engine2D/minigame/subdomainCourse/x05.png differ diff --git a/Engine2D/minigame/subdomainCourse/x06.png b/Engine2D/minigame/subdomainCourse/x06.png new file mode 100644 index 0000000..06bb4d4 Binary files /dev/null and b/Engine2D/minigame/subdomainCourse/x06.png differ diff --git a/Engine2D/minigame/subdomainCourse/x07.png b/Engine2D/minigame/subdomainCourse/x07.png new file mode 100644 index 0000000..1e64317 Binary files /dev/null and b/Engine2D/minigame/subdomainCourse/x07.png differ diff --git a/Engine2D/minigame/subdomainIntroduce/README.md b/Engine2D/minigame/subdomainIntroduce/README.md new file mode 100644 index 0000000..8507bab --- /dev/null +++ b/Engine2D/minigame/subdomainIntroduce/README.md @@ -0,0 +1,197 @@ +## 小游戏子域与主域简介 + +### 什么是子域和主域 + +为了保证关系链数据的安全，我们创建了一个和执行主体逻辑的 `主域` 独立且隔离的 JS 作用域，称之为 `子域`。主域即是入口文件 `game.js` 运行的 JS 域，子域则是另一入口文件 `sub.js` 运行的 JS 域。子域具有以下特点： + +- 可以调用获取群成员数据的等开放数据接口。 +- 不能与第三方服务器通信。 +- 不能调用数据缓存接口。 +- 主域可以向子域自由发送数据，但是子域向主域发送数据的能力受到限制。 +- 子域内只提供绘制交互必须的 API，其余 JSAPI 均不支持。 + + +### 子域的限制和可以使用的 API + +* 主域和子域是同一个线程内的两个隔离的 JS 作用域，相互之间不可访问彼此的变量。因此如果子域也需要引入游戏引擎，那么引擎文件必须和子域入口文件 sub.js 位于同一目录下。 + +##### Timer 相关 +- requestAnimationFrame +- cancelAnimationFrame +- setTimeout +- clearTime +- setInterval +- clearInterval + +##### 触摸事件 +- [wx.onTouchStart]() +- [wx.onTouchMove]() +- [wx.onTouchEnd]() +- [wx.onTouchCancel]() +- [wx.offTouchStart]() +- [wx.offTouchMove]() +- [wx.offTouchEnd]() +- [wx.offTouchCancel]() + +##### 创建画布 +- [wx.createCanvas]() +** 子域的所有画布只支持 `2D` 渲染模式 ** + +##### 创建图片 +- [wx.createImage]() + +##### 开放数据 +- [wx.getGroupUserGameData]() + +##### 通信 +- [postMessage]() +- [onMessage]() + + +### 使用子域所需的配置 + +开发者需要在 `game.json` 中指定子域目录。子域的入口文件是 sub.js 必须位于该目录中，且该目录下的 js 文件只能 require 该目录下的其他 js 文件。 + +```json +{ + "subContext": "src/SubContext" +} +``` + +### sharedCanvas +子域和主域可以访问一个全局共享的离屏画布 sharedCanvas。子域可以在获取关系链数据后将排行榜、群成员列表绘制在 sharedCanvas上，然后由主域再将 sharedCanvas 绘制在主屏上。 + +#### 交互 + +sharedCanvas 虽然是离屏画布，但是在 adapter（[什么是adapter]()）中做了处理，将通过 wx.onTouchStart 监听的屏幕触摸事件透传给了 sharedCanvas。需要注意的是，这里的触摸事件是屏幕触摸事件，该触摸点是否落在画布内还需要开发者自行判断。 + + +### 数据 + +每个用户在游戏中的数据分为两部分： + +- 微信数据：包括该用户的 openId、昵称、头像 +- 游戏数据：包括该用户在游戏中的段位、战绩、属性、宠物等信息，有着自己的结构。 +微信数据和游戏数据需要一一对应，由于微信数据不能在主域获取且不会暴露到主域，因此需要开发者将需要和微信数据一并展示的游戏数据托管在微信后台。我们提供了以下接口： + +| 接口 | 说明 | 域限制 | +|---------------------------------------------------------|----------------------|------------------| +| [createUserGameData]() | 创建用户的游戏数据 | 只有主域可调 | +| [updateUserGameData]() | 更新用户的游戏数据 | 只有主域可调 | +| [getGroupUserGameData]() | 获取群成员的游戏数据 | 只有子域可调，且必须是在小程序从群分享卡片打开的情况下 | + +存储在微信后台的用户数据结构如下： + +| 属性 | 类型 | 说明 | +|-----------|--------|----------------------------------------------------------------------------------------------------------------------------| +| openId | String | 用户的微信 openId | +| nickName | String | 用户的微信昵称 | +| avatarUrl | String | 用户的微信头像 url | +| buffer | String | 序列化后的用户的游戏数据。每款游戏的游戏数据都有着自己的结构，微信后台不去理解游戏数据的具体结构，只存储序列化后的游戏数据 | + +### 通信 + +小游戏提供了 [postMessage]() 和 [onMessage]() + +#### 主域向子域发送消息 + +主域向子域发送消息的行为不受限制，postMessage 的参数必须是一个 JavaScript 对象。接口用于主域和子域的通信。 + +** 示例代码 ** + +主域 + +```javascript +wx.postMessage({ data: 1234 }) +``` + +子域 + +```javascript +wx.onMessage((message) => { + console.log('收到主域的消息', message) +}) +``` + +#### 子域向主域发送消息 + +子域每次调用 postMessage 只能向主域发送单个用户的数据。postMessage 方法会拉起一个模态对话框，只有在用户点击确认的情况下数据才会发送到主域。子域 postMessage 参数格式如下所示： + +| 属性 | 类型 | 说明 | +|---------|--------|----------------------------------------------| +| content | String | 模态对话框的内容 | +| action | String | 用户的自定义数据，只能是预定义的集合中的一个 | +| openId | String | 单个用户数据的 openId，且必须是通过 wx.getGroupUserGameData 获取到的某个用户的 openId，postMessage 接口内部会将 openId 转换为相应的用户数据发送给主域 | + +需要将关系链中的用户信息给到开发者，通常是当前用户与某位用户发生了战斗、邀请等交互的时候。action 用来描述两个用户之间发生的交互，其的合法值需要开发者在 game.json 中提前定义。 + +```json +/** game.json **/ +{ + "actions": ["invite", "fight", "send_gift"] +} +``` + +** 示例代码 ** + +子域 + +```javascript +wx.onShow((options) => { + // 1044 带 shareTicket 的小程序卡片 + if (options.scene === 1044) { + wx.getGroupUserGameData({ + success: (res) => { + let openId = res.data[0].openId + + wx.postMessage({ + content: '确认邀请该玩家吗?', + openId: 'openId', + action: 'invite' + }) + }, + fail: (res) => { + console.log(res.errMsg) + } + }) + } +}) +``` + +主域 + +```javascript +wx.onMessage((message) => { + console.log('主域收到消息', messsage.data, message.action) +}) +``` + +#### 时序 + +如上文所述，主域和子域只是同一个线程的两个隔离的 JS 作用域。所以主域在调用 postMessage 后，会依次发生以下的事情： + +1. 子域执行 onMessage 中的代码 +2. 主域接着执行 postMessage 调用之后的代码 + + +** 示例代码 ** + +主域代码 +```javascript +wx.postMessage({ number: 123 }) +console.log(123) +``` + +子域代码 +```javascript +wx.onMessage((message) => { + var n = 456 + console.log(message.number + n) +}) +``` + +输出结果为： +子域：579 +主域：123 + +反之子域调用 postMessage 向主域发送消息也如此。 \ No newline at end of file diff --git a/Engine2D/minigame/tutorial/README.md b/Engine2D/minigame/tutorial/README.md new file mode 100644 index 0000000..a4a85af --- /dev/null +++ b/Engine2D/minigame/tutorial/README.md @@ -0,0 +1,39 @@ +### 开发环境准备 + +* Egret Launcher 1.0.32 以上版本（包括 1.0.32） +* 白鹭引擎 5.1.2 以上版本（包括 5.1.2） +* 准备最新版微信开发者工具。[下载地址](https://mp.weixin.qq.com/debug/wxagame/dev/devtools/download.html?scene=21#wechat_redirect) +* 从微信公众平台获取了小游戏的 appid，如您自己没有可以使用官方默认提供测试的 appid + +### 创建小游戏 + +使用最新的 Egret Launcher 创建 5.1.2 以上版本的项目，项目名字叫做 "helloworld"。 + +然后在 Egret Launcher 您会看到刚刚创建的项目，点击发布设置: + +![](x08.png) + +会弹出发布设置面板： + +![](x13.png) + +其中 AppID 白鹭已经填写了一个默认 AppID，仅用于调试项目。
+项目名称填写要发布微信小游戏的名字。
+ +点击确定按钮后，弹出提示面板（注：只有 Egret Launcher 1.0.37 以上版本会显示“使用微信开发者工具打开”按钮）： + +![](x11.jpg) + +点击“使用微信开发者工具打开”按钮，Launcher 会自动打开开发者工具。 + +在 wing 编辑器中，修改 egretProperties.json 配置文件中的 target 对象的 current 属性为 wxgame，然后点击调试按钮，会自动打开 微信开发者工具。 + +![](x12.jpg) + + +开发者也可以使用命令行： + * 发布小游戏 ```egret publish --target wxgame``` 命令发布。 + * 用微信开发者工具打开 ```egret run --target wxgame``` 命令。
+ 注：简写 ```egret publish``` 或 ```egret run``` 将读取 egretProperties.json 配置文件中的 target 对象的 current 属性。 + +现在就可以运行小游戏了，如在开发中遇到任何问题都可到官方论坛提问，官方团队很愿意为您解答
\ No newline at end of file diff --git a/Engine2D/minigame/tutorial/x01.png b/Engine2D/minigame/tutorial/x01.png new file mode 100644 index 0000000..040548b Binary files /dev/null and b/Engine2D/minigame/tutorial/x01.png differ diff --git a/Engine2D/minigame/tutorial/x02.png b/Engine2D/minigame/tutorial/x02.png new file mode 100644 index 0000000..f012ffc Binary files /dev/null and b/Engine2D/minigame/tutorial/x02.png differ diff --git a/Engine2D/minigame/tutorial/x06.jpg b/Engine2D/minigame/tutorial/x06.jpg new file mode 100644 index 0000000..22d078d Binary files /dev/null and b/Engine2D/minigame/tutorial/x06.jpg differ diff --git a/Engine2D/minigame/tutorial/x07.png b/Engine2D/minigame/tutorial/x07.png new file mode 100644 index 0000000..4bed929 Binary files /dev/null and b/Engine2D/minigame/tutorial/x07.png differ diff --git a/Engine2D/minigame/tutorial/x08.png b/Engine2D/minigame/tutorial/x08.png new file mode 100644 index 0000000..b12b446 Binary files /dev/null and b/Engine2D/minigame/tutorial/x08.png differ diff --git a/Engine2D/minigame/tutorial/x09.png b/Engine2D/minigame/tutorial/x09.png new file mode 100644 index 0000000..75c893a Binary files /dev/null and b/Engine2D/minigame/tutorial/x09.png differ diff --git a/Engine2D/minigame/tutorial/x11.jpg b/Engine2D/minigame/tutorial/x11.jpg new file mode 100644 index 0000000..9708ec0 Binary files /dev/null and b/Engine2D/minigame/tutorial/x11.jpg differ diff --git a/Engine2D/minigame/tutorial/x12.jpg b/Engine2D/minigame/tutorial/x12.jpg new file mode 100644 index 0000000..0dfc4a7 Binary files /dev/null and b/Engine2D/minigame/tutorial/x12.jpg differ diff --git a/Engine2D/minigame/tutorial/x13.png b/Engine2D/minigame/tutorial/x13.png new file mode 100644 index 0000000..d492d3d Binary files /dev/null and b/Engine2D/minigame/tutorial/x13.png differ diff --git a/Engine2D/minigame/useWxPlugin/README.md b/Engine2D/minigame/useWxPlugin/README.md new file mode 100644 index 0000000..74e10b8 --- /dev/null +++ b/Engine2D/minigame/useWxPlugin/README.md @@ -0,0 +1,84 @@ +白鹭引擎插件使用说明 + + +#### 什么是引擎插件 +我们发布微信小游戏的时候，里面会带有 `egret.min.js` `eui.min.js` 之类的库文件。玩家每次打开一个小游戏，都要重复的下载这些文件。 + +现在我们把白鹭引擎做成了微信的插件， 5.2.x 系列的所有版本都上传到了微信服务器上。开发者只要在项目里进行了配置，就可以使用远端的插件，不使用本地的引擎文件。 + +这样的好处是什么呢？如果一个玩家玩了 A 游戏，里面使用了 5.2.20 版本的引擎插件。然后他又玩了 B 游戏，如果 B 游戏的引擎插件版本和 A 游戏一致，那么这个插件就**不需要重新下载**。这样就可以提高游戏的打开速度，获得更好的用户体验。 + +#### 白鹭引擎插件使用和调试环境 +* 白鹭引擎 5.2.31 版本 +* 使用微信开发者工具的[RC版本](https://developers.weixin.qq.com/miniprogram/dev/devtools/rc.html)(>=1.02.1911181)或[Nightly版本](https://developers.weixin.qq.com/miniprogram/dev/devtools/nightly.html)(>=1.02.1911202) **注意：正式版还不支持插件功能。** +* 在 Android 微信和 iOS 微信的7.0.7版本(>=7.0.7)，可直接体验和测试插件分离功能。使用了插件分离的小游戏，在console日志中会输出:`plugin ***** inject success/fail!` + +**注意** + +* 由于微信开发者工具的bug，使用测试版的 APPID 在开启插件功能时会报错，必须使用在微信后台注册过的正式版 APPID 才可以。 +* 目前一个APPID，只支持引用一个插件 +* 目前支持整包小游戏使用插件，以及分包小游戏的主包使用插件 + + +#### 白鹭引擎插件使用方法 +1. 在 Egret Launcher 里下载引擎 5.2.31 版本，使用该版本创建一个游戏项目 +2. 打开项目中的 `scripts/config.wxgame.ts` 文件，将 `useWxPlugin` 变量改为 `true` +![](p4.png) +3. 在发布成微信小游戏 release 版本后(`egret publish --target wxgame`)，会开启插件功能。debug 调试版 (`egret build --target wxgame`)，不支持该功能。 + +##### 老项目升级： + +在老项目中执行 `egret upgrade --egretversion 5.2.31` 后会把项目升级成支持插件的版本。 + +##### 使用其他版本的引擎： +如果您的项目不想使用最新的 5.2.31 版本 ，要使用其他版本，例如 `5.2.16` 之类的引擎，那么可以做如下操作： + +1. 使用最新版引擎 5.2.31 创建一个新项目，把这 3 个文件拷贝到老项目里替换原有文件。 +![](p3.png) + +*注意：*其中的 `wxgame.ts` 里会对 `js` 文件做一定的修改，一定要使用我们提供的方法，不要对这块做任何的修改。因为微信会对 `js` 文件做 MD5 校验，任何修改都会改变 MD5 值。 + + +2. 在老项目根目录的 `egretProperties.json` 里，把 `compilerVersion` 编译器版本改成 5.2.31。比如在本示例中，引擎代码还是 `5.2.16` 的，但是编译脚本使用 `5.2.31`，这样就能支持把游戏发布成开启微信插件的形式了。 + +![](p2.png) + +#### 使用引擎插件的微信小游戏项目结构说明 +![](p1.png) + +1. 在之前的微信小游戏项目里，我们会把所有的引擎文件和游戏逻辑文件都放在 `js` 文件夹内。 + +2. 在新的项目结构里，增加了一个 `egret-library` 文件夹。 + - `egret-library`： 放的是引擎库文件 + - `js`： 放的是项目里的其他 `js` 文件，比如游戏逻辑文件 `main.min.js` + +3. 微信开发者工具打包上传的时候，会自动生成两个包。 + - 带 `egret-library` 文件夹的包：不支持插件功能的老版本微信，会调用这个文件夹内的引擎文件。 + - 不带 `egret-library` 文件夹的包：支持插件功能的新版本微信会读取这个包，直接调用微信服务器上的引擎插件 + + + +#### FAQ +* 问：引擎插件里都包含哪些库？ +* 答：包含白鹭引擎官方提供的 7 个库，注意：只包含发布版的 `xx.min.js`, 不包含调试版的`xx.js`。具体的文件列表如下： + +``` +egret.min.js +eui.min.js +assetsmanager.min.js +dragonBones.min.js +game.min.js +socket.min.js +tween.min.js +``` + +----- +* 问：如果为了让包体小一些，不考虑兼容老版本微信的玩家，只使用远程插件里的引擎。是否可以不在小游戏项目里放一份引擎，这样可以吗？ +* 答：理论上是可以的，但是微信官方不建议这么做。另外如果使用引擎插件功能，包的总大小会算上线上插件里的引擎代码，所以您自己衡量是否值得。 + +----- +* 问：我对引擎做了修改，还可以使用远程插件吗 +* 答：不能做任何修改，而且必须用官方提供的编译配置文件 `script/wxgame/wxgame.ts`里的默认参数发布 。因为微信会校验本地和插件里 js 文件的 MD5 值，只要做了任何一点修改， MD5 值就会不一致，那么微信会调用本地的这个 js 版本，不会使用远程插件里的。 + +----- + diff --git a/Engine2D/minigame/useWxPlugin/p1.png b/Engine2D/minigame/useWxPlugin/p1.png new file mode 100644 index 0000000..0aa9f21 Binary files /dev/null and b/Engine2D/minigame/useWxPlugin/p1.png differ diff --git a/Engine2D/minigame/useWxPlugin/p2.png b/Engine2D/minigame/useWxPlugin/p2.png new file mode 100644 index 0000000..6e3440e Binary files /dev/null and b/Engine2D/minigame/useWxPlugin/p2.png differ diff --git a/Engine2D/minigame/useWxPlugin/p3.png b/Engine2D/minigame/useWxPlugin/p3.png new file mode 100644 index 0000000..acc7301 Binary files /dev/null and b/Engine2D/minigame/useWxPlugin/p3.png differ diff --git a/Engine2D/minigame/useWxPlugin/p4.png b/Engine2D/minigame/useWxPlugin/p4.png new file mode 100644 index 0000000..0246aa2 Binary files /dev/null and b/Engine2D/minigame/useWxPlugin/p4.png differ diff --git a/Engine2D/minigame/usingcache/README.md b/Engine2D/minigame/usingcache/README.md new file mode 100644 index 0000000..bd43053 --- /dev/null +++ b/Engine2D/minigame/usingcache/README.md @@ -0,0 +1,97 @@ + # 使用 AssetsManager 灵活定制微信小游戏的缓存策略 + + +--- + + +# 背景知识 + +微信小游戏分为“游戏包”和“本地缓存”两个存储空间，当开发者将微信小游戏在微信开发者工具中发布时，微信开发者工具会将所有微信工程中的源码和资源进行压缩打包，既“游戏包”，该包体积不能超过4M。 + +高于4M的资源需要通过服务器进行动态下载，白鹭引擎之前已经提供了动态加载机制，将游戏资源放置在一个外部CDN服务器上。但是之前并没有提供文件缓存功能，所以每一次访问时，用户均会重复从网络下载文件，而不是从本地缓存加载。 + + +微信小游戏提供了一套本地文件缓存接口，允许每个游戏最多 50M 资源在本地进行缓存。白鹭引擎在最新的 5.2 稳定版本中已经对此进行了适配，本文将为您讲解如何利用微信小游戏的缓存策略改善游戏的加载体验 + +# 准备工作 + +在使用这套机制之前，您需要确保以下几点： + +* 您的项目使用的资源管理机制是 AssetsManager +* 您的项目的白鹭引擎版本大于等于 5.1.11，稳妥起见使用 5.2 为佳，更早版本的引擎存在一个BUG,纹理集图片的资源无法本地缓存。 + + +# 步骤一：设置资源为外部读取 + +在进行缓存之前，您需要将您的游戏资源设置为从外部加载，而非从游戏包加载，如果您之前已经做完了这一步，可以忽略这个步骤。 + +* 修改您的 **script/config.wxgame.ts** 文件，在发布过程中添加 ResSplitPlugin 插件: + + ~~~javascript + commands: [ + new CleanPlugin({ matchers: ["js", "resource"] }), + new CompilePlugin({ libraryType: "release", defines: { DEBUG: false, RELEASE: true } }), + new ExmlPlugin('commonjs'), // 非 EUI 项目关闭此设置 + new WxgamePlugin(), + new UglifyPlugin([{ + sources: ["main.js"], + target: "main.min.js" + },{ + sources: ["resource/default.thm.js"], + target: "default.thm.min.js" + } + ]), + new ResSplitPlugin({ + matchers:[ + {from:"resource/**",to:`../${projectName}_wxgame_remote`} + ] + }), + new ManifestPlugin({ output: 'manifest.js' }) + ~~~ + 该插件的用意是，在您执行 egret publish 时，将 resource 文件夹的所有内容发布到 projectname_wxgame_remote 文件夹，而非 projectname_wxgame 文件夹中，这样游戏资源就不会被打包进微信项目。 +* 修改您的**Main.ts**中的配置加载代码，修改为 **RES.loadConfig("default.res.json","http://localhost:8080/resource/");** +* 执行 **egret publish --target wxgame**，游戏的代码会发布到projectname_wxgame 文件夹，游戏资源会发布到 projectname_wxgame_remote 文件夹，发布之后在projectname_wxgame_remote 架设一台端口为 8080 的本地服务器。 + + +这一步完成之后，您的项目就已经支持资源从外部读取。 + +# 步骤二：启动微信小游戏缓存 + +* 使用 EgretLauncher 重新发布一次微信小游戏，当您看到白鹭引擎的微信小游戏支持库已经升级至 1.1.0 时表示已经成功。 +* 需要注意的是，由于本升级步骤会覆盖您微信项目的代码，请提前注意备份 +* 如果您已经升级到 1.1.0 的微信小游戏支持库，会发现和之前相比多了一个名为library 的文件夹，其中包含 image.js 、 text.js 、 file-util.js 等几个文件，以及 game.js 中引用了这几个文件。 +* 此时您加载的所有远程资源都会缓存至本地，第二次访问时会从本地加载，而非服务器加载 + +这一步完成之后，您已经初步完成了对缓存的支持，但是后续还有一些工作需要处理 + +# 步骤三：处理资源更新 + +* 由于游戏资源可能升级导致本地版本与服务器版本不一致，您需要处理资源升级的情况，您可以参考 image.js 和 text.js 中提供的 fileutil.fs.remove() 方法，当该方法被执行后，本地缓存目录就会清理。 +* 您可以利用微信小游戏的 updateManager 回调函数，在版本更新时删除所有的微信小游戏缓存。 +* 从更严格的角度来讲，应该设计一套更智能的，基于热更新版本 hash 的机制，但是由于一些技术实现上的细节问题，我们会和微信团队一起配合，在未来提供更简单的调用方式。 + + +# 步骤四：处理超过50M的情况 + +部分游戏的资源可能大于 50M，您可以自由修改 image.js 和 text.js 中的 needCache 函数，编写自己的逻辑，将特定资源不存储于本地 + + + +# 总结 + +通过上述步骤，您就可以解决微信小游戏的本地缓存问题。从整个过程来看，引擎团队的核心设计思路在于： + +* 考虑到不同开发团队有不同的定制需求和工作流，引擎不会将资源缓存这个功能直接写死在引擎代码中，而是放置于用户代码中 +* 引擎会提供一个整体的资源加载框架，引擎的上层只关心加载资源的流程，不关心具体的加载细节（譬如是从网络加载还是先检查本地缓存），这些细节可以由开发者根据自己的需求自由扩展。 + + + + + + + + + + + + diff --git a/Engine2D/minigamebaidu/baidugameFAQ/README.md b/Engine2D/minigamebaidu/baidugameFAQ/README.md new file mode 100644 index 0000000..7ad578b --- /dev/null +++ b/Engine2D/minigamebaidu/baidugameFAQ/README.md @@ -0,0 +1,88 @@ +首先，再次强调一些百度小游戏的基础技术限制： + +* 不允许操作 DOM、BOM、如果必须改成小游戏相应的 API 调用方式，目前引擎会自动引入swan-game-adapter.js 文件做兼容处理。 + +* 不允许动态执行代码的能力，eval、setTimeout 和 setInterval 函数的第一个参数不能为字符串，Function构造函数的参数不能为字符串。 + + + +接下来向诸位开发者汇总一下这两天开发者普遍遇到的问题以及解决方案： + +### 问题 + +#### 我在使用白鹭引擎 5.0 / 4.x / 3.x 版本，可以直接转换为百度小游戏么？ + +答：目前我们只支持白鹭引擎 5.2.13 以上的版本发布为百度小游戏。[参考微信小游戏升级指南](../../minigame/publish/README.md) + +#### 我在使用 egret res 库，5.2.13 创建的新项目使用的是 assetsmanager 库，这两个库有区别么？ + +答：assetsmanager 是 res 的替代方案，这两者的 API 有 90% 保持一致，但是仍然有一些小区别，主要是在 RES.Analyzer 上，如果您遇到了相关问题，您可以在 egretProperties.json 中修改模块配置，从 assetsmanager 修改回 res 并执行 egret clean ，这样就可以换成 res 资源管理库了。更改如图所示： + +![img](x02.png) + + + +#### 当老项目（5.2.13以前）升到到最新版时，发布小游戏项目报错： + +答：升级成功后，请首先保证 HTML5 版本可以正常运行，然后再尝试发布为百度小游戏，目前我们遇到了多位开发者通过创建 5.2.13 新项目后拷贝老项目代码和素材的方式尝试升级，由于忽视了修改 egretProperties.json 中的模块配置，导致运行失败的问题。[参考微信小游戏升级指南](../../minigame/publish/README.md) + +#### 在游戏使用到 egret.getDefinitionByName() 报错，找不到对应类时： + +答：需要将要反射的类挂载到 window 对象下，例如有个 class People{} 类，需要添加代码 window["People"] = People。[示例demo下载](http://developer.egret.com/cn/statics/downs/testglobal.zip) + +#### 在 EUI 中使用自定义组件，发布到百度小游戏的 default.thm.js 报错提示找不到自定义组件，错误如图： + +![img](x03.png) + +答：参考上一条回答，需要将自定义组件暴露到全局作用域。 + +#### 在小游戏中报错 “Main is not defined” 时， + +答：请查看游戏的入口类名是否为 Main，如不是请修改为 Main。 + + +#### 小游戏屏幕出现闪烁问题： + +答：把开放数据域和主域的帧率都改成 60 帧。 + + +#### 使用 eui 皮肤时报错 'parseFromString' of undefined，如何解决。 + +答：检查是否使用了 嵌入EXML到代码中，例： + +``` + var className = "skins.ButtonSkin"; + var exmlText = ` ... + `; +``` + +需要改成单独的皮肤文件。 + + + +#### 为什么引入第三方库报 ``` 第三方库 is not defined``` 错误. + +答： +我们要再次强调小游戏有很多的限制，首先检查我们所使用的第三方库是否符合小游戏的标准，具体可以参考小游戏官方文档，如果不符合规范，我们只能自己来修改这个库以达到标准。后期我们会整理常用的库提供给开发者。 +经检查适合小游戏的标准，但还是会报我们使用的 ```第三放库未定义```，需要我们把第三方库挂在到全局对象 window 上，我们可以在 baidugame.ts 的文件中添加。例如我们加入 zlib 库。如图： + +![](x04.png) + +#### 在 wing 调用小游戏开发工具，例如使用 run 命令，有如图提示： +![](x05.png) + +答： +请您直接使用百度开发者工具 打开这个小游戏项目即可。 + +#### swan.login() 登录失败，是什么原因 +![](x06.jpg) + +答：需要在百度小游戏后台，将你的百度账号添加到`项目成员`里，并给予`开发者权限`。 + +#### WebGLRenderContext 在模拟器里报错 +![](error-5.png) + + window 系统下，部分独立显卡对模拟器的支持有问题，需要切换成集成显卡。 + + #### 为什么我动态设置帧频没有效果 +答：小游戏平台只能在 index.html 里设置，不能通过 stage.frameRate 方法动态修改 diff --git a/Engine2D/minigamebaidu/baidugameFAQ/error-5.png b/Engine2D/minigamebaidu/baidugameFAQ/error-5.png new file mode 100644 index 0000000..8bba5bb Binary files /dev/null and b/Engine2D/minigamebaidu/baidugameFAQ/error-5.png differ diff --git a/Engine2D/minigamebaidu/baidugameFAQ/x02.png b/Engine2D/minigamebaidu/baidugameFAQ/x02.png new file mode 100644 index 0000000..c93aaac Binary files /dev/null and b/Engine2D/minigamebaidu/baidugameFAQ/x02.png differ diff --git a/Engine2D/minigamebaidu/baidugameFAQ/x03.png b/Engine2D/minigamebaidu/baidugameFAQ/x03.png new file mode 100644 index 0000000..8125284 Binary files /dev/null and b/Engine2D/minigamebaidu/baidugameFAQ/x03.png differ diff --git a/Engine2D/minigamebaidu/baidugameFAQ/x04.png b/Engine2D/minigamebaidu/baidugameFAQ/x04.png new file mode 100644 index 0000000..44794c8 Binary files /dev/null and b/Engine2D/minigamebaidu/baidugameFAQ/x04.png differ diff --git a/Engine2D/minigamebaidu/baidugameFAQ/x05.png b/Engine2D/minigamebaidu/baidugameFAQ/x05.png new file mode 100644 index 0000000..0785a47 Binary files /dev/null and b/Engine2D/minigamebaidu/baidugameFAQ/x05.png differ diff --git a/Engine2D/minigamebaidu/baidugameFAQ/x06.jpg b/Engine2D/minigamebaidu/baidugameFAQ/x06.jpg new file mode 100644 index 0000000..78a6b68 Binary files /dev/null and b/Engine2D/minigamebaidu/baidugameFAQ/x06.jpg differ diff --git a/Engine2D/minigamebaidu/getStart/README.md b/Engine2D/minigamebaidu/getStart/README.md new file mode 100644 index 0000000..e304c14 --- /dev/null +++ b/Engine2D/minigamebaidu/getStart/README.md @@ -0,0 +1,61 @@ +### 一.开发环境准备 + +* Egret Launcher 1.0.61 以上版本 +* 白鹭引擎 5.2.13 以上版本 +* 百度小游戏官网：[链接地址](https://smartprogram.baidu.com/docs/introduction/register/)，注册账号，获取 appid +* 准备最新版百度开发者工具：[下载地址](https://smartprogram.baidu.com/docs/game/tutorials/howto/dev/) + + +### 二.创建小游戏 + +使用最新的 Egret Launcher 创建 5.2.13 以上版本的项目，项目名字叫做 `BaiduDemo`。 + +然后在 Egret Launcher 您会看到刚刚创建的项目，点击发布设置: + +![](p1.png) + +会弹出发布设置面板，点击`百度小游戏` + +![](p2.png) + +填写 AppID ，可以在 [百度智能小游戏官网](https://smartprogram.baidu.com/mappconsole/main/login) 申请 + +点击确定按钮后，弹出提示面板 + +![](p3.png) + +### 三.编译和发布命令 + +#### 方法1：开发者可以使用命令行来编译和发布百度小游戏： + + * 编译小游戏： ```egret build --target baidugame```。 + * 发布小游戏： ```egret publish --target baidugame``` 。 + +#### 方法2：配置 egretProperties.json + +![](p4.png) + +如上所示，将 `egretProperties.json` 配置文件中的 `target` 对象的 `current` 属性设置为 `baidugame` 时，可以直接使用```egret build```和```egret publish```命令编译和发布百度小游戏。 + +### 四.模拟器调试 +![](p5.png) + +打开百度开发者工具，点击`打开`按钮 + +![](p6.png) + +选择创建好的百度小游戏项目，注意：项目类型要选择为`小游戏` + +![](p7.png) + +上图为成功打开项目的样子。 + +* 注意，点击左上角的`登陆`按钮后，才可以在手机上调试。需要使用手机`百度App`扫码登陆。**注意：**在百度小游戏正式对普通用户开放前，需要使用测试版的App才可以打开，请联系百度获取。 + +![](p8.png) + +登陆成功后，会出现`预览`和`发布`两个按钮。 + +* 点击`预览`，可以使用`百度App`扫码在手机上调试。 +* 点击`发布`，可以上传到百度后台，审核后正式发布。 + diff --git a/Engine2D/minigamebaidu/getStart/p1.png b/Engine2D/minigamebaidu/getStart/p1.png new file mode 100644 index 0000000..3a957d1 Binary files /dev/null and b/Engine2D/minigamebaidu/getStart/p1.png differ diff --git a/Engine2D/minigamebaidu/getStart/p2.png b/Engine2D/minigamebaidu/getStart/p2.png new file mode 100644 index 0000000..f58e4f1 Binary files /dev/null and b/Engine2D/minigamebaidu/getStart/p2.png differ diff --git a/Engine2D/minigamebaidu/getStart/p3.png b/Engine2D/minigamebaidu/getStart/p3.png new file mode 100644 index 0000000..57da6b6 Binary files /dev/null and b/Engine2D/minigamebaidu/getStart/p3.png differ diff --git a/Engine2D/minigamebaidu/getStart/p4.png b/Engine2D/minigamebaidu/getStart/p4.png new file mode 100644 index 0000000..e9d1c09 Binary files /dev/null and b/Engine2D/minigamebaidu/getStart/p4.png differ diff --git a/Engine2D/minigamebaidu/getStart/p5.png b/Engine2D/minigamebaidu/getStart/p5.png new file mode 100644 index 0000000..7c9c00e Binary files /dev/null and b/Engine2D/minigamebaidu/getStart/p5.png differ diff --git a/Engine2D/minigamebaidu/getStart/p6.png b/Engine2D/minigamebaidu/getStart/p6.png new file mode 100644 index 0000000..bcd169b Binary files /dev/null and b/Engine2D/minigamebaidu/getStart/p6.png differ diff --git a/Engine2D/minigamebaidu/getStart/p7.png b/Engine2D/minigamebaidu/getStart/p7.png new file mode 100644 index 0000000..06cafff Binary files /dev/null and b/Engine2D/minigamebaidu/getStart/p7.png differ diff --git a/Engine2D/minigamebaidu/getStart/p8.png b/Engine2D/minigamebaidu/getStart/p8.png new file mode 100644 index 0000000..089177b Binary files /dev/null and b/Engine2D/minigamebaidu/getStart/p8.png differ diff --git a/Engine2D/minigamemy/getStart/README.md b/Engine2D/minigamemy/getStart/README.md new file mode 100644 index 0000000..7ff7714 --- /dev/null +++ b/Engine2D/minigamemy/getStart/README.md @@ -0,0 +1,42 @@ +### 一.开发环境准备 + +* Egret Launcher 1.1.4 以上版本 +* 白鹭引擎 5.2.33 以上版本 + + +### 二.创建小游戏和可视化编译打包小游戏 + +1. 使用最新的 Egret Launcher 创建一个 Egret 游戏项目，引擎使用 5.2.33 以上版本。 +创建完成后，会在 Egret Launcher 的列表里看到该项目。点击发布设置: +![](p1.png) +2. 选择 `支付宝小游戏` 标签，点击`确定`，创建项目 +![](p2.png) +3. 创建成功后，点击`发布`标签，可以可视化的发布小游戏包 +![](p3.png) +游戏代码类型：把游戏的代码编译到小游戏的项目里 + * Debug: 相当于执行命令 `egret build --target mygame` + * Release: 相当于执行命令 `egret publish --target mygame` + + + +### 三.使用命令行把白鹭游戏编译到小游戏项目 +#### 方法1：开发者可以使用命令行来编译和发布到支付宝小游戏项目中： + + * dubug 模式： ```egret build --target mygame``` + * release 模式： ```egret publish --target mygame``` + +#### 方法2：配置 egretProperties.json + +``` +"engineVersion": "5.2.33", +"compilerVersion": "5.2.33", +"template": {}, +"target": { + "current": "mygame" +}, +``` + +如上所示，将 `egretProperties.json` 配置文件中的 `current` 属性设置为 `mygame` 时，可以直接使用```egret build``` 或者 ```egret publish``` 命令编译和发布支付宝小游戏。 + + + diff --git a/Engine2D/minigamemy/getStart/p1.png b/Engine2D/minigamemy/getStart/p1.png new file mode 100644 index 0000000..bd8833d Binary files /dev/null and b/Engine2D/minigamemy/getStart/p1.png differ diff --git a/Engine2D/minigamemy/getStart/p2.png b/Engine2D/minigamemy/getStart/p2.png new file mode 100644 index 0000000..a880b6e Binary files /dev/null and b/Engine2D/minigamemy/getStart/p2.png differ diff --git a/Engine2D/minigamemy/getStart/p3.png b/Engine2D/minigamemy/getStart/p3.png new file mode 100644 index 0000000..fb42559 Binary files /dev/null and b/Engine2D/minigamemy/getStart/p3.png differ diff --git a/Engine2D/minigamemy/getStart/p4.png b/Engine2D/minigamemy/getStart/p4.png new file mode 100644 index 0000000..ffa4c76 Binary files /dev/null and b/Engine2D/minigamemy/getStart/p4.png differ diff --git a/Engine2D/minigamemy/mygameFAQ/README.md b/Engine2D/minigamemy/mygameFAQ/README.md new file mode 100644 index 0000000..ad35961 --- /dev/null +++ b/Engine2D/minigamemy/mygameFAQ/README.md @@ -0,0 +1,86 @@ +首先，强调一些支付宝小游戏的基础技术限制： + +* 不允许操作 DOM、BOM、如果必须改成块游戏相应的 API 调用方式 + +* 不允许动态执行代码的能力，eval、setTimeout 和 setInterval 函数的第一个参数不能为字符串，Function构造函数的参数不能为字符串。 +* 同时只能创建6个声音对象，超出的会覆盖掉老的声音对象。 + + +接下来汇总一下开发者普遍遇到的问题以及解决方案： + +### 问题 + +#### 我在使用白鹭引擎 5.0 / 4.x / 3.x 版本，可以直接转换为支付宝小游戏游戏么？ + +答：目前我们只支持白鹭引擎 5.2.19 以上的版本发布为支付宝小游戏。老版本的项目，[参考微信小游戏升级指南](../../minigame/publish/README.md) + + +#### 我在使用 egret res 库，5.2.19 创建的新项目使用的是 assetsmanager 库，这两个库有区别么？ + +答：assetsmanager 是 res 的替代方案，这两者的 API 有 90% 保持一致，但是仍然有一些小区别，主要是在 RES.Analyzer 上，如果您遇到了相关问题，您可以在 egretProperties.json 中修改模块配置，从 assetsmanager 修改回 res 并执行 egret clean ，这样就可以换成 res 资源管理库了。更改如图所示： + +![img](x02.png) + + + +#### 当老项目（5.2.19以前）升到到最新版时，发布小游戏项目报错： + +答：升级成功后，请首先保证 HTML5 版本可以正常运行，然后再尝试发布为支付宝小游戏，目前我们遇到了多位开发者通过创建 5.2.19 新项目后拷贝老项目代码和素材的方式尝试升级，由于忽视了修改 egretProperties.json 中的模块配置，导致运行失败的问题。[参考微信小游戏升级指南](../../minigame/publish/README.md) +#### 在游戏使用到 egret.getDefinitionByName() 报错，找不到对应类时： + +答：需要将要反射的类挂载到 window 对象下，例如有个 class People{} 类，需要添加代码 window["People"] = People。[参考微信小游戏示例demo](http://developer.egret.com/cn/statics/downs/testglobal.zip) + +#### 在 EUI 中使用自定义组件，发布到支付宝小游戏的 default.thm.js 报错提示找不到自定义组件，错误如图： + +![img](x03.png) + +答：参考上一条回答，需要将自定义组件暴露到全局作用域。 + +#### 在小游戏中报错 “Main is not defined” 时， + +答：请查看游戏的入口类名是否为 Main，如不是请修改为 Main。 + + + +#### 使用 eui 皮肤时报错 'parseFromString' of undefined，如何解决。 + +答：检查是否使用了 嵌入EXML到代码中，例： + +``` + var className = "skins.ButtonSkin"; + var exmlText = ` ... + `; +``` + +需要改成单独的皮肤文件。 + + + +#### 为什么引入第三方库报 ``` 第三方库 is not defined``` 错误. + +答： +我们要再次强调小游戏有很多的限制，首先检查我们所使用的第三方库是否符合小游戏的标准，具体可以参考小游戏官方文档，如果不符合规范，我们只能自己来修改这个库以达到标准。后期我们会整理常用的库提供给开发者。 +经检查适合小游戏的标准，但还是会报我们使用的 ```第三放库未定义```，需要我们把第三方库挂在到全局对象 window 上，我们可以在 mygame.ts 的文件中添加。例如我们加入 zlib 库。如图： + +![](x04.png) + +#### 文件加载失败： default.res.json?v=201906191000 +答：去掉`?v=201906191000` + +#### 一个 sound 只能创建一个 soundChannel，怎么同时播放同一个声音 +答：创建多个 sound 的方式，分别播放声音。[参考demo](http://tool.egret-labs.org/DocZip/engine/minigame/Sounds.zip) + +**注意**：同时只能创建6个声音对象，超出的会覆盖掉老的声音对象。 + +``` +for (let i = 0; i < 3; i++) { + let sd = new egret.Sound() + sd.load('resource/assets/se1.mp3') + ... +} +``` + +#### 为什么我动态设置帧频没有效果 +答：小游戏平台只能在 index.html 里设置，不能通过 stage.frameRate 方法动态修改 + + diff --git a/Engine2D/minigamemy/mygameFAQ/x02.png b/Engine2D/minigamemy/mygameFAQ/x02.png new file mode 100644 index 0000000..c93aaac Binary files /dev/null and b/Engine2D/minigamemy/mygameFAQ/x02.png differ diff --git a/Engine2D/minigamemy/mygameFAQ/x03.png b/Engine2D/minigamemy/mygameFAQ/x03.png new file mode 100644 index 0000000..8125284 Binary files /dev/null and b/Engine2D/minigamemy/mygameFAQ/x03.png differ diff --git a/Engine2D/minigamemy/mygameFAQ/x04.png b/Engine2D/minigamemy/mygameFAQ/x04.png new file mode 100644 index 0000000..1831e41 Binary files /dev/null and b/Engine2D/minigamemy/mygameFAQ/x04.png differ diff --git a/Engine2D/minigameoppo/getStart/README.md b/Engine2D/minigameoppo/getStart/README.md new file mode 100644 index 0000000..ca82015 --- /dev/null +++ b/Engine2D/minigameoppo/getStart/README.md @@ -0,0 +1,92 @@ +### 一.开发环境准备 + +* Egret Launcher 1.0.63 以上版本 +* 白鹭引擎 5.2.28 以上版本 +* 在电脑中安装 npm：[下载地址](https://www.npmjs.com/) +* 在电脑中安装 adb 工具：[下载地址](http://adbshell.com/downloads) +* 在 OPPO 手机上安装快应用调试器，以及更多小游戏 API 文档，请访问小游戏支持网站：[网站地址](https://cdofs.oppomobile.com/cdo-activity/static/201810/26/quickgame/documentation/games/use.html) + +### 二.创建小游戏和可视化编译打包小游戏 + +1. 使用最新的 Egret Launcher 创建一个 Egret 游戏项目，引擎使用 5.2.19 以上版本。 +创建完成后，会在 Egret Launcher 的列表里看到该项目。点击发布设置: +![](p1.png) +2. 选择 `OPPO小游戏` 标签，点击`确定`，创建项目 +![](p2.png) +3. 创建成功后，点击`发布`标签，可以可视化的发布小游戏包 +![](p3.png) + * 编译游戏代码到小游戏：相当于执行命令 `egret build --target oppogame`，把游戏的代码编译到小游戏的项目里 + * 发布：相当于执行命令 `quickgame pack`，把小游戏工程，编译成 `rpk` 包 + * 调试：使用 USB 连接手机和电脑后，点击调试，会把 `rpk` 上传到手机中，然后启动一个 `Chrome` 窗口，可以调试手机中运行的小游戏 + * 分包加载机制，请访问小游戏支持网站：[网站地址](https://cdofs.oppomobile.com/cdo-activity/static/201810/26/quickgame/documentation/subpackage/subpackage.html) + + + +### 三.使用命令行把白鹭游戏编译到小游戏项目 +#### 方法1：开发者可以使用命令行来编译和发布到OPPO小游戏项目中： + + * dubug 模式： ```egret build --target oppogame``` + * release 模式： ```egret publish --target oppogame``` + +#### 方法2：配置 egretProperties.json + +~~~ javascript +"engineVersion": "5.2.28", +"compilerVersion": "5.2.28", +"template": {}, +"target": { + "current": "oppogame" +}, +~~~ + +如上所示，将 `egretProperties.json` 配置文件中的 `current` 属性设置为 `oppogame` 时，可以直接使用```egret build``` 或者 ```egret publish``` 命令编译和发布OPPO小游戏。 + +### 四.使用命令行打包发布 OPPO 小游戏 +* 进入小游戏项目，在命令行里执行编译命令 `quickgame pack`，成功后会生成一个`dist`文件夹，里面的 `com.application.demo.rpk` 文件就是打包好的小游戏项目，可以在手机上运行调试。 +* 如果执行命令 `quickgame pack release`，则会生成正式发布的小游戏项目。注意，发布正式项目，需要在 `sign/release/private.pem` 路径下自己准备签名文件。 + +* 项目代码目录的结构如下 + +![](p4.png) + +- 目录结构说明 + * egret.oppogame.js： 白鹭引擎与小游戏的适配层 + * js 文件夹：游戏项目的代码 + * main.js：项目入口文件 + * manifest.js：用来引用所有的 js 代码 + * manifest.json：小游戏的相关参数设置 + * resource 文件夹：游戏资源文件 + * sign 文件夹：签名文件存放的位置 + + +* manifest.json 配置说明 + +``` +{ + "package": "com.application.demo", + "name": "oppogame", + "versionName": "1.0.0", + "versionCode": "1", + "minPlatformVersion": "1040", + "icon": "/icon/logo.png", + "orientation": "portrait" +} +``` +- 参数说明 + * package:应用包名 + * name:应用名称，6 个汉字以内，与应用商店保存的名称一致，用于在桌面图标、弹窗等处显示应用名称 + * versionName:应用版本名称 + * versionCode:应用版本号，从1自增，推荐每次重新上传包时versionCode+1 + * minPlatformVersion:支持的最小平台版本号 + * icon：应用图标的路径 + * orientation：支持的屏幕方向。portrait 为竖屏，landscape 为横屏。该参数会自动从白鹭游戏项目的 index.html 里获取。 + + +### 四.真机调试调试 +**注意：**一定要使用 OPPO 手机才可以调试 + +1.在 OPPO 手机上安装 `OPPO 小游戏调试器` + +2.使用 USB 线连接手机和电脑，把编译好的 `rpk` 包上传到手机 `games` 文件夹 + +3.打开小游戏调试器，点击 `OPPO小游戏`标签，在列表中选择刚才上传的 `rpk` 名称，游戏会运行起来 diff --git a/Engine2D/minigameoppo/getStart/p1.png b/Engine2D/minigameoppo/getStart/p1.png new file mode 100644 index 0000000..f6c4f83 Binary files /dev/null and b/Engine2D/minigameoppo/getStart/p1.png differ diff --git a/Engine2D/minigameoppo/getStart/p2.png b/Engine2D/minigameoppo/getStart/p2.png new file mode 100644 index 0000000..b964def Binary files /dev/null and b/Engine2D/minigameoppo/getStart/p2.png differ diff --git a/Engine2D/minigameoppo/getStart/p3.png b/Engine2D/minigameoppo/getStart/p3.png new file mode 100644 index 0000000..6f0aa33 Binary files /dev/null and b/Engine2D/minigameoppo/getStart/p3.png differ diff --git a/Engine2D/minigameoppo/getStart/p4.png b/Engine2D/minigameoppo/getStart/p4.png new file mode 100644 index 0000000..ffa4c76 Binary files /dev/null and b/Engine2D/minigameoppo/getStart/p4.png differ diff --git a/Engine2D/minigameoppo/oppogameFAQ/README.md b/Engine2D/minigameoppo/oppogameFAQ/README.md new file mode 100644 index 0000000..41f12d6 --- /dev/null +++ b/Engine2D/minigameoppo/oppogameFAQ/README.md @@ -0,0 +1,86 @@ +首先，强调一些OPPO小游戏的基础技术限制： + +* 不允许操作 DOM、BOM、如果必须改成块游戏相应的 API 调用方式 + +* 不允许动态执行代码的能力，eval、setTimeout 和 setInterval 函数的第一个参数不能为字符串，Function构造函数的参数不能为字符串。 + + +接下来汇总一下开发者普遍遇到的问题以及解决方案： + +### 问题 + +#### 我在使用白鹭引擎 5.0 / 4.x / 3.x 版本，可以直接转换为OPPO小游戏游戏么？ + +答：目前我们只支持白鹭引擎 5.2.19 以上的版本发布为OPPO小游戏。老版本的项目，[参考微信小游戏升级指南](../../minigame/publish/README.md) + + +#### 我在使用 egret res 库，5.2.19 创建的新项目使用的是 assetsmanager 库，这两个库有区别么？ + +答：assetsmanager 是 res 的替代方案，这两者的 API 有 90% 保持一致，但是仍然有一些小区别，主要是在 RES.Analyzer 上，如果您遇到了相关问题，您可以在 egretProperties.json 中修改模块配置，从 assetsmanager 修改回 res 并执行 egret clean ，这样就可以换成 res 资源管理库了。更改如图所示： + +![img](x02.png) + + + +#### 当老项目（5.2.19以前）升到到最新版时，发布小游戏项目报错： + +答：升级成功后，请首先保证 HTML5 版本可以正常运行，然后再尝试发布为OPPO小游戏，目前我们遇到了多位开发者通过创建 5.2.19 新项目后拷贝老项目代码和素材的方式尝试升级，由于忽视了修改 egretProperties.json 中的模块配置，导致运行失败的问题。[参考微信小游戏升级指南](../../minigame/publish/README.md) + +#### 在游戏使用到 egret.getDefinitionByName() 报错，找不到对应类时： + +答：需要将要反射的类挂载到 window 对象下，例如有个 class People{} 类，需要添加代码 window["People"] = People。[参考微信小游戏示例demo](http://developer.egret.com/cn/statics/downs/testglobal.zip) + +#### 在 EUI 中使用自定义组件，发布到OPPO小游戏的 default.thm.js 报错提示找不到自定义组件，错误如图： + +![img](x03.png) + +答：参考上一条回答，需要将自定义组件暴露到全局作用域。 + +#### 在小游戏中报错 “Main is not defined” 时， + +答：请查看游戏的入口类名是否为 Main，如不是请修改为 Main。 + + + +#### 使用 eui 皮肤时报错 'parseFromString' of undefined，如何解决。 + +答：检查是否使用了 嵌入EXML到代码中，例： + +~~~ javascript + var className = "skins.ButtonSkin"; + var exmlText = ` ... + `; +~~~ + +需要改成单独的皮肤文件。 + + + +#### 为什么引入第三方库报 ``` 第三方库 is not defined``` 错误. + +答： +我们要再次强调小游戏有很多的限制，首先检查我们所使用的第三方库是否符合小游戏的标准，具体可以参考小游戏官方文档，如果不符合规范，我们只能自己来修改这个库以达到标准。后期我们会整理常用的库提供给开发者。 +经检查适合小游戏的标准，但还是会报我们使用的 ```第三放库未定义```，需要我们把第三方库挂在到全局对象 window 上，我们可以在 oppogame.ts 的文件中添加。例如我们加入 zlib 库。如图： + +![](x04.png) + +#### 文件加载失败： default.res.json?v=201906191000 +答：去掉`?v=201906191000` + +#### 一个 sound 只能创建一个 soundChannel，怎么同时播放同一个声音 +答：创建多个 sound 的方式，分别播放声音。[参考demo](http://tool.egret-labs.org/DocZip/engine/minigame/Sounds.zip) + +~~~ javascript +for (let i = 0; i < 3; i++) { + let sd = new egret.Sound() + sd.load('resource/assets/se1.mp3') + ... +} +~~~ + +#### 为什么我动态设置帧频没有效果 +答：小游戏平台只能在 index.html 里设置，不能通过 stage.frameRate 方法动态修改 + + +#### 这个报错信息是什么意思？Failed to clone native_handle in hidl_handle: Too many open files +答：oppo 小游戏对声音播放的数量有限制，不能同时打开太多的声音。具体的数量上限暂时还不清楚。 diff --git a/Engine2D/minigameoppo/oppogameFAQ/x02.png b/Engine2D/minigameoppo/oppogameFAQ/x02.png new file mode 100644 index 0000000..c93aaac Binary files /dev/null and b/Engine2D/minigameoppo/oppogameFAQ/x02.png differ diff --git a/Engine2D/minigameoppo/oppogameFAQ/x03.png b/Engine2D/minigameoppo/oppogameFAQ/x03.png new file mode 100644 index 0000000..8125284 Binary files /dev/null and b/Engine2D/minigameoppo/oppogameFAQ/x03.png differ diff --git a/Engine2D/minigameoppo/oppogameFAQ/x04.png b/Engine2D/minigameoppo/oppogameFAQ/x04.png new file mode 100644 index 0000000..1831e41 Binary files /dev/null and b/Engine2D/minigameoppo/oppogameFAQ/x04.png differ diff --git a/Engine2D/minigameqq/getStart/README.md b/Engine2D/minigameqq/getStart/README.md new file mode 100644 index 0000000..34f18e5 --- /dev/null +++ b/Engine2D/minigameqq/getStart/README.md @@ -0,0 +1,40 @@ +### 一.开发环境准备 + +* Egret Launcher 1.0.67 以上版本 +* 白鹭引擎 5.2.25 以上版本 +* 下载安装 QQ 小游戏开发者工具[下载地址](https://q.qq.com/wiki/#_4-%E7%BC%96%E7%A0%81%E5%BC%80%E5%8F%91%E5%B0%8F%E7%A8%8B%E5%BA%8F) +* 更多 QQ 小游戏 API 文档，请访问小游戏支持网站：[网站地址](https://q.qq.com/wiki/develop/game/API/) + +### 二.创建小游戏和可视化编译打包小游戏 + +1. 使用最新的 Egret Launcher 创建一个 Egret 游戏项目，引擎使用 5.2.25 以上版本。 +创建完成后，会在 Egret Launcher 的列表里看到该项目。点击发布设置: +![](p1.png) +2. 选择 `QQ 小游戏` 标签，点击`确定`，创建项目 +![](p2.png) +3. 创建成功后，点击`发布`标签，可以可视化的发布小游戏包 +![](p3.png) + * 编译游戏代码到小游戏：相当于执行命令 `egret build --target qqgame`，把游戏的代码编译到小游戏的项目里 + + + +### 三.使用命令行把白鹭游戏编译到小游戏项目 +#### 方法1：开发者可以使用命令行来编译和发布到 qq 小游戏项目中： + + * dubug 模式： ```egret build --target qqgame``` + * release 模式： ```egret publish --target qqgame``` + +#### 方法2：配置 egretProperties.json + +``` +"engineVersion": "5.2.25", +"compilerVersion": "5.2.25", +"template": {}, +"target": { + "current": "qqgame" +}, +``` + +如上所示，将 `egretProperties.json` 配置文件中的 `current` 属性设置为 `qqgame` 时，可以直接使用```egret build``` 或者 ```egret publish``` 命令编译和发布 QQ 小游戏。 + +现在就可以在开发者工具中运行小游戏了，如在开发中遇到任何问题都可到官方论坛提问，官方团队很愿意为您解答 diff --git a/Engine2D/minigameqq/getStart/p1.png b/Engine2D/minigameqq/getStart/p1.png new file mode 100644 index 0000000..5812261 Binary files /dev/null and b/Engine2D/minigameqq/getStart/p1.png differ diff --git a/Engine2D/minigameqq/getStart/p2.png b/Engine2D/minigameqq/getStart/p2.png new file mode 100644 index 0000000..47fa839 Binary files /dev/null and b/Engine2D/minigameqq/getStart/p2.png differ diff --git a/Engine2D/minigameqq/getStart/p3.png b/Engine2D/minigameqq/getStart/p3.png new file mode 100644 index 0000000..d1b9f51 Binary files /dev/null and b/Engine2D/minigameqq/getStart/p3.png differ diff --git a/Engine2D/minigameqq/getStart/p4.png b/Engine2D/minigameqq/getStart/p4.png new file mode 100644 index 0000000..a83bc6d Binary files /dev/null and b/Engine2D/minigameqq/getStart/p4.png differ diff --git a/Engine2D/minigameqq/qqgameFAQ/README.md b/Engine2D/minigameqq/qqgameFAQ/README.md new file mode 100644 index 0000000..0bef20f --- /dev/null +++ b/Engine2D/minigameqq/qqgameFAQ/README.md @@ -0,0 +1,72 @@ +首先，强调一些 QQ 小游戏的基础技术限制： + +* 不允许操作 DOM、BOM、如果必须改成块游戏相应的 API 调用方式 + +* 不允许动态执行代码的能力，eval、setTimeout 和 setInterval 函数的第一个参数不能为字符串，Function构造函数的参数不能为字符串。 + + +接下来汇总一下开发者普遍遇到的问题以及解决方案： + +### 问题 + +#### 我在使用白鹭引擎 5.0 / 4.x / 3.x 版本，可以直接转换为QQ小游戏游戏么？ + +答：目前我们只支持白鹭引擎 5.2.19 以上的版本发布为QQ小游戏。老版本的项目，[参考微信小游戏升级指南](../../minigame/publish/README.md) + + +#### 我在使用 egret res 库，5.2.19 创建的新项目使用的是 assetsmanager 库，这两个库有区别么？ + +答：assetsmanager 是 res 的替代方案，这两者的 API 有 90% 保持一致，但是仍然有一些小区别，主要是在 RES.Analyzer 上，如果您遇到了相关问题，您可以在 egretProperties.json 中修改模块配置，从 assetsmanager 修改回 res 并执行 egret clean ，这样就可以换成 res 资源管理库了。更改如图所示： + +![img](x02.png) + + + +#### 当老项目（5.2.19以前）升到到最新版时，发布小游戏项目报错： + +答：升级成功后，请首先保证 HTML5 版本可以正常运行，然后再尝试发布为QQ小游戏，目前我们遇到了多位开发者通过创建 5.2.19 新项目后拷贝老项目代码和素材的方式尝试升级，由于忽视了修改 egretProperties.json 中的模块配置，导致运行失败的问题。[参考微信小游戏升级指南](../../minigame/publish/README.md) + +#### 在游戏使用到 egret.getDefinitionByName() 报错，找不到对应类时： + +答：需要将要反射的类挂载到 window 对象下，例如有个 class People{} 类，需要添加代码 window["People"] = People。[参考微信小游戏示例demo](http://developer.egret.com/cn/statics/downs/testglobal.zip) + +#### 在 EUI 中使用自定义组件，发布到QQ小游戏的 default.thm.js 报错提示找不到自定义组件，错误如图： + +![img](x03.png) + +答：参考上一条回答，需要将自定义组件暴露到全局作用域。 + +#### 在小游戏中报错 “Main is not defined” 时， + +答：请查看游戏的入口类名是否为 Main，如不是请修改为 Main。 + + + +#### 使用 eui 皮肤时报错 'parseFromString' of undefined，如何解决。 + +答：检查是否使用了 嵌入EXML到代码中，例： + +``` + var className = "skins.ButtonSkin"; + var exmlText = ` ... + `; +``` + +需要改成单独的皮肤文件。 + + + +#### 为什么引入第三方库报 ``` 第三方库 is not defined``` 错误. + +答： +我们要再次强调小游戏有很多的限制，首先检查我们所使用的第三方库是否符合小游戏的标准，具体可以参考小游戏官方文档，如果不符合规范，我们只能自己来修改这个库以达到标准。后期我们会整理常用的库提供给开发者。 +经检查适合小游戏的标准，但还是会报我们使用的 ```第三放库未定义```，需要我们把第三方库挂在到全局对象 window 上，我们可以在 qqgame.ts 的文件中添加。例如我们加入 zlib 库。如图： + +![](x04.png) + +#### 文件加载失败： default.res.json?v=201906191000 +答：去掉`?v=201906191000` + + +#### 为什么我动态设置帧频没有效果 +答：小游戏平台只能在 index.html 里设置，不能通过 stage.frameRate 方法动态修改 diff --git a/Engine2D/minigameqq/qqgameFAQ/x02.png b/Engine2D/minigameqq/qqgameFAQ/x02.png new file mode 100644 index 0000000..c93aaac Binary files /dev/null and b/Engine2D/minigameqq/qqgameFAQ/x02.png differ diff --git a/Engine2D/minigameqq/qqgameFAQ/x03.png b/Engine2D/minigameqq/qqgameFAQ/x03.png new file mode 100644 index 0000000..8125284 Binary files /dev/null and b/Engine2D/minigameqq/qqgameFAQ/x03.png differ diff --git a/Engine2D/minigameqq/qqgameFAQ/x04.png b/Engine2D/minigameqq/qqgameFAQ/x04.png new file mode 100644 index 0000000..416f09e Binary files /dev/null and b/Engine2D/minigameqq/qqgameFAQ/x04.png differ diff --git a/Engine2D/minigameqq/usePlugin/README.md b/Engine2D/minigameqq/usePlugin/README.md new file mode 100644 index 0000000..3c4ab20 --- /dev/null +++ b/Engine2D/minigameqq/usePlugin/README.md @@ -0,0 +1,63 @@ + +白鹭引擎插件使用说明 + + +#### 什么是引擎插件 +我们发布QQ小游戏的时候，里面会带有 `egret.min.js` `eui.min.js` 之类的库文件。玩家每次打开一个小游戏，都要重复的下载这些文件。 + +现在我们把白鹭引擎做成了插件， 5.2.x 系列的所有版本都上传到了QQ服务器上。开发者只要在项目里进行配置，就可以使用远端的插件，不使用本地的引擎文件。 + +这样的好处是什么呢？如果一个玩家玩了 A 游戏，里面使用了 5.2.20 版本的引擎插件。然后他又玩了 B 游戏，如果 B 游戏的引擎插件版本和 A 游戏一致，那么这个插件就**不需要重新下载**。这样就可以提高游戏的打开速度，获得更好的用户体验。 + +#### 白鹭引擎插件使用和调试环境 +* 白鹭引擎 5.2.32 版本 +* 使用QQ开发者工具[Nightly Build版版本](https://q.qq.com/wiki/tools/devtool/#%E7%BC%96%E7%A0%81%E5%92%8C%E5%8F%91%E5%B8%83)(>=Ver 0.1.29-beta.42) +* 在QQ小游戏管理后台，设置基础库最低版本 1.8.0。使用了插件分离的小游戏，在console日志中会输出:`plugin ***** inject success/fail!` +![](p0.png) + +**注意** + +* 目前一个APPID，只支持引用一个插件 +* 目前支持整包小游戏使用插件，以及分包小游戏的主包使用插件 + + +#### 白鹭引擎插件使用方法 +1.在 Egret Launcher 里下载引擎 5.2.32 版本，使用该版本创建一个游戏项目 +2.打开项目中的 `scripts/config.qqgame.ts` 文件，将 `useQQPlugin` 变量改为 `true`,在发布成 QQ 小游戏后会开启插件功能。设置为 `false`，将关闭插件功能。 + +##### 老项目升级： + +在老项目中执行 `egret upgrade --egretversion 5.2.32` 后会把项目升级成支持插件的版本。 + +##### 使用其他版本的引擎： +如果您的项目不想使用最新的 5.2.32 版本 ，要使用其他版本，例如 `5.2.16` 之类的引擎，那么可以做如下操作： + +1.使用最新版引擎 5.2.32 创建一个新项目，把这 3 个文件拷贝到老项目里替换原有文件。 +![](p1.png) + + +2.在老项目根目录的 `egretProperties.json` 里，把 `compilerVersion` 编译器版本改成 5.2.32。比如在本示例中，引擎代码还是 `5.2.16` 的，但是编译脚本使用 `5.2.32`，这样就能支持把游戏发布成开启微信插件的形式了。 + +![](p2.png) + + +#### FAQ +* 问：引擎插件里都包含哪些库？ +* 答：包含白鹭引擎官方提供的 7 个库，注意：只包含发布版的 `xx.min.js`, 不包含调试版的`xx.js`。具体的文件列表如下： + +``` +egret.min.js +eui.min.js +assetsmanager.min.js +dragonBones.min.js +game.min.js +socket.min.js +tween.min.js +``` + +----- +* 问：我对引擎做了修改，还可以使用远程插件吗 +* 答：远程插件是由白鹭官方上传到QQ后台，您自己在本地的修改不会生效。 + +----- + diff --git a/Engine2D/minigameqq/usePlugin/p0.png b/Engine2D/minigameqq/usePlugin/p0.png new file mode 100644 index 0000000..7e61e2d Binary files /dev/null and b/Engine2D/minigameqq/usePlugin/p0.png differ diff --git a/Engine2D/minigameqq/usePlugin/p1.png b/Engine2D/minigameqq/usePlugin/p1.png new file mode 100644 index 0000000..42ae551 Binary files /dev/null and b/Engine2D/minigameqq/usePlugin/p1.png differ diff --git a/Engine2D/minigameqq/usePlugin/p2.png b/Engine2D/minigameqq/usePlugin/p2.png new file mode 100644 index 0000000..2995f09 Binary files /dev/null and b/Engine2D/minigameqq/usePlugin/p2.png differ diff --git a/Engine2D/minigamevivo/getStart/README.md b/Engine2D/minigamevivo/getStart/README.md new file mode 100644 index 0000000..329bff3 --- /dev/null +++ b/Engine2D/minigamevivo/getStart/README.md @@ -0,0 +1,114 @@ +### 一.开发环境准备 + +* Egret Launcher 1.0.65 以上版本 +* 白鹭引擎 5.2.23 以上版本 +* 在电脑中安装 npm：[下载地址](https://www.npmjs.com/) +* 在电脑中安装 adb 工具：[下载地址](http://adbshell.com/downloads) +* 最新版本的 vivo 小游戏引擎(平台版本1041+)[下载地址](https://minigame.vivo.com.cn/documents/#/download/engine) +* 更多 vivo 小游戏 API 文档，请访问小游戏支持网站：[网站地址](https://minigame.vivo.com.cn/documents/#/lesson/base/start) + +### 二.创建小游戏和可视化编译打包小游戏 + +1. 使用最新的 Egret Launcher 创建一个 Egret 游戏项目，引擎使用 5.2.23 以上版本。 +创建完成后，会在 Egret Launcher 的列表里看到该项目。点击发布设置: +![](p1.png) +2. 选择 `vivo小游戏` 标签，点击`确定`，创建项目 +![](p2.png) +3. 创建成功后，点击`发布`标签，可以可视化的发布小游戏包 +![](p3.png) + * 编译游戏代码到小游戏：相当于执行命令 `egret build --target vivogame`，把游戏的代码编译到小游戏的项目里 + * 发布：相当于执行命令 `npm run build`，把小游戏工程，编译成 `rpk` 包 + * 调试：使用 USB 连接手机和电脑后，点击调试，会把 `rpk` 上传到手机中，然后启动一个 `Chrome` 窗口，可以调试手机中运行的小游戏 + + +### 三.使用命令行把白鹭游戏编译到小游戏项目 +#### 方法1：开发者可以使用命令行来编译和发布到 vivo 小游戏项目中： + + * dubug 模式： ```egret build --target vivogame``` + * release 模式： ```egret publish --target vivogame``` + +#### 方法2：配置 egretProperties.json + +~~~ javascript +"engineVersion": "5.2.23", +"compilerVersion": "5.2.23", +"template": {}, +"target": { + "current": "vivogame" +}, +~~~ + +如上所示，将 `egretProperties.json` 配置文件中的 `current` 属性设置为 `vivogame` 时，可以直接使用```egret build``` 或者 ```egret publish``` 命令编译和发布 vivo 小游戏。 + +### 四.使用命令行打包发布 vivo 小游戏 +* 进入小游戏项目，在命令行里执行编译命令 `npm run build`，成功后会生成一个`dist`文件夹，里面的 `com.application.demo.rpk` 文件就是打包好的小游戏项目，可以在手机上运行调试。 +* 如果执行命令 `npm run release`，则会生成正式发布的小游戏项目。注意，发布正式项目，需要在 `sign/release/private.pem` 路径下自己准备签名文件。 + +* 项目代码目录的结构如下 + +![](p4.png) + +- 目录结构说明 + * egret.vivogame.js： 白鹭引擎与小游戏的适配层 + * js 文件夹：游戏项目的代码 + * game.js：项目入口文件 + * manifest.js：用来引用所有的 js 代码 + * manifest.json：小游戏的相关参数设置 + * resource 文件夹：游戏资源文件 + * sign 文件夹：签名文件存放的位置 + + +* manifest.json 配置说明 + +~~~ javascript +{ + "package": "com.application.demo", + "name": "vivogame", + "versionName": "1.0.0", + "versionCode": "1", + "minPlatformVersion": "1030", + "icon": "/icon/logo.png", + "orientation": "portrait" +} +~~~ +- 参数说明 + * package:应用包名 + * name:应用名称，6 个汉字以内，与应用商店保存的名称一致，用于在桌面图标、弹窗等处显示应用名称 + * versionName:应用版本名称 + * versionCode:应用版本号，从1自增，推荐每次重新上传包时versionCode+1 + * minPlatformVersion:支持的最小平台版本号 + * icon：应用图标的路径 + * orientation：支持的屏幕方向。portrait 为竖屏，landscape 为横屏。该参数会自动从白鹭游戏项目的 index.html 里获取。 + + +### 四.真机调试调试 +**注意：**一定要使用 vivo 手机才可以调试 + +1.在 vivo 手机上安装 [快应用调试器](https://minigame.vivo.com.cn/documents/#/download/engine) + +3.打开快游戏调试器，点击 `扫码安装`，扫描 EgretLauncher 发布 vivo 小游戏界面里的二维码。 + + + +### 升级指南 +因为 vivo 小游戏项目结构升级，从白鹭引擎 5.2.28 开始不再支持老版本的结构，需要您升级一下游戏项目。 + +`注意：如果是老项目 (xxx_vivogame)，请删除原来的 vivo 小游戏项目，重新创建项目！！` + +**Egret 项目升级方法1** + +* 1.使用 EgretLauncher 下载白鹭引擎 5.2.28 版本 +* 2.执行 `egret upgrade --egretversion 5.2.28` + * 升级将会把您项目中的 `scripts/config.vivogame.ts ` 和 `scripts/vivogame/vivogame.ts`这两个文件替换掉。如果您修改了这2个文件，请提前做好备份，升级完成以后再进行对应修改。 + +**Egret 项目升级方法2** + +* 1.使用 EgretLauncher 下载白鹭引擎 5.2.28 版本 +* 2.新创建一个游戏项目，将项目中 `scripts/config.vivogame.ts ` 和 `scripts/vivogame/vivogame.ts`这两个文件替换您原来项目里对应的文件 + +### 常见问题排查 +如果您的 vivo 小游戏项目不能运行，请先检查下面这些流程是否正确 + +* 使用的是 vivo 手机 +* 手机中安装了 [快应用调试器](https://minigame.vivo.com.cn/documents/#/download/engine) +* Egret Launcher [是最新版本的](https://egret.com/products/engine.html) diff --git a/Engine2D/minigamevivo/getStart/p1.png b/Engine2D/minigamevivo/getStart/p1.png new file mode 100644 index 0000000..f5ed576 Binary files /dev/null and b/Engine2D/minigamevivo/getStart/p1.png differ diff --git a/Engine2D/minigamevivo/getStart/p2.png b/Engine2D/minigamevivo/getStart/p2.png new file mode 100644 index 0000000..09265af Binary files /dev/null and b/Engine2D/minigamevivo/getStart/p2.png differ diff --git a/Engine2D/minigamevivo/getStart/p3.png b/Engine2D/minigamevivo/getStart/p3.png new file mode 100644 index 0000000..db03181 Binary files /dev/null and b/Engine2D/minigamevivo/getStart/p3.png differ diff --git a/Engine2D/minigamevivo/getStart/p4.png b/Engine2D/minigamevivo/getStart/p4.png new file mode 100644 index 0000000..a83bc6d Binary files /dev/null and b/Engine2D/minigamevivo/getStart/p4.png differ diff --git a/Engine2D/minigamevivo/vivogameFAQ/README.md b/Engine2D/minigamevivo/vivogameFAQ/README.md new file mode 100644 index 0000000..574b727 --- /dev/null +++ b/Engine2D/minigamevivo/vivogameFAQ/README.md @@ -0,0 +1,80 @@ +首先，强调一些 vivo 小游戏的基础技术限制： + +* 不允许操作 DOM、BOM、如果必须改成块游戏相应的 API 调用方式 + +* 不允许动态执行代码的能力，eval、setTimeout 和 setInterval 函数的第一个参数不能为字符串，Function构造函数的参数不能为字符串。 + + +接下来汇总一下开发者普遍遇到的问题以及解决方案： + +### 问题 + +#### 我在使用白鹭引擎 5.0 / 4.x / 3.x 版本，可以直接转换为vivo小游戏游戏么？ + +答：目前我们只支持白鹭引擎 5.2.19 以上的版本发布为vivo小游戏。老版本的项目，[参考微信小游戏升级指南](../../minigame/publish/README.md) + + +#### 我在使用 egret res 库，5.2.19 创建的新项目使用的是 assetsmanager 库，这两个库有区别么？ + +答：assetsmanager 是 res 的替代方案，这两者的 API 有 90% 保持一致，但是仍然有一些小区别，主要是在 RES.Analyzer 上，如果您遇到了相关问题，您可以在 egretProperties.json 中修改模块配置，从 assetsmanager 修改回 res 并执行 egret clean ，这样就可以换成 res 资源管理库了。更改如图所示： + +![img](x02.png) + + + +#### 当老项目（5.2.19以前）升到到最新版时，发布小游戏项目报错： + +答：升级成功后，请首先保证 HTML5 版本可以正常运行，然后再尝试发布为vivo小游戏，目前我们遇到了多位开发者通过创建 5.2.19 新项目后拷贝老项目代码和素材的方式尝试升级，由于忽视了修改 egretProperties.json 中的模块配置，导致运行失败的问题。[参考微信小游戏升级指南](../../minigame/publish/README.md) + +#### 在游戏使用到 egret.getDefinitionByName() 报错，找不到对应类时： + +答：需要将要反射的类挂载到 window 对象下，例如有个 class People{} 类，需要添加代码 window["People"] = People。[参考微信小游戏示例demo](http://developer.egret.com/cn/statics/downs/testglobal.zip) + +#### 在 EUI 中使用自定义组件，发布到vivo小游戏的 default.thm.js 报错提示找不到自定义组件，错误如图： + +![img](x03.png) + +答：参考上一条回答，需要将自定义组件暴露到全局作用域。 + +#### 在小游戏中报错 “Main is not defined” 时， + +答：请查看游戏的入口类名是否为 Main，如不是请修改为 Main。 + + + +#### 使用 eui 皮肤时报错 'parseFromString' of undefined，如何解决。 + +答：检查是否使用了 嵌入EXML到代码中，例： + +~~~ javascript + var className = "skins.ButtonSkin"; + var exmlText = ` ... + `; +~~~ + +需要改成单独的皮肤文件。 + +#### 为什么引入第三方库报 ``` 第三方库 is not defined``` 错误. + +答： +我们要再次强调小游戏有很多的限制，首先检查我们所使用的第三方库是否符合小游戏的标准，具体可以参考小游戏官方文档，如果不符合规范，我们只能自己来修改这个库以达到标准。后期我们会整理常用的库提供给开发者。 +经检查适合小游戏的标准，但还是会报我们使用的 ```第三放库未定义```，需要我们把第三方库挂在到全局对象 window 上，我们可以在 vivogame.ts 的文件中添加。例如我们加入 zlib 库。如图： + +![](x04.png) + +#### 文件加载失败： default.res.json?v=201906191000 +答：去掉`?v=201906191000` + +#### 一个 sound 只能创建一个 soundChannel，怎么同时播放同一个声音 +答：创建多个 sound 的方式，分别播放声音。[参考demo](http://tool.egret-labs.org/DocZip/engine/minigame/Sounds.zip) + +~~~ javascript +for (let i = 0; i < 3; i++) { + let sd = new egret.Sound() + sd.load('resource/assets/se1.mp3') + ... +} +~~~ + +#### 为什么我动态设置帧频没有效果 +答：小游戏平台只能在 index.html 里设置，不能通过 stage.frameRate 方法动态修改 diff --git a/Engine2D/minigamevivo/vivogameFAQ/x02.png b/Engine2D/minigamevivo/vivogameFAQ/x02.png new file mode 100644 index 0000000..c93aaac Binary files /dev/null and b/Engine2D/minigamevivo/vivogameFAQ/x02.png differ diff --git a/Engine2D/minigamevivo/vivogameFAQ/x03.png b/Engine2D/minigamevivo/vivogameFAQ/x03.png new file mode 100644 index 0000000..8125284 Binary files /dev/null and b/Engine2D/minigamevivo/vivogameFAQ/x03.png differ diff --git a/Engine2D/minigamevivo/vivogameFAQ/x04.png b/Engine2D/minigamevivo/vivogameFAQ/x04.png new file mode 100644 index 0000000..416f09e Binary files /dev/null and b/Engine2D/minigamevivo/vivogameFAQ/x04.png differ diff --git a/Engine2D/minigamexiaomi/getStart/README.md b/Engine2D/minigamexiaomi/getStart/README.md new file mode 100644 index 0000000..5491592 --- /dev/null +++ b/Engine2D/minigamexiaomi/getStart/README.md @@ -0,0 +1,102 @@ +### 一.开发环境准备 + +* Egret Launcher 1.0.62 以上版本 +* 白鹭引擎 5.2.28 以上版本 +* 在电脑中安装 npm：[下载地址](https://www.npmjs.com/) +* 下载安装调试器和运行时，以及更多快游戏 API 文档，请访问：[快游戏开发者接入指南](https://dev.mi.com/console/doc/detail?pId=1779) + + +### 二.创建小游戏 + +1. 使用最新的 Egret Launcher 创建 5.2.28 以上版本的项目，项目名字叫做 `QGameDemo`。 +然后在 Egret Launcher 您会看到刚刚创建的项目，点击发布设置: +![](p1.png) +2. 选择 `小米快游戏` 标签，点击`确定`，创建项目 +![](p2.png) +3. 创建成功后，点击`发布`标签，可以可视化的发布快游戏包 +![](p3.png) + * 编译游戏代码到快游戏：相当于执行命令 `egret build --target qgame`，把游戏的代码编译到快游戏的项目里 + * 二维码：使用快游戏调试器可以扫码安装 `rpk` 包 + * 发布：相当于执行命令 `npm run build`，把快游戏工程，编译成 `rpk` 包 + * 调试：使用 USB 连接手机和电脑后，点击调试，会启动一个 `Chrome` 窗口，可以调试手机中运行的快游戏 + + + +### 三.使用命令行把白鹭游戏编译成快游戏 +#### 方法1：开发者可以使用命令行来编译和发布小米快游戏： + + * dubug 模式： **egret build --target qgame** + * release 模式： **egret publish --target qgame** + +#### 方法2：配置 egretProperties.json + +~~~javascript +"engineVersion": "5.2.28", +"compilerVersion": "5.2.28", +"template": {}, +"target": { + "current": "qgame" +}, +~~~ + +如上所示，将 `egretProperties.json` 配置文件中的 `current` 属性设置为 `qgame` 时，可以直接使用**egret build** 或者 **egret publish** 命令编译和发布小米快游戏。 + +### 四.使用命令行打包发布小米快游戏 +* 进入快游戏项目，在命令行里执行编译命令 `npm run build`，成功后会生成一个`dist`文件夹，里面的 `com.application.demo.debug.rpk` 文件就是打包好的快游戏项目，可以在手机上调试。 +* 如果执行命令 `npm run release`，则会生成正式发布的快游戏项目。 +* **注意:发布正式项目，需要正式的签名文件。** 可以通过 openssl 等命令工具生成签名文件 private.pem、certificate.pem，然后把签名文件拷贝到 `sign/release` 目录。示例方法： + +~~~ +openssl req -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -out certificate.pem + +~~~ + + +* 项目代码目录的结构如下 + +![](p4.png) + +- 目录结构说明 + * egret.qgame.js： 白鹭引擎与快游戏的适配层 + * js 文件夹：游戏项目的代码 + * library：Assetsmanager 模块启动小米快游戏本地缓存的代码，不需要可以删除 + * main.js：项目入口文件 + * manifest.js：用来引用所有的 js 代码 + * manifest.json：快游戏的相关参数设置 + * resource 文件夹：游戏资源文件 + + +* manifest.json 配置说明 + +~~~javascript +{ + "package": "com.application.demo", + "name": "quickgame", + "versionName": "1.0.0", + "versionCode": "1", + "minPlatformVersion": "1050", + "icon": "/Common/logo.png", + "orientation": "portrait" +} +~~~ +- 参数说明 + * package:应用包名 + * name:应用名称，6 个汉字以内，与应用商店保存的名称一致，用于在桌面图标、弹窗等处显示应用名称 + * versionName:应用版本名称 + * versionCode:应用版本号，从1自增，推荐每次重新上传包时versionCode+1 + * minPlatformVersion:支持的最小平台版本号，兼容性检查，避免上线后在低版本平台运行并导致不兼容；需要填入1050 + * icon：应用图标的路径，尺寸为 192x192 + * orientation：支持的屏幕方向。portrait 为竖屏，landscape 为横屏。该参数会自动从白鹭游戏项目的 index.html 里获取。 + + +### 四.真机调试 +**注意：**一定要使用小米手机才可以调试 + +1.在小米手机上安装`小米快应用调试器`和`小米快游戏运行时环境` + +2.使用 USB 线连接手机和电脑，把编译好的 `rpk`包上传到手机 + +3.打开快应用调试器，运行平台选择为 `快应用(com.miui.hybrid)`，然后点击本地安装，选择刚才上传的 `rpk` 包，游戏会运行起来 + + +4.在电脑上打开 Chrome，在浏览器里输入`chrome://inspect/#devices`,回车后会在页面里看到 `com.miui.hybrid` 的信息，点击下面的 `inspect`。在弹出的窗口里就可以看到调试信息了。 diff --git a/Engine2D/minigamexiaomi/getStart/p1.png b/Engine2D/minigamexiaomi/getStart/p1.png new file mode 100644 index 0000000..4d26bc2 Binary files /dev/null and b/Engine2D/minigamexiaomi/getStart/p1.png differ diff --git a/Engine2D/minigamexiaomi/getStart/p2.png b/Engine2D/minigamexiaomi/getStart/p2.png new file mode 100644 index 0000000..1890100 Binary files /dev/null and b/Engine2D/minigamexiaomi/getStart/p2.png differ diff --git a/Engine2D/minigamexiaomi/getStart/p3.png b/Engine2D/minigamexiaomi/getStart/p3.png new file mode 100644 index 0000000..b9b5204 Binary files /dev/null and b/Engine2D/minigamexiaomi/getStart/p3.png differ diff --git a/Engine2D/minigamexiaomi/getStart/p4.png b/Engine2D/minigamexiaomi/getStart/p4.png new file mode 100644 index 0000000..b0f27ac Binary files /dev/null and b/Engine2D/minigamexiaomi/getStart/p4.png differ diff --git a/Engine2D/minigamexiaomi/qgameFAQ/README.md b/Engine2D/minigamexiaomi/qgameFAQ/README.md new file mode 100644 index 0000000..2388ec1 --- /dev/null +++ b/Engine2D/minigamexiaomi/qgameFAQ/README.md @@ -0,0 +1,70 @@ +首先，再次强调一些小米快游戏的基础技术限制： + +* 不允许操作 DOM、BOM、如果必须改成块游戏相应的 API 调用方式 + +* 不允许动态执行代码的能力，eval、setTimeout 和 setInterval 函数的第一个参数不能为字符串，Function构造函数的参数不能为字符串。 + + +接下来汇总一下开发者普遍遇到的问题以及解决方案： + +### 问题 + +#### 我在使用白鹭引擎 5.0 / 4.x / 3.x 版本，可以直接转换为小米快游戏么？ + +答：目前我们只支持白鹭引擎 5.2.17 以上的版本发布为小米快游戏。[参考微信小游戏升级指南](../../minigame/publish/README.md) + +#### 我在使用 egret res 库，5.2.17 创建的新项目使用的是 assetsmanager 库，这两个库有区别么？ + +答：assetsmanager 是 res 的替代方案，这两者的 API 有 90% 保持一致，但是仍然有一些小区别，主要是在 RES.Analyzer 上，如果您遇到了相关问题，您可以在 egretProperties.json 中修改模块配置，从 assetsmanager 修改回 res 并执行 egret clean ，这样就可以换成 res 资源管理库了。更改如图所示： + +![img](x02.png) + + + +#### 当老项目（5.2.17以前）升到到最新版时，发布块游戏项目报错： + +答：升级成功后，请首先保证 HTML5 版本可以正常运行，然后再尝试发布为小米快游戏，目前我们遇到了多位开发者通过创建 5.2.17 新项目后拷贝老项目代码和素材的方式尝试升级，由于忽视了修改 egretProperties.json 中的模块配置，导致运行失败的问题。[参考微信小游戏升级指南](../../minigame/publish/README.md) + +#### 在游戏使用到 egret.getDefinitionByName() 报错，找不到对应类时： + +答：需要将要反射的类挂载到 window 对象下，例如有个 class People{} 类，需要添加代码 window["People"] = People。[参考微信小游戏示例demo](http://developer.egret.com/cn/statics/downs/testglobal.zip) + +#### 在 EUI 中使用自定义组件，发布到小米快游戏的 default.thm.js 报错提示找不到自定义组件，错误如图： + +![img](x03.png) + +答：参考上一条回答，需要将自定义组件暴露到全局作用域。 + +#### 在小游戏中报错 “Main is not defined” 时， + +答：请查看游戏的入口类名是否为 Main，如不是请修改为 Main。 + + + +#### 使用 eui 皮肤时报错 'parseFromString' of undefined，如何解决。 + +答：检查是否使用了 嵌入EXML到代码中，例： + +``` + var className = "skins.ButtonSkin"; + var exmlText = ` ... + `; +``` + +需要改成单独的皮肤文件。 + + + +#### 为什么引入第三方库报 ``` 第三方库 is not defined``` 错误. + +答： +我们要再次强调小游戏有很多的限制，首先检查我们所使用的第三方库是否符合快游戏的标准，具体可以参考快游戏官方文档，如果不符合规范，我们只能自己来修改这个库以达到标准。后期我们会整理常用的库提供给开发者。 +经检查适合小游戏的标准，但还是会报我们使用的 ```第三放库未定义```，需要我们把第三方库挂在到全局对象 window 上，我们可以在 qgame.ts 的文件中添加。例如我们加入 zlib 库。如图： + +![](x04.png) + +#### 文件加载失败： default.res.json?v=201906191000 +答：去掉`?v=201906191000` + +#### 为什么我动态设置帧频没有效果 +答：小游戏平台只能在 index.html 里设置，不能通过 stage.frameRate 方法动态修改 diff --git a/Engine2D/minigamexiaomi/qgameFAQ/x02.png b/Engine2D/minigamexiaomi/qgameFAQ/x02.png new file mode 100644 index 0000000..c93aaac Binary files /dev/null and b/Engine2D/minigamexiaomi/qgameFAQ/x02.png differ diff --git a/Engine2D/minigamexiaomi/qgameFAQ/x03.png b/Engine2D/minigamexiaomi/qgameFAQ/x03.png new file mode 100644 index 0000000..8125284 Binary files /dev/null and b/Engine2D/minigamexiaomi/qgameFAQ/x03.png differ diff --git a/Engine2D/minigamexiaomi/qgameFAQ/x04.png b/Engine2D/minigamexiaomi/qgameFAQ/x04.png new file mode 100644 index 0000000..ec4b2db Binary files /dev/null and b/Engine2D/minigamexiaomi/qgameFAQ/x04.png differ diff --git a/Engine2D/multimedia/audio/README.md b/Engine2D/multimedia/audio/README.md new file mode 100644 index 0000000..17e61fd --- /dev/null +++ b/Engine2D/multimedia/audio/README.md @@ -0,0 +1,188 @@ + +## 1.创建Sound +### 1.1.通过Sound加装音频 + +* 通过 ```var sound:egret.Sound = new egret.Sound()``` 创建 `Sound` 对象，再通过 ```sound.load(url)```加载，`Sound` 类支持的事件类型有两个：`egret.Event.COMPLETE` 音频加载完成时抛出；`egret.IOErrorEvent.IO_ERROR` 音频加载失败时抛出. + +```javascript +var sound:egret.Sound = new egret.Sound(); +sound.addEventListener(egret.Event.COMPLETE, function loadOver(event:egret.Event) { + sound.play(); +}, this); +sound.addEventListener(egret.IOErrorEvent.IO_ERROR, function loadError(event:egret.IOErrorEvent) { + console.log("loaded error!"); +}, this); +sound.load("resource/sound/sound.mp3"); +``` + +### 1.2.通过 URLLoader 加装音频。 + +* 具体调用如下。 +```javascript +var loader:egret.URLLoader = new egret.URLLoader(); +loader.addEventListener(egret.Event.COMPLETE, function loadOver(event:egret.Event) { + var sound:egret.Sound = loader.data; + sound.play(); +}, this); +loader.dataFormat = egret.URLLoaderDataFormat.SOUND; +loader.load(new egret.URLRequest("resource/sound/sound.mp3")); +``` +### 1.3.通过 res 加装音频。 + +* 具体调用如下。 +```javascript +var sound:egret.Sound = RES.getRes("sound_mp3"); +sound.play(); +``` +## 2.播放Sound + +### 2.1.播放方法 + +* `play()` 方法播放音频，有2个参数。`startTime`：声音开始播放的位置，默认为0。`loops`：声音播放的次数，小于等于0均为无限循环播放，大于0按照对应的值播放次数。 + +* 运行 `play()` 之后，会返回一个 `SoundChannel` 对象，开发者可以直接对 `SoundChannel` 进行操作，比如设置音量等。 + +* `SoundChannel` 对象的 `egret.Event.SOUND_COMPLETE` 事件是播放完成事件。 + +* 根据 `SoundChannel` 返回的 `position` 属性和 `Sound` 的 `play()` 方法可实现暂停和重播功能。 + +* `stop()` 方法停止播放。 + +### 2.2.播放类型 + +目前引擎内提供了4种声音的兼容模式，分别是 Audio、 WebAudio、QQAudio（qzone提供的声音解决方案）、以及 NativeAudio（打包方案Audio） + + +* WebAudio：IOS系统版本大于等于7的所有IOS版本的浏览器，Egret 3.2.0 以后 Android 默认也使用 WebAudio，如果不支持 WebAudio 的 app 则会自动改成 Audio 方式。 + +* QQAudio：在html页面指定了 “ https://qzonestyle.gtimg.cn/qzone/hybrid/lib/jsbridge.js ” （Qzone使用的js api）并且运行在`qq空间`的 android 机型。 + +* Audio：除使用 WebAudio 以及 QQAudio 外的其他所有的 Web 浏览器或者平台。可能出现的问题是声音播放有延迟，同一时间只能有一个音频的存在。 + +* NativeAudio：打包方案使用的audio。 + + +设置播放类型在项目根目录下的 index.html 模板文件中进行： + +```javascript +/** +* { +* "renderMode":, //引擎渲染模式，"canvas" 或者 "webgl" +* "audioType": 0 //使用的音频类型，0:默认，1:qq audio，2:web audio，3:audio +* "antialias": //WebGL模式下是否开启抗锯齿，true:开启，false:关闭，默认为false +* "retina": //是否基于devicePixelRatio缩放画布 +* } +**/ +egret.runEgret({renderMode:"webgl", audioType:0}); +``` + +## 3.音频示例 + +播放音频的简单示例代码如下 : + +```javascript +class SoundExample extends egret.DisplayObjectContainer { + public constructor() { + super(); + this.once(egret.Event.ADDED_TO_STAGE,this.onAddtoStage,this); + } + + private onAddtoStage() { + this.startLoad(); + } + + private startLoad():void { + //创建 URLLoader 对象 + var loader:egret.URLLoader = new egret.URLLoader(); + //设置加载方式为声音 + loader.dataFormat = egret.URLLoaderDataFormat.SOUND; + //添加加载完成侦听 + loader.addEventListener(egret.Event.COMPLETE, this.onLoadComplete, this); + //音频资源放在resource文件夹下 + var url:string = "resource/soundtest.mp3"; + var request:egret.URLRequest = new egret.URLRequest(url); + //开始加载 + loader.load(request); + } + + private onLoadComplete(event:egret.Event):void { + var loader:egret.URLLoader = event.target; + //获取加载到的 Sound 对象 + var sound:egret.Sound = loader.data; + this.sound = sound; + //一个简单的播放按钮 + var btn = new egret.Sprite(); + btn.graphics.beginFill(0x18f7ff); + btn.graphics.drawRoundRect(0,0,80,40,5,5); + btn.graphics.endFill(); + btn.touchEnabled = true; + + btn.anchorOffsetX = btn.width / 2; + btn.x = this.stage.stageWidth / 2; + btn.anchorOffsetY = btn.height / 2; + btn.y = this.stage.stageHeight / 2; + //监听按钮的触摸事件 + btn.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onTouch,this); + + this.addChild(btn); + } + private sound:egret.Sound; + private soundChannel:egret.SoundChannel; + + private onTouch(event:egret.Event){ + + var sound = this.sound; + var channel:egret.SoundChannel = this.soundChannel; + if(channel){ + //调用soundChannel对象的stop方法停止播放音频 + console.log(channel); + channel.stop(); + this.soundChannel = null; + return; + } + //使用SoundChannel播放音频 + channel = sound.play(0,-1); + //Egret 3.0.4 新增获取音频长度 length 属性。 + console.log(sound.length); + channel.addEventListener(egret.Event.SOUND_COMPLETE, this.onSoundComplete, this); + //保存soundChannel对象 + this.soundChannel = channel; + } + + private onSoundComplete(event:egret.Event):void { + console.log("onSoundComplete"); + } +} +``` + +首先使用 `URLLoader` 来载入音频，也可以使用上面的其他两种方式载入音频。监听这个音频的加载完成事件，当加载完成之后获取到音频的数据并新建`sound`对象。 +调用`play()`方法来播放音频，本例中，开始时间的单位为0秒，循环播放。 +这里`play`方法会返回一个`SoundChannel`对象，通过控制`SoundChannel`的`volume`属性来设置音量大小,音量范围从 0（静音）至 1（最大音量）。`SoundChannel`对象的`position`属性可以获取到当前播放的时间，单位为秒。需要注意的是`position`属性是一个只读的属性，不能通过设置`position`来设置当前的播放时间。 +如果需要停止声音，可以调用`SoundChannel`对象的 `stop()` 方法。 + + +## 4.注意事项 + +* 声音资源的格式生成请严格按照此步骤来，不然会影响兼容性。 + +1. 使用格式工厂。选择 44100Hz，96kbps 转换。 + +2. 如果还有问题，请再转一次。 + +3. 如果还有问题，请裁减音频长度再次转换。 + +4. 如果还有问题，请到论坛联系我们 [开发者论坛](http://bbs.egret.com/portal.php)，并提供对应的音频文件。 + +> 如果有问题，请尝试多转几次。 + +> 对于更专业的转换工具比如 audition，在测试中发现转换后的文件并不能解决在所有的浏览器中的播放问题，所以不推荐大家使用。 + +> 在 iOS 系统（所有设备，包括IPAD）中，使用者在可能付费的网络环境中需要等待用户交互操作后才能播放媒体。为了获得在 iOS 系统中最大的兼容性，请避免使用自动播放音频（载入完成即播放），应添加合适的触发条件（比如播放按钮）。 + +> 如果使用 WebAudio 方式还不能自动播放的话，那么目前来说没有其他方式来解决自动播放的问题。 + +* iOS 游戏的域名必须要在玩吧指定的域名下才可以使用上面提到的Qzone的js api(jsBridge)。 + +* 由于一些浏览器不支持直接加载后播放，因此建议先预加载音乐文件，并在点击事件时直接调用 `sound.play()`。 + +* 非 WebAudio 方式播放的音频，很有可能在浏览器只能同时播放一种声音（这个也是为什么qzone单独提供了声音解决方案）。 diff --git a/Engine2D/multimedia/environment/README.md b/Engine2D/multimedia/environment/README.md new file mode 100644 index 0000000..925d78a --- /dev/null +++ b/Engine2D/multimedia/environment/README.md @@ -0,0 +1,209 @@ + +## 1.系统信息 +Egret 项目可以运行在支持HTML5的桌面浏览器和各种移动浏览器中。也可以运行在 Egret Runtime 的加速和原生系统环境中。若要获得不同系统的系统信息可以通过`egret.Capabilities `类来获取。需要注意的是它的值都是静态的，可以读取但是不能更改。 + +**注意：** 电脑上没有陀螺仪和GPS模块，无法获取相关信息，需要在手机上调试。 + +### 1.1.系统常量 + +#### egret.Capabilities.isMobile +通过`egret.Capabilities.isMobile`可以知道程序是否运行在移动系统中。它的值是一个静态的布尔型值，当获取到的值为`true`时表示在移动系统中。 + +#### egret.Capabilities.language +`egret.Capabilities.language`表示运行内容的系统的语言代码。它的值是ISO 639-1中的小写双字母语言代码。可以参考[ISO 639-1](http://baike.baidu.com/link?url=me8UVbWB-oLjVT_fyxTqPwzf4cagZroNFfbiZy0Meo3VnACeZOup5vabLqoRaDwozxGm-dx600XBZRRV34pkca#2) + +其中可能遇到的比价特殊是是以下几项： + +* 简体中文 zh-CN +* 繁体中文 zh-TW +* 英语 en +* 日语 ja +* 韩语 ko + +#### egret.Capabilities.os +`egret.Capabilities.os`属性表示当前操作系统，具体可能值如下： + +* 苹果手机操作系统 "iOS" +* 安卓手机操作系统 "Android" +* 微软手机操作系统 "Windows Phone" +* 微软桌面操作系统 "Windows PC" +* 苹果桌面操作系统 "Mac OS" +* 未知操作系统 "Unknown" + +#### egret.Capabilities.runtimeType +`egret.Capabilities.runtimeType`属性可以获取的项目运行类型。 + +| 属性值 |对应的常量 |对应的类型 | +|:-------------|-------------|-------------:| +|web| egret.RuntimeType.WEB | 运行在浏览器上| +|native| egret.RuntimeType.NATIVE | 运行在第一代原生项目上| +|runtime2| egret.RuntimeType.RUNTIME2 | 运行在第二代原生项目上| +|wxgame| egret.RuntimeType.WXGAME | 运行在微信小游戏上| + + + +### 1.2.示例 +获得系统信息可以参考下面的代码： + +```javascript +/** + * 获取系统信息类 + */ +class CapabilitiesTest extends egret.Sprite { + + public constructor () { + + super(); + + var capabilites:Array = [ + {text:"移动设备: " + egret.Capabilities.isMobile + "n",style:{size:17,"fontFamily": "楷体"}} , + {text:"语言代码: " + egret.Capabilities.language + "n",style:{size:17,"fontFamily": "楷体"}}, + {text:"操作系统: " + egret.Capabilities.os + "n",style:{size:17,"fontFamily": "楷体"}}, + {text:"运行类型: " + egret.Capabilities.runtimeType + "n",style:{size:17,"fontFamily": "楷体"}} + ]; + + var showCapabilities:egret.TextField = new egret.TextField(); + + showCapabilities.textFlow = capabilites; + + this.addChild(showCapabilities); + + } +} +``` + +## 2.陀螺仪 + +在移动设备中，一般支持获取设备本身的旋转角度。`egret.DeviceOrientation` 可以监听设备方向的变化。 + +### 2.1.获取设备旋转角度 + +如下示例演示了如何监听旋转的变化并获得旋转的值： + +```javascript +class DeviceOrientationExample extends egret.DisplayObjectContainer { + private label: egret.TextField; + public constructor() { + super(); + this.label = new egret.TextField(); + this.label.y = 50; + this.label.x = 50; + this.addChild(this.label); + //创建 DeviceOrientation 类 + var orientation = new egret.DeviceOrientation(); + //添加事件监听器 + orientation.addEventListener(egret.Event.CHANGE,this.onOrientation,this); + //开始监听设备方向变化 + orientation.start(); + } + private onOrientation(e:egret.OrientationEvent){ + this.label.text = + "方向: nalpha:"+e.alpha + +",nbeta:"+e.beta + +",ngamma:"+e.gamma; + } +} +``` + +上面代码首先创建了`DeviceOrientation`的实例`orientation`。并给他添加了一个事件侦听器，监听它的`CHANGE`事件。然后调用了他的`start()`方法来开始监听设备方向的变化。 + +当系统监听到了方向的变化后，将回调函数 `onOrientation`。然后通过`egret.OrientationEvent`事件的三个属性来获取设备的方向变化信息。 + +`OrientationEvent`的三个属性：`alpha`,`beta`和`gamma`。 + +* `alpha`表示设备绕 Z 轴的角度，单位是 角度 范围是 0 到 360。 + +* `beta` 表示设备绕 X 轴的角度，单位是 角度 范围是 -180 到 180.这个值表示设备从前向后的旋转状态。 + +* `gamma` 表示设备绕 Y 轴的角度，单位是 角度 范围是 -90 到 90.这个值表示设备从左到右的旋转状态。 + + +## 3.地理位置 + +很多原生应用和游戏通过移动设备的硬件支持来获取用户的位置信息，Egret 也支持获取位置信息。 + +通过 Egret 的 `Geolocation`类来获取设备的当前位置。当开始监听位置改变信息时将派发`CHANGE`事件，并将改变的位置信息传递给回调函数。通过`GeolocationEvent`类型的回调参数可以获取到相应的经纬度，速度，海拔等信息。 + +### 3.1.获取位置信息 + +示例代码如下： + +```javascript +/** + * 获取地理位置信息并显示出来 + */ +class GeolocationTest extends egret.DisplayObjectContainer { + private label: egret.TextField; + public constructor() { + super(); + //显示信息的label + this.label = new egret.TextField(); + this.label.x = STAGEWIDTH / 2; + this.addChild(this.label); + this.label.size = 20; + this.label.text = "暂未获取到经纬度信息"; + this.label.anchorOffsetX = this.label.width / 2; + + var gps = new egret.Geolocation(); + //监听经纬度变化的事件 + gps.addEventListener(egret.Event.CHANGE,this.onGotLocation,this); + //开始监听变化 + gps.start(); + } + private onGotLocation(e:egret.GeolocationEvent){ + this.label.text = "纬度: "+e.latitude.toFixed(4)+ + " 海拔: "+e.altitude+ + "n经度:"+e.longitude.toFixed(4) + +" 速度: "+e.speed; + this.label.anchorOffsetX = this.label.width / 2; + } +} +``` + +这里实例化了一个`Geolocation`对象，并给它添加了一个监听器。当`gps`执行`start()`方法后就开始监听位置变化。如果需要关闭监听可以使用它的`stop()`方法。 +如果可以获取到位置信息的改变，将调用`onGotLocation()`。这里通过下面属性来获取位置的具体值。 + +* latitude 纬度信息 +* longitude 经度信息 +* altitude 海拔信息 +* speed 速度信息 + +需要注意的是`altitude`和`speed`可能是null + +### 3.2.获取信息失败的处理 + +要获得用户的位置信息时需要用户允许的。如果当用户选择了不共享当前的位置信息,将抛出`GeolocationEvent`的`PERMISSION_DENIED`事件。 + +在我们上面的构造函数里添加gps的监听： +```javascript +//监听用户拒绝事件 +gps.once(egret.GeolocationEvent.PERMISSION_DENIED,this.userDenied,this); +``` +并给在 `GeolocationTest` 里添加处理函数，将该信息提示给用户： + +```javascript +private userDenied(e:egret.GeolocationEvent){ + this.label.text = "用户拒绝访问位置信息，获取位置信息失败"; + this.label.anchorOffsetX = this.label.width / 2; +} +``` + +如果由于其他原因未能获取位置信息，将抛出`GeolocationEvent`的`UNAVAILABLE`事件。这里完善上面的程序，添加不能获取信息时的处理： + +```javascript +//监听失败事件 +gps.addEventListener(egret.GeolocationEvent.UNAVAILABLE,this.unAvailable,this); +``` + +在`GeolocationTest` 里添加处理函数，将该信息提示给用户： + +```javascript +private unAvailable (e:egret.GeolocationEvent) { + this.label.text = "获取位置信息失败: " + e.errorMessage + "n" + + "错误类型: " + e.errorType; + this.label.anchorOffsetX = this.label.width / 2; +} +``` + +这里的`errorMessage`表示获取位置信息失败的具体信息，`errorType`表示错误的类型。 + diff --git a/Engine2D/multimedia/video/561dc2093af5e.png b/Engine2D/multimedia/video/561dc2093af5e.png new file mode 100644 index 0000000..351899c Binary files /dev/null and b/Engine2D/multimedia/video/561dc2093af5e.png differ diff --git a/Engine2D/multimedia/video/561dc219f3902.png b/Engine2D/multimedia/video/561dc219f3902.png new file mode 100644 index 0000000..0dcc408 Binary files /dev/null and b/Engine2D/multimedia/video/561dc219f3902.png differ diff --git a/Engine2D/multimedia/video/README.md b/Engine2D/multimedia/video/README.md new file mode 100644 index 0000000..e0ebbf5 --- /dev/null +++ b/Engine2D/multimedia/video/README.md @@ -0,0 +1,233 @@ +在 Egret 中，可通过`egret.Video`来创建和管理视频。 + +> 需要注意的是，大部分移动设备只支持全屏播放。 + +## 1.准备工作 + +W3C 提供了在线地址来测试 HTML5 的视频功能。地址为：`http://media.w3.org/2010/05/sintel/trailer.mp4`。 + +下面的代码将使用这个视频作为素材。代码中需要一些 UI 的元素，所以使用默认的 EUI 项目。 + +可以通过: + +``` +egret create VideoTest --type eui +``` + +来创建默认的 EUI 项目。更多关于使用 EUI 方法参考:[EUI库 快速入门](http://developer.egret.com/cn/github/egret-docs/extension/EUI/getStarted/getStarted/index.html) + +## 2.使用方法 + +### 2.1.创建视频 +创建`Video`的代码如下: + +```javascript +class VideoTest extends egret.DisplayObjectContainer { + public constructor() { + super(); + this.video = new egret.Video(); + this.video.x = 0; //设置视频坐标x + this.video.y = 0; //设置视频坐标y + this.video.width = 640; //设置视频宽 + this.video.height = 320; //设置视频高 + this.video.fullscreen = false; //设置是否全屏（暂不支持移动设备） + this.video.poster = "resource/assets/Button/button_up.png"; //设置loding图 + this.video.load("http://media.w3.org/2010/05/sintel/trailer.mp4"); + this.addChild(this.video); //将视频添加到舞台 + //监听视频加载完成 + this.video.once(egret.Event.COMPLETE,this.onLoad,this); + //监听视频加载失败 + this.video.once(egret.IOErrorEvent.IO_ERROR,this.onLoadErr,this); + } + private video: egret.Video; + private onLoad(e: egret.Event) { + var btnPlay: eui.Button = new eui.Button(); //新建播放按钮 + btnPlay.label = "播放"; + btnPlay.x = this.video.x + 20; + btnPlay.y = this.video.y + this.video.height + 20; + this.addChild(btnPlay); + //监听按钮行为，当按下时调用播放函数。 + btnPlay.addEventListener(egret.TouchEvent.TOUCH_TAP,this.play,this); + //获取视频长度 + console.log(this.video.length); + } + private onLoadErr(e: egret.Event) { + console.log("video load error happened"); + } + public play(e: egret.TouchEvent) { + this.video.play(); + } +} +``` + +这里需要注意的是在 EUI 默认项目的入口文件类里面需要实例化上面的`VideoTest`,并删除默认的 UI。代码如下： + +```javascript +class Main extends eui.UILayer { + + protected createChildren(): void { + super.createChildren(); + + var theme = new eui.Theme("resource/default.thm.json", this.stage); + this.addChild(new VideoTest()); + } +} +``` + +编译并运行我们可以看到如下的效果： + +![](561dc2093af5e.png) + +> 注意: 在大多数移动设备中，视频是强制全屏播放的。当在手机上点击播放时会弹出全屏的播放器。而上面的代码在PC上将按照我们的设定不会全屏播放。 + +在上述代码中，首先设置了视频的宽高和位置。 `egret.Video`类同样继承自DisplayObject，所以可以操作其的位置宽高和`touchEnable`属性等。同样也需要加到显示列表当中才能被显示出来。 + +然后设置了`poster` 属性为本地的一张图片，`poster`表示视频加载前，或者在不支持将 video 画在 canvas 的设备上，想要显示的视频截图地址，也就是下面的截图。 + +![](561dc219f3902.png) + +之后通过`load`方法载入了视频的地址，然后监听加载完成和失败的事件。 + +> 需要注意的是视频需要加载完成再调用`play()`方法。 + +这里当视频加载完成之后添加一个播放按键，当点击时播放该视频。 + +这里视频的`play()`方法有两个参数，为播放的位置和是否循环。默认的从头开始播放，并且不循环。 + +### 2.2.暂停视频 + +通过`Video`的`pause()`方法将暂停视频。 +继续完善上面的程序，添加暂停按钮的功能。在`onLoad`函数中，绘制一个暂停的按钮，并监听其行为： + +```javascript +//在onLoad函数中添加暂停按钮 +var btnPause:eui.Button = new eui.Button(); +btnPause.label = "暂停"; +btnPause.x = btnPlay.x + btnPlay.width + 20; +btnPause.y = btnPlay.y; +this.addChild(btnPause); +btnPause.addEventListener(egret.TouchEvent.TOUCH_TAP,this.pause,this); +``` + +然后在`VideoTest`类中添加暂停视频函数： +```javascript +public pause(e:egret.TouchEvent) { + this.video.pause(); //暂停视频 +} +``` + +点击该按钮视频将暂停播放，再一次点击播放按钮视频将继续播放。 + +### 2.3.设置音量 + +通过设置`Video`的`volume`属性可以设置其音量的大小。其属性值为0到1。 +下面通过 EUI 的水平滑块来控制。同样在`onLoad`函数中添加如下代码： + +```javascript +//设置控制音量的滑块，监听它的CHANGE事件,当滑动滑块时回调 `setVoluem()` 函数。 +var volume:eui.HSlider = new eui.HSlider(); +volume.x = btnPlay.x; +volume.y = btnPlay.y + btnPlay.height + 20; +this.addChild(volume); +volume.value = 100; +volume.maximum = 100; +volume.minimum = 0; +volume.width = 200; +volume.addEventListener(egret.Event.CHANGE,this.setVoluem,this); +``` + +然后在`VideoTest`类中添加设置音量的函数： + +```javascript +public setVoluem(e:egret.Event) { + this.video.volume = e.target.value / 100; +} +``` +这里滑块设置的最大值和最小值是0和100，由于`volume`的默认值为0到1,所以要除以100. + +### 2.4.全屏播放 + +只有在桌面浏览器上才能控制非全屏的效果。通过设置`fullscreen`属性来控制是否全屏。默认值为`true`，即全屏播放。 + +同样在`onLoad`函数中添加如下代码： + +```javascript +//设置全屏播放开关按钮 +var screenSwitcher:eui.ToggleSwitch = new eui.ToggleSwitch(); +screenSwitcher.label = "全屏"; +screenSwitcher.x = btnPause.x + btnPause.width + 20; +screenSwitcher.y = btnPause.y; +screenSwitcher.addEventListener(egret.Event.CHANGE,this.setFullScreen,this); +this.addChild(screenSwitcher); +``` + +然后在`VideoTest`类中添加设置是否全屏显示的函数： + +```javascript +public setFullScreen(e:egret.Event) { + //当开关被选择后。该开关的selected属性将变为true,反之则为false + this.video.fullscreen =e.target.selected; +} +``` + +### 2.5.显示播放时间 + +`Video`的`position`属性表示视频文件中当前播放的位置（以秒为单位）。 + +同样在`onLoad`函数中添加如下代码，用来显示播放时间。 + +```javascript +//使用label标签来显示文字，并监听`ENTER_FRAME`事件来更新显示。 +var position:eui.Label = new eui.Label(); +position.x = btnPlay.x; +position.y = volume.y + volume.height + 20; +this.addChild(position); +position.addEventListener(egret.Event.ENTER_FRAME,this.showPosition,this); +``` + +然后在`VideoTest`类中添加显示播放时间的函数： + +```javascript +public showPosition(e:egret.Event) { + e.target.text = "播放时间: " + this.video.position; +} +``` + +### 2.6.获取视频的`bitmapData` + +通过视频的`bitmapData`属性可以获得其当前帧的纹理信息。可以将它绘制到舞台上。 + +在`onLoad`函数中添加截图的按钮，点击该按钮将在舞台上添加一张截图: + +```javascript +var btnPrintScreen:eui.Button = new eui.Button(); +btnPrintScreen.label = "截图"; +btnPrintScreen.x = screenSwitcher.x + screenSwitcher.width + 40; +btnPrintScreen.y = btnPlay.y; +this.addChild(btnPrintScreen); +btnPrintScreen.addEventListener(egret.TouchEvent.TOUCH_TAP,this.printScreen,this); +``` + +然后在`VideoTest`类中添加截图的函数： + +```javascript +public printScreen(e:egret.Event) { + var bitmap:egret.Bitmap = new egret.Bitmap(); + bitmap.bitmapData = this.video.bitmapData; + bitmap.x = this.video.x; + bitmap.y = this.video.y + this.video.height + 150; + this.addChild(bitmap); +} +``` + +这里创建了一个位图，并将它的`bitmapData`属性设置为视频的`bitmapData`属性。将该位图添加到舞台上面就可以显示截图了。 + +### 2.7.获取视频长度 + +`Video`的 `length` 属性可以获得视频的长度。 + +```javascript +//获取视频长度 +console.log(this.video.length); +``` + diff --git a/Engine2D/net/loadBitmap/README.md b/Engine2D/net/loadBitmap/README.md new file mode 100644 index 0000000..5779363 --- /dev/null +++ b/Engine2D/net/loadBitmap/README.md @@ -0,0 +1,30 @@ +## 1.使用 +Egret 提供了 `ImageLoader` 类，用于加载位图文件。 + +例如 `ImageLoader` 类通过如下代码加载位于 'resource/egret.png' 的图片： + +``` javascript +var imgLoader:egret.ImageLoader = new egret.ImageLoader; +imgLoader.once( egret.Event.COMPLETE, this.imgLoadHandler, this ); +imgLoader.load( "resource/egret.png" ); +``` + +在所定义的回调事件中，可以用下面的方式获取该图片对应的 BitmapData，并以此来创建位图： + +``` javascript +imgLoadHandler( evt:egret.Event ):void{ + let loader:egret.ImageLoader = evt.currentTarget; + let bmd:egret.BitmapData = loader.data; + //创建纹理对象 + let texture = new egret.Texture(); + texture.bitmapData = bmd; + let bmp:egret.Bitmap = new egret.Bitmap(texture); + this.addChild(bmp); +} +``` + +## 2.跨域处理 + +* 服务器设置访问权限。 +* 可以通过尝试修改 `imgLoader.crossOrigin = 'anonymous'` 来以匿名的方式访问。不过在使用 `texture.toDataURL` 时会报跨域问题。 +* Webgl 渲染下，暂不支持跨域图片处理。 diff --git a/Engine2D/net/loadText/README.md b/Engine2D/net/loadText/README.md new file mode 100644 index 0000000..224bbf8 --- /dev/null +++ b/Engine2D/net/loadText/README.md @@ -0,0 +1,74 @@ +Egret 加载资源主要使用 `egret.HttpRequest` 类。该类封装了在异步加载资源和通讯方面作为 H5 标准的 `XMLHttpRequest` 对象。 + +本节讲解的主要是加载静态文件，分为两种类型：文本和二进制数据。 +加载静态文件的特点是可以进行进度跟踪。 + +## 1.加载文本 + +`HttpRequest` 对象最核心的方法就是 `open()` 和 `send()` 。 `open()` 方法接收该请求所要访问的URL。 作为可选项还可以传入加载方式，这个参数通常用 `HttpMethod` 取常量，默认是最常用的 GET 方式。 +在加载完成时，通过 `HttpRequest` 对象的 `response` 属性来获取返回的数据。 +加载文本数据的方法如下： + +```javascript +var url = "resource/config/description.json"; +var request:egret.HttpRequest = new egret.HttpRequest(); + +var respHandler = function( evt:egret.Event ):void{ + switch ( evt.type ){ + case egret.Event.COMPLETE: + var request:egret.HttpRequest = evt.currentTarget; + console.log( "respHandler:n", request.response ); + break; + case egret.IOErrorEvent.IO_ERROR: + console.log( "respHandler io error" ); + break; + } +} + +var progressHandler = function( evt:egret.ProgressEvent ):void{ + console.log( "progress:", evt.bytesLoaded, evt.bytesTotal ); +} + +request.once( egret.Event.COMPLETE, respHandler, null); +request.once( egret.IOErrorEvent.IO_ERROR, respHandler, null); +request.once( egret.ProgressEvent.PROGRESS, progressHandler, null); +request.open( url, egret.HttpMethod.GET ); +request.send( ); +``` +`HttpRequest` 默认的加载类型是 TEXT ，因此不需要专门设定。 +需要侦听的主要事件是 `COMPLETE` ，从这里获取数据。 +要考虑意外的情况，在 IO_ERROR 做这些情况的处理。 +加载进度事件是 `ProgressEvent.PROGRESS` , 在加载内容较大的资源时比较有用。 + +## 2.加载二进制 +加载二进制数据的方法如下： + +```javascript +var url = "resource/assets/egret_icon.png"; +var request:egret.HttpRequest = new egret.HttpRequest(); +request.responseType = egret.HttpResponseType.ARRAY_BUFFER; + +var respHandler = function( evt:egret.Event ):void { + switch ( evt.type ){ + case egret.Event.COMPLETE: + var request:egret.HttpRequest = evt.currentTarget; + var ab:ArrayBuffer = request.response; + console.log( "respHandler:n", ab.byteLength ); + break; + case egret.IOErrorEvent.IO_ERROR: + console.log( "respHandler io error" ); + break; + } +} + +request.once( egret.Event.COMPLETE, respHandler, null); +request.once( egret.IOErrorEvent.IO_ERROR, respHandler, null); +request.open( url, egret.HttpMethod.GET ); +request.send( ); +``` +加载二进制数据，先设置 `HttpRequest` 的加载类型为 `ARRAY_BUFFER`。 +数据加载完成后可从 `response` 属性取到 `ArrayBuffer` 对象，即可进行进一步读取操作。 + +>通过 `URLLoader` 构建通信请求请访问： +[URLLoader网络通讯](../../../extension/game/URLLoaderNetwork/README.md) +`URLLoader` 类已移动到 game 扩展库中。 diff --git a/Engine2D/net/sendHTTP/README.md b/Engine2D/net/sendHTTP/README.md new file mode 100644 index 0000000..b5a7e60 --- /dev/null +++ b/Engine2D/net/sendHTTP/README.md @@ -0,0 +1,297 @@ +Egret 中封装了 `XMLHttpRequest` 进行异步的数据交互。 + +## 1.HTTP请求 + +通过 HTTP 协议可以实现 HTTP 客户端（如web浏览器）向 HTTP 服务端请求信息和服务。目前的 HTTP 1.1 协议是一种无状态协议，也就是说 HTTP 客户端和 HTTP 服务端不能保持持久的链接，使用请求/应答的模式来工作，如果客户端向服务端发送信息，服务端做出应答之后将关闭链接，来形成一套请求和应答。 + +### 1.1.基本过程 + +HTTP 通信机制都要经过如下的几个步骤： + +1. 建立TCP连接. +2. Web浏览器向Web服务器发送请求命令. +3. Web浏览器发送请求头信息 +4. Web服务器应答 +5. Web服务器发送应答头信息 +6. Web服务器向浏览器发送数据 +7. Web服务器关闭TCP连接(如果请求头部设置了`Connection:keep-alive`将保持连接状态仍然打开). + +### 1.2.HTTP 请求方法 + +#### GET 方法 + +GET 方法是 HTTP　请求的默认方法，数据经过简单的编码发送出去，并作为 URL 的一部分发送到服务器。由于浏览器对 URL 长度的限制，提交的数据长度也有限制。 + +#### POST 方法 + +POST 方法克服了 GET 方法的一些缺点，可以发送较大的数据.数据也不再是明文发送的。出于安全的考虑一般选用 POST 方法。 POST 提交的数据也可以从标准输入输出流中获取。 + +## 2.发送请求 + +测试发送请求，需要一个稳定的服务端。可以使用[httpbin.org](http://httpbin.org/)提供的`http://httpbin.org/get`和`http://httpbin.org/post`这两个稳定的服务器地址来测试发送请求。其中[get](http://httpbin.org/get)会返回 GET 请求的数据，[post](http://httpbin.org/post)会返回 POST 请求发送的数据。 + +Egret 使用 `HttpRequest` 类发送 HTTP 请求。可以指定请求的方法为 GET 或者 POST 。可以通过监听加载事件来检测服务器端的响应。使用 `HttpRequest` 来发送请求的过程如下: + +1. 实例化一个 `HttpRequest` 对象。 +2. 设置它的响应类型 `responseType`。 +3. 通过 `open` 方法初始化请求一个对象，初始化请求地址和请求类型。 +4. 通过 `setRequestHeader` 设置请求头信息。如果是POST带参数的请求这一步很重要,需要告诉服务端请求的参数格式，而且这一步需要在 `open` 之后执行。 +5. 通过 `send` 方法发送请求，如果是 `post` 方法可以传入参数。 +6. 添加监听，监听服务器端的响应，包括进度事件和请求成功和失败事件。 + + +代码如下: + +~~~javascript +var request = new egret.HttpRequest(); +request.responseType = egret.HttpResponseType.TEXT; +request.open("http://httpbin.org/get",egret.HttpMethod.GET); +request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); +request.send(); +request.addEventListener(egret.Event.COMPLETE,this.onGetComplete,this); +request.addEventListener(egret.IOErrorEvent.IO_ERROR,this.onGetIOError,this); +request.addEventListener(egret.ProgressEvent.PROGRESS,this.onGetProgress,this); +~~~ + +上面发送了一个 GET 请求到`http://httpbin.org/get`，然后添加回调事件，当请求成功或者失败之后来获取数据。 + +通过`COMPLETE`事件的`response`属性可获取到返回的信息。通过 `ProgressEvent` 事件的`bytesLoaded`和`bytesTotal`获取可加载进度。回调函数代码如下： + +~~~javascript +private onGetComplete(event:egret.Event):void { + var request = event.currentTarget; + console.log("get data : ",request.response); + var responseLabel = new egret.TextField(); + responseLabel.size = 18; + responseLabel.text = "GET response: \n" + request.response.substring(0, 50) + "..."; + this.addChild(responseLabel); + responseLabel.x = 50; + responseLabel.y = 70; +} + +private onGetIOError(event:egret.IOErrorEvent):void { + console.log("get error : " + event); +} + +private onGetProgress(event:egret.ProgressEvent):void { + console.log("get progress : " + Math.floor(100*event.bytesLoaded/event.bytesTotal) + "%"); +} +~~~ + +发送 POST 请求的代码如下: + +~~~javascript +var request = new egret.HttpRequest(); +request.responseType = egret.HttpResponseType.TEXT; +//设置为 POST 请求 +request.open("http://httpbin.org/post",egret.HttpMethod.POST); +request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); +request.send(); +request.addEventListener(egret.Event.COMPLETE,this.onPostComplete,this); +request.addEventListener(egret.IOErrorEvent.IO_ERROR,this.onPostIOError,this); +request.addEventListener(egret.ProgressEvent.PROGRESS,this.onPostProgress,this); +~~~ + +添加回调函数： + +~~~javascript +private onPostComplete(event:egret.Event):void { + var request = event.currentTarget; + console.log("post data : ",request.response); + var responseLabel = new egret.TextField(); + responseLabel.size = 18; + responseLabel.text = "POST response:\n" + request.response.substring(0, 50) + "..."; + this.addChild(responseLabel); + responseLabel.x = 300; + responseLabel.y = 70; +} + +private onPostIOError(event:egret.IOErrorEvent):void { + console.log("post error : " + event); +} + +private onPostProgress(event:egret.ProgressEvent):void { + console.log("post progress : " + Math.floor(100*event.bytesLoaded/event.bytesTotal) + "%"); +} +~~~ + +## 3.发送带参数的请求 + +上面我们发送了一段空的请求到服务端，实际使用过程中一般都需要发送带参数的请求到服务端。 + +发送数据的格式：在 HTTP 客户端发送的数据，一般以`key`和`value`的形式组成，多个数据之间用`&`相连。拼接之后形成如下的形式: + +~~~javascript +key1=value1&key2=valueP2 +~~~ + +通过 GET 方法发送的参数会加到 URL 的后面拼接起来，并以`?`分隔。POST 方法发送的参数需要先设置 HTTP 请求的头信息，告诉服务端是以什么样的形式来发送的数据。我们最常用的就是`application/x-www-form-urlencoded`,表示我们以`key`和`value`方式来格式化参数。服务端也可以用同样的方法来取到参数。 + +### 3.1.服务端获取参数配置 + +下面以 PHP 为例来简要说明发送和或取参数的基本过程。 + +> PHP 环境配置请自行配置。其他后端语言同理。如果不使用`key`和`value`的方式获取数据，请参考相应语言的标准输入流的方式来获取。 + +首先建立`get_testphp`文件，在 PHP 中获得 GET 的参数可以通过一个全局数组`$_GET[]`来获取到。下面代码将获取并返回`key`为`p1`和`p2`的参数的值。 + +~~~javascript + +~~~ + +同理建立`post_test.php`,在 PHP 中通过全局数组`$_POST[]`来获取参数。下面代码将获取并返回`key`为`p1`和`p2`的参数的值。 +~~~javascript + +~~~ + +### 3.2.客户端发送参数 + +建立好两个 PHP 文件后，向他们发送参数。 + +首先是 GET 请求，GET 请求需要将参数拼接到 URL 后面实现。其中 URL 和 参数之间需要用 `?` 链接。修改上面 GET 请求相应代码如下: + +~~~javascript +//拼接参数 +var params = "?p1=getP1&p2=getP2"; +var request = new egret.HttpRequest(); +request.responseType = egret.HttpResponseType.TEXT; +//将参数拼接到url +request.open("php/get_test.php"+params,egret.HttpMethod.GET); +request.send(); +~~~ + +发送 POST 请求. 需要注意的是发送 POST 请求需要将参数放到`send`方法的参数中发送出去。并且要设置其响应头，在我们的例子中使用`key` `value` 的方式来格式化参数，这里需要设置响应头`Content-Type`为`application/x-www-form-urlencoded`。修改上面 POST 请求相应代码如下: + +~~~javascript +//拼接参数 +var params = "p1=postP1&p2=postP2"; + +var request = new egret.HttpRequest(); +request.responseType = egret.HttpResponseType.TEXT; +request.open("php/post_test.php",egret.HttpMethod.POST); +//设置响应头 +request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); +//发送参数 +request.send(params); +~~~ + +完整代码如下: + +~~~javascript +/** + * 下面的示例使用 egret.HttpRequest 类进行网络通信。 + */ +class Main extends egret.DisplayObjectContainer { + + private statusGetLabel:egret.TextField; + private statusPostLabel:egret.TextField; + + public constructor() { + super(); + this.sendGetRequest(); + this.sendPostRequest(); + } + + private sendGetRequest():void { + var statusGetLabel = new egret.TextField(); + this.statusGetLabel = statusGetLabel; + statusGetLabel.size = 18; + statusGetLabel.text = "GET request being sent to httpbin.org"; + this.addChild(statusGetLabel); + statusGetLabel.x = 50; + statusGetLabel.y = 40; + var params = "?p1=getP1&p2=getP2"; + var request = new egret.HttpRequest(); + request.responseType = egret.HttpResponseType.TEXT; + request.open("php/get_test.php"+params,egret.HttpMethod.GET); + request.send(); + + request.addEventListener(egret.Event.COMPLETE,this.onGetComplete,this); + request.addEventListener(egret.IOErrorEvent.IO_ERROR,this.onGetIOError,this); + request.addEventListener(egret.ProgressEvent.PROGRESS,this.onGetProgress,this); + } + + private onGetComplete(event:egret.Event):void { + var request = event.currentTarget; + console.log("get data : ",request.response); + var responseLabel = new egret.TextField(); + responseLabel.size = 18; + responseLabel.text = "GET response: \n" + request.response.substring(0, 50) + "..."; + this.addChild(responseLabel); + responseLabel.x = 50; + responseLabel.y = 70; + this.statusGetLabel.text = "Get GET response!"; + } + + private onGetIOError(event:egret.IOErrorEvent):void { + console.log("get error : " + event); + } + + private onGetProgress(event:egret.ProgressEvent):void { + console.log("get progress : " + Math.floor(100*event.bytesLoaded/event.bytesTotal) + "%"); + } + + private sendPostRequest() { + var statusPostLabel = new egret.TextField(); + this.statusPostLabel = statusPostLabel; + this.addChild(statusPostLabel); + statusPostLabel.size = 18; + statusPostLabel.x = 300; + statusPostLabel.y = 40; + statusPostLabel.text = "Sending POST request to httpbin.org"; + + var params = "p1=postP1&p2=postP2"; + + var request = new egret.HttpRequest(); + request.responseType = egret.HttpResponseType.TEXT; + request.open("php/post_test.php",egret.HttpMethod.POST); + request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); + request.send(params); + request.addEventListener(egret.Event.COMPLETE,this.onPostComplete,this); + request.addEventListener(egret.IOErrorEvent.IO_ERROR,this.onPostIOError,this); + request.addEventListener(egret.ProgressEvent.PROGRESS,this.onPostProgress,this); + + } + + private onPostComplete(event:egret.Event) { + var request = event.currentTarget; + console.log("post data : ",request.response); + var responseLabel = new egret.TextField(); + responseLabel.size = 18; + responseLabel.text = "POST response:\n" + request.response.substring(0, 50) + "..."; + this.addChild(responseLabel); + responseLabel.x = 300; + responseLabel.y = 70; + this.statusPostLabel.text = "Get POST response!"; + } + + private onPostIOError(event:egret.IOErrorEvent):void { + console.log("post error : " + event); + } + + private onPostProgress(event:egret.ProgressEvent):void { + console.log("post progress : " + Math.floor(100*event.bytesLoaded/event.bytesTotal) + "%"); + } +} +~~~ + + + + + + + + + + + + + + + diff --git a/Engine2D/projectConfig/cmdManual/README.md b/Engine2D/projectConfig/cmdManual/README.md new file mode 100644 index 0000000..ff3b3b6 --- /dev/null +++ b/Engine2D/projectConfig/cmdManual/README.md @@ -0,0 +1,212 @@ + +# 用法 +`egret [command]` +### 举例: + 1、运行名为【HelloWorld】的一个项目 + egret run HelloWorld + 2、编译名为【HelloWorld】的一个项目 + egret build HelloWorld + +# command列表: + +## create +创建新项目 + +### 用法: + + egret create project_name [--type core|eui] +### 参数说明: + +| 关键字 | 描述 +| ------------ | ------------ +| `project_name` | 项目名称，按照操作系统的命名规范命名 +| `--type` | 要创建的项目类型 core 或 eui，默认值为core + + +### 举例: + 1、创建名为【HelloWorld】的一个空项目 + egret create HelloWorld + 2、创建名为【HelloWorld】的一个eui项目 + egret create HelloWorld --type eui + + +## create_lib +创建新第三方库项目 + +### 用法: + + egret create_lib lib_name +### 参数说明: + +| 关键字 | 描述 +| ------------ | ------------ +| `lib_name` | 第三方库名称，按照操作系统的命名规范命名 + + + + +## create_app +从h5游戏生成app + +### 用法: + + egret create_app app_name -f h5_game_path -t template_path + +### 参数说明: + +| 关键字 | 描述 +| ------------ | ------------ +| `app_name` | 移动应用项目名称，按照操作系统的命名规范命名 +| `-f` | app项目所对应h5项目的路径 +| `-t` | 对应 Native Support 路径 + +如果是在项目文件夹下编译，就不要加项目名称 +注意：路径最好加引号，防止路径中有空格报错 + +## build +构建指定项目 + +### 用法: + + egret build [project_name] [-e] [--target wxgame|bricks|ios|android] +### 参数说明: + +| 关键字 | 描述 +| ------------ | ------------ +| `project_name` | 项目名称，按照操作系统的命名规范命名 +| `-e` | 编译指定项目的同时编译引擎目录 +| `--target` | 编译的目标版本，可选参数有 `wxgame`：微信小游戏；`bricks`：玩一玩；`android`：安卓项目；`iOS`：iOS项目 + +如果是在项目文件夹下执行命令，可以不加项目名称 + + +### 举例: + + 1、编译【HelloWorld】 + egret build HelloWorld + 2、编译【HelloWorld】的同时编译引擎 + egret build HelloWorld -e + 3、编译【HelloWorld】的同时编译微信小游戏项目 + egret build HelloWorld --target wxgame + +## publish +发布项目 + +### 用法: + + egret publish [project_name] [--version [version]] [--target wxgame|bricks|ios|android] +### 参数说明: + +| 关键字 | 描述 +| ------------ | ------------ +| `project_name` | 项目名称，按照操作系统的命名规范命名 +| `--version` | 设置发布之后的版本号，可以不设置 +| `--target` | 编译的目标版本，可选参数有 `wxgame`：微信小游戏；`bricks`：玩一玩；`android`：安卓项目；`iOS`：iOS项目 + + 如果是在项目文件夹下执行命令，可以不加项目名称 + +### 举例: + + 发布【HelloWorld】到微信小游戏 + egret publish HelloWorld --version 0.03 --target wxgame + +## run +启动本地服务器,并在默认浏览器中运行指定项目 + +### 用法: + + egret run [project_name] [--port 3000] +### 参数说明: + +| 关键字 | 描述 +| ------------ | ------------ +| `project_name` | 项目名称，按照操作系统的命名规范命名 +| `--port` | 指定端口号 + + +如果是在项目文件夹下执行命令，可以不加项目名称 + +### 举例: + + 在指定端口下运行【HelloWorld】项目 + egret startserver HelloWorld --port 3002 + +## clean +重置项目中的引擎代码 + +### 用法: + + egret clean [project_name] +### 参数说明: + +| 关键字 | 描述 +| ------------ | ------------ +| `project_name` | 项目名称，按照操作系统的命名规范命名 + +如果是在项目文件夹下执行命令，可以不加项目名称 + +## upgrade +升级项目代码 + +### Egret Launcher v1.0 之后的 upgrade + +#### 用法: + + egret upgrade [project_name] --egretversion [target version] +#### 参数说明: + +| 关键字 | 描述 +| ------------ | ------------ +| `project_name` | 项目名称，按照操作系统的命名规范命名 +| `target version` | 要切换的目标版本号 + +如果是在项目文件夹下执行命令，可以不加项目名称 + +#### 举例: + + 升级当前目录下项目到 5.1.0 + egret upgrade --egretversion 5.1.0 + +### Egret Launcher v1.0之前的 upgrade + +#### 用法: + + egret upgrade [project_name] +#### 参数说明: + +| 关键字 | 描述 +| ------------ | ------------ +| `project_name` | 项目名称，按照操作系统的命名规范命名 + +如果是在项目文件夹下执行命令，可以不加项目名称 + +#### 举例: + + 升级【HelloWorld】项目 + egret upgrade HelloWorld + +### 关于 Egret Launcher v1.0 中项目降版本的说明 + + 1. 修改项目根目录下的配置文件 'egretProperties.json' 中的 'egret_version' 字段下的版本号 + 2. 执行 egret clean 后项目降到目标版本 + +## make +修改引擎源码后，编译引擎源码。如果没有特殊需求，不建议普通用户使用 + +### 用法: + egret make + + + +## info +获得Egret信息，如当前Egret版本，以及安装路径 + +### 用法: + + egret info + +## help +了解各个 command 的细节 + +### 用法 + egret help [command] diff --git a/Engine2D/projectConfig/compileOrder/56e7b0cb40856.png b/Engine2D/projectConfig/compileOrder/56e7b0cb40856.png new file mode 100644 index 0000000..8b0f883 Binary files /dev/null and b/Engine2D/projectConfig/compileOrder/56e7b0cb40856.png differ diff --git a/Engine2D/projectConfig/compileOrder/56e7b0cb4fc18.png b/Engine2D/projectConfig/compileOrder/56e7b0cb4fc18.png new file mode 100644 index 0000000..98bb1c2 Binary files /dev/null and b/Engine2D/projectConfig/compileOrder/56e7b0cb4fc18.png differ diff --git a/Engine2D/projectConfig/compileOrder/README.md b/Engine2D/projectConfig/compileOrder/README.md new file mode 100644 index 0000000..9485d50 --- /dev/null +++ b/Engine2D/projectConfig/compileOrder/README.md @@ -0,0 +1,68 @@ +在 Egret 中，需使用 TypeScript 编写程序，最终编译成浏览器可读的 JavaScript。 + +JavaScript 是一种脚本语言，浏览器按脚本的顺序来执行。实际上浏览器会根据 ` + + + +![](Img_6.png) + +---------- + +* 创建Egret3DCanvas + +---------- + + 1）什么是Egret3DCanvas： + a) Egret3DCanvas可以理解为渲染的画布，为我们绘制画面提供支持。 + b) Egret3DCanvas构造后，需要定义起始点位置，和画布大小来控制我们显示内容的位置。 + c) 它继承EventDispatcher，可以监听部分事件，如：Event3D.ENTER_FRAME，每帧响应回调事件。 + d) 一个Egret3DCanvas可以渲染多个View3D内容，至于View3D的内容以及与Egret3DCanvas关系将在下一节说明。 + e) 代码示例： + + class Main extends egret.DisplayObject { + + // Canvas操作对象 + protected _egret3DCanvas: egret3d.Egret3DCanvas; + + public constructor() { + super(); + console.log("Hello World,Hello Egret3D"); + //创建Canvas对象。 + this._egret3DCanvas = new egret3d.Egret3DCanvas(); + //Canvas的起始坐标，页面左上角为起始坐标(0,0)。 + this._egret3DCanvas.x = 0; + this._egret3DCanvas.y = 0; + //设置Canvas页面尺寸。 + this._egret3DCanvas.width = window.innerWidth; + this._egret3DCanvas.height = window.innerHeight; + //启动_egret3DCanvas + this._egret3DCanvas.start(); + + } + } + +![](Img_7.png) + +---------- + +* 创建View3D + +---------- + + 1）什么是View3D： + a) View3D是整个3D引擎的渲染视口，可以控制渲染窗口的大小，渲染的方式。 + b) View3D内可以控制相机Camera3D，场景元素Scene3D，当前的View3D中会有一个Scene3D的节点和一个Camera3D来进行场景中的渲染。 + c) View3D创建后，一般会保存在Egret3DCanvas中的View3D列表内，Egret3DCanvas会依次调用列表内View3D的主循环方法: + public update(time: number, delay: number)。 + d）Egret3DCanvas与View3D关系图： + +![](Img_18.png) + + e) 代码示例： + + class Main extends egret.DisplayObject { + + + // Canvas操作对象 + protected _egret3DCanvas: egret3d.Egret3DCanvas; + // View3D操作对象 + protected _view3D: egret3d.View3D; + + public constructor() { + super(); + //创建Canvas对象。 + this._egret3DCanvas = new egret3d.Egret3DCanvas(); + //Canvas的起始坐标，页面左上角为起始坐标(0,0)。 + this._egret3DCanvas.x = 0; + this._egret3DCanvas.y = 0; + //设置Canvas页面尺寸。 + this._egret3DCanvas.width = window.innerWidth; + this._egret3DCanvas.height = window.innerHeight; + + //创建View3D对象,页面左上角为起始坐标(0,0) + this._view3D = new egret3d.View3D(0, 0, window.innerWidth, window.innerHeight); + //当前对象对视位置,其参数依次为: + //@param pos 对象的位置 + //@param target 目标的位置 + this._view3D.camera3D.lookAt(new egret3d.Vector3D(0, 0, 1000), new egret3d.Vector3D(0, 0, 0)); + //View3D的背景色设置 + this._view3D.backColor = 0xffffff; + //将View3D添加进Canvas中 + this._egret3DCanvas.addView3D(this._view3D); + + + //启动_egret3DCanvas + this._egret3DCanvas.start(); + + + console.log("Hello World,Hello Egret3D"); + } + } + +---------- + +* 添加物体 + +---------- + + 1）Egret3D内定义了许多内置模型，比如CubeGeometry，CylinderGeometry，PlaneGeometry等常用模型数据，这里我们选取PlaneGeometry和CubeGeometry + 作为内容，添加至引擎内。 + a）示例代码： + + class Main extends egret.DisplayObject { + + + // Canvas操作对象 + protected _egret3DCanvas: egret3d.Egret3DCanvas; + // View3D操作对象 + protected _view3D: egret3d.View3D; + + public constructor() { + super(); + //创建Canvas对象。 + this._egret3DCanvas = new egret3d.Egret3DCanvas(); + //Canvas的起始坐标，页面左上角为起始坐标(0,0)。 + this._egret3DCanvas.x = 0; + this._egret3DCanvas.y = 0; + //设置Canvas页面尺寸。 + this._egret3DCanvas.width = window.innerWidth; + this._egret3DCanvas.height = window.innerHeight; + + //创建View3D对象,页面左上角为起始坐标(0,0) + this._view3D = new egret3d.View3D(0, 0, window.innerWidth, window.innerHeight); + //当前对象对视位置,其参数依次为: + //@param pos 对象的位置 + //@param target 目标的位置 + this._view3D.camera3D.lookAt(new egret3d.Vector3D(0, 1000, 1000), new egret3d.Vector3D(0, 0, 0)); + //View3D的背景色设置 + this._view3D.backColor = 0xffffff; + //将View3D添加进Canvas中 + this._egret3DCanvas.addView3D(this._view3D); + + + //启动_egret3DCanvas + this._egret3DCanvas.start(); + + + //创建立方体，放置于场景内(0,0,0)位置 + //创建一个红色的颜色材质球 + var mat_cube: egret3d.ColorMaterial = new egret3d.ColorMaterial(0xff0000); + //使用内置cube数据构造出一个默认参数cube + var geometery_Cube: egret3d.CubeGeometry = new egret3d.CubeGeometry(); + //通过材质球和geometery数据创建一个mesh对象 + var cube = new egret3d.Mesh(geometery_Cube, mat_cube); + //将mesh节点添加到View3D内 + this._view3D.addChild3D(cube); + + + ///创建面片，放置于场景内(0,0,0)位置 + ///创建一个绿色的颜色材质球 + var mat_Plane: egret3d.ColorMaterial = new egret3d.ColorMaterial(0x00ff00); + //使用内置Plane数据构造出一个默认参数Plane + var geometery_Plane: egret3d.PlaneGeometry = new egret3d.PlaneGeometry(); + //通过材质球和geometery数据创建一个mesh对象 + var plane = new egret3d.Mesh(geometery_Plane, mat_Plane); + //将mesh节点添加到View3D内 + this._view3D.addChild3D(plane); + + + console.log("Hello World,Hello Egret3D"); + } + } + +![](Img_9.png) + + 2）除了使用内置数据生成模型数据，我们还可以使用自己定义的数据来构建模型。 + a) 示例代码： + + class Main extends egret.DisplayObject { + + + // Canvas操作对象 + protected _egret3DCanvas: egret3d.Egret3DCanvas; + // View3D操作对象 + protected _view3D: egret3d.View3D; + + public constructor() { + super(); + //创建Canvas对象。 + this._egret3DCanvas = new egret3d.Egret3DCanvas(); + //Canvas的起始坐标，页面左上角为起始坐标(0,0)。 + this._egret3DCanvas.x = 0; + this._egret3DCanvas.y = 0; + //设置Canvas页面尺寸。 + this._egret3DCanvas.width = window.innerWidth; + this._egret3DCanvas.height = window.innerHeight; + + //创建View3D对象,页面左上角为起始坐标(0,0) + this._view3D = new egret3d.View3D(0, 0, window.innerWidth, window.innerHeight); + //当前对象对视位置,其参数依次为: + //@param pos 对象的位置 + //@param target 目标的位置 + this._view3D.camera3D.lookAt(new egret3d.Vector3D(0, 500, 500), new egret3d.Vector3D(0, 0, 0)); + //View3D的背景色设置 + this._view3D.backColor = 0xffffff; + //将View3D添加进Canvas中 + this._egret3DCanvas.addView3D(this._view3D); + + + //启动_egret3DCanvas + this._egret3DCanvas.start(); + + + //创建立方体，放置于场景内(0,0,0)位置 + //创建一个红色的颜色材质球 + var mat_cube: egret3d.ColorMaterial = new egret3d.ColorMaterial(0xff0000); + //使用内置cube数据构造出一个默认参数cube + var geometery_Cube: egret3d.CubeGeometry = new egret3d.CubeGeometry(); + //通过材质球和geometery数据创建一个mesh对象 + var cube = new egret3d.Mesh(geometery_Cube, mat_cube); + //将mesh节点添加到View3D内 + this._view3D.addChild3D(cube); + + + ///创建面片，放置于场景内(0,0,0)位置 + ///创建一个绿色的颜色材质球 + var mat_Plane: egret3d.ColorMaterial = new egret3d.ColorMaterial(0x00ff00); + //使用内置Plane数据构造出一个默认参数Plane + var geometery_Plane: egret3d.PlaneGeometry = new egret3d.PlaneGeometry(); + //通过材质球和geometery数据创建一个mesh对象 + var plane = new egret3d.Mesh(geometery_Plane, mat_Plane); + //将mesh节点添加到View3D内 + this._view3D.addChild3D(plane); + + //自定三角面 + this.createTriangle(); + + console.log("Hello World,Hello Egret3D"); + } + + //自定义数据构造一个三角面片 + protected createTriangle() { + var geom: egret3d.Geometry = egret3d.GeometryUtil.createGeometry(); + + var vb: number[] = []; + var ib: number[] = []; + + // 0 1 2 坐标 3 4 5 6 颜色 7 8 uv + vb.push(-50, -50, 0, 1, 0, 0, 1); + vb.push(0, 50, 0, 0, 1, 0, 1); + vb.push(50, -50, 0, 0, 0, 1, 1); + // 加入3个顶点 + + // 设置顶点索引 3个索引 1个3角形面 + ib.push(0, 1, 2); + + // 把数据填充进Geometry + geom.setVerticesForIndex(0, egret3d.VertexFormat.VF_POSITION | egret3d.VertexFormat.VF_COLOR, vb, 3); + geom.setVertexIndices(0, ib); + + // 使用Geometry 创建Mesh + var mesh: egret3d.Mesh = new egret3d.Mesh(geom, new egret3d.ColorMaterial(0xffffff)); + + // 设置双面渲染 + mesh.material.bothside = true; + + this._view3D.addChild3D(mesh); + + mesh.x = -200; + } + + + } + +![](Img_10.png) + + 2）除了颜色材质球的使用，引擎还提供贴图材质球的使用。 + a) 示例代码： + + class Main extends egret.DisplayObject { + + + // Canvas操作对象 + protected _egret3DCanvas: egret3d.Egret3DCanvas; + // View3D操作对象 + protected _view3D: egret3d.View3D; + + public constructor() { + super(); + //创建Canvas对象。 + this._egret3DCanvas = new egret3d.Egret3DCanvas(); + //Canvas的起始坐标，页面左上角为起始坐标(0,0)。 + this._egret3DCanvas.x = 0; + this._egret3DCanvas.y = 0; + //设置Canvas页面尺寸。 + this._egret3DCanvas.width = window.innerWidth; + this._egret3DCanvas.height = window.innerHeight; + + //创建View3D对象,页面左上角为起始坐标(0,0) + this._view3D = new egret3d.View3D(0, 0, window.innerWidth, window.innerHeight); + //当前对象对视位置,其参数依次为: + //@param pos 对象的位置 + //@param target 目标的位置 + this._view3D.camera3D.lookAt(new egret3d.Vector3D(0, 500, 500), new egret3d.Vector3D(0, 0, 0)); + //View3D的背景色设置 + this._view3D.backColor = 0xffffff; + //将View3D添加进Canvas中 + this._egret3DCanvas.addView3D(this._view3D); + + + //启动_egret3DCanvas + this._egret3DCanvas.start(); + + + //创建立方体，放置于场景内(0,0,0)位置 + //创建一个默认的贴图材质球 + var mat_cube: egret3d.TextureMaterial = new egret3d.TextureMaterial(); + //使用内置cube数据构造出一个默认参数cube + var geometery_Cube: egret3d.CubeGeometry = new egret3d.CubeGeometry(); + //通过材质球和geometery数据创建一个mesh对象 + var cube = new egret3d.Mesh(geometery_Cube, mat_cube); + //将mesh节点添加到View3D内 + this._view3D.addChild3D(cube); + + + ///创建面片，放置于场景内(0,0,0)位置 + ///创建一个默认的贴图材质球 + var mat_Plane: egret3d.TextureMaterial = new egret3d.TextureMaterial(); + //使用内置Plane数据构造出一个默认参数Plane + var geometery_Plane: egret3d.PlaneGeometry = new egret3d.PlaneGeometry(); + //通过材质球和geometery数据创建一个mesh对象 + var plane = new egret3d.Mesh(geometery_Plane, mat_Plane); + //将mesh节点添加到View3D内 + this._view3D.addChild3D(plane); + + + + console.log("Hello World,Hello Egret3D"); + } + + + } + +![](Img_11.png) + + 3）控制相机运动，这里我们书写一个简单相机移动控制器。 + a) 示例代码： + + class Main extends egret.DisplayObject { + + + // Canvas操作对象 + protected _egret3DCanvas: egret3d.Egret3DCanvas; + // View3D操作对象 + protected _view3D: egret3d.View3D; + // 当前的相机对象 + protected _camera: egret3d.Camera3D; + // 当前按键状态 + protected _key: number; + + public constructor() { + super(); + //创建Canvas对象。 + this._egret3DCanvas = new egret3d.Egret3DCanvas(); + //Canvas的起始坐标，页面左上角为起始坐标(0,0)。 + this._egret3DCanvas.x = 0; + this._egret3DCanvas.y = 0; + //设置Canvas页面尺寸。 + this._egret3DCanvas.width = window.innerWidth; + this._egret3DCanvas.height = window.innerHeight; + + //创建View3D对象,页面左上角为起始坐标(0,0) + this._view3D = new egret3d.View3D(0, 0, window.innerWidth, window.innerHeight); + //当前对象对视位置,其参数依次为: + //@param pos 对象的位置 + //@param target 目标的位置 + this._view3D.camera3D.lookAt(new egret3d.Vector3D(0, 500, 500), new egret3d.Vector3D(0, 0, 0)); + //View3D的背景色设置 + this._view3D.backColor = 0xffffff; + //将View3D添加进Canvas中 + this._egret3DCanvas.addView3D(this._view3D); + //初始化当前相机 + this._camera = this._view3D.camera3D; + + + //启动_egret3DCanvas + this._egret3DCanvas.start(); + + + //创建立方体，放置于场景内(0,0,0)位置 + //创建一个默认的贴图材质球 + var mat_cube: egret3d.TextureMaterial = new egret3d.TextureMaterial(); + //使用内置cube数据构造出一个默认参数cube + var geometery_Cube: egret3d.CubeGeometry = new egret3d.CubeGeometry(); + //通过材质球和geometery数据创建一个mesh对象 + var cube = new egret3d.Mesh(geometery_Cube, mat_cube); + //将mesh节点添加到View3D内 + this._view3D.addChild3D(cube); + + + ///创建面片，放置于场景内(0,0,0)位置 + ///创建一个默认的贴图材质球 + var mat_Plane: egret3d.TextureMaterial = new egret3d.TextureMaterial(); + //使用内置Plane数据构造出一个默认参数Plane + var geometery_Plane: egret3d.PlaneGeometry = new egret3d.PlaneGeometry(); + //通过材质球和geometery数据创建一个mesh对象 + var plane = new egret3d.Mesh(geometery_Plane, mat_Plane); + //将mesh节点添加到View3D内 + this._view3D.addChild3D(plane); + + ///设置默认值-1 + this._key = -1; + + ///注册事件，持有对象为_egret3DCanvas，每帧触发该注册方法，需要依次写入事件标识符，注册方法和注册对象。 + this._egret3DCanvas.addEventListener(egret3d.Event3D.ENTER_FRAME, this.OnUpdate, this); + ///注册鼠标按下事件 + egret3d.Input.addEventListener(egret3d.KeyEvent3D.KEY_DOWN, this.OnKeyDown, this); + ///注册鼠标回弹事件 + egret3d.Input.addEventListener(egret3d.KeyEvent3D.KEY_UP, this.OnKeyUp, this); + + + console.log("Hello World,Hello Egret3D"); + + } + //鼠标回弹事件 + public OnKeyUp(e: egret3d.KeyEvent3D) { + //重置按键信息 + this._key = -1; + } + //鼠标按下事件 + public OnKeyDown(e: egret3d.KeyEvent3D) { + //记录按键信息 + this._key = e.keyCode; + } + + ///注册后，该事件将每帧响应 + public OnUpdate(e: egret3d.Event3D) { + if (!this._camera || this._key == -1) { + return; + } + //qw控制上下 wasd控制前后左右 + switch (this._key) { + case egret3d.KeyCode.Key_Q: + this._camera.y += 1; + break; + case egret3d.KeyCode.Key_E: + this._camera.y += -1; + break; + case egret3d.KeyCode.Key_W: + this._camera.z += -1; + + break; + case egret3d.KeyCode.Key_S: + this._camera.z += 1; + break; + case egret3d.KeyCode.Key_A: + this._camera.x += 1; + break; + case egret3d.KeyCode.Key_D: + + this._camera.x += -1; + break; + } + + } + } + +![](Img_12.gif) + + 3）添加灯光。这里我们添加一个红色灯光来看下效果。 + a) 示例代码： + + class Main extends egret.DisplayObject { + + + // Canvas操作对象 + protected _egret3DCanvas: egret3d.Egret3DCanvas; + // View3D操作对象 + protected _view3D: egret3d.View3D; + // 当前的相机对象 + protected _camera: egret3d.Camera3D; + // 当前按键状态 + protected _key: number; + + public constructor() { + super(); + //创建Canvas对象。 + this._egret3DCanvas = new egret3d.Egret3DCanvas(); + //Canvas的起始坐标，页面左上角为起始坐标(0,0)。 + this._egret3DCanvas.x = 0; + this._egret3DCanvas.y = 0; + //设置Canvas页面尺寸。 + this._egret3DCanvas.width = window.innerWidth; + this._egret3DCanvas.height = window.innerHeight; + + //创建View3D对象,页面左上角为起始坐标(0,0) + this._view3D = new egret3d.View3D(0, 0, window.innerWidth, window.innerHeight); + //当前对象对视位置,其参数依次为: + //@param pos 对象的位置 + //@param target 目标的位置 + this._view3D.camera3D.lookAt(new egret3d.Vector3D(0, 500, 500), new egret3d.Vector3D(0, 0, 0)); + //View3D的背景色设置 + this._view3D.backColor = 0xffffff; + //将View3D添加进Canvas中 + this._egret3DCanvas.addView3D(this._view3D); + //初始化当前相机 + this._camera = this._view3D.camera3D; + + + //启动_egret3DCanvas + this._egret3DCanvas.start(); + + + //创建立方体，放置于场景内(0,0,0)位置 + //创建一个默认的贴图材质球 + var mat_cube: egret3d.TextureMaterial = new egret3d.TextureMaterial(); + //使用内置cube数据构造出一个默认参数cube + var geometery_Cube: egret3d.CubeGeometry = new egret3d.CubeGeometry(); + //通过材质球和geometery数据创建一个mesh对象 + var cube = new egret3d.Mesh(geometery_Cube, mat_cube); + //将mesh节点添加到View3D内 + this._view3D.addChild3D(cube); + + + ///创建面片，放置于场景内(0,0,0)位置 + ///创建一个默认的贴图材质球 + var mat_Plane: egret3d.TextureMaterial = new egret3d.TextureMaterial(); + //使用内置Plane数据构造出一个默认参数Plane + var geometery_Plane: egret3d.PlaneGeometry = new egret3d.PlaneGeometry(); + //通过材质球和geometery数据创建一个mesh对象 + var plane = new egret3d.Mesh(geometery_Plane, mat_Plane); + //将mesh节点添加到View3D内 + this._view3D.addChild3D(plane); + + ///设置默认值-1 + this._key = -1; + + ///注册事件，持有对象为_egret3DCanvas，每帧触发该注册方法，需要依次写入事件标识符，注册方法和注册对象。 + this._egret3DCanvas.addEventListener(egret3d.Event3D.ENTER_FRAME, this.OnUpdate, this); + ///注册鼠标按下事件 + egret3d.Input.addEventListener(egret3d.KeyEvent3D.KEY_DOWN, this.OnKeyDown, this); + ///注册鼠标回弹事件 + egret3d.Input.addEventListener(egret3d.KeyEvent3D.KEY_UP, this.OnKeyUp, this); + + + + + ///创建一个灯光组，该灯光组将管理场景内的灯光资源 + var lights: egret3d.LightGroup = new egret3d.LightGroup(); + ///创建一个方向光对象，其中参数(-0.5, -0.6, 0.2)为方向向量，为灯光方向，默认方向为0, 0, 1)。 + var dirLight: egret3d.DirectLight = new egret3d.DirectLight(new egret3d.Vector3D(-0.5, -0.6, 0.2)); + ///灯光漫反射颜色是红色，默认为白色 + dirLight.diffuse = 0xff0000; + ///写入组 + lights.addLight(dirLight); + ///设置灯效组。 + cube.material.lightGroup = lights; + plane.material.lightGroup = lights; + + console.log("Hello World,Hello Egret3D"); + + } + //鼠标回弹事件 + public OnKeyUp(e: egret3d.KeyEvent3D) { + //重置按键信息 + this._key = -1; + } + //鼠标按下事件 + public OnKeyDown(e: egret3d.KeyEvent3D) { + //记录按键信息 + this._key = e.keyCode; + } + + ///注册后，该事件将每帧响应 + public OnUpdate(e: egret3d.Event3D) { + if (!this._camera || this._key == -1) { + return; + } + //qw控制上下 wasd控制前后左右 + switch (this._key) { + case egret3d.KeyCode.Key_Q: + this._camera.y += 1; + break; + case egret3d.KeyCode.Key_E: + this._camera.y += -1; + break; + case egret3d.KeyCode.Key_W: + this._camera.z += -1; + + break; + case egret3d.KeyCode.Key_S: + this._camera.z += 1; + break; + case egret3d.KeyCode.Key_A: + this._camera.x += 1; + break; + case egret3d.KeyCode.Key_D: + + this._camera.x += -1; + break; + } + + } + } + +![](Img_13.png) \ No newline at end of file diff --git a/Engine3D/gui/gui/README.md b/Engine3D/gui/gui/README.md new file mode 100644 index 0000000..b7a61dc --- /dev/null +++ b/Engine3D/gui/gui/README.md @@ -0,0 +1,467 @@ +# Egret3d Gui 教程 # + +本教程主要介绍了如何在egret3d引擎中开始并使用gui功能, 以及gui组件的基本用法. + +首先进行3d引擎的初始化 + +> this.initEngine(); + + + export class GuiTest{ + private _canvas: Egret3DCanvas; + private _view:View3D; + private _ctl:HoverController; + + constructor() { + //引擎初始化 + this.initEngine(); + + let queueLoad: QueueLoader = new QueueLoader(); + //加载默认皮肤 + queueLoad.loadDefaultGUISkin(); + + queueLoad.addEventListener(LoaderEvent3D.LOADER_COMPLETE, + this.initedGui, + this); + } + + private initEngine() { + this._canvas = new Egret3DCanvas(); + this._canvas.x = 0; + this._canvas.y = 0; + this._canvas.width = window.innerWidth; + this._canvas.height = window.innerHeight; + this._canvas.start(); + + this._view = new View3D(0, 0, window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio); + this._view.camera3D.lookAt(new Vector3D(0, 100, -100), new Vector3D(0, 0, 0)); + this._view.backColor = 0xffcccccc; + this._canvas.addView3D(this._view); + + this._ctl = new HoverController(this._view.camera3D); + this._ctl.tiltAngle = 60; + this._ctl.distance = 1000; + + Egret3DEngine.instance.debug = false; + this._canvas.start(); + this._canvas.addEventListener(Event3D.ENTER_FRAME, this.update, this); + } + + private update(e: Event3D) { + this._ctl.update(); + } + + private initedGui(){ + var textField: gui.UITextField = new gui.UITextField(); + textField.textColor = 0x000000; + textField.text = "Hello World"; + + this._view.addGUI(textField); + } + + + } + + + + +引擎初始化完成后.通过 *QueueLoader类* 创建一个加载队列，调用 loadDefaultGUISkin() 方法加载默认皮肤，来开启gui功能。 + + + + + + let queueLoad: QueueLoader = new QueueLoader(); + //加载默认皮肤 + queueLoad.loadDefaultGUISkin(); + + queueLoad.addEventListener(LoaderEvent3D.LOADER_COMPLETE, + this.initedGui, + this); + +---------- + +# UITextField 控件 # +UITextField 控件用来显示文本信息 +> public UITextField(textFieldType: UITextFieldType = UITextFieldType.DYNAMIC) + +- textFieldType 文本类型 + - UITextFieldType.DYNAMIC 用户无法编辑的动态文本字段 + - UITextFieldType.INPUT 用户可以编辑的输入文本字段 +# 示例 # + +在屏幕上显示"Hello World" 文字 + + + private initedGui() { + var textField: gui.UITextField = new gui.UITextField(); + textField.textColor = 0x000000; + textField.text = "Hello World"; + + this._view.addGUI(textField); + + } + +运行结果如图所示 + +![](uitextfield.png) +---------- + +# LabelButton 控件 # +> public UILabelButton() + +# 示例 # +绘制一个LabelButton按钮 + + + private initedGui() { + let labelBtn: gui.UILabelButton = new gui.UILabelButton(); + labelBtn.label = "按钮"; + labelBtn.x = 10; + labelBtn.y = 10; + labelBtn.width = 100; + labelBtn.height = 40; + this._view.addGUI(labelBtn); + + } + +运行结果如图所示: + +![](labelButton.png) + + +---------- + +# UIButton 控件 # +> public UIButton() + +# 示例 # + +绘制一个按钮并响应单击事件 + + + private initedGui() { + + var btn: gui.UIButton = new gui.UIButton(); + btn.name = "UIButton"; + btn.width = 30; + btn.height = 20 + btn.x = 200; + btn.y = 50; + + + btn.addEventListener(MouseEvent3D.MOUSE_UP , (e) => { + alert(btn.name); + }, this); + + this._view.addGUI(btn); + + } + +运行结果如图所示 + +![](uiButton.png) + + +---------- +# UICheckBox 控件 # +> public UICheckBox() + + +TextureResourceManager类 是gui贴图资源 管理器 + +> export class TextureResourceManager extends egret3d.EventDispatcher + +可以通过 getTexture()方法 来获取贴图资源 + +> public getTexture(name: string): Texture + + +# 示例 # + +绘制一个CheckBox 控件 点击 选中/取消 + + public initedGui() { + //获取 checkBox 控件 checkUpState 的 贴图 + var checkUpState: Texture = textureResMgr.getTexture("default.png"); + //获取 checkBox 控件 checkDownState 的 贴图 + var checkDownState: Texture = textureResMgr.getTexture("checked.png"); + + var checkBox: gui.UICheckBox = new gui.UICheckBox(); + checkBox.width = checkUpState.width; + checkBox.height = checkUpState.height; + checkBox.label = "点击选中"; + checkBox.y = 100; + this._view.addGUI(checkBox); + + + checkBox.addEventListener(MouseEvent3D.MOUSE_CLICK, + (e) => { + checkBox.label = checkBox.selected ? "点击取消" : "点击选中"; + }, + this); + + + } + + +运行结果如图所示 + +![](uiCheckBox.png) + +---------- +# UIRadioButton 控件 # +> public UIRadioButton() + +# 示例 # + + public initedGui(){ + //获取 UIRadioButton 控件 radioUpState 的 贴图 + var radioUpState: Texture = textureResMgr.getTexture("unselected.png"); + //获取 UIRadioButton 控件 radioDownState 的 贴图 + var radioDownState: Texture = textureResMgr.getTexture("selected.png"); + + //创建一个 UIRadioButtonGroup 组 把 UIRadioButton 添加到组中 + var radioButtonGroup: gui.UIRadioButtonGroup = new gui.UIRadioButtonGroup(); + + radioButtonGroup.addEventListener(Event3D.CHANGE, (e)=>this.onchange(e), this); + for (var i: number = 0; i < 3; i++) { + var radioBtn: gui.UIRadioButton = new gui.UIRadioButton(); + radioBtn.width = radioUpState.width; + radioBtn.height = radioUpState.height; + + radioBtn.label = "btn " + i; + radioBtn.y = 150; + radioBtn.x = i * (radioBtn.buttonAndLabelWidth + 5); + this._view.addGUI(radioBtn); + + radioButtonGroup.addItem(radioBtn); + } + + //设置默认选中项 + radioButtonGroup.selectedIndex = 1; + + //当 UIRadioButtonGroup 索引改变时 + private onchange(e: Event3D) { + var radioButtonGroupe: gui.UIRadioButtonGroup = e.target; + //当前选中项的索引 + console.log(radioButtonGroupe.selectedIndex); + } + } + + +运行结果如图所示 + +![](uiRadioButton.png) + +---------- + + +# UIList 控件 # +> public UIList() + + +# 示例 # + + public initedGui(){ + var list: gui.UIList = new gui.UIList(); + list.width = 460; + list.height = 200; + list.y = 0; + var texAry = ["14.png", "20.png", "38.png", "56.png", "91.png", "99+.png"]; + for (var i: number = 0; i < texAry.length; i++) { + var tempQuad: Quad = new Quad(); + tempQuad.width = 460; + tempQuad.height = 41; + tempQuad.texture = textureResMgr.getTexture(texAry[i]); + list.addItem(tempQuad); + } + this._view.addGUI(list); + } + +运行结果如图所示 + +![](uiList.png) + +---------- +# UISlider 控件 # +> public UISlider() + +移动滑块时值增加或减小的量 +> slider.snapInterval = 1 + +UISlider 组件允许的最大值 +> slider.maximum = 1000 + +UISlider 组件允许的最小值 +> slider.minimum = 100 + +UISlider 组件显示的当前值 +> slider.value = 500 + +# 示例 # + public initedGui(){ + var slider: gui.UISlider = new gui.UISlider(); + slider.width = 100; + slider.height = 20; + slider.x = 10; + slider.y = 10; + + slider.snapInterval = 10; + slider.maximum = 1000; + slider.minimum = 100; + slider.value = 500; + + slider.addEventListener(Event3D.CHANGE, + (e) => { + console.log(slider.value); + }, + this); + this._view.addGUI(slider); + } + + + +运行结果如图所示 + +![](uiSlider.png) + + + +---------- + +# UIProgressBar 控件 # +> public UIProgressBar() + +设置进度条比例 取值范围为0-1,即进度条由空到填满 +> progressBar.ratio += 0.001; + + +设置进度条样式 +> public setStyle(style: string, value: any) + + + progressBar.setStyle("bar",value); + progressBar.setStyle("background",value); + + + + # 示例 # + + public initedGui(){ + var progressBar: gui.UIProgressBar = new gui.UIProgressBar(); + progressBar.height = 29; + progressBar.width = 500; + this._view.addGUI(progressBar); + setInterval(() => { + if (progressBar.ratio === 1) { + progressBar.ratio = 0; + } + progressBar.ratio += 0.001; + }, + 16); + progressBar.y = 20; + + this._view.addGUI(progressBar); + } + + + +运行结果如图所示 + +![](uiProgressBar.gif) + +---------- + + + +# UIPanel 控件 # +> public UIPanel() +一个可以设置背景的容器组件 + + +修改背景颜色 +> uiPanel.background.color = 0x000000; + +替换背景贴图 +> uiPanel.setStyle("background", textureResMgr.getTexture(name); + + + public initedGui(){ + var uiPanel: gui.UIPanel = new gui.UIPanel(); + + var txt: gui.UITextField = new gui.UITextField(); + txt.text = "This is a Panel"; + + uiPanel.addChild(txt); + + this._view.addGUI(uiPanel); + } + + + +---------- + +# 自定义 Gui控件的样式 # + +可以通过加载由TexturePacker生成的资源, 来显示贴图,其中TexturePacker导出设置如下: + +![](TexturePacker.png) + + +通过*UnitLoader*或者*QueueLoader*( 当你需要加载多个资源的时候, 单个资源也可以使用 )来加载TexturePacker导出的资源. +加载完成后贴图将可以通过 *textureResMgr.getTexture()* 来获取, 其中的参数便是TexturePacker导出的json里的图片名. + +下面的代码片段演示了如何加载TexturePacker生成的贴图资源. 并在加载完成后显示一张加载资源里的gui图片: + +``` + constructor() { + this.initEngine(); + //开启gui功能 + this._view.openGui(this.initedGui, this); + + } + + private initedGui() { + let queueLoader: QueueLoader = new QueueLoader("resource/ui/gameAsset.json"); + queueLoader.addEventListener(LoaderEvent3D.LOADER_COMPLETE, + (e) => { + let quad: Quad = new Quad(); + quad.texture = textureResMgr.getTexture("50t.png"); + quad.width = 50; + quad.height = 50; + quad.x = 10; + quad.y = 10; + this._view.addGUI(quad); + }, + this); + } +``` + + +成功运行后, 结果如下: + +![](quad.png) + + +设置默认皮肤对应的贴图 +> public setDefaultSkin(skinName: string, texture: any) +> *skinName* 皮肤名称 +> *texture* 贴图资源 + + + + +# 示例 # + +通过 *gui.SkinManager* 皮肤管理类 设置 组件的默认皮肤 + + + + + //设置Button按钮 的弹起状态 + gui.SkinManager.instance.setDefaultSkin(gui.DefaultSkinName.DEFAULT_BUTTON_UP, upState); + //设置Button按钮 的按下状态 + gui.SkinManager.instance.setDefaultSkin(gui.DefaultSkinName.DEFAULT_BUTTON_DOWN, downState); + //设置Button按钮 的不可点击状态 + gui.SkinManager.instance.setDefaultSkin(gui.DefaultSkinName.DEFAULT_BUTTON_DISABLE, disabletate); diff --git a/Engine3D/gui/gui/TexturePacker.png b/Engine3D/gui/gui/TexturePacker.png new file mode 100644 index 0000000..a0f01ad Binary files /dev/null and b/Engine3D/gui/gui/TexturePacker.png differ diff --git a/Engine3D/gui/gui/labelButton.png b/Engine3D/gui/gui/labelButton.png new file mode 100644 index 0000000..29da425 Binary files /dev/null and b/Engine3D/gui/gui/labelButton.png differ diff --git a/Engine3D/gui/gui/quad.png b/Engine3D/gui/gui/quad.png new file mode 100644 index 0000000..64f2fba Binary files /dev/null and b/Engine3D/gui/gui/quad.png differ diff --git a/Engine3D/gui/gui/uiButton.png b/Engine3D/gui/gui/uiButton.png new file mode 100644 index 0000000..3805ac2 Binary files /dev/null and b/Engine3D/gui/gui/uiButton.png differ diff --git a/Engine3D/gui/gui/uiCheckBox.png b/Engine3D/gui/gui/uiCheckBox.png new file mode 100644 index 0000000..b1a2c37 Binary files /dev/null and b/Engine3D/gui/gui/uiCheckBox.png differ diff --git a/Engine3D/gui/gui/uiList.png b/Engine3D/gui/gui/uiList.png new file mode 100644 index 0000000..dd12b49 Binary files /dev/null and b/Engine3D/gui/gui/uiList.png differ diff --git a/Engine3D/gui/gui/uiProgressBar.gif b/Engine3D/gui/gui/uiProgressBar.gif new file mode 100644 index 0000000..75f519d Binary files /dev/null and b/Engine3D/gui/gui/uiProgressBar.gif differ diff --git a/Engine3D/gui/gui/uiRadioButton.png b/Engine3D/gui/gui/uiRadioButton.png new file mode 100644 index 0000000..cf92407 Binary files /dev/null and b/Engine3D/gui/gui/uiRadioButton.png differ diff --git a/Engine3D/gui/gui/uiSlider.png b/Engine3D/gui/gui/uiSlider.png new file mode 100644 index 0000000..ea2e73a Binary files /dev/null and b/Engine3D/gui/gui/uiSlider.png differ diff --git a/Engine3D/gui/gui/uitextfield.png b/Engine3D/gui/gui/uitextfield.png new file mode 100644 index 0000000..af4e3a9 Binary files /dev/null and b/Engine3D/gui/gui/uitextfield.png differ diff --git a/Engine3D/guide/guide/575ccafb22982.png b/Engine3D/guide/guide/575ccafb22982.png new file mode 100644 index 0000000..88f0075 Binary files /dev/null and b/Engine3D/guide/guide/575ccafb22982.png differ diff --git a/Engine3D/guide/guide/575ccafb2fe0f.png b/Engine3D/guide/guide/575ccafb2fe0f.png new file mode 100644 index 0000000..2df27cb Binary files /dev/null and b/Engine3D/guide/guide/575ccafb2fe0f.png differ diff --git a/Engine3D/guide/guide/575ccafb3fcb2.jpg b/Engine3D/guide/guide/575ccafb3fcb2.jpg new file mode 100644 index 0000000..73eb44d Binary files /dev/null and b/Engine3D/guide/guide/575ccafb3fcb2.jpg differ diff --git a/Engine3D/guide/guide/README.md b/Engine3D/guide/guide/README.md new file mode 100644 index 0000000..464eff2 --- /dev/null +++ b/Engine3D/guide/guide/README.md @@ -0,0 +1,82 @@ +> Egret3D 有几个基本的元素，基本上会围绕这些元素节点做引擎结构 + +## Egret3DCanvas + +- Egret3DCanvas 是整个3D显示的缓冲屏幕大小。并且包含了和Egret2D混合的接口。 +- 在egret2D和egret3D混合的时候egret2D（非 webgl加速版本）永远在最上一层。 + +## View3D + +View3D 是egret3D的独立视口对象，可以创建多个View3D视口添加到Egret3DCanvas上，进行独立渲染，可以理解为分窗口渲染。 + +## Camera3D + +Camera3D 相机是一个在3D场景中能自由移动变换的物体，但并不具备显示能力， +只有一个锥形体（透视相机） 或者 长方体（正交相机）视锥体数据。用来进行场景渲染定位，和剔除视锥体外物体，生成显示列表。 +摄像机可以理解为就是一个观察矩阵，观察矩阵把所有的世界坐标变换到观察坐标，这些新坐标是相对于摄像机的位置和方向的。 +定义一个摄像机，我们需要赋予它一个三维空间坐标，观察朝向，透视度，广角度，远近裁剪截面。 + +![](575ccafb22982.png) + +1.相机位置 + +摄像机位置就是世界空间中代表摄像机位置的向量。 + +2.摄像机方向 + +摄像机的方向就是世界空间中代表摄像机转向的矢量。 + +3.Look At + +在egret3D中提供了相机直接观察一个坐标的快捷设置接口，例如我需要观察坐标 vector3D（0.0，100.0，1000.0），直接调用lookAt接口就好，不必再通过繁琐的计算定位相机的旋转方向。 + +## Scene3D + +Scene3D 作为整个场景显示的管理类，管理场景具备显示，和不具备显示能力的Object3D。scene3D可以设置不同的空间划分树，进行场景节点管理搜索，过滤。 + +## Geometry + +Geometry是整个3D中使用的模型数据，它可以从3Dmax，blender，3Dmaya，等众多软件中输出，在egret3D有了自定义的模型数据格式，geometry中的数据内容主要有： + +- vertex position +- vertex normal +- vertex tangent +- vertex color +- vertex uv +- vertex scond uv + +在有了这些数据后，就可以创建vertexBuffer。还会需要进行三角面的组合 face，就会需要indexData，创建为 indexbuffer。 + +![](575ccafb2fe0f.png) + +## Material + +材质球通过不同的shader，也就是 GLSL 着色语言编写获得不同的着色效果。 +在egret3D中提过了一些常用的材质球，及材质球特性，可以通过对每个材质球添加 effectMethod 来获得新的效果片段， +当然也不是无止境的添加的，每个材质球中的着色程序也是有限制的，例如编译后的着色器最终生成的汇编指令不能超过运行设备的物理限制。 +而要获得更高的效果，必定需要更好的硬件支持才行 + +![](575ccafb3fcb2.jpg) + +## Object3D + +Object3D是3D场景中的一个容器，也可以是一个节点，它包含了一个节点在场景中的所有变换信息，子节点的最终变换信息要跟根据父节点的信息进行相对变换 + +## Mesh + +Mesh是模型网格，是3D场景中的可渲染对象，网格中包含Geometry、材质玩信息和包围盒。Mesh也分为两种：一种是静态模型不带动作的，另一种是骨骼动画模型，包含动画数据信息。 + +## Texture + +Texture是将平面的、二维的相片贴到物体的几何表面上的2D纹理贴图，根据顶点的uv来进行映射贴图。 + +## CubeTexture + +CubeTexture是一个6面体贴图，它通过（x,y,z)形式的三维像素矩阵，每一个(x,y,z)对应一个标量值；CubeTexture就是要把这个三维的像素阵列映射到三维的物体空间中去。 + +## light + +light是指给定方向所反射或发射的发光强度的灯光，然后影响3D场景中的可渲染对象的渲染效果。增强3D场景更加真实性的效果。 +引擎中分为3种灯光：点光源、方向光、聚光灯。 + + diff --git a/Engine3D/guide/introduction/575ccacf5b4ee.jpg b/Engine3D/guide/introduction/575ccacf5b4ee.jpg new file mode 100644 index 0000000..5639c19 Binary files /dev/null and b/Engine3D/guide/introduction/575ccacf5b4ee.jpg differ diff --git a/Engine3D/guide/introduction/575ccacf9e87e.png b/Engine3D/guide/introduction/575ccacf9e87e.png new file mode 100644 index 0000000..7a554a6 Binary files /dev/null and b/Engine3D/guide/introduction/575ccacf9e87e.png differ diff --git a/Engine3D/guide/introduction/README.md b/Engine3D/guide/introduction/README.md new file mode 100644 index 0000000..496e145 --- /dev/null +++ b/Engine3D/guide/introduction/README.md @@ -0,0 +1,156 @@ + +> 以下教程部分摘自 learnopengl + +中英文词汇对照 + +- Aliasing 锯齿 +- Alpha 透明度 +- Ambient Light 环境光 +- Antialiasing 抗锯齿 +- Aspect Ratio 纵横比 +- Bezier curve 贝塞尔曲线 +- Bitplane 位平面 +- Buffer 缓冲区 +- Cartesian 笛卡尔 +- Clip coordinates 裁剪坐标 +- Clipping 裁剪 +- Convex 凸 +- Culling 剔除 +- Destination color 目标颜色 +- Dithering 抖动 +- Double buffered 双缓冲 +- Extruded 拉伸 +- Eye coordinates 视觉坐标 +- Frustum 平头截体 +- Immediate mode 立即模式 +- Implementation 实现 +- Khronos OpenGL维护小组 +- Literal 字面值 +- Matrix 矩阵 +- Mipmapping Mip贴图 +- Modelview Matrix 模型视图矩阵 +- Normal 法线 +- Normalize 规范化 +- Orthographic 正交 +- Prespective 透视 +- Piexl 像素 +- Pixmap 像素图 +- Polygon 多边形 +- Primitive 图元 +- Projection 投影 +- Quadrilateral 四边形 +- Resterize 光栅化 +- Retained mode 保留模式 +- Render 渲染 +- Scintillation 闪烁 +- Shader 着色器 +- Source Color 源颜色 +- Specification 说明 +- Spline 样条 +- Stipple 点画 +- Tessellation 镶嵌 +- Texel 纹理像素 +- Texture 纹理 +- Transformation 变换 +- Translucence 半透明 +- Vector 向量 +- Vertex 顶点 +- Viewing Volume 可视区域 +- Viewport 视口 +- Wireframe 线框 +- pipeline 渲染管线 + +## 3D数学知识 + +在学习任何一个3D引擎之前，先保证自己有最基本的3D知识，不然真会处处碰壁。 + +首先需要理解3D的概念，如何从3维数据转变成模型。 + +### 3D坐标系 + +egret3D使用左手坐标系定义，Y轴向上 + +![](575ccacf5b4ee.jpg) + +实际上一个3维物体也会存在相对坐标系问题 + +- 局部空间(Local Space，或者称为物体空间(Object Space)) +- 世界空间(World Space) +- 观察空间(View Space，或者称为视觉空间(Eye Space)) +- 裁剪空间(Clip Space) +- 屏幕空间(Screen Space) + +为了将坐标从一个坐标系转换到另一个坐标系，我们需要用到几个转换矩阵，最重要的几个分别是模型(Model)、视图(View)、投影(Projection)三个矩阵。首先，顶点坐标开始于局部空间(Local Space)，称为局部坐标(Local Coordinate)，然后经过世界坐标(World Coordinate)，观察坐标(View Coordinate)，裁剪坐标(Clip Coordinate)，并最后以屏幕坐标(Screen Coordinate)结束。 + +![](575ccacf9e87e.png) + +局部坐标是对象相对于局部原点的坐标 +也是对象开始的坐标。 + +将局部坐标转换为世界坐标，世界坐标是作为一个更大空间范围的坐标系统。这些坐标是相对于世界的原点的。 + +接下来我们将世界坐标转换为观察坐标，观察坐标是指以摄像机或观察者的角度观察的坐标。 + +在将坐标处理到观察空间之后，我们需要将其投影到裁剪坐标。裁剪坐标是处理-1.0到1.0范围内并判断哪些顶点将会出现在屏幕上。 + +最后，我们需要将裁剪坐标转换为屏幕坐标，我们将这一过程成为视口变换(Viewport Transform)。视口变换将位于-1.0到1.0范围的坐标转换到由glViewport函数所定义的坐标范围内。最后转换的坐标将会送到光栅器，由光栅器将其转化为片段。 + +你可能了解了每个单独的坐标空间的作用。我们之所以将顶点转换到各个不同的空间的原因是有些操作在特定的坐标系统中才有意义且更方便。例如，当修改对象时，如果在局部空间中则是有意义的；当对对象做相对于其它对象的位置的操作时，在世界坐标系中则是有意义的；等等这些。如果我们愿意，本可以定义一个直接从局部空间到裁剪空间的转换矩阵，但那样会失去灵活性。接下来我们将要更仔细地讨论各个坐标系。 + +#### 局部空间(Local Space) + +局部空间是指对象所在的坐标空间，例如，对象最开始所在的地方。想象你在一个模型建造软件(比如说Blender)中创建了一个立方体。你创建的立方体的原点有可能位于(0，0，0)，即使有可能在最后的应用中位于完全不同的另外一个位置。甚至有可能你创建的所有模型都以(0，0，0)为初始位置，然而他们会在世界的不同位置。则你的模型的所有顶点都是在局部空间：他们相对于你的对象来说都是局部的。 + +我们一直使用的那个箱子的坐标范围为-0.5到0.5，设定(0, 0)为它的原点。这些都是局部坐标。 + +#### 世界空间(World Space) + +如果我们想将我们所有的对象导入到程序当中，它们有可能会全挤在世界的原点上(0，0，0)，然而这并不是我们想要的结果。我们想为每一个对象定义一个位置，从而使对象位于更大的世界当中。世界空间中的坐标就如它们听起来那样：是指顶点相对于(游戏)世界的坐标。物体变换到的最终空间就是世界坐标系，并且你会想让这些物体分散开来摆放(从而显得更真实)。对象的坐标将会从局部坐标转换到世界坐标；该转换是由模型矩阵(Model Matrix)实现的。 + +模型矩阵是一种转换矩阵，它能通过对对象进行平移、缩放、旋转来将它置于它本应该在的位置或方向。你可以想象一下，我们需要转换一栋房子，通过将它缩小(因为它在局部坐标系中显得太大了)，将它往郊区的方向平移，然后沿着y轴往坐标旋转。经过这样的变换之后，它将恰好能够与邻居的房子重合。你能够想到上一节讲到的利用模型矩阵将各个箱子放置到这个屏幕上；我们能够将箱子中的局部坐标转换为观察坐标或世界坐标。 + +#### 观察空间(View Space) + +观察空间经常被人们称之OpenGL的摄像机(Camera)(所以有时也称为摄像机空间(Camera Space)或视觉空间(Eye Space))。观察空间就是将对象的世界空间的坐标转换为观察者视野前面的坐标。因此观察空间就是从摄像机的角度观察到的空间。而这通常是由一系列的平移和旋转的组合来平移和旋转场景从而使得特定的对象被转换到摄像机前面。这些组合在一起的转换通常存储在一个观察矩阵(View Matrix)里，用来将世界坐标转换到观察空间。在下一个教程我们将广泛讨论如何创建一个这样的观察矩阵来模拟一个摄像机。 + +#### 裁剪空间(Clip Space) + +在一个顶点着色器运行的最后，OpenGL期望所有的坐标都能落在一个给定的范围内，且任何在这个范围之外的点都应该被裁剪掉(Clipped)。被裁剪掉的坐标就被忽略了，所以剩下的坐标就将变为屏幕上可见的片段。这也就是裁剪空间名字的由来。 + +因为将所有可见的坐标都放置在-1.0到1.0的范围内不是很直观，所以我们会指定自己的坐标集(Coordinate Set)并将它转换回标准化设备坐标系，就像OpenGL期望它做的那样。 + +为了将顶点坐标从观察空间转换到裁剪空间，我们需要定义一个投影矩阵(Projection Matrix)，它指定了坐标的范围，例如，每个维度都是从-1000到1000。投影矩阵接着会将在它指定的范围内的坐标转换到标准化设备坐标系中(-1.0，1.0)。所有在范围外的坐标在-1.0到1.0之间都不会被绘制出来并且会被裁剪。在投影矩阵所指定的范围内，坐标(1250，500，750)将是不可见的，这是由于它的x坐标超出了范围，随后被转化为在标准化设备坐标中坐标值大于1.0的值并且被裁剪掉。 + +### Vector3D + +vector3D 为一个3D数据，里面可以存储四个值 x，y，z，w 。 + +### uv + +u,v两个定义的值，作为map映射 + +## 什么是模型 + +### 模型结构 + +3D模型是由无数个三角面组成，而构成三角面又由3个三维顶点按照顺序索引组合。 +每个顶点都会有相对应的UV值来映射纹理坐标。每个顶点也可以配对想应的顶点色rgba，提供模型顶点显色问题 。 + +#### 顶点坐标 +由 x,y,z 三个值确定一个顶点坐标 + +#### uv坐标 +由 u,v 两个 0.0~1.0 的值确定一个uv坐标，如果超过这个范围，需要在贴图采样设置能越界采样，在egret3D 的材质中需要设置 material.repeat = true 来开启越界采样，就是美术口中的四方连续图，多用于地表花纹重复纹理中使用 + +#### 法线 +由x,y,z组成的向量，既有方向，又有大小，在模型计算光照时，必须用于计算。 + +#### 切线 +当模型旋转时，就会需要切线来保存动态的法线空间坐标，让模型如何旋转，透视度变化，依然能让模型法线在正确的空间坐标，一般叫做TBN计算 + +#### 顶点色 +rgba四个unit类型的值，每个值都在0.0~255.0之间，顶点色都用于美术增强显示效果，性能使用。 + +#### 第二uv +第二UV中的UV坐标和第一UV坐标一样，一般当第一UV映射不满足后期需求的时候，就会需要第二UV的数据补足第一UV. +第二UV需要3D美术按需求去制作，也有可能是编辑器自动生成。 diff --git a/Engine3D/interactive/base/README.md b/Engine3D/interactive/base/README.md new file mode 100644 index 0000000..ebf11c4 --- /dev/null +++ b/Engine3D/interactive/base/README.md @@ -0,0 +1,14 @@ + +## 概念与原理 + +碰撞指2个物体有相交、包含等关系。比如点与物体即包含关系，线与面即相交关系。 + +在 3d 中，有下面几种碰撞类型： + +* 点碰撞 egret3d.Vector3D，检测点是否在一个模型内。 + +* 射线碰撞 egret3d.Ray，检测射线是否与一个模型相交。 + +* 模型碰撞 egret3d.Bound，检测模式与模型是否相交。 + + diff --git a/Engine3D/interactive/modelModel/575cd7d233cc3.png b/Engine3D/interactive/modelModel/575cd7d233cc3.png new file mode 100644 index 0000000..9dd6df9 Binary files /dev/null and b/Engine3D/interactive/modelModel/575cd7d233cc3.png differ diff --git a/Engine3D/interactive/modelModel/575cd7d24143c.png b/Engine3D/interactive/modelModel/575cd7d24143c.png new file mode 100644 index 0000000..2d3af57 Binary files /dev/null and b/Engine3D/interactive/modelModel/575cd7d24143c.png differ diff --git a/Engine3D/interactive/modelModel/README.md b/Engine3D/interactive/modelModel/README.md new file mode 100644 index 0000000..ae814e0 --- /dev/null +++ b/Engine3D/interactive/modelModel/README.md @@ -0,0 +1,42 @@ + +## 模型与模型碰撞 + + +### 原理：模型与模型碰撞其实就是检测各个面是否有相交。 + +这里为了更好的理解，我们将点想象成一个稍微大些的球。 + +* 未碰撞： + + ![image](575cd7d233cc3.png) + +* 碰撞： + + ![image](575cd7d24143c.png) + +### api： + +~~~ +intersect ( target :egret3d.Bound, intersect :egret3d.Bound ):boolean +~~~ + +~~~ +target:egret3d.Bound — 检测的目标 +intersect:egret3d.Bound — 默认参数为null 相交的结果 可以为null +~~~ + +### 示例： + +``` +var result:boolean = cube.bound.intersect(ball.bound); + +``` + +``` +* cube：一个方形模型 +* intersect：检测方法 +* ball：球形模型 +* result： 是否碰撞，true 碰撞，false 未碰撞 + +``` + diff --git a/Engine3D/interactive/modelPoint/575cd7a180397.png b/Engine3D/interactive/modelPoint/575cd7a180397.png new file mode 100644 index 0000000..1a4a1d8 Binary files /dev/null and b/Engine3D/interactive/modelPoint/575cd7a180397.png differ diff --git a/Engine3D/interactive/modelPoint/575cd7a1ab7fb.png b/Engine3D/interactive/modelPoint/575cd7a1ab7fb.png new file mode 100644 index 0000000..02a8078 Binary files /dev/null and b/Engine3D/interactive/modelPoint/575cd7a1ab7fb.png differ diff --git a/Engine3D/interactive/modelPoint/README.md b/Engine3D/interactive/modelPoint/README.md new file mode 100644 index 0000000..eb384ab --- /dev/null +++ b/Engine3D/interactive/modelPoint/README.md @@ -0,0 +1,46 @@ + +## 模型与点碰撞 + + +### 原理： + +* 检测模型与点碰撞其实就是检测一个点是否在模型内。在 egret3d 中，模型与点碰撞，是通过模型的 bound 来检测是否包含这个点（egret3d.Vector3D）来实现。 + + 这里为了更好的理解，我们将“点“想象成一个稍微大些的球。 + +* 未碰撞： + + ![image](575cd7a180397.png) + +* 碰撞： + + ![image](575cd7a1ab7fb.png) + + +### api（egret3d.Bound）: + +~~~ +pointIntersect ( pos :egret3d.Vector3D ):boolean +~~~ + +~~~ +pos:egret3d.Vector3D — 检测的点 +~~~ + +### 示例： + +``` +var vector3d:egret3d.Vector3D = new egret3d.Vector3D(ball.x, ball.y, ball.z); +var result:boolean = cube.bound.pointIntersect(vector3d); + +``` + +``` +* cube：一个模型 +* bound：模型的数据 +* pointIntersect：检测方法 +* vector3d： 点的数据 +* result： 是否碰撞，true 碰撞，false 未碰撞 + +``` + diff --git a/Engine3D/interactive/rayModel/575cd7bd5b480.png b/Engine3D/interactive/rayModel/575cd7bd5b480.png new file mode 100644 index 0000000..12f5948 Binary files /dev/null and b/Engine3D/interactive/rayModel/575cd7bd5b480.png differ diff --git a/Engine3D/interactive/rayModel/575cd7bd6d4a1.png b/Engine3D/interactive/rayModel/575cd7bd6d4a1.png new file mode 100644 index 0000000..83b7170 Binary files /dev/null and b/Engine3D/interactive/rayModel/575cd7bd6d4a1.png differ diff --git a/Engine3D/interactive/rayModel/README.md b/Engine3D/interactive/rayModel/README.md new file mode 100644 index 0000000..a85c0ce --- /dev/null +++ b/Engine3D/interactive/rayModel/README.md @@ -0,0 +1,73 @@ + +## 射线与模型碰撞 + +### 原理：检测一条射线是否穿透一个模型。 + +* 未碰撞： + + ![image](575cd7bd5b480.png) + +* 碰撞： + + ![image](575cd7bd6d4a1.png) + + +### api（egret3d.Bound）: + +* 射线与模型具体数据相交 + +~~~ +IntersectMesh ( verticesData :Array, indexData :Array, offset :number, faces :number, uv_offset :number, mMat :egret3d.Matrix4_4, result :egret3d.PickResult ):boolean +~~~ + + * verticesData:Array — 检测的模型的顶点数据 + * indexData:Array — 检测的模型的索引数据 + * offset:number — 每个顶点的大小 + * faces:number — 模型面数 + * uv_offset:number — 模型顶点中UV的偏移 + * mMat:egret3d.Matrix4_4 — 顶点的世界变换矩阵 + * result:egret3d.PickResult — 相交相关数据 + + +* 射线与模型对象相交 + +~~~ +IntersectMeshEx ( renderItem :egret3d.IRender, uv_offset :number, result :egret3d.PickResult ):boolean +~~~ + + * renderItem:egret3d.IRender — 检测的模型 + * uv_offset:number — 模型顶点中UV的偏移 + * result:egret3d.PickResult — 相交相关数据 + + + +* 射线与三角形相交 + +~~~ +IntersectTriangle ( v0 :egret3d.Vector3D, v1 :egret3d.Vector3D, v2 :egret3d.Vector3D, ret :Array ):boolean +~~~ + + * v0:egret3d.Vector3D — 三角形的第一个顶点 + * v1:egret3d.Vector3D — 三角形的第二个顶点 + * v2:egret3d.Vector3D — 三角形的第三个顶点 + * ret:Array — t(交点到射线起始点的距离) u(交点在v1-v0上的投影的位置) v(交点在v1-v2上的投影的位置, 交点为ret=v0+pU*(v1-v0)+pV*(v2-v0)) + + + +### 示例： + +``` +var pickResult:egret3d.PickResult = new egret3d.PickResult(); +var result:boolean = ray.IntersectMeshEx(cube, 1, pickResult); + +``` + +``` +* ray：射线 +* cube：一个包围盒 +* IntersectMeshEx：检测方法 +* pickResult：相交相关数据 +* result： 是否碰撞，true 碰撞，false 未碰撞 + +``` + diff --git a/Engine3D/load/asset/Img_0.png b/Engine3D/load/asset/Img_0.png new file mode 100644 index 0000000..9932288 Binary files /dev/null and b/Engine3D/load/asset/Img_0.png differ diff --git a/Engine3D/load/asset/README.md b/Engine3D/load/asset/README.md new file mode 100644 index 0000000..903ceec --- /dev/null +++ b/Engine3D/load/asset/README.md @@ -0,0 +1,196 @@ +资源介绍: +---------- + +* png 贴图文件 ----ImageTexture + +* jpg 贴图文件 ----ImageTexture + +* dds 贴图文件 ----Texture + +* tga 贴图文件 ----Texture + +* hdr 贴图文件 ----Texture + +* esm 模型数据文件,Unity3d插件可以导出 ----Geometry + +* eam 骨骼动画文件,Unity3d插件可以导出 ----SkeletonAnimationClip + +* epa 属性动画文件,Unity3d插件可以导出（物体动画或相机动画） ----PropertyAnim + +* xml 普通数据 ---- any + +* json 普通数据 ---- any + +* json Unity3d插件导出的文件 + + ---- Object3D + + ---- Scene3D 场景文件 + + ---- Role 角色文件 + + ---- EffectGroup 特效组文件 + +贴图文件如果宽高不是2的N次方则会输出错误log + +---------- + +资源加载: +---------- + +egret3d引擎中会对一部分资源加载之后进行解析，解析为引擎中对应的一些数据对象进行存储。其它的文件加载之后都将以二进制数据进行返回。 + +加载方式有3种： 使用QueueLoader可以完成所有加载 + +* URLLoader 加载 +---------- + + 是基础的文件加载解析，不会由一个文件的配置进行加载另一个文件。一次只能加载一个文件 + + 事件： + LOADER_COMPLETE 加载完成后触发 + LOADER_ONCE_COMPLETE 加载完成后触发 + LOADER_PROGRESS 加载进度 + + ``` + protected doURLLoader() { + + // ------------------ 使用URLLoader加载 --------------------- + + var urlLoader: egret3d.URLLoader = new egret3d.URLLoader("resource/doc/brick-diffuse.jpg"); + // 监听完成事件 + urlLoader.addEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE, this.onLoader, this); + + // ------------------ 使用URLLoader加载 --------------------- + } + + protected onLoader(e: egret3d.LoaderEvent3D) { + // 加载完成后数据 + var img: egret3d.ImageTexture = e.data; + + // 创建一个box 加载场景中 + var box: egret3d.Mesh = new egret3d.Mesh(new egret3d.CubeGeometry(), new egret3d.TextureMaterial(img)); + this.view.addChild3D(box); + } + + ``` + +---------- + +* UnitLoader 加载 +---------- + + 单体加载文件 把普通的文件和配置文件都算成一个单体 会对文件进行加载 还会对配置文件中的内容进行解析， + 并且会根据配置文件中的内容进行加载 所有文件加载完成，会响应 LOADER_COMPLETE事件 + 每个文件加载完成会响应 LOADER_ONCE_COMPLETE事件 + 加载进度会响应 LOADER_PROGRESS事件 + + 在加载Unity插件导出的配置文件时 加载进度会从0-1 + + 事件： + LOADER_COMPLETE 加载完成后触发 + LOADER_ONCE_COMPLETE 加载完成后触发 + LOADER_PROGRESS 加载进度 + +---------- + +* QueueLoader 加载 +---------- + + 每个加载对象都是一个UnitLoader对象 可以加载多个文件，队列式进行加载。 + 加载完一个文件后，如果是配置文件，会由配置文件索引加载其它文件。 + + 事件： + LOADER_COMPLETE 加载完成后触发 + LOADER_ONCE_COMPLETE 加载完成后触发 + LOADER_PROGRESS 加载进度 + + ``` + + protected doQueueLoader() { + + // ------------------ 使用QueueLoader加载 --------------------- + + var queueLoader: egret3d.QueueLoader = new egret3d.QueueLoader(); + + queueLoader.load("resource/doc/ganning/Ganning.esm"); + queueLoader.load("resource/doc/ganning/Idle.eam"); + queueLoader.load("resource/doc/ganning/Run.eam"); + queueLoader.load("resource/doc/ganning/Attack1.eam"); + queueLoader.load("resource/doc/ganning/Death.eam"); + queueLoader.load("resource/doc/ganning/Ganning.png"); + queueLoader.load("resource/doc/ganning/Ganning_f.png"); + queueLoader.load("resource/doc/ganning/Ganning_Weapon.png"); + + + + // 这个资源是unity3d插件导出的场景资源 + var sponzaLoader :egret3d.UnitLoader = queueLoader.load("resource/doc/sponza_Demo/MapConfig.json"); + + // 监听某个文件的加载进度事件 + sponzaLoader.addEventListener(egret3d.LoaderEvent3D.LOADER_PROGRESS, this.onSceneProgress, this); + + // 监听某个文件的加载完成事件 + sponzaLoader.addEventListener(egret3d.LoaderEvent3D.LOADER_ONCE_COMPLETE, this.onSceneOnceProgress, this); + + + // 监听完成事件 + queueLoader.addEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE, this.onQueueLoader, this); + + // 监听单个文件完成事件 + queueLoader.addEventListener(egret3d.LoaderEvent3D.LOADER_ONCE_COMPLETE, this.onOnceComplete, this); + // ------------------ 使用QueueLoader加载 --------------------- + } + + protected onQueueLoader(e: egret3d.LoaderEvent3D) { + var queueLoader: egret3d.QueueLoader = e.target; + + // 加载完成后用url查找资源 + var geo: egret3d.Geometry = queueLoader.getAsset("resource/doc/ganning/Ganning.esm"); + var clip0: egret3d.SkeletonAnimationClip = queueLoader.getAsset("resource/doc/ganning/Idle.eam"); + var clip1: egret3d.SkeletonAnimationClip = queueLoader.getAsset("resource/doc/ganning/Run.eam"); + var clip2: egret3d.SkeletonAnimationClip = queueLoader.getAsset("resource/doc/ganning/Attack1.eam"); + var clip3: egret3d.SkeletonAnimationClip = queueLoader.getAsset("resource/doc/ganning/Death.eam"); + var textures: egret3d.ITexture[] = []; + + textures[0] = queueLoader.getAsset("resource/doc/ganning/Ganning.png"); + textures[1] = queueLoader.getAsset("resource/doc/ganning/Ganning_f.png"); + textures[2] = queueLoader.getAsset("resource/doc/ganning/Ganning_Weapon.png"); + + clip0.animationName = "Idle"; + clip1.animationName = "Run"; + clip2.animationName = "Attack1"; + clip3.animationName = "Death"; + + // 创建Mesh + var mesh: egret3d.Mesh = new egret3d.Mesh(geo, new egret3d.TextureMaterial()); + for (var i: number = 0; i < geo.subGeometrys.length; ++i) { + var mat: egret3d.MaterialBase = mesh.getMaterial(i); + if (!mat) { + mat = new egret3d.TextureMaterial(); + mesh.addSubMaterial(i, mat); + } + + mat.diffuseTexture = textures[i]; + } + + mesh.z = 100; + + mesh.animation.skeletonAnimationController.addSkeletonAnimationClip(clip0); + mesh.animation.skeletonAnimationController.addSkeletonAnimationClip(clip1); + mesh.animation.skeletonAnimationController.addSkeletonAnimationClip(clip2); + mesh.animation.skeletonAnimationController.addSkeletonAnimationClip(clip3); + mesh.animation.play("Idle"); + + this.view.addChild3D(mesh); + + + // 加载完场景资源可以直接替换View3D中的Scene对象 + var scene3d: egret3d.Scene3D = queueLoader.getAsset("resource/doc/sponza_Demo/MapConfig.json"); + this.view.scene = scene3d; + } + + ``` + + +![](Img_0.png) \ No newline at end of file diff --git a/Engine3D/methods/compile/575e571ee66bc.jpg b/Engine3D/methods/compile/575e571ee66bc.jpg new file mode 100644 index 0000000..114f382 Binary files /dev/null and b/Engine3D/methods/compile/575e571ee66bc.jpg differ diff --git a/Engine3D/methods/compile/575e571f1be44.jpg b/Engine3D/methods/compile/575e571f1be44.jpg new file mode 100644 index 0000000..e906291 Binary files /dev/null and b/Engine3D/methods/compile/575e571f1be44.jpg differ diff --git a/Engine3D/methods/compile/575e571f2ecc6.jpg b/Engine3D/methods/compile/575e571f2ecc6.jpg new file mode 100644 index 0000000..8163e77 Binary files /dev/null and b/Engine3D/methods/compile/575e571f2ecc6.jpg differ diff --git a/Engine3D/methods/compile/575e571f3dfdd.jpg b/Engine3D/methods/compile/575e571f3dfdd.jpg new file mode 100644 index 0000000..e0d083c Binary files /dev/null and b/Engine3D/methods/compile/575e571f3dfdd.jpg differ diff --git a/Engine3D/methods/compile/575e571f4e779.jpg b/Engine3D/methods/compile/575e571f4e779.jpg new file mode 100644 index 0000000..d01bd87 Binary files /dev/null and b/Engine3D/methods/compile/575e571f4e779.jpg differ diff --git a/Engine3D/methods/compile/575e571f60564.jpg b/Engine3D/methods/compile/575e571f60564.jpg new file mode 100644 index 0000000..2c261df Binary files /dev/null and b/Engine3D/methods/compile/575e571f60564.jpg differ diff --git a/Engine3D/methods/compile/575e571f6c232.jpg b/Engine3D/methods/compile/575e571f6c232.jpg new file mode 100644 index 0000000..19ef3aa Binary files /dev/null and b/Engine3D/methods/compile/575e571f6c232.jpg differ diff --git a/Engine3D/methods/compile/README.md b/Engine3D/methods/compile/README.md new file mode 100644 index 0000000..0dea1f4 --- /dev/null +++ b/Engine3D/methods/compile/README.md @@ -0,0 +1,397 @@ + +## 1、查看项目结构 + +![alt](575e571ee66bc.jpg) + +查看项目源码我们可以看到，有两个文件`Main.ts`、`LoadingUI.ts`。 +1. `Main.ts`是入口文件，在`Main.ts`中加载3D素材和核心逻辑代码。 +2. `LoadingUI`显示加载进度条，在资源加载完毕后需要移除加载素材。 + +接下来咱们详细分析一下默认项目代码。 + +## 2、查看Main.ts文件 +### 2.1 基本概念 +``` + // Canvas操作对象 + protected _egret3DCanvas: egret3d.Egret3DCanvas; + + // View3D操作对象 + protected _view3D: egret3d.View3D; + /** + * look at 摄像机控制器 。

* 指定摄像机看向的目标对象。

* 1.按下鼠标左键并移动鼠标可以使摄像机绕着目标进行旋转。

* 2.按下键盘的(w s a d) 可以摄像机(上 下 左 右)移动。

* 3.滑动鼠标滚轮可以控制摄像机的视距。

*/ + private cameraCtl: egret3d.LookAtController; + + // 灯光组 + private lights: egret3d.LightGroup = new egret3d.LightGroup(); + + // 模型对象 + private model: egret3d.Mesh; + + // 待机动画 + private idle: egret3d.SkeletonAnimationClip; + + // 加载界面 + private loadingUI = new LoadingUI(); +``` +* `_egret3DCanvas`存放view3D对象 +* `_view3D`存放3D模型对象 +* `cameraCtl`摄像机控制器，可以设置查看3D对象的距离、角度等参数 +* `lights`存放灯光数据，没有灯光3D模型就会是黑色，就像黑夜看不见东西一样 +* `model`3D模型对象，放到_view3D中 +* `idle`存放3D骨骼动画 +* `loadingUI`加载界面，控制加载图片文本的显示隐藏 + +我们目前先不做详细解释，先知道怎么用，在后续文档中会详细介绍各个概念的用法。 + +### 2.2 查看构造方法 + +``` + super(); + + //创建Canvas对象。 + this._egret3DCanvas = new egret3d.Egret3DCanvas(); + //Canvas的起始坐标，页面左上角为起始坐标(0,0)。 + this._egret3DCanvas.x = 0; + this._egret3DCanvas.y = 0; + //设置Canvas页面尺寸。 + this._egret3DCanvas.width = window.innerWidth; + this._egret3DCanvas.height = window.innerHeight; + + //创建View3D对象,页面左上角为起始坐标(0,0) + this._view3D = new egret3d.View3D(0,0,window.innerWidth,window.innerHeight); + //当前对象对视位置,其参数依次为: + //@param pos 对象的位置 + //@param target 目标的位置 + this._view3D.camera3D.lookAt(new egret3d.Vector3D(0,0,1000),new egret3d.Vector3D(0,0,0)); + //View3D的背景色设置 + this._view3D.backColor = 0xffffffff; + //将View3D添加进Canvas中 + this._egret3DCanvas.addView3D(this._view3D); + + //创建平行光 + var dirLight: egret3d.DirectLight = new egret3d.DirectLight(new egret3d.Vector3D(0.3,-0.3,0.1)); + dirLight.diffuse = 0xffffff; + this.lights.addLight(dirLight); + + ///创建加载类 + var load: egret3d.URLLoader = new egret3d.URLLoader(); + //设置加载完成回调 + load.addEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE,this.onLoad,this); + //开始加载 + load.load("resource/LingTong/Bonezero.esm"); + + this.InitCameraCtl(); + + //启动Canvas。 + this._egret3DCanvas.start(); + this._egret3DCanvas.addEventListener(egret3d.Event3D.ENTER_FRAME,this.update,this); + + this.loadingUI.OnInitLoadingView(3); + + //设置window resize事件 + egret3d.Input.addEventListener(egret3d.Event3D.RESIZE,this.OnWindowResize,this); +``` +构造方法中主要进行对象的实例化，我们一个个解释一下。 +* 实例化Canvas对象和View3D对象，然后把View3D对象放到Canvas对象中，舞台就可以显示View3D中的内容。 +* 实例化平行光对象，稍后可以添加到3D模型上 +>`this.model.material.lightGroup = this.lights;` +* load是加载类用来加载`.esm``.eam``.png`等素材文件 +* 所有准备好就可以启动Canvas了 +>`this._egret3DCanvas.start();` +* 而`this.update`方法则用来持续渲染摄像机控制器，它集成了很多功能。 +只需要在帧循环事件中调用`this.cameraCtl.update();`即可实现如下功能。 + * 1.按下鼠标左键并移动鼠标可以使摄像机绕着目标进行旋转。

* 2.按下键盘的(w s a d) 可以摄像机(上 下 左 右)移动。

* 3.滑动鼠标滚轮可以控制摄像机的视距。

* 最后就是LoadingUI实例化，开始初始化，后续会调用加载进度，最后素材加载完毕后移除LoadingUI，下一个小节我们专门解释一下LoadingUI + +### 2.3 相机方法相关 +接下来我们单独解释一下各个方法功能以及用法。 +``` + public update(e: egret3d.Event3D) { + this.cameraCtl.update(); + } +``` +这个其实是用来持续渲染摄像机控制器，上边已经解释过。 +``` + /** + * 初始化相机控制 + */ + private InitCameraCtl() { + //摄像机控制类 + this.cameraCtl = new egret3d.LookAtController(this._view3D.camera3D,new egret3d.Object3D()); + //设置目标和相机的距离 + this.cameraCtl.distance = 300; + //设置相机x轴旋转 + this.cameraCtl.rotationX = 0; + } +``` +这个方法是设置一些摄像机初始数值，比如 + +> `this.cameraCtl.distance = 300` + +是设置摄像机距离观察对象为300，稍后我们在第三节`调试Egret3D项目`中修改测试。 + +> `this.cameraCtl.rotationX = 0` + +这句话则是调整摄像机的x轴角度为0. + +### 2.4 窗口尺寸变化监听 +``` + /** + * 窗口尺寸变化事件 + */ + private OnWindowResize(e: egret3d.Event3D): void { + //重置ui大小 + this._egret3DCanvas.width = window.innerWidth; + this._egret3DCanvas.height = window.innerHeight; + this._view3D.width = window.innerWidth; + this._view3D.height = window.innerHeight; + } +``` +这个方法是当浏览器窗口变化时，保证3D场景能够及时更新。 + +### 2.5 模型加载数据处理 +``` + //创建加载类 + var load: egret3d.URLLoader = new egret3d.URLLoader(); + //设置加载完成回调 + load.addEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE,this.onLoad,this); + //开始加载 + load.load("resource/LingTong/Bonezero.esm"); +``` +以上处理加载Egret模型数据，通过上述代码实现。 +``` + /** + * 模型加载回调 + * @param e: egret3d.URLLoader 加载器对象 + */ + protected onLoad(e: egret3d.LoaderEvent3D) { + this.loadingUI.OnLoadFinished(); + + //创建纹理材质 + var mat = new egret3d.TextureMaterial(); + //创建模型基类 + var ge: egret3d.Geometry = e.loader.data; + //生成mesh + this.model = new egret3d.Mesh(ge,mat); + + if(ge.vertexFormat & egret3d.VertexFormat.VF_SKIN) { + ///设置骨骼动画 + this.model.animation = new egret3d.SkeletonAnimation(ge.skeleton); + } + this.model.material.lightGroup = this.lights; + this.model.y = -100; + + //插入model + this._view3D.addChild3D(this.model); + + var loadtex: egret3d.URLLoader = new egret3d.URLLoader(); + //注册贴图读取完成回调 + loadtex.addEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE,this.onLoadTexture,this); + //开始读取贴图 + loadtex.load("resource/LingTong/hero_12.png"); + loadtex["mat"] = mat; + + var loadAniIdle: egret3d.URLLoader = new egret3d.URLLoader(); + //注册动画读取完成回调 + loadAniIdle.addEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE,this.onAnimationIdle,this); + //开始读取动画 + loadAniIdle.load("resource/LingTong/Idle.eam"); + } +``` +首先检查数据是否加载完成 +> `this.loadingUI.OnLoadFinished();` + +这个稍后再下个小节再说 + +``` + //创建纹理材质 + var mat = new egret3d.TextureMaterial(); + //创建模型基类 + var ge: egret3d.Geometry = e.loader.data; + //生成mesh + this.model = new egret3d.Mesh(ge,mat); +``` +然后创建纹理材质保留后用，创建模型数据对象，生成mesh对象。 + +``` + if(ge.vertexFormat & egret3d.VertexFormat.VF_SKIN) { + ///设置骨骼动画 + this.model.animation = new egret3d.SkeletonAnimation(ge.skeleton); + } + this.model.material.lightGroup = this.lights; + this.model.y = -100; + + //插入model + this._view3D.addChild3D(this.model); +``` +* 然后绑定骨骼动画到`mesh`上。 +* 注意这里在材质上边绑定了平行光`this.lights`，这样可以保证模型有亮度，而不是黑乎乎的一片。 +* 最后将模型添加到`view3D`上。 + +``` + var loadtex: egret3d.URLLoader = new egret3d.URLLoader(); + //注册贴图读取完成回调 + loadtex.addEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE,this.onLoadTexture,this); + //开始读取贴图 + loadtex.load("resource/LingTong/hero_12.png"); + loadtex["mat"] = mat; + + var loadAniIdle: egret3d.URLLoader = new egret3d.URLLoader(); + //注册动画读取完成回调 + loadAniIdle.addEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE,this.onAnimationIdle,this); + //开始读取动画 + loadAniIdle.load("resource/LingTong/Idle.eam"); +``` +接下来加载贴图素材，加载动画素材。 + +### 2.6 模型加载贴图 + +``` + /** + * 漫反射贴图加载回调 + * @param e: egret3d.URLLoader 加载器对象 + */ + protected onLoadTexture(e: egret3d.LoaderEvent3D) { + this.loadingUI.OnLoadFinished(); + + //设置材质的漫反射贴图。 + e.loader["mat"].diffuseTexture = e.loader.data; + //注销回调 + e.loader.removeEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE,this.onLoadTexture,this); + } +``` +贴图加载完毕后，设置材质的漫反射贴图。如果没有设置的话，就会变成如下效果。 + +![alt](575e571f1be44.jpg) + +### 2.7 模型加载动画文件 +``` + /** + * 动画加载回调 + * @param e: egret3d.URLLoader 加载器对象 + */ + protected onAnimationIdle(e: egret3d.LoaderEvent3D) { + this.loadingUI.OnLoadFinished(); + + //骨骼动画 + this.idle = e.loader.data; + //动画名称 + this.idle.animationName = "idle"; + //添加clip + this.model.animation.skeletonAnimationController.addSkeletonAnimationClip(this.idle); + //播放动画 + this.model.animation.skeletonAnimationController.play(this.idle.animationName); + //注销回调 + this.model.removeEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE,this.onAnimationIdle,this); + } +``` +将骨骼动画添加到模型上，3D模型就可以包含动作了。如果没有骨骼动画，3D模型就没有动作，像一个雕塑你养。 +### 3、查看LoadingUI.ts文件 +`LoadingUI`包含了四个方法，`构造方法`、`OnInitLoadingView`、`OnLoadFinished`、`CloseLoadingView`。 +### 3.1 构造方法 +> this.div = document.getElementById('descCon'); + +看代码我们发现，这是通过`document`获取了`html`中的一个id为`descCon`的元素。 +接着咱们看一下`index.html`文件代码。 +``` +
``` +`inidex.html`提前添加了两个元素，一个是加载`icon`，一个是放置加载`loading`文字的`div`。而构造方法就是获取了加载`loading`文字的`div`，然后动态放入文本。 +### 3.2 OnInitLoadingView +``` + public OnInitLoadingView(max: number) { + this.max = max; + this.cur = 0; + if(max == 0) { + this.div.innerHTML = "正在加载:100%"; + this.CloseLoadingView(); + } else { + this.div.innerHTML = "正在加载:0%"; + } + } +``` +前边在`Main.ts`的构造方法中，初始化了`LoadingUI`，即调用了`OnInitLoadingView`方法。这个方法在`descCon`中动态加入了加载文字。 +这里注意一下，`max`代表了加载资源的个数，当加载完毕后即调用`OnLoadFinished` +### 3.3 OnLoadFinished +``` + public OnLoadFinished(): void { + if(this.cur == this.max) { + return; + } + if(this.cur + 1 >= this.max) { + this.div.innerHTML = "正在加载:100%"; + this.CloseLoadingView(); + } else { + this.cur++; + this.div.innerHTML = `正在加载:${Math.ceil(this.cur / this.max * 100)}%`; + } + } +``` +每次加载素材完毕后会调用`OnLoadFinished`，这个方法将会判断是否将全部素材加载完毕，如果没有则显示进度，如果没有则调用`CloseLoadingView`隐藏`LoadingUI`。 +### 3.4 CloseLoadingView +``` + public CloseLoadingView(): void { + this.div.innerHTML = "正在加载:100%"; + window.setTimeout(() => { + var loadingMap = document.getElementById('loadingCon'); + loadingMap.hidden = true; + },1000); + } +``` +很显然当前方法就是隐藏加载界面。 +## 4、调试Egret3D项目 +### 4.1 命令行 +* 编译3D项目 +> `Egret build` +* 运行3D项目 +> `Egret run` + +### 4.2 快捷键 +* 编译3D项目 +> `command shift b` + +* 如果是windows +> `control shift b` + +* 调试运行3D项目 +> `F5` + +### 4.3 可视化界面 +* 点击调试按钮 +![alt](575e571f2ecc6.jpg) +可以选择使用`wing内置播放器`调试或者使用浏览器调试。我们这里使用`Wing内置播放器`调试。 +* 打开Wing内置播放器 +![alt](575e571f3dfdd.jpg) +内置播放器集成了几个常用的功能。 + * `分辨率`可以设置常用的分辨率 + * `横竖屏`可以设置是横屏显示还是竖屏显示 + * `缩放`可以设置缩放1倍2倍3倍 + * 右键`切换显示列表查看器`继承了`Egret Inspector`查看显示列表等功能 + * 右键`切换开发者工具`可以查看网络、`console`等数据 + ![alt](575e571f4e779.jpg) + +### 4.4 修改代码调试 +我们简单修改一下 +``` + /** + * 漫反射贴图加载回调 + * @param e: egret3d.URLLoader 加载器对象 + */ + protected onLoadTexture(e: egret3d.LoaderEvent3D) { + this.loadingUI.OnLoadFinished(); + + //设置材质的漫反射贴图。 + // e.loader["mat"].diffuseTexture = e.loader.data; + //注销回调 + e.loader.removeEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE,this.onLoadTexture,this); + } +``` +上述代码屏蔽了材质的漫反射贴图代码，然后打上断点，`F5`调试 + ![alt](575e571f60564.jpg) +上图圈起的部分，可以看到包含了主流IDE所有的调试功能，包括 +* `观察表达式`可以查看某个对象的数据信息 +* `断点查看`可以查看当前文件中的所有断点 +* `单步调试`可以一步步调试代码，发现bug所在 +* `变量`、`调用堆栈`等功能 + + ![alt](575e571f6c232.jpg) + + 运行结果如上图，因为没有漫反射贴图，导致3D模型都是白色。 diff --git a/Engine3D/methods/create/575ccb5e7a2b2.jpg b/Engine3D/methods/create/575ccb5e7a2b2.jpg new file mode 100644 index 0000000..e69de29 diff --git a/Engine3D/methods/create/575e56ed149ee.jpg b/Engine3D/methods/create/575e56ed149ee.jpg new file mode 100644 index 0000000..068e79a Binary files /dev/null and b/Engine3D/methods/create/575e56ed149ee.jpg differ diff --git a/Engine3D/methods/create/575e56ed2a7eb.jpg b/Engine3D/methods/create/575e56ed2a7eb.jpg new file mode 100644 index 0000000..e395bc8 Binary files /dev/null and b/Engine3D/methods/create/575e56ed2a7eb.jpg differ diff --git a/Engine3D/methods/create/575e56ed3a1c9.jpg b/Engine3D/methods/create/575e56ed3a1c9.jpg new file mode 100644 index 0000000..114f382 Binary files /dev/null and b/Engine3D/methods/create/575e56ed3a1c9.jpg differ diff --git a/Engine3D/methods/create/575e56ed7b3fd.jpg b/Engine3D/methods/create/575e56ed7b3fd.jpg new file mode 100644 index 0000000..e0d083c Binary files /dev/null and b/Engine3D/methods/create/575e56ed7b3fd.jpg differ diff --git a/Engine3D/methods/create/README.md b/Engine3D/methods/create/README.md new file mode 100644 index 0000000..80525bc --- /dev/null +++ b/Engine3D/methods/create/README.md @@ -0,0 +1,62 @@ + +我们Egret为大家提供了可视化创建工具Wing，它可以方便的创建、编译、修改`Egret3D`项目，接下来我们一起来学习创建一个简单的`Egret3D`项目。 + +首先使用Wing创建一个`Egret3D`项目，然后详细介绍一下Wing工具的用法，和`Egret3D`的文档结构。 + +## 1、Wing创建Hello Egret3D项目 + +启动Wing 3.0应用程序，点击文件-->创建项目显示界面如下图所示。 + +![alt](575e56ed149ee.jpg) + +选择`Egret3D`项目，输入项目名称为`Hello Egret3D`，点击完成即可完成`Egret3D`的创建。 + +然后我们可以看到一个提示如下： + +![alt](575e56ed2a7eb.jpg) + +我们选择`好的`，一个`Egret3D`项目就创建成功了。 + +使用快捷键`F1`可以运行3D项目如下 + +![alt](575e56ed7b3fd.jpg) + +## 2、Wing工作界面简介 + +项目创建成功，我们先简单看一下Wing的工作界面，方便以后查找各项功能。 + +![alt](575ccb5e7a2b2.jpg) + +1. `首选项`包含了用户设置、工作空间设置、快捷键、用户代码片段、主题等功能 +如果你需要修改Wing自定义配置的话就需要到这里来修改，或者你要修改Wing的主题的话也需要这里的功能。 +2. `文件`里包含了新建项目、新建文件之类的文件管理类功能。 +3. `构建`包含了构建、清理、调试功能。 +4. `视图`包含了整个Wing的视图布局功能。 +5. `前往`包含了查找文件的一系列功能。 +6. `窗口`包含了窗口的最大化最小化等功能。 +7. `插件`包含了Wing安装的所有的插件列表。 +8. `帮助`里最重要的一个功能就是`插件商城`可以下载各种各样丰富插件的商城。 +9. `编辑器左侧`的位置显示了当前项目的资源目录，左上方显示了最近打开的几个文件，如果不喜欢可以在用户设置里修改显示个数或者屏蔽。 +10. `编辑器右侧`就是代码编辑区域了。 +11. `底部的状态栏`显示一些警告错误和用户登录情况的提示。 + + +## 3、Egret3D项目目录说明 + +`Hello Egret3D`创建完毕，也和大家一起了解了Wing的界面结构，接下来大家一块了解一下Egret3D的项目结构吧。先看下图。 + +![alt](575e56ed3a1c9.jpg) + +我们从上往下看。 + +1. `.wing`包含了wing编译Egret3D所需要的一些配置信息，是第一小节项目提示自动生成的文件，所以不用关心。 +2. `libs`包含了所有Egret3D的核心代码。 +3. `resource`包含了所有的Egret3D资源。 +4. `src`存放项目的逻辑代码。 +5. `template`大家一般情况下用不到所以不用关心。 +6. `egretProperties.json`配置了当前项目需要包含的第三方库等其他信息。 +7. `index.html`配置了当前项目的显示方式。 +8. `tsconfig.json`配置了TS的编译方式。 +9. `wingProperties.json`配置了Wing的一些配置信息。 + + diff --git a/Engine3D/methods/publish/575e573a75404.jpg b/Engine3D/methods/publish/575e573a75404.jpg new file mode 100644 index 0000000..f5e8b05 Binary files /dev/null and b/Engine3D/methods/publish/575e573a75404.jpg differ diff --git a/Engine3D/methods/publish/README.md b/Engine3D/methods/publish/README.md new file mode 100644 index 0000000..eb6288f --- /dev/null +++ b/Engine3D/methods/publish/README.md @@ -0,0 +1,8 @@ +![alt](575e573a75404.jpg) +> `使用插件`->`Egret Support`->`发布Egret项目`即可 + +也可以使用命令行 +> `Egret publish` + +## 小结 +本章节介绍了Egret 3D从创建到编译、发布的整个流程，也介绍了默认demo的整个代码结构，帮助开发者快速上手Egret 3D引擎。 \ No newline at end of file diff --git a/Engine3D/sound/audioManager/README.md b/Engine3D/sound/audioManager/README.md new file mode 100644 index 0000000..d85336b --- /dev/null +++ b/Engine3D/sound/audioManager/README.md @@ -0,0 +1,50 @@ + +AudioManager 类允许您在应用程序中 播放 HTML5 Audio 和 Web Audio。它集合了加载声音文件、播放2D或者3D效果方法，可以使我们方便的控制声音播放。 + +## 1、AudioManager属性 + + +* `context : any` AudioContext 上下文 +egret3d.AudioManager +* `instance : egret3d.AudioManager` [静态] [只读] AudioManager类的单例模式，返回一个 AudioManager 对象 +egret3d.AudioManager +* `volume : number` 音量，范围从 0（静音）至 1（最大幅度） + +注意以上是Channel的属性，可以直接设置如下： +> `AudioManager.maxDistance = 10;` + +但是必须在初始化的时候设置，或者在play之前设置。通过对这些属性的设置，能够产生具有空间属性的声音效果。 + +## 2、AudioManager方法 + +* `AudioManager ()` 创建一个新的 AudioManager 对象 +* `createSound ( url :string, success :Function, error :Function ):egret3d.Sound` 生成一个新的 Sound 对象 ，将声音数据加载到 Sound 对象中 +* `hasAudio ( ):boolean` 是否支持 HTML5 Audio tag API +* `hasAudioContext ( ):boolean` 是否支持 Web Audio API +* `isSupported ( url :string, audio :HTMLAudioElement ):boolean` 浏览器是否可以播放这种音频类型 +* `playSound ( sound :egret3d.Sound, options :any )` 生成一个新的 Channel 对象来播放该声音 +* `playSound3d ( sound :egret3d.Sound, position :egret3d.Vector3D, options :any ):egret3d.Channel3d` 生成一个新的 Channel3d 对象来播放该声音 + +## 3、代码示例 +``` + public constructor() { + super(); + + this._sound = egret3d.AudioManager.instance.createSound("resource/ccnn.mp3", this.loadSoundSuccess); + } + + // 加载声音文件成功 + private loadSoundSuccess(e): void { + this._manager = new egret3d.AudioManager(); + + // 生成一个新的 Channel 对象来播放该声音。 + this._channel = this._manager.playSound(e, { "volume": 0.5, "loop": true }); + + // 生成一个新的 Channel3d 对象来播放该声音。 + this._channel3d = this._manager.playSound3d(e, new egret3d.Vector3D(0, 0, 10), { "volume": 0.5, "loop": true }); + + //Channel 可停止声音并监控音量。 + // this._channel.pause(); + } +``` +使用`F5`调试即可播放。 \ No newline at end of file diff --git a/Engine3D/sound/channel/README.md b/Engine3D/sound/channel/README.md new file mode 100644 index 0000000..788f315 --- /dev/null +++ b/Engine3D/sound/channel/README.md @@ -0,0 +1,41 @@ + +Channel 类控制应用程序中的声音，对声音执行更精细的控制。每个声音均分配给一个声道，而且应用程序可以具有混合在一起的多个声道。 + +## 1、Channel属性 + +* `loop : boolean` 是否循环播放 使声音播放结束时重新开始播放 +* `pitch : number` 当前播放速度,当前播放速度。1.0 正常速度。0.5 半速（更慢）。2.0 倍速（更快）。-1.0 向后。正常速度。-0.5 向后，半速。 +* `volume : number` 音量，范围从 0（静音）至 1（最大幅度） + +注意以上是Channel的属性，可以直接设置如下： +> `channel.volume = 1;` + +但是必须在初始化的时候设置，或者在play之前设置。 +## 2、Channel方法 + + +* `Channel ( sound :egret3d.Sound, options :any )` 创建一个新的 Channel 对象 +* `getDuration ( ):number` 音频持续时间 +* `isPlaying ( ):boolean` 是否正在播放 +* `pause ( )` 暂时停止在该声道中播放声音 +* `play ( )` 开始在该声道中播放声音 +* `stop ( )` 停止在该声道中播放声音 +* `unpause ( )` 从暂停的位置继续在该声道中播放声音 + +## 3、代码示例 + +接下来我们修改`Hello Sound`代码 +在onLoad最后新增这句代码 +> `this._sound = new egret3d.Sound("resource/ccnn.mp3",this.loadSoundSuccess);` + +并新建方法`loadSoundSuccess` +``` + private _sound:egret3d.Sound; + // 加载声音文件成功 + private loadSoundSuccess(e): void { + var channel:egret3d.Channel = new egret3d.Channel(e,{"volume":1,"loop":true}); + channel.play(); + } +``` +使用`F5`调试即可播放。 + diff --git a/Engine3D/sound/channel3D/README.md b/Engine3D/sound/channel3D/README.md new file mode 100644 index 0000000..6f72490 --- /dev/null +++ b/Engine3D/sound/channel3D/README.md @@ -0,0 +1,42 @@ + +Channel3d 类控制应用程序中 在三维空间中播放的声音。每个声音均分配给一个声道，而且应用程序可以具有混合在一起的多个声道。 + +> 注：因为channel3d继承自channel，所以channel3d也包含channel的属性方法。 + +## 1、Channel3D属性 + +* `listener : egret3d.Vector3D` 返回监听者位置 +* `maxDistance` 最大距离 +* `minDistance` 最小距离 +* `position` 三维空间中的位置 +* `rollOffFactor rollOff` 系数 +* `velocity` 传播方向 + +注意以上是Channel的属性，可以直接设置如下： +> `channel3d.maxDistance = 10;` + +但是必须在初始化的时候设置，或者在play之前设置。通过对这些属性的设置，能够产生具有空间属性的声音效果。 + +## 2、Channel3D方法 + +* `Channel3d ( sound :egret3d.Sound, options :any )` 创建一个新的 Channel3d 对象，和channel构造方法一样 +* `getDuration ( ):number` 音频持续时间 +* `isPlaying ( ):boolean` 是否正在播放 + +## 3、代码示例 +我们对channel的示例稍作修改 +``` + private _sound:egret3d.Sound; + // 加载声音文件成功 + private loadSoundSuccess(e): void { + var channel3d:egret3d.Channel3d = new egret3d.Channel3d(e,{"volume":1,"loop":true}); + + channel3d.volume = 1; + channel3d.position = new egret3d.Vector3D(0,0,0); + channel3d.velocity = new egret3d.Vector3D(0,0,0); + channel3d.play(); + + } + +``` +使用`F5`调试即可播放。 diff --git a/Engine3D/sound/example/README.md b/Engine3D/sound/example/README.md new file mode 100644 index 0000000..a683b55 --- /dev/null +++ b/Engine3D/sound/example/README.md @@ -0,0 +1,176 @@ +# AudioManager的使用 # + +通过 AudioManager 类 加载音频并播放音频 + +# 函数声明 # +通过调用 createSound 方法返回 Sound 音频源 对象 +> public createSound (url:string, success:Function=null, error:Function=null):Sound + +通过调用 playSound 方法返回 Channel 对象 Channel 类控制应用程序中的声音 +> public playSound(sound: Sound, options: any) + + + AudioManager.instance.createSound("../resource/audio/1.mp3", (e) => { + //Channel 类控制应用程序中的声音 + this._channel = AudioManager.instance.playSound(e, { "volume": 0.5, "loop": true }); + this._channel.play(); + }) + + + +# 示例 # + + +在以下示例中，用户可暂停并重放声音文件 + + + + + private _channel: egret3d.Channel; + private _sound: egret3d.Sound; + private _txt: gui.UITextField; + private _btnPlay: gui.UILabelButton; + private _btnStop: gui.UILabelButton; + private _btnPause: gui.UILabelButton; + private startTime: number = 0; + + + public initedGui() { + + + this._txt = new gui.UITextField(); + this._txt.text = "Time：" + this.startTime; + + + this._btnPlay = new gui.UILabelButton(); + this._btnPlay.label = "Play"; + this._btnPlay.width = 35; + this._btnPlay.height = 20; + this._btnPlay.x = 0; + this._btnPlay.y = 50; + + this._btnStop = new gui.UILabelButton(); + this._btnStop.label = "Stop"; + this._btnStop.width = 35; + this._btnStop.height = 20; + this._btnStop.x = 40; + this._btnStop.y = 50; + + this._btnPause = new gui.UILabelButton(); + this._btnPause.label = "Pause"; + this._btnPause.width = 35; + this._btnPause.height = 20; + this._btnPause.x = 80; + this._btnPause.y = 50; + + + this._view.addGUI(this._txt); + this._view.addGUI(this._btnPlay); + this._view.addGUI(this._btnStop); + this._view.addGUI(this._btnPause); + + + this.initListener(); + + + } + + + + + + + + + + + + + + + + + +注册监听事件 + + + + + + private initListener() { + var self = this; + self._btnPlay.addEventListener(egret3d.MouseEvent3D.MOUSE_CLICK, (e) => { + + if (this._channel) { + if (!this._channel.isPlaying()) { + this._channel.unpause();//播放处于暂停状态的音频 + } + + } + else { + AudioManager.instance.createSound("../resource/audio/music.mp3", (e) => { + this._sound = e; + this._channel = AudioManager.instance.playSound(self._sound, { "volume": 0.5, "loop": true }); + this._channel.play(); + }) + } + + }, this); + + self._btnStop.addEventListener(egret3d.MouseEvent3D.MOUSE_CLICK, (e) => { + this._channel.stop(); + this.startTime = 0; + this._txt.text = "Time：" + self.startTime; + }, this); + + + self._btnPause.addEventListener(egret3d.MouseEvent3D.MOUSE_CLICK, (e) => { + if (this._channel.isPlaying())//如果媒体文件被暂停，则返回true，否则返回false + this._channel.pause();//暂停处于播放状态的音频 + }, this); + + + + + + + var drawMeter = function () { + + + if (self._channel && self._channel.isPlaying()) { + self._txt.text = "Time：" + self.startTime++; + + } + requestAnimationFrame(drawMeter); + + } + + requestAnimationFrame(drawMeter) + + } + + + + + + + +运行结果如图所示 + +![](sound.gif) + + + + + + + + + + + + + + + + diff --git a/Engine3D/sound/example/sound.gif b/Engine3D/sound/example/sound.gif new file mode 100644 index 0000000..e2a57b9 Binary files /dev/null and b/Engine3D/sound/example/sound.gif differ diff --git a/Engine3D/sound/sound/575e583db4ed1.jpg b/Engine3D/sound/sound/575e583db4ed1.jpg new file mode 100644 index 0000000..a3392c0 Binary files /dev/null and b/Engine3D/sound/sound/575e583db4ed1.jpg differ diff --git a/Engine3D/sound/sound/README.md b/Engine3D/sound/sound/README.md new file mode 100644 index 0000000..e8d67e4 --- /dev/null +++ b/Engine3D/sound/sound/README.md @@ -0,0 +1,68 @@ + +使用 `Sound` 类可以创建 `Sound` 对象、将外部 `MP3` 文件加载到该对象并播放该文件、关闭声音流，以及访问有关声音的数据，如有关流中字节数和 `ID3` 元数据的信息。 + +## 注意事项 + +声音资源的格式生成请严格按照此步骤来，不然兼容性会小很多。 + +1. 使用格式工厂。选择 `44100Hz`，`96kbps` 转换。其他具体的格式，测试团队还在测试中。 +2. 如果还有问题，请再转一次。 +3. 如果还有问题，请裁减音频再次转换。 +4. 如果还有问题，请到论坛联系我们 开发者论坛，并提供对应的音频文件。 +说这么多其实就是一句话，如果有问题，请多转几次。 + +对于更专业的转换工具比如 `audition`，在测试中发现转换后的文件并不能解决在所有的浏览器中的播放问题，所以以目前的测试结果不推荐大家使用。 + +在 `iOS` 系统（所有设备，包括`IPAD`）中，使用者在可能付费的网络环境中需要等待用户交互操作后才能播放媒体。为了获得在 `iOS` 系统中最大的兼容性，请避免使用自动播放音频（载入完成即播放），应添加合适的触发条件（比如播放按钮）。 + +## 1、创建Hello Sound项目 + +![alt](575e583db4ed1.jpg) + +创建名称为`Hello Sound`的项目。 + +## 2、修改Hello Sound代码 + +我们先看一下egret3d.Sound的源码 +``` + private isLoaded; + /** + * @language zh_CN + * HTML音频 数据源。 + * @version Egret 3.0 + * @platform Web,Native + */ + audio: HTMLAudioElement; + private _buffer; + /** + * @language zh_CN + * Web音频 数据源。 + * @returns {AudioBuffer} + * @version Egret 3.0 + * @platform Web,Native + */ + buffer: any; + private _success; + private _error; + /** + * @language zh_CN + * 创建一个新的 Sound 对象。一旦某个 Sound 对象加载完成声音文件，就不能再将另一个声音文件加载到该 Sound 对象中。要加载另一个声音文件，请创建新的 Sound 对象。 + * @param {String} 指向外部音频文件的 URL。 + * @param {Function} 一个可选的音频文件加载成功的事件处理函数。 + * @param {Function} 一个可选的音频文件加载失败的事件处理函数。 + * @version Egret 3.0 + * @platform Web,Native + */ + constructor(url: string, success?: Function, error?: Function); + private xhr; + private loadAudioFile(url); + private audioLoadend(e); + private decodeSuccessCallback(buffer); + private onended(ev); + private oncanplaythrough(ev); +``` +可以看到，`Sound`类主要包含两个属性`buffer`、`audio`，和一个构造方法`constructor` +使用如下方法即可加载声音文件 +> `this._sound = new egret3d.Sound("resource/ccnn.mp3",this.loadSoundSuccess);` + +这样就能实例化`Sound`对象。而`Sound`没有办法自己控制声音的播放循环等功能，需要配合`Channel`类才可以使用。 \ No newline at end of file diff --git a/Engine3D/unity/.DS_Store b/Engine3D/unity/.DS_Store new file mode 100644 index 0000000..27ca883 Binary files /dev/null and b/Engine3D/unity/.DS_Store differ diff --git a/Engine3D/unity/0/Img_1.png b/Engine3D/unity/0/Img_1.png new file mode 100644 index 0000000..d1172bb Binary files /dev/null and b/Engine3D/unity/0/Img_1.png differ diff --git a/Engine3D/unity/0/Img_2.gif b/Engine3D/unity/0/Img_2.gif new file mode 100644 index 0000000..4523f28 Binary files /dev/null and b/Engine3D/unity/0/Img_2.gif differ diff --git a/Engine3D/unity/0/Img_3.png b/Engine3D/unity/0/Img_3.png new file mode 100644 index 0000000..b3173db Binary files /dev/null and b/Engine3D/unity/0/Img_3.png differ diff --git a/Engine3D/unity/0/Img_4.png b/Engine3D/unity/0/Img_4.png new file mode 100644 index 0000000..88603f0 Binary files /dev/null and b/Engine3D/unity/0/Img_4.png differ diff --git a/Engine3D/unity/0/Img_5.gif b/Engine3D/unity/0/Img_5.gif new file mode 100644 index 0000000..e061b2d Binary files /dev/null and b/Engine3D/unity/0/Img_5.gif differ diff --git a/Engine3D/unity/0/Img_6.png b/Engine3D/unity/0/Img_6.png new file mode 100644 index 0000000..9677c99 Binary files /dev/null and b/Engine3D/unity/0/Img_6.png differ diff --git a/Engine3D/unity/0/Img_7.png b/Engine3D/unity/0/Img_7.png new file mode 100644 index 0000000..a0b389c Binary files /dev/null and b/Engine3D/unity/0/Img_7.png differ diff --git a/Engine3D/unity/0/README.md b/Engine3D/unity/0/README.md new file mode 100644 index 0000000..939f2ba --- /dev/null +++ b/Engine3D/unity/0/README.md @@ -0,0 +1,29 @@ + + +1）前往unity3D官方网站，下载版本为4.7.1或其以上windows版本的安装程序,并安装。现阶段插件尚不支持unity3d 5.x版本和Mac版本的程序，使用时需要注意。 + +2）下载所需导出插件[unity4.7.1_Egret3D_Dll_0.0.1.unitypackage](https://cdn.www.egret.com/20170204/589543c431dc6.zip)，下载完成后如图所示： + +![](Img_1.png) + + 3）新建一个unity工程，在Project管理器内找到Assets文件夹，右击选中Import Package-->Custom Package 选中unity4.7.1_Egret3D_Dll.unitypackage后 + 导入,选择Import导入。 + a）由于unity3D 4.x版本的问题，unity4.7.1_Egret3D_Dll.unitypackage的路径不能含有中文路径，否则插件导入会失败。 + +![](Img_2.gif) +![](Img_3.png) + + 4）打开菜单栏，Edit-->Project Setting-->Editor,将Assert Serialization的Mode修改为Force Text。否则导出粒子的时候会有报错。 + +![](Img_6.png) +![](Img_7.png) + + 5）导入后项目目录如图所示： + a）首先打开Setting文件夹，解压缩Setting.rar内文件至C:\Windows\System32目录下，如果跳过此步骤会导出光照贴图导出出错。 + b）Example文件夹内是测试示例文件，后面的教程里我们会慢慢用到。 + +![](Img_4.png) + + 6）插件安装成功后，会有菜单内容出现，详情如图所示： + +![](Img_5.gif) diff --git a/Engine3D/unity/1/Img_1.png b/Engine3D/unity/1/Img_1.png new file mode 100644 index 0000000..1766ca7 Binary files /dev/null and b/Engine3D/unity/1/Img_1.png differ diff --git a/Engine3D/unity/1/Img_2.png b/Engine3D/unity/1/Img_2.png new file mode 100644 index 0000000..23c8df7 Binary files /dev/null and b/Engine3D/unity/1/Img_2.png differ diff --git a/Engine3D/unity/1/Img_3.gif b/Engine3D/unity/1/Img_3.gif new file mode 100644 index 0000000..8b7a1de Binary files /dev/null and b/Engine3D/unity/1/Img_3.gif differ diff --git a/Engine3D/unity/1/Img_4.png b/Engine3D/unity/1/Img_4.png new file mode 100644 index 0000000..4d2285f Binary files /dev/null and b/Engine3D/unity/1/Img_4.png differ diff --git a/Engine3D/unity/1/Img_5.png b/Engine3D/unity/1/Img_5.png new file mode 100644 index 0000000..90f2e6c Binary files /dev/null and b/Engine3D/unity/1/Img_5.png differ diff --git a/Engine3D/unity/1/Img_6.png b/Engine3D/unity/1/Img_6.png new file mode 100644 index 0000000..700d7d3 Binary files /dev/null and b/Engine3D/unity/1/Img_6.png differ diff --git a/Engine3D/unity/1/Img_7.png b/Engine3D/unity/1/Img_7.png new file mode 100644 index 0000000..729e1e7 Binary files /dev/null and b/Engine3D/unity/1/Img_7.png differ diff --git a/Engine3D/unity/1/README.md b/Engine3D/unity/1/README.md new file mode 100644 index 0000000..052c5d4 --- /dev/null +++ b/Engine3D/unity/1/README.md @@ -0,0 +1,201 @@ + + + 1）完成unity插件安装教程后，我们接下来开始进行导出mesh。 + 2）我们打开Example文件夹下的Example_1场景文件，目录位置如图所示： + +![](Img_1.png) + + 3）我们首先再场景内创建一个Cube立方体，这里我们使用unity默认参数来进行导出，如图所示： + +![](Img_2.png) + + 4）然后我们选择菜单栏Egret3D-->Export-->Scene步骤打开导出场景功能块。 + +![](Img_3.gif) + + 5）接下来我们便可以看到了我们的场景导出工具面板，如下图所示： + +![](Img_4.png) + + 6）面板上的功能会在后面的场景导出教程中一一详细说明，暂时在这里我们使用默认导出设置进行导出，点击Export开始导出。 + 导出完成后，会显示导出目录信息，可以点击Open前往查看。 + +![](Img_5.png) + + 7）导出完成后，我们可以将导出的场景资源文件使用Egret3D引擎加载。 + a) 打开EgretWing，创建Egret3D，拷贝资源至Egret3D引擎资源目录下： + +![](Img_6.png) + + b) 修改Main.ts和Index.html文件如下图所示： + I) Main.ts + class Main extends egret.DisplayObject { + // Canvas操作对象 + protected _egret3DCanvas: egret3d.Egret3DCanvas; + + // View3D操作对象 + protected _view3D: egret3d.View3D; + /** + * look at 摄像机控制器 。

+ * 指定摄像机看向的目标对象。

+ * 1.按下鼠标左键并移动鼠标可以使摄像机绕着目标进行旋转。

+ * 2.按下键盘的(w s a d) 可以摄像机(上 下 左 右)移动。

+ * 3.滑动鼠标滚轮可以控制摄像机的视距。

+ */ + private cameraCtl: egret3d.LookAtController; + + //加载队列 + private urlArray: Array = new Array(); + //队列加载器 + private mapLoader: egret3d.QueueLoader; + + + public constructor() { + super(); + + //创建Canvas对象。 + this._egret3DCanvas = new egret3d.Egret3DCanvas(); + //Canvas的起始坐标，页面左上角为起始坐标(0,0)。 + this._egret3DCanvas.x = 0; + this._egret3DCanvas.y = 0; + //设置Canvas页面尺寸。 + this._egret3DCanvas.width = window.innerWidth; + this._egret3DCanvas.height = window.innerHeight; + + //创建View3D对象,页面左上角为起始坐标(0,0) + this._view3D = new egret3d.View3D(0, 0, window.innerWidth, window.innerHeight); + //当前对象对视位置,其参数依次为: + //@param pos 对象的位置 + //@param target 目标的位置 + this._view3D.camera3D.lookAt(new egret3d.Vector3D(0, 0, 1000), new egret3d.Vector3D(0, 0, 0)); + //View3D的背景色设置 + this._view3D.backColor = 0xffffffff; + //将View3D添加进Canvas中 + this._egret3DCanvas.addView3D(this._view3D); + + //插入加载任务 + this.urlArray.push("resource/Main/MapConfig.json"); + this.mapLoader = new egret3d.QueueLoader(); + for (var i = 0; i < this.urlArray.length; i++) { + this.mapLoader.load(this.urlArray[i]); + } + this.mapLoader.addEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE, this.OnMapLoad, this); + + this.InitCameraCtl(); + + //启动Canvas。 + this._egret3DCanvas.start(); + this._egret3DCanvas.addEventListener(egret3d.Event3D.ENTER_FRAME, this.update, this); + + //设置window resize事件 + egret3d.Input.addEventListener(egret3d.Event3D.RESIZE, this.OnWindowResize, this); + } + + public update(e: egret3d.Event3D) { + this.cameraCtl.update(); + } + + /** + * 窗口尺寸变化事件 + */ + private OnWindowResize(e: egret3d.Event3D): void { + //重置ui大小 + this._egret3DCanvas.width = window.innerWidth; + this._egret3DCanvas.height = window.innerHeight; + this._view3D.width = window.innerWidth; + this._view3D.height = window.innerHeight; + } + + /** + * 初始化相机控制 + */ + private InitCameraCtl() { + //摄像机控制类 + this.cameraCtl = new egret3d.LookAtController(this._view3D.camera3D, new egret3d.Object3D()); + //设置目标和相机的距离 + this.cameraCtl.distance = 300; + //设置相机x轴旋转 + this.cameraCtl.rotationX = 0; + } + + ///加载完成事件 + private OnMapLoad(e: egret3d.LoaderEvent3D) { + + for (var i = 0; i < this.urlArray.length; i++) { + var node: egret3d.Object3D = this.mapLoader.getAsset(this.urlArray[i]); + this._view3D.addChild3D(node); + } + } + + + } + + II) Index.html + + + + + Egret + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + 8）点击运行，查看结果。由于使用unity默认材质，会替换成Egret3D引擎内默认素材，故而显示有所区别，接下来我们将通过使用Egret3D的材质球进行一比一还原导出。 + +![](Img_7.png) diff --git a/Engine3D/unity/2/Img_1.png b/Engine3D/unity/2/Img_1.png new file mode 100644 index 0000000..fa823d3 Binary files /dev/null and b/Engine3D/unity/2/Img_1.png differ diff --git a/Engine3D/unity/2/Img_10.png b/Engine3D/unity/2/Img_10.png new file mode 100644 index 0000000..569c4b4 Binary files /dev/null and b/Engine3D/unity/2/Img_10.png differ diff --git a/Engine3D/unity/2/Img_2.png b/Engine3D/unity/2/Img_2.png new file mode 100644 index 0000000..571fbdf Binary files /dev/null and b/Engine3D/unity/2/Img_2.png differ diff --git a/Engine3D/unity/2/Img_3.png b/Engine3D/unity/2/Img_3.png new file mode 100644 index 0000000..bd8b7c5 Binary files /dev/null and b/Engine3D/unity/2/Img_3.png differ diff --git a/Engine3D/unity/2/Img_4.png b/Engine3D/unity/2/Img_4.png new file mode 100644 index 0000000..eaced84 Binary files /dev/null and b/Engine3D/unity/2/Img_4.png differ diff --git a/Engine3D/unity/2/Img_5.png b/Engine3D/unity/2/Img_5.png new file mode 100644 index 0000000..4095356 Binary files /dev/null and b/Engine3D/unity/2/Img_5.png differ diff --git a/Engine3D/unity/2/Img_6.png b/Engine3D/unity/2/Img_6.png new file mode 100644 index 0000000..be96803 Binary files /dev/null and b/Engine3D/unity/2/Img_6.png differ diff --git a/Engine3D/unity/2/Img_7.png b/Engine3D/unity/2/Img_7.png new file mode 100644 index 0000000..052981f Binary files /dev/null and b/Engine3D/unity/2/Img_7.png differ diff --git a/Engine3D/unity/2/Img_8.png b/Engine3D/unity/2/Img_8.png new file mode 100644 index 0000000..2464b7a Binary files /dev/null and b/Engine3D/unity/2/Img_8.png differ diff --git a/Engine3D/unity/2/Img_9.png b/Engine3D/unity/2/Img_9.png new file mode 100644 index 0000000..c4299b6 Binary files /dev/null and b/Engine3D/unity/2/Img_9.png differ diff --git a/Engine3D/unity/2/README.md b/Engine3D/unity/2/README.md new file mode 100644 index 0000000..f846b1a --- /dev/null +++ b/Engine3D/unity/2/README.md @@ -0,0 +1,47 @@ + + + 1）我们已经成功导出了unity3d的cube立方体，接下来我们来使用Egret3D插件内的shader来一比一还原导出mesh。 + 2）我们打开Example文件夹下的Example_2场景文件，目录位置如图所示： + +![](Img_1.png) +![](Img_2.png) + + 3) 首先我们来看一下Egret3D的unity插件为我们提供那些shader,这里我们推荐使用新版本Advanced目录下的shader,其中E3D_Material_Normal，E3D_Material_Add + 和E3D_Material_AlphaBlending分别对应了normal，add和AlphaBlending三种不同的模式，方便用户使用。 + +![](Img_3.png) + + 5）shader的参数，抛开模式不一致，三种shader的参数几乎一致，接下来我们已E3D_Material_Normal为例子进行说明： + +![](Img_4.png) + + a）diffuseTexture:漫反射贴图。 + b）normalTexture:法线贴图。 + c）specularTexture:高光贴图。 + d）diffuse Color:漫反射色。 + e）Ambient Color:法线色。 + f）Specular Color:高光色。 + g）Gloss:光泽。 + h）specularLevel:高光级别。 + e）cutAlpha:透明裁剪,小于该值将被裁剪。 + j）gamma:校正系数。 + k）refraction:折射系数。 + l）refractionintensity:折射强度。 + m）bothside:双面。 + + 6）这次导出使用的mesh，是一个多材质的模型，可以分为树干与树叶两部分。两个部分的材质球都使用了E3D_Material_Normal，其中树叶部分比较特殊，需要设置 + cutAlpha = 0.5来去除无用的透明像素。我们来看下cutAlpha = 0和0.5的差别。 + +![](Img_5.png) +![](Img_6.png) + + 7）参数调整完毕后，可以参考mesh导出教程内的步骤进行导出，输出结果如下： + +![](Img_7.png) + + 8) 上图中不难发现树叶边缘存在ALPHA错乱的的问题，那么我们首先菜单栏Egret3D-->Tools-->InitEgretLayer,然后选中树木，设置其layer层为 + normalAlphaObject，重新导出后如图所示： + +![](Img_8.png) +![](Img_9.png) +![](Img_10.png) diff --git a/Engine3D/unity/3/Img_1.png b/Engine3D/unity/3/Img_1.png new file mode 100644 index 0000000..1ea3f20 Binary files /dev/null and b/Engine3D/unity/3/Img_1.png differ diff --git a/Engine3D/unity/3/Img_2.png b/Engine3D/unity/3/Img_2.png new file mode 100644 index 0000000..1af4459 Binary files /dev/null and b/Engine3D/unity/3/Img_2.png differ diff --git a/Engine3D/unity/3/Img_3.png b/Engine3D/unity/3/Img_3.png new file mode 100644 index 0000000..77f213e Binary files /dev/null and b/Engine3D/unity/3/Img_3.png differ diff --git a/Engine3D/unity/3/Img_4.png b/Engine3D/unity/3/Img_4.png new file mode 100644 index 0000000..f2b2dcc Binary files /dev/null and b/Engine3D/unity/3/Img_4.png differ diff --git a/Engine3D/unity/3/Img_5.png b/Engine3D/unity/3/Img_5.png new file mode 100644 index 0000000..6185cbd Binary files /dev/null and b/Engine3D/unity/3/Img_5.png differ diff --git a/Engine3D/unity/3/Img_6.png b/Engine3D/unity/3/Img_6.png new file mode 100644 index 0000000..b8d8dc3 Binary files /dev/null and b/Engine3D/unity/3/Img_6.png differ diff --git a/Engine3D/unity/3/Img_7.png b/Engine3D/unity/3/Img_7.png new file mode 100644 index 0000000..358b427 Binary files /dev/null and b/Engine3D/unity/3/Img_7.png differ diff --git a/Engine3D/unity/3/Img_8.png b/Engine3D/unity/3/Img_8.png new file mode 100644 index 0000000..1fcf4b0 Binary files /dev/null and b/Engine3D/unity/3/Img_8.png differ diff --git a/Engine3D/unity/3/README.md b/Engine3D/unity/3/README.md new file mode 100644 index 0000000..30c1bb1 --- /dev/null +++ b/Engine3D/unity/3/README.md @@ -0,0 +1,215 @@ + + + 1）前两篇教程我们讲述了，如何调节材质球和如何输出mesh信息，本篇教程将进一步讲解如何输出SkinnedMesh。 + 2）我们打开Example文件夹下的Example_3场景文件，目录位置如图所示： + +![](Img_1.png) + + 3）场景内我们可以看到一个Character对象,如下图所示： + +![](Img_2.png) + + 4）导出SkinnedMesh前，我们首先确认导出的SkinnedMesh的蒙皮骨骼数目是没有超出48根，同时骨骼系内不能存在骨骼缩放，然后我们需要参考Material设置教程中的 + 设置修改各个Material Shader参数设置，务必使用插件提供的材质球Shader。修改完毕后如下图所示： + +![](Img_3.png) + + 5）然后我们选择菜单栏Egret3D-->Export-->SkinnedMesh,打开SkinnedMesh导出工具。 + +![](Img_4.png) +![](Img_5.png) + + 6）参考上图中的面板图片，接下来详细的说明一下面板上的参数用途： + a) No Vertex Color In Mesh： + 导出时，勾选此项将不输出Mesh信息内的顶点色信息，使用引擎内默认值替代，导出文件大小将得到优化。 + b) Is Resource Compressed: + 导出时，勾选此项将同时输出一份压缩格式的资源。 + c) 导出对象信息表： + Ⅰ）AnimationList：骨骼动画列表，展开后可以看到所有导出的骨骼动画名字。 + Ⅱ）Roots：根骨骼列表，可以识别常用的几个根骨骼名称，导出前需要展开确认根骨骼导出时候正确，是否存在缺失或者绑定对象错误等问题，如果存在多个 + 根骨骼需要手动添加至列表中。 + Ⅲ）SkinnedMesh：mesh导出列表，确认导出的mesh已经全部修改为插件提供的材质球Shader。 + Ⅳ）MeshInBone：如果需要在骨骼系内添加mesh，从而到达mesh跟随骨骼运动，需要手动添加mesh至该列表中。 + + 7）参数确认无误后，我们可以点击Export进行导出，本次导出我们导出了一个压缩版本和未压缩版本，接下来我们使用压缩版本来进行资源加载： + +![](Img_6.png) + + 8) 打开压缩资源目录，可以看到两个文件，character.e3dPack和character.e3dPackc，其中e3dPackc使用zip压缩，由于游览器限制问题，这里我们使用 + character.e3dPack拷贝至main目录下： + +![](Img_7.png) + + 9）测试代码： + a) Main.ts + class Main extends egret.DisplayObject { + // Canvas操作对象 + protected _egret3DCanvas: egret3d.Egret3DCanvas; + + // View3D操作对象 + protected _view3D: egret3d.View3D; + /** + * look at 摄像机控制器 。

+ * 指定摄像机看向的目标对象。

+ * 1.按下鼠标左键并移动鼠标可以使摄像机绕着目标进行旋转。

+ * 2.按下键盘的(w s a d) 可以摄像机(上 下 左 右)移动。

+ * 3.滑动鼠标滚轮可以控制摄像机的视距。

+ */ + private cameraCtl: egret3d.LookAtController; + + //加载队列 + private urlArray: Array = new Array(); + //队列加载器 + private mapLoader: egret3d.QueueLoader; + + + public constructor() { + super(); + + //创建Canvas对象。 + this._egret3DCanvas = new egret3d.Egret3DCanvas(); + //Canvas的起始坐标，页面左上角为起始坐标(0,0)。 + this._egret3DCanvas.x = 0; + this._egret3DCanvas.y = 0; + //设置Canvas页面尺寸。 + this._egret3DCanvas.width = window.innerWidth; + this._egret3DCanvas.height = window.innerHeight; + + //创建View3D对象,页面左上角为起始坐标(0,0) + this._view3D = new egret3d.View3D(0, 0, window.innerWidth, window.innerHeight); + //当前对象对视位置,其参数依次为: + //@param pos 对象的位置 + //@param target 目标的位置 + this._view3D.camera3D.lookAt(new egret3d.Vector3D(0, 0, 1000), new egret3d.Vector3D(0, 0, 0)); + //View3D的背景色设置 + this._view3D.backColor = 0xffffffff; + //将View3D添加进Canvas中 + this._egret3DCanvas.addView3D(this._view3D); + + //插入加载任务 + this.urlArray.push("resource/Main/character.e3dPack"); + this.mapLoader = new egret3d.QueueLoader(); + for (var i = 0; i < this.urlArray.length; i++) { + this.mapLoader.load(this.urlArray[i]); + } + this.mapLoader.addEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE, this.OnMapLoad, this); + + this.InitCameraCtl(); + + //启动Canvas。 + this._egret3DCanvas.start(); + this._egret3DCanvas.addEventListener(egret3d.Event3D.ENTER_FRAME, this.update, this); + + //设置window resize事件 + egret3d.Input.addEventListener(egret3d.Event3D.RESIZE, this.OnWindowResize, this); + } + + public update(e: egret3d.Event3D) { + this.cameraCtl.update(); + } + + /** + * 窗口尺寸变化事件 + */ + private OnWindowResize(e: egret3d.Event3D): void { + //重置ui大小 + this._egret3DCanvas.width = window.innerWidth; + this._egret3DCanvas.height = window.innerHeight; + this._view3D.width = window.innerWidth; + this._view3D.height = window.innerHeight; + } + + /** + * 初始化相机控制 + */ + private InitCameraCtl() { + //摄像机控制类 + this.cameraCtl = new egret3d.LookAtController(this._view3D.camera3D, new egret3d.Object3D()); + //设置目标和相机的距离 + this.cameraCtl.distance = 300; + //设置相机x轴旋转 + this.cameraCtl.rotationX = 0; + } + + ///加载完成事件 + private OnMapLoad(e: egret3d.LoaderEvent3D) { + + for (var i = 0; i < this.urlArray.length; i++) { + var role: egret3d.Role = this.mapLoader.getAsset(this.urlArray[i]); + this._view3D.addChild3D(role); + role.skeletonAnimation.play(); + } + } + + + } + + b）Index.html + + + + + Egret + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + 10）运行结果： + +![](Img_8.png) \ No newline at end of file diff --git a/Engine3D/unity/4/Img_1.png b/Engine3D/unity/4/Img_1.png new file mode 100644 index 0000000..e0b517d Binary files /dev/null and b/Engine3D/unity/4/Img_1.png differ diff --git a/Engine3D/unity/4/Img_2.png b/Engine3D/unity/4/Img_2.png new file mode 100644 index 0000000..4225a44 Binary files /dev/null and b/Engine3D/unity/4/Img_2.png differ diff --git a/Engine3D/unity/4/Img_3.png b/Engine3D/unity/4/Img_3.png new file mode 100644 index 0000000..d94512c Binary files /dev/null and b/Engine3D/unity/4/Img_3.png differ diff --git a/Engine3D/unity/4/Img_4.png b/Engine3D/unity/4/Img_4.png new file mode 100644 index 0000000..57252be Binary files /dev/null and b/Engine3D/unity/4/Img_4.png differ diff --git a/Engine3D/unity/4/Img_5.png b/Engine3D/unity/4/Img_5.png new file mode 100644 index 0000000..dd1f4dd Binary files /dev/null and b/Engine3D/unity/4/Img_5.png differ diff --git a/Engine3D/unity/4/Img_6.png b/Engine3D/unity/4/Img_6.png new file mode 100644 index 0000000..8827f0d Binary files /dev/null and b/Engine3D/unity/4/Img_6.png differ diff --git a/Engine3D/unity/4/Img_7.gif b/Engine3D/unity/4/Img_7.gif new file mode 100644 index 0000000..035aa5f Binary files /dev/null and b/Engine3D/unity/4/Img_7.gif differ diff --git a/Engine3D/unity/4/README.md b/Engine3D/unity/4/README.md new file mode 100644 index 0000000..0b12643 --- /dev/null +++ b/Engine3D/unity/4/README.md @@ -0,0 +1,208 @@ + + + 1）本篇教程将讲述如何输出EffectGroup特效组。 + 2）我们打开Example文件夹下的Example_4场景文件，目录位置如图所示： + +![](Img_1.png) + + 3）Example_4场景内如图所示： + +![](Img_2.png) + + 4）我们选中Fx_Portals_01，打开菜单栏Egret3D-->Tools-->AddEffectsGroup,为Fx_Portals_01添加EffectGroup脚本，脚本内有auto（自动播放）和 + Loop（循环）可以勾选，由于该特效制作的时候已经循环，本次的导出只勾选自动，如下图所示： + +![](Img_3.png) + + 5) 确认无误后，打开菜单栏Egret3D-->Export-->EffectGroup,打开特效组导出界面： + +![](Img_4.png) + + 6）参考上图中的面板图片，接下来详细的说明一下面板上的参数用途： + a) No Vertex Color In Mesh： + 导出时，勾选此项将不输出Mesh信息内的顶点色信息，使用引擎内默认值替代，导出文件大小将得到优化。 + b) Is Resource Compressed: + 导出时，勾选此项将同时输出一份压缩格式的资源。 + c) 导出对象信息表，这里将罗列出将要导出的所有资源。 + + 7）参数确认无误后，我们可以点击Export进行导出，本次导出我们导出了一个压缩版本和未压缩版本，接下来我们使用压缩版本来进行资源加载： + +![](Img_5.png) + + 8) 打开压缩资源目录，可以看到两个文件，effect.e3dPack和effect.e3dPackc，其中e3dPackc使用zip压缩，由于游览器限制问题，这里我们使用 + effect.e3dPack拷贝至main目录下： + +![](Img_6.png) + + 9）测试代码： + a) Main.ts + class Main extends egret.DisplayObject { + // Canvas操作对象 + protected _egret3DCanvas: egret3d.Egret3DCanvas; + + // View3D操作对象 + protected _view3D: egret3d.View3D; + /** + * look at 摄像机控制器 。

+ * 指定摄像机看向的目标对象。

+ * 1.按下鼠标左键并移动鼠标可以使摄像机绕着目标进行旋转。

+ * 2.按下键盘的(w s a d) 可以摄像机(上 下 左 右)移动。

+ * 3.滑动鼠标滚轮可以控制摄像机的视距。

+ */ + private cameraCtl: egret3d.LookAtController; + + //加载队列 + private urlArray: Array = new Array(); + //队列加载器 + private mapLoader: egret3d.QueueLoader; + + + public constructor() { + super(); + + //创建Canvas对象。 + this._egret3DCanvas = new egret3d.Egret3DCanvas(); + //Canvas的起始坐标，页面左上角为起始坐标(0,0)。 + this._egret3DCanvas.x = 0; + this._egret3DCanvas.y = 0; + //设置Canvas页面尺寸。 + this._egret3DCanvas.width = window.innerWidth; + this._egret3DCanvas.height = window.innerHeight; + + //创建View3D对象,页面左上角为起始坐标(0,0) + this._view3D = new egret3d.View3D(0, 0, window.innerWidth, window.innerHeight); + //当前对象对视位置,其参数依次为: + //@param pos 对象的位置 + //@param target 目标的位置 + this._view3D.camera3D.lookAt(new egret3d.Vector3D(0, 0, 1000), new egret3d.Vector3D(0, 0, 0)); + //View3D的背景色设置 + this._view3D.backColor = 0xffffffff; + //将View3D添加进Canvas中 + this._egret3DCanvas.addView3D(this._view3D); + + //插入加载任务 + this.urlArray.push("resource/Main/effect.e3dPack"); + this.mapLoader = new egret3d.QueueLoader(); + for (var i = 0; i < this.urlArray.length; i++) { + this.mapLoader.load(this.urlArray[i]); + } + this.mapLoader.addEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE, this.OnMapLoad, this); + + this.InitCameraCtl(); + + //启动Canvas。 + this._egret3DCanvas.start(); + this._egret3DCanvas.addEventListener(egret3d.Event3D.ENTER_FRAME, this.update, this); + + //设置window resize事件 + egret3d.Input.addEventListener(egret3d.Event3D.RESIZE, this.OnWindowResize, this); + } + + public update(e: egret3d.Event3D) { + this.cameraCtl.update(); + } + + /** + * 窗口尺寸变化事件 + */ + private OnWindowResize(e: egret3d.Event3D): void { + //重置ui大小 + this._egret3DCanvas.width = window.innerWidth; + this._egret3DCanvas.height = window.innerHeight; + this._view3D.width = window.innerWidth; + this._view3D.height = window.innerHeight; + } + + /** + * 初始化相机控制 + */ + private InitCameraCtl() { + //摄像机控制类 + this.cameraCtl = new egret3d.LookAtController(this._view3D.camera3D, new egret3d.Object3D()); + //设置目标和相机的距离 + this.cameraCtl.distance = 300; + //设置相机x轴旋转 + this.cameraCtl.rotationX = 0; + } + + ///加载完成事件 + private OnMapLoad(e: egret3d.LoaderEvent3D) { + + for (var i = 0; i < this.urlArray.length; i++) { + var node: egret3d.Object3D = this.mapLoader.getAsset(this.urlArray[i]); + this._view3D.addChild3D(node); + } + } + + + } + + b）Index.html + + + + + Egret + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + 10）运行结果： + +![](Img_7.gif) \ No newline at end of file diff --git a/Engine3D/unity/5/Img_1.png b/Engine3D/unity/5/Img_1.png new file mode 100644 index 0000000..71a3b12 Binary files /dev/null and b/Engine3D/unity/5/Img_1.png differ diff --git a/Engine3D/unity/5/Img_10.png b/Engine3D/unity/5/Img_10.png new file mode 100644 index 0000000..2afb7e3 Binary files /dev/null and b/Engine3D/unity/5/Img_10.png differ diff --git a/Engine3D/unity/5/Img_11.png b/Engine3D/unity/5/Img_11.png new file mode 100644 index 0000000..93e2b39 Binary files /dev/null and b/Engine3D/unity/5/Img_11.png differ diff --git a/Engine3D/unity/5/Img_12.png b/Engine3D/unity/5/Img_12.png new file mode 100644 index 0000000..27c2c5d Binary files /dev/null and b/Engine3D/unity/5/Img_12.png differ diff --git a/Engine3D/unity/5/Img_2.png b/Engine3D/unity/5/Img_2.png new file mode 100644 index 0000000..ec38c78 Binary files /dev/null and b/Engine3D/unity/5/Img_2.png differ diff --git a/Engine3D/unity/5/Img_3.gif b/Engine3D/unity/5/Img_3.gif new file mode 100644 index 0000000..26c5866 Binary files /dev/null and b/Engine3D/unity/5/Img_3.gif differ diff --git a/Engine3D/unity/5/Img_4.png b/Engine3D/unity/5/Img_4.png new file mode 100644 index 0000000..b09f8fc Binary files /dev/null and b/Engine3D/unity/5/Img_4.png differ diff --git a/Engine3D/unity/5/Img_5.png b/Engine3D/unity/5/Img_5.png new file mode 100644 index 0000000..759e236 Binary files /dev/null and b/Engine3D/unity/5/Img_5.png differ diff --git a/Engine3D/unity/5/Img_6.png b/Engine3D/unity/5/Img_6.png new file mode 100644 index 0000000..59dee2a Binary files /dev/null and b/Engine3D/unity/5/Img_6.png differ diff --git a/Engine3D/unity/5/Img_7.png b/Engine3D/unity/5/Img_7.png new file mode 100644 index 0000000..b7758e1 Binary files /dev/null and b/Engine3D/unity/5/Img_7.png differ diff --git a/Engine3D/unity/5/Img_8.png b/Engine3D/unity/5/Img_8.png new file mode 100644 index 0000000..4f6fa9f Binary files /dev/null and b/Engine3D/unity/5/Img_8.png differ diff --git a/Engine3D/unity/5/Img_9.png b/Engine3D/unity/5/Img_9.png new file mode 100644 index 0000000..c0d93c0 Binary files /dev/null and b/Engine3D/unity/5/Img_9.png differ diff --git a/Engine3D/unity/5/README.md b/Engine3D/unity/5/README.md new file mode 100644 index 0000000..a993ad1 --- /dev/null +++ b/Engine3D/unity/5/README.md @@ -0,0 +1,53 @@ + + + 1）前面的教程已经详细的介绍插件各种导出功能，本教程将导出一个烘培过的地形场景。 + 2）我们打开Example文件夹下的Example_5场景文件，目录位置如图所示： + +![](Img_1.png) + + 3）场景内容如图示： + +![](Img_2.png) + + a) Tow_Crystal1节点： + 该节点为一个属性动画节点，节点包含一个旋转动画控制水晶旋转。该对象导出后会导出一个epa后缀文件保存属性动画信息，当前版本的暂时只支持animator动画 + 组件，支持循环动画和自动播放。其中循环播放需要勾选下图中的选项： + +![](Img_3.gif) +![](Img_4.png) + + b) Terrain节点 + 该节点是一个地形节点，是通过unity的地形绘制器生成地形信息组件，但是有一些限制需要导出前确认，首先PaintTexture图片个数不能超过四个， + 超出部分无法导出。 下图为烘培过光照贴图后的地形示例： + +![](Img_5.png) + + c）new节点 + 该节点是静态Mesh节点群，unity3D内该节点将勾选Static选项，导出时候勾选Using Batching进行合并导出，从而优化性能，但是Batching后就无法动态 + 修改，导出参数设置可以参考Mesh导出和Material设置部分教程。 + +![](Img_6.png) + + d) Fx_Portals_01 和 Fx_TowerExplode_01 节点 + 这两个节点都是特效组节点，可以作为特效组被场景导出，也可以作为单独特效进行导出。这里为了方便控制我们分别为其添加了特效组导出脚本，详细导出步 + 骤可以参看EffectGroup导出教程部分。 + +![](Img_7.png) + + e) 光照贴图部分 + 打开菜单栏Window-->LightMapping,我们可以看到场景烘培的详细信息，暂时只支持Mode为Single Lightmaps模式下的unity3d光照贴图烘培信息导出， + +![](Img_8.png) + + 4）然后我们选择菜单栏Egret3D-->Export-->Scene步骤打开导出场景功能块，这里我们勾选了Using Batching来对场景内的静态内容进行优化。 + +![](Img_9.png) + + 5）点击Export开始导出，导出完毕后，我们将会获取到一个压缩格式和非压缩格式的场景文件。 + +![](Img_10.png) + + 6）我们打开压缩格式的目录信息，内容是由三部分组成的：图片内容，scene.e3dPack和scene.e3dPackc。这里我们拷贝图片内容和scene.e3dPack来进行内容演示。 + +![](Img_11.png) +![](Img_12.png) diff --git a/Engine3D/unity/6/Img_1.png b/Engine3D/unity/6/Img_1.png new file mode 100644 index 0000000..bcaa651 Binary files /dev/null and b/Engine3D/unity/6/Img_1.png differ diff --git a/Engine3D/unity/6/Img_10.png b/Engine3D/unity/6/Img_10.png new file mode 100644 index 0000000..13c533a Binary files /dev/null and b/Engine3D/unity/6/Img_10.png differ diff --git a/Engine3D/unity/6/Img_11.png b/Engine3D/unity/6/Img_11.png new file mode 100644 index 0000000..ca54a6f Binary files /dev/null and b/Engine3D/unity/6/Img_11.png differ diff --git a/Engine3D/unity/6/Img_12.png b/Engine3D/unity/6/Img_12.png new file mode 100644 index 0000000..0c61c7c Binary files /dev/null and b/Engine3D/unity/6/Img_12.png differ diff --git a/Engine3D/unity/6/Img_2.png b/Engine3D/unity/6/Img_2.png new file mode 100644 index 0000000..46658f4 Binary files /dev/null and b/Engine3D/unity/6/Img_2.png differ diff --git a/Engine3D/unity/6/Img_3.png b/Engine3D/unity/6/Img_3.png new file mode 100644 index 0000000..89a1315 Binary files /dev/null and b/Engine3D/unity/6/Img_3.png differ diff --git a/Engine3D/unity/6/Img_4.png b/Engine3D/unity/6/Img_4.png new file mode 100644 index 0000000..058272b Binary files /dev/null and b/Engine3D/unity/6/Img_4.png differ diff --git a/Engine3D/unity/6/Img_5.png b/Engine3D/unity/6/Img_5.png new file mode 100644 index 0000000..0f7fba4 Binary files /dev/null and b/Engine3D/unity/6/Img_5.png differ diff --git a/Engine3D/unity/6/Img_6.png b/Engine3D/unity/6/Img_6.png new file mode 100644 index 0000000..9c55058 Binary files /dev/null and b/Engine3D/unity/6/Img_6.png differ diff --git a/Engine3D/unity/6/Img_7.png b/Engine3D/unity/6/Img_7.png new file mode 100644 index 0000000..3e8ff40 Binary files /dev/null and b/Engine3D/unity/6/Img_7.png differ diff --git a/Engine3D/unity/6/Img_8.png b/Engine3D/unity/6/Img_8.png new file mode 100644 index 0000000..c55e01f Binary files /dev/null and b/Engine3D/unity/6/Img_8.png differ diff --git a/Engine3D/unity/6/README.md b/Engine3D/unity/6/README.md new file mode 100644 index 0000000..f2b7100 --- /dev/null +++ b/Engine3D/unity/6/README.md @@ -0,0 +1,43 @@ + + + 1）前面我们已经完整的导出了整个场景的内容，接下来我们继续了解使用unity3d粒子系统导出时候所需要注意的事项。 + 2）我们打开Example文件夹下的Example_6场景文件，目录位置如图所示： + +![](Img_1.png) + + 3）场景内存在一个粒子对象，是一个默认的粒子对象，我们首先看一下Unity3D粒子编辑器的样式。 + +![](Img_2.png) + + 4）unity3D 为用户提供了强大的粒子编辑功能，然后在使用unity3d粒子导出功能的时候，由于平台不同，会存在不少需要注意的地方： + a) 不要使用unity编辑器内自带资源，否则将出现无法导出的情况。 + b) 子粒子发射器仅支持在Birth阶段事件触发，使用子粒子发射器需要给粒子对象挂载子粒子脚本，可以选中父粒子发射器后使用菜单栏Egret3D-->Tools--> + AddSubParticle，填写子粒子信息。 + +![](Img_3.png) +![](Img_4.png) + + c) 其中Emission和Render为必备的节点，请确保该节点处于勾选中的状态， + +![](Img_5.png) + + d）不支持：Color by Speed,Size by Speed,Rotation by Speed,External Forces和Collision等模块。 + +![](Img_6.png) + + e) Render模块内中尚未支持的属性。 + +![](Img_7.png) + + f) 控制粒子的最大数量： webgl中顶点长度有上限。 + g) 编辑贝塞尔曲线的时候，曲线不要超过两段。下图为举例说明2段贝塞尔曲线的情况,如果使用直线线则不受段数限制; + +![](Img_8.png) + + h) 谨慎使用Space为world类型的粒子，这种类型的粒子会使用CPU检测更新顶点数据，导致渲染效率下降。 + +![](Img_10.png) +![](Img_11.png) +![](Img_12.png) + + 4) 可以在场景内直接导出，也可以作为EffectGroup导出。 \ No newline at end of file diff --git a/Engine3D/unity/7/Img_1.png b/Engine3D/unity/7/Img_1.png new file mode 100644 index 0000000..ef91474 Binary files /dev/null and b/Engine3D/unity/7/Img_1.png differ diff --git a/Engine3D/unity/7/Img_2.png b/Engine3D/unity/7/Img_2.png new file mode 100644 index 0000000..a668f26 Binary files /dev/null and b/Engine3D/unity/7/Img_2.png differ diff --git a/Engine3D/unity/7/Img_3.png b/Engine3D/unity/7/Img_3.png new file mode 100644 index 0000000..f91772a Binary files /dev/null and b/Engine3D/unity/7/Img_3.png differ diff --git a/Engine3D/unity/7/Img_4.png b/Engine3D/unity/7/Img_4.png new file mode 100644 index 0000000..9cc20c2 Binary files /dev/null and b/Engine3D/unity/7/Img_4.png differ diff --git a/Engine3D/unity/7/Img_5.png b/Engine3D/unity/7/Img_5.png new file mode 100644 index 0000000..b1ec6df Binary files /dev/null and b/Engine3D/unity/7/Img_5.png differ diff --git a/Engine3D/unity/7/Img_6.png b/Engine3D/unity/7/Img_6.png new file mode 100644 index 0000000..1eebf3c Binary files /dev/null and b/Engine3D/unity/7/Img_6.png differ diff --git a/Engine3D/unity/7/Img_7.gif b/Engine3D/unity/7/Img_7.gif new file mode 100644 index 0000000..7e52743 Binary files /dev/null and b/Engine3D/unity/7/Img_7.gif differ diff --git a/Engine3D/unity/7/Img_8.gif b/Engine3D/unity/7/Img_8.gif new file mode 100644 index 0000000..eed63db Binary files /dev/null and b/Engine3D/unity/7/Img_8.gif differ diff --git a/Engine3D/unity/7/Img_9.png b/Engine3D/unity/7/Img_9.png new file mode 100644 index 0000000..9407ad0 Binary files /dev/null and b/Engine3D/unity/7/Img_9.png differ diff --git a/Engine3D/unity/7/README.md b/Engine3D/unity/7/README.md new file mode 100644 index 0000000..bcd1930 --- /dev/null +++ b/Engine3D/unity/7/README.md @@ -0,0 +1,48 @@ + + + 1）前面我们已经完整的导出了整个场景的内容，接下来我们将导出寻路功能中的网格数据，这部分数据也是通过unity插件内功能实现导出的。 + 2）我们打开Example文件夹下的Example_7场景文件，目录位置如图所示： + +![](Img_1.png) + + 3）场景内容如图示： + +![](Img_2.png) + + 4）然后我们选择菜单栏Egret3D-->Export-->ExportNavGrid步骤打开导出场景功能块。 + +![](Img_3.png) + + 5）功能界面如下图，详细参数说明： + a) terrain: 导出nav地形数据的地形组件对象，初始值为第一个索引到的地形组件。 + b) gridRoot: 绘制后生成的地形数据根节点，一般不做修改，初始值为空。 + c) gridWidth: 绘制网格的宽，一般使用默认值。 + d) gridHeight: 绘制网格的高，一般使用默认值。 + e) gridRow： 地形宽的格子总数，一般使用默认值。 + f) gridCol： 地形长的格子总数，一般使用默认值。 + g) 当全部使用默认值导出时，即生成一个和地形大小近似的网格，单个网格大小约为1m*1m。 + +![](Img_4.png) + + h) 需要注意的是，请确保terrain组件对象的transform信息为默认值，如下图所示： + +![](Img_5.png) + + 6）确认参数无误后，点击InitGrid按钮生成网格。 + +![](Img_6.png) + + 7）鼠标点击选中sence内的网格，就可以开始绘制网格数据。 + a) 按住按键1后滑动鼠标，可以绘制可行走区域。 + +![](Img_7.gif) + + b) 按住按键3后滑动鼠标，可以取消可行走区域。 + +![](Img_8.gif) + + 8）绘制完成后，可以点击ExportNavMethod导出nav数据，文件名为场景名+.nav，保存位置如下图所示： + +![](Img_9.png) + + 9）数据导出测试无误后，可以手动设置Grid(Clone)对象active为false，也可以使用DelGrid删除地形数据。 \ No newline at end of file diff --git a/Engine3D/update/update300/567d1701cfd0f.jpg b/Engine3D/update/update300/567d1701cfd0f.jpg new file mode 100644 index 0000000..0a8161c Binary files /dev/null and b/Engine3D/update/update300/567d1701cfd0f.jpg differ diff --git a/Engine3D/update/update300/README.md b/Engine3D/update/update300/README.md new file mode 100644 index 0000000..45fb859 --- /dev/null +++ b/Engine3D/update/update300/README.md @@ -0,0 +1,33 @@ +![](567d1701cfd0f.jpg) + +Egret Engine 3.0 包含了白鹭时代研发的遵循HTML5标准的2D引擎及全新打造的3D引擎，它解决了HTML5性能问题及碎片化问题，灵活地满足开发者开发2D或3D游戏的需求，并有着极强的跨平台运行能力。 + +在 Egret Engine 3.0 中包含了 Egret Engine 3D 和 Egret Engine 2D 两部分，以后会融合在一起，形成完整统一的 Egret Engine。 + +## Egret Engine 3D + +现在 Egret Engine3D 开放体验，可以通过[Egret Engine 3D](https://github.com/egret-labs/egret-3d)获取到 Egret Engine 3D 的源码。也可以在 EDN 上查阅 [Egret Engine 3D API](http://edn.egret.com/cn/apidoc/index/name/egret3d.AudioManager)。更多关于 Egret Engine 3D 的教程欢迎关注 EDN [Egret Engine 3D 分类](http://edn.egret.com/cn/docs/page/775)。 + +在体验的过程中如果遇到任何问题希望您能留下宝贵意见，更欢迎大家在 Egret 论坛交流:[Egret3D 交流贴](http://bbs.egret.com/forum.php?mod=viewthread&tid=15653)。 + +Egret Engine 3D 官方交流群: 180593985 。 + +### Egret Engine 3D 新功能 +---- ------------------------ +#### • 模型系统 +Egret Engine 3D，并提供了 [3Dmax 导出插件](https://github.com/egret-labs/egret-3d/tree/master/3Dmax%20Export%20tool)，也就是说支持任意3D模型格式。 + +#### • 材质系统 +可以根据自己的渲染风格，灵活的通过调整参数或增加材质特效的方式对材质进行编辑。 + +#### • 灯光系统 +支持 TBN 直接光照系统，未来还会支持间接光照，提高光影效果。 + +#### • 动画系统 +支持了 3Dmax 中高级骨骼动画及相机动画，满足绝大部分游戏需要。 + +#### • shadow系统（阴影系统） +支持 shadowmaping 的方式投射纹理,可自定义阴影颜色,透明度,提高渲染质量,增强视觉效果 + +#### • shader系统 +基于OpenGL ES2.0 标准的原生 WebGL shader，并与引擎功能紧密结合及拓展。为未来的shader编辑器做好了铺垫。 diff --git a/Engine3D/update/update301/569369d1afb0a.jpg b/Engine3D/update/update301/569369d1afb0a.jpg new file mode 100644 index 0000000..260bcea Binary files /dev/null and b/Engine3D/update/update301/569369d1afb0a.jpg differ diff --git a/Engine3D/update/update301/README.md b/Engine3D/update/update301/README.md new file mode 100644 index 0000000..5c5a7da --- /dev/null +++ b/Engine3D/update/update301/README.md @@ -0,0 +1,51 @@ +![](569369d1afb0a.jpg) + +Egret Engine 3.0 包含了白鹭时代研发的遵循HTML5标准的2D引擎及全新打造的3D引擎，它解决了HTML5性能问题及碎片化问题，灵活地满足开发者开发2D或3D游戏的需求，并有着极强的跨平台运行能力。 + +在 Egret Engine 3.0 中包含了 Egret Engine 3D 和 Egret Engine 2D 两部分，以后会融合在一起，形成完整统一的 Egret Engine。 + +下面介绍 Egret Engine 3.0.0 到 Egret Engine 3.0.1 之间的更新详情。 + +## Egret Engine 3D + +Egret Engine 3D 在本次更新中主要关注于以下方面： + +* 完善3D引擎功能及修复已有问题 +* 完善3D功能示例 +* 完善API描述 + +### 更新内容 + +Egret Engine 3.0是全新的3D渲染引擎，在本次更新中我们吸收了开发者提供的建议，修改了以下内容 + +* 显示列表优化 新增 Scene3D + 新增Scene3D 场景显示列表管理类，方便拓展场景渲染树 +* billbord 公告板 + 新增的BillBoard 是一个永远面对摄像机的显示对象 +* object3D 按轴旋转 + 让所有继承于Object3D 的对象可以自定义偏移的旋转轴 +* Directlight 增加背光 + DirectLight新增背光及背光强度的接口，提高实时渲染灯光效果 +* 新增AOMapMethod 环境光吸收贴图 材质球方法 + 添加的AOMapMethod可以将使用渲染工具烘焙的AO贴图添加到材质球上，极大地优化显示效果 + +### 新增五款示例 + +* [场景加载](http://edn.egret.com/cn/article/index/id/805) +* [地形融合](http://edn.egret.com/cn/article/index/id/812) +* [模型材质](http://edn.egret.com/cn/article/index/id/814) +* [360全景照片](http://edn.egret.com/cn/article/index/id/813) +* [高级角色材质渲染](http://edn.egret.com/cn/article/index/id/804) + +### 联系我们 + +获取 Egret Engine 3D 的源码: [Egret Engine 3D](https://github.com/egret-labs/egret-3d)。 + +查阅 Egret Engine 3D API: [Egret Engine 3D API](http://edn.egret.com/cn/apidoc/index/name/egret3D.AnimaNodeCollection)。 + +更多关于 Egret Engine 3D 的教程欢迎关注 EDN [Egret Engine 3D 分类](http://edn.egret.com/cn/docs/page/775)。 + +在体验的过程中如果遇到任何问题希望您能留下宝贵意见，更欢迎大家在 Egret Engine 3D 论坛交流:[Egret3D 交流贴](http://bbs.egret.com/forum.php?mod=viewthread&tid=15653)。 + +Egret Engine 3D 官方交流群: 180593985 。 + diff --git a/Engine3D/update/update302/56a5917e4a724.jpg b/Engine3D/update/update302/56a5917e4a724.jpg new file mode 100644 index 0000000..4631b45 Binary files /dev/null and b/Engine3D/update/update302/56a5917e4a724.jpg differ diff --git a/Engine3D/update/update302/README.md b/Engine3D/update/update302/README.md new file mode 100644 index 0000000..a1a0800 --- /dev/null +++ b/Engine3D/update/update302/README.md @@ -0,0 +1,51 @@ +![](56a5917e4a724.jpg) + +Egret Engine 3.0 包含了白鹭时代研发的遵循HTML5标准的2D引擎及全新打造的3D引擎，它解决了HTML5性能问题及碎片化问题，灵活地满足开发者开发2D或3D游戏的需求，并有着极强的跨平台运行能力。 + +在 Egret Engine 3.0 中包含了 Egret Engine 3D 和 Egret Engine 2D 两部分，以后会融合在一起，形成完整统一的 Egret Engine。 + +下面介绍 Egret Engine 3.0.1 到 Egret Engine 3.0.2 之间的更新详情。 + +### Egret Engine 3D + +在 Egret Engien 3D 的本次更新中，新增了一些效果和功能，并且初步与 Egret EUI 混合。下面将逐一介绍相关更新详情: + +* 新增 `carpaint` 材质 + + 汽车油漆材质特效 `PaintFresnelReflectionMappingMethod` + + **使用最新的汽车油漆材质特效打造 F1 酷炫的赛车，请参考示例：[F1 战车](http://edn.egret.com/cn/article/index/id/823) ** + +* 新增 `Object3D` 轴向偏移 + + 动态偏移 `Object3D` 运动轴向，直接获取在屏幕的映射坐标 + +* 新增 `HoverController` 相机控制器 + + `HoverController` 是新增的摄像机控制器 ,实现摄像机平滑移动指定摄像机看向的目标对象。 + +* 新增 `VideoTexture` + + 添加了支持少量格式的 `VideoTexture`。VideoTexture 使用 Video 标签采集视频，支持 Html5 标准的视频格式:ogv,mp4,avi。可以将采集的视频贴图上传至 GPU。 + +* 新增用 tsconfig 调试 + + 加载独立文件调试引擎需要通过 `egret3d.Egret3DEngine.preload(() => this.startDebugModeEngine());`来启动调试引擎 + +* 初步融合 Egret Engine 2D EUI 与 Egret Engine 3D + + 显示顺序 EUI/Egret3D egret2D 永远在上层的传统模式。参考 EUI-Egret3D 案例:[EUI-Egret3D](https://github.com/egret-labs/egret-3d/tree/master/Sample-wing-blend-egret2d/EUI-Egret3D) + + 使用Egret Wing 运行示例请参考：[使用 Egret Wing 运行示例](http://edn.egret.com/cn/docs/page/830) + +#### 联系我们 + +获取 Egret Engine 3D 的源码: [Egret Engine 3D](https://github.com/egret-labs/egret-3d)。 + +查阅 Egret Engine 3D API: [Egret Engine 3D API](http://edn.egret.com/cn/apidoc/index/name/egret3D.AnimaNodeCollection)。 + +更多关于 Egret Engine 3D 的教程欢迎关注 EDN [Egret Engine 3D 分类](http://edn.egret.com/cn/docs/page/775)。 + +在体验的过程中如果遇到任何问题希望您能留下宝贵意见，更欢迎大家在 Egret Engine 3D 论坛交流:[Egret3D 交流贴](http://bbs.egret.com/forum.php?mod=viewthread&tid=15653)。 + +Egret Engine 3D 官方交流群: 180593985 。 diff --git a/Engine3D/update/update303/56ca77219889c.PNG b/Engine3D/update/update303/56ca77219889c.PNG new file mode 100644 index 0000000..b87d089 Binary files /dev/null and b/Engine3D/update/update303/56ca77219889c.PNG differ diff --git a/Engine3D/update/update303/README.md b/Engine3D/update/update303/README.md new file mode 100644 index 0000000..ccfc164 --- /dev/null +++ b/Engine3D/update/update303/README.md @@ -0,0 +1,25 @@ +Egret Engine 3.0 包含了白鹭时代研发的遵循HTML5标准的2D引擎及全新打造的3D引擎，它解决了HTML5性能问题及碎片化问题，灵活地满足开发者开发2D或3D游戏的需求，并有着极强的跨平台运行能力。 + +下面介绍 Egret Engine 3.0.2 到 Egret Engine 3.0.3 之间的更新详情。 + +### Egret Engine 3D + +在 Egret Engine 3D 春节后的第一个版本中,主要修复了一些问题,下面汇总了本次更新的改动: + +1. 修复 MaterialData.clone 赋值错误的问题 +2. 修复 View3D.delHUD 删除对象没有做检测的问题。 +3. 修复骨骼动画回调的问题。 +4. 修改 Input 内部事件注册方式。 +5. 修改 canvas 的 zIndex 使 Egret Engine 3D 和 Egret Engine 2D 能够一起正常显示。 + +#### 联系我们 + +获取 Egret Engine 3D 的源码: [Egret Engine 3D](https://github.com/egret-labs/egret-3d)。 + +查阅 Egret Engine 3D API: [Egret Engine 3D API](http://edn.egret.com/cn/apidoc/index/name/egret3D.AnimaNodeCollection)。 + +更多关于 Egret Engine 3D 的教程欢迎关注 EDN [Egret Engine 3D 分类](http://edn.egret.com/cn/docs/page/775)。 + +在体验的过程中如果遇到任何问题希望您能留下宝贵意见，更欢迎大家在 Egret Engine 3D 论坛交流:[Egret3D 交流贴](http://bbs.egret.com/forum.php?mod=viewthread&tid=15653)。 + +Egret Engine 3D 官方交流群: 180593985 。 diff --git a/Engine3D/update/update304/README.md b/Engine3D/update/update304/README.md new file mode 100644 index 0000000..8bc1a8a --- /dev/null +++ b/Engine3D/update/update304/README.md @@ -0,0 +1,21 @@ +Egret Engine 3.0 包含了白鹭时代研发的遵循HTML5标准的2D引擎及全新打造的3D引擎，它解决了HTML5性能问题及碎片化问题，灵活地满足开发者开发2D或3D游戏的需求，并有着极强的跨平台运行能力。 + +下面介绍 Egret Engine 3.0.3 到 Egret Engine 3.0.4 之间的更新详情。 + + +### Egret Engine 3D + +近期 Egret Engine 3D 正在进行重构，本期没有内容更新。 + +#### 联系我们 + +获取 Egret Engine 3D 的源码: [Egret Engine 3D](https://github.com/egret-labs/egret-3d)。 + +查阅 Egret Engine 3D API: [Egret Engine 3D API](http://edn.egret.com/cn/apidoc/index/name/egret3D.AnimaNodeCollection)。 + +更多关于 Egret Engine 3D 的教程欢迎关注 EDN [Egret Engine 3D 分类](http://edn.egret.com/cn/docs/page/775)。 + +在体验的过程中如果遇到任何问题希望您能留下宝贵意见，更欢迎大家在 Egret Engine 3D 论坛交流:[Egret3D 交流贴](http://bbs.egret.com/forum.php?mod=viewthread&tid=15653)。 + +Egret Engine 3D 官方交流群: 180593985 。 + diff --git a/Engine3D/update/update305/README.md b/Engine3D/update/update305/README.md new file mode 100644 index 0000000..17908f0 --- /dev/null +++ b/Engine3D/update/update305/README.md @@ -0,0 +1,35 @@ +Egret Engine 3.0 包含了白鹭时代研发的遵循HTML5标准的2D引擎及全新打造的3D引擎，它解决了HTML5性能问题及碎片化问题，灵活地满足开发者开发2D或3D游戏的需求，并有着极强的跨平台运行能力。 + +下面介绍 Egret Engine 3.0.4 到 Egret Engine 3.0.5 之间的更新详情。 + + +### Egret Engine 3D + +在 Egret Engine 3D 的 本次更新中，我们吸收开发者提供的反馈和建议，修复了一些问题。 + +#### 修复问题 + +* 修复切换模型贴图的问题。 +* 修复骨骼动画法线没有计算的问题。 + +#### 联系我们 + +[获取 Egret Engine 3D 的源码](https://github.com/egret-labs/egret-3d)。 + +[Egret Engine 3D API](http://edn.egret.com/cn/apidoc/index/name/egret3D.AnimaNodeCollection)。 + +更多关于 Egret Engine 3D 的教程欢迎关注 EDN [Egret Engine 3D 分类](http://edn.egret.com/cn/docs/page/775)。 + +在体验的过程中如果遇到任何问题希望您能留下宝贵意见，更欢迎大家在 Egret Engine 3D 论坛交流:[Egret3D 交流贴](http://bbs.egret.com/forum.php?mod=viewthread&tid=15653)。 + +Egret Engine 3D 官方交流群: 180593985 。 + +Egret Engine 2D 最新官方交流群: 343030940 。 + +### 获取 Egret Engine + +Windows 安装包下载地址：[点击这里](http://tool.egret-labs.org/EgretEngine/EgretEngine-v3.0.5.exe) +Mac 安装包下载地址： [点击这里](http://tool.egret-labs.org/EgretEngine/EgretEngine-v3.0.5.dmg) +Egret Engine 2D 源码地址：[点击这里](https://github.com/egret-labs/egret-core/tree/v3.0.5) +Egret Engine 3D 源码地址：[点击这里](https://github.com/egret-labs/egret-3d) + diff --git a/Engine3D/update/update306/5704e709845a4.JPG b/Engine3D/update/update306/5704e709845a4.JPG new file mode 100644 index 0000000..418799c Binary files /dev/null and b/Engine3D/update/update306/5704e709845a4.JPG differ diff --git a/Engine3D/update/update306/README.md b/Engine3D/update/update306/README.md new file mode 100644 index 0000000..16e9ccc --- /dev/null +++ b/Engine3D/update/update306/README.md @@ -0,0 +1,45 @@ +![](5704e709845a4.JPG) + +Egret Engine 3.0 包含了白鹭时代研发的遵循HTML5标准的2D引擎及全新打造的3D引擎，它解决了HTML5性能问题及碎片化问题，灵活地满足开发者开发2D或3D游戏的需求，并有着极强的跨平台运行能力。 + +在 Egret Engine 3.0.6 中，我们大幅度更新了 Egret Engine 3D 的内容，使得引擎更加完善，高效和易用。同时在 Egret Engine 2D 中推出 WebGL 渲染支持，可以灵活选用渲染模式。下面介绍 Egret Engine 3.0.5 到 Egret Engine 3.0.6 之间的更新详情。 + +### Egret Engine 3D + +为了让egret3D更加强大，故收集大多数意见，在稳定版来临之时，我们将修改更高级层次的引擎，性能更高，api更简易，功能更强大。 + +#### 新增特性 + +* 优化渲染框架，提升至少30%性能。 + +* 优化shader使用方式。 + +* 增加Egret3DCnavas 支持多View3D显示方式，意味着你可以多窗口显示模型。 + +* geometry 支持多子模型，多材质ID。 + +* material 支持多维材质，并支持多pass渲染（比如 normal，depth 渲染）。 + +* skeleton animation 支持46+骨骼动画。 + +* shader 内加载方式，减少HTTP请求数量。 + +* 增加 billboard 公告板 , 永远面对摄像机的显示面片。 + +* 增加优化 材质特效使用方式。 + +* 增加 材质 Blender。 + +* 增加 材质 透明剔除阈值。 + +* 与egret2D较好支持混合。 + +#### 新增教程 + +在更新引擎的同时我们提供了新的教程，并将逐步完善。 + +您可以从入门教程开始学习：[Egret3D入门](http://edn.egret.com/cn/docs/page/906) + +更深入的API学习可以点击：[Egret3D API](http://edn.egret.com/cn/apidoc/index/name/egret3d.AudioManager) + + diff --git a/Engine3D/update/update307/README.md b/Engine3D/update/update307/README.md new file mode 100644 index 0000000..4648ba0 --- /dev/null +++ b/Engine3D/update/update307/README.md @@ -0,0 +1,46 @@ +Egret Engine 3.0 包含了白鹭时代研发的遵循HTML5标准的 2D 引擎及全新打造的 3D 引擎，它解决了 HTML5 性能问题及碎片化问题，灵活地满足开发者开发 2D 或 3D 游戏的需求，并有着极强的跨平台运行能力。 + +在 Egret Engine 3.0.7 中，我们更新了 Egret Engine 3D 的内容，使得引擎更加完善，高效和易用。同时 Egret Engine 2D 支持在 WebGL 渲染模式下使用自动脏矩形。下面介绍 Egret Engine 3.0.6 到 Egret Engine 3.0.7 之间的更新详情。 + +### Egret Engine 3D + +在 Egret Engine 3D 的本次更新中，我们增加了一些新功能并修复若干问题。下面列出的是 3.0.6 到 3.0.7 的更新详情。 + +#### 新增内容 + +* [增加 UV 滚动动画](http://edn.egret.com/cn/apidoc/index/name/egret3d.UVRollMethod) + + 通过 Egret Engine 3D 新增的 UVRollMethod 类可以用来实现 UV 滚动效果。通过设置 UV 滚动动画可以实现流动的水或岩浆等效果。 + 使用 UVRollMethod 制作 UV 滚动动画,参考：[UV 滚动动画效果示例](http://edn.egret.com/cn/portal/article/index/id/931) + +* [增加 UV 精灵动画](http://edn.egret.com/cn/apidoc/index/name/egret3d.UVSpriteSheetMethod) + + 新增的 UVSpriteSheetMethod 类用来实现UV精灵动画的渲染方法 。UV 精灵动画是将一整张贴图中用行列来分割帧动画，然后实现每帧播放。其行数 × 列数是总帧数。可以通过设置 frameNum 来控制只播放的帧数。 + 使用 UVSpriteSheetMethod 制作 UV 精灵动画，参考：[UV 精灵动画效果示例](http://edn.egret.com/cn/portal/article/index/id/932) + +* [新增AOMap贴图](http://edn.egret.com/cn/apidoc/index/name/egret3d.AOMapMethod) + + 新增 AOMapMethod 类，可以使用渲染好的 AO 贴图进行渲染，增加渲染表现效果。 + +* [新增地形贴图混合](http://edn.egret.com/cn/apidoc/index/name/egret3d.TerrainARGBMethod) + + 新增 TerrainARGBMethod 类，地形贴图混合渲染方法。使用一张贴图中的ARGB色来进行4张贴图进行混合。 + +* [新增 Exponential Height Fog（顶点雾）功能](http://edn.egret.com/cn/apidoc/index/name/egret3d.FogMethod) + + 新增 FogMethod，使用新增的 FogMethod 类可以创建 Exponential Height Fog（顶点雾）渲染。 + +#### 修复问题 + +* 修复了检测碰撞没有作用的 BUG。 +* 修复加载多个模型在场景中会出现异常的 BUG。 +* 修复当场景中物体时摄像机会在一个位置看不到物体的 BUG。 +* 修复渲染线框由于顶点过多导致无法渲染的 BUG。 + +#### 教程文档 + +在更新引擎的同时我们提供了新的教程，并将逐步完善。 + +您可以从入门教程开始学习：[Egret3D入门](http://edn.egret.com/cn/docs/page/906) + +更深入的API学习可以点击：[Egret3D API](http://edn.egret.com/cn/apidoc/index/name/egret3d.AudioManager) diff --git a/Engine3D/update/update308/57285db024898.png b/Engine3D/update/update308/57285db024898.png new file mode 100644 index 0000000..70230c3 Binary files /dev/null and b/Engine3D/update/update308/57285db024898.png differ diff --git a/Engine3D/update/update308/57285db8011fb.png b/Engine3D/update/update308/57285db8011fb.png new file mode 100644 index 0000000..fa98d47 Binary files /dev/null and b/Engine3D/update/update308/57285db8011fb.png differ diff --git a/Engine3D/update/update308/57285dc4bd92e.png b/Engine3D/update/update308/57285dc4bd92e.png new file mode 100644 index 0000000..c3c849a Binary files /dev/null and b/Engine3D/update/update308/57285dc4bd92e.png differ diff --git a/Engine3D/update/update308/README.md b/Engine3D/update/update308/README.md new file mode 100644 index 0000000..428f00c --- /dev/null +++ b/Engine3D/update/update308/README.md @@ -0,0 +1,39 @@ +Egret Engine 3.0 包含了白鹭时代研发的遵循HTML5标准的 2D 引擎及全新打造的 3D 引擎，它解决了 HTML5 性能问题及碎片化问题，灵活地满足开发者开发 2D 或 3D 游戏的需求，并有着极强的跨平台运行能力。 + +在 Egret Engine 的本次更新中，我们队引擎的性能进行了优化，同时也提供了若干新功能。下面介绍 Egret Engine 3.0.7 到 Egret Engine 3.0.8 之间的更新详情。 + +## Egret Engine 3D + +在 Egret Engine 3D 的本次更新中，我们增加了一些新功能并修复若干问题。下面列出的是 3.0.7 到 3.0.8 的更新详情。 + +### 更新内容 + +* [HUD](http://edn.egret.com/cn/apidoc/index/name/egret3d.HUD) + + [HUD](http://edn.egret.com/cn/apidoc/index/name/egret3d.ParticleAnimation)直接渲染在屏幕上的一张贴图，可直接指定2维坐标，贴图的宽度和高度。 + +* 场景中可以进行用四叉树裁剪 + + 场景中静止不动的对象，可以使用四叉树裁剪，提高进入视锥渲染的效率。 + +* [粒子系统](http://edn.egret.com/cn/apidoc/index/name/egret3d.ParticleAnimation) + + 新增粒子系统。通过 [ParticleAnimation](http://edn.egret.com/cn/apidoc/index/name/egret3d.ParticleAnimation) 类可以添加 3D 粒子效果。 + +* [陀螺仪事件](http://edn.egret.com/cn/apidoc/index/name/egret3d.OrientationEvent3D) + + 通过 [OrientationEvent3D](http://edn.egret.com/cn/apidoc/index/name/egret3d.OrientationEvent3D) 监听陀螺仪事件。 + +* [寻路系统](http://edn.egret.com/cn/apidoc/index/name/egret3d.Navi3DEdge) + +### Bug列表 + +* 修复了 UV 贴图反向 BUG + +#### 教程文档 + +在更新引擎的同时我们提供了新的教程，并将逐步完善。 + +您可以从入门教程开始学习：[Egret3D入门](http://edn.egret.com/cn/docs/page/906) + +更深入的API学习可以点击：[Egret3D API](http://edn.egret.com/cn/apidoc/index/name/egret3d.AudioManager) diff --git a/Engine3D/update/update310/573990c0e636e.png b/Engine3D/update/update310/573990c0e636e.png new file mode 100644 index 0000000..b1938c4 Binary files /dev/null and b/Engine3D/update/update310/573990c0e636e.png differ diff --git a/Engine3D/update/update310/573990c11bb31.png b/Engine3D/update/update310/573990c11bb31.png new file mode 100644 index 0000000..f5d0359 Binary files /dev/null and b/Engine3D/update/update310/573990c11bb31.png differ diff --git a/Engine3D/update/update310/README.md b/Engine3D/update/update310/README.md new file mode 100644 index 0000000..68c4341 --- /dev/null +++ b/Engine3D/update/update310/README.md @@ -0,0 +1,47 @@ +Egret Engine 3.0 包含了白鹭时代研发的遵循HTML5标准的 2D 引擎及全新打造的 3D 引擎，它解决了 HTML5 性能问题及碎片化问题，灵活地满足开发者开发 2D 或 3D 游戏的需求，并有着极强的跨平台运行能力。 + +在 Egret Engine 的本次更新中，提供了若干新的功能，同时我们吸收开发者的意见修复若干问题。下面介绍 Egret Engine 3.0.8 到 Egret Engine 3.1.0 之间的更新详情。 + +## Egret Engine 3D + +在 Egret Engine 3D 的本次更新中，我们增加了一些新功能并修复若干问题。下面列出的是 3.0.8 到 3.1.0 的更新详情。 + +### 更新内容 + +* [LightMap](http://edn.egret.com/cn/apidoc/index/name/egret3d.LightmapMethod) + + 三维软件里实现打好光，然后渲染把场景各表面的光照输出到贴图上.然后使用模型的第 2UV，渲染出 Lightmap 效果。 + +* [AlphaMask](http://edn.egret.com/cn/apidoc/index/name/egret3d.AlphaMaskMethod) + + 实现 Alpha 遮罩渲染方法。该贴图的 R 通道被用于赋值到 diffuse 数据的 Alpha 上面。 + +* [cutAlpha](http://edn.egret.com/cn/apidoc/index/name/egret3d.MaterialBase#cutAlpha) + + 新增图片镂空，Alpha 剔除功能。通过设置材质的 cutAlpha 值设置带透明贴图的材质透明部分的阀值。 + +* 重置 Shader 结构 + + 增加着色 Phase。 + +### 修复问题 + +* 修复了3DMAX 模型导出插件读取 UV 的 BUG。 +* 修复了模型使用 Alpha 贴图导致深度乱序的 BUG。 +* 修复粒子系统生命周期的 BUG。 +* 修复粒子系统跟随 BUG。 +* 修复粒子系统较高的发射速率 BUG。 +* 修复材质系统 gloss 值失效。 +* 修复材质系统 specularLevel 值失效。 +* 修复材质系统 BlendModle.NORMAL 透明乱序。 +* 修复 DirectLight 高光显示错误。 +* 修复 PointLight 高光显示错误。 + +### 教程文档 + +在更新引擎的同时我们提供了新的教程，并将逐步完善。 + +您可以从入门教程开始学习：[Egret3D入门](http://edn.egret.com/cn/docs/page/906) + +更深入的API学习可以点击：[Egret3D API](http://edn.egret.com/cn/apidoc/index/name/egret3d.AlphaMaskMethod) + diff --git a/Engine3D/update/update311/574c05d2113e5.png b/Engine3D/update/update311/574c05d2113e5.png new file mode 100644 index 0000000..7243d8a Binary files /dev/null and b/Engine3D/update/update311/574c05d2113e5.png differ diff --git a/Engine3D/update/update311/574c05d22e811.gif b/Engine3D/update/update311/574c05d22e811.gif new file mode 100644 index 0000000..d941aa4 Binary files /dev/null and b/Engine3D/update/update311/574c05d22e811.gif differ diff --git a/Engine3D/update/update311/README.md b/Engine3D/update/update311/README.md new file mode 100644 index 0000000..b5e2f67 --- /dev/null +++ b/Engine3D/update/update311/README.md @@ -0,0 +1,43 @@ +Egret Engine 3.0 包含了白鹭时代研发的遵循HTML5标准的 2D 引擎及全新打造的 3D 引擎，它解决了 HTML5 性能问题及碎片化问题，灵活地满足开发者开发 2D 或 3D 游戏的需求，并有着极强的跨平台运行能力。 + +## Egret Engine 3D + +在 Egret Engine 3D 的本次更新中，我们增加了一些新功能并修复若干问题。下面列出的是 3.1.0 到 3.1.1 的更新详情。 + +### 更新内容 + +* 增加材质球 [UV repat](http://edn.egret.com/cn/apidoc/index/name/egret3d.MaterialBase#repeat) + + 设置材质 repeat 值。设置材质 是否进行纹理重复采样的方式开关。 + +* 增加渲染 [RenderToTexture](http://edn.egret.com/cn/apidoc/index/name/egret3d.RenderTexture) + + RenderToTexture 可以渲染到内容到一张贴图。 + +* 增加 [View3D 背景贴图](http://edn.egret.com/cn/apidoc/index/name/egret3d.View3D#backImage) + +* 增加 MatCap 材质球系列 + +### 工具 + +* 增加 Unity3D 模型导出插件 + + 下载 Unity3D 模型导出插件：[Unity Export tool](https://github.com/egret-labs/egret-3d/tree/rc/3.1.1/ExportTools/unity%20Export%20tool) + + 使用说明:[Unity3D 插件使用说明](https://github.com/egret-labs/egret-3d/blob/rc/3.1.1/ExportTools/unity%20Export%20tool/%E6%8F%92%E4%BB%B6%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E.md) + +### 修复问题 + +* 修复正交相机渲染错误的 BUG。 +* 修复HUD宽高渲染不正常的 BUG。 +* 修复材质不给贴图时渲染异常的 BUG。 +* 修复同一个物体多次渲染异常的 BUG。 + +### 教程文档 + +在更新引擎的同时我们提供了新的教程，并将逐步完善。 + +您可以从入门教程开始学习：[Egret3D入门](http://edn.egret.com/cn/docs/page/906) + +更深入的API学习可以点击：[Egret3D API](http://edn.egret.com/cn/apidoc/index/name/egret3d.AlphaMaskMethod) + diff --git a/Engine3D/update/update312/575e7da5ac883.gif b/Engine3D/update/update312/575e7da5ac883.gif new file mode 100644 index 0000000..6ceffba Binary files /dev/null and b/Engine3D/update/update312/575e7da5ac883.gif differ diff --git a/Engine3D/update/update312/575e7da5c32aa.png b/Engine3D/update/update312/575e7da5c32aa.png new file mode 100644 index 0000000..83e0efb Binary files /dev/null and b/Engine3D/update/update312/575e7da5c32aa.png differ diff --git a/Engine3D/update/update312/README.md b/Engine3D/update/update312/README.md new file mode 100644 index 0000000..da44149 --- /dev/null +++ b/Engine3D/update/update312/README.md @@ -0,0 +1,49 @@ +Egret Engine 3.0 包含了白鹭时代研发的遵循HTML5标准的 2D 引擎及全新打造的 3D 引擎，它解决了 HTML5 性能问题及碎片化问题，灵活地满足开发者开发 2D 或 3D 游戏的需求，并有着极强的跨平台运行能力。 + +## Egret Engine 3D + +在 Egret Engine 3D 的本次更新中，我们增加了一些新功能并修复若干问题。下面列出的是 3.1.1 到 3.1.2 的更新详情。 + +### 更新内容 + +* 增加 [VideoTexture](http://developer.egret.com/cn/apidoc/index/name/egret3d.VideoTexture) + + 使用 VideoTexture 可以通过 Video 标签采集视频。使用时需要注意设置贴图的宽度和高度必须为2的N次方。 + +* 增加 HUD 可自定义 shader + +* 增加 [Streamer](http://developer.egret.com/cn/apidoc/index/name/egret3d.StreamerMethod) 材质特效 + + 使用 StreamerMethod 可以实现UV流光滚动效果的渲染方法。 + +* 增加 MRT post effect 框架 + + 离屏渲染框架，GPU 在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作。 + +* 增加多 [Pass](http://developer.egret.com/cn/apidoc/index/name/egret3d.MaterialPass) 混合渲染框架. + + 材质渲染 Pass 根据 Mesh 数据、模型的材质还有灯光数据的不同。以不同的渲染方法，会组成相应的 shader 内容，然后渲染出不同的效果。 + +### 工具 + +* Unity3d 插件可以导出骨骼动画 + +下载 Unity3D 模型导出插件：[Unity Export tool](https://github.com/mebiusashan/egret-3d/tree/master/ExportTools) + +使用说明:[Unity3D 模型导出插件](../../../Engine3D/Egret3DExport/Unity3d/README.md) + +### 教程文档 + +在更新引擎的同时我们更新了 [Egret Engine 3D 的系列教程](../../../Engine3D/getStarted/getStarted/README.md)。 + +您可以从入门教程开始学习：[Get Started](../../../Engine3D/getStarted/getStarted/README.md) + +更深入的API学习可以点击：[Egret3D API](http://developer.egret.com/cn/apidoc/index/name/egret3d.AlphaMaskMethod) + +### 修复问题 + +* 修复 TGA 贴图不能正常使用 BUG。 +* 修复 ColorMaterial 不能使用的 BUG。 +* 修复 CubeMaterial 不能使用的 BUG。 +* 修复 Sound 设置监听者位置没有作用的 BUG。 +* 修复 normal 空间错误问题，导致灯光错误。 diff --git a/Engine3D/update/update313/README.md b/Engine3D/update/update313/README.md new file mode 100644 index 0000000..ce17684 --- /dev/null +++ b/Engine3D/update/update313/README.md @@ -0,0 +1,33 @@ +Egret Engine 3.0 包含了白鹭时代研发的遵循HTML5标准的2D引擎及全新打造的3D引擎，它解决了HTML5性能问题及碎片化问题，灵活地满足开发者开发2D或3D游戏的需求，并有着极强的跨平台运行能力。 + +在 Egret Engine 3.0 中包含了 Egret Engine 3D 和 Egret Engine 2D 两部分，以后会融合在一起，形成完整统一的 Egret Engine。 + +## Egret Engine 3D + +现在 Egret Engine3D 开放体验，可以通过[Egret Engine 3D](https://github.com/egret-labs/egret-3d)获取到 Egret Engine 3D 的源码。也可以在 EDN 上查阅 [Egret Engine 3D API](http://edn.egret.com/cn/apidoc/index/name/egret3d.AudioManager)。更多关于 Egret Engine 3D 的教程欢迎关注 EDN [Egret Engine 3D 分类](http://edn.egret.com/cn/docs/page/775)。 + +在体验的过程中如果遇到任何问题希望您能留下宝贵意见，更欢迎大家在 Egret 论坛交流:[Egret3D 交流贴](http://bbs.egret.com/forum.php?mod=viewthread&tid=15653)。 + +Egret Engine 3D 官方交流群: 180593985 。 + +### Egret Engine 3D 新功能 +---- ------------------------ + +#### •更新内容 + +- 增加高度地型 +- 增加地型混合贴图效果 +- 增加场景节点式加载 +- 增加属性动画驱动 + +#### • 工具 + +- 增加unity3d 相机动画导出 +- 增加unity3d 属性动画导出 +- 增加场景节点式导出 +- 增加地型导出 + +#### • Bug修复 + +- 修复Object3D中节点查找Bug + diff --git a/Engine3D/update/update314/578349b594649.jpg b/Engine3D/update/update314/578349b594649.jpg new file mode 100644 index 0000000..bbbb1f1 Binary files /dev/null and b/Engine3D/update/update314/578349b594649.jpg differ diff --git a/Engine3D/update/update314/578349b5a4f83.jpg b/Engine3D/update/update314/578349b5a4f83.jpg new file mode 100644 index 0000000..64d5900 Binary files /dev/null and b/Engine3D/update/update314/578349b5a4f83.jpg differ diff --git a/Engine3D/update/update314/578349b5b7f94.png b/Engine3D/update/update314/578349b5b7f94.png new file mode 100644 index 0000000..aa2266a Binary files /dev/null and b/Engine3D/update/update314/578349b5b7f94.png differ diff --git a/Engine3D/update/update314/578349b5ccdbc.png b/Engine3D/update/update314/578349b5ccdbc.png new file mode 100644 index 0000000..3beca67 Binary files /dev/null and b/Engine3D/update/update314/578349b5ccdbc.png differ diff --git a/Engine3D/update/update314/578349b5d5c2d.jpg b/Engine3D/update/update314/578349b5d5c2d.jpg new file mode 100644 index 0000000..b8f8b6b Binary files /dev/null and b/Engine3D/update/update314/578349b5d5c2d.jpg differ diff --git a/Engine3D/update/update314/578349b5eb53c.png b/Engine3D/update/update314/578349b5eb53c.png new file mode 100644 index 0000000..5304ed0 Binary files /dev/null and b/Engine3D/update/update314/578349b5eb53c.png differ diff --git a/Engine3D/update/update314/57b6df305dc85.png b/Engine3D/update/update314/57b6df305dc85.png new file mode 100644 index 0000000..4b8b592 Binary files /dev/null and b/Engine3D/update/update314/57b6df305dc85.png differ diff --git a/Engine3D/update/update314/README.md b/Engine3D/update/update314/README.md new file mode 100644 index 0000000..d3f8acd --- /dev/null +++ b/Engine3D/update/update314/README.md @@ -0,0 +1,38 @@ +## Egret Engine 3D + +#### 更新内容 +* 增加水渲染特效 +新增的水波渲染方法已经达到相当逼真的效果： +![3d-waterWave](578349b594649.jpg) + +核心代码如下： +``` +var waterWaveMethod: WaterWaveMethod = new WaterWaveMethod(); +var waterNormal: WaterNormalMethod = new WaterNormalMethod(); +var envMethod: EnvironmentMethod = new EnvironmentMethod(); + +//vec3(42.0 / 255.0, 40.0 / 255.0, 20.0 / 255.0) +waterWaveMethod.shallowWaterColor = 0xFF2A2814; +waterWaveMethod.deepWaterColor = 0xFF2A2814; +waterNormal.setUvScale(4.0,4.0); + +this.matPlane = new TextureMaterial(); +this.matPlane.repeat = true; +this.matPlane.diffusePass.addMethod(waterWaveMethod); +this.matPlane.diffusePass.addMethod(waterNormal); +this.matPlane.diffusePass.addMethod(envMethod); + +waterNormal.normalTextureA = CheckerboardTexture.texture; +waterNormal.normalTextureB = CheckerboardTexture.texture; +envMethod.environmentTexture = cubeTexture; +``` +简言之，就是为水面的材质加入水波纹和水平面法线两种方法。具体用法可参考 引擎3D部分的`ClassSample\Class_WaveWater.ts`类实现。 + +#### Bug列表 +* 修复骨骼动画缺少帧数的bug +* 修复CubeTexture上传为null时导致的bug +* 修复华为手机不能使用egret3d引擎的bug + +#### 工具 +* 修复Unity3d导出插件坐标轴bug +* 修复Unity3d导出插件模型比例bug diff --git a/Engine3D/update/update315/5791e02548192.jpg b/Engine3D/update/update315/5791e02548192.jpg new file mode 100644 index 0000000..e6a0cb0 Binary files /dev/null and b/Engine3D/update/update315/5791e02548192.jpg differ diff --git a/Engine3D/update/update315/README.md b/Engine3D/update/update315/README.md new file mode 100644 index 0000000..2a8730d --- /dev/null +++ b/Engine3D/update/update315/README.md @@ -0,0 +1,16 @@ +#### 更新内容 +* 增加HDR图片格式的使用 +高动态范围图像（High-Dynamic Range，简称HDR），相比普通的图像，可以提供更多的动态范围和图像细节。该版本已经支持该格式的加载，可用作为场景的纹理图片，得到更逼真的视觉效果。 +![](5791e02548192.jpg) + +* 增加骨骼动画流式解析 +现在，开发者可以在Egret 3D中使用更大资源量的骨骼动画了。之前该部分的解析并不灵活，导致解析过程所占用内存增加可能导致程序崩溃。该版本已经采用全新的解析方案，在解析大资源量的骨骼动画时，将内存占用保持在可控范围内。 +>注：该功能为引擎核心实现，不需要开发者在程序中调用。 + +#### Bug列表 +* 修复MapLoader资源重复加载问题 +* 修复BoundBox检测相交bug +* 修复骨骼动画对重复new矩阵对象的bug + +#### 优化列表 +* 优化水渲染效果 \ No newline at end of file diff --git a/Engine3D/update/update320/README.md b/Engine3D/update/update320/README.md new file mode 100644 index 0000000..640b207 --- /dev/null +++ b/Engine3D/update/update320/README.md @@ -0,0 +1,12 @@ +#### 更新内容 + +* 增加多模型共用SkeletonAnimation对象 +* 增加模型骨骼挂载物件,支持avatar +* 增加资源释放接口 +* 修复默认包围盒创建错误导致模型拣选出错的bug +* 修复粒子创建个数可能为0的bug +* 修复摄像机裁剪时会突然看不见的bug + +#### 工具内容 + +* 增加角色导出（可增加挂载物件） \ No newline at end of file diff --git a/Engine3D/update/update321/README.md b/Engine3D/update/update321/README.md new file mode 100644 index 0000000..538d1ca --- /dev/null +++ b/Engine3D/update/update321/README.md @@ -0,0 +1,10 @@ +## 概述 +在Egret3D 3.2.1版本中，修复了3.2.0版本中相应的Bug,增加了部分功能 + +#### 更新内容 +* 增加地型LOD +* 增加粒子追加聚合效果 + +#### Bug列表 +* 修复帧动画不能停留在某一帧的bug +* 修复阴影贴图在贴图边界会出现常阴影bug diff --git a/Engine3D/update/update322/README.md b/Engine3D/update/update322/README.md new file mode 100644 index 0000000..9be5408 --- /dev/null +++ b/Engine3D/update/update322/README.md @@ -0,0 +1,17 @@ +## 概述 +在Egret3D 3.2.2版本中，修复了3.2.1版本中相应的Bug,增加了部分功能 + +### 更新内容 + +* 增加场景资源的回收 +* 增加描边渲染，卡通渲染线框 +* 增加bloom后斯处理特效 +* 增加草动画特效 + + +### Bug列表 +* 修复URLLoader无法重复加载bug +* 修复egretwing中使用顶点色会出现颜色异常bug + +### 工具 +* unity3d导出的动画增加是否自动播放和循环播放 diff --git a/Engine3D/update/update324/README.md b/Engine3D/update/update324/README.md new file mode 100644 index 0000000..5fff7af --- /dev/null +++ b/Engine3D/update/update324/README.md @@ -0,0 +1,20 @@ +## 概述 +在Egret3D 3.2.4版本中，修复了3.2.2版本中相应的Bug,增加了部分功能 + + +### 新增功能 + +* 增加模型合并功能(bathing) +* 增加模型镜像 + +### Bug列表 + +* 修复场景更换主相机会报错bug +* 修复特效移除bug +* 修复灯光动态移除bug +* 修复QueueLoader taskCurrent 加载过程中没有改变的bug +* 修复光照贴图烘培后出现黑边的bug +* 修复模型PICK事件在一定角度无效的bug +* 修复雾效不能使用的bug +* 修复ios 10 不能播放特效的bug +* 修复google浏览器不能使用Shadow的bug diff --git a/Engine3D/update/update325/README.md b/Engine3D/update/update325/README.md new file mode 100644 index 0000000..a1eda93 --- /dev/null +++ b/Engine3D/update/update325/README.md @@ -0,0 +1,17 @@ +## 概述 + +在Egret3D 3.2.5版本中，修复了3.2.4版本中相应的Bug + +### 更新内容 + +* 骨骼动画进行了大量改动,优化了骨骼动画的占用内存。使用3.2.5版本的引擎必须使用3.2.5版本的插件导出。 +* 第2UV数量分离 +* 不再支持 3DMax 插件导出。开发者使用3DMax做的模型，请先导入到Unity中，再通过 Unity 插件导出。 + +### Bug列表 + +* 修复多个物体事件bug +* 修复qq浏览器 Input 标签没有焦点的bug +* 修复插件导出点光源没有应用的bug +* 修复角色导出文件子点节重复加入bug +* 修复模型导出后顶点色bug diff --git a/Lakeshore/manual/basicConcept/basicConcept/README.md b/Lakeshore/manual/basicConcept/basicConcept/README.md new file mode 100644 index 0000000..c96cd44 --- /dev/null +++ b/Lakeshore/manual/basicConcept/basicConcept/README.md @@ -0,0 +1,35 @@ +### 1.场景 +场景是游戏的基本组成部分，开始界面，结束界面，每个关卡都是一个场景。游戏中基于游戏的情节，可以在各个场景间跳转。 + +### 2.精灵 +精灵可以理解为图片的容器。如果需要在游戏场景中插入一个静态图片，那么就需要把图片放置在一个精灵内来呈现。游戏制作中，通过对精灵的操作实现图片的移动，变形，旋转等动作。 + +### 3.实例 +游戏中可以操控的基本单位。实例可以是一个文本框，可以是一个动画人物，可以是背景图，也可以是包含图片的精灵等等。在接下来的介绍中我们会经常提到对实例的操作，其实就是泛指一切可操作的对象。 + +### 4.实例类型 +游戏中经常会有一些图片大量的，反复的出现，比如敌机，子弹等。不可能每一个都创建一个新实例，起一个新名字。这时候就需要用到同类型实例了。主场景中，选中某实例，按住Ctrl拖拽，便会产生一个名字和所选实例相同新实例，它们就是同类型实例。它们统称为一个实例类型。他们名字相同，但位置，大小等属性又可以各自不同，可以独立操作。同类型实例也可以通过“创建”或“制造”动作产生。 + +### 5.行为 +游戏中，很多逻辑是固定的，比如打飞机游戏中，用手指拖拽飞机可以移动，超级玛丽游戏中，玛丽可以根据你按键的方向做出左右移动，跳跃，蹲下等动作，这些游戏中固有，通用的逻辑就是行为。给一个物体添加某个行为后，这个物体就具有该行为的固有属性和特征。比如，给一个物体添加子弹行为，那么这个物体在游戏开始后，不需要额外的条件触发，这个物体就会像子弹一样飞行。给一个物体添加拖拽行为后，在手机屏幕上，用手指就可以在游戏场景内拖拽该物体。行为的使用，可以极大的简化游戏制作的难度和复杂度。 + +### 6.事件和事件表 +游戏中的逻辑，简单描述就是，当满足什么条件时，做什么样的事，这就是一个事件的基本组成。比如，当子弹打中敌机时，敌机炸毁，这就是一个事件。而一个又一个事件组合起来就是事件表，整个游戏运行的逻辑便是通过事件表来实现的。 + +### 7.条件 +条件就是事件中的触发机制。刚才举的例子，当子弹打中敌机时，敌机炸毁。其中“当子弹打中敌机时”就是一个条件。 +条件分为两种：【一次性触发】和【持续性触发】。 +- 【一次性触发】 +条件满足后，动作只触发一次。假设事件只有1个条件与1个动作，且条件为一次性触发条件，那么当条件满足时，动作执行且只执行一次。例如：条件为“当实例创建时”，动作为“水平方向移动10像素”。“当实例创建时”为一次性触发条件，所以“当实例创建时”条件成立时，实例只一次性的跳到右侧10像素的位置。 +- 【持续性触发】 +只要条件满足，动作便持续触发。假设事件只有1个条件与1个动作，且条件为持续性触发条件，那么只要条件满足，动作便会一次持续性的执行。例如：条件为“当实例宽度大于100像素”，动作为“水平方向移动10像素”。“当实例宽度大于100像素”为持续性触发条件，所以只要实例宽度大于100像素，那么实例便持续性的每帧平移10像素。（持续性触发条件默认为每帧判定，动作便为每帧执行）。 + +所以在使用条件时要分清一次性触发和持续性触发条件，否则可能出现一个简单动作被反复执行，虽然游戏画面上看不出差别，但底层系统资源却可能大量的消耗浪费执行无意义操作。 + +### 8.动作 +当条件满足的时候，要做的事就是动作。在刚才的例子中，当子弹打中敌机时，敌机炸毁。其中”敌机炸毁”就是动作。 + +### 9.表达式 +举个简单的例子，6是一个数值，6+8就是一个表达式。而实际应用中，我们常用的表达式一般是含有变量的，比如，“盒子.x+6”，这个表达式就表示“盒子”实例的X坐标值加上6像素。更详细的内容请参看[表达式详细介绍](../../commonElements/expression/README.md) + + diff --git a/Lakeshore/manual/behavior/borderRestrictions/5636e53e2629b.png b/Lakeshore/manual/behavior/borderRestrictions/5636e53e2629b.png new file mode 100644 index 0000000..990e378 Binary files /dev/null and b/Lakeshore/manual/behavior/borderRestrictions/5636e53e2629b.png differ diff --git a/Lakeshore/manual/behavior/borderRestrictions/5636e53e405a3.png b/Lakeshore/manual/behavior/borderRestrictions/5636e53e405a3.png new file mode 100644 index 0000000..16149fe Binary files /dev/null and b/Lakeshore/manual/behavior/borderRestrictions/5636e53e405a3.png differ diff --git a/Lakeshore/manual/behavior/borderRestrictions/5636e53e4c768.png b/Lakeshore/manual/behavior/borderRestrictions/5636e53e4c768.png new file mode 100644 index 0000000..53d7b34 Binary files /dev/null and b/Lakeshore/manual/behavior/borderRestrictions/5636e53e4c768.png differ diff --git a/Lakeshore/manual/behavior/borderRestrictions/564d7dd767bd2.png b/Lakeshore/manual/behavior/borderRestrictions/564d7dd767bd2.png new file mode 100644 index 0000000..9589506 Binary files /dev/null and b/Lakeshore/manual/behavior/borderRestrictions/564d7dd767bd2.png differ diff --git a/Lakeshore/manual/behavior/borderRestrictions/README.md b/Lakeshore/manual/behavior/borderRestrictions/README.md new file mode 100644 index 0000000..a4f09c1 --- /dev/null +++ b/Lakeshore/manual/behavior/borderRestrictions/README.md @@ -0,0 +1,35 @@ +![](564d7dd767bd2.png) + +应用了边界限制行为的实例，其活动范围将被限制在指定的边界范围内。 + +### 属性面板： +![](5636e53e4c768.png) +- 实例限制模式：实例限制出界模式。可选项有： + - 实例边框：设定实例的外边框不能走出指定的限制边界。例如：限制边界为屏幕范围内，实例边框模式，则当实例的边框达到屏幕边缘后便无法再往外运动了。 + - 实例锚点：设定实例的锚点不能走出指定的限制边界。这样，在上边那个例子中，改为实例锚点模式，则实例的边框是可以出屏幕边缘的，而当实例的锚点达到屏幕边缘后便无法再往外运动了。 +- 水平坐标：设定限制边界的最左上角坐标点的水平坐标值。（单位：像素） +- 垂直坐标：设定限制边界的最左上角坐标点的垂直坐标值。（单位：像素） +- 边界宽：设置限制边界的宽。（单位：像素） +- 边界高：设置限制边界的高。（单位：像素） + + +------------ + +### 边界限制条件： +边界限制行为没有特有的条件。 + +------------ + +### 边界限制动作： +![](5636e53e2629b.png) +#### 设定边界参数： +设置边界限制的各个参数。 +- 实例限制模式：实例限制出界模式。可选项有： + - 实例边框：设定实例的外边框不能走出指定的限制边界。 + - 实例锚点：设定实例的锚点不能走出指定的限制边界。 +- 水平坐标：设定限制边界的最左上角坐标点的水平坐标值。（单位：像素） +- 垂直坐标：设定限制边界的最左上角坐标点的垂直坐标值。（单位：像素） +- 边界宽：设置限制边界的宽。（单位：像素） +- 边界高：设置限制边界的高。（单位：像素） + +![](5636e53e405a3.png) \ No newline at end of file diff --git a/Lakeshore/manual/behavior/bullet/5632e26711538.png b/Lakeshore/manual/behavior/bullet/5632e26711538.png new file mode 100644 index 0000000..35af00f Binary files /dev/null and b/Lakeshore/manual/behavior/bullet/5632e26711538.png differ diff --git a/Lakeshore/manual/behavior/bullet/5632e2672b66d.png b/Lakeshore/manual/behavior/bullet/5632e2672b66d.png new file mode 100644 index 0000000..9c3125d Binary files /dev/null and b/Lakeshore/manual/behavior/bullet/5632e2672b66d.png differ diff --git a/Lakeshore/manual/behavior/bullet/5632e26738815.png b/Lakeshore/manual/behavior/bullet/5632e26738815.png new file mode 100644 index 0000000..27465a9 Binary files /dev/null and b/Lakeshore/manual/behavior/bullet/5632e26738815.png differ diff --git a/Lakeshore/manual/behavior/bullet/5632e26752e15.png b/Lakeshore/manual/behavior/bullet/5632e26752e15.png new file mode 100644 index 0000000..b741ebb Binary files /dev/null and b/Lakeshore/manual/behavior/bullet/5632e26752e15.png differ diff --git a/Lakeshore/manual/behavior/bullet/5632e2675db61.png b/Lakeshore/manual/behavior/bullet/5632e2675db61.png new file mode 100644 index 0000000..c755d1a Binary files /dev/null and b/Lakeshore/manual/behavior/bullet/5632e2675db61.png differ diff --git a/Lakeshore/manual/behavior/bullet/5632e2676b271.png b/Lakeshore/manual/behavior/bullet/5632e2676b271.png new file mode 100644 index 0000000..7e16a7d Binary files /dev/null and b/Lakeshore/manual/behavior/bullet/5632e2676b271.png differ diff --git a/Lakeshore/manual/behavior/bullet/5632e26789e81.png b/Lakeshore/manual/behavior/bullet/5632e26789e81.png new file mode 100644 index 0000000..0371825 Binary files /dev/null and b/Lakeshore/manual/behavior/bullet/5632e26789e81.png differ diff --git a/Lakeshore/manual/behavior/bullet/5632e267b0835.png b/Lakeshore/manual/behavior/bullet/5632e267b0835.png new file mode 100644 index 0000000..b858457 Binary files /dev/null and b/Lakeshore/manual/behavior/bullet/5632e267b0835.png differ diff --git a/Lakeshore/manual/behavior/bullet/564c28bde86d0.png b/Lakeshore/manual/behavior/bullet/564c28bde86d0.png new file mode 100644 index 0000000..d707b78 Binary files /dev/null and b/Lakeshore/manual/behavior/bullet/564c28bde86d0.png differ diff --git a/Lakeshore/manual/behavior/bullet/564c29d98c132.png b/Lakeshore/manual/behavior/bullet/564c29d98c132.png new file mode 100644 index 0000000..a7ca942 Binary files /dev/null and b/Lakeshore/manual/behavior/bullet/564c29d98c132.png differ diff --git a/Lakeshore/manual/behavior/bullet/README.md b/Lakeshore/manual/behavior/bullet/README.md new file mode 100644 index 0000000..876ad4e --- /dev/null +++ b/Lakeshore/manual/behavior/bullet/README.md @@ -0,0 +1,44 @@ +![](564c29d98c132.png) + +应用了子弹行为的实例会具有以一定的速度朝向指定的方向运动的行为。所以子弹是很相像的一个名称，实例应用了子弹行为后，就会像子弹一样运动。 + +### 属性面板： +![](564c28bde86d0.png) +- 速度：子弹的默认运行速度，单位为像素/秒。默认值为400，表示每秒钟移动400像素。 +- 加速度：子弹运行的加速度。默认值为0，这时为匀速运动。当值为正时是加速度，当值为负时即为减速度。 +- 重力：子弹运行过程中，受的引力，方向固定朝向Y轴负方向。比如子弹水平飞行，如果受重力影响，运行轨迹应该为抛物线，重力越大，抛物线的弧度越大。默认重力为0，此时子弹会保持直线飞行。 +- 默认运行角度：设置子弹的默认运动角度。默认值为0。子弹的运行角度和作为子弹的实例本身的角度无关。 +------------ +### 子弹条件： +![](5632e26789e81.png) +#### 比较运行速度： +用所选实例的子弹运行速度和指定值比较。【持续性触发】 +![](5632e267b0835.png) + +#### 比较运行距离： +用所选实例的子弹运行距离和制定值比较。运行距离的测量是从子弹创建开始算起。【持续性触发】 +![](5632e267b0835.png) + +------------ +### 子弹动作： +![](5632e26711538.png) + +#### 运行速度： +设置子弹运行的速度。 +![](5632e2675db61.png) + +#### 加速度： +设置子弹运行的加速度。 +![](5632e2672b66d.png) + +#### 运行角度： +设置子弹运行的角度。 +![](5632e26752e15.png) + +#### 重力： +设置子弹运行中所承受的重力。 +![](5632e2676b271.png) + +#### 启用/禁用： +设置子弹行为是否可用。 +![](5632e26738815.png) \ No newline at end of file diff --git a/Lakeshore/manual/behavior/curve/563870f7300a6.png b/Lakeshore/manual/behavior/curve/563870f7300a6.png new file mode 100644 index 0000000..de517b4 Binary files /dev/null and b/Lakeshore/manual/behavior/curve/563870f7300a6.png differ diff --git a/Lakeshore/manual/behavior/curve/563870f757378.png b/Lakeshore/manual/behavior/curve/563870f757378.png new file mode 100644 index 0000000..2163f47 Binary files /dev/null and b/Lakeshore/manual/behavior/curve/563870f757378.png differ diff --git a/Lakeshore/manual/behavior/curve/563870f769e8d.png b/Lakeshore/manual/behavior/curve/563870f769e8d.png new file mode 100644 index 0000000..5c829a6 Binary files /dev/null and b/Lakeshore/manual/behavior/curve/563870f769e8d.png differ diff --git a/Lakeshore/manual/behavior/curve/563870f78290c.png b/Lakeshore/manual/behavior/curve/563870f78290c.png new file mode 100644 index 0000000..654047f Binary files /dev/null and b/Lakeshore/manual/behavior/curve/563870f78290c.png differ diff --git a/Lakeshore/manual/behavior/curve/563870f78eef8.png b/Lakeshore/manual/behavior/curve/563870f78eef8.png new file mode 100644 index 0000000..d971a77 Binary files /dev/null and b/Lakeshore/manual/behavior/curve/563870f78eef8.png differ diff --git a/Lakeshore/manual/behavior/curve/563870f79c30f.png b/Lakeshore/manual/behavior/curve/563870f79c30f.png new file mode 100644 index 0000000..190a6f8 Binary files /dev/null and b/Lakeshore/manual/behavior/curve/563870f79c30f.png differ diff --git a/Lakeshore/manual/behavior/curve/563870f7cb165.png b/Lakeshore/manual/behavior/curve/563870f7cb165.png new file mode 100644 index 0000000..0ad650c Binary files /dev/null and b/Lakeshore/manual/behavior/curve/563870f7cb165.png differ diff --git a/Lakeshore/manual/behavior/curve/56387100b4bbf.png b/Lakeshore/manual/behavior/curve/56387100b4bbf.png new file mode 100644 index 0000000..d466aec Binary files /dev/null and b/Lakeshore/manual/behavior/curve/56387100b4bbf.png differ diff --git a/Lakeshore/manual/behavior/curve/56387bbce7444.png b/Lakeshore/manual/behavior/curve/56387bbce7444.png new file mode 100644 index 0000000..eed48a1 Binary files /dev/null and b/Lakeshore/manual/behavior/curve/56387bbce7444.png differ diff --git a/Lakeshore/manual/behavior/curve/56387e35911b7.png b/Lakeshore/manual/behavior/curve/56387e35911b7.png new file mode 100644 index 0000000..ef8d345 Binary files /dev/null and b/Lakeshore/manual/behavior/curve/56387e35911b7.png differ diff --git a/Lakeshore/manual/behavior/curve/56387fa7b66a4.png b/Lakeshore/manual/behavior/curve/56387fa7b66a4.png new file mode 100644 index 0000000..6c129e3 Binary files /dev/null and b/Lakeshore/manual/behavior/curve/56387fa7b66a4.png differ diff --git a/Lakeshore/manual/behavior/curve/56387fa7d23a8.png b/Lakeshore/manual/behavior/curve/56387fa7d23a8.png new file mode 100644 index 0000000..50b8d8f Binary files /dev/null and b/Lakeshore/manual/behavior/curve/56387fa7d23a8.png differ diff --git a/Lakeshore/manual/behavior/curve/564d801b586d2.png b/Lakeshore/manual/behavior/curve/564d801b586d2.png new file mode 100644 index 0000000..bca0b06 Binary files /dev/null and b/Lakeshore/manual/behavior/curve/564d801b586d2.png differ diff --git a/Lakeshore/manual/behavior/curve/README.md b/Lakeshore/manual/behavior/curve/README.md new file mode 100644 index 0000000..7cebe86 --- /dev/null +++ b/Lakeshore/manual/behavior/curve/README.md @@ -0,0 +1,84 @@ +![](564d801b586d2.png) + +应用了曲线行为的实例，可以使其指定的运动或变化应用曲线效果。应用了曲线效果的运动或变化看起来更自然。 + +### 属性面板： +![](563870f769e8d.png) +- 开始便激活：实例创建时立即应用曲线效果。设置为“是”，则实例加载后便立即应用曲线行为。如果选择“否”，事件表中可以通过动作启用。 +- 运动类型：选择应用了曲线效果的运动或变化。可选项有： + - 水平移动：在X轴方向上，实例的位置依照曲线左右移动。 + - 垂直移动：在Y轴方向上，实例的位置依照曲线上下移动。 + - 大小变化：实例的尺寸依照曲线变化大小。 + - 宽度变化：实例的宽度依照曲线变化大小。 + - 高度变化：实例的高度依照曲线变化大小。 + - 角度变化：实例的角度依照曲线变化大小。 + - 透明度变化：实例的透明度依照曲线变化大小。 + - 值变化： + - 前/后移动：前后是基于实例自身的角度定义的。比如，实例角度是45度，那么前后移动便是沿着斜45度的直线往复移动。 +- 波形：曲线的波形。可选项有： + - 正弦波 + - 三角波 + - 正向锯齿波 + - 反向锯齿波 + - 方波 +各种波形示意图如下： +![](56387100b4bbf.png) +- 周期：设置曲线的周期，也就是效果循环一次所需要的时间。（单位：秒） +- 周期随机数：给周期时间添加一个随机数。（单位：秒） +例如：周期为2，随机数也为2，则实际的周期会是在2到4之间的随机数值。随机数值在曲线初始化时产生并和设置周期值相加，初始化后实际周期便固定不变了。 +- 周期偏移值：设置曲线在X轴方向的偏移值。（单位：秒） +例如：曲线振幅为1，周期为2秒，默认曲线值由0开始。偏移0.5秒，则曲线值变成从1开始。 +- 周期偏移值随机数：周期偏移值随机数。（单位：秒） +例如：偏移值为0.5，随机数为1，则实际的偏移值会是在0.5到1.5之间的随机数值。随机数值在曲线初始化时产生并和设置偏移值相加，初始化后实际偏移值便固定不变了。 +- 振幅：曲线的振幅即为曲线的振动范围，决定了实例的曲线运动范围可取到的最大和最小值。（单位：与运动类型相关） +- 振幅随机数：振幅随机数。 +例如：振幅为1，随机数为2，则实际的偏移值会是在1到3之间的随机数值。随机数值在曲线初始化时产生并和设置振幅相加，初始化后实际振幅值便固定不变了。 + +------------ + +### 曲线条件： +![](563870f78290c.png) + +#### 若启用： +如果曲线行为是启用状态的话触发。 +此条件无特有属性设置窗口。 + +#### 判定运动类型： +如果当前实例的曲线运动类型是指定类型触发。可选项如下图： +![](563870f7cb165.png) +#### 比较周期： +用当前实例的曲线周期和指定值比较，条件为真则触发。 +![](563870f79c30f.png) +#### 比较振幅： +用当前实例的振幅和指定值比较，条件为真则触发。 +![](563870f78eef8.png) +#### 判定波形： +如果当前实例的曲线波形为指定波形触发。可选项如下图： +![](56387bbce7444.png) + +------------ + +### 曲线动作： +![](56387e35911b7.png) + +#### 启用/禁用： +设置曲线行为启用或禁用。 +![](563870f7300a6.png) + +#### 运动类型： +设置应用了曲线效果的实例运动或变化类型。可选项如下图： +![](56387fa7d23a8.png) + +#### 周期： +设置曲线的周期。 +![](563870f757378.png) +#### 振幅： +设置曲线的振幅。 + +#### 波形： +设置曲线的波形。可选项如下图： +![](56387fa7b66a4.png) + +#### 初始化： +初始化曲线。表示曲线由坐标原点重新开始波动。 +此动作无特有属性设置窗口。 \ No newline at end of file diff --git a/Lakeshore/manual/behavior/drag/56331c9e4e8f4.png b/Lakeshore/manual/behavior/drag/56331c9e4e8f4.png new file mode 100644 index 0000000..ab8947c Binary files /dev/null and b/Lakeshore/manual/behavior/drag/56331c9e4e8f4.png differ diff --git a/Lakeshore/manual/behavior/drag/56331c9e75218.png b/Lakeshore/manual/behavior/drag/56331c9e75218.png new file mode 100644 index 0000000..3278b54 Binary files /dev/null and b/Lakeshore/manual/behavior/drag/56331c9e75218.png differ diff --git a/Lakeshore/manual/behavior/drag/56331c9e8e7f0.png b/Lakeshore/manual/behavior/drag/56331c9e8e7f0.png new file mode 100644 index 0000000..3ae83ef Binary files /dev/null and b/Lakeshore/manual/behavior/drag/56331c9e8e7f0.png differ diff --git a/Lakeshore/manual/behavior/drag/56331c9ea106b.png b/Lakeshore/manual/behavior/drag/56331c9ea106b.png new file mode 100644 index 0000000..6551c34 Binary files /dev/null and b/Lakeshore/manual/behavior/drag/56331c9ea106b.png differ diff --git a/Lakeshore/manual/behavior/drag/564d7e8d64902.png b/Lakeshore/manual/behavior/drag/564d7e8d64902.png new file mode 100644 index 0000000..e2ef425 Binary files /dev/null and b/Lakeshore/manual/behavior/drag/564d7e8d64902.png differ diff --git a/Lakeshore/manual/behavior/drag/README.md b/Lakeshore/manual/behavior/drag/README.md new file mode 100644 index 0000000..111c7bc --- /dev/null +++ b/Lakeshore/manual/behavior/drag/README.md @@ -0,0 +1,38 @@ +![](564d7e8d64902.png) + +应用了拖拽行为的实例可以被鼠标或手指（手机端）拖动。 + +### 属性面板： +![](56331c9e8e7f0.png) +- 方向：设置允许拖拽的方向。默认为：任意。可用选项有： + - 任意：表示可以在游戏界面平面内任意反向拖拽。 + - 水平：表示只可以在水平，也就是X轴方向拖拽。 + - 垂直：表示只可以在垂直，也就是Y轴方向拖拽。 +- 启用：设置拖拽是否在游戏初始化时就可用。默认为：是。也可以设置为“否”，然后在事件表中基于特定条件再启用拖拽行为。 + +------------ + +### 拖拽条件： +![](56331c9ea106b.png) +#### 若在拖拽： +判断当前实例是否正在被拖拽。【持续性触发】 +如果正在被拖拽，条件为真。 +此条件无属性设置窗口。 + +#### 拖拽开始： +当拖拽开始时。【一次性触发】 +特指拖拽开始的那一刻。 +此条件无属性社会窗口。 + +#### 拖拽结束： +当拖拽结束是。【一次性触发】 +特指拖拽结束的那一刻。 +此条件无属性设置窗口。 + +------------ + +### 拖拽动作： +![](56331c9e4e8f4.png) +#### 启用/禁用： +设置拖拽行为是否可用。 +![](56331c9e75218.png) \ No newline at end of file diff --git a/Lakeshore/manual/behavior/fadeInAndFadeOut/5636d3e3256e0.png b/Lakeshore/manual/behavior/fadeInAndFadeOut/5636d3e3256e0.png new file mode 100644 index 0000000..a29ecf9 Binary files /dev/null and b/Lakeshore/manual/behavior/fadeInAndFadeOut/5636d3e3256e0.png differ diff --git a/Lakeshore/manual/behavior/fadeInAndFadeOut/5636d3e339922.png b/Lakeshore/manual/behavior/fadeInAndFadeOut/5636d3e339922.png new file mode 100644 index 0000000..7996117 Binary files /dev/null and b/Lakeshore/manual/behavior/fadeInAndFadeOut/5636d3e339922.png differ diff --git a/Lakeshore/manual/behavior/fadeInAndFadeOut/5636d3e356adf.png b/Lakeshore/manual/behavior/fadeInAndFadeOut/5636d3e356adf.png new file mode 100644 index 0000000..53db68b Binary files /dev/null and b/Lakeshore/manual/behavior/fadeInAndFadeOut/5636d3e356adf.png differ diff --git a/Lakeshore/manual/behavior/fadeInAndFadeOut/5636d3e36ba8e.png b/Lakeshore/manual/behavior/fadeInAndFadeOut/5636d3e36ba8e.png new file mode 100644 index 0000000..cb25afd Binary files /dev/null and b/Lakeshore/manual/behavior/fadeInAndFadeOut/5636d3e36ba8e.png differ diff --git a/Lakeshore/manual/behavior/fadeInAndFadeOut/5636d3e3875b2.png b/Lakeshore/manual/behavior/fadeInAndFadeOut/5636d3e3875b2.png new file mode 100644 index 0000000..7a1b2a1 Binary files /dev/null and b/Lakeshore/manual/behavior/fadeInAndFadeOut/5636d3e3875b2.png differ diff --git a/Lakeshore/manual/behavior/fadeInAndFadeOut/5636d3e39cfa7.png b/Lakeshore/manual/behavior/fadeInAndFadeOut/5636d3e39cfa7.png new file mode 100644 index 0000000..ac6a02b Binary files /dev/null and b/Lakeshore/manual/behavior/fadeInAndFadeOut/5636d3e39cfa7.png differ diff --git a/Lakeshore/manual/behavior/fadeInAndFadeOut/564d7fa027576.png b/Lakeshore/manual/behavior/fadeInAndFadeOut/564d7fa027576.png new file mode 100644 index 0000000..dd9f795 Binary files /dev/null and b/Lakeshore/manual/behavior/fadeInAndFadeOut/564d7fa027576.png differ diff --git a/Lakeshore/manual/behavior/fadeInAndFadeOut/README.md b/Lakeshore/manual/behavior/fadeInAndFadeOut/README.md new file mode 100644 index 0000000..311d794 --- /dev/null +++ b/Lakeshore/manual/behavior/fadeInAndFadeOut/README.md @@ -0,0 +1,45 @@ +![](564d7fa027576.png) + +应用了淡入淡出行为的实例，会具备淡入淡出的效果。效果触发的条件，持续的时间由属性，条件或动作具体设定。 + +### 属性面板： +![](5636d3e3875b2.png) +- 开始便激活：实例创建的时候是否立即执行淡入淡出操作。如果选择“是”，那么实例加载后便立即执行淡入淡出操作。如果选择“否”，则实例正常加载，在特定的动作（淡入淡出动作-开始）执行后才出发淡入淡出操作。 +- 淡入时间：淡入过程经过的时间。实例透明度从0%过渡到100%所经过的时间。 +- 等待时间：淡入结束后，到淡出开始前的时间段。这段时间内实例的透明度保持100%，完全可见。如果设置为0，表示淡入后立即执行淡出操作。 +- 淡出时间：淡出过程经过的时间。实例透明度从100%过渡到0%所经过的时间。 +- 淡出后：设置实例淡出后是否立即被销毁。可以设置“销毁”或“不销毁。 + +------------ + +### 淡入淡出条件： +![](5636d3e39cfa7.png) +#### 淡入完成时： +当淡入动作完成时。【一次性触发】 +此条件无属性设置窗口。 +#### 等待完成时： +等待时间结束，也就是淡出开始前一刻。【一次性触发】 +此条件无属性设置窗口。 +#### 淡出完成时： +当淡出动作完成时。【一次性触发】 +此条件无属性设置窗口。 + +------------ + +### 淡入淡出动作： +![](5636d3e339922.png) +#### 开始： +开始淡入淡出。如果应用了淡入淡出行为的实例设置“开始便激活”为“否”，并且默认透明度为100%，则淡入开始时会先把透明度降到0%，然后基于淡入时间增长到100%，完成淡入，经过等待时间，再执行淡出操作。 +此动作无属性设置窗口。 +#### 淡入时间： +设置淡入经过的时间。（单位：秒） +![](5636d3e356adf.png) +#### 等待时间： +设置淡入结束到淡出开始之间的时间。（单位：秒） +![](5636d3e36ba8e.png) +#### 淡出时间： +设置淡出经过的时间。（单位：秒） +![](5636d3e3256e0.png) +#### 重置： +重置淡入淡出行为，重新开始淡入淡出操作执行。如果淡入淡出已经执行完成，便重新再执行一次。如果淡入淡出正在执行中，便从最开始的淡入重新开始淡入淡出操作。 +此动作无属性设置窗口。 \ No newline at end of file diff --git a/Lakeshore/manual/behavior/flicker/563705030df4a.png b/Lakeshore/manual/behavior/flicker/563705030df4a.png new file mode 100644 index 0000000..4a4a63b Binary files /dev/null and b/Lakeshore/manual/behavior/flicker/563705030df4a.png differ diff --git a/Lakeshore/manual/behavior/flicker/5637050324eda.png b/Lakeshore/manual/behavior/flicker/5637050324eda.png new file mode 100644 index 0000000..911e50f Binary files /dev/null and b/Lakeshore/manual/behavior/flicker/5637050324eda.png differ diff --git a/Lakeshore/manual/behavior/flicker/563863d7d26cc.png b/Lakeshore/manual/behavior/flicker/563863d7d26cc.png new file mode 100644 index 0000000..c9bf566 Binary files /dev/null and b/Lakeshore/manual/behavior/flicker/563863d7d26cc.png differ diff --git a/Lakeshore/manual/behavior/flicker/564d7fe45855d.png b/Lakeshore/manual/behavior/flicker/564d7fe45855d.png new file mode 100644 index 0000000..b297bbd Binary files /dev/null and b/Lakeshore/manual/behavior/flicker/564d7fe45855d.png differ diff --git a/Lakeshore/manual/behavior/flicker/README.md b/Lakeshore/manual/behavior/flicker/README.md new file mode 100644 index 0000000..1d62c40 --- /dev/null +++ b/Lakeshore/manual/behavior/flicker/README.md @@ -0,0 +1,40 @@ +![](564d7fe45855d.png) + +应用了闪烁行为的实例，可以实现闪烁的效果。具体的闪烁参数需要在动作里设置。 + +### 属性面板： +闪烁行为没有特有的属性面板。 + +------------ + +### 闪烁条件： +![](563863d7d26cc.png) + +#### 若在闪烁： +如果实例正在执行闪烁效果，条件为真。【持续性触发】 +此条件无属性设置窗口。 + +#### 每次闪烁： +每闪烁一次，触发一次。【一次性触发】 +执行一次显示，一次隐藏后为完成一次闪烁。每完成一次闪烁触发一次。 +此条件无属性设置窗口。 + +#### 闪烁完成： +当闪烁完成时。【一次性触发】 +闪烁动作里所设置的闪烁重复次数都执行完毕即为闪烁完成。 +此条件无属性设置窗口。 + +------------ + +### 闪烁动作： +![](563705030df4a.png) +#### 开始： +设置并开始闪烁效果。 +- 显示时间：闪烁过程中实例呈现显示状态的时间。 +- 隐藏时间：闪烁过程中实例呈现隐藏状态的时间。 +- 重复次数：执行一次显示，一次隐藏后为完成一次闪烁。重复次数为设置闪烁要执行几次。默认值为0，表示不停重复，也就是不断闪烁。但可以通过下边的停止动作停止闪烁。 + +![](5637050324eda.png) +#### 停止： +停止闪烁效果。 +此动作无属性设置窗口。 \ No newline at end of file diff --git a/Lakeshore/manual/behavior/navigate/564c45fdbcdc1.png b/Lakeshore/manual/behavior/navigate/564c45fdbcdc1.png new file mode 100644 index 0000000..24ebde1 Binary files /dev/null and b/Lakeshore/manual/behavior/navigate/564c45fdbcdc1.png differ diff --git a/Lakeshore/manual/behavior/navigate/564c45fdcefc8.png b/Lakeshore/manual/behavior/navigate/564c45fdcefc8.png new file mode 100644 index 0000000..8664bdd Binary files /dev/null and b/Lakeshore/manual/behavior/navigate/564c45fdcefc8.png differ diff --git a/Lakeshore/manual/behavior/navigate/564c45fddc1c7.png b/Lakeshore/manual/behavior/navigate/564c45fddc1c7.png new file mode 100644 index 0000000..541263e Binary files /dev/null and b/Lakeshore/manual/behavior/navigate/564c45fddc1c7.png differ diff --git a/Lakeshore/manual/behavior/navigate/564c45fe02184.png b/Lakeshore/manual/behavior/navigate/564c45fe02184.png new file mode 100644 index 0000000..f6942b0 Binary files /dev/null and b/Lakeshore/manual/behavior/navigate/564c45fe02184.png differ diff --git a/Lakeshore/manual/behavior/navigate/564c45fe0bc49.png b/Lakeshore/manual/behavior/navigate/564c45fe0bc49.png new file mode 100644 index 0000000..93daf50 Binary files /dev/null and b/Lakeshore/manual/behavior/navigate/564c45fe0bc49.png differ diff --git a/Lakeshore/manual/behavior/navigate/564c45fe1999a.png b/Lakeshore/manual/behavior/navigate/564c45fe1999a.png new file mode 100644 index 0000000..8eed4d5 Binary files /dev/null and b/Lakeshore/manual/behavior/navigate/564c45fe1999a.png differ diff --git a/Lakeshore/manual/behavior/navigate/564c45fe35efd.png b/Lakeshore/manual/behavior/navigate/564c45fe35efd.png new file mode 100644 index 0000000..c8aea6f Binary files /dev/null and b/Lakeshore/manual/behavior/navigate/564c45fe35efd.png differ diff --git a/Lakeshore/manual/behavior/navigate/564c45fe4a514.png b/Lakeshore/manual/behavior/navigate/564c45fe4a514.png new file mode 100644 index 0000000..a4b259c Binary files /dev/null and b/Lakeshore/manual/behavior/navigate/564c45fe4a514.png differ diff --git a/Lakeshore/manual/behavior/navigate/564c45fe6a125.png b/Lakeshore/manual/behavior/navigate/564c45fe6a125.png new file mode 100644 index 0000000..17989be Binary files /dev/null and b/Lakeshore/manual/behavior/navigate/564c45fe6a125.png differ diff --git a/Lakeshore/manual/behavior/navigate/564c45fe98608.png b/Lakeshore/manual/behavior/navigate/564c45fe98608.png new file mode 100644 index 0000000..5e59f1f Binary files /dev/null and b/Lakeshore/manual/behavior/navigate/564c45fe98608.png differ diff --git a/Lakeshore/manual/behavior/navigate/README.md b/Lakeshore/manual/behavior/navigate/README.md new file mode 100644 index 0000000..84e4587 --- /dev/null +++ b/Lakeshore/manual/behavior/navigate/README.md @@ -0,0 +1,63 @@ +![](564c45fe6a125.png) + +添加了寻路行为的实例，可以基于指定的Tiled地图中设定的路径来自动行进。 + +### 属性面板 +![](564c45fe0bc49.png) +- Tiled实例名：Tile map地图所在的Tiled组件的名称。Lakeshore寻路系统基于Tiled Map Editor软件制作的Tile Map，在Tiled组件的属性中指定Tiled Map Editor的TMX文件，便可在LakeShore中呈现与Tiled Map Editor软件中一样的地图效果。 +- 障碍层名：Tile map地图中作为障碍层的图层名称。绑定寻路行为的对象在寻路过程中会避开障碍物层进行移动。这个层名取自Tiled map Editor软件中设置的层名，通常使用纯色块来设置障碍物层。如下图： +![](564c45fe98608.png) +- 移动速度：寻路的移动速度。默认值为“60”。（单位：像素/秒） + +------------ + + +### 寻路条件 +![](564c45fe1999a.png) +#### 初始化完成 +当寻路的初始化完成时。【一次性触发】 +这里的初始化完毕指寻路网格数据加载完毕，可以正常执行寻路操作了。一般情况下，在设置寻路目标点动作的时候，都要使用此条件，也就是在寻路初始化完成后，设置目标点坐标。 +此条件无属性设置窗口。 +#### 处于非行路区域 +当指定坐标点处于非行路区域时。【持续性触发】 +也就是判断指定坐标是不是在不可走的区域。 +![](564c45fe35efd.png) +#### 处于行路区域 +当指定坐标点处于行路区域时。【持续性触发】 +也就是判断指定坐标是不是在可走的区域。 +![](564c45fe4a514.png) +#### 当准备寻路时 +当实例准备开始寻路时。【一次性触发】 +当实例绑定寻路行为后，在开始寻路之前会触发。 +此条件无属性设置窗口。 +#### 当寻路完成时 +当实例寻路完成时。【一次性触发】 +当实例寻路完毕停止移动时触发。 +此条件无属性设置窗口。 +#### 当分段完成时 +当对象寻路分阶段完成时。【一次性触发】 +通常情况下，一次寻路可能会得到N个节点信息，那么，实例每到达一个节点，便会触发一次。 +此条件无属性设置窗口。 +#### 当寻路进行时 +如果正在寻路。【持续性触发】 +判断当前实例是否正在进行寻路。 +此条件无属性设置窗口。 + +------------ + + +### 寻路动作 +![](564c45fdbcdc1.png) +#### 设置地图 +设置用于寻路的Tile Map地图。 +- Tiled实例名：输入放置Tile Map地图的Tiled实例的名字。 +- 障碍层名：输入作为障碍层的图层名。 + +![](564c45fddc1c7.png) +#### 移动速度 +设置寻路的移动速度。默认值为“60”。（单位：像素/秒） +![](564c45fe02184.png) +#### 目标坐标 +设置寻路的终点目标的坐标。 +坐标值会转化为格子的中心点坐标值，格子的宽高由Tiledmap地图文件的设置决定。 +![](564c45fdcefc8.png) diff --git a/Lakeshore/manual/behavior/nodeMoves/564d7b1e510cb.png b/Lakeshore/manual/behavior/nodeMoves/564d7b1e510cb.png new file mode 100644 index 0000000..cb7db2a Binary files /dev/null and b/Lakeshore/manual/behavior/nodeMoves/564d7b1e510cb.png differ diff --git a/Lakeshore/manual/behavior/nodeMoves/564d7b1ebe5f7.png b/Lakeshore/manual/behavior/nodeMoves/564d7b1ebe5f7.png new file mode 100644 index 0000000..1874c71 Binary files /dev/null and b/Lakeshore/manual/behavior/nodeMoves/564d7b1ebe5f7.png differ diff --git a/Lakeshore/manual/behavior/nodeMoves/564d7b1ec7391.png b/Lakeshore/manual/behavior/nodeMoves/564d7b1ec7391.png new file mode 100644 index 0000000..5cd5c11 Binary files /dev/null and b/Lakeshore/manual/behavior/nodeMoves/564d7b1ec7391.png differ diff --git a/Lakeshore/manual/behavior/nodeMoves/564d7b1ee344c.png b/Lakeshore/manual/behavior/nodeMoves/564d7b1ee344c.png new file mode 100644 index 0000000..eb86164 Binary files /dev/null and b/Lakeshore/manual/behavior/nodeMoves/564d7b1ee344c.png differ diff --git a/Lakeshore/manual/behavior/nodeMoves/564d7b1eefdca.png b/Lakeshore/manual/behavior/nodeMoves/564d7b1eefdca.png new file mode 100644 index 0000000..960f575 Binary files /dev/null and b/Lakeshore/manual/behavior/nodeMoves/564d7b1eefdca.png differ diff --git a/Lakeshore/manual/behavior/nodeMoves/564d7c4043ee1.png b/Lakeshore/manual/behavior/nodeMoves/564d7c4043ee1.png new file mode 100644 index 0000000..776b7f0 Binary files /dev/null and b/Lakeshore/manual/behavior/nodeMoves/564d7c4043ee1.png differ diff --git a/Lakeshore/manual/behavior/nodeMoves/README.md b/Lakeshore/manual/behavior/nodeMoves/README.md new file mode 100644 index 0000000..f26349e --- /dev/null +++ b/Lakeshore/manual/behavior/nodeMoves/README.md @@ -0,0 +1,49 @@ +![](564d7b1eefdca.png) + +添加了节点移动行为的实例，可以按照设定的节点移动。相邻的两个节点间是直线运动。与寻路行为不同的是，用户需要指定移动中每一个节点的坐标，但不再需要依赖于Tile Map地图。 + +### 属性面板 +![](564d7b1ec7391.png) +- 移动速度：设置节点移动的速度。默认值60.（单位：像素/秒） + +------------ + + +### 节点移动条件 +![](564d7b1ee344c.png) +#### 当准备移动时 +当实例准备移动时。【一次性触发】 +可以看作是实例对于节点移动行为的一种状态的切换，即从静止到移动状态的切换，但此时，实例还是处于静止状态。 +此条件无属性设置窗口。 +#### 到达终点时 +当实例经过所有节点后，到达最后一个节点时。【一次性触发】 +此条件无属性设置窗口。 +#### 到达节点时 +当实例到达路径上每一个节点时。【一次性触发】 +比如路径上设有A，B，C，D四个节点，那么到达A，B，C，D中的每一个节点都会触发。 +此条件无属性设置窗口。 +#### 当移动进行时 +当节点移动的实例处于节点移动中时。【持续性触发】 + +------------ + + +### 节点移动动作 +![](564d7b1e510cb.png) +#### 移动速度 +设置节点移动的速度。 +![](564d7b1ebe5f7.png) +#### 节点路径 +设置节点移动中的每个节点坐标。 +此处节点的表达式表达形式可分为静态与动态数据。 +- 静态数据 +静态数据可用如下表达形式： +`(100,100),(150,200),(180,400)` +本例中共设置了三个节点坐标信息。每个括号代表1个节点的的坐标信息，括号中的第1个数值代表水平坐标，第2个数值代表垂直坐标。 +- 动态数据 +动态数据可用如下表达形式： +`(mc1.x,mc1.y),(mc2.x,mc2.y),(mc3.x,mc3.y)` +本例中，同样设置了三个节点坐标信息，mc1，mc2，mc3分别代表场景中的三个实例的名称。那么三个坐标就分别是三个实例在游戏中的位置。mc1.x为mc1的水平坐标，mc1.y为mc1的垂直坐标。 + +![](564d7c4043ee1.png) + diff --git a/Lakeshore/manual/behavior/outOfBounds/564d7e49e52dc.png b/Lakeshore/manual/behavior/outOfBounds/564d7e49e52dc.png new file mode 100644 index 0000000..d42bf34 Binary files /dev/null and b/Lakeshore/manual/behavior/outOfBounds/564d7e49e52dc.png differ diff --git a/Lakeshore/manual/behavior/outOfBounds/README.md b/Lakeshore/manual/behavior/outOfBounds/README.md new file mode 100644 index 0000000..fa2bb8b --- /dev/null +++ b/Lakeshore/manual/behavior/outOfBounds/README.md @@ -0,0 +1,16 @@ +![](564d7e49e52dc.png) + +应用了出界销毁行为的实例，当它移动到游戏画面外之后便会自动销毁。这样可以很好的节省系统资源。比如打飞机中的子弹和敌机，在飞出游戏画面后便对游戏没有意义了，便可以应用出界销毁行为，在飞出画面后自动销毁。 + +### 属性面板 +出界销毁行为没有特有的属性。 + +------------ + +### 出界销毁条件 +出界销毁行为没有特有的条件。 + +------------ + +### 出界销毁动作 +出界销毁行为没有特有的动作。 \ No newline at end of file diff --git a/Lakeshore/manual/behavior/pin/5633218020188.png b/Lakeshore/manual/behavior/pin/5633218020188.png new file mode 100644 index 0000000..a680007 Binary files /dev/null and b/Lakeshore/manual/behavior/pin/5633218020188.png differ diff --git a/Lakeshore/manual/behavior/pin/563321802fbf2.png b/Lakeshore/manual/behavior/pin/563321802fbf2.png new file mode 100644 index 0000000..0de57e8 Binary files /dev/null and b/Lakeshore/manual/behavior/pin/563321802fbf2.png differ diff --git a/Lakeshore/manual/behavior/pin/563321803b5d1.png b/Lakeshore/manual/behavior/pin/563321803b5d1.png new file mode 100644 index 0000000..7c84808 Binary files /dev/null and b/Lakeshore/manual/behavior/pin/563321803b5d1.png differ diff --git a/Lakeshore/manual/behavior/pin/564d7edd467c2.png b/Lakeshore/manual/behavior/pin/564d7edd467c2.png new file mode 100644 index 0000000..18a2077 Binary files /dev/null and b/Lakeshore/manual/behavior/pin/564d7edd467c2.png differ diff --git a/Lakeshore/manual/behavior/pin/README.md b/Lakeshore/manual/behavior/pin/README.md new file mode 100644 index 0000000..792cb66 --- /dev/null +++ b/Lakeshore/manual/behavior/pin/README.md @@ -0,0 +1,30 @@ +![](564d7edd467c2.png) + +应用了别针行为的实例可以固定在某个指定实例上，根据固定模式的不同会以不同的方式跟随指定实例运动。 +### 属性面板： +别针行为没有特有的属性。 + +------------ + +### 别针条件： +![](563321803b5d1.png) +#### 有固定目标： +如果当前实例固定于某个其他实例的话，条件为真。【持续性触发】 +此条件无属性设置窗口。 + +------------ + +### 别针动作： +![](5633218020188.png) +#### 固定到目标： +把当前所选实例固定于其他实例。 +- 目标对象：指定所选实例要固定的目标实例。 +如果目标实例不止一个，则选取第一个为固定目标。比如打飞机中的敌机，每隔一段时间便在随机的位置出现一个，他们是基于同一个实例由系统创建的。如果用动作把旗子实例固定在敌机实例上，那么只会固定在第一架敌机上。（一般无法确定那架是第一架，所以一般不会这么使用） +- 模式：选择以那种模式固定到目标实例上。默认为：位置与角度模式。可选项有： + - 位置与角度模式：所选实例的位置和角度都会随着目标实例变动。 + - 仅位置模式：所选实例的位置会随着目标实例变动，角度不会随着变动。 + - 仅角度模式：所选实例的角度会随着目标实例变动，位置不会随着变动。 + - 绳索模式：所选实例像是由绳子拴在目标实力上一样，随着目标实例运动，只有位置变动，角度不会跟随目标实例。表现为所选实例的位置变动不是实时跟随目标实例的，只有当所选实例与目标实例的距离大于初始值时，所选实例才会像被绳索拖拽一样，跟随目标实例变动位置。如果所选实例和目标实例间的距离小于初始值，那么目标实例的变动不会影响所选实例。也就是目标实例只能拉动所选实例，无法推动所选实例。 + - 棍子模式：所选实例与目标实例之间像是由棍子连接，所选实例的位置跟随目标实例，角度不会跟随。表现为，所选实例和目标之间的距离始终保持着初始值不变。目标实例既能拉动所选实例，也能推动所选实例。 + +![](563321802fbf2.png) \ No newline at end of file diff --git a/Lakeshore/manual/behavior/rotation/563305200cf38.png b/Lakeshore/manual/behavior/rotation/563305200cf38.png new file mode 100644 index 0000000..6f515b4 Binary files /dev/null and b/Lakeshore/manual/behavior/rotation/563305200cf38.png differ diff --git a/Lakeshore/manual/behavior/rotation/563305202a1af.png b/Lakeshore/manual/behavior/rotation/563305202a1af.png new file mode 100644 index 0000000..dfd7a2f Binary files /dev/null and b/Lakeshore/manual/behavior/rotation/563305202a1af.png differ diff --git a/Lakeshore/manual/behavior/rotation/5633052035b49.png b/Lakeshore/manual/behavior/rotation/5633052035b49.png new file mode 100644 index 0000000..90a385b Binary files /dev/null and b/Lakeshore/manual/behavior/rotation/5633052035b49.png differ diff --git a/Lakeshore/manual/behavior/rotation/5633052043608.png b/Lakeshore/manual/behavior/rotation/5633052043608.png new file mode 100644 index 0000000..1dfbaa8 Binary files /dev/null and b/Lakeshore/manual/behavior/rotation/5633052043608.png differ diff --git a/Lakeshore/manual/behavior/rotation/5633052052ba6.png b/Lakeshore/manual/behavior/rotation/5633052052ba6.png new file mode 100644 index 0000000..5fd761a Binary files /dev/null and b/Lakeshore/manual/behavior/rotation/5633052052ba6.png differ diff --git a/Lakeshore/manual/behavior/rotation/564c2a211ef6d.png b/Lakeshore/manual/behavior/rotation/564c2a211ef6d.png new file mode 100644 index 0000000..dc86de4 Binary files /dev/null and b/Lakeshore/manual/behavior/rotation/564c2a211ef6d.png differ diff --git a/Lakeshore/manual/behavior/rotation/README.md b/Lakeshore/manual/behavior/rotation/README.md new file mode 100644 index 0000000..97390da --- /dev/null +++ b/Lakeshore/manual/behavior/rotation/README.md @@ -0,0 +1,26 @@ +![](564c2a211ef6d.png) + +应用了旋转行为的实例会自发的以指定速度旋转。旋转中心为实例锚点。 +### 属性面板： +![](5633052052ba6.png) +- 速度：旋转的速度（单位：度/秒）。默认值为180。值为正时为顺时针旋转。值为负时为逆时针旋转。 +- 加速度：旋转的加速度。默认值为0，此时为匀速旋转。值为正时是顺时针加速度（对逆时针旋转就是减速度），值为负时是顺时针减速度（对逆时针旋转就是加速度）。例如：速度为180，加速度为-10，那么实例就会先以180度/秒顺时针旋转，但越转越慢。速度为0后，便开始逆时针旋转，并越转越快。 + +------------ +### 旋转条件 +旋转行为没有特有条件。 + +------------ +### 旋转动作 +![](563305200cf38.png) +#### 旋转速度 +设置旋转的速度。 +![](5633052043608.png) + +#### 旋转加速度 +设置旋转的加速度。 +![](5633052035b49.png) + +#### 启用/禁用 +设置旋转行为是否可用。 +![](563305202a1af.png) \ No newline at end of file diff --git a/Lakeshore/manual/behavior/scrolling/56331047bee61.png b/Lakeshore/manual/behavior/scrolling/56331047bee61.png new file mode 100644 index 0000000..66748de Binary files /dev/null and b/Lakeshore/manual/behavior/scrolling/56331047bee61.png differ diff --git a/Lakeshore/manual/behavior/scrolling/564c2a66f2961.png b/Lakeshore/manual/behavior/scrolling/564c2a66f2961.png new file mode 100644 index 0000000..a0a3cb0 Binary files /dev/null and b/Lakeshore/manual/behavior/scrolling/564c2a66f2961.png differ diff --git a/Lakeshore/manual/behavior/scrolling/README.md b/Lakeshore/manual/behavior/scrolling/README.md new file mode 100644 index 0000000..40d5fae --- /dev/null +++ b/Lakeshore/manual/behavior/scrolling/README.md @@ -0,0 +1,22 @@ +![](564c2a66f2961.png) + +应用了滚屏行为的实例会在游戏画面中滚动显示。以向左滚屏为例，实例在游戏画面中会以指定速度由右向左平移，当实例整体由左侧边缘完全移出画面后，实例会由右侧边缘进入，继续由右向左平移。一般应用滚屏行为的是游戏的背景图，一般为横轴或纵轴过关游戏，比如打飞机游戏为纵轴，超级玛丽为横轴。 + +### 属性面板： +![](56331047bee61.png) +- 滚动方向：实例平移的方向。默认为：向上。可选项有： + - 向上 + - 向下 + - 向左 + - 向右 +- 速度：实例平移的速度（单位：像素/秒）。默认值为：180。 + +------------ + +### 滚屏条件: +滚屏行为没有特有条件。 + +------------ + +### 滚屏动作： +滚屏行为没有特有动作。 \ No newline at end of file diff --git a/Lakeshore/manual/behavior/timer/5636c2ef6c451.png b/Lakeshore/manual/behavior/timer/5636c2ef6c451.png new file mode 100644 index 0000000..b7d2a49 Binary files /dev/null and b/Lakeshore/manual/behavior/timer/5636c2ef6c451.png differ diff --git a/Lakeshore/manual/behavior/timer/5636c2ef841e0.png b/Lakeshore/manual/behavior/timer/5636c2ef841e0.png new file mode 100644 index 0000000..85e172f Binary files /dev/null and b/Lakeshore/manual/behavior/timer/5636c2ef841e0.png differ diff --git a/Lakeshore/manual/behavior/timer/5636c2ef8fa12.png b/Lakeshore/manual/behavior/timer/5636c2ef8fa12.png new file mode 100644 index 0000000..cbc3975 Binary files /dev/null and b/Lakeshore/manual/behavior/timer/5636c2ef8fa12.png differ diff --git a/Lakeshore/manual/behavior/timer/5636c2ef9b078.png b/Lakeshore/manual/behavior/timer/5636c2ef9b078.png new file mode 100644 index 0000000..808c2eb Binary files /dev/null and b/Lakeshore/manual/behavior/timer/5636c2ef9b078.png differ diff --git a/Lakeshore/manual/behavior/timer/5636c2efb933a.png b/Lakeshore/manual/behavior/timer/5636c2efb933a.png new file mode 100644 index 0000000..9ae3d4e Binary files /dev/null and b/Lakeshore/manual/behavior/timer/5636c2efb933a.png differ diff --git a/Lakeshore/manual/behavior/timer/5636c2efd15f0.png b/Lakeshore/manual/behavior/timer/5636c2efd15f0.png new file mode 100644 index 0000000..1b816bd Binary files /dev/null and b/Lakeshore/manual/behavior/timer/5636c2efd15f0.png differ diff --git a/Lakeshore/manual/behavior/timer/5636c2efe445f.png b/Lakeshore/manual/behavior/timer/5636c2efe445f.png new file mode 100644 index 0000000..fbec2ab Binary files /dev/null and b/Lakeshore/manual/behavior/timer/5636c2efe445f.png differ diff --git a/Lakeshore/manual/behavior/timer/5636c2efeee90.png b/Lakeshore/manual/behavior/timer/5636c2efeee90.png new file mode 100644 index 0000000..a91ce04 Binary files /dev/null and b/Lakeshore/manual/behavior/timer/5636c2efeee90.png differ diff --git a/Lakeshore/manual/behavior/timer/5636c2f00844a.png b/Lakeshore/manual/behavior/timer/5636c2f00844a.png new file mode 100644 index 0000000..e932797 Binary files /dev/null and b/Lakeshore/manual/behavior/timer/5636c2f00844a.png differ diff --git a/Lakeshore/manual/behavior/timer/564d7f35a9df8.png b/Lakeshore/manual/behavior/timer/564d7f35a9df8.png new file mode 100644 index 0000000..7f31135 Binary files /dev/null and b/Lakeshore/manual/behavior/timer/564d7f35a9df8.png differ diff --git a/Lakeshore/manual/behavior/timer/README.md b/Lakeshore/manual/behavior/timer/README.md new file mode 100644 index 0000000..304ee97 --- /dev/null +++ b/Lakeshore/manual/behavior/timer/README.md @@ -0,0 +1,40 @@ +![](564d7f35a9df8.png) + +应用了计时器行为的实例可以在实例内部创建计时器以实现计时功能。通过这个行为就可以有特定的事件来触发一个计时器，并在计时中或计时结束时触发其他事件。比如：点击炸弹，炸弹开始倒计时，每过一秒，炸弹上的倒数数值就减少一秒，倒数结束，炸弹爆炸，这期间还可以通过其他事件终止计时。 + +### 属性面板 +计时器行为没有特有的属性。 + +------------ + +### 计时器条件 +![](5636c2efe445f.png) +#### 每循环一次： +计时器按照每X秒循环一次，共循环N次的原理来计时。当前条件为,每完成一次循环触发一次。【一次性触发】 +“标签”为必填项，因为一个应用了计时器行为的实例可以创建多个计时器，而每个计时器以“标签”来彼此区分。只有指定了“标签”，程序才知道你要使用和监测触发的是那一个计时器。 +![](5636c2f00844a.png) +#### 当计时完成： +创建计时器时会设置循环次数，当设置的次数完成时，计时完成，当前条件触发。【一次性触发】 +如果计时器的循环次数设置为0，则表示无限次循环，则如果不使用计时停止动作的话计时便永远不会完成，当前条件永远不会触发。 +当前条件同样要指定“标签”。 +![](5636c2efeee90.png) + +------------ + +### 计时器动作： +![](5636c2ef6c451.png) +#### 开始计时： +在应用了计时器行为的实例上创建一个计时器。计时器按照每X秒循环一次，共循环N次的原理来计时。所以需要指定每次循环的时间间隔，共循环几次，还有要为计时器指定标签。标签为识别计时器的标识，需要使用计时器时要指定标签名。 +![](5636c2ef8fa12.png) +#### 停止计时： +终止计时。两种情况下计时器会停止，一种是达到设置的循环次数，一种便是被动作终止。当前动作便可以终止一个指定的计时器，通过填写“标签”来指定要终止的计时器。 +![](5636c2ef9b078.png) +#### 重新计时： +重置计时器。重新从第一次循环开始指定计时器。无论计时器正处于计时循环中，还是已经计时完成。通过填写“标签”来指定要重置的计时器。 +![](5636c2efd15f0.png) +#### 暂停计时： +暂时停止计时中的计时器。必须计时器循环到第三次，当前行为暂时停止计时器在第三次循环上，之后通过下边的恢复计时动作可以从第三次开始继续计时。通过填写“标签”来指定要暂停的计时器。 +![](5636c2efb933a.png) +#### 恢复计时： +恢复被暂停的计时器，继续计时。暂停在第几次计时，恢复便从第几次开始继续计时。通过填写“标签”来指定要恢复的计时器。 +![](5636c2ef841e0.png) \ No newline at end of file diff --git a/Lakeshore/manual/behavior/turret/564c3523788cc.png b/Lakeshore/manual/behavior/turret/564c3523788cc.png new file mode 100644 index 0000000..3c5b3a3 Binary files /dev/null and b/Lakeshore/manual/behavior/turret/564c3523788cc.png differ diff --git a/Lakeshore/manual/behavior/turret/564c352390f72.png b/Lakeshore/manual/behavior/turret/564c352390f72.png new file mode 100644 index 0000000..231cd94 Binary files /dev/null and b/Lakeshore/manual/behavior/turret/564c352390f72.png differ diff --git a/Lakeshore/manual/behavior/turret/564c3523a5a3f.png b/Lakeshore/manual/behavior/turret/564c3523a5a3f.png new file mode 100644 index 0000000..248cc03 Binary files /dev/null and b/Lakeshore/manual/behavior/turret/564c3523a5a3f.png differ diff --git a/Lakeshore/manual/behavior/turret/564c3523b4222.png b/Lakeshore/manual/behavior/turret/564c3523b4222.png new file mode 100644 index 0000000..2edc942 Binary files /dev/null and b/Lakeshore/manual/behavior/turret/564c3523b4222.png differ diff --git a/Lakeshore/manual/behavior/turret/564c3523c16de.png b/Lakeshore/manual/behavior/turret/564c3523c16de.png new file mode 100644 index 0000000..6ae7b25 Binary files /dev/null and b/Lakeshore/manual/behavior/turret/564c3523c16de.png differ diff --git a/Lakeshore/manual/behavior/turret/564c3523d7c53.png b/Lakeshore/manual/behavior/turret/564c3523d7c53.png new file mode 100644 index 0000000..98d3aab Binary files /dev/null and b/Lakeshore/manual/behavior/turret/564c3523d7c53.png differ diff --git a/Lakeshore/manual/behavior/turret/564c3523e4631.png b/Lakeshore/manual/behavior/turret/564c3523e4631.png new file mode 100644 index 0000000..a96595c Binary files /dev/null and b/Lakeshore/manual/behavior/turret/564c3523e4631.png differ diff --git a/Lakeshore/manual/behavior/turret/564c3523f1eb3.png b/Lakeshore/manual/behavior/turret/564c3523f1eb3.png new file mode 100644 index 0000000..4107683 Binary files /dev/null and b/Lakeshore/manual/behavior/turret/564c3523f1eb3.png differ diff --git a/Lakeshore/manual/behavior/turret/564c352413fe0.png b/Lakeshore/manual/behavior/turret/564c352413fe0.png new file mode 100644 index 0000000..e29d5ac Binary files /dev/null and b/Lakeshore/manual/behavior/turret/564c352413fe0.png differ diff --git a/Lakeshore/manual/behavior/turret/564c352422c7f.png b/Lakeshore/manual/behavior/turret/564c352422c7f.png new file mode 100644 index 0000000..f7dbbe9 Binary files /dev/null and b/Lakeshore/manual/behavior/turret/564c352422c7f.png differ diff --git a/Lakeshore/manual/behavior/turret/564c358f71590.png b/Lakeshore/manual/behavior/turret/564c358f71590.png new file mode 100644 index 0000000..07180e4 Binary files /dev/null and b/Lakeshore/manual/behavior/turret/564c358f71590.png differ diff --git a/Lakeshore/manual/behavior/turret/README.md b/Lakeshore/manual/behavior/turret/README.md new file mode 100644 index 0000000..bdd662b --- /dev/null +++ b/Lakeshore/manual/behavior/turret/README.md @@ -0,0 +1,72 @@ +![](564c352422c7f.png) + +添加了炮塔行为的实例，便具备了塔防游戏中，炮塔的自动索敌，自动攻击等功能。 + +### 属性面板 +![](564c3523f1eb3.png) +- 攻击范围：设置炮塔的攻击范围。默认值为“300”。（单位：像素） +- 发射间隔：设置炮塔每发炮弹的间隔。默认值为“1”。（单位：秒） +- 旋转速度：设置炮塔攻击时自身的旋转速度。默认值为“300“。（单位：度/帧） +- 索敌模式：设定炮塔锁定目标的优先级。默认为“首先进入视野”，可选项有： + - 首先进入视野：先进入炮塔视野内的为优先目标。也就是只有当最先进入的销毁后，炮塔才会锁定第二个进入炮塔视野的目标。 + - 最近视野目标：炮塔优先锁定离自身最近的目标。也就是在攻击过程中，如果有目标比当前目标离炮塔更近，炮塔就会立即更换目标。 + - 自定义变量优先级：基于目标的自定义变量来设定索敌优先级。 +- 自定义变量：如果选用“自定义变量优先级”索敌模式，需要输入用于排布优先级的目标的自定义变量。假设目标为“坦克”，那么就要给“坦克”实例添加一个自定义变量，并命名为HP。那么此处就要输入HP。如果有多个目标，那么每个目标都要有一个名字相同的自定义变量，并填写在此处。 +- 自定义变量排序方式：设置选定的自定义变量的优先级排序方式。 + - 升序排列 + - 降序排列 + +------------ + + +### 炮塔条件 +![](564c352413fe0.png) +#### 当发射时 +当炮塔发射炮弹时。【一次性触发】 +此条件无属性设置窗口。 + +#### 若发现目标 +如果炮塔发现了攻击目标。【持续性触发】 +此条件无属性设置窗口。 +#### 当目标变更 +当炮塔变换了攻击目标。【一次性触发】 +此条件无属性设置窗口。 + +------------ + + +### 炮塔动作 +![](564c3523788cc.png) +#### 添加目标 +给炮塔添加一个攻击目标。 +![](564c3523c16de.png) +#### 清除目标 +从炮塔的攻击目标列表中清除一个攻击目标。 +![](564c3523a5a3f.png) +#### 清除所有目标 +清除炮塔攻击列表中的所有目标。 +此动作无属性设置窗口。 +#### 攻击范围 +设置炮塔的攻击范围。默认值为“300”。（单位：像素） +![](564c352390f72.png) +#### 发射间隔 +设置炮塔发射炮塔的时间间隔。默认值为“1”。（单位：秒） +![](564c358f71590.png) +#### 旋转速度 +设置炮塔在索敌攻击时的旋转速度。默认值为“10”。（单位：度/帧) +![](564c3523d7c53.png) +#### 索敌模式 +设置炮塔的索敌模式。 +- 模式：设置索敌模式。默认为“首先进入视野”，可选项有： + - 首先进入视野：先进入炮塔视野内的为优先目标。也就是只有当最先进入的销毁后，炮塔才会锁定第二个进入炮塔视野的目标。 + - 最近视野目标：炮塔优先锁定离自身最近的目标。也就是在攻击过程中，如果有目标比当前目标离炮塔更近，炮塔就会立即更换目标。 + - 自定义变量优先级：基于自定义变量来设定索敌优先级。 +- 自定义变量：如果选用“自定义变量优先级”索敌模式，需要输入用于排布优先级的目标的自定义变量。假设目标为“坦克”，那么就要给“坦克”实例添加一个自定义变量，并命名为HP。那么此处就要输入HP。如果有多个目标，那么每个目标都要有一个名字相同的自定义变量，并填写在此处。 + +![](564c3523b4222.png) +#### 自定义变量排序方式 +当索敌模式为“自定义变量优先级”时，可以设定自定义变量的排序方式。默认为“升序排列”，可选项有： +- 升序排列 +- 降序排列 + +![](564c3523e4631.png) \ No newline at end of file diff --git a/Lakeshore/manual/commonElements/action/563b1cf233ba5.png b/Lakeshore/manual/commonElements/action/563b1cf233ba5.png new file mode 100644 index 0000000..06ba44e Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1cf233ba5.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1cf252ee7.png b/Lakeshore/manual/commonElements/action/563b1cf252ee7.png new file mode 100644 index 0000000..6b8ca1c Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1cf252ee7.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1cf263eed.png b/Lakeshore/manual/commonElements/action/563b1cf263eed.png new file mode 100644 index 0000000..85fe0c7 Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1cf263eed.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1cf287599.png b/Lakeshore/manual/commonElements/action/563b1cf287599.png new file mode 100644 index 0000000..0161954 Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1cf287599.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1cf293e6f.png b/Lakeshore/manual/commonElements/action/563b1cf293e6f.png new file mode 100644 index 0000000..1b8f400 Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1cf293e6f.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1cf2b2cc0.png b/Lakeshore/manual/commonElements/action/563b1cf2b2cc0.png new file mode 100644 index 0000000..c6ee87a Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1cf2b2cc0.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1cf2d02e2.png b/Lakeshore/manual/commonElements/action/563b1cf2d02e2.png new file mode 100644 index 0000000..6f574cb Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1cf2d02e2.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1cf302379.png b/Lakeshore/manual/commonElements/action/563b1cf302379.png new file mode 100644 index 0000000..184ec5d Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1cf302379.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1d04e02e2.png b/Lakeshore/manual/commonElements/action/563b1d04e02e2.png new file mode 100644 index 0000000..50ef136 Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1d04e02e2.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1d04ea7ba.png b/Lakeshore/manual/commonElements/action/563b1d04ea7ba.png new file mode 100644 index 0000000..207b02c Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1d04ea7ba.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1d051422b.png b/Lakeshore/manual/commonElements/action/563b1d051422b.png new file mode 100644 index 0000000..0c93bce Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1d051422b.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1d052d353.png b/Lakeshore/manual/commonElements/action/563b1d052d353.png new file mode 100644 index 0000000..0d0d469 Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1d052d353.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1d05377b4.png b/Lakeshore/manual/commonElements/action/563b1d05377b4.png new file mode 100644 index 0000000..d0057fd Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1d05377b4.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1d0552f2a.png b/Lakeshore/manual/commonElements/action/563b1d0552f2a.png new file mode 100644 index 0000000..96c2c10 Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1d0552f2a.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1d05770b9.png b/Lakeshore/manual/commonElements/action/563b1d05770b9.png new file mode 100644 index 0000000..cd54643 Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1d05770b9.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1d1c21e12.png b/Lakeshore/manual/commonElements/action/563b1d1c21e12.png new file mode 100644 index 0000000..8fc78a6 Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1d1c21e12.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1d1c39a60.png b/Lakeshore/manual/commonElements/action/563b1d1c39a60.png new file mode 100644 index 0000000..678d561 Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1d1c39a60.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1d1c454db.png b/Lakeshore/manual/commonElements/action/563b1d1c454db.png new file mode 100644 index 0000000..fac8508 Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1d1c454db.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1d1c55ac7.png b/Lakeshore/manual/commonElements/action/563b1d1c55ac7.png new file mode 100644 index 0000000..ef52e0c Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1d1c55ac7.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1d1c63d81.png b/Lakeshore/manual/commonElements/action/563b1d1c63d81.png new file mode 100644 index 0000000..81867a9 Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1d1c63d81.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1d1c8072b.png b/Lakeshore/manual/commonElements/action/563b1d1c8072b.png new file mode 100644 index 0000000..62db85b Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1d1c8072b.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1d1c96119.png b/Lakeshore/manual/commonElements/action/563b1d1c96119.png new file mode 100644 index 0000000..9ff4dd8 Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1d1c96119.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1d2d2f360.png b/Lakeshore/manual/commonElements/action/563b1d2d2f360.png new file mode 100644 index 0000000..b7b0790 Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1d2d2f360.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1d2d490f9.png b/Lakeshore/manual/commonElements/action/563b1d2d490f9.png new file mode 100644 index 0000000..61df851 Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1d2d490f9.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1d2d6297e.png b/Lakeshore/manual/commonElements/action/563b1d2d6297e.png new file mode 100644 index 0000000..4ab418b Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1d2d6297e.png differ diff --git a/Lakeshore/manual/commonElements/action/563b1d2d854d0.png b/Lakeshore/manual/commonElements/action/563b1d2d854d0.png new file mode 100644 index 0000000..639b0fd Binary files /dev/null and b/Lakeshore/manual/commonElements/action/563b1d2d854d0.png differ diff --git a/Lakeshore/manual/commonElements/action/565bfb650d83c.png b/Lakeshore/manual/commonElements/action/565bfb650d83c.png new file mode 100644 index 0000000..abf1d96 Binary files /dev/null and b/Lakeshore/manual/commonElements/action/565bfb650d83c.png differ diff --git a/Lakeshore/manual/commonElements/action/README.md b/Lakeshore/manual/commonElements/action/README.md new file mode 100644 index 0000000..45ef30b --- /dev/null +++ b/Lakeshore/manual/commonElements/action/README.md @@ -0,0 +1,135 @@ +精灵，按钮，文本框等大多数实例都具有的动作，我们定义为通用动作。这些动作是最基本，最常用的动作。 + +**快速链接：** + +|通用动作|| +|-----:|:-----| +|角度|[顺时针旋转](#顺时针旋转：)，[逆时针旋转](#逆时针旋转：)，[旋转到指定角度](#旋转到指定角度：)，[旋转指向指定坐标](#旋转指向指定坐标：)，[设置角度](#设置角度：)，[根据指定坐标设置角度](#根据指定坐标设置角度：)| +|其他|[制造](#制造：)，[销毁](#销毁：)，[启用](#启用：)| +|大小与位置|[朝指定角度移动](#朝指定角度移动：)，[朝自身方向移动](#朝自身方向移动：)，[坐标](#坐标：)，[相对其它实例坐标](#相对其它实例坐标：)，[缩放](#缩放：)，[水平缩放](#水平缩放：)，[垂直缩放](#垂直缩放：)，[大小](#大小：)，[水平坐标](#水平坐标：)，[垂直坐标](#垂直坐标：)| +|外观|[镜像](#镜像：)，[显隐](#显隐：)，[透明度](#透明度：)| +|实例自定义变量运算|[加法](#加法：)，[减法](#减法：)，[设置值](#设置值：)，[True/False](#True/False：)，[切换](#切换：)| +![](563b1cf233ba5.png) +### 角度 +#### 顺时针旋转： +以指定角速度顺时针旋转当前实例。 +配合持续性触发条件，每次条件触发，实例都会顺时针旋转指定的角度。 +配合一次性触发条件，则实例只会做一次指定角度的顺时针旋转。 +![](563b1d1c55ac7.png) +#### 逆时针旋转： +以指定角速度逆时针旋转当前实例。 +配合持续性触发条件，每次条件触发，实例都会逆时针旋转指定的角度。 +配合一次性触发条件，则实例只会做一次指定角度的逆时针旋转。 +![](563b1d052d353.png) +#### 旋转到指定角度： +以指定的角度B为速度，旋转到指定的角度A。 +“目标角度”即为角度A，“每次选装的角度”即为角度B。 +配合持续性触发条件， 每次条件触发，实例都会旋转角度B，直到实例达到角度A，实例便不会再继续旋转。 +配合一次性触发条件，则实例只会做一次角度为B的旋转，就算没有达到角度A也不会再继续旋转。 +![](563b1d2d490f9.png) +#### 旋转指向指定坐标： +以指定的角度为速度，旋转当前实例，使实例自身的X轴指向指定的坐标。 +配合持续性触发条件，每次条件触发，实例都会旋转指定角度，直到实例自身X轴指向指定坐标，实例便不会再继续旋转。 +配合一次性触发条件，则实例只会做一次指定角度的旋转，就算实例自身X轴没有达到指定坐标也不会再继续旋转。 +![](563b1d2d6297e.png) +#### 设置角度： +设置当前实例的角度。 +实例将直接跳转到指定角度，没有旋转过程。 +![](563b1d05770b9.png) +#### 根据指定坐标设置角度： +设置当前实例角度，使其自身的X轴指向指定坐标。 +实例将直接跳转指向坐标，没有旋转过程。 +![](563b1cf302379.png) +### 其他 +#### 制造： +在当前实例位置制造其他实例。 + - 实例名：选择被制造的实例。 + - 图层序号：产生的实例放置的图层序号。 + - 水平偏移：产生的实例相对于制造它的实例的水平偏移。 + - 垂直偏移：差生的实例相对于制造它的实例的垂直偏移。 + - 依赖目标角度：设置产生的实例的子弹运行角度是否依赖制造它的目标实例（只对具有子弹行为的实例有效） + +与System动作“创建”的区别是，“创建”是system发出的，是system特有的动作。而“制造”是由某个实例发出的，是实例的通用动作，比如飞机打子弹，那么飞机便是发出“制造”动作的实例，而子弹便是“制造”产生的实例。 +![](565bfb650d83c.png) +#### 销毁： +销毁当前实例。 +例如游戏中被击毁的敌机，需要它从游戏画面中消失，同时游戏数据中也不再需要它，这时就可以使用销毁动作。 +此动作无特有属性设置窗口。 +#### 启用： +设置当前实例是否可用。 +设置为“是”则可以正常操作。如果设置为“否”则实例处于不可用状态，不再接受操作。 +![](563b1d05377b4.png) +### 大小与位置 +#### 朝指定角度移动： +朝向指定角度，以指定速度移动。 +配合持续性触发条件， 每次条件触发，实例都会按指定角度移动速度指定距离。 +配合一次性触发条件，则实例只会做一次朝向指定角度的移动，距离等于指定速度。 +![](563b1cf263eed.png) +#### 朝自身方向移动： +朝向当前实例自身方向，以指定速度移动。 +配合持续性触发条件， 每次条件触发，实例都会朝自身方向移动与指定速度相等的距离。 +配合一次性触发条件，则实例只会做一次朝向自身方向的移动，距离等于指定速度。 +![](563b1cf287599.png) +#### 坐标： +设置当前实例的坐标值。 +![](563b1d2d854d0.png) +#### 相对其它实例坐标： +设置当前实例相对其他实例的坐标值。 +也就是按照选取的实例设置当前实例的相对位置。 +![](563b1d2d2f360.png) +#### 缩放： +设置当前实例的整体缩放比例。 +默认为1，也就是100%。如果要放大就设置大于1的数值，如果要缩小就设置小于1并且大于0的数值。 +![](563b1d1c63d81.png) +#### 水平缩放： +单独设置当前实例的水平缩放比例。 +默认为1，也就是100%。如果要放大就设置大于1的数值，如果要缩小就设置小于1并且大于0的数值。 +![](563b1d1c39a60.png) +#### 垂直缩放： +当独设置当前实例的垂直缩放比例。 +默认为1，也就是100%。如果要放大就设置大于1的数值，如果要缩小就设置小于1并且大于0的数值。 +![](563b1cf293e6f.png) +#### 大小： +设置当前实例的宽和高。 +如果只想单独设置宽或高。比如，实例名叫“战机”，想设置宽为100。那么宽的输入框输入“100”，高的输入框输入“战机.height”。同理要保持宽不变的话，在宽输入框里输入“战机.width”。 +![](563b1cf2d02e2.png) +#### 水平坐标： +单独设置当前实例的水平坐标。 +![](563b1d1c454db.png) +#### 垂直坐标： +单独设置当前实例的垂直坐标。 +![](563b1cf2b2cc0.png) +### 外观 +#### 镜像： +设置当前实例是否镜像和镜像方向。可选项有： + - 水平镜像 + - 垂直镜像 + - 水平垂直镜像 + - 关闭镜像 + +![](563b1d051422b.png) +#### 显隐： +设置当前实例为显示或隐藏。 +![](563b1d1c96119.png) +#### 透明度： +设置当前实例的透明度。可设置有效值为0到1之间。默认为1，表示100%，这是完全不透明。最小值可以设置0，表示完全透明。 +![](563b1d1c8072b.png) +### 实例自定义变量运算 +#### 加法： +选取当前实例的某个自定义变量进行加法运算。（如果不指定自定义变量，游戏运行可能会出现错误） +动作每执行一次，指定的自定义变量加上指定的值一次。 +![](563b1d04e02e2.png) +#### 减法： +选取当前实例的某个自定义变量进行减法运算。（如果不指定自定义变量，游戏运行可能会出现错误） +动作每执行一次，指定的自定义变量减去指定的值一次。 +![](563b1d04ea7ba.png) +#### 设置值： +设置当前实例中指定的自定义变量为指定值。 +![](563b1d1c21e12.png) +#### True/False： +设置当前实例中的某个布尔型自定义变量的值为真或假。 +![](563b1cf252ee7.png) +#### 切换： +切换当前实例的某个布尔型自定义变量的值。 +（若原值为True则切换为False，反之亦然) +![](563b1d0552f2a.png) \ No newline at end of file diff --git a/Lakeshore/manual/commonElements/attributes/564c231119d27.png b/Lakeshore/manual/commonElements/attributes/564c231119d27.png new file mode 100644 index 0000000..f4fd0c4 Binary files /dev/null and b/Lakeshore/manual/commonElements/attributes/564c231119d27.png differ diff --git a/Lakeshore/manual/commonElements/attributes/564c231154c87.png b/Lakeshore/manual/commonElements/attributes/564c231154c87.png new file mode 100644 index 0000000..08fb5af Binary files /dev/null and b/Lakeshore/manual/commonElements/attributes/564c231154c87.png differ diff --git a/Lakeshore/manual/commonElements/attributes/564c231166f7c.png b/Lakeshore/manual/commonElements/attributes/564c231166f7c.png new file mode 100644 index 0000000..f554efc Binary files /dev/null and b/Lakeshore/manual/commonElements/attributes/564c231166f7c.png differ diff --git a/Lakeshore/manual/commonElements/attributes/564c23118115f.png b/Lakeshore/manual/commonElements/attributes/564c23118115f.png new file mode 100644 index 0000000..ef80cb3 Binary files /dev/null and b/Lakeshore/manual/commonElements/attributes/564c23118115f.png differ diff --git a/Lakeshore/manual/commonElements/attributes/569359c2caf86.png b/Lakeshore/manual/commonElements/attributes/569359c2caf86.png new file mode 100644 index 0000000..de196b9 Binary files /dev/null and b/Lakeshore/manual/commonElements/attributes/569359c2caf86.png differ diff --git a/Lakeshore/manual/commonElements/attributes/README.md b/Lakeshore/manual/commonElements/attributes/README.md new file mode 100644 index 0000000..c60ffbe --- /dev/null +++ b/Lakeshore/manual/commonElements/attributes/README.md @@ -0,0 +1,31 @@ +场景中选中实例后，右侧面板会显示基本属性。 + +![](569359c2caf86.png) + +*注：添加声音，触屏，数组，微信，函数组件后产生的实例只支持基本属性中的“名称”和“全局”，不支持其他属性。 + +- 名称： 实例的名称。 +- GUID: 实例的内部ID。基本属性中唯一不可修改的属性。 +- 全局： 设置实例是否是全局存在的。默认为“否”。 +如果设置为“否”表示实例会随着所在场景的退出而销毁。如果设置为“是”，则实例不会随着所在场景的退出而销毁，场景切换后，实例依然存在，实例的各种属性也保持不变。 +- 可见： 设置实例是否可见。默认为“是”。 +- X 轴坐标： 设置实例在场景中的X轴的坐标，也就是实例锚点的X轴坐标。 +- Y 轴坐标： 设置实例在场景中的Y轴的坐标，也就是实例锚点的Y轴坐标。 +- X 锚点： 设置实例的锚点在X轴方向上相对于实例所处的位置。默认值为“0.5”,表示X轴方向上锚点处于实例的中间。如果设为“0”，表示处于实例的最左侧边缘，如果设为“1”，表示处于最右侧边缘。 +- Y 锚点： 设置实例的锚点在Y轴方向上相对于实例所处的位置。默认值为“0.5”，表示Y轴方向上锚点处于实例的中间。如果设为“0”，表示处于实例的最上边缘。如果设置“1”，表示处于实例的最下边缘。 +例如下图： +锚点X=0.5，锚点Y=0.5 +![](564c231154c87.png) +锚点X=0，锚点Y=0 +![](564c23118115f.png) +锚点X=1，锚点Y=1 +![](564c231166f7c.png) +如果锚点值大于1或小于0，则锚点位于实例本身范围以外。 +- 宽：实例的宽度。 +- 高：实例的高度。 +- 角度：实例的角度。默认值为“0”。实例的角度旋转以锚点为旋转中心。 +如下图，角度=45 +![](564c231119d27.png) +- 透明度：设置实例的透明度。默认值为“1”，表示透明度为100%，完全不透明。设置为“0”，表示透明度为“0%", 完全透明。 + + diff --git a/Lakeshore/manual/commonElements/conditions/563b0e5923a19.png b/Lakeshore/manual/commonElements/conditions/563b0e5923a19.png new file mode 100644 index 0000000..cac5d6b Binary files /dev/null and b/Lakeshore/manual/commonElements/conditions/563b0e5923a19.png differ diff --git a/Lakeshore/manual/commonElements/conditions/563b0e5942a39.png b/Lakeshore/manual/commonElements/conditions/563b0e5942a39.png new file mode 100644 index 0000000..644a4e9 Binary files /dev/null and b/Lakeshore/manual/commonElements/conditions/563b0e5942a39.png differ diff --git a/Lakeshore/manual/commonElements/conditions/563b0e5954b49.png b/Lakeshore/manual/commonElements/conditions/563b0e5954b49.png new file mode 100644 index 0000000..8ba0b87 Binary files /dev/null and b/Lakeshore/manual/commonElements/conditions/563b0e5954b49.png differ diff --git a/Lakeshore/manual/commonElements/conditions/563b0e596e2da.png b/Lakeshore/manual/commonElements/conditions/563b0e596e2da.png new file mode 100644 index 0000000..6e7749a Binary files /dev/null and b/Lakeshore/manual/commonElements/conditions/563b0e596e2da.png differ diff --git a/Lakeshore/manual/commonElements/conditions/563b0e5979ebf.png b/Lakeshore/manual/commonElements/conditions/563b0e5979ebf.png new file mode 100644 index 0000000..98edbd1 Binary files /dev/null and b/Lakeshore/manual/commonElements/conditions/563b0e5979ebf.png differ diff --git a/Lakeshore/manual/commonElements/conditions/563b0e598576d.png b/Lakeshore/manual/commonElements/conditions/563b0e598576d.png new file mode 100644 index 0000000..39969a6 Binary files /dev/null and b/Lakeshore/manual/commonElements/conditions/563b0e598576d.png differ diff --git a/Lakeshore/manual/commonElements/conditions/563b0e59a1c8f.png b/Lakeshore/manual/commonElements/conditions/563b0e59a1c8f.png new file mode 100644 index 0000000..b481ef2 Binary files /dev/null and b/Lakeshore/manual/commonElements/conditions/563b0e59a1c8f.png differ diff --git a/Lakeshore/manual/commonElements/conditions/563b0e59b6005.png b/Lakeshore/manual/commonElements/conditions/563b0e59b6005.png new file mode 100644 index 0000000..a2ee534 Binary files /dev/null and b/Lakeshore/manual/commonElements/conditions/563b0e59b6005.png differ diff --git a/Lakeshore/manual/commonElements/conditions/563b0e64b25d9.png b/Lakeshore/manual/commonElements/conditions/563b0e64b25d9.png new file mode 100644 index 0000000..95d8cc7 Binary files /dev/null and b/Lakeshore/manual/commonElements/conditions/563b0e64b25d9.png differ diff --git a/Lakeshore/manual/commonElements/conditions/563b0e64c7305.png b/Lakeshore/manual/commonElements/conditions/563b0e64c7305.png new file mode 100644 index 0000000..05e2f02 Binary files /dev/null and b/Lakeshore/manual/commonElements/conditions/563b0e64c7305.png differ diff --git a/Lakeshore/manual/commonElements/conditions/563b0e64e7a0c.png b/Lakeshore/manual/commonElements/conditions/563b0e64e7a0c.png new file mode 100644 index 0000000..ef86bee Binary files /dev/null and b/Lakeshore/manual/commonElements/conditions/563b0e64e7a0c.png differ diff --git a/Lakeshore/manual/commonElements/conditions/563b0e650e46b.png b/Lakeshore/manual/commonElements/conditions/563b0e650e46b.png new file mode 100644 index 0000000..a379671 Binary files /dev/null and b/Lakeshore/manual/commonElements/conditions/563b0e650e46b.png differ diff --git a/Lakeshore/manual/commonElements/conditions/README.md b/Lakeshore/manual/commonElements/conditions/README.md new file mode 100644 index 0000000..47432a0 --- /dev/null +++ b/Lakeshore/manual/commonElements/conditions/README.md @@ -0,0 +1,64 @@ +精灵，按钮，文本框等大多数实例都具有的条件，我们定义为通用条件。这些条件是最基本，最常用的条件。 +#### 快速链接： +|通用条件|| +|------:|:------| +|其它|[当实例创建时](#当实例创建时：)| +|网络|[当图片加载完毕](#当图片加载完毕：)| +|实例自定义变量|[比较自定义变量](#比较自定义变量：)| +|大小与位置|[比较水平坐标](#比较水平坐标：)，[比较垂直坐标](#比较垂直坐标：)，[比较宽度](#比较宽度：)，[比较高度](#比较高度：)，[比较透明度](#比较透明度：)，[显隐状态](#显隐状态：)，[是否在屏幕内](#是否在屏幕内：)| +|碰撞|[碰撞](#碰撞：)| +|角度|[顺时针旋转](#顺时针旋转：)，[处于两角度之间](#处于两角度之间：)| + +![](563b0e5923a19.png) + +#### 当实例创建时： +当所选实例创建时触发。【一次性触发】 +当游戏中包含所选实例的场景加载时，实例才会被创建。比如，游戏的第一个场景是A，所选实例只存在于场景B中。那么，游戏开始时，所选实例并没有创建，只有切换到场景B后，所选实例才被创建，才触发“当实例创建时”这个条件。（此时实例内的图片资源还未加载完毕） +此条件无特有属性设置窗口。 +#### 当图片加载完毕： +当所选实例中的图片资源加载完毕。【一次性触发】 +要先创建实例，然后加载其中的图片资源。所以“当图片加载完毕”要晚于“当实例创建时”。 +此条件无特有属性设置窗口。 +#### 比较自定义变量： +用当前实例的一个自定义变量和指定值比较。【持续性触发】 +先要确保当前实例已经添加了自定义变量，然后从已有自定义变量中选择一个。（如果不选择任何自定义变量，项目运行可能会出错。） +![](563b0e59a1c8f.png) +#### 比较水平坐标： +用当前实例的水平坐标和指定值比较。【持续性触发】 +![](563b0e5979ebf.png) +#### 比较垂直坐标： +用当前实例的垂直坐标和指定值比较。【持续性触发】 +![](563b0e5942a39.png) +#### 比较宽度： +用当前实例的宽度和指定值比较。【持续性触发】 +![](563b0e596e2da.png) +#### 比较高度： +用当前实例的高度和指定值比较。【持续性触发】 +![](563b0e5954b49.png) +#### 比较透明度： +用当前实例的透明度和指定值比较。【持续性触发】 +![](563b0e598576d.png) +#### 显隐状态： +判定当前实例的显隐状态。【持续性触发】 +可选项为“显示”和“隐藏”。 +![](563b0e650e46b.png) +#### 是否在屏幕内： +判定当前实例是否在屏幕内。【持续性触发】 +可选项为“屏幕里”和“屏幕外”。 +![](563b0e64c7305.png) +#### 碰撞： +如果当前实例与指定实例产生了碰撞。【一次性触发】 +在属性设置窗口里选择一个其他实例，来与当前实例进行碰撞判定。如果产生了碰撞，那么条件为真则触发。 +![](563b0e64b25d9.png) +#### 顺时针旋转： +比较角度1和角度2。【持续性触发】 +如果角度2顺时针旋转不超过180度便能到达角度1则条件成立。 +比如，假设角度2为30度，角度1为120度。由30度开始顺时针旋转90度可以到达120度，旋转过程没有超过180度，所以条件成立。 +假设角度2为30度，角度1为250度。有30度开始顺时针旋转220度才可以到达250度，旋转了220度>180度，所以条件不成立。 + +![](563b0e64e7a0c.png) +#### 处于两角度之间： +比较指定角度是否在两个角度之间。【持续性触发】 +两个角度之间指的是由角度1顺时针旋转到角度2形成的扇形区域。 +例如，60度在30度到120度之间。而60度不在120度到30度之间，150度在120度到30度之间。 +![](563b0e59b6005.png) diff --git a/Lakeshore/manual/commonElements/expression/56b1cb73f181c.png b/Lakeshore/manual/commonElements/expression/56b1cb73f181c.png new file mode 100644 index 0000000..8f896a8 Binary files /dev/null and b/Lakeshore/manual/commonElements/expression/56b1cb73f181c.png differ diff --git a/Lakeshore/manual/commonElements/expression/56b1cb7420d5c.png b/Lakeshore/manual/commonElements/expression/56b1cb7420d5c.png new file mode 100644 index 0000000..61456b7 Binary files /dev/null and b/Lakeshore/manual/commonElements/expression/56b1cb7420d5c.png differ diff --git a/Lakeshore/manual/commonElements/expression/56b1cb743d12a.png b/Lakeshore/manual/commonElements/expression/56b1cb743d12a.png new file mode 100644 index 0000000..f75b332 Binary files /dev/null and b/Lakeshore/manual/commonElements/expression/56b1cb743d12a.png differ diff --git a/Lakeshore/manual/commonElements/expression/56b1cb7464ad4.png b/Lakeshore/manual/commonElements/expression/56b1cb7464ad4.png new file mode 100644 index 0000000..26fc2b9 Binary files /dev/null and b/Lakeshore/manual/commonElements/expression/56b1cb7464ad4.png differ diff --git a/Lakeshore/manual/commonElements/expression/56b1cb74911ab.png b/Lakeshore/manual/commonElements/expression/56b1cb74911ab.png new file mode 100644 index 0000000..81e4590 Binary files /dev/null and b/Lakeshore/manual/commonElements/expression/56b1cb74911ab.png differ diff --git a/Lakeshore/manual/commonElements/expression/README.md b/Lakeshore/manual/commonElements/expression/README.md new file mode 100644 index 0000000..abca3cd --- /dev/null +++ b/Lakeshore/manual/commonElements/expression/README.md @@ -0,0 +1,134 @@ +## Lakeshore 表达式 + +什么是表达式？ + +表达式，是由数字、[算符](http://baike.baidu.com/view/271856.htm)、数字分组符号（括号）、自由变量和约束变量等以能求得数值的有意义排列方法所得的组合。约束变量在表达式中已被指定数值，而自由变量则可以在表达式之外另行指定数值。表达式的运用可以最大限度的增强逻辑的运算，常用的表达式分为算术表达式与逻辑表达式。 + +* 算术表达式 + +算术表达式是最常用的表达式，又称为[数值表达式](http://baike.baidu.com/view/703179.htm)。它是通过算术运算符来进行运算的数学公式，常用的算术运算包括以下表格内容： + + +| 运算符 | 描述 | +| --- | --- | +| + | 加法 | +| - | 减法 | +| * | 乘法 | +| / | 除法 | +| % | 求余数 (保留整数) | +| ++ | 累加 | +| -- | 递减 | + +在lakeshore里，支持上述表达式，例如，让对象mc以1像素/帧的速度水平向右移动，可作以下设置： + +![](56b1cb73f181c.png) + +也可以写成mc.x+1，完整的意思是：mc.x=mc.x+1;即每帧对mc的水平坐标加1像素。这样mc就形成动画朝右运动。细心的读者会注意到这里用到了.x这表示mc的水平坐标属性，对于精灵来讲，提供了非常多的属性 + +精灵提供的公开属性列表如下： + +| 属性 | 描述 | 引用形式 | 示例（设定mc2为另1个对象） | +| --- | --- | +| x | 水平坐标 | mc.x| mc.x+1(完整形式：mc.x=mc.x+1) | +| y | 垂直坐标 | mc.y| mc.y-1(完整形式：mc.y=mc.y+1) | +| width | 宽 | mc.width| mc2.width*2(完整形式：mc.y=mc2.wdith*2) | +| height | 高 | mc.height| mc2.height*0.5(完整形式：mc.height=mc2.height*0.5) | +| angle | 角度（0~360）之间| mc.angle| mc.angle+=1(完整形式：mc.angle=mc.angle+1) | +| alpha | 透明度（0~1）之间| mc.alpha| mc.alpha-1(完整形式：mc.alpha=mc.alpha-1) | +| visible | 是否隐藏（true/false)| mc.visible| mc2.visible(完整形式：mc.visible=mc2.visible) | +| scale | 缩放比例 | mc.scale| mc.scale*=1.1(完整形式：mc.scale=mc.scale*1.1) | +| scaleX | 水平缩放比例 | mc.scaleX| mc.scaleX*=1.1(完整形式：mc.scaleX=mc.scaleX*1.1) | +| scaleY | 垂直缩放比例 | mc.scaleY| mc.scaleY*=1.1(完整形式：mc.scaleY=mc.scaleY*1.1) | +| anchorX | 水平锚点 | mc.anchorX| mc.anchorX | +| anchorY | 垂直锚点 | mc.anchorY| mc.anchorY | +| name | 实例名称 | mc.name| mc.name | +| dt | 下一帧与上一帧的时间差（单位：毫秒) | mc.dt| mc.dt | + + +**按纽组件提供的公开属性列表如下(假如按纽组件名称为btn)：** + + +|属性| 描述| 引用形式| 示例（设定mc2为另1个对象）| +| --- | --- | +|x| 水平坐标| btn.x| btn.x+1(完整形式：btn.x=btn.x+1)| +|y| 垂直坐标| btn.y| btn.y-1(完整形式：btn.y=btn.y+1)| +|width| 宽| btn.width| mc2.width*2(完整形式：btn.y=mc2.wdith*2)| +|height| 高| btn.height| mc2.height*0.5(完整形式：btn.height=mc2.height*0.5)| +|angle| 角度（0~360）之间| btn.angle| btn.angle+=1(完整形式：btn.angle=btn.angle+1)| +|alpha| 透明度（0~1）之间| btn.alpha| btn.alpha-1(完整形式：btn.alpha=btn.alpha-1)| +|visible| 是否隐藏（true/false)| btn.visible| mc2.visible(完整形式：btn.visible=mc2.visible)| +|scale| 缩放比例| btn.scale| btn.scale*=1.1(完整形式：btn.scale=btn.scale*1.1)| +|scaleX| 水平缩放比例| btn.scaleX| btn.scaleX*=1.1(完整形式：btn.scaleX=btn.scaleX*1.1)| +|scaleY| 垂直缩放比例| btn.scaleY| btn.scaleY*=1.1(完整形式：btn.scaleY=btn.scaleY*1.1)| +|anchorX| 水平锚点| btn.anchorX| btn.anchorX| +|anchorY| 垂直锚点| btn.anchorY| btn.anchorY| +|name| 实例名称| btn.name| btn.name| +|dt| 下一帧与上一帧的时间差（单位：毫秒)| btn.dt| btn.dt| +|enabled| 按纽是否可用| btn.enabled| btn.enabled| +|touchX| 点击按纽时相对于按纽的水平坐标| btn.touchX| btn.touchX| +|touchY| 点击按纽时相对于按纽的垂直坐标| btn.touchY| btn.touchY| +|touchStageX| 点击按纽时相对于舞台的水平坐标| btn.touchStageX| btn.touchStageX| +|touchStageY| 点击按纽时相对于舞台的垂直坐标| btn.touchStageY| btn.touchStageY| +|touchPointID| 点击按纽时分配给按纽的唯一标识符| btn.touchPointID| btn.touchPointID| +|text| 按纽的文本内容| btn.text| btn.text| + +**文本组件提供的公开属性列表如下（假如文本组件名称为tf):** + +|属性| 描述| 引用形式| 示例（设定mc2为另1个对象）| +| --- | --- | +|x| 水平坐标| tf.x| tf.x+1(完整形式：tf.x=tf.x+1)| +|y| 垂直坐标| tf.y| tf.y-1(完整形式：tf.y=tf.y+1)| +|width| 宽| tf.width| mc2.width*2(完整形式：tf.y=mc2.wdith*2)| +|height| 高| tf.height| mc2.height*0.5(完整形式：tf.height=mc2.height*0.5)| +|angle| 角度（0~360）之间| tf.angle| tf.angle+=1(完整形式：tf.angle=tf.angle+1)| +|alpha| 透明度（0~1）之间| tf.alpha| tf.alpha-1(完整形式：tf.alpha=tf.alpha-1)| +|visible| 是否隐藏|（true/false)| tf.visible mc2.visible(完整形式：tf.visible=mc2.visible)| +|scale| 缩放比例| tf.scale| tf.scale*=1.1(完整形式：tf.scale=tf.scale*1.1)| +|scaleX| 水平缩放比例| tf.scaleX| tf.scaleX*=1.1(完整形式：tf.scaleX=tf.scaleX*1.1)| +|scaleY| 垂直缩放比例| tf.scaleY| tf.scaleY*=1.1(完整形式：tf.scaleY=tf.scaleY*1.1)| +|anchorX| 水平锚点| tf.anchorX| tf.anchorX| +|anchorY| 垂直锚点| tf.anchorY| tf.anchorY| +|name| 实例名称| btn.name| tf.name| +|dt| 下一帧与上一帧的时间差（单位：毫秒)| tf.dt| tf.dt| +|textField| 文本组件文本渲染类的引用 |tf.textField| 一般情况下不引用这个，而是基于这个来引用文本各种属性| +|type| 显示文本是动态类型的还是可输入的类型| tf.textField.type| btn.touchX| +|text| 显示文本的文本内容| tf.textField.text| btn.touchY| +|bold| 显示文本是否是粗体形式| tf.textField.bold| btn.touchStageX| +|fontFamily| 显示文本的字体| tf.textField.fontFamily| btn.touchStageY| +|textColor| 显示文本的颜色| tf.textField.textColor| btn.touchPointID| +|size| 显示文本的大小| tf.textField.size| btn.text| +|textAlign| 显示文本的水平对齐方式| tf.textField.textAlign| tf.textField.textAlign| +|verticalAlign| 显示文本的垂直对齐方式| tf.textField.verticalAlign| tf.textField.verticalAlign| +|italic| 显示文本是否为斜体| tf.textField.italic| tf.textField.italic| +|border| 显示文本是否有边框| tf.textField.border| tf.textField.border| +|borderColor| 显示文本的边框颜色| tf.textField.borderColor| tf.textField.borderColor| +|background| 显示文本是否有背景| tf.textField.background| tf.textField.background| +|backgourndColor| 显示文本的背景颜色| tf.textField.backgourndColor| tf.textField.backgourndColor| +|maxChars| 显示文本最大输入多少个字符| tf.textField.maxChars| tf.textField.maxChars| +|displayAsPassword| 显示文本是否显示为密码形式| tf.textField.displayAsPassword| tf.textField.displayAsPassword| + +上面所讲的都是一种简单的表达式，有时候，我们可能需要加入一些字符，比如为了显示mc的动态坐标信息，我们通过以下方向来定义： + +![](56b1cb7420d5c.png) + +最终显示结果为： + +![](56b1cb743d12a.png) + +对于上述表达式，既包含非动态信息，也包含动态信息，为了正确的显示，我们需要将非动态信息用单引号来引起来，比如：'当前mc的坐标信息为:('为非动态信息，而动态信息，可直接引用，例如mc.x，也可以用eval(mc.x)来引用，中间用+作为链接符。有更复杂的表达式，例如，微信分享的表达式如下： + +``` +'我总共消灭了'+eval(gameover.tank1+gameover.tank2+gameover.tank3+gameover.tank4)+'个坦克，'+'击败了全球'+eval(((gameover.tank1+gameover.tank2+gameover.tank3+gameover.tank4)/91*100).toFixed(1))+'%的玩家，不服来战！！' +``` + +细心的读者可能发现上面还有个toFixed函数，其实这本身是JS的内置的取指定小数点位数的数字，这里表示对（gameover.tank1+gameover.tank2+gameover.tank3+gameover.tank4)/91*100的结果取1位小数点的数字。为了更灵活的运用表达式来满足游戏的需求，这里还支持javascript提供的常用函数API，比如数学类函数，具体可参考W3CSchool网站提供的教程：[http://www.w3school.com.cn/jsref/jsref_obj_math.asp](http://www.w3school.com.cn/jsref/jsref_obj_math.asp)。 + +还比如获取当前网站的地址： + +![](56b1cb7464ad4.png) + +预览效果为： + +![](56b1cb74911ab.png) + +还有更多javascript语法的支持，请参考Javascript语法，这里不再赘述。 \ No newline at end of file diff --git a/Lakeshore/manual/example/dafeiji/56b1cbc771383.png b/Lakeshore/manual/example/dafeiji/56b1cbc771383.png new file mode 100644 index 0000000..882733d Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cbc771383.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cbc79d210.png b/Lakeshore/manual/example/dafeiji/56b1cbc79d210.png new file mode 100644 index 0000000..eaeb383 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cbc79d210.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cbc7c66d2.png b/Lakeshore/manual/example/dafeiji/56b1cbc7c66d2.png new file mode 100644 index 0000000..a337bc3 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cbc7c66d2.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cbc83fa34.png b/Lakeshore/manual/example/dafeiji/56b1cbc83fa34.png new file mode 100644 index 0000000..f3c5660 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cbc83fa34.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cbc85e2ff.png b/Lakeshore/manual/example/dafeiji/56b1cbc85e2ff.png new file mode 100644 index 0000000..7b8d67c Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cbc85e2ff.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cbc8ccc43.png b/Lakeshore/manual/example/dafeiji/56b1cbc8ccc43.png new file mode 100644 index 0000000..71c5e3d Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cbc8ccc43.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cbc9a5ead.png b/Lakeshore/manual/example/dafeiji/56b1cbc9a5ead.png new file mode 100644 index 0000000..c399a40 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cbc9a5ead.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cbcbace32.png b/Lakeshore/manual/example/dafeiji/56b1cbcbace32.png new file mode 100644 index 0000000..2b6019f Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cbcbace32.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cbcd2597d.png b/Lakeshore/manual/example/dafeiji/56b1cbcd2597d.png new file mode 100644 index 0000000..05dd92b Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cbcd2597d.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cbcd81ff9.png b/Lakeshore/manual/example/dafeiji/56b1cbcd81ff9.png new file mode 100644 index 0000000..54b3a27 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cbcd81ff9.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cbd016d14.png b/Lakeshore/manual/example/dafeiji/56b1cbd016d14.png new file mode 100644 index 0000000..fb7f194 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cbd016d14.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cbd27af47.png b/Lakeshore/manual/example/dafeiji/56b1cbd27af47.png new file mode 100644 index 0000000..b5093c0 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cbd27af47.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cbd2f328e.png b/Lakeshore/manual/example/dafeiji/56b1cbd2f328e.png new file mode 100644 index 0000000..2966b82 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cbd2f328e.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cbd37217c.png b/Lakeshore/manual/example/dafeiji/56b1cbd37217c.png new file mode 100644 index 0000000..502d310 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cbd37217c.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cbd4546c5.png b/Lakeshore/manual/example/dafeiji/56b1cbd4546c5.png new file mode 100644 index 0000000..8b262fd Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cbd4546c5.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cbd4b93d1.png b/Lakeshore/manual/example/dafeiji/56b1cbd4b93d1.png new file mode 100644 index 0000000..164fddc Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cbd4b93d1.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cbd4eeca9.png b/Lakeshore/manual/example/dafeiji/56b1cbd4eeca9.png new file mode 100644 index 0000000..4f85821 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cbd4eeca9.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cbd5492a7.png b/Lakeshore/manual/example/dafeiji/56b1cbd5492a7.png new file mode 100644 index 0000000..172298e Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cbd5492a7.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cbd63800f.png b/Lakeshore/manual/example/dafeiji/56b1cbd63800f.png new file mode 100644 index 0000000..10f3c83 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cbd63800f.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cbd807974.png b/Lakeshore/manual/example/dafeiji/56b1cbd807974.png new file mode 100644 index 0000000..35fc79f Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cbd807974.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cc3ad94ae.png b/Lakeshore/manual/example/dafeiji/56b1cc3ad94ae.png new file mode 100644 index 0000000..7026f64 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cc3ad94ae.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cc3b14404.png b/Lakeshore/manual/example/dafeiji/56b1cc3b14404.png new file mode 100644 index 0000000..7e78734 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cc3b14404.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cc3b3bdfd.png b/Lakeshore/manual/example/dafeiji/56b1cc3b3bdfd.png new file mode 100644 index 0000000..ffb3b3c Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cc3b3bdfd.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cc3c241db.png b/Lakeshore/manual/example/dafeiji/56b1cc3c241db.png new file mode 100644 index 0000000..313ecf8 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cc3c241db.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cc3cad2d4.png b/Lakeshore/manual/example/dafeiji/56b1cc3cad2d4.png new file mode 100644 index 0000000..e20f483 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cc3cad2d4.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cc3e463cd.png b/Lakeshore/manual/example/dafeiji/56b1cc3e463cd.png new file mode 100644 index 0000000..9a37d56 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cc3e463cd.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cc3f9c005.png b/Lakeshore/manual/example/dafeiji/56b1cc3f9c005.png new file mode 100644 index 0000000..f600bda Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cc3f9c005.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cc409675d.png b/Lakeshore/manual/example/dafeiji/56b1cc409675d.png new file mode 100644 index 0000000..eb1ee0c Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cc409675d.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cc422ab13.png b/Lakeshore/manual/example/dafeiji/56b1cc422ab13.png new file mode 100644 index 0000000..22cf4bf Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cc422ab13.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cc4284d2f.png b/Lakeshore/manual/example/dafeiji/56b1cc4284d2f.png new file mode 100644 index 0000000..18ec6ae Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cc4284d2f.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cc43aa9db.png b/Lakeshore/manual/example/dafeiji/56b1cc43aa9db.png new file mode 100644 index 0000000..8c3cdc7 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cc43aa9db.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cc4414cab.png b/Lakeshore/manual/example/dafeiji/56b1cc4414cab.png new file mode 100644 index 0000000..01461f1 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cc4414cab.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cc44b181d.png b/Lakeshore/manual/example/dafeiji/56b1cc44b181d.png new file mode 100644 index 0000000..3aa2ce8 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cc44b181d.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cc454b220.png b/Lakeshore/manual/example/dafeiji/56b1cc454b220.png new file mode 100644 index 0000000..249a265 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cc454b220.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cc45c0df4.png b/Lakeshore/manual/example/dafeiji/56b1cc45c0df4.png new file mode 100644 index 0000000..81ebdf4 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cc45c0df4.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cc462801a.png b/Lakeshore/manual/example/dafeiji/56b1cc462801a.png new file mode 100644 index 0000000..4c6e0ef Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cc462801a.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cc466b81d.png b/Lakeshore/manual/example/dafeiji/56b1cc466b81d.png new file mode 100644 index 0000000..8657c7f Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cc466b81d.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cc46d51cc.png b/Lakeshore/manual/example/dafeiji/56b1cc46d51cc.png new file mode 100644 index 0000000..f0f0d6e Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cc46d51cc.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cc4814e44.png b/Lakeshore/manual/example/dafeiji/56b1cc4814e44.png new file mode 100644 index 0000000..bdf775f Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cc4814e44.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cc4a32bbb.png b/Lakeshore/manual/example/dafeiji/56b1cc4a32bbb.png new file mode 100644 index 0000000..d9956e4 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cc4a32bbb.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cc5bcf1d1.png b/Lakeshore/manual/example/dafeiji/56b1cc5bcf1d1.png new file mode 100644 index 0000000..8d10819 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cc5bcf1d1.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cc5c22241.png b/Lakeshore/manual/example/dafeiji/56b1cc5c22241.png new file mode 100644 index 0000000..8549c08 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cc5c22241.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cc5d3d891.png b/Lakeshore/manual/example/dafeiji/56b1cc5d3d891.png new file mode 100644 index 0000000..37cabd2 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cc5d3d891.png differ diff --git a/Lakeshore/manual/example/dafeiji/56b1cc5e2fc10.png b/Lakeshore/manual/example/dafeiji/56b1cc5e2fc10.png new file mode 100644 index 0000000..da126e2 Binary files /dev/null and b/Lakeshore/manual/example/dafeiji/56b1cc5e2fc10.png differ diff --git a/Lakeshore/manual/example/dafeiji/README.md b/Lakeshore/manual/example/dafeiji/README.md new file mode 100644 index 0000000..bd001b6 --- /dev/null +++ b/Lakeshore/manual/example/dafeiji/README.md @@ -0,0 +1,201 @@ +## 创建一个游戏项目 + +打开Lakeshore，点击菜单“文件”、“新建项目”，输入游戏名称和游戏尺寸，点击确定。新创建的游戏项目会自动创建一个场景和对应的事件表。如下图所示： + +![](56b1cbc771383.png) + +## 导入图片素材 + +在“项目”面板中右击“图片”文件夹，点击“添加图片素材”，在弹出的文件选择对话框中选择需要导入的图片。如下图所示： + +![](56b1cbc79d210.png) + +在“项目”面板中点击导入的图片可以直接预览图片内容和尺寸。如下图所示： + +![](56b1cbc7c66d2.png) + +## 向场景中添加精灵 + +选择“项目”中图片文件夹下的一张背景资源，将它拖动到场景中，就创建了一个精灵，在右侧属性栏中设置其名称为“滚屏背景”，并设置其它属性，如下图所示： + +![](56b1cbc83fa34.png) + +## 添加行为 + +点击属性栏最下面行为列表中的“添加行为”按纽，弹出“行为列表”属性框，并双击选择“滚屏行为”，即可将“滚屏行为”绑定到”滚屏背景“上，如下图所示： + +![](56b1cbc85e2ff.png) + +绑定滚屏行为后，我们在行为列表中设置其滚屏方向为向下，如下图所示： + +![](56b1cbc8ccc43.png) + +通常情况下，为了达到无缝滚屏，需要弄两张前后或者上下能够无缝连接的图片，这里的素材很特殊，上下达到了无缝连接，这里我们按住”Ctrl“键，鼠标拖动”滚屏背景“复制一份”滚屏背景“，设置其复制的”滚屏背景“基本属性，如下图所示： + +![](56b1cbc9a5ead.png) + +认真对比上面两张图，你会发现，第一张图中的”滚屏背景“y坐标为-768，正好第一张”滚屏背景“连接起来，另外，复制之后，原图与复制的图名称一样，且如果原图添加了滚屏行为，那么，复制后的图也会添加上滚屏行为。 + +点击 Lakeshore 菜单栏“文件”-“运行”就可以在默认的浏览器中预览（这里以chrome为例测试），预览中你会发现背景已经能够实现无缝滚屏了，如下图所示： + +![](56b1cbcbace32.png) + +## 添加红色战机 + +按住“项目”面板中图片文件夹下的红色战机，将它拖拽到场景中，选择“红色战机”精灵，可以直接拖拽精灵上的控制点来调整精灵的位置和旋转角度。在右侧属性栏中给精灵命名为“红色战机”，如下图所示： + +![](56b1cbcd2597d.png) + +## 添加行为 + +选中当前“红色战机”，在属性栏的最下方“行为列表”中点击“添加行为”。这里我们双击“拖拽行为”即可将“拖拽行为”绑定到此战机上。添加了拖拽行为后，此战机即可在手机上进行拖拽运动了，如下图所示： + +![](56b1cbcd81ff9.png) + +然后，点击 Lakeshore 菜单栏“文件”-“运行”预览，用鼠标按住“红色战机”拖拽即可测试。如下图所示： + +![](56b1cbd016d14.png) + +## 添加子弹 + +按照添加红色战机的操作步骤，选择一个子弹素材，拖拽到舞台。在基础属性栏中取名为”红色战机子弹“。按照“添加行为”操作给这个精灵添加“子弹行为”和“出边界销毁行为”，并在“行为列表”设置子弹行为参数中”设置角度“为”否“，其它默认。如下图所示： + +![](56b1cbd27af47.png) + +## 添加事件 + +为了能够让”红色战机“发射子弹，因此，我们需要通过事件来将其进行关联起来，双击”“项目”栏中的事件表“MainSceneEventSheet”,在事件表中创建“红色战机发射子弹事件”，如下图所示： + +![](56b1cbd2f328e.png) + +## 添加条件 + +为了能够让“红色战机”能够持续的发射子弹，那么，我们需要添加相应的条件，比如0.1秒发射1颗子弹，选择“红色战机发射子弹事件”，点击面板右侧条件栏下的“添加条件”，在弹出的条件目标面板中选择“System”,如下图所示： + +![](56b1cbd37217c.png) + +然后在“条件列表”选择“每多少秒执行一次”，如下图所示： + +![](56b1cbd4546c5.png) + +在弹出的属性设置面板中设定时间间隔为0.1，即1秒钟发射10颗子弹，如下图所示： + +![](56b1cbd4b93d1.png) + +## 添加动作 + +注意这个时间单位为秒，设置好条件之后，就需要设置其动作，这里的动作为在“红色战机”所在的位置创建子弹，点击面板右侧条件栏下的“添加动作”，在弹出的动作目标面板中选择“红色战机”,如下图所示： + +![](56b1cbd4eeca9.png) + +双击“红色战机”后，弹出“动作列表”，在动作列表中选择“制造”，如下图所示： + +![](56b1cbd5492a7.png) + +双击“制造”动作，在弹出的制造属性面板中选择“红色战机子弹”，并设置其垂直偏移值为-80，注意，这里的“水平偏移”与“垂直偏移”是相对坐标，即相对于红色战机的坐标，单位为像素，如下图所示： + +![](56b1cbd63800f.png) + +点击 Lakeshore 菜单栏“文件”-“运行”进行预览，即可以看到红色战机连续发射子弹。如下图所示： + +![](56b1cbd807974.png) + +图26显示子弹是横向发射，这是因为我们没有设置子弹发射的角度，我们需要添加设置角度的动作，点击“添加动作”，弹出动作目标选择对话框，选择“红色战机子弹”，如下图所示： + +![](56b1cc3ad94ae.png) + +双击“红色战机子弹”，弹出动作列表对话框，在动作列表中选择“设置角度”，如下图所示： + +![](56b1cc3b14404.png) + +双击“设置角度”，弹出设置角度属性面板，修改角度为-90度，即方向朝上，如下图所示： + +![](56b1cc3b3bdfd.png) + +点击 Lakeshore 菜单栏“文件”-“运行”进行预览，即可以看到子弹已经按照正确的方向朝上发射了。如下图所示： + +![](56b1cc3c241db.png) + +## 添加敌机与敌机子弹 + +按照“红色战机”与“红色战机子弹”操作方法，我们分别添加“敌人战机”和“敌人战机子弹”并给它们设定“子弹”行为和“出边界销毁”行为（注意：”出边界销毁“行为有助于提升游戏性能，避免内存泄露）。并设置“敌人战机”行为列表中“设置角度”为“是”，角度为90度，使其朝下，同样，设置“敌人战机子弹”行为列表中“设置角度”为是，角度为90度。即“敌人战机”与“敌人战机子弹”运动方向朝下，如下图所示： + +![](56b1cc3cad2d4.png) + +同样为了让敌人能发射敌人子弹，在MainSceneEventSheet中添加事件“敌人战机发射敌人子弹事件”，并给事件添加条件“0.2秒1次”，动作“发射敌人战机子弹”，如下图所示： + +![](56b1cc3e463cd.png) + +点击 Lakeshore 菜单栏“文件”-“运行”进行预览，即可以看到如下图所示： + +![](56b1cc3f9c005.png) + +为了让“敌人战机”可以被我方的“红色战机子弹”打到，并产生伤害计算，那么，我们需要给“敌人战机”与“红色战机子弹”分别设置“参与碰撞”为是，选择“敌人战机”，在面板右侧的其它属性栏中设置参与碰撞为“是”，同样，对“红色战机子弹”也一样，如下图所示： + +![](56b1cc409675d.png) + +为了给“敌人战机”赋予生命，我们给“敌人战机”添加自定义属性hp，选择“敌人战机”，在属性栏“自定义属性”处点击“添加属性”，弹出自定义属性对话框，设置属性名称为：hp,值类型为：number,值为10，即“敌人战机”初始具有10点血。如下图所示： + +![](56b1cc422ab13.png) + +为了让“红色战机子弹”碰撞到“敌人战机”时“敌人战机”减血，即每碰撞一次”敌人战机”的hp减1，那么，我们需要创建新的事件“红色战机子弹碰到敌人战机时减血事件”，并添加条件，如下图所示： + +![](56b1cc4284d2f.png) + +双击“红色战机子弹”，在弹出的条件列表中选择“碰撞”，如下图所示： + +![](56b1cc43aa9db.png) + +双击“碰撞”，在弹出的碰撞属性对话框中选择“敌人战机”，如下图所示： + +![](56b1cc4414cab.png) + +此时，我们添加动作，让敌人战机hp减1，如下图所示： + +![](56b1cc44b181d.png) + +双击“减法运算”，在弹出的“减法运算”属性框选择自定义属性hp,并设置值为1，如下图所示： + +![](56b1cc454b220.png) + +到目前为止，“红色战机子弹”如果碰到“敌人战机”将会减血，但是为了能够在实际效果中预览，我们还需要添加事件“敌人战机血量小于等于零后销毁事件”，并添加条件：如果“敌人战机”hp小于等于0，如下图所示： + +![](56b1cc45c0df4.png) + +双击“比较实例变量”，在弹出的属性对话框中，设置实例变量为hp，运算符为小于或等于，值为0，如下图所示： +![](56b1cc462801a.png) + +并添加动作“销毁”，先选择“敌人战机”，如下图所示： + +![](56b1cc466b81d.png) + +双击“红色战机”，选择动作“销毁”，如下图所示： + +![](56b1cc46d51cc.png) + +此时，“敌人战机”当血量hp小于或等于0时销毁，如下图所示： + +![](56b1cc4814e44.png) + +预览我们发现，“红色战机子弹”会穿透“敌人战机”，此时，我们需要给“红色战机子弹”添加一个碰到“敌人战机”销毁的动作，选择“红色战机子弹碰到敌人战机时减血事件”这个事件，点击“添加动作”，在动作目标面板中双击选择“红色战机子弹”，并添加“销毁”动作，预览效果，发现“红色战机子弹”打“敌人战机”时不会穿透了，如下图所示： + +![](56b1cc4a32bbb.png) + +一般情况下，战机类游戏都会有许多源源不断的敌人，因此，我们这里需要创建一个源源不断的敌人事件，事件名为：在场景中每2秒钟创建1个敌人事件，如上面所讲方式添加条件：每2秒钟执行一次，然后添加动作，点击“添加动作”，双击选择“System”,并选择“创建对象”，如下图所示： + +![](56b1cc5bcf1d1.png) + +双击“创建对象”，在弹出的创建对象属性面板中选择对象类型为“敌人战机”，在水平坐标中输入Math.random()*500,垂直坐标中输入Math.random()*200表达式，代表创建的敌人战机位置在水平坐标0~500，垂直坐标0~200之间，如下图所示： + +![](56b1cc5c22241.png) + +预览，发现每隔2秒创建一个“敌人战机”，如下图所示： + +![](56b1cc5d3d891.png) + +至此，游戏Demo完毕，但为了游戏性能与内存，我们需要给“红色战机子弹”、“敌人子弹”、“敌人战机”都添加“出边界销毁行为”。 + +最后，将我们做完的游戏发布即可，选择“文件”-“发布”即可发布我们的游戏，会弹出对话框提示我们要将我们的发布的游戏保存的路径，如下图所示： + +![](56b1cc5e2fc10.png) + diff --git a/Lakeshore/manual/example/newProject/56de9c60eb65c.png b/Lakeshore/manual/example/newProject/56de9c60eb65c.png new file mode 100644 index 0000000..df2797a Binary files /dev/null and b/Lakeshore/manual/example/newProject/56de9c60eb65c.png differ diff --git a/Lakeshore/manual/example/newProject/56de9c61247d3.png b/Lakeshore/manual/example/newProject/56de9c61247d3.png new file mode 100644 index 0000000..b133e81 Binary files /dev/null and b/Lakeshore/manual/example/newProject/56de9c61247d3.png differ diff --git a/Lakeshore/manual/example/newProject/56de9c6152b22.png b/Lakeshore/manual/example/newProject/56de9c6152b22.png new file mode 100644 index 0000000..81230a2 Binary files /dev/null and b/Lakeshore/manual/example/newProject/56de9c6152b22.png differ diff --git a/Lakeshore/manual/example/newProject/README.md b/Lakeshore/manual/example/newProject/README.md new file mode 100644 index 0000000..0c83643 --- /dev/null +++ b/Lakeshore/manual/example/newProject/README.md @@ -0,0 +1,21 @@ +好的，各位小伙伴们，我们来一起创建一个Lakeshore的项目吧！！ +首先启动Lakeshore后，在左上角的菜单中点选“新建项目”按钮。 + +![](56de9c61247d3.png) + +在打开的新建项目对话框，我们给项目起个名字，屏幕尺寸和场景尺寸任意，这里我们就都设置成750x1334，一个标准的iPhone 6尺寸。 + +![](56de9c6152b22.png) + +至于屏幕尺寸和场景尺寸有什么区别，我来简单解释一下。 +> - 屏幕尺寸就是你游戏的可视区域，屏幕上可见的区域大小。 +- 场景尺寸是指游戏中角色，物体能都活动的区域大小。 + +> 一般情况下，场景尺寸都是要大于或等于屏幕尺寸的。 +例如超级玛丽的场景尺寸就大于屏幕尺寸，坦克大战的场景尺寸就等于屏幕尺寸。 + +项目创建好后，我们来添加素材文件。右键单击图片目录，选择“添加图片素材”选项，然后选择要添加的图片素材文件。 + +![](56de9c60eb65c.png) + +好了，作为一个简单的项目，新建的过程就是这样。 \ No newline at end of file diff --git a/Lakeshore/manual/example/weixinShare/56b1ccb71616a.png b/Lakeshore/manual/example/weixinShare/56b1ccb71616a.png new file mode 100644 index 0000000..d2e8962 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccb71616a.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccb730ee2.png b/Lakeshore/manual/example/weixinShare/56b1ccb730ee2.png new file mode 100644 index 0000000..23a8782 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccb730ee2.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccb7463be.png b/Lakeshore/manual/example/weixinShare/56b1ccb7463be.png new file mode 100644 index 0000000..9c21476 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccb7463be.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccb760b66.png b/Lakeshore/manual/example/weixinShare/56b1ccb760b66.png new file mode 100644 index 0000000..70e2c2c Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccb760b66.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccb7746be.png b/Lakeshore/manual/example/weixinShare/56b1ccb7746be.png new file mode 100644 index 0000000..1510360 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccb7746be.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccb7a5cf4.png b/Lakeshore/manual/example/weixinShare/56b1ccb7a5cf4.png new file mode 100644 index 0000000..6d17971 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccb7a5cf4.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccb7cec10.png b/Lakeshore/manual/example/weixinShare/56b1ccb7cec10.png new file mode 100644 index 0000000..9b8b8b1 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccb7cec10.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccb7e57d6.png b/Lakeshore/manual/example/weixinShare/56b1ccb7e57d6.png new file mode 100644 index 0000000..fe4456f Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccb7e57d6.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccb81840f.png b/Lakeshore/manual/example/weixinShare/56b1ccb81840f.png new file mode 100644 index 0000000..85509f1 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccb81840f.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccb835125.png b/Lakeshore/manual/example/weixinShare/56b1ccb835125.png new file mode 100644 index 0000000..cb4171e Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccb835125.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccb88270b.png b/Lakeshore/manual/example/weixinShare/56b1ccb88270b.png new file mode 100644 index 0000000..d0073aa Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccb88270b.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccb88ffad.png b/Lakeshore/manual/example/weixinShare/56b1ccb88ffad.png new file mode 100644 index 0000000..f6ceecd Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccb88ffad.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccb89d8c6.png b/Lakeshore/manual/example/weixinShare/56b1ccb89d8c6.png new file mode 100644 index 0000000..ec3ef9b Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccb89d8c6.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccb8b3646.png b/Lakeshore/manual/example/weixinShare/56b1ccb8b3646.png new file mode 100644 index 0000000..ee51cb3 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccb8b3646.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccb8c4d5b.png b/Lakeshore/manual/example/weixinShare/56b1ccb8c4d5b.png new file mode 100644 index 0000000..8ef2d6e Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccb8c4d5b.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccb8e1d0a.png b/Lakeshore/manual/example/weixinShare/56b1ccb8e1d0a.png new file mode 100644 index 0000000..e7533b6 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccb8e1d0a.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccb8f35a7.png b/Lakeshore/manual/example/weixinShare/56b1ccb8f35a7.png new file mode 100644 index 0000000..20e82e8 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccb8f35a7.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccb90a59f.png b/Lakeshore/manual/example/weixinShare/56b1ccb90a59f.png new file mode 100644 index 0000000..ef9fd90 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccb90a59f.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccb928ba0.png b/Lakeshore/manual/example/weixinShare/56b1ccb928ba0.png new file mode 100644 index 0000000..b3eb3f5 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccb928ba0.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccb9441c0.png b/Lakeshore/manual/example/weixinShare/56b1ccb9441c0.png new file mode 100644 index 0000000..c339429 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccb9441c0.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccc57c2ea.png b/Lakeshore/manual/example/weixinShare/56b1ccc57c2ea.png new file mode 100644 index 0000000..c889bf7 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccc57c2ea.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccc59f896.png b/Lakeshore/manual/example/weixinShare/56b1ccc59f896.png new file mode 100644 index 0000000..dd9f418 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccc59f896.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccc5b49fa.png b/Lakeshore/manual/example/weixinShare/56b1ccc5b49fa.png new file mode 100644 index 0000000..f58ff16 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccc5b49fa.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccc5c3104.png b/Lakeshore/manual/example/weixinShare/56b1ccc5c3104.png new file mode 100644 index 0000000..a249e51 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccc5c3104.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccc5de1bc.png b/Lakeshore/manual/example/weixinShare/56b1ccc5de1bc.png new file mode 100644 index 0000000..016cdeb Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccc5de1bc.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccc60d6a3.png b/Lakeshore/manual/example/weixinShare/56b1ccc60d6a3.png new file mode 100644 index 0000000..703e555 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccc60d6a3.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccc626433.png b/Lakeshore/manual/example/weixinShare/56b1ccc626433.png new file mode 100644 index 0000000..58da4dd Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccc626433.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccc632df9.png b/Lakeshore/manual/example/weixinShare/56b1ccc632df9.png new file mode 100644 index 0000000..fdcde8a Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccc632df9.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccc6645bd.png b/Lakeshore/manual/example/weixinShare/56b1ccc6645bd.png new file mode 100644 index 0000000..901a349 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccc6645bd.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccc67e94b.png b/Lakeshore/manual/example/weixinShare/56b1ccc67e94b.png new file mode 100644 index 0000000..2c2ce7d Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccc67e94b.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccc6a29ee.png b/Lakeshore/manual/example/weixinShare/56b1ccc6a29ee.png new file mode 100644 index 0000000..acda03e Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccc6a29ee.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccc6b40b6.png b/Lakeshore/manual/example/weixinShare/56b1ccc6b40b6.png new file mode 100644 index 0000000..a5bf501 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccc6b40b6.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccc6c9a5f.png b/Lakeshore/manual/example/weixinShare/56b1ccc6c9a5f.png new file mode 100644 index 0000000..cf54ce1 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccc6c9a5f.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccc6d31d8.png b/Lakeshore/manual/example/weixinShare/56b1ccc6d31d8.png new file mode 100644 index 0000000..eca4123 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccc6d31d8.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccc6e46a6.png b/Lakeshore/manual/example/weixinShare/56b1ccc6e46a6.png new file mode 100644 index 0000000..46e0017 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccc6e46a6.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccc715d2f.png b/Lakeshore/manual/example/weixinShare/56b1ccc715d2f.png new file mode 100644 index 0000000..171a912 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccc715d2f.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccc72d484.png b/Lakeshore/manual/example/weixinShare/56b1ccc72d484.png new file mode 100644 index 0000000..d5b83bc Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccc72d484.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccc747b46.png b/Lakeshore/manual/example/weixinShare/56b1ccc747b46.png new file mode 100644 index 0000000..74b939d Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccc747b46.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccc766d41.png b/Lakeshore/manual/example/weixinShare/56b1ccc766d41.png new file mode 100644 index 0000000..36bb5d5 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccc766d41.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccc78854d.png b/Lakeshore/manual/example/weixinShare/56b1ccc78854d.png new file mode 100644 index 0000000..449ea36 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccc78854d.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccd32086b.png b/Lakeshore/manual/example/weixinShare/56b1ccd32086b.png new file mode 100644 index 0000000..27c8472 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccd32086b.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccd334c93.png b/Lakeshore/manual/example/weixinShare/56b1ccd334c93.png new file mode 100644 index 0000000..b7ae5ff Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccd334c93.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccd34fc1d.png b/Lakeshore/manual/example/weixinShare/56b1ccd34fc1d.png new file mode 100644 index 0000000..d1acb9c Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccd34fc1d.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccd364053.png b/Lakeshore/manual/example/weixinShare/56b1ccd364053.png new file mode 100644 index 0000000..efdc369 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccd364053.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccd38a811.png b/Lakeshore/manual/example/weixinShare/56b1ccd38a811.png new file mode 100644 index 0000000..07d7c9c Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccd38a811.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccd3af2e2.png b/Lakeshore/manual/example/weixinShare/56b1ccd3af2e2.png new file mode 100644 index 0000000..f25a478 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccd3af2e2.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccd3c9b18.png b/Lakeshore/manual/example/weixinShare/56b1ccd3c9b18.png new file mode 100644 index 0000000..f8f0d0c Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccd3c9b18.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccd3e5811.png b/Lakeshore/manual/example/weixinShare/56b1ccd3e5811.png new file mode 100644 index 0000000..a870aa9 Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccd3e5811.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccd41561a.png b/Lakeshore/manual/example/weixinShare/56b1ccd41561a.png new file mode 100644 index 0000000..59922fa Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccd41561a.png differ diff --git a/Lakeshore/manual/example/weixinShare/56b1ccd42b29f.png b/Lakeshore/manual/example/weixinShare/56b1ccd42b29f.png new file mode 100644 index 0000000..536c60f Binary files /dev/null and b/Lakeshore/manual/example/weixinShare/56b1ccd42b29f.png differ diff --git a/Lakeshore/manual/example/weixinShare/README.md b/Lakeshore/manual/example/weixinShare/README.md new file mode 100644 index 0000000..90b90fd --- /dev/null +++ b/Lakeshore/manual/example/weixinShare/README.md @@ -0,0 +1,270 @@ +## Lakeshore微信分享教程 + +Lakeshore 目前支持微信分享，提供了以下几个功能的微信分享功能，如下： + +![](56b1ccb71616a.png) + +要做微信分享功能，对于新人来说可能有太多的坑，而你可能还得写服务器代码，比如php、C#、或者Java来提供生成微信分享所需要的签名信息，而这个签名信息的生成微信提供了详细的开发文档，具体可参考微信官方平台：[微信JS-SDK说明文档](http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html) + +该文档提供了一步步编程来生成微信签名信息。虽然该文档提供了详细的说明，但对于很多用户尤其是不懂后端语言的用户来讲，可能就是一个恶梦，而且里面有太多的坑，其中用户会遇到的最大的坑就在手机页面会弹出`invalid signature(签名错误)`，导致这个签名错误的原因有太多太多，而lakeshore又是一个面向非编程用户的H5游戏开发软件，因此，lakeshore提供了不需要编程就可以支持微信分享的功能，下边我们分三大步骤来介绍： + +1. [申请微信服务号并配置](#申请微信服务号并配置) + +1. [申请域名空间](#申请域名空间) + +1. [使用微信分享功能](#使用微信分享功能) + + +### 申请微信服务号并配置 + +如果你要微信分享，首先你得有个服务号，微信提供了三种类型的号：服务号、订阅号、企业号。个人微信用户可以申请订阅号，但订阅号不提供微信分享的支持，服务号与企业号才提供，而服务号与企业号只有企业才能申请，因此，这给个人开发者带来了一定的门槛。 + +下面我们先来申请服务号，打开微信主页：[https://mp.weixin.qq.com/](https://mp.weixin.qq.com/) + +点击页面右上角的“立即注册”，如图所示： + +![](56b1ccb730ee2.png) + +打开注册页面，输入注册信息，如图： + +![](56b1ccb7463be.png) + +填写正确信息后，点击“注册”，会打开“邮箱激活”页面，如图： + +![](56b1ccb760b66.png) + +这里登录填写的邮箱，进行激活，激活后，会打开“选择类型”页面，如图： + +![](56b1ccb7746be.png) + +这里选择服务号，记住，细看上面文字可以发现“一旦成功建立账号，类型不可更改”，这也就意味着你以后不可更改账号类型，即如果你现在选的是订阅号，那么，申请完毕之后，不能更改为服务号。这点特别注意！！ + +点击“服务号”选项，也会有个警告提示对话框，选择“确定”，打开“信息登记”页面，如图： + +![](56b1ccb7a5cf4.png) + +我们选择“企业”类型，填写企业的相关信息，填写完毕之后，点击“继续”，会打开申请好的“公众号信息”页面，那个页面就是你刚才申请好的公众号信息页面，如图： + +![](56b1ccb7cec10.png) + +上图左边表示公众号菜单栏，其中要想支持微信分享，最重要的就是“设置”与“开发者中心”两个菜单栏。点击“开发者中心”，如图： + +![](56b1ccb7e57d6.png) + +从上图中可以看到`开发者ID`的一些信息，这里包括：AppID与AppSecret，这里的信息对微信分享十分重要，到时候会用到。 + +然后点击左边菜单栏的“微信认证”，我们需要，打开页面如图： + +![](56b1ccb81840f.png) + +这里需要通过微信认证。如果是“订阅号”，是无法开通微信认证的。这点要注意。 + +认证完毕之后，点击左边菜单栏的“开发者中心”，查看当前分享接口是否获得，如图： + +![](56b1ccb835125.png) + +分享接口一定得获得，否则是不能进行微信分享的。 + +## 申请域名空间 + +现在很多平台都提供了域名空间的申请，这里以新浪云的申请为例。 + +打开新浪云官方网址：[http://sinacloud.com/](http://sinacloud.com/)，打开页面如图： + +![](56b1ccb88270b.png) + +如果你有新浪微博账号，你可以直接登录，没有的话，可以申请1个新浪微博账号，申请的流程这里不再赘述，申请完毕之后，我们登录，登录页面如图： + +![](56b1ccb88ffad.png) + +登录之后，会进入新浪云的控制台页面，如图： + +![](56b1ccb89d8c6.png) + +上图中标注的“云应用SAE”等会儿我们会用到。 + +对于新申请的新浪云账号，是没有实名认证的，我们需要进行实名认证才可以进行微信分享，点击左侧菜单栏的“实名认证”，会提示要输入姓名与身份证信息进行认证，如图： + +![](56b1ccb8b3646.png) + +**注意：上传的照片一定得按照上面的说明进行，否则可能无法通过认证。** + +下面我这边已经通过认证的截图如下： + +![](56b1ccb8c4d5b.png) + +通常情况下，进行实名认证需要几天时间，认证通过之后，我们就可以在新浪云平台上建立自己的子域名了。 + +下面鼠标移到页面左上角的“控制台”上，弹出下拉框，选择“云应用SAE”，如图所示： + +![](56b1ccb8e1d0a.png) + +此时，会进入“云应用SAE”页面，如图： + +![](56b1ccb8f35a7.png) + +上图是我的新浪云的控制台下，免费最多可以建立5个应用 ，默认“应用管理”列表中应用数目为零，因此，我们需要创建新的应用，点击“创建新应用”，弹出页面如图： + +如果你的账号未进行实名认证，会弹出如图所示对话框： + +![](56b1ccb90a59f.png) + +提示要尽快进行实名认证，点击确定，进入域名控制台设置，如图： + +![](56b1ccb928ba0.png) + +这个域名属于二级域名，因此，如果注册的用户过多，会提示已经注册，因此，可以用自己的手机号来填写，这样可以保证唯一性。其它的“应用名称”可以随便写，“验证码”填写后，选择开发语言为空应用即可，然后点击页面下方的“创建应用”即可创建自己的域名空间，创建完毕之后，会切换到页面如图： + +![](56b1ccb9441c0.png) + +此时，我们会发现“应用管理”列表已经有1个刚才我们创建的应用了。点击应用信息“weixin”栏，可以进入应用的详细列表信息页面，如图： + +![](56b1ccc57c2ea.png) + +上图我们可以看到此应用的二级域名信息。然后点击页面左侧菜单栏的“代码管理”标签，切换到“代码管理”标签页，如图： + +![](56b1ccc59f896.png) + +因为，浪浪云提供了版本管理功能，因此，创建版本的时候需要输入1个版本号，默认为1，点击“确定”，如图： + +![](56b1ccc5b49fa.png) + +创建完毕之后，会提示输入“安全登录”操作，这个时候，再次输入刚才申请的账号密码即可，如图： + +![](56b1ccc5c3104.png) + +“安全验证”完毕之后，页面会切换到当前已经创建的版本信息页，如图： + +![](56b1ccc5de1bc.png) + +点击“操作”按纽，在弹出的列表中选择“上传代码包”，如图： + +![](56b1ccc60d6a3.png) + +弹出“代码上传”页面，如图： + +![](56b1ccc626433.png) + +支持三种格式的代码包，这里我们提供PHP版的微信分享代码包 [weixinShare_php.zip](http://sedn.egret.com/ueditor/20150908/55ee44b90ab24.zip)，上传完毕之后，点击“编辑代码”按纽，如图： + +![](56b1ccc632df9.png) + +弹出代码编辑页面，如图： + +![](56b1ccc6645bd.png) + +你会发现多了四个文件，打开文件weixin.class.php，填写AppID与AppSecret,如图： + +![](56b1ccc67e94b.png) + +还记得我们之前说过的，微信页面的开发者ID，如图： + +![](56b1ccc6a29ee.png) + +将AppID与AppSecret填入进去，然后保存weixin.class.php文件，再回到SAE控制台页面，就可以获取微信签名地址了，如图： + +![](56b1ccc6b40b6.png) + +标记住为你的域名地址，那么签名信息地址在这个域名地址基础上http://你的域名.sinaap.com/signature.php,例如：我这边申请的签名信息地址为：http://cy3502398.sinaapp.com/signature.php，进行完这步之后，回到微信页面，我们需要绑定“JS接口安全域名”，点击左边菜单栏的“公众号设置”，打开如图页面： + +![](56b1ccc6c9a5f.png) + +设置“JS接口安全域名”，点击“设置”，弹出设置页面。 + +**（注意：这里所设置的域名一定得通过备案，不通过备案的域名是无法进行微信分享的，上面我们申请的新浪云域名只需要通过认证即可，如果是自己在域名空间，那么必须要备案！！）** + +域名写法类似qq.com一样，比如我这边填写的是： + +![](56b1ccc6d31d8.png) + +你这边填写你刚才申请的新浪云域名。 + +此时，所有的前期准备工作已经完毕，此时我们就可以利用Lakeshore进行微信分享开发了。 + +### 使用微信分享功能 + +打开Lakeshore 1.1，创建项目，取名项目名称为“weixinShare”，如图所示： + +![](56b1ccc6e46a6.png) + +然后选择Lakeshore左下侧的“组件”栏，将“微信”组件拖拽到场景中，填写微信的相关信息，如图： + +![](56b1ccc715d2f.png) + +服务器端生成的签名地址：这个地址是我们刚才得到的签名信息地址。 + +开启调试：如果选择“是”，那么，表示在手机端预览微信分享的时候，会有微信签名是否有效，以及分享时的图片信息地址等以弹出对话框表示，一般调试通过之后，可以设为“否”将此关闭。 + +* 标题：微信分享时所需要展示的分享标题。 + +* 描述：微信分享时所需要展示的分享内容。 + +* 链接地址：微信分享后点击分享的内容后会跳转的地址。 + +* 分享图片：微信分享后展示的图标信息。 + +信息填写完毕之后，我们点击“发布”按纽进行发布，发布完毕之后，选择所有的文件将其打包，如图： + +![](56b1ccc72d484.png) + +点击“添加到压缩文件（A)...”，弹出打包，选择“zip”格式，如图： + +![](56b1ccc747b46.png) + +点击“确定”打包完毕，将打包好的文件上传到新浪云，打开之前的新浪云控制台，选择“代码管理”，点击“操作”，选择“上传代码包”，上传刚才打包好的“weixinShare_publish.zip”文件，如图： + +![](56b1ccc766d41.png) + +上传完毕之后，点击“编辑代码”按纽，在弹出的页面中发现刚才我们打包的文件都已经上传到新浪云上去了，如图： + +![](56b1ccc78854d.png) + +此时，微信分享功能已经做完毕，最终我们将我们的游戏地址拷贝到微信中，发送给好友即可，游戏地址如图： + +![](56b1ccd32086b.png) + +地址为在链接的基础上加上/index.html，最终形式为：[http://xxx.sinaapp.com/index.html](http://xxx.sinaapp.com/index.html) + +**注意：下面一点对于新浪云的用户来讲，如果不开通就无法通过微信分享认证**，回到新浪云控制台，在左侧的菜单中找到“存储与CDN服务”-“Memcache”,如图所示： + +![](56b1ccd334c93.png) + +点击“Memcache”,打开Memcache页面如图： + +![](56b1ccd34fc1d.png) + +从图中可以看出我们尚未初始化Memcache服务，如果不做这一步，实际上是不能向新浪云写数据的，而微信这块需要动态向服务器写数据，因此，我们需要初始化Memcache,新浪云提供了20M以下的免费空间，否则，就需要云豆，不过20M已经足够用了，点击“初始化Memcache”,弹出页面： + +![](56b1ccd364053.png) + +输入20，点击确定，出现页面： + +![](56b1ccd38a811.png) + +此时，所有的工作已经完毕~~~ + +最终在微信中打开此地址，即可预览此游戏，当然，目前在游戏测试中我们没有为游戏加入任何其它内容，只是添加了微信分享功能，所以打开页面后会显示全黑，没有任何内容，如果在Lakeshore中开启了微信的调试模式，那么，最终打开页面的时候会弹出很多提示对话框，最终如果弹出如下提示对话框，表示微信分享功能已经没有任何问题了，如图： + +![](56b1ccd3af2e2.png) + +点击“好”之后，点击手机右上角“...”按纽，弹出如图所示页面： + +![](56b1ccd3c9b18.png) + +点击“发送给朋友”，弹出如图所示页面： + +![](56b1ccd3e5811.png) + +从标题上我们看出之前填的内容已经出现在对话框上了。同样，“分享到朋友圈”、“分享到手机QQ”、“分享到QQ空间”都会呈现在Lakeshore里编辑的信息。 + +至止，整个利用Lakeshore制作的微信分享流程完毕，这是Lakeshore为微信分享提供的基本功能，“发送给朋友”、“分享到朋友圈”、“分享到手机QQ”、“分享到QQ空间”这几项标题、描述、链接地址、分享图片Icon都是一样的，但有时候希望能够分别为这几项定制不同的分享内容，因此，Lakeshore提供了通过添加事件，并在事件里添加条件与动作来动态更新，如图： + +![](56b1ccd41561a.png) + +另外，还提供了对微信分享过程中的一些状态的回调，如图： + +![](56b1ccd42b29f.png) + +通过这些条件回调可以做一些有趣的事，比如希望当用将游戏地址分享到朋友圈后，才会给予一定的奖励或者才能通过下一游戏关卡。更多的功能等待大家去发现。 + + diff --git a/Lakeshore/manual/installation/README.md b/Lakeshore/manual/installation/README.md new file mode 100644 index 0000000..e69de29 diff --git a/Lakeshore/manual/interface/README.md b/Lakeshore/manual/interface/README.md new file mode 100644 index 0000000..e69de29 diff --git a/Lakeshore/manual/module/animation/565bf96f7d716.png b/Lakeshore/manual/module/animation/565bf96f7d716.png new file mode 100644 index 0000000..a0bae8f Binary files /dev/null and b/Lakeshore/manual/module/animation/565bf96f7d716.png differ diff --git a/Lakeshore/manual/module/animation/565bf96f87d12.png b/Lakeshore/manual/module/animation/565bf96f87d12.png new file mode 100644 index 0000000..72dd0e6 Binary files /dev/null and b/Lakeshore/manual/module/animation/565bf96f87d12.png differ diff --git a/Lakeshore/manual/module/animation/565bf96f9392a.png b/Lakeshore/manual/module/animation/565bf96f9392a.png new file mode 100644 index 0000000..dfa4a4a Binary files /dev/null and b/Lakeshore/manual/module/animation/565bf96f9392a.png differ diff --git a/Lakeshore/manual/module/animation/565bf96fa4a74.png b/Lakeshore/manual/module/animation/565bf96fa4a74.png new file mode 100644 index 0000000..9cc4120 Binary files /dev/null and b/Lakeshore/manual/module/animation/565bf96fa4a74.png differ diff --git a/Lakeshore/manual/module/animation/565bf96fb7e2d.png b/Lakeshore/manual/module/animation/565bf96fb7e2d.png new file mode 100644 index 0000000..5da5d44 Binary files /dev/null and b/Lakeshore/manual/module/animation/565bf96fb7e2d.png differ diff --git a/Lakeshore/manual/module/animation/565bf96fc4293.png b/Lakeshore/manual/module/animation/565bf96fc4293.png new file mode 100644 index 0000000..f88b9e4 Binary files /dev/null and b/Lakeshore/manual/module/animation/565bf96fc4293.png differ diff --git a/Lakeshore/manual/module/animation/565bf96fd263e.png b/Lakeshore/manual/module/animation/565bf96fd263e.png new file mode 100644 index 0000000..1ca312b Binary files /dev/null and b/Lakeshore/manual/module/animation/565bf96fd263e.png differ diff --git a/Lakeshore/manual/module/animation/565bf96ff191e.png b/Lakeshore/manual/module/animation/565bf96ff191e.png new file mode 100644 index 0000000..39c9e56 Binary files /dev/null and b/Lakeshore/manual/module/animation/565bf96ff191e.png differ diff --git a/Lakeshore/manual/module/animation/565bf970188d5.png b/Lakeshore/manual/module/animation/565bf970188d5.png new file mode 100644 index 0000000..85169e8 Binary files /dev/null and b/Lakeshore/manual/module/animation/565bf970188d5.png differ diff --git a/Lakeshore/manual/module/animation/565bf97ec1734.png b/Lakeshore/manual/module/animation/565bf97ec1734.png new file mode 100644 index 0000000..75c17e5 Binary files /dev/null and b/Lakeshore/manual/module/animation/565bf97ec1734.png differ diff --git a/Lakeshore/manual/module/animation/565bf97ee77ac.png b/Lakeshore/manual/module/animation/565bf97ee77ac.png new file mode 100644 index 0000000..78a2358 Binary files /dev/null and b/Lakeshore/manual/module/animation/565bf97ee77ac.png differ diff --git a/Lakeshore/manual/module/animation/565bf97f030fb.png b/Lakeshore/manual/module/animation/565bf97f030fb.png new file mode 100644 index 0000000..518993b Binary files /dev/null and b/Lakeshore/manual/module/animation/565bf97f030fb.png differ diff --git a/Lakeshore/manual/module/animation/565bf97f1fade.png b/Lakeshore/manual/module/animation/565bf97f1fade.png new file mode 100644 index 0000000..53f3a97 Binary files /dev/null and b/Lakeshore/manual/module/animation/565bf97f1fade.png differ diff --git a/Lakeshore/manual/module/animation/565bf97f38265.png b/Lakeshore/manual/module/animation/565bf97f38265.png new file mode 100644 index 0000000..9597856 Binary files /dev/null and b/Lakeshore/manual/module/animation/565bf97f38265.png differ diff --git a/Lakeshore/manual/module/animation/565bf97f56518.png b/Lakeshore/manual/module/animation/565bf97f56518.png new file mode 100644 index 0000000..6e2b5a8 Binary files /dev/null and b/Lakeshore/manual/module/animation/565bf97f56518.png differ diff --git a/Lakeshore/manual/module/animation/565bf97f679e4.png b/Lakeshore/manual/module/animation/565bf97f679e4.png new file mode 100644 index 0000000..e13e8e8 Binary files /dev/null and b/Lakeshore/manual/module/animation/565bf97f679e4.png differ diff --git a/Lakeshore/manual/module/animation/565bf97f8294d.png b/Lakeshore/manual/module/animation/565bf97f8294d.png new file mode 100644 index 0000000..dd7e08d Binary files /dev/null and b/Lakeshore/manual/module/animation/565bf97f8294d.png differ diff --git a/Lakeshore/manual/module/animation/565bf97f959f9.png b/Lakeshore/manual/module/animation/565bf97f959f9.png new file mode 100644 index 0000000..e7f3eff Binary files /dev/null and b/Lakeshore/manual/module/animation/565bf97f959f9.png differ diff --git a/Lakeshore/manual/module/animation/565bf97fabe1e.png b/Lakeshore/manual/module/animation/565bf97fabe1e.png new file mode 100644 index 0000000..657c449 Binary files /dev/null and b/Lakeshore/manual/module/animation/565bf97fabe1e.png differ diff --git a/Lakeshore/manual/module/animation/565bf97fbc56e.png b/Lakeshore/manual/module/animation/565bf97fbc56e.png new file mode 100644 index 0000000..428fca4 Binary files /dev/null and b/Lakeshore/manual/module/animation/565bf97fbc56e.png differ diff --git a/Lakeshore/manual/module/animation/565bf97fd1f49.png b/Lakeshore/manual/module/animation/565bf97fd1f49.png new file mode 100644 index 0000000..96e1d95 Binary files /dev/null and b/Lakeshore/manual/module/animation/565bf97fd1f49.png differ diff --git a/Lakeshore/manual/module/animation/README.md b/Lakeshore/manual/module/animation/README.md new file mode 100644 index 0000000..b358ae3 --- /dev/null +++ b/Lakeshore/manual/module/animation/README.md @@ -0,0 +1,121 @@ +![](565bf97f679e4.png) +动画组件可以理解为支持序列帧动画的精灵组件。它能实现精灵所有的功能，并支持动画播放。 + +### 序列帧面板 +添加动画组件并选中后，序列帧面板便被激活。 +![](565bf97f8294d.png) +点击“添加帧”按钮，打开素材库窗口。项目目录中images目录下的所有可用图片文件都会列在素材库窗口中。 +![](565bf97f959f9.png) +可以按住键盘上的Ctrl键，鼠标依次单击，复选要添加到帧的图片。也可以按住鼠标拖拽框选所有要添加的图片。（***注：图片序列在序列帧中的默认顺序由选择的顺序和添加的顺序决定。添加到序列帧面板后，也可以通过拖拽改变排序**）。素材库窗口中，单击右键选择“添加图片素材”可以添加图片到项目素材库中。 + +***注1：当前不支持中文命名的图片文件，游戏运行中中文命名的图片将无法显示。** + +***注2：没有加载拷贝到项目素材库目录的图片文件无法在游戏中显示。** + +添加图片到序列帧面板后如下图： +![](565bf97fd1f49.png) + +#### 序列帧工具栏 +![](565bf97fbc56e.png) +由左向右依次为，上一帧，播放/停止，下一帧，帧频，循环次数，帧数，时长 +- 上一帧；切换到当前帧的上一帧，如果当前为首帧则点击无效。 +- 播放/停止：播放或停止当前动画组件中的序列帧。 +- 下一帧：切换到当前帧的下一帧，如果当前为末帧则点击无效。 +- 帧频：每秒播放的帧数，也称作FPS。默认值为6。 +- 循环次数：设置序列帧动画的循环次数，默认为0，表示无限次循环。 +- 帧数：当前序列帧的总帧数。 +- 时长：当前序列帧依照设置的帧频和总帧数计算得出的播放时长。 + +#### 序列帧动画列表 +![](565bf97fabe1e.png) +动画列表列出所有当前动画组件中的动画剪辑。 +- 一个动画组件中可以包含多个动画剪辑，每个动画剪辑对应一组序列帧。 +例如，一个横轴过关游戏的角色，他可能有好多种动作，跑，跳，攻击，站立等，每一个动作就对应一个动画剪辑，而每一个动作又是由多张图组成的动画序列帧。在游戏中可以根据角色处于的状态不同，通过动作来切换动画剪辑，便可以让角色呈现出跑，跳，攻击等不同的动作。 +- 默认的动画剪辑名为“动画”，右键单击动画列表可以添加“动画剪辑”。 +- 右键单击动画剪辑可以添加动画，重命名当前动画剪辑，复制当前动画剪辑和删除当前动画剪辑。 +- 当动画列表中只有一个动画剪辑时，动画剪辑不能被删除。 +- 游戏中，动画组件初始化后，默认播放第一个动画剪辑。 + +### 特有属性 +![](565bf970188d5.png) +- 参与碰撞：设置动画实例是否参与碰撞。默认值为“否”。 + +### 动画条件 +动画组件除特有条件外，也适用所有通用条件，参看：[通用条件](../../commonElements/conditions/README.md) + +![](565bf97ec1734.png) +#### 全部播放完毕 +检测当前动画是否全部播放完毕。【一次性触发】 +动画可能会循环播放多次，这里表示最后一次播放完毕时触发。对于设置无限循环的动画，此条件永远为假。 +此条件无属性设置窗口。 +#### 单次播放完毕 +检测当前动画是否单次播放完毕。【一次性触发】 +动画可能会循环多次，每完成一次循环就会触发一次。例如，循环次数为10次的动画，会触发10次。 +此条件无属性设置窗口。 +#### 正在播放 +如果正在播放动画，条件为真，触发。【持续性触发】 +此条件无属性设置窗口。 +#### 比较当前帧 +比较动画播放中，当前帧和指定帧的大小关系。【持续性触发】 +![](565bf97f030fb.png) +#### 比较播放速率 +比较当前动画的播放速率和指定速率的大小关系。【持续性触发】 +![](565bf97ee77ac.png) +#### 播放顺序 +判断当前动画剪辑的播放顺序。【持续性触发】 +默认为“正序”，可选项有 +- 正序 +- 倒序 + +![](565bf97f38265.png) +#### 比较循环次数 +比较当前动画剪辑的循环次数和指定次数的大小关系。【持续性触发】 + +![](565bf97f1fade.png) +#### 若为指定动画 +如果当前播放动画剪辑为指定动画剪辑，则条件为真，触发。【持续性触发】 +![](565bf97f56518.png) + +### 动画动作 +动画组件除特有动作外，也适用所有通用动作，参看：[通用动作](../../commonElements/action/README.md) + +![](565bf96f7d716.png) +#### 跳到指定帧播放 +跳到当前动画剪辑的指定帧然后按指定循环次数开始播放。 +![](565bf96fc4293.png) +#### 跳到指定帧停止 +跳到当前动画剪辑的指定帧，然后停止播放。画面会停在指定帧。 +![](565bf96fd263e.png) +#### 播放 +按指定循环次数播放当前动画剪辑。 +![](565bf96f87d12.png) +#### 停止 +停止播放当前动画剪辑。 +此动作无属性设置窗口。 +#### 上一帧 +跳到当前动画剪辑当前帧的上一帧。 +此动作无属性设置窗口。 +#### 下一帧 +跳到当前动画剪辑当前帧的下一帧。 +此动作无属性设置窗口。 +#### 循环次数 +设置当前动画剪辑的播放循环次数。 +![](565bf96ff191e.png) +#### 播放顺序 +设置当前动画剪辑的播放顺序，默认为正序。 +可选项有： +- 正序 +- 倒序 + +![](565bf96f9392a.png) +#### 播放速率 +设置当前动画剪辑的播放速率。 +![](565bf96fa4a74.png) +#### 播放指定动画 +播放当前动画组件的指定动画剪辑。 +- 动画剪辑名称：指定的动画剪辑名称。 +- 播放起点： + - 起始帧：从动画剪辑的首帧开始播放。 + - 当前帧；从当前动画剪辑的当前帧数开始播放。 + +![](565bf96fb7e2d.png) diff --git a/Lakeshore/manual/module/bitmapfonts/5653f6ac4fb50.png b/Lakeshore/manual/module/bitmapfonts/5653f6ac4fb50.png new file mode 100644 index 0000000..1cd396d Binary files /dev/null and b/Lakeshore/manual/module/bitmapfonts/5653f6ac4fb50.png differ diff --git a/Lakeshore/manual/module/bitmapfonts/5653f6ac72114.png b/Lakeshore/manual/module/bitmapfonts/5653f6ac72114.png new file mode 100644 index 0000000..0856437 Binary files /dev/null and b/Lakeshore/manual/module/bitmapfonts/5653f6ac72114.png differ diff --git a/Lakeshore/manual/module/bitmapfonts/5653f6ac8be71.png b/Lakeshore/manual/module/bitmapfonts/5653f6ac8be71.png new file mode 100644 index 0000000..f0e0f08 Binary files /dev/null and b/Lakeshore/manual/module/bitmapfonts/5653f6ac8be71.png differ diff --git a/Lakeshore/manual/module/bitmapfonts/5653f6ac94db2.png b/Lakeshore/manual/module/bitmapfonts/5653f6ac94db2.png new file mode 100644 index 0000000..2718894 Binary files /dev/null and b/Lakeshore/manual/module/bitmapfonts/5653f6ac94db2.png differ diff --git a/Lakeshore/manual/module/bitmapfonts/5653f6acac34b.png b/Lakeshore/manual/module/bitmapfonts/5653f6acac34b.png new file mode 100644 index 0000000..90a39ec Binary files /dev/null and b/Lakeshore/manual/module/bitmapfonts/5653f6acac34b.png differ diff --git a/Lakeshore/manual/module/bitmapfonts/5653f6acbb211.png b/Lakeshore/manual/module/bitmapfonts/5653f6acbb211.png new file mode 100644 index 0000000..3c78898 Binary files /dev/null and b/Lakeshore/manual/module/bitmapfonts/5653f6acbb211.png differ diff --git a/Lakeshore/manual/module/bitmapfonts/5653f6acc5ea9.png b/Lakeshore/manual/module/bitmapfonts/5653f6acc5ea9.png new file mode 100644 index 0000000..63b3ec0 Binary files /dev/null and b/Lakeshore/manual/module/bitmapfonts/5653f6acc5ea9.png differ diff --git a/Lakeshore/manual/module/bitmapfonts/5653f6ace22a2.png b/Lakeshore/manual/module/bitmapfonts/5653f6ace22a2.png new file mode 100644 index 0000000..1a4706b Binary files /dev/null and b/Lakeshore/manual/module/bitmapfonts/5653f6ace22a2.png differ diff --git a/Lakeshore/manual/module/bitmapfonts/5653f6ad006eb.png b/Lakeshore/manual/module/bitmapfonts/5653f6ad006eb.png new file mode 100644 index 0000000..384e7e4 Binary files /dev/null and b/Lakeshore/manual/module/bitmapfonts/5653f6ad006eb.png differ diff --git a/Lakeshore/manual/module/bitmapfonts/5653f6ad1baba.png b/Lakeshore/manual/module/bitmapfonts/5653f6ad1baba.png new file mode 100644 index 0000000..386bbc2 Binary files /dev/null and b/Lakeshore/manual/module/bitmapfonts/5653f6ad1baba.png differ diff --git a/Lakeshore/manual/module/bitmapfonts/5653f6ad2b542.png b/Lakeshore/manual/module/bitmapfonts/5653f6ad2b542.png new file mode 100644 index 0000000..e8440d8 Binary files /dev/null and b/Lakeshore/manual/module/bitmapfonts/5653f6ad2b542.png differ diff --git a/Lakeshore/manual/module/bitmapfonts/README.md b/Lakeshore/manual/module/bitmapfonts/README.md new file mode 100644 index 0000000..2e75ffe --- /dev/null +++ b/Lakeshore/manual/module/bitmapfonts/README.md @@ -0,0 +1,47 @@ +![](5653f6ad2b542.png) + +位图字体的英文名称是Bitmap Font,在游戏制作中十分常用。 +游戏制作中，为了美观和配合游戏的整体风格，常需要使用到一些特殊字体或艺术字体。如下图中的战斗力数值便为位图字体实现的： +![](5653f6ac4fb50.png)![](5653f6ac72114.png) +如果直接将特殊字体或艺术字体的字体库内置在游戏中会使游戏加载和运行的速度变慢，使用位图字体便可以很好的解决这个问题。位图字体的做法是将会使用到的每个文字对应的字体做成位图，生成文字内容和位图的映射，游戏中动态的调用显示位图。这样即在游戏中呈现了漂亮的字体，又节省了资源。 +Laskshore中使用的位图字体是由一张png的图片集和一个fnt配置文件组成的。其中png图片集中包括了所有会使用到的位图，fnt配置文件里描述了这些位图应该怎么从png图片集中切分出来。 +建议使用Egret TextureMerger来制作Lakeshore使用的位图字体。请参照TextureMerger使用教程的Bitmap font章节：[TextureMerger使用教程](http://bbs.egret.com/thread-1653-1-1.html) + +------------ + + +### 特有属性 +![](5653f6ace22a2.png) +- 纹理图片：指定位图字体的PNG图片。 +- 配置文件：指定位图字体的fnt配置文件。 +- 默认文本：默认显示的文本内容。 +- 字符间距：位图字体的字符间距。默认值为0。 +- 行间距：位图字体的行间距。默认值为0。 + +------------ + + +### 位图字体条件 +![](5653f6ad006eb.png) +#### 比较内容 +用位图字体的文本内容和指定内容比较，如果相同则条件成立。【持续性触发】 +![](5653f6ad1baba.png) + +------------ + + +### 位图字体动作 +![](5653f6ac8be71.png) +#### 文本内容 +设置位图字体显示的内容。 +![](5653f6acac34b.png) +#### 追加文本 +在位图字体已有内容的后边追加文本。 +![](5653f6acbb211.png) +#### 字符间距 +设置位图字体的字符间距。 +![](5653f6acc5ea9.png) +#### 行间距 +设置位图字体的行间距。 +![](5653f6ac94db2.png) + diff --git a/Lakeshore/manual/module/button/564ac01dd1b86.png b/Lakeshore/manual/module/button/564ac01dd1b86.png new file mode 100644 index 0000000..bbc7df4 Binary files /dev/null and b/Lakeshore/manual/module/button/564ac01dd1b86.png differ diff --git a/Lakeshore/manual/module/button/564ac01dec2c6.png b/Lakeshore/manual/module/button/564ac01dec2c6.png new file mode 100644 index 0000000..30139b5 Binary files /dev/null and b/Lakeshore/manual/module/button/564ac01dec2c6.png differ diff --git a/Lakeshore/manual/module/button/564ac01e09bff.png b/Lakeshore/manual/module/button/564ac01e09bff.png new file mode 100644 index 0000000..622489a Binary files /dev/null and b/Lakeshore/manual/module/button/564ac01e09bff.png differ diff --git a/Lakeshore/manual/module/button/564ac01e221c8.png b/Lakeshore/manual/module/button/564ac01e221c8.png new file mode 100644 index 0000000..5ff3f0b Binary files /dev/null and b/Lakeshore/manual/module/button/564ac01e221c8.png differ diff --git a/Lakeshore/manual/module/button/564ac01e2daab.png b/Lakeshore/manual/module/button/564ac01e2daab.png new file mode 100644 index 0000000..1200489 Binary files /dev/null and b/Lakeshore/manual/module/button/564ac01e2daab.png differ diff --git a/Lakeshore/manual/module/button/564ac01e3af30.png b/Lakeshore/manual/module/button/564ac01e3af30.png new file mode 100644 index 0000000..47bce2c Binary files /dev/null and b/Lakeshore/manual/module/button/564ac01e3af30.png differ diff --git a/Lakeshore/manual/module/button/564ac01e5ac54.png b/Lakeshore/manual/module/button/564ac01e5ac54.png new file mode 100644 index 0000000..7870869 Binary files /dev/null and b/Lakeshore/manual/module/button/564ac01e5ac54.png differ diff --git a/Lakeshore/manual/module/button/564ac01e6ec2e.png b/Lakeshore/manual/module/button/564ac01e6ec2e.png new file mode 100644 index 0000000..6d9ba1c Binary files /dev/null and b/Lakeshore/manual/module/button/564ac01e6ec2e.png differ diff --git a/Lakeshore/manual/module/button/564ac01e8af82.png b/Lakeshore/manual/module/button/564ac01e8af82.png new file mode 100644 index 0000000..e608e7d Binary files /dev/null and b/Lakeshore/manual/module/button/564ac01e8af82.png differ diff --git a/Lakeshore/manual/module/button/564ac01e9f242.png b/Lakeshore/manual/module/button/564ac01e9f242.png new file mode 100644 index 0000000..06b8283 Binary files /dev/null and b/Lakeshore/manual/module/button/564ac01e9f242.png differ diff --git a/Lakeshore/manual/module/button/564ac024888b3.png b/Lakeshore/manual/module/button/564ac024888b3.png new file mode 100644 index 0000000..7298b03 Binary files /dev/null and b/Lakeshore/manual/module/button/564ac024888b3.png differ diff --git a/Lakeshore/manual/module/button/README.md b/Lakeshore/manual/module/button/README.md new file mode 100644 index 0000000..d26eaf9 --- /dev/null +++ b/Lakeshore/manual/module/button/README.md @@ -0,0 +1,81 @@ +![](564ac01e9f242.png) + +按钮组件可以实现点击功能。游戏菜单中的按钮，游戏中需要单独接受点击事件的实例都可以用按钮来实现。 + +### 特有属性 +![](564ac01e5ac54.png) +- 弹起状态：设置按钮弹起状态时显示的图片的地址。 +- 按下状态：设置按钮按下状态时显示的图片的地址。 +- 禁用状态：设置按钮禁用状态时显示的图片的地址。 +- 文本：设置按钮上默认显示的文本内容。 + +*注1：每个状态的图片的地址均需单独指定，若为空，则相应状态不会有图片显示。 + +*注2：按钮不支持碰撞。 + +------------ + + +### 按钮条件 +按钮组件除特有条件外，也适用部分通用条件（按钮不支持“碰撞”相关条件），参看：[通用条件](../../commonElements/conditions/README.md) + +![](564ac01e6ec2e.png) +#### 当按住时 +当按钮被按住时。【持续性触发】 +只要按钮处于按下状态，条件便为真，会一直触发动作。 +此条件无属性设置窗口。 +#### 当按下时 +当按钮被按下时。【一次性触发】 +当按钮被按下的那一刻，条件为真，只触发一次。 +此条件无属性设置窗口。 +#### 当弹起时 +当按钮弹起时。【一次性触发】 +按钮从按下状态变为弹起状态的那一刻，条件为真，值触发一次。 +此条件无属性设置窗口。 +#### 按住移动时 +按住按钮并有移动时。【一次性触发】 +按钮处于按下状态，并且鼠标/触摸手指有移动时，条件为真，只触发一次。判断依据为存在移动便触发一次，所以如果鼠标/触摸手指在按钮处于按下状态时持续一直移动，便会一直触发。例如，鼠标按住按钮并一直左右滑动，那么条件便持续触发，那么动作便会被一直执行。 +此条件无属性设置窗口。 +#### 按钮外释放时 +按钮处于按下状态，鼠标/触摸手指移出按钮外然后释放按钮时。【一次性触发】 +此条件无属性设置窗口。 +#### 比较按钮文本 +如果按钮的文本内容和指定文本内容相同时。【持续性触发】 +比较文本内容，若相同，条件为真，会一直触发动作。 +![](564ac01e8af82.png) +#### 若可用 +如果当前按钮处于可用状态。【持续性触发】 + +------------ + + +### 按钮动作 +按钮组件除特有动作外，也适用部分通用动作（按钮不支持“碰撞”相关动作），参看：[通用动作](../../commonElements/action/README.md) + +![](564ac024888b3.png) +#### 文本内容 +设置按钮上的文本内容。 +![](564ac01dd1b86.png) +#### 文本颜色 +设置按钮上的文本颜色。 +![](564ac01e221c8.png) +#### 文本字体 +设置按钮上的文本字体。 +![](564ac01e2daab.png) +#### 字体大小 +设置按钮上的字体大小。 +![](564ac01e3af30.png) +#### 文本水平对齐方式 +设置按钮上文本的水平对齐方式。默认为"水平居中"，可选项有： +- 左对齐 +- 右对齐 +- 水平居中 + +![](564ac01e09bff.png) +#### 文本垂直对齐方式 +设置按钮上温恩的垂直对齐方式。默认为"垂直居中"，可选项有： +- 上对齐 +- 下对齐 +- 垂直居中 + +![](564ac01dec2c6.png) diff --git a/Lakeshore/manual/module/function/569352fb09be5.png b/Lakeshore/manual/module/function/569352fb09be5.png new file mode 100644 index 0000000..fe6bba5 Binary files /dev/null and b/Lakeshore/manual/module/function/569352fb09be5.png differ diff --git a/Lakeshore/manual/module/function/569352fb2641a.png b/Lakeshore/manual/module/function/569352fb2641a.png new file mode 100644 index 0000000..48dbb2f Binary files /dev/null and b/Lakeshore/manual/module/function/569352fb2641a.png differ diff --git a/Lakeshore/manual/module/function/569352fb438f2.png b/Lakeshore/manual/module/function/569352fb438f2.png new file mode 100644 index 0000000..fd545e9 Binary files /dev/null and b/Lakeshore/manual/module/function/569352fb438f2.png differ diff --git a/Lakeshore/manual/module/function/569352fb58e6d.png b/Lakeshore/manual/module/function/569352fb58e6d.png new file mode 100644 index 0000000..5d5db28 Binary files /dev/null and b/Lakeshore/manual/module/function/569352fb58e6d.png differ diff --git a/Lakeshore/manual/module/function/569352fb7db59.png b/Lakeshore/manual/module/function/569352fb7db59.png new file mode 100644 index 0000000..3fb58a5 Binary files /dev/null and b/Lakeshore/manual/module/function/569352fb7db59.png differ diff --git a/Lakeshore/manual/module/function/569352fb93994.png b/Lakeshore/manual/module/function/569352fb93994.png new file mode 100644 index 0000000..0f559cb Binary files /dev/null and b/Lakeshore/manual/module/function/569352fb93994.png differ diff --git a/Lakeshore/manual/module/function/README.md b/Lakeshore/manual/module/function/README.md new file mode 100644 index 0000000..633c655 --- /dev/null +++ b/Lakeshore/manual/module/function/README.md @@ -0,0 +1,37 @@ +![](569352fb93994.png) + +添加函数组件后，可以将多个动作放置在函数内，当调用函数的时候，相当于调用函数内的多个动作。当多个动作在事件表中需要反复调用时，函数的使用就能极大的提高效率。 +*注：函数组件除“名称”和“全局”外，不支持其他基本属性。不支持碰撞。函数组件添加后并不会在游戏运行场景中产生可见实例。 + +### 特有属性 +函数组件无特有属性。 + +------------ + + +### 函数条件 +![](569352fb438f2.png) +#### 比较函数参数 +当函数被调用时可以传递一个参数列表，列表中是一系列参数。当前条件用于比价这些参数值。 +- 索引：参数列表中参数的索引。0表示第一个参数，1表示第二个参数，以此类推。 +- 比较值：用于比较的数值。 + +![](569352fb58e6d.png) + +#### 函数被调用时 +当函数被调用时触发。 +此条件表示创建一个函数。指定函数名，表示给创建的函数起名。 +以此为条件的事件中的一系列动作便为调用函数时要执行的动作。 +![](569352fb7db59.png) + +------------ + + +### 函数动作 +![](569352fb09be5.png) +#### 调用函数 +调用执行指定函数。 +- 函数名：要调用的函数的名字。 +- 参数列表：调用的同时，传递的参数列表。以“,”分隔各个参数。 + +![](569352fb2641a.png) \ No newline at end of file diff --git a/Lakeshore/manual/module/genius/564a9735aec3f.png b/Lakeshore/manual/module/genius/564a9735aec3f.png new file mode 100644 index 0000000..b41870f Binary files /dev/null and b/Lakeshore/manual/module/genius/564a9735aec3f.png differ diff --git a/Lakeshore/manual/module/genius/564a9735c70a6.png b/Lakeshore/manual/module/genius/564a9735c70a6.png new file mode 100644 index 0000000..94d5451 Binary files /dev/null and b/Lakeshore/manual/module/genius/564a9735c70a6.png differ diff --git a/Lakeshore/manual/module/genius/README.md b/Lakeshore/manual/module/genius/README.md new file mode 100644 index 0000000..d218946 --- /dev/null +++ b/Lakeshore/manual/module/genius/README.md @@ -0,0 +1,21 @@ +![](564a9735c70a6.png) + +精灵是英文Spirte的直译，在游戏开发中Spirte是最基本的可操控对象。 +精灵可以理解为图片的容器，如果需要在游戏场景中插入一个静态图片，那么就需要把图片放置在一个精灵内来呈现。 + +### 特有属性 +![](564a9735aec3f.png) +- 图片源：指定精灵内插入的图片的地址。 +- 参与碰撞：设置精灵是否参与碰撞。默认值为“否”。 + +------------ + + +### 精灵条件 +精灵组件无特有条件，适用所有通用条件。参见：[通用条件](../../commonElements/conditions/README.md) + +------------ + + +### 精灵动作 +精灵组件无特有动作，适用所有通用动作。参见：[通用动作](../../commonElements/action/README.md) diff --git a/Lakeshore/manual/module/scale9gird/56430c39f2708.png b/Lakeshore/manual/module/scale9gird/56430c39f2708.png new file mode 100644 index 0000000..adbb9f6 Binary files /dev/null and b/Lakeshore/manual/module/scale9gird/56430c39f2708.png differ diff --git a/Lakeshore/manual/module/scale9gird/56430ddea2d0c.png b/Lakeshore/manual/module/scale9gird/56430ddea2d0c.png new file mode 100644 index 0000000..7015bc7 Binary files /dev/null and b/Lakeshore/manual/module/scale9gird/56430ddea2d0c.png differ diff --git a/Lakeshore/manual/module/scale9gird/5643103726bc4.png b/Lakeshore/manual/module/scale9gird/5643103726bc4.png new file mode 100644 index 0000000..58cf0ea Binary files /dev/null and b/Lakeshore/manual/module/scale9gird/5643103726bc4.png differ diff --git a/Lakeshore/manual/module/scale9gird/564311a7a1fb2.png b/Lakeshore/manual/module/scale9gird/564311a7a1fb2.png new file mode 100644 index 0000000..4449eb8 Binary files /dev/null and b/Lakeshore/manual/module/scale9gird/564311a7a1fb2.png differ diff --git a/Lakeshore/manual/module/scale9gird/5643127eb80b4.png b/Lakeshore/manual/module/scale9gird/5643127eb80b4.png new file mode 100644 index 0000000..2a62839 Binary files /dev/null and b/Lakeshore/manual/module/scale9gird/5643127eb80b4.png differ diff --git a/Lakeshore/manual/module/scale9gird/564318db6a6ff.png b/Lakeshore/manual/module/scale9gird/564318db6a6ff.png new file mode 100644 index 0000000..865b85c Binary files /dev/null and b/Lakeshore/manual/module/scale9gird/564318db6a6ff.png differ diff --git a/Lakeshore/manual/module/scale9gird/56498d78cf5a2.png b/Lakeshore/manual/module/scale9gird/56498d78cf5a2.png new file mode 100644 index 0000000..c479aba Binary files /dev/null and b/Lakeshore/manual/module/scale9gird/56498d78cf5a2.png differ diff --git a/Lakeshore/manual/module/scale9gird/README.md b/Lakeshore/manual/module/scale9gird/README.md new file mode 100644 index 0000000..79ebb1c --- /dev/null +++ b/Lakeshore/manual/module/scale9gird/README.md @@ -0,0 +1,40 @@ +![](56430c39f2708.png) +### 九宫格简介 +游戏中为了美观，常会使用一些圆角矩形或者边缘不规则的矩形。 +比如下图 +![](56430ddea2d0c.png) +我们可以用这个圆角矩形做一个文本框的背景。如下图： +![](5643103726bc4.png) +但如果文本内容是动态的，而且很多，就有可能需要拉伸这个圆角矩形。如果不使用九宫格，就可能出现下面的情况。 +![](564311a7a1fb2.png) +大家可以看到，圆角变形了，这样很难看。 +如果背景的圆角矩形用九宫格来实现就能达到下边的效果。 +![](5643127eb80b4.png) + +------------ + + +### 特有属性面板： +![](564318db6a6ff.png) +- 图片源：九宫格所用到的图片地址。 +- 配置数据：九宫格的配置数据。默认值为(0,0,0,0) +格式为（X,Y,Width,Height) +其中X和Y表示井字线左上角的交点的坐标。 +Width和Height分别表示井字线中心口字的宽和高。如下图所示： +![](56498d78cf5a2.png) +填写好配置数据，任意拉伸九宫格图片，图片都不会因为拉伸而产生变形的问题了。 +- 参与碰撞：设置九宫格实例是否参与碰撞。 + +九宫格实例在游戏中也可以通过动作动态的拉伸缩放大小，也同样不会变形。 + +------------ + + +### 九宫格条件 +九宫格组件无特有条件，适用所有通用条件。参见：[通用条件](../../commonElements/conditions/README.md) + +------------ + + +### 九宫格动作 +九宫格组件无特有动作，适用所有通用动作。参见：[通用动作](../../commonElements/action/README.md) diff --git a/Lakeshore/manual/module/sound/564af1ee25028.png b/Lakeshore/manual/module/sound/564af1ee25028.png new file mode 100644 index 0000000..4e5bf9f Binary files /dev/null and b/Lakeshore/manual/module/sound/564af1ee25028.png differ diff --git a/Lakeshore/manual/module/sound/564af1ee4db9a.png b/Lakeshore/manual/module/sound/564af1ee4db9a.png new file mode 100644 index 0000000..1428afd Binary files /dev/null and b/Lakeshore/manual/module/sound/564af1ee4db9a.png differ diff --git a/Lakeshore/manual/module/sound/564af1ee66b4f.png b/Lakeshore/manual/module/sound/564af1ee66b4f.png new file mode 100644 index 0000000..6dee991 Binary files /dev/null and b/Lakeshore/manual/module/sound/564af1ee66b4f.png differ diff --git a/Lakeshore/manual/module/sound/564af1ee7497d.png b/Lakeshore/manual/module/sound/564af1ee7497d.png new file mode 100644 index 0000000..bb7b2b9 Binary files /dev/null and b/Lakeshore/manual/module/sound/564af1ee7497d.png differ diff --git a/Lakeshore/manual/module/sound/564af1ee84f3e.png b/Lakeshore/manual/module/sound/564af1ee84f3e.png new file mode 100644 index 0000000..290c876 Binary files /dev/null and b/Lakeshore/manual/module/sound/564af1ee84f3e.png differ diff --git a/Lakeshore/manual/module/sound/564af1ee98d40.png b/Lakeshore/manual/module/sound/564af1ee98d40.png new file mode 100644 index 0000000..408eef8 Binary files /dev/null and b/Lakeshore/manual/module/sound/564af1ee98d40.png differ diff --git a/Lakeshore/manual/module/sound/564af1eea5afe.png b/Lakeshore/manual/module/sound/564af1eea5afe.png new file mode 100644 index 0000000..1ea3326 Binary files /dev/null and b/Lakeshore/manual/module/sound/564af1eea5afe.png differ diff --git a/Lakeshore/manual/module/sound/564af1eeb692a.png b/Lakeshore/manual/module/sound/564af1eeb692a.png new file mode 100644 index 0000000..08badf6 Binary files /dev/null and b/Lakeshore/manual/module/sound/564af1eeb692a.png differ diff --git a/Lakeshore/manual/module/sound/564af1eecf6a9.png b/Lakeshore/manual/module/sound/564af1eecf6a9.png new file mode 100644 index 0000000..89c517a Binary files /dev/null and b/Lakeshore/manual/module/sound/564af1eecf6a9.png differ diff --git a/Lakeshore/manual/module/sound/564af1eee846a.png b/Lakeshore/manual/module/sound/564af1eee846a.png new file mode 100644 index 0000000..1077fd6 Binary files /dev/null and b/Lakeshore/manual/module/sound/564af1eee846a.png differ diff --git a/Lakeshore/manual/module/sound/564af1ef06d2f.png b/Lakeshore/manual/module/sound/564af1ef06d2f.png new file mode 100644 index 0000000..bf1cdb2 Binary files /dev/null and b/Lakeshore/manual/module/sound/564af1ef06d2f.png differ diff --git a/Lakeshore/manual/module/sound/564af1ef17212.png b/Lakeshore/manual/module/sound/564af1ef17212.png new file mode 100644 index 0000000..4b78ffb Binary files /dev/null and b/Lakeshore/manual/module/sound/564af1ef17212.png differ diff --git a/Lakeshore/manual/module/sound/README.md b/Lakeshore/manual/module/sound/README.md new file mode 100644 index 0000000..79e77c0 --- /dev/null +++ b/Lakeshore/manual/module/sound/README.md @@ -0,0 +1,70 @@ +![](564af1ef17212.png) + +声音组件用来给游戏中添加声音效果。 + +### 特有属性 +![](564af1eecf6a9.png) +- 文件路径：指定声音文件所在位置。 +- 循环次数：设置声音的循环次数。默认为1次。设置为0的话表示无限次循环。 +- 音量：设置声音音量。默认为1，表示100%。 + +*注：声音组件除“名称”外，不支持基本属性，不支持碰撞，添加后也不会在游戏运行场景中产生可见实例。 + +------------ + + +### 声音条件 +声音组件只支持其特有条件，不支持通用条件。 + +![](564af1eee846a.png) +#### 当静音时 +当处于静音状态时。【持续性触发】 +此条件无属性设置窗口。 +#### 当有声音播放 +当有任意声音处于播放状态时。【持续性触发】 +此条件无属性设置窗口。 +#### 当指定声音播放时 +当指定的声音正在播放时。【持续性触发】 +在文件地址输入框设置指定声音的位置。 +![](564af1ef06d2f.png) +#### 当声音放完 +当声音播放完毕时。【一次性触发】 +此条件无属性设置窗口。 + +------------ + + +### 声音动作 +声音组件只支持其特有动作，不支持通用动作。 + +![](564af1ee25028.png) +#### 播放 +播放指定声音。 +- 文件路径：指定要播放的文件的路径。 +- 循环次数：设置循环次数。默认为0，表示无限次循环。 +- 音量大小：设置音量大小。默认为1，表示100%。 + +![](564af1ee4db9a.png) +#### 停止指定声音 +停止指定声音的播放。 +![](564af1ee7497d.png) +#### 停止所有声音 +停止所有声音的播放。 +此动作无属性设置窗口。 +#### 循环 +设置指定声音是否循环播放。 +![](564af1ee84f3e.png) +#### 主音量 +设置整体音量。 +![](564af1eeb692a.png) +#### 指定声音音量 +设置指定声音的音量。 +![](564af1eea5afe.png) +#### 静音 +设置指定声音为静音。 +![](564af1ee66b4f.png) +#### 暂停 +暂停播放指定声音。 +![](564af1ee98d40.png) + + diff --git a/Lakeshore/manual/module/system/56385158850f9.png b/Lakeshore/manual/module/system/56385158850f9.png new file mode 100644 index 0000000..34ce11f Binary files /dev/null and b/Lakeshore/manual/module/system/56385158850f9.png differ diff --git a/Lakeshore/manual/module/system/5638515895e02.png b/Lakeshore/manual/module/system/5638515895e02.png new file mode 100644 index 0000000..8c42c99 Binary files /dev/null and b/Lakeshore/manual/module/system/5638515895e02.png differ diff --git a/Lakeshore/manual/module/system/56385158a06b6.png b/Lakeshore/manual/module/system/56385158a06b6.png new file mode 100644 index 0000000..37ef1a4 Binary files /dev/null and b/Lakeshore/manual/module/system/56385158a06b6.png differ diff --git a/Lakeshore/manual/module/system/56385158ae8ee.png b/Lakeshore/manual/module/system/56385158ae8ee.png new file mode 100644 index 0000000..bba6b4b Binary files /dev/null and b/Lakeshore/manual/module/system/56385158ae8ee.png differ diff --git a/Lakeshore/manual/module/system/56385158cd983.png b/Lakeshore/manual/module/system/56385158cd983.png new file mode 100644 index 0000000..2934eaf Binary files /dev/null and b/Lakeshore/manual/module/system/56385158cd983.png differ diff --git a/Lakeshore/manual/module/system/56385158dfccc.png b/Lakeshore/manual/module/system/56385158dfccc.png new file mode 100644 index 0000000..dfea410 Binary files /dev/null and b/Lakeshore/manual/module/system/56385158dfccc.png differ diff --git a/Lakeshore/manual/module/system/5638515902002.png b/Lakeshore/manual/module/system/5638515902002.png new file mode 100644 index 0000000..c2c8350 Binary files /dev/null and b/Lakeshore/manual/module/system/5638515902002.png differ diff --git a/Lakeshore/manual/module/system/563858fe504fd.png b/Lakeshore/manual/module/system/563858fe504fd.png new file mode 100644 index 0000000..d45354a Binary files /dev/null and b/Lakeshore/manual/module/system/563858fe504fd.png differ diff --git a/Lakeshore/manual/module/system/563af9a213d42.png b/Lakeshore/manual/module/system/563af9a213d42.png new file mode 100644 index 0000000..6ff9e91 Binary files /dev/null and b/Lakeshore/manual/module/system/563af9a213d42.png differ diff --git a/Lakeshore/manual/module/system/563af9a22a591.png b/Lakeshore/manual/module/system/563af9a22a591.png new file mode 100644 index 0000000..be256fc Binary files /dev/null and b/Lakeshore/manual/module/system/563af9a22a591.png differ diff --git a/Lakeshore/manual/module/system/563af9a24409d.png b/Lakeshore/manual/module/system/563af9a24409d.png new file mode 100644 index 0000000..8feb7f3 Binary files /dev/null and b/Lakeshore/manual/module/system/563af9a24409d.png differ diff --git a/Lakeshore/manual/module/system/563af9a253c65.png b/Lakeshore/manual/module/system/563af9a253c65.png new file mode 100644 index 0000000..d97b919 Binary files /dev/null and b/Lakeshore/manual/module/system/563af9a253c65.png differ diff --git a/Lakeshore/manual/module/system/564d8197caff0.png b/Lakeshore/manual/module/system/564d8197caff0.png new file mode 100644 index 0000000..cbb9ef3 Binary files /dev/null and b/Lakeshore/manual/module/system/564d8197caff0.png differ diff --git a/Lakeshore/manual/module/system/README.md b/Lakeshore/manual/module/system/README.md new file mode 100644 index 0000000..03b5d42 --- /dev/null +++ b/Lakeshore/manual/module/system/README.md @@ -0,0 +1,85 @@ +![](564d8197caff0.png) + +System为项目固有的组件，无需添加也不能删除。System用来实现一些系统级别的条件与动作。 + +#### 快速链接 +|System 条件|| +| ------: | :------ | +|系统|[每帧](#每帧：)，[每X秒](#每X秒：)| +|通用|[比较两值](#比较两值：)，[处于两值之间](#处于两值之间：)，[若值为数字](#若值为数字：)，[比较全局变量](#比较全局变量：)| +|实例获取|[获取任意实例](#获取任意实例：)，[获取所有实例](#获取所有实例：)| + +|System 动作|| +| ------: | :------ | +|系统|[创建实例](#创建实例：)，[跳转到前/后场景](#跳转到前/后场景：)，[跳转到指定场景](#跳转到指定场景：)| + + +------------ + +### System条件： +![](56385158850f9.png) + +#### 每帧： +当游戏每帧更新时触发。【持续性触发】 +Lakeshore游戏默认为60fps，也就是每秒60帧，也就是每秒触发60次。只要游戏运行此条件便为真。 +此条件无属性设置窗口。 + +#### 每X秒： +每经过X秒，触发一次。【持续性触发】 +从游戏运行开始，每经过X秒便触发一次。 +![](56385158dfccc.png) + +#### 比较两值： +比较两个数值的大小，当比较结果为真时触发。【持续性触发】 +填写值或表达式，然后选择比较运算符。一般用来比较变量。比如，实例boss.x（实例boss的X轴坐标的表达式）和hero.x（实例hero的X轴坐标的表达式）的比较。如果boss.x大于hero.x时触发。 +![](5638515895e02.png) + +#### 处于两值之间： +如果指定值处在指定的大值和小值之间，条件为真，触发。【持续性触发】 +分别填写指定值，小值和大值，判断指定值是否在大小值之间。 +![](56385158a06b6.png) + +#### 若值为数字： +如果指定的数值为数字，条件为真则触发。【持续性触发】 +可以填写数值，变量名或表达式，用于判断输入的内容的值是不是数字。 +![](5638515902002.png) + +#### 比较全局变量： +选取一个全局变量和指定值比较，若条件为真则触发。【持续性触发】 +![](563858fe504fd.png) + +#### 获取任意实例： +从指定的实例类型中任意选取同类型实例中的一个，取到了为真则触发。【持续性触发】 +基于此条件执行的动作只对取到的实例有效。比如，同一个实例类型有10个，动作只对其中之一进行操作。 +![](56385158ae8ee.png) +#### 获取所有实例： +获取指定实例类型的全体，取到了为真则触发。【持续性触发】 +基于此条件执行的动作对实例类型的全体有效。比如，同一实例类型有10个，动作对10个实例都进行操作。 +![](56385158cd983.png) + +------------ + +### System动作： +![](563af9a213d42.png) +#### 创建实例： +由系统创建产生指定实例。创建产生的实例与制定的实例为同类型实例。 + - 实例：选择要创建的实例。 + - 图层序号：设置创建产生的实例所在的图层，由图层序号指定。 + - 水平坐标：此坐标为基于场景的水平坐标。 + - 垂直坐标：此坐标为基于场景的垂直坐标。 + +简单的解释，创建就像凭空产生，无中生有。 +比如打飞机中不停的有敌机从屏幕的上边缘飞入，这些敌机便是由system通过创建动作产生的。他们是同一实例类型。 +与通用动作“制造”的区别是，“创建”是system发出的，是system特有的动作。 +而“制造”是由某个实例发出的，是实例的通用动作，比如飞机打子弹，那么飞机便是发出“制造”动作的实例，而子弹便是“制造”产生的实例。 + +![](563af9a22a591.png) + +#### 跳转到前/后场景： +游戏中跳转到上一个或下一个场景。 +无需指定前/后场景名，会根据游戏自身的场景顺序跳转。 +![](563af9a24409d.png) +#### 跳转到指定场景： +游戏中跳转到指定场景。需指定要跳转的场景名。 +如果指定为当前场景，跳转功能相当于重置当前场景。 +![](563af9a253c65.png) \ No newline at end of file diff --git a/Lakeshore/manual/module/textField/564ad9f917a87.png b/Lakeshore/manual/module/textField/564ad9f917a87.png new file mode 100644 index 0000000..346c2fd Binary files /dev/null and b/Lakeshore/manual/module/textField/564ad9f917a87.png differ diff --git a/Lakeshore/manual/module/textField/564ad9f9243f6.png b/Lakeshore/manual/module/textField/564ad9f9243f6.png new file mode 100644 index 0000000..06d0362 Binary files /dev/null and b/Lakeshore/manual/module/textField/564ad9f9243f6.png differ diff --git a/Lakeshore/manual/module/textField/564ad9f940ede.png b/Lakeshore/manual/module/textField/564ad9f940ede.png new file mode 100644 index 0000000..ac3f2d0 Binary files /dev/null and b/Lakeshore/manual/module/textField/564ad9f940ede.png differ diff --git a/Lakeshore/manual/module/textField/564ad9f95a82a.png b/Lakeshore/manual/module/textField/564ad9f95a82a.png new file mode 100644 index 0000000..21f14dd Binary files /dev/null and b/Lakeshore/manual/module/textField/564ad9f95a82a.png differ diff --git a/Lakeshore/manual/module/textField/564ad9f969f63.png b/Lakeshore/manual/module/textField/564ad9f969f63.png new file mode 100644 index 0000000..937db6a Binary files /dev/null and b/Lakeshore/manual/module/textField/564ad9f969f63.png differ diff --git a/Lakeshore/manual/module/textField/564ad9f97669e.png b/Lakeshore/manual/module/textField/564ad9f97669e.png new file mode 100644 index 0000000..e58c379 Binary files /dev/null and b/Lakeshore/manual/module/textField/564ad9f97669e.png differ diff --git a/Lakeshore/manual/module/textField/564ad9f984c7f.png b/Lakeshore/manual/module/textField/564ad9f984c7f.png new file mode 100644 index 0000000..e08be53 Binary files /dev/null and b/Lakeshore/manual/module/textField/564ad9f984c7f.png differ diff --git a/Lakeshore/manual/module/textField/564ad9f99f3d2.png b/Lakeshore/manual/module/textField/564ad9f99f3d2.png new file mode 100644 index 0000000..87b8d12 Binary files /dev/null and b/Lakeshore/manual/module/textField/564ad9f99f3d2.png differ diff --git a/Lakeshore/manual/module/textField/564ad9f9b4638.png b/Lakeshore/manual/module/textField/564ad9f9b4638.png new file mode 100644 index 0000000..3964017 Binary files /dev/null and b/Lakeshore/manual/module/textField/564ad9f9b4638.png differ diff --git a/Lakeshore/manual/module/textField/564ad9f9d0e07.png b/Lakeshore/manual/module/textField/564ad9f9d0e07.png new file mode 100644 index 0000000..622cb0a Binary files /dev/null and b/Lakeshore/manual/module/textField/564ad9f9d0e07.png differ diff --git a/Lakeshore/manual/module/textField/564ad9f9e4d50.png b/Lakeshore/manual/module/textField/564ad9f9e4d50.png new file mode 100644 index 0000000..f32a203 Binary files /dev/null and b/Lakeshore/manual/module/textField/564ad9f9e4d50.png differ diff --git a/Lakeshore/manual/module/textField/564ad9fa081d9.png b/Lakeshore/manual/module/textField/564ad9fa081d9.png new file mode 100644 index 0000000..7041ab3 Binary files /dev/null and b/Lakeshore/manual/module/textField/564ad9fa081d9.png differ diff --git a/Lakeshore/manual/module/textField/564ad9fa147d3.png b/Lakeshore/manual/module/textField/564ad9fa147d3.png new file mode 100644 index 0000000..104af82 Binary files /dev/null and b/Lakeshore/manual/module/textField/564ad9fa147d3.png differ diff --git a/Lakeshore/manual/module/textField/564ad9fa23aae.png b/Lakeshore/manual/module/textField/564ad9fa23aae.png new file mode 100644 index 0000000..ed4b343 Binary files /dev/null and b/Lakeshore/manual/module/textField/564ad9fa23aae.png differ diff --git a/Lakeshore/manual/module/textField/564ad9fa4164f.png b/Lakeshore/manual/module/textField/564ad9fa4164f.png new file mode 100644 index 0000000..4bca84a Binary files /dev/null and b/Lakeshore/manual/module/textField/564ad9fa4164f.png differ diff --git a/Lakeshore/manual/module/textField/564ad9fa5cfc5.png b/Lakeshore/manual/module/textField/564ad9fa5cfc5.png new file mode 100644 index 0000000..b9f22f3 Binary files /dev/null and b/Lakeshore/manual/module/textField/564ad9fa5cfc5.png differ diff --git a/Lakeshore/manual/module/textField/564ad9fa66759.png b/Lakeshore/manual/module/textField/564ad9fa66759.png new file mode 100644 index 0000000..105f7d3 Binary files /dev/null and b/Lakeshore/manual/module/textField/564ad9fa66759.png differ diff --git a/Lakeshore/manual/module/textField/564ad9fa78d4b.png b/Lakeshore/manual/module/textField/564ad9fa78d4b.png new file mode 100644 index 0000000..269ff62 Binary files /dev/null and b/Lakeshore/manual/module/textField/564ad9fa78d4b.png differ diff --git a/Lakeshore/manual/module/textField/README.md b/Lakeshore/manual/module/textField/README.md new file mode 100644 index 0000000..a4ec6fb --- /dev/null +++ b/Lakeshore/manual/module/textField/README.md @@ -0,0 +1,100 @@ +![](564ad9fa78d4b.png) + +文本组件用来显示文字。可以显示静态文本和动态文本，并且可以设置为可输入文本框。 +- 静态文本为内容固定的文本，内容不会在游戏中改变，比如剧情介绍等。 +- 动态文本的内容会根据游戏进展而改变，比如得分，血量等。 +- 可输入文本框指的是在游戏中提供给玩家输入内容的文字框。 + +### 特有属性 +![](564ad9fa4164f.png) +- 默认文本：设置文本框默认显示的文本。（只支持静态文本，不支持表达式。若要实现动态文本显示，需要在文本动作中设置。） +- 字体：设置文本的默认字体。默认为“宋体”。 +- 字体大小：设置文本的字体大小。默认大小为12。 +- 字体颜色：设置文本的颜色。默认值为白色。 +- 粗体：设置文本是否为粗体。默认为“是”。 +- 允许输入：设置是否为可输入文本框。默认为“否”。 +- 水平布局：设置文本的水平对齐方式。默认为“水平居中”，可选项有： + - 左对齐 + - 右对齐 + - 水平居中 +- 垂直布局：设置文本的垂直对齐方式。默认为“垂直居中”，可选项有： + - 上对齐 + - 下对齐 + - 垂直居中 +- 字数上限：设置文本框中显示字符数的上限。默认值为100。 +- 斜体：设置文本是否为斜体。默认为“否”。 +- 密码显示：设置是否按密码形式显示。默认为“否”。 +- 支持换行：设置是否支持换行。默认为“否”。 + +*注：文本不支持碰撞。 + +------------ + + +### 文本条件 +文本组件除特有条件外，也适用部分通用条件（文本不支持“碰撞”相关条件）。参见：[通用条件](../../commonElements/conditions/README.md) + +![](564ad9fa5cfc5.png) +#### 比较文本内容 +如果文本框的文本内容和指定文本内容相同时。【持续性触发】 +比较文本内容，若相同，条件为真，会一直触发动作。 +![](564ad9fa66759.png) + +------------ + + +### 文本动作 +文本组件除特有动作外，也适用部分通用动作（文本不支持“碰撞”相关动作）。参见：[通用动作](../../commonElements/action/README.md) + +![](564ad9f917a87.png) +#### 文本内容 +设置文本显示内容。可以使用表达式，以设置动态文本。 +![](564ad9f99f3d2.png) +#### 追加文本 +在已有文本内容后面追加新的文本内容。 +![](564ad9f9e4d50.png) +#### 颜色 +设置文本的颜色。默认为“黑色”。 +![](564ad9f9d0e07.png) +#### 字体 +设置文本的字体。默认为“宋体”。 +![](564ad9fa147d3.png) +#### 字体大小 +设置文本的字体大小。默认大小为12。 +![](564ad9fa23aae.png) +#### 水平对齐方式 +设置文本的对齐方式。默认为“水平居中”。 +可选项有： +- 左对齐 +- 右对齐 +- 水平居中 + +![](564ad9f984c7f.png) +#### 垂直对齐方式 +设置文本的垂直对齐方式。默认为“垂直居中”。 +可选项有： +- 上对齐 +- 下对齐 +- 垂直居中 + +![](564ad9f9243f6.png) +#### 粗体 +设置文本是否为粗体。默认为“粗体”。 +![](564ad9f940ede.png) +#### 斜体 +设置文本是否为斜体。默认为“斜体”。 +![](564ad9f9b4638.png) +#### 字符数上限 +设置文本框内的字符数上限。默认值为100。 +![](564ad9fa081d9.png) +#### 密码显示 +设置是否以密码形式显示文本。默认为“密码”。 +![](564ad9f97669e.png) +#### 动态/可输入 +设置是动态文本还是可输入文本。默认为“动态”。 +![](564ad9f95a82a.png) +#### 换行 +设置文本是否支持换行。默认为“支持”。 +![](564ad9f969f63.png) + + diff --git a/Lakeshore/manual/module/tileTile/564aca433d465.png b/Lakeshore/manual/module/tileTile/564aca433d465.png new file mode 100644 index 0000000..5e63410 Binary files /dev/null and b/Lakeshore/manual/module/tileTile/564aca433d465.png differ diff --git a/Lakeshore/manual/module/tileTile/564aca43750f1.png b/Lakeshore/manual/module/tileTile/564aca43750f1.png new file mode 100644 index 0000000..a841f3d Binary files /dev/null and b/Lakeshore/manual/module/tileTile/564aca43750f1.png differ diff --git a/Lakeshore/manual/module/tileTile/564aca43996ed.png b/Lakeshore/manual/module/tileTile/564aca43996ed.png new file mode 100644 index 0000000..2b1cd75 Binary files /dev/null and b/Lakeshore/manual/module/tileTile/564aca43996ed.png differ diff --git a/Lakeshore/manual/module/tileTile/README.md b/Lakeshore/manual/module/tileTile/README.md new file mode 100644 index 0000000..a802532 --- /dev/null +++ b/Lakeshore/manual/module/tileTile/README.md @@ -0,0 +1,21 @@ +![](564aca43996ed.png) + +瓦片平铺组件可以在组件设置宽高内平铺显示指定的图片，平铺显示即是在横纵两个方向上重复显示。平铺效果如下图所示。 +![](564aca433d465.png) +相对于用精灵组件创建实例组成相同的效果，使用瓦片背景更加节省资源，游戏执行的效率也更高更快。所以当需要平铺一个图片时，建议使用瓦片平铺组件来实现。在游戏中，瓦片平铺常用来制作重复的背景，墙面，地面等。 + +### 特有属性 +![](564aca43750f1.png) +- 图片源：指定平铺中需要重复显示的图片的地址。 + +------------ + + +### 瓦片平铺条件 +瓦片平铺组件无特有条件，适用所有通用条件。参见：[通用条件](../../commonElements/conditions/README.md) + +------------ + + +### 瓦片平铺动作 +瓦片平铺组件无特有动作，适用所有通用动作。参见：[通用动作](../../commonElements/action/README.md) diff --git a/Lakeshore/manual/module/tiledMap/564ae846ddaf9.png b/Lakeshore/manual/module/tiledMap/564ae846ddaf9.png new file mode 100644 index 0000000..9b6b63f Binary files /dev/null and b/Lakeshore/manual/module/tiledMap/564ae846ddaf9.png differ diff --git a/Lakeshore/manual/module/tiledMap/564ae846e7ce1.png b/Lakeshore/manual/module/tiledMap/564ae846e7ce1.png new file mode 100644 index 0000000..309eba4 Binary files /dev/null and b/Lakeshore/manual/module/tiledMap/564ae846e7ce1.png differ diff --git a/Lakeshore/manual/module/tiledMap/564ae84703bac.png b/Lakeshore/manual/module/tiledMap/564ae84703bac.png new file mode 100644 index 0000000..39df059 Binary files /dev/null and b/Lakeshore/manual/module/tiledMap/564ae84703bac.png differ diff --git a/Lakeshore/manual/module/tiledMap/564ae8471e12f.png b/Lakeshore/manual/module/tiledMap/564ae8471e12f.png new file mode 100644 index 0000000..efdcf2a Binary files /dev/null and b/Lakeshore/manual/module/tiledMap/564ae8471e12f.png differ diff --git a/Lakeshore/manual/module/tiledMap/564ae84733f38.png b/Lakeshore/manual/module/tiledMap/564ae84733f38.png new file mode 100644 index 0000000..b08d037 Binary files /dev/null and b/Lakeshore/manual/module/tiledMap/564ae84733f38.png differ diff --git a/Lakeshore/manual/module/tiledMap/564ae8474db3e.png b/Lakeshore/manual/module/tiledMap/564ae8474db3e.png new file mode 100644 index 0000000..f842f3b Binary files /dev/null and b/Lakeshore/manual/module/tiledMap/564ae8474db3e.png differ diff --git a/Lakeshore/manual/module/tiledMap/564ae8477ccc1.png b/Lakeshore/manual/module/tiledMap/564ae8477ccc1.png new file mode 100644 index 0000000..5d6f1c4 Binary files /dev/null and b/Lakeshore/manual/module/tiledMap/564ae8477ccc1.png differ diff --git a/Lakeshore/manual/module/tiledMap/564ae84786906.png b/Lakeshore/manual/module/tiledMap/564ae84786906.png new file mode 100644 index 0000000..5ed501c Binary files /dev/null and b/Lakeshore/manual/module/tiledMap/564ae84786906.png differ diff --git a/Lakeshore/manual/module/tiledMap/README.md b/Lakeshore/manual/module/tiledMap/README.md new file mode 100644 index 0000000..8d72e11 --- /dev/null +++ b/Lakeshore/manual/module/tiledMap/README.md @@ -0,0 +1,42 @@ +![](564ae846ddaf9.png) + +Tiled组件是用来添加和使用Tiled Map Editor编辑的游戏地图文件的。 +Lakeshore当前只能够调用解析Tiled Map Editor制作的tmx地图文件，不提供对tmx地图文件的编辑功能。 + +Tiled Map Editor官方地址：[http://www.mapeditor.org/](http://www.mapeditor.org/) + +Tiled Map Editor是基于Java/Qt的开源区块地图编辑器，Tiled支持2D和2.5D地图及多种区块类型，它将地图保存成一个xml文件，借助xml的特性使地图可通用于各种游戏平台，目前Lakeshore暂时只支持地图方向为正常模式的所编辑的地图（正常模式为90度），如下图设置： +![](564ae84786906.png) + +另外，目前Lakeshore只支持图块数据的显示，还不支持地形数据的显示，如下图： +![](564ae8477ccc1.png) + +------------ + + +### TiledMap属性 + +添加TiledMap组件后，点击TiledMap属性面板的"TMX源:"输入框，在弹出的文件查找窗口找到并指定要加载的tmx文件，便可加载TiledMap地图。如下图： +![](564ae84703bac.png) + +*注1：建议将Tiled软件编辑完的tmx文件与其所用到的图片文件都保存到当前项目工程文件夹下的other文件夹中，否则可能会因为安全域的原因导致地图无法显示。 + +*注2：Tiled组件不支持碰撞。 + +导入tmx文件之后，TiledMap属性栏的对象面板将显示Tiled Map Editor中对象层的内容，如下图： +![](564ae846e7ce1.png)![](564ae84733f38.png) + +同样，Tiled Map Editor中的图层内容也会呈现在层面板中,层面板中可以设置相应图层的显示和隐藏。如下图： +![](564ae8474db3e.png)![](564ae8471e12f.png) + +------------ + + +### Tiled条件 +Tiled组件不支持任何条件。 + +------------ + + +### Tiled动作 +TIled组件不支持任何动作。 diff --git a/Lakeshore/manual/module/touch/564beb8412cb3.png b/Lakeshore/manual/module/touch/564beb8412cb3.png new file mode 100644 index 0000000..fe86d8f Binary files /dev/null and b/Lakeshore/manual/module/touch/564beb8412cb3.png differ diff --git a/Lakeshore/manual/module/touch/564beb8425150.png b/Lakeshore/manual/module/touch/564beb8425150.png new file mode 100644 index 0000000..5337a61 Binary files /dev/null and b/Lakeshore/manual/module/touch/564beb8425150.png differ diff --git a/Lakeshore/manual/module/touch/README.md b/Lakeshore/manual/module/touch/README.md new file mode 100644 index 0000000..2d40bb6 --- /dev/null +++ b/Lakeshore/manual/module/touch/README.md @@ -0,0 +1,61 @@ +![](564beb8425150.png) + +添加触屏组件后，可以实现对移动端触摸操作的响应。一个场景内只能添加一个触屏组件。对触摸操作的响应通过对所添加的触屏实例的条件判断实现。 +*注：触屏组件除“名称”外，不支持其他基本属性。不支持碰撞。触屏组件添加后并不会在游戏运行场景中产生可见实例。 + +### 特有属性 +触屏组件无特有属性。 + +------------ + + +### 触屏条件 +触屏组件除特有条件外，不支持任何通用条件。 + +![](564beb8412cb3.png) +#### 当触摸进行时 +当屏幕处于触摸状态时。【持续性触发】 +手指一直按着屏幕，将持续性触发此条件，即当手指一直按着屏幕时，此条件为真，否则为假。 +此条件无属性设置窗口。 +#### 轻触屏幕时 +当轻触屏幕时。【一次性触发】 +此条件的触发是从手指开始点击屏幕到手指离开屏幕之后进行，这一过程需要具备以下几个条件才能触发： +1. 在手指点击屏幕的一瞬间所记录的位置与手指离开屏幕的一瞬间所记录的位置相同或者相差一个极小的距离。 +2. 手指离开屏幕一瞬间与手指按下屏幕一瞬间时间差很短。（一般为200ms左右） +3. 且此过程还未发生触摸移动事件。（即手指未在屏幕上移动） + +此条件无属性设置窗口。 + +#### 触摸开始时 +当触摸开始时。【一次性触发】 +当手指点击屏幕的那一刻，条件为真，触发一次。与“轻触屏幕时”不同的是，它不需要手指离开屏幕这一动作即可触发。 +此条件无属性设置窗口。 +#### 触摸结束时 +当触摸结束时。【一次性触发】 +当触摸结束，手指离开屏幕的那一刻，条件为真，触发一次。 +此条件无属性设置窗口。 +#### 触摸移动时 +当触摸并移动时。【一次性触发】 +手指触摸屏幕，并在屏幕上划动时，每划动一下便触发一次。所以虽然条件为一次性触发条件，但如果持续在屏幕划动，便持续触发。 +#### 屏幕外结束触摸时 +当触摸划动到屏幕外时。【一次性触发】 +当触摸划动到屏幕外，触摸结束的那一刻，条件为真，触发一次。 + +------------ + + +### 触屏动作 +触屏组件不支持任何动作。 + +------------ + + +### 表达式 +触屏组件提供特有的表达式。 +- touchX:表示手指在屏幕上触摸时的水平坐标 +- touchY:表示手指在屏幕上触摸时的垂直坐标 +- touchPointID:表示手指在屏幕上触摸时分配给触摸点的唯一标识号。 + +例如：假设触屏组件的名称为touchMc,那么，如果我们要想获取手指在屏幕上的水平坐标，可以这样表示：touchMc.touchX。 + + diff --git a/Lakeshore/manual/module/weixin/564bfe67f035d.png b/Lakeshore/manual/module/weixin/564bfe67f035d.png new file mode 100644 index 0000000..ad45b31 Binary files /dev/null and b/Lakeshore/manual/module/weixin/564bfe67f035d.png differ diff --git a/Lakeshore/manual/module/weixin/564bfe6812e37.png b/Lakeshore/manual/module/weixin/564bfe6812e37.png new file mode 100644 index 0000000..07814ca Binary files /dev/null and b/Lakeshore/manual/module/weixin/564bfe6812e37.png differ diff --git a/Lakeshore/manual/module/weixin/564bfe681f3da.png b/Lakeshore/manual/module/weixin/564bfe681f3da.png new file mode 100644 index 0000000..6daf6a2 Binary files /dev/null and b/Lakeshore/manual/module/weixin/564bfe681f3da.png differ diff --git a/Lakeshore/manual/module/weixin/564bfe682ded8.png b/Lakeshore/manual/module/weixin/564bfe682ded8.png new file mode 100644 index 0000000..6d51959 Binary files /dev/null and b/Lakeshore/manual/module/weixin/564bfe682ded8.png differ diff --git a/Lakeshore/manual/module/weixin/564bfe6847461.png b/Lakeshore/manual/module/weixin/564bfe6847461.png new file mode 100644 index 0000000..83958b5 Binary files /dev/null and b/Lakeshore/manual/module/weixin/564bfe6847461.png differ diff --git a/Lakeshore/manual/module/weixin/564bfe6854fe9.png b/Lakeshore/manual/module/weixin/564bfe6854fe9.png new file mode 100644 index 0000000..85e03a9 Binary files /dev/null and b/Lakeshore/manual/module/weixin/564bfe6854fe9.png differ diff --git a/Lakeshore/manual/module/weixin/564bfe6867296.png b/Lakeshore/manual/module/weixin/564bfe6867296.png new file mode 100644 index 0000000..a58616c Binary files /dev/null and b/Lakeshore/manual/module/weixin/564bfe6867296.png differ diff --git a/Lakeshore/manual/module/weixin/564bfe687bc80.png b/Lakeshore/manual/module/weixin/564bfe687bc80.png new file mode 100644 index 0000000..fc9e1a9 Binary files /dev/null and b/Lakeshore/manual/module/weixin/564bfe687bc80.png differ diff --git a/Lakeshore/manual/module/weixin/564bfe688ebfa.png b/Lakeshore/manual/module/weixin/564bfe688ebfa.png new file mode 100644 index 0000000..34af600 Binary files /dev/null and b/Lakeshore/manual/module/weixin/564bfe688ebfa.png differ diff --git a/Lakeshore/manual/module/weixin/564bfe68a8dce.png b/Lakeshore/manual/module/weixin/564bfe68a8dce.png new file mode 100644 index 0000000..20bb8bc Binary files /dev/null and b/Lakeshore/manual/module/weixin/564bfe68a8dce.png differ diff --git a/Lakeshore/manual/module/weixin/564bfe68b7143.png b/Lakeshore/manual/module/weixin/564bfe68b7143.png new file mode 100644 index 0000000..c22f0ce Binary files /dev/null and b/Lakeshore/manual/module/weixin/564bfe68b7143.png differ diff --git a/Lakeshore/manual/module/weixin/README.md b/Lakeshore/manual/module/weixin/README.md new file mode 100644 index 0000000..1258c35 --- /dev/null +++ b/Lakeshore/manual/module/weixin/README.md @@ -0,0 +1,116 @@ +![](564bfe68b7143.png) + +添加微信组件后，游戏便可以实现微信分享功能。 +*注：微信组件除“名称”外，不支持其他基本属性。不支持碰撞。微信组件添加后并不会在游戏运行场景中产生可见实例。 + +### 特有属性 +![](564bfe688ebfa.png) +- 签名地址：服务器端生成的签名地址的URL。这个地址是通过服务端生成的签名信息Json数据地址，Json数据内容类似下面表示方式： + +``` +{"appId":"wx13c6ec9ac5ca884e","timestamp":1441508912,"nonceStr":"bljssdk","signature":"5256549a4aeca9187dc52f119d65ef622e21353e"} +``` + +具体生成信息可参考微信官方文档：[微信JS-SDK说明文档](http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html) +- 开启调试：默认值为“否”。如果选择“是”，那么，表示在手机端预览微信分享的时候，会有微信签名是否有效，以及分享时的图片信息地址等以弹出对话框表示，一般调试通过之后，便设为“否”，关闭调试。 +- 标题：微信分享时所需要展示的分享标题。 +- 描述：微信分享时所需要展示的分享内容。 +- 链接地址：微信分享后点击分享的内容后会跳转的地址。 +- 分享图片：微信分享后展示的图标文件。 + +下边为游戏微信分享在移动端的显示效果： +![](564bfe687bc80.png) +上图中 +- “Lakeshore打坦克”对应特有属性中的“标题”。 +- “我总共消灭了26个坦克……”对应特有属性中的“描述”。这部分内容除了在特有属性面板填写固定的静态内容外，还可以在微信的特有动作中填写表达式，实现动态内容。请参看下边的微信动作介绍。 +- 坦克的图标对应特有属性中的“分享图片”。 + +------------ + + +### 微信条件 +微信组件除了特有条件和“当实例创建时”条件外，不支持其他通用条件。 + +微信条件对应着用户操作微信分享时的一些反馈信息。 +![](564bfe6867296.png) +上图中，当用户点击“发送给朋友”的时候，会触发“分享给朋友”这一条件，同样点击“分享到朋友圈”时，会触发“分享到朋友圈”这一条件，其它类似。 +通过这些条件，你可以更加灵活的做一些微信分享的逻辑，比如：我们可以在通过lakeshore做好的关卡游戏中加入只有微信分享后才能进入下一关卡等功能，或者微信分享后发送一些奖励等功能。 + +![](564bfe68a8dce.png) + +**以下条件均无属性设置窗口。** +**以下条件均为【一次性触发】** +**因微信条件比较类似，名称已说明功能，故不作具体说明。** +- 分享到微信朋友圈 + - 分享到朋友圈 + - 取消朋友圈分享 + - 朋友圈分享成功 + - 朋友圈分享失败 +- 分享给微信朋友 + - 分享给朋友 + - 取消朋友分享 + - 分享给朋友成功 + - 分享给朋友失败 +- 分享给QQ朋友 + - 分享给QQ朋友 + - 取消QQ分享 + - QQ分享成功 + - QQ分享失败 +- 分享到腾讯微博 + - 分享到腾讯微博 + - 取消腾讯微博分享 + - 腾讯微博分享成功 + - 腾讯微博分享失败 + +------------ + + +### 微信动作 +微信组件除特有动作外，不支持任何通用动作。 + +微信动作中，“标题”与“描述”支持表达式。这样可以将游戏中的动态信息分享到移动端。比如，“描述”信息可以写成如下内容： + +``` +'我总共消灭了'+eval(gameover.tank1+gameover.tank2+gameover.tank3+gameover.tank4)+'个坦克，'+'击败了全球'+eval(((gameover.tank1+gameover.tank2+gameover.tank3+gameover.tank4)/91*100).toFixed(1))+'%的玩家，不服来战！！' +``` + +这样分享出去的信息就可以显示游戏的成绩了。 +*注：Lakeshore中提供的表达式如果只是单纯的表达式，比如1+2+3，可以不用通过eval来表示，而如果混合了字符，例如上面的‘我总共消灭了’等，就需要用eval来表示。 +![](564bfe67f035d.png) +#### 分享到朋友圈 +- 标题：微信分享时所需要展示的分享标题。 +- 链接地址：微信分享后点击分享的内容后会跳转的地址。 +- 分享图片：微信分享时展示的图标文件 + +![](564bfe682ded8.png) +#### 发送给微信朋友 +- 标题：微信分享时所需要展示的分享标题。 +- 描述：微信分享时所需要展示的分享内容。 +- 链接地址：微信分享后点击分享的内容后会跳转的地址。 +- 分享图片：微信分享后展示的图标文件。 + +![](564bfe6812e37.png) +#### 分享到手机QQ +- 标题：微信分享时所需要展示的分享标题。 +- 描述：微信分享时所需要展示的分享内容。 +- 链接地址：微信分享后点击分享的内容后会跳转的地址。 +- 分享图片：微信分享后展示的图标文件。 + +![](564bfe6847461.png) +#### 分享到腾讯微博 +- 标题：微信分享时所需要展示的分享标题。 +- 描述：微信分享时所需要展示的分享内容。 +- 链接地址：微信分享后点击分享的内容后会跳转的地址。 +- 分享图片：微信分享后展示的图标文件。 + +![](564bfe6854fe9.png) +#### 分享到QQ空间 +- 标题：微信分享时所需要展示的分享标题。 +- 描述：微信分享时所需要展示的分享内容。 +- 链接地址：微信分享后点击分享的内容后会跳转的地址。 +- 分享图片：微信分享后展示的图标文件。 + +![](564bfe681f3da.png) + + + diff --git a/Lakeshore/update/update100/README.md b/Lakeshore/update/update100/README.md new file mode 100644 index 0000000..35fad60 --- /dev/null +++ b/Lakeshore/update/update100/README.md @@ -0,0 +1,15 @@ +【新特性】通过Lakeshore构建小游戏 + +【新特性】支持多项目管理 + +【新特性】可视化的逻辑编辑 + +【新特性】直观的层管理 + +【新特性】任意切换起始场景 + +【新特性】丰富的逻辑单元 + +【新特性】事件模型任意组合 + +【新特性】直接预览效果 diff --git a/Lakeshore/update/update111/README.md b/Lakeshore/update/update111/README.md new file mode 100644 index 0000000..66276c9 --- /dev/null +++ b/Lakeshore/update/update111/README.md @@ -0,0 +1,21 @@ +【新增】塔防游戏模板与小鸟飞呀飞模板 + +【新增】支持Tiled地图格式 + +【新增】微信分享 + +【新增】炮塔行为、条件、动作 + +【新增】寻路行为、条件、动作 + +【新增】节点移动行为、条件、动作 + +【新增】触屏组件条件、动作 + +【新特性】丰富文本、按纽组件相关功能 + +【新特性】优化场景编缉用户体验 + +【修复】游戏图层Bug + +【修复】多条件、触发条件引起的Bug diff --git a/Lakeshore/update/update120/README.md b/Lakeshore/update/update120/README.md new file mode 100644 index 0000000..fe5d64e --- /dev/null +++ b/Lakeshore/update/update120/README.md @@ -0,0 +1,37 @@ +【新增】序列帧动画 + +【新增】全新的事件表 + +【新增】组件：动画，九宫格，瓦片平铺，位图字体，数组，函数，WebStorage，Browser + +【新增】行为：横轴跑酷，刚体，跳穿，摄影机，边界限制，别针，计时器，淡入淡出，闪烁，曲线 + +【新增】事件表新增条件取反，且或混合运算机制 + +【新增】事件表中支持复制，剪切，粘贴 + +【新增】全局变量和全局对象的支持 + +【新增】图层视差 + +【新增】预览界面添加预览地址二维码，方便手机端调试预览 + +【新增】表达式校验机制 + +【新增】条件，动作添加流程支持回退 + +【新增】项目场景大小和游戏运行屏幕大小可以分别设置 + +【新增】fps和屏幕适配模式等项目属性 + +【新增】添加循环运算，滚屏动作等 + +【新增】问题反馈窗口 + +【优化】优化对象库，对象选择视图 + +【优化】优化场景面板用户体验 + +【修复】实例选取Bug + +【修复】按钮外释放鼠标无效Bug diff --git a/Lakeshore/update/update121/569f4df8394e7.png b/Lakeshore/update/update121/569f4df8394e7.png new file mode 100644 index 0000000..2581d19 Binary files /dev/null and b/Lakeshore/update/update121/569f4df8394e7.png differ diff --git a/Lakeshore/update/update121/569f4df86a0ca.png b/Lakeshore/update/update121/569f4df86a0ca.png new file mode 100644 index 0000000..66ea570 Binary files /dev/null and b/Lakeshore/update/update121/569f4df86a0ca.png differ diff --git a/Lakeshore/update/update121/569f4df87bf5d.png b/Lakeshore/update/update121/569f4df87bf5d.png new file mode 100644 index 0000000..9a25448 Binary files /dev/null and b/Lakeshore/update/update121/569f4df87bf5d.png differ diff --git a/Lakeshore/update/update121/569f4df89540d.png b/Lakeshore/update/update121/569f4df89540d.png new file mode 100644 index 0000000..65011da Binary files /dev/null and b/Lakeshore/update/update121/569f4df89540d.png differ diff --git a/Lakeshore/update/update121/569f4df8ab1eb.png b/Lakeshore/update/update121/569f4df8ab1eb.png new file mode 100644 index 0000000..35cf7fe Binary files /dev/null and b/Lakeshore/update/update121/569f4df8ab1eb.png differ diff --git a/Lakeshore/update/update121/569f4df8c477a.png b/Lakeshore/update/update121/569f4df8c477a.png new file mode 100644 index 0000000..beab43e Binary files /dev/null and b/Lakeshore/update/update121/569f4df8c477a.png differ diff --git a/Lakeshore/update/update121/569f4df8dc46c.png b/Lakeshore/update/update121/569f4df8dc46c.png new file mode 100644 index 0000000..e21fba3 Binary files /dev/null and b/Lakeshore/update/update121/569f4df8dc46c.png differ diff --git a/Lakeshore/update/update121/569f4df8f3755.png b/Lakeshore/update/update121/569f4df8f3755.png new file mode 100644 index 0000000..86cc226 Binary files /dev/null and b/Lakeshore/update/update121/569f4df8f3755.png differ diff --git a/Lakeshore/update/update121/569f4df90d6ee.png b/Lakeshore/update/update121/569f4df90d6ee.png new file mode 100644 index 0000000..371d9d9 Binary files /dev/null and b/Lakeshore/update/update121/569f4df90d6ee.png differ diff --git a/Lakeshore/update/update121/569f4df918186.png b/Lakeshore/update/update121/569f4df918186.png new file mode 100644 index 0000000..0ee28b5 Binary files /dev/null and b/Lakeshore/update/update121/569f4df918186.png differ diff --git a/Lakeshore/update/update121/569f4df92cfca.png b/Lakeshore/update/update121/569f4df92cfca.png new file mode 100644 index 0000000..5c90840 Binary files /dev/null and b/Lakeshore/update/update121/569f4df92cfca.png differ diff --git a/Lakeshore/update/update121/README.md b/Lakeshore/update/update121/README.md new file mode 100644 index 0000000..4712ddd --- /dev/null +++ b/Lakeshore/update/update121/README.md @@ -0,0 +1,23 @@ +【新增】WebSocket与Ajax组件，可与服务器进行交互 + +【新增】横轴跑酷、营销页等模板 + +【新增】事件表中子事件、一次性触发基制 + +【新增】禁用事件等若干条件与动作 + +【优化】事件表中复制、粘贴而乱序的体验问题 + +【优化】事件表中禁用/启动(组、事件、子事件、条件、动作)基制 + +【修复】事件表中某种情况下出现无法刷新的情况 + +【修复】事件表中全局变量bug + +【修复】全局实例bug + +【修复】计时器与声音bug + +【修复】某些特殊情况下条件无法过滤的bug + +【修复】其它若干bug diff --git a/Lakeshore/update/update200/README.md b/Lakeshore/update/update200/README.md new file mode 100644 index 0000000..411033b --- /dev/null +++ b/Lakeshore/update/update200/README.md @@ -0,0 +1,63 @@ +【新增】基于Egret 3.1.1引擎。 + +【新增】全新的场景与事件表工具栏。 + +【新增】独立的序列帧动画编辑窗口。 + +【新增】素材库窗口。 + +【新增】支持游戏预加载。 + +【新增】基于舞台，对象，场景的对齐工具。 + +【新增】场景编辑界面添加标尺。 + +【新增】表达式联想功能。 + +【新增】支持视频播放。 + +【新增】场景中添加右键菜单。 + +【新增】同场景内的复制粘贴。 + +【新增】项目库面板，显示项目内所有对象，对象组，全局实例。 + +【新增】对象组，可以整体操作组内对象。 + +【新增】支持特定组件类型任意转换。 + +【新增】事件的有效性检测机制，无效事件高亮显示，并不参与游戏运行。 + +【新增】添加多种适配模式。 + +【新增】WebGL渲染模式的支持。 + +【新增】支持旋转模式设置。 + +【新增】游戏背景颜色设置。 + +【新增】游戏暂停与继续。 + +【新增】八方向行为。 + +【新增】键盘组件。 + +【新增】欢迎页和菜单中显示最近打开的项目。 + +【新增】支持手机摇一摇。 + +【优化】全新的新建项目窗口。 + +【优化】全新的场景列表。 + +【优化】按住鼠标右键移动场景，鼠标滚轮直接缩放场景功能。 + +【优化】素材文件名支持中文。 + +【修复】淡入淡出意外触发的问题。 + +【修复】无法筛选出创建或制造出的对象的问题。 + +【修复】条件动作添加流程中，点击“上一步”，导致添加失败的问题。 + +【修复】添加了刚体行为的对象，无法被创建或制造。 diff --git a/Lakeshore/update/update201/README.md b/Lakeshore/update/update201/README.md new file mode 100644 index 0000000..d84a281 --- /dev/null +++ b/Lakeshore/update/update201/README.md @@ -0,0 +1,19 @@ +【新增】碰撞边缘编辑以及运行时的精确碰撞 + +【新增】缓动条件与动作 + +【新增】存/读档条件与动作 + +【新增】XML和Json组件 + +【优化】使用界面整体优化 + +【修复】曲线缩放不以锚点为中心的问题 + +【修复】单个场景时，添加跳转动作无效的问题 + +【修复】对象组添加行为的不工作的问题 + +【修复】禁用事件的文字没有灰掉的问题 + +【修复】摄像机行为丢失的问题 diff --git a/Lakeshore/update/update202/README.md b/Lakeshore/update/update202/README.md new file mode 100644 index 0000000..9f82c83 --- /dev/null +++ b/Lakeshore/update/update202/README.md @@ -0,0 +1,15 @@ +Lakeshore 2.0.2 + +更新日志 + +* 【新增】网格。 +* 【新增】辅助线。 +* 【新增】吸附对齐功能。 +* 【新增】支持CSV,Base64（无压缩）格式的Tiled Map地图。 +* 【优化】重新制作“飞行游戏”和“邀请函”示例。 +* 【修复】中文实例名，表达式中无法联想索引的问题。 +* 【修复】高版本tiled地图无法显示和运行偏移等问题。 +* 【修复】飞行游戏中，敌机销毁依然发射子弹的问题。 +* 【修复】开启全局实例导致游戏运行黑屏的问题。 +* 【修复】不编辑碰撞边缘，碰撞无效的问题。 +* 【修复】静音声音文件导致运行时报错的问题。 \ No newline at end of file diff --git a/Lakeshore/update/update210/README.md b/Lakeshore/update/update210/README.md new file mode 100644 index 0000000..eef10c9 --- /dev/null +++ b/Lakeshore/update/update210/README.md @@ -0,0 +1,43 @@ +【新增】免费提供100MB云空间，可以用来发布制作好的游戏 + +【新增】DragonBones龙骨动画支持 + +【新增】Box2d物理碰撞支持 + +【新增】工具栏显示的自定义 + +【新增】WebGL模式下的滤镜支持 + +【新增】遮罩功能 + +【新增】等待动作 + +【新增】新塔防与愤怒的歪星人模板 + +【修复】寻路行为在特定地图无效的问题 + +【修复】节点寻路在第二次调用时无效的问题 + +【修复】声音无法停止的问题 + +【修复】添加了寻路行为的对象，无法和其他对象用别针绑定的问题 + +【修复】图层显隐设置无效的问题 + +【修复】文本内容比较报错的问题 + +【修复】发布后横轴跑酷行为无效的问题 + +【修复】函数的参数缓存的问题 + +【修复】全局变量为中文名，保存后会变为数字的问题 + +【修复】按钮禁用后，点击任意处按钮恢复弹起状态的问题 + +【修复】按钮组件，轻触条件无效的问题 + +【修复】密码文本，输入时为明文的问题 + +【修复】对象在屏幕内的条件无效的问题 + +【修复】闪烁行为会被一同触发的问题 diff --git a/Lakeshore/update/update212/README.md b/Lakeshore/update/update212/README.md new file mode 100644 index 0000000..c56d1e1 --- /dev/null +++ b/Lakeshore/update/update212/README.md @@ -0,0 +1,52 @@ +## 发布日期：2016-12-9 + +## 更新日志： + +* 【新增】正式全面支持英文版 +* 【新增】全新的对象选框，支持等比缩放 +* 【新增】粒子组件 +* 【新增】精灵图组件 +* 【新增】矢量绘图动作 +* 【新增】更多的层操作动作 +* 【新增】刚体限制行为 +* 【新增】赛车行为 +* 【新增】移动到目标行为 +* 【新增】速度检测行为 +* 【新增】物理行为中添加多项动作 +* 【新增】发布打包app的支持 +* 【新增】表达式错误检测 +* 【优化】发布后项目文件瘦身 +* 【优化】预加载优化，场景切换加速 +* 【优化】运行时性能 +* 【优化】事件表和场景的操作体验 +* 【优化】事件表条件与动作过滤机制 +* 【修复】子弹行为的速度和角度无法用动作设置的问题 +* 【修复】按下任意按键都会触发按下指定按键的动作的问题 +* 【修复】全局变量注释无法修改的问题 +* 【修复】事件表拖拽位置不正确的问题 +* 【修复】某些情况下碰撞区域不正确的问题 +* 【修复】取消插入后再次插入会插入两个对象的问题 +* 【修复】对象被网格吸附，轻微拖拽坐标依然变化的问题 +* 【修复】无法添加fnt都扩展名的文件到素材库的问题 +* 【修复】布尔型全局变量再次修改时会变为数字型的问题 +* 【修复】数组没有自定义变量的运算条件和动作的问题 +* 【修复】复制对象后，多次粘贴，产生的多个对象无法删除的问题 +* 【修复】电脑浏览器中预览，拖拽时，鼠标光标变为工字型的问题 +* 【修复】添加素材到素材库，无法记住上一次选择的目录的问题 +* 【修复】父事件的筛选条件无法作用于子事件的问题 +* 【修复】设置文本内容，无法设置空内容的问题 +* 【修复】多个动画剪辑间，循环设置相互影响的问题 +* 【修复】曲线行为的周期随机数最终数值趋于0的问题 +* 【修复】创建全局变量无法输入小数点的问题 +* 【修复】创建和制造动作，隔行动作无法继承筛选的问题 +* 【修复】新建图层目录，显示缩进错误的问题 +* 【修复】跨场景的全局变量，项目保存后，在事件表中显示为空的问题 +* 【修复】删除全局变量，再新建同名的时提示已存在的问题 +* 【修复】缓动的目标角度设置为0无效的问题 +* 【修复】含有特殊字符文件名的图片添加导致显示错误的问题 +* 【修复】函数参数无法传递0值的问题 +* 【修复】塔防自定义索敌方式无效的问题 + +## 下载地址： +* win: [https://www.egret.com/api/download/index?app=Lakeshore&v=2.1.2&f=download&ext=exe](https://www.egret.com/api/download/index?app=Lakeshore&v=2.1.2&f=download&ext=exe) +* mac: [https://www.egret.com/api/download/index?app=Lakeshore&v=2.1.2&f=download&ext=dmg](https://www.egret.com/api/download/index?app=Lakeshore&v=2.1.2&f=download&ext=dmg) diff --git a/Native/manual/externalinterface.md b/Native/manual/externalinterface.md new file mode 100644 index 0000000..49552fb --- /dev/null +++ b/Native/manual/externalinterface.md @@ -0,0 +1,70 @@ +--- +title: JS与原生通信 +--- + + +## JS与Java通信 + +### JS向Java发送消息 + +Java注册接收消息的方法： + +```java +nativeAndroid.setExternalInterface("sendToNative", new INativePlayer.INativeInterface() { + @Override + public void callback(String message) { + String str = "Native get message: "; + str += message; + Log.d(TAG, str); + } +}); +``` + +JS发送消息： + +```javascript +egret.ExternalInterface.call("sendToNative", "message from JS"); +``` + +### Java向JS发送消息 + +JS注册接收消息的方法： + +```javascript +egret.ExternalInterface.addCallback("sendToJS", function(msg) { + console.log(msg); +}); +``` + +Java发送消息： + +```java +nativeAndroid.callExternalInterface("sendToJS", "message from Java"); +``` + +### 注意 +需要先注册接收消息的方法，才能接收到另一端发送的消息。 + +在应用刚启动时，JS可能没有加载完，这是向JS发送消息是不能接收到的。可以在游戏代码中先向Java发送消息通知Java端接收方法已经注册完成，再向JS发送消息。 + +## JS与OC通信 + +逻辑和Android相同，只是原生工程的API不同。 + +### Native + +注册接收消息的方法： + +```objective-c +[_native setExternalInterface:@"sendToNative" Callback:^(NSString* message) { + NSString* str = @"Native get message: "; + str = [str stringByAppendingString:message]; + NSLog(@"%@", str); +}]; +``` + +发送消息： + +```objective-c +[_native callExternalInterface:@"sendToJS" Value:@"message from OC"]; +``` diff --git a/Native/manual/fontfamily.md b/Native/manual/fontfamily.md new file mode 100644 index 0000000..47d7761 --- /dev/null +++ b/Native/manual/fontfamily.md @@ -0,0 +1,30 @@ +--- +title: 使用自定义字体 +--- + +`注意：字体文件需要通过资源加载后才可以使用。` + +Native 0.1.13及之前的版本：设置egret.TextField的fontFamily属性为字体文件的相对路径。 + +Native 0.1.14及之后的版本[示例Demo](http://tool.egret-labs.org/DocZip/native/manual/fontFamily/MyFont.zip)： + +- 手动声明注册自定义字体的方法 + +```typeScript +declare namespace egret { + export function registerFontMapping(name: string, path: string): void; +} +``` + +- 注册字体文件 + +```typeScript +// 注册字体文件需要在引擎启动（egret.runEgret）后执行 +egret.registerFontMapping("myFont", "resource/assets/myFont.ttf"); +``` + +- 使用自定义字体 + +```typeScript +textfield.fontFamily = "myFont"; +``` diff --git a/Native/manual/hotupdate.md b/Native/manual/hotupdate.md new file mode 100644 index 0000000..78ca292 --- /dev/null +++ b/Native/manual/hotupdate.md @@ -0,0 +1,73 @@ +--- +title: 热更新方案说明 +--- + +## 当前文件缓存策略 + +游戏运行过程中下载的文件会缓存在本地，参考“原生缓存策略”。 + +打包应用时可以将游戏资源放在包内，launcher创建的原生工程会自动将egret工程发布到assets目录下，如果需要更新可以重新打包，或者手动替换资源。 + +Native中可以通过config.preloadPath指定预加载目录，runtime加载资源时优先从这个目录查找文件，找不到再去assets目录下查找或者从服务器下载。 + +查找资源的优先级：预加载目录>本地资源(assets下的资源)>缓存目录(游戏运行过程中动态下载的资源) + +## API说明 + +通过修改config.preloadPath来指定预加载目录，开发者需要自行维护这个目录下的内容。 + +``` +Android: +//MainActivity.java +nativeAndroid.config.preloadPath = "指定目录"; + +iOS: +//AppDelegate.mm +_native.config.preloadPath = "指定目录"; +``` + +需要以"/"开始和结束的绝对路径，如 "/sdcard/egretGame/" + +可以简单地理解为，将游戏部署到了手机上的某个目录下，然后打开这个目录下的游戏。需要更新某个资源时，只需要更新这个目录上对应的资源即可。 + +## 文件存放位置 + +文件存放位置和文件的url对应，如 "http://game.com/game/index.html" 对应的本地文件路径应该是 config.preloadPath+"http/game.com/game/index.html"。 + +如果全部资源都放在本地，游戏地址可以不是真实存在的地址。 + +获得根目录（index.html所在目录）路径参考方法： + +```java +String getFileDirByUrl(String urlString /*"http://game.com/game/index.html"*/) { + int lastSlash = urlString.lastIndexOf('/'); + String server = urlString.substring(0, lastSlash + 1); + return server.replaceFirst("://", "/").replace(":", "#0A"); +} +``` + +## 注意事项 +1. Android上预加载目录设置为sd卡上的目录时注意申请文件读写权限 +2. iOS Hybrid方案打包的工程，请参考“如何使用Hybrid”中的更新策略和demo +3. 加载预加载的资源时会忽略地址后面的query（游戏地址中带的query能在游戏中读到，但是不能通过query进行版本控制） + +## 示例工程说明 +示例工程展示了如何下载游戏资源到预加载目录，和从预加载目录启动游戏。 + +游戏地址：http://game.com/game/index.html （不真实存在的地址，供游戏逻辑使用） + +游戏资源地址：http://tool.egret-labs.org/Weiduan/game/game2.zip （一个HelloWold工程） + +以Android为例，解压完成后 /sdcard/egretGame/http/game.com/game/ 下的内容如下： + +![](./hotupdate/p1.png) + +游戏资源解压完成后，设置config.preloadPath指定预加载目录，启动游戏后runtime会优先从这个目录加载资源。 + +### 下载示例工程 + +[Android](http://tool.egret-labs.org/DocZip/native/demo_android_preload.zip) + +[iOS](http://tool.egret-labs.org/DocZip/native/demo_ios_hotupdate.zip) + +示例工程仅展示了基础的预加载游戏资源的方法，没有处理下载失败等异常事件。 diff --git a/Native/manual/hotupdate/p1.png b/Native/manual/hotupdate/p1.png new file mode 100644 index 0000000..0ffe4b1 Binary files /dev/null and b/Native/manual/hotupdate/p1.png differ diff --git a/Native/manual/httpcache.md b/Native/manual/httpcache.md new file mode 100644 index 0000000..996a64b --- /dev/null +++ b/Native/manual/httpcache.md @@ -0,0 +1,134 @@ +--- +title: 原生缓存策略 +--- + + +* 以下内容仅适用于应用运行过程中下载的资源；assets、预加载目录下的资源不会被runtime更新。 +* index.html 不会被缓存，每次都会从服务器读取. +* 不想被缓存的资源，可以通过增加随机值的方法来请求 + +例如： + +``` +var xhr = new XMLHttpRequest(); +xhr.open('GET', './manifest.json?v=' + Math.random(), true); +``` + +* runtime支持服务器的缓存策略，比如`Cache-Control:max-age=age`， +runtime下载的资源只有超出了`max-age`设置的过期时间以后，才会向服务器发送资源的更新请求。此外，在过期以后，如果服务器上的资源没有发生变化，runtime不会重新下载这个资源。只有资源发生变化时，才会重新下载。 + + +## 一、支持的http缓存字段 +### 1.1 Cache-Control字段及取值清单 + +``` +Cache-Control:no-cache +Cache-Control:no-store +Cache-Control:max-age=age + +``` +对于其他取值，runtime则会通过下面的Date字段、Expires字段和Last-Modified字段等信息计算缓存是否有效。 + +其中， + +``` +Cache-Control:no-cache +``` +表示禁用缓存； + +``` +Cache-Control:no-store +``` +表示不存储任何信息； + +``` +Cache-Control:max-age=age +``` +表示缓存在age时间内有效，age的取值为数字，单位为秒。 + +### 1.2 Pragma字段及取值清单 + +``` +Pragma:no-cache +``` +表示禁用缓存，为HTTP1.0的标准优先级低于 +``` +Cache-Control:no-cache +``` +### 1.3 Date字段及取值清单 + +``` +Date:HTTP-date +``` +表示响应是在HTTP-date所代表的时间生成的。例如： + +``` +Date: Tue, 15 Nov 1994 08:12:31 GMT +``` +表示的是响应是在Tue, 15 Nov 1994 08:12:31 GMT生成的。 + +### 1.4 Expires字段及取值清单 + +``` +Expires:HTTP-date +``` +表示缓存在HTTP-date所代表的的时间之后失效。例如： + +``` +Expires: Thu, 01 Dec 1994 16:00:00 GMT +``` +表示缓存是在Thu, 01 Dec 1994 16:00:00 GMT之后失效。 + +如果不存在 + +``` +Cache-Control:max-age=age +``` +和 + +``` +Expires:HTTP-date +``` +字段，那么，runtime会使用Date字段和Last-Modified字段等信息计算缓存是否有效。 + +### 1.5 Last-Modified字段及取值清单 + +``` +Last-Modified:HTTP-date +``` +表示资源在服务器上的最后修改时间。例如： + +``` +Last-Modified: Tue, 15 Nov 1994 12:45:26 GMT +``` +表示资源在服务器上的最后修改时间是Tue, 15 Nov 1994 12:45:26 GMT。 + +### 1.6 ETag字段及取值清单 +``` +ETag:entity-tag +``` +表示资源在服务器上的唯一标志，entity-tag是一个服务器能够理解的值。 + +## 二、使用说明 + +为了合理的利用资源，减少不必要的流量消耗，服务器端应该合理的配置响应头字段，从而使得runtime和浏览器能够更加高效的使用缓存资源。 + +### 2.1 设置缓存的有效期 + +使用 + +``` +Cache-Control:max-age=age +``` +和 + +``` +Expires:HTTP-date +``` +都可以设置缓存的有效期，但是，一个是HTTP 1.1标准，一个是HTTP 1.0标准，并且，如果两个同时出现，那么，前者的优先级高于后者。推荐使用前者或者两者同时配置。如果不配置，那么，runtime和浏览器就会自己计算有效期，这样的话，不利于实现服务器和客户端的紧密配合。因此，推荐设置缓存的有效期。 + +### 2.2 设置Last-Modified和ETag + +当缓存失效的时候，runtime和浏览器会将这两个值加入到请求头中，使服务器能够高效的判断资源是否过期，从而决定是返回304，还是返回200。 + +推荐配置Last-Modified和ETag。如果两者同时出现，服务器会优先使用ETag进行处理。 diff --git a/Native/manual/microclient.md b/Native/manual/microclient.md new file mode 100644 index 0000000..098b7e9 --- /dev/null +++ b/Native/manual/microclient.md @@ -0,0 +1,183 @@ +--- +title: 如何发布微端项目 +--- + + + +## 什么是微端 + +白鹭微端是 Egret 团队为了解决原生 APP 包体过大而推出的打包解决方案。 + +通过动态加载技术，白鹭微端可保证打包发布的原生 APP 包体极小，以便节省游戏推广成本，提高游戏用户留存率。 + +白鹭微端内置两种运行模式，Runtime 模式下可大幅度提升基于 Egret 引擎所研发的游戏性能，而 Webview 模式可以最大化保证兼容性，支持其他不同游戏引擎所开发的 HTML5 游戏。 + +**微端仅支持发布Android工程。** + +## 创建微端工程 + +- 进入微端界面 + +![](./microclient/p0.png) + +- 注册游戏，填写游戏名称和地址 + +![](./microclient/p1.png) + +- 创建Android工程，填写应用报名和应用名称 + +![](./microclient/p2.png) + +- 根据需求选择是否使用Runtime加速，如果没有勾选，将通过WebView加载游戏，两种模式的优缺点如下： + +![](./microclient/p3.png) + +## 使用本地资源 + +微端使用的资源默认从网络加载，从 v0.0.13 版本开始，可以将资源打包在 app 中。 + +使用本地资源或想要把H5游戏打包到微端里，只需将h5发布的项目直接拷贝到 assets/game 目录，如没有这个目录请创建。 + +![](./microclient/p4.jpg) + +## JS与Java通信 + +逻辑和Android Native相同，只是原生工程的API不同。 + +注册接收消息的方法： + +```java +launcher.setExternalInterface("sendToNative", new INativePlayer.INativeInterface() { + @Override + public void callback(String s) { + Log.d("Egret Launcher", s); + } +}); +``` + +发送消息： + +```java +launcher.callExternalInterface("sendToJS", "message from microclient"); +``` + +## 启动页 + +### 手动关闭启动页的方法 + +当打开游戏页面以后，微端默认自动关闭启动页。但此时您的页面里加载的js文件或者其他文件很多的时候，因为需要从网络或本地缓存里读取这些文件，会存在一段黑屏时间。对玩家来说用户体验不好。 + +所以我们也提供了一种手动关闭启动页的方法。这种模式下，启动页会一直存在，直到调用了关闭启动页的代码。 + +- 设置安卓工程 + +安卓工程的 MainActivity 里 + +``` +//1 是自动关闭 0 是手动关闭 +launcher.closeLoadingViewAutomatically = 1; +``` + +将代码里的 **=1** 改为 **=0** + +- 修改游戏代码 + +当你的游戏初始化完成，可以关闭启动页时，调用下面这段代码 + +``` +if (window['closeLoadingView']) { + window['closeLoadingView'](); +} +``` + +- 优化建议 + +黑屏等待的时间和加载文件的数量是成正比的，即便使用手动关闭启动页，也会让玩家等待很长时间。所以建议合并js数量，比如使用 egret publish 后的版本，可以把数百个js文件合并成一个，这样启动速度就会很快了。 + +### 禁用启动页的方法 + +微端0.1.8添加。禁用后将不再弹出启动页。 + +``` +launcher.disableLaunchPage(); +``` + +### 修改启动页地址的方法 + +微端0.1.8添加。 + +``` +launcher.launchPageUrl = "启动页地址"; +``` + +## 在微端中使用启动图 + +在应用启动之前，为了解决白屏体验不好的问题，一般会先显示一张图片，等应用启动后再关掉这个图片。微端中也有这个方法。 + +### [示例demo下载地址](http://tool.egret-labs.org/microclient/doc/zip/launchimageAndroidV1.2.zip) + +### 启动图的意义 + +启动图可以减少用户看到的黑屏、白屏或者花屏的可能性，是 APP 的启动流程更加的自然，给用户带来更好的体验。 + +### 启动图的使用方法 + +通过 NativeLauncher 类的 initViews 方法启用启动图功能，函数原型如下： + + +``` +public void initViews(FrameLayout layout, int imageResId, int duration); +``` + +其中，layout 表示 View 的根节点，imageResId 表示启动图的图片资源 id，duration 表示启动图展示的时间，单位为毫秒。如果该时间等于 0，则表示启动图启动图会在游戏启动后自行关闭，如果大于 0，则表示启动图会在到达该时间之后关闭。 + +举例来说，假设 res 文件夹下面的 drawable 目录下有一个名为 background.jpg 的图片，该图片被用于启动图并且启动图的展示时间为 2 秒，那么示例代码如下： + + +``` +launcher.initViews(rootLayout, R.drawable.background, 2000); +``` + +其中，launcher 来自于 NativeLauncher 类，rootLayout 是 View 的根节点，R.drawable.background 指向前面的 background.jpg 图片，2000 表示展示时间为 2 秒。 + +## 其它工程设置 + +### 是否每次启动都重新下载游戏 + +使用这个功能是为了方便调试。默认值为0，设置为1后每次启动前都会清空下载缓存。 + +```java +launcher.clearGameCache = 0; +``` + +### 加载index的超时时间 + +设置加载index的超时时间。默认值为-1，不设置超时。 + +```java +launcher.loadingTimeout = -1; +``` + +### 设置预加载路径 + +详见“热更新方案说明” + +```java +launcher.preloadPath = ""; +``` + +### 禁用原生渲染加速 + +如果引擎的版本合适，runtime会自动开启原生渲染加速。如果您不想使用该功能，可以在工程中关闭。 + +```java +launcher.disableNativeRender(); +``` + +### 设置webview透明 + +在 setExternalInterfaces(); 下面增加一行代码： + +```java +launcher.setWebViewBackgroundTransparent(true); +``` diff --git a/Native/manual/microclient/p0.png b/Native/manual/microclient/p0.png new file mode 100644 index 0000000..9c95087 Binary files /dev/null and b/Native/manual/microclient/p0.png differ diff --git a/Native/manual/microclient/p1.png b/Native/manual/microclient/p1.png new file mode 100644 index 0000000..7d53313 Binary files /dev/null and b/Native/manual/microclient/p1.png differ diff --git a/Native/manual/microclient/p2.png b/Native/manual/microclient/p2.png new file mode 100644 index 0000000..b6a95cc Binary files /dev/null and b/Native/manual/microclient/p2.png differ diff --git a/Native/manual/microclient/p3.png b/Native/manual/microclient/p3.png new file mode 100644 index 0000000..0219fc6 Binary files /dev/null and b/Native/manual/microclient/p3.png differ diff --git a/Native/manual/microclient/p4.jpg b/Native/manual/microclient/p4.jpg new file mode 100644 index 0000000..bcd4b2c Binary files /dev/null and b/Native/manual/microclient/p4.jpg differ diff --git a/Native/manual/nativefaq.md b/Native/manual/nativefaq.md new file mode 100644 index 0000000..a10c92f --- /dev/null +++ b/Native/manual/nativefaq.md @@ -0,0 +1,6 @@ +--- +title: 原生项目常见问题 +--- + +#### 为什么遮罩没有效果了 +* 答：在原生项目里，修改 mask 的值后（如 x,y,width,height），一定要对 displayObject 重新赋值 mask，不然会出问题。 diff --git a/Native/manual/projectsetting.md b/Native/manual/projectsetting.md new file mode 100644 index 0000000..63ecbf4 --- /dev/null +++ b/Native/manual/projectsetting.md @@ -0,0 +1,90 @@ +--- +title: 如何发布原生项目 +--- + + +通过 `Egret` 引擎制作的游戏，不仅可以发布成 `Html5` 网页项目，还可以发布成原生项目。 + +## 发布设置前的准备工作 + +- 安装最新版本的launcher +- 确认引擎版本 + - 引擎版本必须为***5.1.6及以上*** +- 发布 iOS 需要安装Xcode + - 建议版本: 9.0或以上 + - 后续需要在 Xcode 中完成发布项目的修改和功能接入 +- 发布安卓需要安装 Android Studio + - 建议版本: 3.0或以上 + - 后续需要在 Android Studio 中完成发布项目的修改和功能接入 + +## 发布Android工程 + +### 发布项目 + +- 在launcher的项目面板找到需要发布Android工程的Egret项目，点击发布设置 + +![](./projectsetting/p0.png) + +- 点击左侧的Android按钮，在右侧页面中，输入应用名称、应用包名，点击确定。 + +![](./projectsetting/p1.png) + + +## 发布iOS工程 + +### 发布项目 + +- 在launcher的项目面板找到需要发布iOS工程的Egret项目，点击发布设置 + +![](./projectsetting/p0.png) + +- 点击左侧的iOS按钮，在右侧页面中，输入应用名称、应用包名，点击确定。 + +![](./projectsetting/p2.png) + + +## 工程设置 + +### 设置游戏地址 +Android： + +```java +nativeAndroid.initialize(gameUrl); +``` + +iOS: + +```objective-c +[_native startGame:gameUrl]; +``` + +launcher创建的默认工程会将游戏资源放到assets/game目录下，这时会从assets目录加载游戏。如果不需要将游戏放到应用里，请删除assets/game目录。 + +### 其它设置 + +可以通过修改nativeAndroid.config或_native.config的属性更改工程设置。 + +属性说明： + +- showFPS 是否显示fps面板 +- fpsLogTime log在屏幕上停留时间，单位是秒，-1为永久显示 +- disableNativeRender 是否禁用原生渲染加速 +- clearCache 是否清理缓存，设置为true时每次启动都会清理缓存，方便调试 +- loadingTimeout 加载index的超时时间。默认为0，不设置超时 +- preloadPath 设置预加载目录，详见“热更新方案说明” +- immersiveMode 开启沉浸模式，默认不占用安全区（刘海区域）。（0.1.16添加，部分机型需要用户手动在设置中开启"应用全屏显示"） +- useCutout 占用安全区。（0.1.16添加，如果没有开启沉浸模式，该设置无效；部分机型横屏模式不能占用安全区） + +## 5.1.6以下引擎版本发布原生工程 + +5.1.6以下引擎没有支持发布原生工程的脚本，不能通过launcher直接发布原生工程。 + +### 解决方案 + +1. 通过launcher创建引擎版本为5.1.6或以上的egret工程，创建原生工程。 +2. 将需要打包原生应用的游戏发布为h5版本。 +3. 将发布结果替换到原生工程的assets/game目录下。 + +## 注意 + +Native 仅支持 webgl 渲染模式。 diff --git a/Native/manual/projectsetting/p0.png b/Native/manual/projectsetting/p0.png new file mode 100644 index 0000000..ea07b80 Binary files /dev/null and b/Native/manual/projectsetting/p0.png differ diff --git a/Native/manual/projectsetting/p1.png b/Native/manual/projectsetting/p1.png new file mode 100644 index 0000000..003b654 Binary files /dev/null and b/Native/manual/projectsetting/p1.png differ diff --git a/Native/manual/projectsetting/p2.png b/Native/manual/projectsetting/p2.png new file mode 100644 index 0000000..aff4905 Binary files /dev/null and b/Native/manual/projectsetting/p2.png differ diff --git a/Native/manual/runtimestate.md b/Native/manual/runtimestate.md new file mode 100644 index 0000000..2069c3e --- /dev/null +++ b/Native/manual/runtimestate.md @@ -0,0 +1,76 @@ +--- +title: 事件回调 +--- + +# 运行过程中 runtime 的事件回调 + +## state + +- 消息类型 + +``` +{"state”:”starting”} index加载成功 +{"state”:”running”} js加载成功，开始运行游戏 +``` + +- 注册监听（以Android为例） + +```java +private void setExternalInterfaces() { + // handle the state change Event during the running + nativeAndroid.setExternalInterface("@onState", new INativePlayer.INativeInterface() { + @Override + public void callback(String message) { + String str = "Native get onState message: "; + + str += message; + Log.e(TAG, str); + } + }); +} +``` + +## error + +- 消息类型 + +``` +{"error":"load"} index加载失败 +{"error":"start"} js加载失败 +{"error”:”stopRunning”} 运行过程中出现异常，中断了引擎的心跳（一般会先抛出jsError） +``` + +- 注册监听（以Android为例） + +```java +private void setExternalInterfaces() { + // handle the error Event during the running + nativeAndroid.setExternalInterface("@onError", new INativePlayer.INativeInterface() { + @Override + public void callback(String message) { + String str = "Native get onError message: "; + + str += message; + Log.e(TAG, str); + } +}); +``` + +## jsError + +- 注册监听（以Android为例） + +```java +private void setExternalInterfaces() { + // handle the error Event during the running + nativeAndroid.setExternalInterface("@onJSError", new INativePlayer.INativeInterface() { + @Override + public void callback(String message) { + // 参数为堆栈信息 + String str = "Native get onJSError message: "; + + str += message; + Log.e(TAG, str); + } +}); +``` diff --git a/Native/publish/appstore.md b/Native/publish/appstore.md new file mode 100644 index 0000000..f73c4f5 --- /dev/null +++ b/Native/publish/appstore.md @@ -0,0 +1,73 @@ +--- +title: 发布到 AppStore +--- + + +2019年苹果更新了对HTML5游戏的政策，要求HTML5游戏应在 Safari浏览器中展现，而不是直接打包为 ipa 发布到 AppStore 中，对此，很多 +开发者给予关注，并跟我们咨询寻求帮助，解决他们在白鹭引擎开发的HTML5游戏发布到AppStore的问题。 + +在我们白鹭完整的开发工作流产品中，使用Egret Native就可以解决就可以解决这个问题。 + +在最近几个月的时间中，我们引擎团队帮助数十家开发商成功将其产品顺利通过 AppStore 新规审核，总结了一些实操经验，今天跟大家分享下， +希望可以帮助更多的开发者朋友过审AppStore。 + + +## 一定不要使用 WKWebView 直接打包 + +这是苹果现在重点打击的目标，请开发者一定要采用 Egret Native 提供的打包方式进行打包，而不是使用 WKWebView。具体原因是，WKWebView发布的游戏是一个运行在HTML5环境下的游戏，不符合最新的开发者规范中的4.7项。而 Egret Native 与WKWebView不同，底层运行的是一套纯原生的、并且针对白鹭引擎进行了大量定制性能优化的渲染引擎，完全符合苹果的开发者规范。 + +此外，我们强烈建议您开启 EgretNative的NativeRenderer 模式，采用这种模式不仅可以大幅提升您的游戏性能，而且经过实际验证，可以进一步提升AppStore的过审概率。 + +## 游戏代码应打包至本地而非远程下载 + +苹果针对应用的热更新现在提出了更严格的要求，您如果收到了苹果的拒绝邮件，并且其中明确您违反了 Guideline 2.5.2 - Performance 这一项中的 During review, your app contains the ability to download code, which is not permitted on the App Store 这一部分内容，您需要修改现有项目结构，将游戏代码应打包至本地而非远程下载，具体一个简单的验证手段如下： + +1. 将您的测试机关掉WiFi/4G ，保持其处于无网络环境 +2. 启动您的游戏 +3. 确保在无网络环境下，您的游戏可以顺利运行，直到游戏逻辑必须需要连接网络（比如登录游戏服务器），至少渲染出一个登录界面，并且该界面是使用白鹭引擎渲染的而非自行添加的 iOS Native控件 +4. 游戏前30分钟的资源全部在IPA中加载，而非网络加载，网络消息只是用来进行必要的客户端服务器交互 + +## 原生代码中请不要包含任何 WKWebView + +不仅游戏本身不要使用 WKWebView，我们建议您最好不要在 iOS 原生代码中包含任何的 WKWebView，因为理论上如果您包含 WKWebView，您就具备了在苹果审核后通过更换链接的方式在苹果未审核的情况下在App中添加其他功能的能力，这就违反了苹果开发者规范中的 Guideline 2.3.1 - Performance, We discovered that your app contains hidden features.这一部分。 + +针对此问题，我们建议您可以从苹果的角度去思考，这款App从技术实现角度来看，是否具备了绕过苹果审核添加新功能的能力。举个例子，理论上您的代码里只要包含一个 WKWebView，并且这个WKWebView可以被游戏随时唤醒，理论上就具备了在苹果过审后将苹果支付修改为弹出 WebView并在其中添加微信/支付宝网页支付的能力。如果您的 App 在技术角度来看具备这样的潜力（哪怕您无意这样做），就一定不会过审。 + + +## 确保您的代码中不包含第三方支付代码 + +这点问题与上一条类似，请确保您的代码（特别是遗留代码，以及接入的第三方SDK代码）中不包含第三方支付代码，否则您就违反了苹果开发者规范中的 Guideline 3.1.1 - Business - Payments - In-App Purchase We noticed that your app or its metadata enables the purchase of content, services, or functionality in the app by means other than the in-app purchase API, which is not appropriate for the App Store 这一部分。 + +在我们进行技术支持的客户中，多次出现过开发商接入了聚合支付SDK（一般是自己公司的其他部门编写的）中包含了微信支付/支付宝支付的代码，虽然这些代码并不会真正运行，但是仍然因为该原因被苹果拒绝过深。 + + +## 总结 + +从上文可以看出，苹果希望开发者做的是： + +* 为 AppStore 提交优质的内容 +* 确保采用苹果支付 + +苹果禁止开发者做的是： + +* 为苹果提供劣质内容 +* 为苹果提供虚假内容并后续通过热更新来进行替换（马甲包） +* 任何有可能导致用户使用第三方支付代替苹果支付的行为 + + +> 注：这些原则只是白鹭引擎团队根据我们协助开发者成功过审的经验而得出的原则，并非代表苹果官方观点。 + + +开发者应随时审视自己的应用是否符合上述原则。如果您仍然存在问题，可以与白鹭引擎的技术支持团队联系，我们可以为您提供的苹果过审技术顾问。 + + + + +## 后续展望 + + +我们今天（2020年3月3日）还发布了 Egret Native 1.0.1 版本，修复了多处原生渲染相关的BUG，特别是一个关于 iOS 13.4（苹果开发者预览版本）上由于苹果的API调整导致EgretNative黑屏的问题，建议所有开发者更新至此版本以防止 iOS 13.4 正式发布后现有游戏出现此问题。 + +除此之外，我们进一步提升了 EgretNative 的启动速度，目前一个HelloWorld的启动时间大约提升了10%左右。我们后续也会继续针对 NativeRenderer 的性能和稳定性进行更多的优化。 + +我们在2020年1月份收到了苹果的邮件，苹果指出目前 Egret Native 底层采用的 OpenGL 在未来有可能被废弃，推荐我们采用苹果的新技术 Metal 作为其替代品。白鹭团队正在探索将底层从 OpenGL 切换为 Metal 的可行性，我们目前倾向于基于一些业界相对成熟的开源项目进行一些改造，目前已经有了初步方案，我们将在苹果苹果正式废弃 OpenGL 时做好充分的准备工作，如果有开发者收到类似邮件请无需紧张。 diff --git a/Native/sidebars.js b/Native/sidebars.js new file mode 100644 index 0000000..7ffb04c --- /dev/null +++ b/Native/sidebars.js @@ -0,0 +1,53 @@ +module.exports = { + "someSidebar": { + "更新详情": [ + "update/1.0.1/1.0.1.html", + { + "type": "category", + "label": "历史更新", + "items": [ + "update/1.0.0/1.0.0.html", "update/0.1.23/0.1.23.html", "update/0.1.22/0.1.22.html", "update/0.1.21/0.1.21.html", "update/0.1.20/0.1.20.html", + "update/0.1.19/0.1.19.html", "update/0.1.18/0.1.18.html", "update/0.1.17/0.1.17.html", "update/0.1.16/0.1.16.html", "update/0.1.15/0.1.15.html", + "update/0.1.14/0.1.14.html", "update/0.1.13/0.1.13.html", "update/0.1.12/0.1.12.html", "update/0.1.11/0.1.11.html", "update/0.1.10/0.1.10.html", + "update/0.1.9/0.1.9.html", "update/0.1.8/0.1.8.html", "update/0.1.7/0.1.7.html", "update/0.1.6/0.1.6.html", "update/0.1.5/0.1.5.html", + "update/0.1.4/0.1.4.html", "update/0.1.3/0.1.3.html", "update/0.1.2/0.1.2.html", "update/0.1.1/0.1.1.html", "update/0.1.0/0.1.0.html" + ] + } + ], + "使用手册": [ + "manual/projectsetting", + "manual/microclient", + "manual/externalinterface", + "manual/hotupdate", + "manual/httpcache", + "manual/runtimestate", + "manual/fontfamily", + "manual/nativefaq" + ], + "打包发布":[ + "publish/appstore" + ], + "iOS/Android Support": [ + 'support/legacy-announcement', + { + "type": "category", + "label": "原生支持", + "items": [ + "support/native/horizontalScreen/horizontalScreen.html", + "support/native/hotUpdate/hotUpdate.html", + "support/native/debugSkill/debugSkill.html", + "support/native/communicateSkill/communicateSkill.html", + "support/native/other/other.html" + ] + }, + { + "type": "category", + "label": "打包发布", + "items": [ + "support/publish/publishAndroid/publishAndroid.html", + "support/publish/publishIOS/publishIOS.html" + ] + } + ] + } +} diff --git a/Native/support/legacy-announcement.md b/Native/support/legacy-announcement.md new file mode 100644 index 0000000..60e59e2 --- /dev/null +++ b/Native/support/legacy-announcement.md @@ -0,0 +1,11 @@ +--- +title: 过期声明 +--- + +Egret iOS/Android Support 是白鹭引擎2014年研发的iOS/Android打包方案。 + +白鹭引擎团队在2017年研发并发布了 Egret Native 0.1 版本，持续迭代三年后于2020年1月份正式发布了 Egret Native 1.0 版本。其稳定性、性能均比iOS/Android Support有长足的进步。 + +我们于2017年开始推荐开发者使用 Egret Native，并持续针对 iOS/Android Support 进行最小的维护。目前根据我们的统计，超过95%的白鹭引擎发布的原生游戏都使用了 Egret Native方案。 + +因此我们将在2020年4月份正式结束对 iOS/Android Support的支持，我们希望仍在使用 iOS/Android Support的开发者尽快更新。 diff --git a/Native/support/native/communicateSkill/README.md b/Native/support/native/communicateSkill/README.md new file mode 100644 index 0000000..7e796a9 --- /dev/null +++ b/Native/support/native/communicateSkill/README.md @@ -0,0 +1,106 @@ +--- +id: communicateSkill.html +title: Egret 与 Native 通信 +--- + +## 准备工作 + +1、了解通过 egret-ios-support 打包为原生项目的方法 + +2、了解 Egret 项目内的基本操作和 IOS 和 Android 编程基本技巧。 + +了解上面的基本知识之后可以通过建立一个新的 HelloWorld 项目来测试。 + +在 Egret 内，通过全局类`ExternalInterface`来与`native`进行通讯。 + +3、获得示例项目 + +下载好 Egret Android Support 和 Egret IOS Support 后可以在其相应目录下找到 HelloEgret 的模板项目。 + +Egret Android Support 可以在 `proj.android\src\org\egret\java\HelloEgret`路径下找到源码。 + +Egret IOS Support 可以在 `egret_ios_template\proj.ios\HelloEgret`路径下找到源码。 + +## Native 向 Egret 发送消息 + +### Egret 监听消息 + +通过`ExternalInterface`的`addCallback`方法来监听`Native`端发送来的消息。 + +``` +// TypeScript 代码 +egret.ExternalInterface.addCallback("sendToJS", function (message:string) { + console.log("message form native : " + message);//message form native : message from native +}); +``` + +上面我们调用`addCallback`,他的第一个参数"sendToJS",表示`Native`端发送的函数名。另外一个参数是回调函数，当 `Native` 端发送消息来时将调用回调函数，其中`message`就是`Native`端发送过来的值了。 + +### Native 发送消息 + +在原生代码中向 Egret 发送消息也比较简单，通过调用相应 API 向 Egret 发送消息。这里的参数都是两个，第一个是发送消息的`ID`,第二个为发送消息的值。当 Egret 内监听了同样 `ID`的消息，将收到该消息，并触发回调。这里我们使用上面 Egret 内监听的 `sendToJS` 为发送消息的 `ID`。 + +Android 对应发送消息代码: +``` +// Java 代码 +// gameEngine 在 onCreate 实例化出来。 +gameEngine.callEgretInterface("sendToJS", "message from Android"); +``` + +IOS 对应发送消息代码： + +``` +/// Objective-C 代码 +[[EgretRuntime getInstance] callEgretInterface:@"sendToJS" value:@"message from IOS"]; +``` + +## Egret 向 Native 发送消息 + +### Native 监听消息 + +#### Android 内监听消息 + +在 Android 内监听消息通过调用`EgretGameEngine`实例的`setRuntimeInterface`方法来实现。第一个参数仍然是需要监听的 ID,第二个参数需要实例化一个`IRuntimeInterface`,并重写他的`callback`方法。在其中接收回调的字符串。 + +首先要实现`IRuntimeInterface`: + +``` +private interface IRuntimeInterface { + public void callback(String message); +} +``` + +Android 对应的监听消息的代码： +``` +// Java 代码 +//gameEngine 在 onCreate 实例化出来。 +gameEngine.setRuntimeInterface("sendToNative", new IRuntimeInterface() { + @Override + public void callback(String message) { + Log.d("externalInterface", "message : " + message); + } + }); +``` + +#### IOS 内监听消息 + +IOS 部分对应接收代码,IOS部分监听回调也比较简单，同样调用`setRuntimeInterface`,两个参数分别是监听的ID `sendToNative` 和回调函数. + +IOS 对应的监听消息的代码： +``` +/// Objective-C 代码 +[[EgretRuntime getInstance] setRuntimeInterface:@"sendToNative" + block:^(NSString * message) { + NSLog(@"message :%@", message); + }]; +``` + +### Egret 发送消息 + +在`ExternalInterface`中，通过`call`方法向`native`发送消息。`call`中的两个参数分别是`functionName`和`value`,需要注意的是这两个参数都是字符串类型。`functionName`表示在 Native 端调用的函数回调名。也可以将此参数看成是函数回调的 ID ，有多个函数需要在 Native 端回调的时候可以通过此名称来区分。而`value`参数则比较好理解，表示要传给 Native 端的具体值。 + +``` +// TypeScript 代码 +egret.ExternalInterface.call("sendToNative", "message from js"); +``` +比如上面代码发送了一段消息`message from js`给`Native`,当`Native`端添加了`sendToNative`的监听的时候，就可以在其回调函数中收到这个消息了。 diff --git a/Native/support/native/debugSkill/568a5d4b14058.png b/Native/support/native/debugSkill/568a5d4b14058.png new file mode 100644 index 0000000..2feed0e Binary files /dev/null and b/Native/support/native/debugSkill/568a5d4b14058.png differ diff --git a/Native/support/native/debugSkill/568a5d4b320ca.png b/Native/support/native/debugSkill/568a5d4b320ca.png new file mode 100644 index 0000000..bf38c77 Binary files /dev/null and b/Native/support/native/debugSkill/568a5d4b320ca.png differ diff --git a/Native/support/native/debugSkill/568a5d4b40959.png b/Native/support/native/debugSkill/568a5d4b40959.png new file mode 100644 index 0000000..5503de1 Binary files /dev/null and b/Native/support/native/debugSkill/568a5d4b40959.png differ diff --git a/Native/support/native/debugSkill/README.md b/Native/support/native/debugSkill/README.md new file mode 100644 index 0000000..742c4c3 --- /dev/null +++ b/Native/support/native/debugSkill/README.md @@ -0,0 +1,20 @@ +--- +id: debugSkill.html +title: 调试技巧 +--- + +在Android App打包运行过程中，有可能会发现一些问题，比如打包后黑屏无法正常运行。这时就需要使用Android的logcat调试功能来诊断问题。 + +在IntelliJ运行Android项目，会自动弹出Android标签，如图： + +![](568a5d4b320ca.png) + +常规情况下，会显示整个系统的全部log，为了过滤掉不需要的信息，我们可以用进程过滤功能只显示我们正在调试的app输出的log，选中该按钮，并选中我们要调试的app进程： + +![](568a5d4b320ca.png) + +即便是以限定了一个app进程，仍然可能有大量我们不需要的信息，别郁闷，我们可以进一步根据log的类型进行过滤： + +![](568a5d4b40959.png) + +通常我们最常用到的是Warn和Error级别的log，因为这两个级别包含程序运行不正常时首先需要检查的信息。 diff --git a/Native/support/native/horizontalScreen/569cc4287e852.jpg b/Native/support/native/horizontalScreen/569cc4287e852.jpg new file mode 100644 index 0000000..3434e1c Binary files /dev/null and b/Native/support/native/horizontalScreen/569cc4287e852.jpg differ diff --git a/Native/support/native/horizontalScreen/README.md b/Native/support/native/horizontalScreen/README.md new file mode 100644 index 0000000..3b0a79c --- /dev/null +++ b/Native/support/native/horizontalScreen/README.md @@ -0,0 +1,112 @@ +--- +id: horizontalScreen.html +title: 原生横屏设置 +--- + +## 准备工作 + +Eget 的 H5 项目通过 Egret Android Suppord 或 Egret IOS Support 可以生成相应的 Native 项目。如果需要设置项目的横竖屏等信息，需要在相应的 Native 项目中进行设置。 + +## Android 横竖屏设置 + +### 在 Java 代码中设置 + +在 Java 代码中可以像下面这样设置屏幕的旋转方向强制为横屏： + +``` +setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE) +``` + +其中 ActivityInfo 可以是以下值： + +``` +ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED,//未指定，此为默认值。由Android系统自己选择合适的方向。 +ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE,//横屏 +ActivityInfo.SCREEN_ORIENTATION_PORTRAIT,//竖屏 +ActivityInfo.SCREEN_ORIENTATION_USER,//用户当前的首选方向 +ActivityInfo.SCREEN_ORIENTATION_BEHIND,//继承Activity堆栈中当前Activity下面的那个Activity的方向 +ActivityInfo.SCREEN_ORIENTATION_SENSOR,//由物理感应器决定显示方向 +ActivityInfo.SCREEN_ORIENTATION_NOSENSOR,//忽略物理感应器——即显示方向与物理感应器无关 +``` + +### 在 AndroidManifest.xml 中设置 + +在我们生成的 Android 项目的 proj.android 目录下可以找到 AndroidManifest.xml 配置文件,它是每个 Android 项目都必须的配置文件，提供了各项属性来详细描述应用程序的元数据。当然，在程序中修改的屏幕方向时要比在配置文件中的优先级要高的。 + +在 AndroidManifest.xml 可以找到 `android:screenOrientation` 字段，这个是我们配置项目横竖屏的字段。它可以有下列参数,与上面的基本一一对应： + +* "unspecified": 由系统来判断显示方向.判定的策略是和设备相关的，所以不同的设备会有不同的显示方向. + +* "landscape": 横屏显示(宽比高要长). + +* "portrait": Android Support 模板设置的默认值，竖屏显示(高比宽要长). + +* "user":用户当前首选的方向 + +* "behind": 与 Activity 堆栈中的下一个设置一致. + +* "sensor":由物理的感应器来决定。如果用户旋转设备这屏幕会横竖屏切换. + +* "nosensor":忽略物理感应器，这样就不会随着用户旋转设备而更改了("unspecified"设置除外)。 + +#### 设置横屏 + +设置项目的横屏可以这样配置: + +``` +android:screenOrientation="landscape" +``` + +这样项目将横屏显示。 + +#### 设置竖屏 + +设置项目的竖屏可以这样配置: + +``` +android:screenOrientation="portrait" +``` + +### iOS 项目设置横竖屏 + +#### 在 ViewController 中进行设置 + +iOS 项目内的屏幕方向可以使用 ViewController 或者 info.plist 来设置屏幕的旋转方向。ViewController 这种方法优先级要比在 info.plist 中直接设置高。推荐在 ViewController 中设置。 + +在 Egret IOS Support 提供的模板项目中可以找到相关的设置,在 HelloEgret 项目中找到 ViewController.mm ,如下图所示： + +![](569cc4287e852.jpg) + +其中代码如下： + +``` +- (BOOL)isLandscape { + // 横屏返回YES，竖屏返回NO + return NO; +} +``` + +#### 在 info.plist 中进行设置 + +还可以在 info.plist 中进行设置，找到 `Supported Interface Orientations` ，在 iOS APP 默认支持四种屏幕方向即： + +* Portrait:正常的竖屏(top home button) + +* PortraitUpsideDown:反向的竖屏(bottom home button) + +* LandscapeLeft:左上角开始的横屏(left home button) + +* LandscapeRight:右上角开始的横屏(right home button) + + +也可以在项目目录下直接找到 info.plist 文件，在 info.plist 可以找到`UISupportedInterfaceOrientations`和`UISupportedInterfaceOrientations~ipad`字段。 + +如果要设置横屏，可以将竖屏的两种模式删除，反之同理。 + +> 一般情况下不推荐修改 info.plist。 + + + + + + diff --git a/Native/support/native/hotUpdate/562da618aec85.png b/Native/support/native/hotUpdate/562da618aec85.png new file mode 100644 index 0000000..a40bdfc Binary files /dev/null and b/Native/support/native/hotUpdate/562da618aec85.png differ diff --git a/Native/support/native/hotUpdate/562da618bac78.png b/Native/support/native/hotUpdate/562da618bac78.png new file mode 100644 index 0000000..bd2d9c2 Binary files /dev/null and b/Native/support/native/hotUpdate/562da618bac78.png differ diff --git a/Native/support/native/hotUpdate/562da618ca122.png b/Native/support/native/hotUpdate/562da618ca122.png new file mode 100644 index 0000000..ec0da01 Binary files /dev/null and b/Native/support/native/hotUpdate/562da618ca122.png differ diff --git a/Native/support/native/hotUpdate/562da618d6734.png b/Native/support/native/hotUpdate/562da618d6734.png new file mode 100644 index 0000000..63e2dc4 Binary files /dev/null and b/Native/support/native/hotUpdate/562da618d6734.png differ diff --git a/Native/support/native/hotUpdate/562da618e6ca3.png b/Native/support/native/hotUpdate/562da618e6ca3.png new file mode 100644 index 0000000..d6de4c6 Binary files /dev/null and b/Native/support/native/hotUpdate/562da618e6ca3.png differ diff --git a/Native/support/native/hotUpdate/562da619037a5.png b/Native/support/native/hotUpdate/562da619037a5.png new file mode 100644 index 0000000..02fb9a3 Binary files /dev/null and b/Native/support/native/hotUpdate/562da619037a5.png differ diff --git a/Native/support/native/hotUpdate/README.md b/Native/support/native/hotUpdate/README.md new file mode 100644 index 0000000..248a6f9 --- /dev/null +++ b/Native/support/native/hotUpdate/README.md @@ -0,0 +1,182 @@ +--- +id: hotUpdate.html +title: 热更新 +--- + +## 概述 + +本文适用 2.5.3 以上。 + +Egret的封装项目无论在Android还是iOS平台，均支持热更新。 + +下文主要以Android平台为例来说明，iOS平台只需要在相应的配置和iOS入口类代码中进行不同的修改配置即可。 + +## 准备工作 + +在进行热更新之前，我们需要创建 Andorid 项目。 + +## 配置文件 +在进行热更新发布之前，需要进行H5项目中 egretProperties.json 的配置。 + +使用 wing 在桌面文件夹 test 中新建名 h5Demo 的 Egret H5项目。 + +使用命令行 `egret create_app` 在桌面文件夹 test 中新建名为 androidDemo 的 Andorid 项目。 + +最终文件结构如图： + +![](562da618aec85.png) + +打开H5中的配置文件 egretProperties.json ，文件结构如下： + + { + "native": { + "path_ignore": [], + "android_path": "../androidDemo" + }, + "publish": { + "web": 0, + "native": 1, + "path": "bin-release" + }, + "egret_version": "2.5.2", + "modules": [ + { + "name": "egret" + }, + { + "name": "game" + }, + { + "name": "tween" + }, + { + "name": "res" + } + ] + } + +字段描述请查阅：[项目配置文件说明](http://developer.egret.com/cn/github/egret-docs/Engine2D/projectConfig/configFile/index.html) ，了解其中 “path_ignore”、“android_path”、“path” 即可。 + +> android_path是在执行`egret create_app`后自动添加。 + +## Android项目设置 + +使用 Eclipse 导入刚创建的 androidDemo 项目，并找到入口文件 androidDemo.java 此处入口文件根据自己实际项目名进行更改。 + +需修改两处： + +- 修改方法 setLoaderUrl 参数为1，默认是2，如图： + +![](562da618bac78.png) + +- 修改 setLoaderUrl 方法中 case 为 1 的 loaderUrl 与 updateUrl 变量，如图： + +![](562da618ca122.png) + +- case 2, 空字符串。即当前包使用最原始的格式。`egret build [-e] --runtime native` 之后的数据结构。 +- default, 本地使用zip包方式。`egret publish --runtime native --version xxx` 之后，会将最新的资源包拷贝到Android项目中。此时如果需要在Android项目中测试。 +- case 1, 一般这里为动态地址，根据请求的内容返回具体的 json 内容。只有使用这种方式才会有热更新机制，引擎会根据提供的 game_code.zip 的名称进行更新。 + + +## 服务器端设置 + +APP每次启动会从事先设置好的HTTP（loaderUrl）地址请求更新内容进行对比。 + +我们需要搭建WEB服务器，百度一下，非常多的教程这里略。 + +服务器需要返回特定JSON格式： + + { + "code_url": "http://10.0.5.158/app/151023172200/game_code_151023172200.zip",//游戏代码zip包路径 + "update_url": "http://10.0.5.158/app/151023172200" //游戏资源存放路径 + } + +以PHP为例建立名为egret.php文件，内容如下： + + 注：每次发布项目后，andorid 项目可能会被更新，需重新设置 setLoaderUrl 相关参数与内容。 + +## 避免第一次启动一定会进行热更新的方法（3.2.4添加） + +Android： + +在 getGameOptions 里添加属性，指定本地zip包名： + +~~~ +options.put(EgretRuntime.OPTION_PUBLISH_ZIP, "game_code.zip"); +~~~ + + +iOS: + +在 runGame 中为 _options 添加属性，指定本地zip包名： + +~~~ +options[@OPTION_PUBLISH_ZIP] = @"game_code.zip"; +~~~ + +## 不进行热更新仍然显示GameLoadingView的方法（Android support 3.2.5添加） + + +在设置GameLoadingView时添加最短持续时间的参数: + +~~~ +gameEngine.game_engine_set_loading_view(new GameLoadingView(this), 5); // GameLoadingView将最少持续5秒 +~~~ + +## 总结 + +热更新的机制比较简单。基本就几步： + +1. 修改 Android 封装项目入口文件的 setLoaderUrl 方法,并发布正式版本APP。 +2. 每次H5版本有资源或代码修改，执行`egret publish --runtime native`发布命令。 +3. 拷贝所生成的文件夹到WEB服务器，并修改服务器中更新路径。 +4. 确保每次 zip 包的名称不一样。 diff --git a/Native/support/native/other/README.md b/Native/support/native/other/README.md new file mode 100644 index 0000000..bd6d21d --- /dev/null +++ b/Native/support/native/other/README.md @@ -0,0 +1,103 @@ +--- +id: other.html +title: 其他原生支持 +--- + +## 开启优化开关 + +**适用于Android和iOS support 3.2.2及以上。** + +**功能：**开启support对部分功能的优化。这些优化项暂时是默认关闭的，稳定之后会直接添加到support中。 + +**使用方法：**在native_require.js的egretInit函数中，修改egret_native.featureEnable的参数。例如打开渲染效率的优化方法如下： +~~~ +var feature = { + cmdBatch : true +}; +egret_native.featureEnable(feature); +~~~ +**参数：**一个js对象，目前可用的属性有： + +cmdBatch: 减少引擎与support的数据传输次数，提高渲染效率（3.2.2添加）。 + +pretreatTexture：提高一张纹理被多次使用时的渲染效率（3.2.4添加）。 + + + +## 热更新地址不能访问时启动最后一次更新的游戏包 + +**适用于iOS support 3.2.2及以上。** + +**功能：**热更新地址不能访问时启动最后一次更新的游戏。 + +**使用方法：**在启动游戏之前，设置访问热更新地址的等待时间。修改ViewController的runGame方法，在启动EgretRuntime前调用： + ![](p1.png) +**参数：**等待时间（秒） + +## 切换音频解码方式 + +**适用于Android support 3.2.2及以上。** + +**功能：**选择是否默认优先使用PCM解码。默认是开启的，在大多数情况下，使用PCM解码速度更快，但是有的音频的时间会很长。 + +**使用方法：**在调用play事件之前，使用egret_native.setPcmDecodeEnable来开启或关闭。 + +**参数：**true/false + + +## 设置游戏背景透明 + +**适用于Android support 3.2.1及以上，iOS support 3.2.4及以上。** + +**功能：**设置游戏所在View的背景透明。 + +**使用方法：** + +Android： + +在 getGameOptions 里添加属性： +~~~ +options.put(EgretRuntime.OPTION_GAME_GLVIEW_TRANSPARENT, "true"); +~~~ +**说明：**背景设置为透明后，场景后面会有一个 EditText ，可以通过 +~~~ +((ViewGroup)gameEngineView).removeViewAt(0); +~~~ +去掉。保留这个控件是为了兼容2.X 的引擎，默认是存在的，如果使用3.0以上的引擎版本则可以去掉。 + +iOS: + +在 runGame 中为 _options 添加属性： +~~~ +_options[@OPTION_GAME_GLVIEW_TRANSPARENT] = @"true"; +~~~ + +## 设置游戏所在View在最顶层（Android） + +**适用于Android support 3.2.1及以上。** + +**功能：**修改游戏所在View的层级 + +**使用方法：**将获取 gameEngineView 的方法由 game_engine_get_view 改为 game_engine_get_view_set_top ，将游戏所在的 View 放到最顶层。 + + +## 获取原生设备的电池电量信息 + +**适用于Android/iOS support 3.1.4及以上。** + +**功能：**获取原生设备的电池电量信息。 + +**使用方法：** +```javascript +var json_listene = { action: "listenDeviceInfoChanged" }; +var jsonStr_listene = JSON.stringify(json_listene); +egret.ExternalInterface.call("egret.deviceInfo", jsonStr_listene); + +egret.ExternalInterface.addCallback("egret.deviceInfo", function (message) { + console.log("message form native : " + message); +}); +var json = { action: "getCurrentBatteryInfo" }; +var jsonStr = JSON.stringify(json); +egret.ExternalInterface.call("egret.deviceInfo", jsonStr); +``` + diff --git a/Native/support/native/other/p1.png b/Native/support/native/other/p1.png new file mode 100644 index 0000000..0e5194e Binary files /dev/null and b/Native/support/native/other/p1.png differ diff --git a/Native/support/publish/publishAndroid/README.md b/Native/support/publish/publishAndroid/README.md new file mode 100644 index 0000000..208938f --- /dev/null +++ b/Native/support/publish/publishAndroid/README.md @@ -0,0 +1,93 @@ +--- +id: publishAndroid.html +title: 打包 Android app +--- + +> 基于Android Studio 的 Android Support ,是用于创建Android Studio上的 Android 工程的模版。当前是预览版教程。 + +## Mac 打包 + +### 前期准备 +1.请使用 Android Studio 2.1.2 或者更高版本。（[下载](http://pan.baidu.com/s/1c2dV3xe)） + +2.请使用 JDK 1.8 或者更高版本。（[下载](http://pan.baidu.com/s/1c2dV3xe)） + +3.设置好环境变量 ANDROID_HOME + +1. cd ~/ +2. ls -a -l +3. 看上面的结果是否有.bash_profile这个文件，如果没有。请用 touch .bash_profile创建这个文件 +4. open .bash_profile 在文件里写入下列语句,自行替换成你自己的路径即可。例： +`export ANDROID_HOME=/Users/androidSDK/sdk` +6. 执行 source .bash_profile +7. echo $ANDROID_HOME 看能否输出对应的路径 + +注意： +1. 极个别情况下，要重启电脑之后才有效，我遇到过。 +2. 这个配置是以mac默认的shell执行环境的配置为蓝本，如果你使用的是其他的shell环境，请在对应的配置文件下修改，例如：使用zsh，就请修改 .zshrc + + +### 使用 +使用方式如下： + +`egret create_app HelloEgretAndroidAS -f HelloEgretH5 -t /Users/egret-android-support-3.2.0/egret-android-support-as-3.2.0` + +> egret-android-support-3.1.5 之后包含 `eclipse` 和 `Android Studio` 2 个版本项目，选择工具时一定要选到对应的项目。 +> 文件夹名称多了 ‘as’ 的为 `Android Studio` 工程，没有的是 `eclipse` 工程。 +> egret-android-support-3.1.4 之前版本只有 `eclipse` 工程，选主目录就行。 + +### 导入工程 +1.使用Android Studio导入生成的工程。Android Studio会检查项目配置等。可能会自动更新一些组件。需要点时间。 + +2.如果项目不匹配当前环境，Android Studio会一步一步给出更新和修正的提示。按照提示一步一步来更新和修正项目配置。Android StudiO不自动更新或者修正项目配置。请删除proj.android/grandle文件夹。然后再导入项目。根据提示，让Android Studio来重新配置和修正项目。 + + +3.设置工程使用的JDK版本。 + +![](p2.png) + +![](p1.png) + +4.一切准备完毕~可以运行和DEBUG了~。 + + +## Windows 打包 + +### 前期准备 +1.请使用 Android Studio 2.1.2 或者更高版本。（[下载](http://pan.baidu.com/s/1c2dV3xe")） + +2.请使用 JDK 1.8 或者更高版本。（[下载](http://pan.baidu.com/s/1c2dV3xe")） + +3.设置好环境变量 ANDROID_HOME + +![](p3.png) + +![](p5.png) + +然后“确定”“确定”“确定”。完成后，建议重启电脑。 + + +### 使用 +使用方式如下： + +`D:\egret-proje>egret create_app HelloEgretAndroidAS -f HelloEgretH5 -t D:\egret-android-support-3.2.0\egret-android-support-as-3.2.0\` + +> egret-android-support-3.1.5 之后包含 `eclipse` 和 `Android Studio` 2 个版本项目，选择工具时一定要选到对应的项目。 +> 文件夹名称多了 ‘as’ 的为 `Android Studio` 工程，没有的是 `eclipse` 工程。 +> egret-android-support-3.1.4 之前版本只有 `eclipse` 工程，选主目录就行。 + + +### 导入工程 +1.使用Android Studio导入生成的工程。Android Studio会检查项目配置等。可能会自动更新一些组件。需要点时间。 + +2.如果项目不匹配当前环境，Android Studio会一步一步给出更新和修正的提示。按照提示一步一步来更新和修正项目配置。Android StudiO不自动更新或者修正项目配置。请删除proj.android/grandle文件夹。然后再导入项目。根据提示，让Android Studio来重新配置和修正项目。 + + +3.设置工程使用的JDK版本。 + + +![](p6.png) + +![](p7.png) + +4.一切准备完毕~可以运行和DEBUG了~。 diff --git a/Native/support/publish/publishAndroid/p1.png b/Native/support/publish/publishAndroid/p1.png new file mode 100644 index 0000000..26c32c6 Binary files /dev/null and b/Native/support/publish/publishAndroid/p1.png differ diff --git a/Native/support/publish/publishAndroid/p2.png b/Native/support/publish/publishAndroid/p2.png new file mode 100644 index 0000000..d2ee843 Binary files /dev/null and b/Native/support/publish/publishAndroid/p2.png differ diff --git a/Native/support/publish/publishAndroid/p3.png b/Native/support/publish/publishAndroid/p3.png new file mode 100644 index 0000000..98471b5 Binary files /dev/null and b/Native/support/publish/publishAndroid/p3.png differ diff --git a/Native/support/publish/publishAndroid/p4.png b/Native/support/publish/publishAndroid/p4.png new file mode 100644 index 0000000..a76ce68 Binary files /dev/null and b/Native/support/publish/publishAndroid/p4.png differ diff --git a/Native/support/publish/publishAndroid/p5.png b/Native/support/publish/publishAndroid/p5.png new file mode 100644 index 0000000..f37650f Binary files /dev/null and b/Native/support/publish/publishAndroid/p5.png differ diff --git a/Native/support/publish/publishAndroid/p6.png b/Native/support/publish/publishAndroid/p6.png new file mode 100644 index 0000000..7087a35 Binary files /dev/null and b/Native/support/publish/publishAndroid/p6.png differ diff --git a/Native/support/publish/publishAndroid/p7.png b/Native/support/publish/publishAndroid/p7.png new file mode 100644 index 0000000..287efa5 Binary files /dev/null and b/Native/support/publish/publishAndroid/p7.png differ diff --git a/Native/support/publish/publishHTML5/README.md b/Native/support/publish/publishHTML5/README.md new file mode 100644 index 0000000..af8d4ff --- /dev/null +++ b/Native/support/publish/publishHTML5/README.md @@ -0,0 +1,17 @@ +## 流程 + +HTML5 发布相对比较简单。 + +1、点击菜单 “插件”-》“Egret 项目工具”-》“发布 Egret 项目”，会出现发布配置文件。 + +![](config.png) + +* 版本号，生成的目录文件夹名称，比如这里 v1。 +* 选择发布成的项目类型，这里选择 HTML5。 +* 是否合并图片资源。如果选中，则会自动合并项目里的图片。 + +2、点击确定后，会在项目的发布目录里生成对应“v1”版本的文件夹。 + +![](created.png) + +3、将发布完的文件夹放到服务器上，访问 index.html 即可。 \ No newline at end of file diff --git a/Native/support/publish/publishHTML5/config.png b/Native/support/publish/publishHTML5/config.png new file mode 100644 index 0000000..a5fb305 Binary files /dev/null and b/Native/support/publish/publishHTML5/config.png differ diff --git a/Native/support/publish/publishHTML5/created.png b/Native/support/publish/publishHTML5/created.png new file mode 100644 index 0000000..5365a04 Binary files /dev/null and b/Native/support/publish/publishHTML5/created.png differ diff --git a/Native/support/publish/publishIOS/56664988d7d76.png b/Native/support/publish/publishIOS/56664988d7d76.png new file mode 100644 index 0000000..b205bcd Binary files /dev/null and b/Native/support/publish/publishIOS/56664988d7d76.png differ diff --git a/Native/support/publish/publishIOS/566649891032b.png b/Native/support/publish/publishIOS/566649891032b.png new file mode 100644 index 0000000..ae5ea91 Binary files /dev/null and b/Native/support/publish/publishIOS/566649891032b.png differ diff --git a/Native/support/publish/publishIOS/566649892b54a.png b/Native/support/publish/publishIOS/566649892b54a.png new file mode 100644 index 0000000..2c7c965 Binary files /dev/null and b/Native/support/publish/publishIOS/566649892b54a.png differ diff --git a/Native/support/publish/publishIOS/5666498952fbd.png b/Native/support/publish/publishIOS/5666498952fbd.png new file mode 100644 index 0000000..31783a4 Binary files /dev/null and b/Native/support/publish/publishIOS/5666498952fbd.png differ diff --git a/Native/support/publish/publishIOS/56664989695f4.png b/Native/support/publish/publishIOS/56664989695f4.png new file mode 100644 index 0000000..96d51c7 Binary files /dev/null and b/Native/support/publish/publishIOS/56664989695f4.png differ diff --git a/Native/support/publish/publishIOS/566649898fba5.png b/Native/support/publish/publishIOS/566649898fba5.png new file mode 100644 index 0000000..5dae6ca Binary files /dev/null and b/Native/support/publish/publishIOS/566649898fba5.png differ diff --git a/Native/support/publish/publishIOS/56664989b625e.png b/Native/support/publish/publishIOS/56664989b625e.png new file mode 100644 index 0000000..4cecac1 Binary files /dev/null and b/Native/support/publish/publishIOS/56664989b625e.png differ diff --git a/Native/support/publish/publishIOS/56664989d5c4a.png b/Native/support/publish/publishIOS/56664989d5c4a.png new file mode 100644 index 0000000..02a7826 Binary files /dev/null and b/Native/support/publish/publishIOS/56664989d5c4a.png differ diff --git a/Native/support/publish/publishIOS/5666498a0f7f5.png b/Native/support/publish/publishIOS/5666498a0f7f5.png new file mode 100644 index 0000000..5c280bd Binary files /dev/null and b/Native/support/publish/publishIOS/5666498a0f7f5.png differ diff --git a/Native/support/publish/publishIOS/5666498a4f6be.png b/Native/support/publish/publishIOS/5666498a4f6be.png new file mode 100644 index 0000000..1f117db Binary files /dev/null and b/Native/support/publish/publishIOS/5666498a4f6be.png differ diff --git a/Native/support/publish/publishIOS/5666498a7cff0.png b/Native/support/publish/publishIOS/5666498a7cff0.png new file mode 100644 index 0000000..9162e4c Binary files /dev/null and b/Native/support/publish/publishIOS/5666498a7cff0.png differ diff --git a/Native/support/publish/publishIOS/5666498aa996b.png b/Native/support/publish/publishIOS/5666498aa996b.png new file mode 100644 index 0000000..480c92b Binary files /dev/null and b/Native/support/publish/publishIOS/5666498aa996b.png differ diff --git a/Native/support/publish/publishIOS/5666498ac908d.png b/Native/support/publish/publishIOS/5666498ac908d.png new file mode 100644 index 0000000..1a52907 Binary files /dev/null and b/Native/support/publish/publishIOS/5666498ac908d.png differ diff --git a/Native/support/publish/publishIOS/5666498ae5860.png b/Native/support/publish/publishIOS/5666498ae5860.png new file mode 100644 index 0000000..8778c42 Binary files /dev/null and b/Native/support/publish/publishIOS/5666498ae5860.png differ diff --git a/Native/support/publish/publishIOS/5666498b20f9b.png b/Native/support/publish/publishIOS/5666498b20f9b.png new file mode 100644 index 0000000..6e2e849 Binary files /dev/null and b/Native/support/publish/publishIOS/5666498b20f9b.png differ diff --git a/Native/support/publish/publishIOS/README.md b/Native/support/publish/publishIOS/README.md new file mode 100644 index 0000000..0e918c9 --- /dev/null +++ b/Native/support/publish/publishIOS/README.md @@ -0,0 +1,189 @@ +--- +id: publishIOS.html +title: 打包 iOS app +--- + +egret-ios-support是Egret打包为原生ios APP的方案，你可以使用egret-ios-support将你的HTML5游戏打包为ipa文件，并提供给用户安装。 + +具体使用方法如下： + +## 预备知识 + +为了顺利完成本教程，请确认您已熟练掌握以下知识： + +* 了解文件、文件夹的概念，以及创建，移动、复制、重命名和删除等知识。 + +* 了解终端、命令行、Shell其中之一，会启动她，并能通过命令行执行的方式完成上一条的相关操作 + +* 了解如何下载文件并解压缩文件 + +* 了解以下术语： + + * 编写游戏逻辑需要：JavaScript、TypeScript、nodejs、npm + + * 打包iOS App需要：Objective-C、C++、Xcode + +## 文档概述 + +本文会完整的展示如何在一个已经安装npm管理包的环境中全新安装Egret核心包、Egret的iOS支持包，最终在模拟机中运行Demo的过程。 + +本文分为三部分：第一部分为iOS开发环境的安装、第二部分为Egret游戏框架的安装、第三部分创建一个完整iOS App的示例。 + +## iOS开发环境安装 + +### 安装iOS开发环境——Xcode + +运行App Store，在搜索项查找“Xcode”，下载并安装即可 + +![](56664988d7d76.png) + +## 安装Egret游戏框架 + +### 预备知识 + +运行Mac OS X的Terimal应用：在Finder中打开Applications文件夹，再打开Utilities文件夹，找到Termial应用，双击运行。如下图： + +![](566649891032b.png) + +进入你的工作目录，在演示中，我们的的工作目录为“labs/”，工作目录为空文件夹，如下图： + +![](566649892b54a.png) + +![](5666498952fbd.png) + +接下来，为我们的游戏建立一个projects文件夹，运行 + +``` +$ mkdir projects +``` + +如下图： + +![](56664989695f4.png) + +![](566649898fba5.png) + + +### 下载Egret的iOS支持包 + +创建Egret Support文件夹 + +![](56664989b625e.png) + +*下载Egret ios支持包* + +下载[egret-ios-support](http://www.egret.com/downloads/ios.html)，将egret-ios-support放置在“labs/egret-support/”文件夹下，如下图： + +![](56664989d5c4a.png) + +## 创建一个iOS打包的示例 + +### 创建一个Egret项目 + +这里创建一个名称为`ACoolHtmlGame`的项目，使用命令如下： + +``` +$ egret create ACoolHtmlGame +``` + +如图： + +![](5666498a0f7f5.png) + +![](5666498a4f6be.png) + + +### 编写你的游戏项目 + +接下来要做的事情就是编写你的游戏项目逻辑。这里我们不进行操作，使用默认的项目来进行演示。 + +### 创建你的ios项目工程 + +#### 从你的HTML5游戏创建ios项目工程 + +回到我们的游戏工程文件夹“labs/projects/”下，我们通过一个新的命令来创建适用于ios的项目，该命令创建项目时，需要指定原有HTML5工程和你的egret-ios-support路径。命令如下： + +``` +$ cd projects/ +$ egret create_app ACoolIosGame -f ACoolHtmlGame -t ../egret-support/egret-ios-support +``` + +>`create_app`命令可用来创建适用于ios的项目工程。`ACoolIosGame`则是该工程的工程名。 + +`-f`参数则指定我们的HTML5游戏项目，我们直接将刚刚创建的HTML5项目路径填写进入即可。 + +`-t`参数则是ios项目工程的模板，我们需要指定“egret-ios-support”项目路径。 + +下图为运行命令演示： + +![](5666498a7cff0.png) + +运行命令后，你将看到新生成的ACooliosGame项目文件夹，该文件夹结构如下： + + +![](5666498aa996b.png) + +自此，我们已经创建了一个完整的ios工程，我们来看一下当前的文件层级： + +``` +labs/-+ + +-- egret-core/-+ # egret + +-- egret-support/-+ # egret 支持库 + | +-- egret-ios-support/ # ios支持 + +-- projects/-+ + | +-- ACoolIosGame # ios工程 + | +-- ACoolHtmlGame # html应用 + ... +``` + +### 编译iOS游戏 + +#### 导入项目 + +打开ACoolIosGame文件夹，双击“ACoolIosGame.xcodeproj”，等待Xcode加载完成 + +![](5666498ac908d.png) + +### 测试项目 + +点击Xcode的Run命令，直接进入iOS模拟器运行 + +![](5666498ae5860.png) + +下图为运行效果 + +![](5666498b20f9b.png) + +如需生成ipa包，请访问[苹果开发网站](http://developer.apple.com/)，注册开发者账号，阅读相关设置即可。 + +自此，完成了使用Egret实现一个iOS游戏应用的全过程。 + +### 项目开发的整体流程 + +我们推荐的开发方式：在原有的HTML5游戏项目中进行开发，开发测试ok，再编译到iOS平台。下面为大家演示一下流程： + +1、创建一个HTML5游戏： + +`egret create ACoolHtmlGame` + +2、创建对应的iOS游戏 + +`egret create_app ACoolIosGame -f ACoolHtmlGame -t ../egret-support/egret-ios-support` + +3、测试一下各个平台游戏 + +4、在ACoolHtmlGame中开发游戏，一个小步进的开发后，我们要开始编译我们的游戏并在浏览器上测试，这是使用 + +`egret build ACoolHtmlGame --runtime native -e` + +这行命令执行了两项任务：1.编译TypeScript到JavaScript，2.将编译出的文件同步到Xcode项目中。这里需要注意的有两点：1.编译的项目是*HTML5项目，2.不要更改iOS项目的位置*，项目位置的设置将在高级教程给出, 3.此时HTML5项目会失效，想查看HTML5项目，请使用 + +`egret build ACoolHtmlGame -e` + +来使得HTML5项目生效，此时iOS项目失效。 + +5、此时可以使用egret startserver ACoolHtmlGame 启动游戏服务，这样浏览器就能观察到实现的游戏逻辑了。 + +6、接下来回到ACoolIosGame的Xcode工程中，使用Xcode来清除、重新编译、调试项目，这样就可以在手机上得到和HTML项目的游戏逻辑了。 + +7、返回4，不断的迭代。 diff --git a/Native/support/updateAndroid/update200/README.md b/Native/support/updateAndroid/update200/README.md new file mode 100644 index 0000000..e73d251 --- /dev/null +++ b/Native/support/updateAndroid/update200/README.md @@ -0,0 +1,8 @@ +## 更新内容 + +* [新特性] 增加对Egret自有压缩纹理的支持。 +* [改进] 改进Graphics性能。 +* [改进] 改进RenderTexture的对显存的使用。 +* [修复] 修复RenderTexture的一个绘制异常。 +* [修复] 修复ColorTransform的一个BUG。 +* [修复] 修复其它若干BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update201/README.md b/Native/support/updateAndroid/update201/README.md new file mode 100644 index 0000000..856ac94 --- /dev/null +++ b/Native/support/updateAndroid/update201/README.md @@ -0,0 +1,7 @@ +## 更新内容 + +* [改进] 提升性能与稳定性 +* [重构] 重构网络模块。 +* [重构] 重构触摸响应模块。 +* [修复] 修复Download模块一个Bug。 +* [修复] 修复Nest模块一些BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update202/README.md b/Native/support/updateAndroid/update202/README.md new file mode 100644 index 0000000..856ac94 --- /dev/null +++ b/Native/support/updateAndroid/update202/README.md @@ -0,0 +1,7 @@ +## 更新内容 + +* [改进] 提升性能与稳定性 +* [重构] 重构网络模块。 +* [重构] 重构触摸响应模块。 +* [修复] 修复Download模块一个Bug。 +* [修复] 修复Nest模块一些BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update203/README.md b/Native/support/updateAndroid/update203/README.md new file mode 100644 index 0000000..0e0f465 --- /dev/null +++ b/Native/support/updateAndroid/update203/README.md @@ -0,0 +1,6 @@ +## 更新内容 + +* [新特性] 增加纹理显存的释放与重载功能。 +* [改进] 改进Nest模块。 +* [修复] 修复线程同步相关BUG。 +* [修复] 修复app resume时有可能出现图片载入异常的BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update204/README.md b/Native/support/updateAndroid/update204/README.md new file mode 100644 index 0000000..a42f9f9 --- /dev/null +++ b/Native/support/updateAndroid/update204/README.md @@ -0,0 +1,7 @@ +## 更新内容 + +* [新特性] 增加截图功能。 +* [新特性] 支持外设按键事件。 +* [改进] 增加稳定性。 +* [修复] 修复无法使用自定义字体的BUG。 +* [修复] 修复在没有设置字体的情况下，获取字体大小会Crash的BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update205/README.md b/Native/support/updateAndroid/update205/README.md new file mode 100644 index 0000000..a96cbcc --- /dev/null +++ b/Native/support/updateAndroid/update205/README.md @@ -0,0 +1,5 @@ +## 更新内容 + +* [改进] 增加稳定性。 +* [改进] 去掉无用代码。 +* [修复] 修复若干BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update250/README.md b/Native/support/updateAndroid/update250/README.md new file mode 100644 index 0000000..12e1bc3 --- /dev/null +++ b/Native/support/updateAndroid/update250/README.md @@ -0,0 +1,10 @@ +## 更新内容 + +* [新特性] 添加对Egret Engine v2.5.0的支持。 +* [改进] 增强稳定性。 +* [改进] 去掉无用代码。 +* [改进] 改进蒙版相关性能。 +* [修复] 修复声音相关BUG。 +* [修复] 修复蒙版相关BUG。 +* [新特性]添加对xml的运行时解析。 +* [改进]去掉无用代码。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update251/README.md b/Native/support/updateAndroid/update251/README.md new file mode 100644 index 0000000..e1328e6 --- /dev/null +++ b/Native/support/updateAndroid/update251/README.md @@ -0,0 +1,8 @@ +## 更新内容 + +* [新特性] 支持脏矩形。 +* [新特性] 添加getPixels接口。 +* [改进] 去掉无用代码。 +* [改进] 增强稳定性。 +* [修复] 修复带描边文字与H5上表现不一致的BUG。 +* [修复] 修复Catch as bitmap时有可能出现裁切异常的BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update254/README.md b/Native/support/updateAndroid/update254/README.md new file mode 100644 index 0000000..0980652 --- /dev/null +++ b/Native/support/updateAndroid/update254/README.md @@ -0,0 +1,9 @@ +## 更新内容 + +* [改进] 去掉无用代码。 +* [改进] 完善saveToFile,toDataUrl。 +* [改进] 增强脏矩形模式的稳定性。 +* [修复] 修复Canvas中Matrix相关BUG。 +* [修复] 修复Canvas不能正常显示文字的BUG。 +* [修复] 修复脏矩形模式下。遮罩相关BUG。 +* [修复] 修复一些内存溢出的问题。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update255/README.md b/Native/support/updateAndroid/update255/README.md new file mode 100644 index 0000000..9d21803 --- /dev/null +++ b/Native/support/updateAndroid/update255/README.md @@ -0,0 +1,4 @@ +## 更新内容 + +* [改进] 更改文字渲染方式。 +* [修复] 修复BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update256/README.md b/Native/support/updateAndroid/update256/README.md new file mode 100644 index 0000000..8327e0f --- /dev/null +++ b/Native/support/updateAndroid/update256/README.md @@ -0,0 +1,9 @@ +## 更新内容 + +* [新特性] 使用OpenSLES来实现声音模块。 +* [改进] 优化声音模块。 +* [改进] 文本输入框悬浮在弹出键盘上沿。 +* [改进] 提高绘制圆弧的精度。 +* [改进] 提高稳定性。 +* [修复] XML转换为JSON时，\t转换为一个空格字符。避免JSON解析错误。 +* [修复] 修复其它BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update257/README.md b/Native/support/updateAndroid/update257/README.md new file mode 100644 index 0000000..f362a86 --- /dev/null +++ b/Native/support/updateAndroid/update257/README.md @@ -0,0 +1,7 @@ +## 更新内容 + +* [新特性] 对arm64-v8,x86的支持。 +* [改进] 使用新版V8。 +* [改进] 提高图片加载速度。 +* [修复] 修复一些内存溢出的BUG。 +* [修复] 修复其它BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update300/README.md b/Native/support/updateAndroid/update300/README.md new file mode 100644 index 0000000..3fd0f01 --- /dev/null +++ b/Native/support/updateAndroid/update300/README.md @@ -0,0 +1,10 @@ +## 更新内容 + +* [改进] 提高文字渲染精度。 +* [改进] 提高稳定性。 +* [修复] 修复在android arm64-v8a 架构上的BUG。 +* [修复] 修复声音模块的BUG。 +* [修复] 修复对Android2.3.5不兼容的问题。 +* [修复] 修复JNI相关BUG。 +* [修复] 修复文字相关BUG。 +* [修复] 修复其它BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update301/README.md b/Native/support/updateAndroid/update301/README.md new file mode 100644 index 0000000..952a44c --- /dev/null +++ b/Native/support/updateAndroid/update301/README.md @@ -0,0 +1,7 @@ +## 更新内容 + +* [改进] 提高toDataURL处理速度。 +* [改进] 提高稳定性。 +* [修复] 修复ArrayBuffer相关BUG。 +* [修复] 修复绘制圆角矩形精度不够的问题。 +* [修复] 修复其它BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update302/README.md b/Native/support/updateAndroid/update302/README.md new file mode 100644 index 0000000..4cb2db5 --- /dev/null +++ b/Native/support/updateAndroid/update302/README.md @@ -0,0 +1,6 @@ +## 更新内容 + +* [重构] 重构声音模块。 +* [改进] 提高稳定性。 +* [修复] 修复声音模块“to many object”的问题。 +* [修复] 修复其它BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update303/README.md b/Native/support/updateAndroid/update303/README.md new file mode 100644 index 0000000..a4a5c5d --- /dev/null +++ b/Native/support/updateAndroid/update303/README.md @@ -0,0 +1,6 @@ +## 更新内容 + +* [改进] 提高稳定性。 +* [修复] 修复setTimeOut功能的相关BUG。 +* [修复] 修复字体描边功能相关BUG。 +* [修复] 修复用shape作为mask时显示异常的BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update304/README.md b/Native/support/updateAndroid/update304/README.md new file mode 100644 index 0000000..934e842 --- /dev/null +++ b/Native/support/updateAndroid/update304/README.md @@ -0,0 +1,6 @@ +## 更新内容 + +* [改进] 提高稳定性。 +* [改进] 字体性能提升。 +* [修复] 修复HTTP回调相关BUG。 +* [修复] 修复cacheAsBitmap有可能Crash的BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update305/README.md b/Native/support/updateAndroid/update305/README.md new file mode 100644 index 0000000..2fa03f4 --- /dev/null +++ b/Native/support/updateAndroid/update305/README.md @@ -0,0 +1,7 @@ +## 更新内容 + +* [改进] 提高稳定性。 +* [改进] 提高Besier曲线绘制精度。 +* [修复] 修复Mask相关BUG。 +* [修复] 修复onPromise非正常抛错。 +* [修复] 修复其它BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update306/README.md b/Native/support/updateAndroid/update306/README.md new file mode 100644 index 0000000..b48c268 --- /dev/null +++ b/Native/support/updateAndroid/update306/README.md @@ -0,0 +1,6 @@ +## 更新内容 + +* [注意] 此版本仅为了匹配Egret Engine 3.0的版本号，还未提供webgl支持。 +* [改进] 渲染模块纹理相关的性能提升。 +* [改进] 提高稳定性。 +* [修复] 修复其它BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update307/README.md b/Native/support/updateAndroid/update307/README.md new file mode 100644 index 0000000..b48c268 --- /dev/null +++ b/Native/support/updateAndroid/update307/README.md @@ -0,0 +1,6 @@ +## 更新内容 + +* [注意] 此版本仅为了匹配Egret Engine 3.0的版本号，还未提供webgl支持。 +* [改进] 渲染模块纹理相关的性能提升。 +* [改进] 提高稳定性。 +* [修复] 修复其它BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update308/README.md b/Native/support/updateAndroid/update308/README.md new file mode 100644 index 0000000..9d7ee9f --- /dev/null +++ b/Native/support/updateAndroid/update308/README.md @@ -0,0 +1,8 @@ +## 更新内容 + +* [注意] 此版本仅为了匹配Egret Engine 3.0的版本号，还未提供webgl支持。 +* [改进] 渲染模块字体相关的性能提升。 +* [改进] 提高稳定性。 +* [修复] 修复cacheAsBitmap时字体渲染错误以及透明度错误。 +* [修复] 修复纹理图片索引找不到时的容错处理。 +* [修复] 修复其它BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update310/README.md b/Native/support/updateAndroid/update310/README.md new file mode 100644 index 0000000..2c81d0a --- /dev/null +++ b/Native/support/updateAndroid/update310/README.md @@ -0,0 +1,3 @@ +## 更新内容 + +* [改进] 提高稳定性。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update311/README.md b/Native/support/updateAndroid/update311/README.md new file mode 100644 index 0000000..d272745 --- /dev/null +++ b/Native/support/updateAndroid/update311/README.md @@ -0,0 +1,6 @@ +## 更新内容 + +* [新特性] 支持 Video 播放； +* [改进] 提高稳定性； +* [修复] 修复声音模块在Android 6.0上的一些BUG； +* [修复] 修复其它BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update312/README.md b/Native/support/updateAndroid/update312/README.md new file mode 100644 index 0000000..2d1f760 --- /dev/null +++ b/Native/support/updateAndroid/update312/README.md @@ -0,0 +1,5 @@ +## 更新内容 + +* [改进] 新的文本输入方式； +* [改进] 提高稳定性； +* [修复] 修复其它BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update313/README.md b/Native/support/updateAndroid/update313/README.md new file mode 100644 index 0000000..6746d8a --- /dev/null +++ b/Native/support/updateAndroid/update313/README.md @@ -0,0 +1,5 @@ +## 更新内容 + +* [改进] 提高稳定性； +* [修复] EUI label 中替换文字造成奔溃； +* [修复] 修复其它BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update314/README.md b/Native/support/updateAndroid/update314/README.md new file mode 100644 index 0000000..69c2348 --- /dev/null +++ b/Native/support/updateAndroid/update314/README.md @@ -0,0 +1,5 @@ +## 更新内容 + +* [新特性] 获取原生设备的电池电量信息； +* [改进] 提高稳定性； +* [修复] 修复其它BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update315/README.md b/Native/support/updateAndroid/update315/README.md new file mode 100644 index 0000000..965c31f --- /dev/null +++ b/Native/support/updateAndroid/update315/README.md @@ -0,0 +1,5 @@ +## 更新内容 + +* [新特性] 最低支持 Android Level14； +* [改进] 提高稳定性； +* [修复] 修复其它BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update316/README.md b/Native/support/updateAndroid/update316/README.md new file mode 100644 index 0000000..27642bf --- /dev/null +++ b/Native/support/updateAndroid/update316/README.md @@ -0,0 +1,6 @@ +## 更新内容 + +* [修复] 修复输入框高度与行高不一致时，输入框位置错误的问题； +* [修复] 修复多个音效同时播放发生卡顿的问题； +* [改进] 提高稳定性； +* [修复] 修复其它BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update317/README.md b/Native/support/updateAndroid/update317/README.md new file mode 100644 index 0000000..ff40501 --- /dev/null +++ b/Native/support/updateAndroid/update317/README.md @@ -0,0 +1,10 @@ +## 更新内容 + +* [修复] 修复设置非法颜色值造成崩溃的问题； +* [修复] 修复播放声音导致游戏崩溃的问题 +* [修复] 修复不能在线加载音频的问题； +* [修复] 修复退出游戏后音频没有释放完全的问题； +* [新特性] 支持斜体文本； +* [新特性] 添加ColorTransform滤镜； +* [改进] 提高稳定性； +* [修复] 修复其它BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update318/README.md b/Native/support/updateAndroid/update318/README.md new file mode 100644 index 0000000..4e7a6fd --- /dev/null +++ b/Native/support/updateAndroid/update318/README.md @@ -0,0 +1,6 @@ +## 更新内容 + +* [修复] 修复输入框提示文字不会自动消失的问题； +* [修复] 修复播放声音引起的闪退问题； +* [改进] 提高稳定性； +* [修复] 修复其它BUG。 \ No newline at end of file diff --git a/Native/support/updateAndroid/update320/README.md b/Native/support/updateAndroid/update320/README.md new file mode 100644 index 0000000..9e3bab3 --- /dev/null +++ b/Native/support/updateAndroid/update320/README.md @@ -0,0 +1,14 @@ +## 更新内容 + +* [注意] 此版本添加了对渲染效率的优化，如果渲染时出现了异常请在引擎中关闭优化； +* [新特性] 支持渲染滤镜； +* [新特性] 支持渲染Mesh； +* [改进] 提高渲染效率； +* [改进] 提高稳定性； +* [修复] 修复部分机型中渲染默认字体时，文字位置向上偏移的问题； +* [修复] 修复第一次启动游戏一定会进行热更新的问题； +* [修复] 修复其它BUG。 + +### 下载地址 + +[http://tool.egret-labs.org/android-support/egret-android-support-3.2.0.zip](http://tool.egret-labs.org/android-support/egret-android-support-3.2.0.zip) \ No newline at end of file diff --git a/Native/support/updateAndroid/update321/README.md b/Native/support/updateAndroid/update321/README.md new file mode 100644 index 0000000..f2350b3 --- /dev/null +++ b/Native/support/updateAndroid/update321/README.md @@ -0,0 +1,12 @@ +## 更新内容 + +* [注意] 此版本添加了对渲染效率的优化，如果渲染时出现了异常请在引擎中关闭优化； +* [改进] 支持修改游戏所在的View的层级； +* [修复] 修复部分情况下渲染出错的问题； +* [修复] 修复部分机型中文字位置偏移的问题； +* [修复] 处理同时加载音频的数量过多的情况； +* [修复] 修复其它BUG。 + +### 下载地址 + +[http://tool.egret-labs.org/android-support/egret-android-support-3.2.1.zip](http://tool.egret-labs.org/android-support/egret-android-support-3.2.1.zip) \ No newline at end of file diff --git a/Native/support/updateAndroid/update322/README.md b/Native/support/updateAndroid/update322/README.md new file mode 100644 index 0000000..6b81ed0 --- /dev/null +++ b/Native/support/updateAndroid/update322/README.md @@ -0,0 +1,10 @@ +## 更新内容 + +* [修复] 修复部分情况下渲染出错的问题； +* [修复] 修复带有提示文字的输入框第一次输入时颜色显示不对的问题； +* [改进] 增加渲染效率优化的开关 +* [修复] 修复其它BUG。 + +### 下载地址 + +[http://tool.egret-labs.org/android-support/egret-android-support-3.2.2.zip](http://tool.egret-labs.org/android-support/egret-android-support-3.2.2.zip) \ No newline at end of file diff --git a/Native/support/updateAndroid/update323/README.md b/Native/support/updateAndroid/update323/README.md new file mode 100644 index 0000000..14c21c5 --- /dev/null +++ b/Native/support/updateAndroid/update323/README.md @@ -0,0 +1,11 @@ +## 更新内容 + +* [修复] 修复设置音量无效的问题； +* [修复] 修复多次主动停止音频造成部分音频不能播放的问题； +* [修复] 修复游戏在部分模拟器上闪退的问题； +* [修复] 修复输入框获得焦点时光标不在文本最后的问题； +* [修复] 修复其它BUG。 + +### 下载地址 + +[http://tool.egret-labs.org/android-support/egret-android-support-3.2.3.zip](http://tool.egret-labs.org/android-support/egret-android-support-3.2.3.zip) \ No newline at end of file diff --git a/Native/support/updateAndroid/update324/README.md b/Native/support/updateAndroid/update324/README.md new file mode 100644 index 0000000..fdbdea5 --- /dev/null +++ b/Native/support/updateAndroid/update324/README.md @@ -0,0 +1,15 @@ +## 更新内容 + +* [修复] 修复设置音频起始播放时间有时无效的问题； +* [修复] 修复部分滤镜表现错误的问题； +* [修复] 重写热更新的逻辑，考虑网络断开等情况； +* [修复] 修复部分场景下设置单行输入无效的问题； +* [新特性] 添加绘制纹理的效率优化开关； +* [新特性] 新增Splash功能，应用启动瞬间会显示一张图片，使用方式见 SplashActivity中的注释； +* [修复] 修复其它BUG。 + +> 此程序包中同时提供了基于Android Sutdio 和基于Eclipse 的 Egret Android Support，开发者下载后可自行选择。 + +### 下载地址 + +[http://tool.egret-labs.org/android-support/egret-android-support-3.2.4.zip](http://tool.egret-labs.org/android-support/egret-android-support-3.2.4.zip) \ No newline at end of file diff --git a/Native/support/updateAndroid/update325/README.md b/Native/support/updateAndroid/update325/README.md new file mode 100644 index 0000000..73ad60e --- /dev/null +++ b/Native/support/updateAndroid/update325/README.md @@ -0,0 +1,11 @@ +## 更新内容 + +* [修复] 修复3.2.4中出现的不进行热更新时不出现GameLoadingView的问题； +* [修复] 修复设置GLSurfaceView的层级之后，输入框被遮挡的问题； +* [修复] 修复其它BUG。 + +> 此程序包中同时提供了基于Android Sutdio 和基于Eclipse 的 Egret Android Support，开发者下载后可自行选择。 + +### 下载地址 + +[http://tool.egret-labs.org/android-support/egret-android-support-3.2.5.zip](http://tool.egret-labs.org/android-support/egret-android-support-3.2.5.zip) \ No newline at end of file diff --git a/Native/support/updateAndroid/update326/README.md b/Native/support/updateAndroid/update326/README.md new file mode 100644 index 0000000..10fa3f3 --- /dev/null +++ b/Native/support/updateAndroid/update326/README.md @@ -0,0 +1,13 @@ +## 更新内容 + +* [改进] 增加自定义热更新的模版； +* [改进] https请求不再需要验证证书； +* [修复] 修复热更新失败后不能再次启动的问题； +* [修复] 修复启动本地zip游戏包不会出现GameLoadingView的问题； +* [修复] 修复其它BUG。 + +> 此程序包中同时提供了基于Android Sutdio 和基于Eclipse 的 Egret Android Support，开发者下载后可自行选择。 + +### 下载地址 + +[http://tool.egret-labs.org/android-support/egret-android-support-3.2.6.zip](http://tool.egret-labs.org/android-support/egret-android-support-3.2.6.zip) \ No newline at end of file diff --git a/Native/support/updateAndroid/update400/README.md b/Native/support/updateAndroid/update400/README.md new file mode 100644 index 0000000..454fbaa --- /dev/null +++ b/Native/support/updateAndroid/update400/README.md @@ -0,0 +1,12 @@ +## 更新内容 + +* [新特性] 添加对wss的支持； +* [修复] 修改自定义热更新的模版，默认以旧版本的方式启动； +* [修复] 修复热更新失败后仍然会更新版本信息的问题； +* [修复] 修复其它BUG。 + +> 此程序包中同时提供了基于Android Sutdio 和基于Eclipse 的 Egret Android Support，开发者下载后可自行选择。 + +### 下载地址 + +[http://tool.egret-labs.org/android-support/egret-android-support-4.0.0.zip](http://tool.egret-labs.org/android-support/egret-android-support-4.0.0.zip) \ No newline at end of file diff --git a/Native/support/updateAndroid/update401/README.md b/Native/support/updateAndroid/update401/README.md new file mode 100644 index 0000000..b705ec2 --- /dev/null +++ b/Native/support/updateAndroid/update401/README.md @@ -0,0 +1,16 @@ +## 更新内容 + +* [新特性] 提供图片选择器功能（使用方法请参考开发者中心的相关文档）； +* [新特性] 支持将ArrayBuffer或Base64转换为贴图（使用方法请参考开发者中心的相关文档）； +* [修复] 修复开启CmdBatch之后部分场景矢量图设置透明度无效的问题； +* [修复] 修复热更新相关的问题； +* [修复] 修复部分机型下滤镜shader不能编译的问题； +* [修复] 修复输入框在开始编辑前可能被键盘遮挡的问题； +* [修复] 修复4.0.0中出现的WebSocket不能连接非默认端口的问题； +* [修复] 修复其它BUG。 + +> 此程序包中同时提供了基于Android Sutdio 和基于Eclipse 的 Egret Android Support，开发者下载后可自行选择。 + +### 下载地址 + +[http://tool.egret-labs.org/android-support/egret-android-support-4.0.1.zip](http://tool.egret-labs.org/android-support/egret-android-support-4.0.1.zip) \ No newline at end of file diff --git a/Native/support/updateAndroid/update402/README.md b/Native/support/updateAndroid/update402/README.md new file mode 100644 index 0000000..333f888 --- /dev/null +++ b/Native/support/updateAndroid/update402/README.md @@ -0,0 +1,13 @@ +## 更新内容 + +* [修复] 修复在几个输入框之间频繁切换可能导致闪退的问题； +* [修复] 修复开启滤镜在部分机型上闪退的问题； +* [修复] 修复部分小体积的音频可能导致闪退的问题； +* [修复] 修复在部分分辨率下输入框表现不对的问题； +* [修复] 修复其它BUG。 + +> 此程序包中同时提供了基于Android Sutdio 和基于Eclipse 的 Egret Android Support，开发者下载后可自行选择。 + +### 下载地址 + +[http://tool.egret-labs.org/android-support/egret-android-support-4.0.2.zip](http://tool.egret-labs.org/android-support/egret-android-support-4.0.2.zip) \ No newline at end of file diff --git a/Native/support/updateAndroid/update403/README.md b/Native/support/updateAndroid/update403/README.md new file mode 100644 index 0000000..d25f4c8 --- /dev/null +++ b/Native/support/updateAndroid/update403/README.md @@ -0,0 +1,10 @@ +## 更新内容 + +* [修复] 修复drawToTexture接口保存的图片在部分情况下渲染出错的问题； +* [修复] 修复其它BUG。 + +> 此程序包中同时提供了基于Android Sutdio 和基于Eclipse 的 Egret Android Support，开发者下载后可自行选择。 + +### 下载地址 + +[http://tool.egret-labs.org/android-support/egret-android-support-4.0.3.zip](http://tool.egret-labs.org/android-support/egret-android-support-4.0.3.zip) \ No newline at end of file diff --git a/Native/support/updateAndroid/update410/README.md b/Native/support/updateAndroid/update410/README.md new file mode 100644 index 0000000..23ff220 --- /dev/null +++ b/Native/support/updateAndroid/update410/README.md @@ -0,0 +1,10 @@ +## 更新内容 + +* [修复] 修复播放声音引起卡顿和闪退的问题； +* [修复] 修复设置背景透明无效的问题； +* [修复] 修复开启优化后部分场景渲染出错的问题； +* [修复] 修复其它BUG。 + +### 下载地址 + +[http://tool.egret-labs.org/android-support/egret-android-support-4.1.0.zip](http://tool.egret-labs.org/android-support/egret-android-support-4.1.0.zip) \ No newline at end of file diff --git a/Native/support/updateAndroid/update501/README.md b/Native/support/updateAndroid/update501/README.md new file mode 100644 index 0000000..00407cc --- /dev/null +++ b/Native/support/updateAndroid/update501/README.md @@ -0,0 +1,10 @@ +## 更新内容 + +* [修复] 修复播放短音频可能会重复播放的问题； +* [修复] 修复进入后台可能会导致音频不能播放的问题； +* [修复] 修复drawToTexture可能渲染出错的问题； +* [修复] 修复其它BUG。 + +### 下载地址 + +[http://tool.egret-labs.org/android-support/egret-android-support-5.0.1.zip](http://tool.egret-labs.org/android-support/egret-android-support-5.0.1.zip) \ No newline at end of file diff --git a/Native/support/updateAndroid/update5012/README.md b/Native/support/updateAndroid/update5012/README.md new file mode 100644 index 0000000..2b73b82 --- /dev/null +++ b/Native/support/updateAndroid/update5012/README.md @@ -0,0 +1,8 @@ +## 更新内容 + +* [修复] 修复部分华为机型不显示mesh的问题； +* [修复] 修复其它BUG。 + +### 下载地址 + +[http://tool.egret-labs.org/android-support/egret-android-support-5.0.12.zip](http://tool.egret-labs.org/android-support/egret-android-support-5.0.12.zip) \ No newline at end of file diff --git a/Native/support/updateAndroid/update503/README.md b/Native/support/updateAndroid/update503/README.md new file mode 100644 index 0000000..9d5fef5 --- /dev/null +++ b/Native/support/updateAndroid/update503/README.md @@ -0,0 +1,7 @@ +## 更新内容 + +* [修复] 修复不能正确获取当前播放时间的问题； +* [修复] 修复其它BUG。 +### 下载地址 + +[http://tool.egret-labs.org/android-support/egret-android-support-5.0.3.zip](http://tool.egret-labs.org/android-support/egret-android-support-5.0.3.zip) \ No newline at end of file diff --git a/Native/support/updateAndroid/update505/README.md b/Native/support/updateAndroid/update505/README.md new file mode 100644 index 0000000..17fe6de --- /dev/null +++ b/Native/support/updateAndroid/update505/README.md @@ -0,0 +1,10 @@ +## 更新内容 + +* [修复] 修复5.*系统的中文字体明显向下偏移的问题； +* [修复] 修复连续调用egret.getOption可能引起闪退的问题； +* [修复] 修复5.0.3中出现的非第一次启动有概率闪退的问题； +* [修复] 修复其它BUG。 + +### 下载地址 + +[http://tool.egret-labs.org/android-support/egret-android-support-5.0.5.zip](http://tool.egret-labs.org/android-support/egret-android-support-5.0.5.zip) \ No newline at end of file diff --git a/Native/support/updateAndroid/update506/README.md b/Native/support/updateAndroid/update506/README.md new file mode 100644 index 0000000..b068867 --- /dev/null +++ b/Native/support/updateAndroid/update506/README.md @@ -0,0 +1,9 @@ +## 更新内容 + +* [修复] 修复颜色矩阵滤镜渲染错误的问题； +* [修复] 修复LoadingView显示滞后的问题； +* [修复] 修复其它BUG。 + +### 下载地址 + +[http://tool.egret-labs.org/android-support/egret-android-support-5.0.6.zip](http://tool.egret-labs.org/android-support/egret-android-support-5.0.6.zip) \ No newline at end of file diff --git a/Native/support/updateAndroid/update507/README.md b/Native/support/updateAndroid/update507/README.md new file mode 100644 index 0000000..95fb377 --- /dev/null +++ b/Native/support/updateAndroid/update507/README.md @@ -0,0 +1,11 @@ +## 更新内容 + +* [修复] 修复game\_engine\_onStop后部分变量没有释放的问题； +* [修复] 修复5.0.6中出现的颜色矩阵滤镜alpha值错误的问题； +* [修复] 修复同时播放的音频数量超过32个时，进入后台闪退的问题； +* [修复] 修复进入后台时手动暂停音频，恢复后闪退的问题； +* [修复] 修复其它BUG。 + +### 下载地址 + +[http://tool.egret-labs.org/android-support/egret-android-support-5.0.7.zip](http://tool.egret-labs.org/android-support/egret-android-support-5.0.7.zip) \ No newline at end of file diff --git a/Native/support/updateAndroid/update508/README.md b/Native/support/updateAndroid/update508/README.md new file mode 100644 index 0000000..8d0eb3c --- /dev/null +++ b/Native/support/updateAndroid/update508/README.md @@ -0,0 +1,10 @@ +## 更新内容 + +* [修复] 修复输入框光标不能移动的问题； +* [修复] webSocket支持设置protocols； +* [修复] console.log等方法支持多个参数； +* [修复] 修复其它BUG。 + +### 下载地址 + +[http://tool.egret-labs.org/android-support/egret-android-support-5.0.8.zip](http://tool.egret-labs.org/android-support/egret-android-support-5.0.8.zip) \ No newline at end of file diff --git a/Native/support/updateAndroid/update509/README.md b/Native/support/updateAndroid/update509/README.md new file mode 100644 index 0000000..4e08c29 --- /dev/null +++ b/Native/support/updateAndroid/update509/README.md @@ -0,0 +1,8 @@ +## 更新内容 + +* [修复] 优化WebSocket，解决锁屏时部分webSocket连接断开但是不能收到onClose事件的问题； +* [修复] 修复其它BUG。 + +### 下载地址 + +[http://tool.egret-labs.org/android-support/egret-android-support-5.0.9.zip](http://tool.egret-labs.org/android-support/egret-android-support-5.0.9.zip) \ No newline at end of file diff --git a/Native/support/updateiOS/update200/README.md b/Native/support/updateiOS/update200/README.md new file mode 100644 index 0000000..9721920 --- /dev/null +++ b/Native/support/updateiOS/update200/README.md @@ -0,0 +1,14 @@ + +## 更新内容 + +* [新特性] 支持WebSocket TypedArray流传输 +* [新特性] 支持游戏包加密 +* [新特性] 支持网络设置文件启动游戏 +* [新特性] 支持游戏设置项读取和保存 +* [更新] 使用新的JavaScriptCore框架 +* [更新] 使用新的Graphics接口 +* [更新] 使用新的Math库 +* [修复] iOS7上，旧的JavaScriptCore不支持TypedArray的问题 +* [修复] 按HOME键小概率崩溃 +* [修复] 应用重新进入前台时播放音乐的bug +* [修复] 输入文字bug \ No newline at end of file diff --git a/Native/support/updateiOS/update201/README.md b/Native/support/updateiOS/update201/README.md new file mode 100644 index 0000000..d6cf3b4 --- /dev/null +++ b/Native/support/updateiOS/update201/README.md @@ -0,0 +1,5 @@ +## 更新内容 + +* [新特性] 支持iOS 8.4 +* [修复] 加载加密游戏包错误 +* [修复] 进入后台崩溃问题 \ No newline at end of file diff --git a/Native/support/updateiOS/update202/README.md b/Native/support/updateiOS/update202/README.md new file mode 100644 index 0000000..c365893 --- /dev/null +++ b/Native/support/updateiOS/update202/README.md @@ -0,0 +1,13 @@ +## 更新内容 + +* [新特性] 支持WebSocket TypedArray流传输 +* [新特性] 支持游戏包加密 +* [新特性] 支持网络设置文件启动游戏 +* [新特性] 支持游戏设置项读取和保存 +* [新特性] 支持iOS 8.4 +* [更新] 使用新的JavaScriptCore框架 +* [更新] 使用新的Graphics接口 +* [更新] 使用新的Math库 +* [更新] 使用新的项目模版 +* [修复] 进入后台崩溃问题 +* [修复] 输入文字bug \ No newline at end of file diff --git a/Native/support/updateiOS/update203/README.md b/Native/support/updateiOS/update203/README.md new file mode 100644 index 0000000..836a7f9 --- /dev/null +++ b/Native/support/updateiOS/update203/README.md @@ -0,0 +1,4 @@ +## 更新内容 + +* [修复] 包含了错误的库文件 +* [修复] 若干bug，提高稳定性 \ No newline at end of file diff --git a/Native/support/updateiOS/update204/README.md b/Native/support/updateiOS/update204/README.md new file mode 100644 index 0000000..5ca2915 --- /dev/null +++ b/Native/support/updateiOS/update204/README.md @@ -0,0 +1,5 @@ +## 更新内容 + +* [新特性] 增加内购模块 +* [更新] 更新模版 +* [修复] 若干bug，提高稳定性 diff --git a/Native/support/updateiOS/update251/README.md b/Native/support/updateiOS/update251/README.md new file mode 100644 index 0000000..e486c7f --- /dev/null +++ b/Native/support/updateiOS/update251/README.md @@ -0,0 +1,9 @@ +## 更新内容 + +* [新特性] 添加对Egret Engine v2.5的支持。 +* [新特性] 添加对iOS 9的支持。 +* [新特性] 添加对xml的运行时解析。 +* [新特性] 添加Nest支持 +* [修复] 修复生命周期造成的crash +* [修复] 修复localStorage相关BUG。 +* [改进] 增强稳定性。 \ No newline at end of file diff --git a/Native/support/updateiOS/update254/README.md b/Native/support/updateiOS/update254/README.md new file mode 100644 index 0000000..55af457 --- /dev/null +++ b/Native/support/updateiOS/update254/README.md @@ -0,0 +1,8 @@ +## 更新内容 + +* [新特性] 支持RenderTexture截图 +* [新特性] 添加对Egret Engine v2.5.4的支持 +* [修复] 修复更新游戏版本的bug +* [修复] 修复一些矩阵运算的bug +* [修复] 修复一些Graphics错误 +* [修复] 增强稳定性 \ No newline at end of file diff --git a/Native/support/updateiOS/update255/README.md b/Native/support/updateiOS/update255/README.md new file mode 100644 index 0000000..f609205 --- /dev/null +++ b/Native/support/updateiOS/update255/README.md @@ -0,0 +1,5 @@ +## 更新内容 + +* [新特性] 新的输入框 +* [修复] 修复对过大RenderTexture截图错误 +* [修复] 增强稳定性 \ No newline at end of file diff --git a/Native/support/updateiOS/update256/README.md b/Native/support/updateiOS/update256/README.md new file mode 100644 index 0000000..b64dfb6 --- /dev/null +++ b/Native/support/updateiOS/update256/README.md @@ -0,0 +1,6 @@ +## 更新内容 + +* [新特性] 加入多行输入框 +* [新特性] 加入进度条模块 +* [改进] 改进View的管理方式 +* [修复] 增强稳定性 \ No newline at end of file diff --git a/Native/support/updateiOS/update257/README.md b/Native/support/updateiOS/update257/README.md new file mode 100644 index 0000000..c952d77 --- /dev/null +++ b/Native/support/updateiOS/update257/README.md @@ -0,0 +1,8 @@ +## 更新内容 + +* 【新特性] 添加对iOS 9.2的支持 +* 【新特性] 新增Http请求的响应头回调 +* 【改进] 重写Http请求 +* 【修复] 修复输入框无法显示键盘的bug +* 【修复] 修复画圆的错误 +* 【修复] 增强稳定性 diff --git a/Native/support/updateiOS/update300/README.md b/Native/support/updateiOS/update300/README.md new file mode 100644 index 0000000..ca8a305 --- /dev/null +++ b/Native/support/updateiOS/update300/README.md @@ -0,0 +1,7 @@ +## 更新内容 + +* [新特性] 添加定时器接口 +* [新特性] 添加Http POST请求发送ArrayBuffer数据 +* [改进] 重构ViewController模版 +* [修复] 修复字体错误 +* [修复] 增强稳定性修复 \ No newline at end of file diff --git a/Native/support/updateiOS/update301/README.md b/Native/support/updateiOS/update301/README.md new file mode 100644 index 0000000..dd3c2e2 --- /dev/null +++ b/Native/support/updateiOS/update301/README.md @@ -0,0 +1,7 @@ +## 更新内容 + +* [注意] 注意：此版本仅为了匹配Egret Engine 3.0的版本号，还未提供webgl支持。 +* [修复] 修复字体越界crash +* [修复] 修复不能正确显示系统字体的bug +* [修复] 修复不能正确下载保存以“http”开头的文件 +* [修复] 增强稳定性修复 \ No newline at end of file diff --git a/Native/support/updateiOS/update303/README.md b/Native/support/updateiOS/update303/README.md new file mode 100644 index 0000000..400a870 --- /dev/null +++ b/Native/support/updateiOS/update303/README.md @@ -0,0 +1,7 @@ +## 更新内容 + +* [注意] 注意：此版本仅为了匹配Egret Engine 3.0的版本号，还未提供webgl支持。 +* [修复] 修复setTimeOut功能的相关BUG +* [修复] 修复系统字体描边功能相关BUG。 +* [修复] 修复用shape作为mask时显示异常的BUG。 +* [修复] 增强稳定性修复 \ No newline at end of file diff --git a/Native/support/updateiOS/update304/README.md b/Native/support/updateiOS/update304/README.md new file mode 100644 index 0000000..5d1aa18 --- /dev/null +++ b/Native/support/updateiOS/update304/README.md @@ -0,0 +1,7 @@ +## 更新内容 + +* [修复] 修复ios打包发布卡住的bug。 +* [修复] 修复系统字体描边,保持和H5版本一致。 +* [修复] 字体性能提升。 +* [修复] 修复cache as bitmap可能Crash的BUG. +* [修复] 增强稳定性修复 \ No newline at end of file diff --git a/Native/support/updateiOS/update305/README.md b/Native/support/updateiOS/update305/README.md new file mode 100644 index 0000000..91d1c7a --- /dev/null +++ b/Native/support/updateiOS/update305/README.md @@ -0,0 +1,7 @@ +## 更新内容 + +* [改进] 提高稳定性。 +* [改进] 提高Besier曲线绘制精度。 +* [修复] 修复Mask相关BUG。 +* [修复] 修复onPromise非正常抛错。 +* [修复] 修复其它BUG \ No newline at end of file diff --git a/Native/support/updateiOS/update306/README.md b/Native/support/updateiOS/update306/README.md new file mode 100644 index 0000000..d74fac1 --- /dev/null +++ b/Native/support/updateiOS/update306/README.md @@ -0,0 +1,7 @@ +## 更新内容 + +* [新特性] 增加ProgressViewDelegate的协议接口。 +* [新特性] GameOption里增加背景色OPTION_GAME_BACKGROUND的选项。 +* [改进] 矢量绘图画线stroke的抗锯齿。 +* [改进] 提高稳定性。 +* [修复] 修复其它BUG \ No newline at end of file diff --git a/Native/support/updateiOS/update307/README.md b/Native/support/updateiOS/update307/README.md new file mode 100644 index 0000000..b48c268 --- /dev/null +++ b/Native/support/updateiOS/update307/README.md @@ -0,0 +1,6 @@ +## 更新内容 + +* [注意] 此版本仅为了匹配Egret Engine 3.0的版本号，还未提供webgl支持。 +* [改进] 渲染模块纹理相关的性能提升。 +* [改进] 提高稳定性。 +* [修复] 修复其它BUG。 \ No newline at end of file diff --git a/Native/support/updateiOS/update308/README.md b/Native/support/updateiOS/update308/README.md new file mode 100644 index 0000000..607921e --- /dev/null +++ b/Native/support/updateiOS/update308/README.md @@ -0,0 +1,8 @@ +## 更新内容 + +* [注意] 此版本仅为了匹配Egret Engine 3.0的版本号，还未提供webgl支持。 +* [修复] 修复cacheAsBitmap时字体渲染错误以及透明度错误。 +* [修复] 修复纹理图片索引找不到时的容错处理。 +* [修复] ios support的egretRoot文件目录不再备份到iCloud。 +* [改进] 渲染模块字体相关的性能提升。 +* [改进] 提高稳定性。 \ No newline at end of file diff --git a/Native/support/updateiOS/update310/README.md b/Native/support/updateiOS/update310/README.md new file mode 100644 index 0000000..44948cb --- /dev/null +++ b/Native/support/updateiOS/update310/README.md @@ -0,0 +1,4 @@ +## 更新内容 + +* [修复] 修复ios support在iOS7下不能横屏的bug。 +* [改进] 提高稳定性。 \ No newline at end of file diff --git a/Native/support/updateiOS/update311/README.md b/Native/support/updateiOS/update311/README.md new file mode 100644 index 0000000..2c81d0a --- /dev/null +++ b/Native/support/updateiOS/update311/README.md @@ -0,0 +1,3 @@ +## 更新内容 + +* [改进] 提高稳定性。 \ No newline at end of file diff --git a/Native/support/updateiOS/update312/README.md b/Native/support/updateiOS/update312/README.md new file mode 100644 index 0000000..6594fb0 --- /dev/null +++ b/Native/support/updateiOS/update312/README.md @@ -0,0 +1,6 @@ +## 更新内容 + +* [改进] iOS新的文本输入方式； +* [改进] 支持在egret游戏的网络zip包发布模式下解析自定义参数； +* [修复] 修复在egret游戏的网络zip包发布模式下进不了游戏的bug； +* [改进] 提高稳定性。 \ No newline at end of file diff --git a/Native/support/updateiOS/update313/README.md b/Native/support/updateiOS/update313/README.md new file mode 100644 index 0000000..69a0e1c --- /dev/null +++ b/Native/support/updateiOS/update313/README.md @@ -0,0 +1,7 @@ +## 更新内容 + +* [新特性] 支持本地和网络远程视频播放； +* [新特性] 支持IPv6网络； +* [改进] 支持egret自定义加载进度条； +* [修复] EUI label 中替换文字造成的崩溃； +* [改进] 提高稳定性。 \ No newline at end of file diff --git a/Native/support/updateiOS/update314/README.md b/Native/support/updateiOS/update314/README.md new file mode 100644 index 0000000..2d63363 --- /dev/null +++ b/Native/support/updateiOS/update314/README.md @@ -0,0 +1,6 @@ +## 更新内容 + +* [新特性] 获取原生设备的电池电量信息； +* [修复] 修复iOS下场景有缩放时输入框位置偏移的问题； +* [修复] 修复iOS输入框中的提示文字不能正常消失的问题； +* [改进] 提高稳定性。 diff --git a/Native/support/updateiOS/update315/README.md b/Native/support/updateiOS/update315/README.md new file mode 100644 index 0000000..9983115 --- /dev/null +++ b/Native/support/updateiOS/update315/README.md @@ -0,0 +1,7 @@ +## 更新内容 + +* [修复] iOS输入框可以限制在输入过程中的长度； +* [修复] iOS声音机制和Android保持一致，补全声音事件的绑定接口； +* [修复] iOS下非retina屏幕输入框位置错误的问题； +* [修复] iOS UIView切换崩溃的问题； +* [改进] 提高稳定性。 \ No newline at end of file diff --git a/Native/support/updateiOS/update316/README.md b/Native/support/updateiOS/update316/README.md new file mode 100644 index 0000000..2d99242 --- /dev/null +++ b/Native/support/updateiOS/update316/README.md @@ -0,0 +1,5 @@ +## 更新内容 + +* [修复] 修复多个音效同时播放发生卡顿的问题； +* [改进] 比对文件时不显示进度条； +* [改进] 提高稳定性。 \ No newline at end of file diff --git a/Native/support/updateiOS/update317/README.md b/Native/support/updateiOS/update317/README.md new file mode 100644 index 0000000..92cca06 --- /dev/null +++ b/Native/support/updateiOS/update317/README.md @@ -0,0 +1,19 @@ +## 更新内容 + +* [修复] 修复设置非法颜色值造成游戏崩溃的问题； +* [修复] 解决首次启动游戏一定会进行热更新的问题； +* [修复] 修复字体描边颜色显示异常的问题； +* [修复] 补全声音播放事件； +* [修复] 修复不能在播放过程中修改音量的问题； +* [新特性] 支持斜体文本； +* [新特性] 添加ColorTransform滤镜； +* [改进] 比对热更新文件时不再显示进度条； +* [改进] 热更新地址不存在时启动最后一次更新的游戏包； +* [改进] 提高稳定性。 + + 将下面这的语句放在rungame函数下可以解决首次启动一定会进行热更新的问题： + + ~~~ +//设置忽略的热更新版本地址，如果监测到当前热更新游戏包和设置的一样，就直接启动本地的游戏包。用于避免首次启动游戏一定会进行热更新的问题。 +[EgretRuntime getInstance] setIgnoreVersion:(@"http://127.0.0.1/test/egret-game_XXX.zip")]; +~~~ \ No newline at end of file diff --git a/Native/support/updateiOS/update318/README.md b/Native/support/updateiOS/update318/README.md new file mode 100644 index 0000000..92b5724 --- /dev/null +++ b/Native/support/updateiOS/update318/README.md @@ -0,0 +1,5 @@ +## 更新内容 + +* [修复] 修复声音停止后不能再次播放的问题； +* [改进] 热更新时自动对比本地游戏包名； +* [改进] 提高稳定性。 \ No newline at end of file diff --git a/Native/support/updateiOS/update320/README.md b/Native/support/updateiOS/update320/README.md new file mode 100644 index 0000000..1945483 --- /dev/null +++ b/Native/support/updateiOS/update320/README.md @@ -0,0 +1,19 @@ +## 更新内容 + +* [注意] 此版本添加了对渲染效率的优化，如果渲染时出现了异常请在引擎中关闭优化； +* [新特性] 支持渲染滤镜； +* [新特性] 支持渲染Mesh； +* [改进] 提高渲染效率； +* [改进] 提高稳定性。 + + 关闭优化方法： + + ~~~ +/* egret.native.js */ +// native.$supportCmdBatch = egret_native.sendToC ? true : false; +native.$supportCmdBatch = false; +~~~ + +### 下载地址 + +[http://tool.egret-labs.org/ios-support/egret-ios-support-3.2.0.zip](http://tool.egret-labs.org/ios-support/egret-ios-support-3.2.0.zip) \ No newline at end of file diff --git a/Native/support/updateiOS/update321/README.md b/Native/support/updateiOS/update321/README.md new file mode 100644 index 0000000..ad4382d --- /dev/null +++ b/Native/support/updateiOS/update321/README.md @@ -0,0 +1,20 @@ +## 更新内容 + +* [注意] 此版本添加了对渲染效率的优化，如果渲染时出现了异常请在引擎中关闭优化； +* [修复] 修复部分情况下渲染出错的问题； +* [修复] 修复从后台恢复时背景音乐没有继续播放的问题； +* [修复] 修复设置音频播放起始时间有延迟的问题； +* [改进] 提高稳定性。 + + + 关闭优化方法： + + ~~~ +/* native_require.js */ +egret_native.egretInit = function () { + egret_native.sendToC = null; // 添加这句话 +~~~ + +### 下载地址 + +[http://tool.egret-labs.org/ios-support/egret-ios-support-3.2.1.zip](http://tool.egret-labs.org/ios-support/egret-ios-support-3.2.1.zip) \ No newline at end of file diff --git a/Native/support/updateiOS/update322/README.md b/Native/support/updateiOS/update322/README.md new file mode 100644 index 0000000..9e9d049 --- /dev/null +++ b/Native/support/updateiOS/update322/README.md @@ -0,0 +1,13 @@ +## 更新内容 + +* [修复] 修复部分情况下渲染出错的问题； +* [修复] 修复3.2.1中出现的部分音频播放造成游戏卡顿的问题； +* [修复] 修复带有提示文字的输入框在编辑时文字不能正常显示的问题； +* [修复] 修复输入框不支持设置布局的问题； +* [改进] 增加渲染效率优化的开关(参考 [原生支持](http://developer.egret.com/cn/github/egret-docs/Engine2D/native/other/index.html))； +* [改进] 找不到热更新地址时启动最后一次更新的游戏包； +* [改进] 提高稳定性。 + +### 下载地址 + +[http://tool.egret-labs.org/ios-support/egret-ios-support-3.2.2.zip](http://tool.egret-labs.org/ios-support/egret-ios-support-3.2.2.zip) \ No newline at end of file diff --git a/Native/support/updateiOS/update323/README.md b/Native/support/updateiOS/update323/README.md new file mode 100644 index 0000000..64ede48 --- /dev/null +++ b/Native/support/updateiOS/update323/README.md @@ -0,0 +1,8 @@ +## 更新内容 + +* [修复] 在关闭cmdBatch的情况下支持渲染滤镜； +* [改进] 提高稳定性。 + +### 下载地址 + +[http://tool.egret-labs.org/ios-support/egret-ios-support-3.2.3.zip](http://tool.egret-labs.org/ios-support/egret-ios-support-3.2.3.zip) \ No newline at end of file diff --git a/Native/support/updateiOS/update324/README.md b/Native/support/updateiOS/update324/README.md new file mode 100644 index 0000000..41094d7 --- /dev/null +++ b/Native/support/updateiOS/update324/README.md @@ -0,0 +1,19 @@ +## 更新内容 + +* [修复] 修复设置音频播放音量有时无效的问题； +* [修复] 修复部分滤镜表现错误的问题； +* [修复] 重写热更新的逻辑，考虑网络断开等情况； +* [修复] 修复saveToFile失败的问题； +* [新特性] 添加绘制纹理的效率优化开关； +* [新特性] 支持透明背景； +* [新特性] 添加在系统静音的情况下播放声音的选项； +* [改进] 提高稳定性。 + +### 下载地址 + +[http://tool.egret-labs.org/ios-support/egret-ios-support-3.2.4.zip](http://tool.egret-labs.org/ios-support/egret-ios-support-3.2.4.zip) + +## 其他 + +* 本版本提供了一个使用系统 JavaScriptCore.framework 的试用版，可以去掉原来iOS support提供的的JavaScriptCore.framework，[下载地址：https://github.com/egret-labs/egret-ios-support/tree/system_jsc](https://github.com/egret-labs/egret-ios-support/tree/system_jsc) + diff --git a/Native/support/updateiOS/update325/README.md b/Native/support/updateiOS/update325/README.md new file mode 100644 index 0000000..f9205a0 --- /dev/null +++ b/Native/support/updateiOS/update325/README.md @@ -0,0 +1,16 @@ +## 更新内容 + +* [修复] 修复3.2.4中出现的部分情况下不能进入游戏的问题； +* [修复] 修复使用系统JSC的版本不能正常使用TypedArray的情况； +* [修复] 修复saveToFile的地址存在上级文件夹时保存失败的问题； +* [改进] 提高稳定性。 + + +### 下载地址 + +[http://tool.egret-labs.org/ios-support/egret-ios-support-3.2.5.zip](http://tool.egret-labs.org/ios-support/egret-ios-support-3.2.5.zip) + +## 其他 + +* 本版本提供了一个使用系统 JavaScriptCore.framework 的试用版，可以去掉原来iOS support提供的的JavaScriptCore.framework，[下载地址：https://github.com/egret-labs/egret-ios-support/tree/system_jsc](https://github.com/egret-labs/egret-ios-support/tree/system_jsc) + diff --git a/Native/support/updateiOS/update326/README.md b/Native/support/updateiOS/update326/README.md new file mode 100644 index 0000000..227488e --- /dev/null +++ b/Native/support/updateiOS/update326/README.md @@ -0,0 +1,20 @@ +## 更新内容 + +* [改进] 增加自定义热更新的模版； +* [修复] 修复设置customLoadingFlag导致游戏不能启动的问题； +* [修复] 修复多行文本无法正常输入中文的问题； +* [修复] 修复真机上不能正常保存截图的问题； +* [修复] 修复保存截图尺寸有缩放的问题； +* [修复] 修复xml里存在非法字符导致不能正常解析的问题； +* [修复] 修复进入后台再切回来时声音不能自动继续播放的问题； +* [改进] 提高稳定性。 + + +### 下载地址 + +[http://tool.egret-labs.org/ios-support/egret-ios-support-3.2.6.zip](http://tool.egret-labs.org/ios-support/egret-ios-support-3.2.6.zip) + +## 其他 + +* 本版本提供了一个使用系统 JavaScriptCore.framework 的试用版，可以去掉原来iOS support提供的的JavaScriptCore.framework，[下载地址：https://github.com/egret-labs/egret-ios-support/tree/system_jsc](https://github.com/egret-labs/egret-ios-support/tree/system_jsc) + diff --git a/Native/support/updateiOS/update400/README.md b/Native/support/updateiOS/update400/README.md new file mode 100644 index 0000000..7d97212 --- /dev/null +++ b/Native/support/updateiOS/update400/README.md @@ -0,0 +1,18 @@ +## 更新内容 + +* [改进] 添加热更新失败的回调（参照LoadingView.m的onGameLoadingError方法）； +* [修复] 修复游戏过程中来电话导致音频不能继续播放的问题； +* [修复] 修复设置customLoading无效的问题； +* [修复] 修改自定义热更新的模版，默认以旧版本的方式启动； +* [修复] 修复热更新失败后仍然会更新版本信息的问题； +* [改进] 提高稳定性。 + + +### 下载地址 + +[http://tool.egret-labs.org/ios-support/egret-ios-support-4.0.0.zip](http://tool.egret-labs.org/ios-support/egret-ios-support-4.0.0.zip) + +## 其他 + +* 本版本提供了一个使用系统 JavaScriptCore.framework 的试用版，可以去掉原来iOS support提供的的JavaScriptCore.framework，[下载地址：https://github.com/egret-labs/egret-ios-support/tree/system_jsc](https://github.com/egret-labs/egret-ios-support/tree/system_jsc) + diff --git a/Native/support/updateiOS/update401/README.md b/Native/support/updateiOS/update401/README.md new file mode 100644 index 0000000..1e803e4 --- /dev/null +++ b/Native/support/updateiOS/update401/README.md @@ -0,0 +1,17 @@ +## 更新内容 + +* [新特性] 提供图片选择器功能（使用方法请参考开发者中心的相关文档）； +* [新特性] 支持将ArrayBuffer或Base64转换为贴图（使用方法请参考开发者中心的相关文档）； +* [修复] 修复开启CmdBatch之后部分场景矢量图设置透明度无效的问题； +* [修复] 修复热更新相关的问题； +* [修复] 修复部分机型下滤镜shader不能编译的问题； +* [修复] 修复XML有时不能被解析的问题； +* [修复] 修复WebSocket乱序的问题； +* [修复] 修复进入后台后不能再次响应来电事件的问题； +* [改进] 部分第三方库不再放在libEgretLib.a中，防止开发者在原生代码中使用这些库时方法名冲突； +* [改进] 提高稳定性。 +* [改进] 本版本开始完全使用系统的 JavaScriptCore.framework。 + +### 下载地址 + +[http://tool.egret-labs.org/ios-support/egret-ios-support-4.0.1.zip](http://tool.egret-labs.org/ios-support/egret-ios-support-4.0.1.zip) diff --git a/Native/support/updateiOS/update402/README.md b/Native/support/updateiOS/update402/README.md new file mode 100644 index 0000000..42587af --- /dev/null +++ b/Native/support/updateiOS/update402/README.md @@ -0,0 +1,10 @@ +## 更新内容 + +* [修复] 修复iOS下xml2json API的换行转义错误； +* [修复] 修复webSocket在部分情况下发送消息失败的问题； +* [改进] 提高稳定性。 + + +### 下载地址 + +[http://tool.egret-labs.org/ios-support/egret-ios-support-4.0.2.zip](http://tool.egret-labs.org/ios-support/egret-ios-support-4.0.2.zip) diff --git a/Native/support/updateiOS/update403/README.md b/Native/support/updateiOS/update403/README.md new file mode 100644 index 0000000..0b8f482 --- /dev/null +++ b/Native/support/updateiOS/update403/README.md @@ -0,0 +1,10 @@ +## 更新内容 + +* [修复] 修复EgretRuntime initWithRect接口会改变EAGLView的位置的问题； +* [修复] 修复drawToTexture接口保存的图片在部分情况下渲染出错的问题； +* [改进] 提高稳定性。 + + +### 下载地址 + +[http://tool.egret-labs.org/ios-support/egret-ios-support-4.0.3.zip](http://tool.egret-labs.org/ios-support/egret-ios-support-4.0.3.zip) diff --git a/Native/support/updateiOS/update410/README.md b/Native/support/updateiOS/update410/README.md new file mode 100644 index 0000000..ed930e1 --- /dev/null +++ b/Native/support/updateiOS/update410/README.md @@ -0,0 +1,18 @@ +## 更新内容 + +* [修复] 修复webSocket在连接某些类型服务器时不能连接、容易断线的问题； +* [修复] 输入框默认垂直对齐方式与H5保持一致； +* [修复] 修复开启优化后部分场景渲染出错的问题； +* [修复] 修复下载资源失败后仍然会创建文件的问题； +* [修复] 修复不能使用自定义字体的问题； +* [修复] 修复下拉通知栏有时会导致触摸无效的问题； +* [修复] 修复在音频播放前获取长度信息会导致闪退的问题； +* [修复] 修复使用其他带有渲染功能的第三方库时闪退的问题； +* [修复] 修复在部分机型使用语音输入闪退的问题； +* [改进] 提高稳定性。 + + + +### 下载地址 + +[http://tool.egret-labs.org/ios-support/egret-ios-support-4.1.0.zip](http://tool.egret-labs.org/ios-support/egret-ios-support-4.1.0.zip) diff --git a/Native/support/updateiOS/update501/README.md b/Native/support/updateiOS/update501/README.md new file mode 100644 index 0000000..83db5b6 --- /dev/null +++ b/Native/support/updateiOS/update501/README.md @@ -0,0 +1,13 @@ +## 更新内容 + +* [修复] 修复HttpRequest可能得不到正确返回值的问题； +* [修复] 修复不能下载名字过长的文件的问题； +* [修复] 修复mesh绘制不出来的问题； +* [修复] 修复drawToTexture可能报错的问题； +* [修复] 断网或者切换网络环境时主动关闭webSocket； +* [改进] 提高稳定性。 + + +### 下载地址 + +[http://tool.egret-labs.org/ios-support/egret-ios-support-5.0.1.zip](http://tool.egret-labs.org/ios-support/egret-ios-support-5.0.1.zip) diff --git a/Native/support/updateiOS/update5012/README.md b/Native/support/updateiOS/update5012/README.md new file mode 100644 index 0000000..b01bc3f --- /dev/null +++ b/Native/support/updateiOS/update5012/README.md @@ -0,0 +1,8 @@ +## 更新内容 + +* [修复] 修复国行设备首次启动可能黑屏的问题； +* [修复] 修复解析exml文件产生的内存泄漏； +* [改进] 提高稳定性。 +### 下载地址 + +[http://tool.egret-labs.org/ios-support/egret-ios-support-5.0.12.zip](http://tool.egret-labs.org/ios-support/egret-ios-support-5.0.12.zip) \ No newline at end of file diff --git a/Native/support/updateiOS/update503/README.md b/Native/support/updateiOS/update503/README.md new file mode 100644 index 0000000..9c2a193 --- /dev/null +++ b/Native/support/updateiOS/update503/README.md @@ -0,0 +1,8 @@ +## 更新内容 + +* [修复] 修复webSocket不能连接到wss服务器的问题； +* [改进] 提高稳定性。 + +### 下载地址 + +[http://tool.egret-labs.org/ios-support/egret-ios-support-5.0.3.zip](http://tool.egret-labs.org/ios-support/egret-ios-support-5.0.3.zip) \ No newline at end of file diff --git a/Native/support/updateiOS/update505/README.md b/Native/support/updateiOS/update505/README.md new file mode 100644 index 0000000..dc71e70 --- /dev/null +++ b/Native/support/updateiOS/update505/README.md @@ -0,0 +1,9 @@ +## 更新内容 + +* [修复] 修复EUI输入框设置垂直布局和颜色无效的问题； +* [修复] 修复5.0.3中出现的非第一次启动有概率闪退的问题； +* [改进] 提高稳定性。 + +### 下载地址 + +[http://tool.egret-labs.org/ios-support/egret-ios-support-5.0.5.zip](http://tool.egret-labs.org/ios-support/egret-ios-support-5.0.5.zip) \ No newline at end of file diff --git a/Native/support/updateiOS/update506/README.md b/Native/support/updateiOS/update506/README.md new file mode 100644 index 0000000..5d23408 --- /dev/null +++ b/Native/support/updateiOS/update506/README.md @@ -0,0 +1,9 @@ +## 更新内容 + +* [修复] 修复颜色矩阵滤镜渲染错误的问题； +* [修复] 修复LoadingView显示滞后的问题； +* [改进] 提高稳定性。 + +### 下载地址 + +[http://tool.egret-labs.org/ios-support/egret-ios-support-5.0.6.zip](http://tool.egret-labs.org/ios-support/egret-ios-support-5.0.6.zip) \ No newline at end of file diff --git a/Native/support/updateiOS/update507/README.md b/Native/support/updateiOS/update507/README.md new file mode 100644 index 0000000..01efe0b --- /dev/null +++ b/Native/support/updateiOS/update507/README.md @@ -0,0 +1,10 @@ +## 更新内容 + +* [修复] 修复destroyEgretRuntime后部分变量没有释放的问题； +* [修复] 修复创建的js字符串没有释放导致内存泄漏的问题； +* [修复] 修复5.0.6中出现的颜色矩阵滤镜alpha值错误的问题； +* [改进] 提高稳定性。 + +### 下载地址 + +[http://tool.egret-labs.org/ios-support/egret-ios-support-5.0.7.zip](http://tool.egret-labs.org/ios-support/egret-ios-support-5.0.7.zip) \ No newline at end of file diff --git a/Native/support/updateiOS/update508/README.md b/Native/support/updateiOS/update508/README.md new file mode 100644 index 0000000..141a320 --- /dev/null +++ b/Native/support/updateiOS/update508/README.md @@ -0,0 +1,11 @@ +## 更新内容 + +* [修复] 修复webSocket不能连接到部分wss服务器的问题； +* [改进] 提高webSocket连接速度； +* [改进] webSocket支持设置protocols； +* [改进] console.log等console方法支持多个参数； +* [改进] 提高稳定性。 + +### 下载地址 + +[http://tool.egret-labs.org/ios-support/egret-ios-support-5.0.8.zip](http://tool.egret-labs.org/ios-support/egret-ios-support-5.0.8.zip) \ No newline at end of file diff --git a/Native/support/updateiOS/update509/README.md b/Native/support/updateiOS/update509/README.md new file mode 100644 index 0000000..95eafad --- /dev/null +++ b/Native/support/updateiOS/update509/README.md @@ -0,0 +1,8 @@ +## 更新内容 + +* [修复] 优化WebSocket，解决锁屏时部分webSocket连接断开但是不能收到onClose事件的问题； +* [改进] 提高稳定性。 + +### 下载地址 + +[http://tool.egret-labs.org/ios-support/egret-ios-support-5.0.9.zip](http://tool.egret-labs.org/ios-support/egret-ios-support-5.0.9.zip) \ No newline at end of file diff --git a/Native/update/0.1.0/README.md b/Native/update/0.1.0/README.md new file mode 100644 index 0000000..56ba3a2 --- /dev/null +++ b/Native/update/0.1.0/README.md @@ -0,0 +1,9 @@ + + +- **[新增]** iOS 增加启动图功能，提高用户体验 +- **[新增]** 增加本地配置模式，不从服务器获取游戏配置信息 +- **[修复]** 文字空格宽度和浏览器不一致的问题 +- **[修复]** 部分情况 webSocket 连接失败的问题 +- **[修复]** 文本描边偏移的问题 + +**【发布日期】：2017-12-18** diff --git a/Native/update/0.1.1/README.md b/Native/update/0.1.1/README.md new file mode 100644 index 0000000..576566d --- /dev/null +++ b/Native/update/0.1.1/README.md @@ -0,0 +1,11 @@ + + +- **[新增]** 增加对 indexDB 的支持 +- **[新增]** 在 index.html 里开启了 data-show-log 时，在手机上显示 egret.log、egret.error 和 egret.warn 的信息 +- **[新增]** 增加window.location.reload()方法，可以在微端里强制刷新页面，重新加载游戏 +- **[新增]** 支持自定义字体 +- **[优化]** 按照http服务器的 cache 进行缓存 +- **[优化]** 支持将httpHeader打包进ipa和apk +- **[修复]** 在 iOS8.4 以下无法启动的问题 + +**【发布日期】：2018-1-2** diff --git a/Native/update/0.1.10/README.md b/Native/update/0.1.10/README.md new file mode 100644 index 0000000..313ab1f --- /dev/null +++ b/Native/update/0.1.10/README.md @@ -0,0 +1,10 @@ + +- **[优化]** 原生显示列表性能 +- **[优化]** Android 声音模块兼容不同的采样速率 +- **[修复]** iOS websocket 跨线程的问题 +- **[修复]** NativeXMLHttpRequest 缓存错误的问题 +- **[修复]** 华为 mate10 渲染错误的问题 +- **[修复]** Android 上同一个音频同时播放多个导致崩溃的问题 +- **[修复]** iOS上以 base64 的方式解析纹理有概率崩溃的问题 + +**【发布日期】：2018-8-27** diff --git a/Native/update/0.1.11/README.md b/Native/update/0.1.11/README.md new file mode 100644 index 0000000..43411fb --- /dev/null +++ b/Native/update/0.1.11/README.md @@ -0,0 +1,8 @@ + +- **[新增]** 增加对 pvr 和 etc 格式的支持 +- **[优化]** 优化 v8 编译选项，减小包体 +- **[优化]** 兼容更多 websocket 的地址写法 +- **[优化]** 提高原生显示列表的稳定性 +- **[修复]** Android从后台回复后有概率不继续播放声音的问题 + +**【发布日期】：2018-9-19** diff --git a/Native/update/0.1.12/README.md b/Native/update/0.1.12/README.md new file mode 100644 index 0000000..5a10124 --- /dev/null +++ b/Native/update/0.1.12/README.md @@ -0,0 +1,15 @@ + +使用文档已经被集成到模版工程中，请查看对应的README.md + +- **[新增]** 增加对背景透明的支持 +- **[优化]** 优化渲染文字和矢量图的速度 +- **[优化]** 提高原生显示列表的稳定性 +- **[修复]** 解决自定义shader显示不正常的问题 +- **[修复]** 解决单通道纹理不显示背景的问题 +- **[修复]** 解决不支持在编辑器中设置scale9Grid的问题 +- **[修复]** 解决部分机型上偶现颜色失真的问题 +- **[修复]** 解决部分类型文件不返回下载失败回调的问题 +- **[修复]** 解决微端不能注册监听runtime状态的回调的问题 + + +**【发布日期】：2018-11-20 ** diff --git a/Native/update/0.1.13/README.md b/Native/update/0.1.13/README.md new file mode 100644 index 0000000..c6fb079 --- /dev/null +++ b/Native/update/0.1.13/README.md @@ -0,0 +1,10 @@ + +使用文档已经被集成到模版工程中，请查看对应的README.md + +- **[新增]** websocket 支持状态获取和状态变更 +- **[优化]** 移除了runtime添加的附加query串 +- **[修复]** 修正了Android上全面屏点击问题 +- **[修复]** 修正了Android Native收不到onJSError的问题 + + +**【发布日期】：2018-12-27 ** diff --git a/Native/update/0.1.14/README.md b/Native/update/0.1.14/README.md new file mode 100644 index 0000000..a8755cb --- /dev/null +++ b/Native/update/0.1.14/README.md @@ -0,0 +1,11 @@ + +- **[修复]** 修正了在开启原生渲染加速时的纹理内存泄漏 +- **[修复]** 修正了输入框点击后文字会向上偏移 +- **[修复]** 恢复了自定义字体的支持 +- **[修复]** 修复了destroy时的报错 +- **[优化]** 提升了渲染文字和矢量图的效率 +- **[优化]** Android:降低了使用系统字体渲染文字的内存占用量 +- **[新增]** 提供了x86版本的Native库 + + +**【发布日期】：2019-1-25 ** diff --git a/Native/update/0.1.15/README.md b/Native/update/0.1.15/README.md new file mode 100644 index 0000000..8933927 --- /dev/null +++ b/Native/update/0.1.15/README.md @@ -0,0 +1,16 @@ + +- **[新增]** 添加了 performance.now() +- **[新增]** 添加了 getSystemInfo() 获得手机厂商和型号 +- **[新增]** 支持 atob(), btoa() +- **[优化]** 优化了开启原生渲染加速时点击时的textfield计算 +- **[新增]** Android: Android 20以下，websocket支持tls1.2 +- **[修正]** Android: 修正了一些特殊非mp3音频文件会被判定为mp3格式 +- **[优化]** Android: 优化了自动内存管理的执行时机 +- **[修正]** Android: 修正了部分机型动态隐藏虚拟按键条时的显示 +- **[修正]** iOS: 修正了上xhr设置header无效 +- **[修正]** iOS: 修正了在使用特殊自定义字体的情况下，前后台切换后，字体描边可能错位 +- **[修正]** iOS: 支持query中带有中文的webSocket地址 +- **[修正]** iOS: 避免了http头中包含etag或last-modified时重复下载资源 + + +**【发布日期】：2019-3-4** diff --git a/Native/update/0.1.16/README.md b/Native/update/0.1.16/README.md new file mode 100644 index 0000000..9dfdd3e --- /dev/null +++ b/Native/update/0.1.16/README.md @@ -0,0 +1,12 @@ + +- **[修正]** 在打开原生显示列表时，粒子系统可能会卡死 +- **[修正]** 在打开原生显示列表时，使用RenderTexture可能会崩溃 +- **[新增]** Android:添加[沉浸模式和刘海屏支持](../../manual/projectsetting/README#%E5%85%B6%E5%AE%83%E8%AE%BE%E7%BD%AE) +- **[优化]** Android:模版工程添加了配置防止在某些情况下runtime重启 +- **[修正]** Android:在特定设备上的文字大小显示不正确 +- **[修正]** Android:在不打开fps面板时，输入框可能被遮挡 +- **[优化]** iOS:单行输入框，点击键盘完成时关闭输入框 +- **[修正]** iOS:粗体宽度计算不正确 + + +**【发布日期】：2019-4-15** diff --git a/Native/update/0.1.17/README.md b/Native/update/0.1.17/README.md new file mode 100644 index 0000000..25cf0cd --- /dev/null +++ b/Native/update/0.1.17/README.md @@ -0,0 +1,18 @@ + +- **[新增]** 原生渲染支持自定义字体 +- **[新增]** 支持更多的WebGLExtension: `OES_texture_float`、`OES_standard_derivatives` +- **[修正]** 在打开原生显示列表时，位图字体时可能导致程序崩溃 +- **[修正]** 加载完成的audio在cloneNode之后立即播放无效 +- **[修正]** Android:屏幕弹出键盘时会自动弹回 +- **[修正]** Android:不打开FPS面板时退出异常 +- **[修正]** Android:和不支持ping pong的websocket服务器连接时会断线 +- **[修正]** Android:华为Android8.1系统刘海屏高度支持 +- **[优化]** Android:带描边的加粗字体加粗不明显 +- **[优化]** Android:按照Google Play白名单调整Android SDK接口调用方法 +- **[修正]** iOS:单行输入框输入文字超过最大长度后不能自动左移 +- **[修正]** iOS:多行输入框输入文字颜色不正确 +- **[修正]** iOS:放大模式下正确识别屏幕分辨率 +- **[修正]** iOS:post请求数据量过大引起崩溃 + + +**【发布日期】：2019-5-28** diff --git a/Native/update/0.1.18/README.md b/Native/update/0.1.18/README.md new file mode 100644 index 0000000..f4b3232 --- /dev/null +++ b/Native/update/0.1.18/README.md @@ -0,0 +1,15 @@ + +- **[修正]** 不能解析特殊的png文件 +- **[新增]** NativeRender支持设置子节点排序方式 +- **[新增]** HTTP默认超时接口 +- **[修正]** HTTP response header含有空的value时会崩溃 +- **[修正]** reload时不应抛出StartingError +- **[修正]** 声音播放结束事件和H5不一致，导致不能循环播放 +- **[修正]** Android:WebSocket地址自动加问号，导致无法连接 +- **[修正]** Android:部分机型点击输入框会弹出导航栏，退出后不消失 +- **[修正]** Android:某些情况下播放的音频会导致崩溃 +- **[修正]** Android:文字在缩放或错切的情况下的位置错误 +- **[修正]** Android:在特殊的启动时机进行重启会导致崩溃 +- **[修正]** iOS:WebSocket可能会导致接收消息的顺序混乱 + +**【发布日期】：2019-7-9** diff --git a/Native/update/0.1.19/README.md b/Native/update/0.1.19/README.md new file mode 100644 index 0000000..55bf40a --- /dev/null +++ b/Native/update/0.1.19/README.md @@ -0,0 +1,5 @@ + +- **[新增]** Android:支持谷歌64位版本Apk打包上传 +- **[优化]** iOS:优化在App Store中的上传规范，避免上传失败 + +**【发布日期】：2019-7-23** diff --git a/Native/update/0.1.2/README.md b/Native/update/0.1.2/README.md new file mode 100644 index 0000000..f871467 --- /dev/null +++ b/Native/update/0.1.2/README.md @@ -0,0 +1,15 @@ + +- **[新增]** 支持更多dom 标签，兼容更多的游戏 +- **[新增]** 支持 window.onerror 方法，便于开发者调试 +- **[新增]** 支持 alert ，便于开发者调试 +- **[新增]** 配合 5.1.3 的引擎，支持原生渲染加速，提高游戏运行效率 +- **[新增]** 可以设置 log 信息在屏幕上停留的时间 +- **[优化]** 优化对 url 地址处理 +- **[新增]** 优化网络连接请求 +- **[修复]** eui 输入框错位的问题 +- **[修复]** 设置 fontFamily 后报错的问题 +- **[修复]** ios 下，如果游戏地址非法时崩溃的问题 +- **[修复]** 部分情况下，获取音频长度错误的问题 +- **[修复]** ios 绘制滤镜的问题 + +**【发布日期】：2018-1-16** diff --git a/Native/update/0.1.20/README.md b/Native/update/0.1.20/README.md new file mode 100644 index 0000000..ab3946f --- /dev/null +++ b/Native/update/0.1.20/README.md @@ -0,0 +1,7 @@ + +- **[修正]** TouchMove事件可能乱序 +- **[修正]** egret.RenderTexture.toDataURL返回值为空 +- **[修正]** 从跳转到第三方Activity之后访问assets目录的资源可能会崩溃 +- **[修正]** 在打开原生显示列表时，只设置了部分属性的TextFlow可能渲染出错 + +**【发布日期】：2019-8-15** diff --git a/Native/update/0.1.21/README.md b/Native/update/0.1.21/README.md new file mode 100644 index 0000000..604f599 --- /dev/null +++ b/Native/update/0.1.21/README.md @@ -0,0 +1,12 @@ + +- **[新增]** x86_64 版本 so +- **[修正]** 部分js回调会立即执行 +- **[修正]** 部分js回调会导致内存泄漏 +- **[修正]** 不能兼容部分第三方视频、地图库[55053](https://bbs.egret.com/thread-55053-1-1.html) +- **[修正]** iOS:和部分解压缩zip的第三方库冲突[57776](https://bbs.egret.com/thread-57776-1-1.html) +- **[修正]** nativeRender:模式重复换行 +- **[修正]** nativeRender:模式文字过多可能被拉伸 +- **[修正]** nativeRender:自动换行的文本可能丢失部分文字 + + +**【发布日期】：2019-11-27** diff --git a/Native/update/0.1.22/README.md b/Native/update/0.1.22/README.md new file mode 100644 index 0000000..6b19cc5 --- /dev/null +++ b/Native/update/0.1.22/README.md @@ -0,0 +1,7 @@ + +- **[修正]** 在打开原生显示列表时，有表情的自动换行的文本可能导致崩溃 +- **[修正]** 没有引用的连接状态的WebSocket会被GC +- **[修正]** 循环播放或修改src属性的声音可能导致崩溃 + + +**【发布日期】：2019-12-10** diff --git a/Native/update/0.1.23/README.md b/Native/update/0.1.23/README.md new file mode 100644 index 0000000..b63eea1 --- /dev/null +++ b/Native/update/0.1.23/README.md @@ -0,0 +1,11 @@ + +- **[新增]** 支持 gl.UNPACK_FLIP_Y_WEBGL +- **[修正]** 网络请求兼容非字符串类型的header数据 +- **[修正]** 渐变填充错误 +- **[修正]** XMLHttpRequest POST 的body是TypedArray类型时，会被变成字符串 +- **[修正]** 设定帧率小于60可能会闪屏 +- **[修正]** nativeRender: 支持在未初始化egret引擎时创建DisplayObject +- **[修正]** iOS: nativeRender: 启用NativeRender时Promise回调中执行DisplayObject属性修改可能导致显示错误 + + +**【发布日期】：2019-12-30** diff --git a/Native/update/0.1.3/README.md b/Native/update/0.1.3/README.md new file mode 100644 index 0000000..3264219 --- /dev/null +++ b/Native/update/0.1.3/README.md @@ -0,0 +1,15 @@ + +- **[新增]** 支持 window.onload 和 document的onreadystatechange 事件 +- **[新增]** 支持 document.URL 属性 +- **[新增]** 支持 sessionStorage 数据存储 +- **[新增]** 可以设置 webview 的透明与否 +- **[优化]** 优化对 window.ExternalInterface 的支持 +- **[优化]** 完善对 dom 标签的支持 +- **[优化]** 优化 GPUMemory 内存释放 +- **[优化]** 优化 iOS 系统对 indexDB 的支持 +- **[修复]** iOS 在某些情况下多点触摸无效的问题 +- **[修复]** 修复 js 为空文件时报错的问题 +- **[修复]** 某些情况下适量绘图颜色错误的问题 +- **[修复]** 修复 eui 旋转时，图片会放大的问题 + +**【发布日期】：2018-1-29** diff --git a/Native/update/0.1.4/README.md b/Native/update/0.1.4/README.md new file mode 100644 index 0000000..55f283e --- /dev/null +++ b/Native/update/0.1.4/README.md @@ -0,0 +1,10 @@ + +- **[新增]** 支持视频播放 +- **[新增]** 支持 navigator.platform 方法 +- **[优化]** 优化文字和矢量图的纹理销毁机制 +- **[优化]** 统一 webview 模式和 runtime 模式下， js 与 原生互相调用的方法。 +- **[修复]** 点击多行输入框导致黑屏的问题 +- **[修复]** 在 html 中申明的全局对象，无法在 js 文件中调用的问题 +- **[修复]** 修正 ipad 的 useragent 数据 + +**【发布日期】：2018-2-26** diff --git a/Native/update/0.1.5/README.md b/Native/update/0.1.5/README.md new file mode 100644 index 0000000..6d3418d --- /dev/null +++ b/Native/update/0.1.5/README.md @@ -0,0 +1,10 @@ + +- **[新增]** 支持设置网络请求的超时时间 +- **[新增]** 支持竖屏工程打开横屏游戏的功能 +- **[优化]** reload 页面时，优化内存释放 +- **[优化]** 优化 FPS 帧频显示效果 +- **[修复]** 安卓 websocket 关闭时，某些情况下收不到 close 事件的问题 +- **[修复]** 输入文本有重影的问题 +- **[修复]** log 信息过多引起内存崩溃的问题 + +**【发布日期】：2018-3-12** diff --git a/Native/update/0.1.6/README.md b/Native/update/0.1.6/README.md new file mode 100644 index 0000000..4b18cfb --- /dev/null +++ b/Native/update/0.1.6/README.md @@ -0,0 +1,11 @@ + +- **[优化]** 完善对 IndexedDB 的支持 +- **[优化]** 优化 iOS 的稳定性 +- **[优化]** 优化原生渲染的性能 +- **[修复]** 部分低版本机型在低帧频时无法拖动画面的问题 +- **[修复]** iOS 上横屏游戏时输入框位置错误的问题 +- **[修复]** 红米手机上文字大小错误的问题 +- **[修复]** 多点触摸错误的问题 +- **[修复]** iOS 滤镜和浏览器不一致的问题 + +**【发布日期】：2018-5-7** diff --git a/Native/update/0.1.7/README.md b/Native/update/0.1.7/README.md new file mode 100644 index 0000000..ffe013c --- /dev/null +++ b/Native/update/0.1.7/README.md @@ -0,0 +1,9 @@ + +- **[优化]** 优化原生渲染列表的矢量绘图性能 +- **[优化]** Android 的 SurfaceView 支持 resize 事件 +- **[修复]** 红米4在某些情况下退出崩溃的问题 +- **[修复]** 安卓进入后台后，某些情况下声音还会播放的问题 +- **[修复]** window.location的属性被修改时应该按照修改后的结果重新加载游戏 +- **[修复]** 微端 iOS webview模式，连续调用 decisionHandler 引起崩溃的问题 + +**【发布日期】：2018-6-4** diff --git a/Native/update/0.1.8/README.md b/Native/update/0.1.8/README.md new file mode 100644 index 0000000..a3ec367 --- /dev/null +++ b/Native/update/0.1.8/README.md @@ -0,0 +1,21 @@ + +- **[新增]** 支持截屏功能 +- **[新增]** 添加修改启动页和关闭启动页的方法 +- **[优化]** 完善对 localStorage 的支持 +- **[优化]** 在不给出http/https协议scheme的情况下根据当前访问的地址自动添加scheme +- **[优化]** 渲染文字支持 wordWrap +- **[修复]** iso 设置音量大小无效的问题 +- **[修复]** websocket 重复调用 connect 方法导致崩溃的问题 +- **[修复]** 微端版本0.1.6，0.1.7，Shape 的 blendMode 设为 ERASE 时不起作用的问题 +- **[修复]** 微端版本0.1.6，0.1.7，CacheAsBitmap绘制错误的问题 +- **[修复]** 修正 CacheAsBitmap 计算容器大小的错误 +- **[修复]** 某些情况下文字计算大小错误的问题 +- **[修复]** 安卓调用 ExternalInterface 会报 Error 的问题 +- **[修复]** Galaxy S6 上某些情况导致崩溃的问题 +- **[修复]** 5.0.13版本以下的引擎，横屏游戏在竖屏模式下无法显示的问题 +- **[修复]** 某些情况下，文字过多时可能无法显示的情况 +- **[修复]** 微端在某些设备上无法加载动态下载 Runtime 的问题 +- **[修复]** 华为手机上，从后台恢复应用后，屏幕亮度会有变化，并且颜色失真的问题 +- **[修复]** 在某些设备上在使用 webView 时会崩溃的问题 + +**【发布日期】：2018-7-12** diff --git a/Native/update/0.1.9/README.md b/Native/update/0.1.9/README.md new file mode 100644 index 0000000..4296bec --- /dev/null +++ b/Native/update/0.1.9/README.md @@ -0,0 +1,14 @@ + +- **[新增]** 矢量图支持渐变填充 +- **[新增]** 输入框支持inputType属性 +- **[优化]** 声音模块 +- **[优化]** 提高Android WebSocket的稳定性 +- **[优化]** 提高原生渲染功能的稳定性 +- **[修复]** 解决http请求没有把header发出去的问题 +- **[修复]** 解决post请求发送二进制数据，数据错误的问题 +- **[修复]** 解决http请求头部信息不包含UA的问题 +- **[修复]** 解决iOS上旋转屏幕可能导致黑屏的问题 +- **[修复]** 解决setTimeout作用域错误的问题 +- **[修复]** 修正JavaScriptCore C++对象导致的GC崩溃 + +**【发布日期】：2018-8-7** diff --git a/Native/update/1.0.0/README.md b/Native/update/1.0.0/README.md new file mode 100644 index 0000000..7e520a1 --- /dev/null +++ b/Native/update/1.0.0/README.md @@ -0,0 +1,10 @@ + +- **[修正]** 音频修改src引起的重复播放 +- **[修正]** 暂停声音时的线程安全问题 +- **[修正]** nativeRender: 在打开原生显示列表时，画圆弧可能不显示 +- **[修正]** 退出时没有清空Option +- **[修正]** 播放结束的线程安全问题 +- **[修正]** iOS: 修复下点击egret.graphics组件导致渲染崩溃的问题。 + + +**【发布日期】：2020-1-21** diff --git a/Native/update/1.0.1/README.md b/Native/update/1.0.1/README.md new file mode 100644 index 0000000..6b809b8 --- /dev/null +++ b/Native/update/1.0.1/README.md @@ -0,0 +1,13 @@ +- **[优化]** 提升了index.html的加载速度，缩短了native的启动到开始渲染的时间。 +- **[修正]** 修正了某些特殊情况下，url相对路径会被用于服务器请求 +- **[修正]** Android: 当使用ipv6地址连接websockets服务器时会失败。 +- **[修正]** Android: 在多次使用相同字体的不同属性时导致字体多次加载。 +- **[修正]** `