Egret入门学习日记 --- 第三十九篇(书中 11.12 ~ 11.15 节 内容)
作者:互联网
第三十九篇(书中 11.12 ~ 11.15 节 内容)
这篇日记写完,龙骨篇就结束了。
最难的点就是掌握龙骨动画类的封装。
开始 11.12 节。
重点:
1、创建帧项目,改名,拖入图片。
操作:
1、创建帧项目,改名,拖入图片。
创建帧项目。
改名,拖入PNG图片。
至此,11.12 节结束。
开始 11.13 节。
重点:
1、导出帧动画为二进制格式。
2、运行动画。
操作:
1、导出帧动画为二进制格式。
导出为二进制。
导入Egret。
2、运行动画。
编写代码,并运行。
至此,11.13 节 结束。
开始 11.14 节。
额。。。不懂,等以后再说吧。
至此,11.14 节 结束。
开始 11.15 节。
重点:
1、动画加载的场景 。
2、资源命名。
3、异步加载。
4、构建播放动画主体类 DBPlayer ,事件类通知类 Handler。
5、实例化运行代码。
操作:
1、动画加载的场景 。
如果资源太大,一次性加载没有用到的资源,会影响性能和用户体验。
所以资源太大的情况下,应该选择按需加载。
资源尽量控制在2MB以下,如果超过,则用进度条的方式提醒用户。
2、资源命名。
3、异步加载。
4、构建播放动画主体类 DBPlayer ,事件类通知类 Handler。
我直接上代码。注意,我使用的动画解析方式是 二进制格式 。
1 export class DBPlayer extends egret.Sprite { 2 constructor() { 3 super(); 4 } 5 6 /** 当动画执行完毕后执行的函数 */ 7 public completeFun: Handler; 8 9 private armature: dragonBones.EgretArmatureDisplay; 10 private dragonFactory: dragonBones.EgretFactory; 11 12 //设置要添加的舞台层 13 private mparent: egret.DisplayObjectContainer; 14 15 //资源ID 16 private resourceId: string = ""; 17 18 //动画名称 19 private animationName: string = ""; 20 21 //骨骼名称 22 private armatureName: string = ""; 23 24 //播放次数 25 private playtime: number = 0; 26 27 //加载次数 28 private loadNum: number = 0; 29 30 //加载列表 31 private loadList: Array<any>; 32 33 34 public static getDBPlayer(): DBPlayer { 35 return new DBPlayer(); 36 } 37 38 /** 展示 */ 39 public show(resourceId, parent: egret.DisplayObjectContainer = null, playtime: number = -1, animationName: string, armatureName: string) { 40 this.mparent = parent; 41 this.resourceId = resourceId; 42 this.animationName = animationName; 43 this.armatureName = armatureName; 44 this.playtime = playtime; 45 46 let dragonData = RES.getRes(resourceId + "_ske_dbbin"); 47 let textureData = RES.getRes(resourceId + "_tex_json"); 48 let texture = RES.getRes(resourceId + "_tex_png"); 49 50 //如果 加载不到 动画资源,则使用异步加载的方式。 51 if (dragonData && textureData && texture) { 52 this.initDBData(dragonData, textureData, texture); 53 } else { 54 this.loadList = [ 55 resourceId + "_ske_dbbin", 56 resourceId + "_tex_json", 57 resourceId + "_tex_png" 58 ]; 59 this.loadNum = this.loadList.length; 60 this.startload(); 61 62 } 63 } 64 /** 开始加载动画资源 */ 65 private startload() { 66 67 //如果 资源数组里还有资源,则继续异步加载 68 if (this.loadList.length > 0) { 69 70 let res = this.loadList.pop(); 71 RES.addEventListener( 72 RES.ResourceEvent.GROUP_LOAD_ERROR, 73 this.onResourceLoadError, 74 this 75 ); 76 RES.getResAsync(res, this.compFunc, this); 77 } 78 } 79 80 /** 资源加载失败的情况 */ 81 private onResourceLoadError(event: RES.ResourceEvent) { 82 83 } 84 85 //异步加载资源完成后,继续加载下一个资源。 86 private compFunc() { 87 88 RES.removeEventListener( 89 RES.ResourceEvent.GROUP_LOAD_ERROR, 90 this.onResourceLoadError, 91 this 92 ); 93 this.loadNum--; 94 if (this.loadNum > 0) { 95 this.startload(); 96 } 97 // 书中的这部分代码我感觉没必要 上面都写了 98 // else { 99 // let dragonData = RES.getRes(this.resourceId + "ske_json"); 100 // let textureData = RES.getRes(this.resourceId + "tex_json"); 101 // let texture = RES.getRes(this.resourceId + "tex_png"); 102 // this.initDBData(dragonData, textureData, texture); 103 // } 104 } 105 106 //开始 载入数据、纹理,并且播放动画 107 private initDBData(dragonData: any, textureData: any, texture: any) { 108 109 //载入 解析 动画资源 110 this.dragonFactory = dragonBones.EgretFactory.factory; 111 this.dragonFactory.parseDragonBonesData(dragonData); 112 this.dragonFactory.parseTextureAtlasData(textureData, texture); 113 this.armature = this.dragonFactory.buildArmatureDisplay(this.armatureName); 114 115 this.armature.addEventListener( 116 dragonBones.AnimationEvent.COMPLETE, 117 this.onLoopComplete, 118 this 119 ); 120 121 //把 动画添加到容器 并且开始播放动画 122 this.addChild(this.armature); 123 this.play(0, this.playtime); 124 if (this.mparent) { 125 this.mparent.addChild(this); 126 } 127 } 128 129 //如果动画播放完毕,则 this.completeFun 向外部发送通知 130 private onLoopComplete(event: dragonBones.AnimationEvent) { 131 if (this.completeFun != null) { 132 this.completeFun.fun.call(this.completeFun.thisObj, this); 133 } 134 } 135 136 /** 播放 */ 137 public play(time: number, playTime: number = 5) { 138 if (this.armature) { 139 this.armature.animation.play(this.animationName, playTime); 140 141 //书中的这个播放方法无效,所以我改成了上面的方式 142 // this.armature.animation.gotoAndPlayByTime( 143 // this.animationName, 144 // time, 145 // playTime 146 // ); 147 } 148 } 149 150 /** 停止 */ 151 public stop() { 152 if (this.armature) { 153 this.armature.animation.stop(); 154 } 155 } 156 157 /** 卸载动画 */ 158 public unload() { 159 this.stop(); 160 if (this.armature) { 161 this.removeChild(this.armature); 162 } 163 if (this.mparent) { 164 this.mparent.removeChild(this); 165 } 166 this.armature = null; 167 } 168 169 170 } 171 172 /** 事件类 */ 173 export class Handler { 174 175 constructor(fun: Function = null, thisObj: any = null) { 176 this.fun = fun; 177 this.thisObj = thisObj; 178 } 179 /** 处理函数 */ 180 public fun: Function; 181 /** 处理函数所属对象 */ 182 public thisObj: any; 183 184 public dispose() { 185 this.fun = null; 186 this.thisObj = null; 187 } 188 189 /** 创建 Handler */ 190 public static create(fun: Function = null, thisObj: any = null) { 191 return new Handler(fun, thisObj); 192 } 193 }
5、实例化运行代码。
至此,11.15 节 结束。
标签:Egret,动画,第三十九,resourceId,11.15,private,RES,armature,加载 来源: https://www.cnblogs.com/dmc-nero/p/11368647.html