标签：bar awt IV amp got stat create BYD var
教程目录
一 前言
二 实际效果
三 实现原理
四 自定义位图影片剪辑类
五 切图工具类
六 使用示例
七 Demo源码下载
一 前言
一般我们做动画用TextureMerger，用gif或swf，导出一个json和png纹理合集，用MovieClip类来实现。
现在我们使用自定义的BitmapMovie类来制作序列图动画，直接用代码制作，节省TextureMerger工具的操作步骤。
参考：史上最高效、易用的位图动画类开源了，还不快进来！？
《ActionScript3.0 基础动画教程》第一章 基本动画概念
使用封装好的工具类，只需要简单几句就能使用。
|
1
2
3
4
|
var mc:BitmapMovie = new BitmapMovie();mc.initByTile("dragon", "jpg",18);this.addChild(mc);mc.play(); |
二 实际效果
多张序列图
一整张序列图
三 实现原理
1 自定义BtimapMovie类继承自eui.Image。(不继承egret.Bitmap，因为没有eui的特性，比如约束适配...)
2 整张的序列图，使用RenderTexture类的drawToTexture进行切图，并将切下的texture保存到数组中。
3 零碎的序列图，使用RES.getRes()，将texture保存到数组中。
3 每一帧切换纹理 BitmapMovie.texture = 下一张texture，这样就连成了一个动画。
四 自定义位图影片剪辑类
1 整张序列图，使用initByBitmap进行初始化，对整张Bitmap进行裁剪，变成单张的texture，并保存到数组中。
2 多张序列图，使用initByTile进行初始化，将单张的texture保存到数组中
3 使用egret.Timer进行计时，轮流切换BitmapMovie.texture，达到动画的效果。 (这样每一个剪辑就有一个timer，各位可自行优化)
4 提供了egret.MoveClip的play, stop, gotoAndPlay, gotoAndStop等，其他可自行扩展....
|
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
/** * 自定义位图影片剪辑 * @author chenkai * [url=home.php?mod=space&uid=81950]@since[/url] 2017/4/17 */class BitmapMovie extends eui.Image{ /**纹理列表 */ private textureList:Array<egret.Texture> = []; /**总帧数 */ public totalFrame:number; /**当前播放帧数 第一帧从1开始 */ public curFrame:number = 0; /**计时器 */ private timer:egret.Timer; /**播放延迟 */ private _delay:number = 1000/60; /**循环次数 */ private loop:number = 0; public constructor() { super(); } /** * 使用整张序列图初始化 * @srcBm 源图 * @maxRow 有几行 * @maxCol 有几列 * @startPos 从第几张位置开始切(包含该位置) * @pieceNum 切多少张 * @width tile宽度 * @height tile高度 */ public initByBitmap(srcBm:egret.Bitmap, maxRow:number, maxCol:number, startPos:number, pieceNum:number, width:number, height:number){ this.textureList = CutImgTool.cutTile(srcBm, maxRow, maxCol, startPos, pieceNum, width, height); if(this.textureList && this.textureList.length > 0){ this.texture = this.textureList[0]; this.curFrame = 0; this.totalFrame = this.textureList.length; } } /** * 使用零散的序列图初始化 * @imgName 图片名称 命名格式: "boom0_png","boom1_png",... * @imgType 图片后缀 "png"或者"jpg" * @pieceNum 有多少张 */ public initByTile(imgName:string, imgType:string, pieceNum:number){ this.textureList.length = 0; for(var i=0;i<pieceNum;i++){ this.textureList = RES.getRes(imgName + i + "_" + imgType); } if(this.textureList.length > 0){ this.texture = this.textureList[0]; this.curFrame = 0; this.totalFrame = this.textureList.length; } } /** * 播放 * @loop 循环次数 */ public play(loop:number = 0){ this.loop = loop; this.startTimer(); } /** * 停止播放 */ public stop(){ this.stopTimer(); } /** * 跳转播放 * @frame 播放的起始帧 * @loop 循环次数 */ public gotoAndPlay(frame:number, loop:number = 0){ if(frame <= this.totalFrame){ this.loop = loop; this.curFrame = frame; this.texture = this.textureList[frame-1]; this.startTimer(); }else{ console.error("BitmapMovie >> frame超出范围"); } } /** * 跳转停止 * @frame 停止的帧 */ public gotoAndStop(frame:number){ if(frame <= this.totalFrame){ this.stopTimer(); this.curFrame = frame; this.texture = this.textureList[frame-1]; }else{ console.error("BitmapMovie >> frame超出范围"); } } //启动计时器 private startTimer(){ this.timer || (this.timer = new egret.Timer(this.delay)); this.timer.addEventListener(egret.TimerEvent.TIMER, this.onTimerHandler, this); this.timer.reset(); this.timer.start(); } //计时处理 private onTimerHandler(){ this.curFrame ++; if(this.curFrame <= this.totalFrame){ this.texture = this.textureList[this.curFrame-1]; }else{ this.loop --; this.dispatchEvent(new egret.Event(egret.Event.LOOP_COMPLETE)); if(this.loop > 0){ this.curFrame = 1; this.texture = this.textureList[this.curFrame-1]; }else{ this.stopTimer(); this.dispatchEvent(new egret.Event(egret.Event.COMPLETE)); } } } //停止计时 private stopTimer(){ if(this.timer){ this.timer.removeEventListener(egret.TimerEvent.TIMER, this.onTimerHandler, this); this.timer.stop(); } } //延迟 public set delay(value:number){ this._delay = value; if(this.timer){ this.timer.delay = value; } } //延迟 public get delay(){ return this._delay; }} |
五 切图工具类
1 主要利用RenderTexture的drawToTexture进行切图。
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
/** * 切图工具类 * @author chenkai * @since 2017/4/17 */class CutImgTool { /** * 切图 * @srcBm 源图 * @maxRow 有几行 * @maxCol 有几列 * @startPos 从第几张位置开始切(包含该位置) * @pieceNum 切多少张 * @width tile宽度 * @height tile高度 * @returns 返回切割的纹理列表 */ public static cutTile(srcBm:egret.Bitmap,maxRow:number,maxCol:number,startPos:number, pieceNum:number,width:number,height:number){ var rect:egret.Rectangle = new egret.Rectangle(); //切割矩形区域 var cutCount:number = 0; //当前已切割多少块 var textureList = []; //保存切割的纹理 for(var i=0;i<maxRow;i++){ for(var j=0;j<maxCol;j++){ //>=起始位置，并且<=切割数量 if((i*maxCol + j >= startPos) && cutCount <= pieceNum){ var renderTexture:egret.RenderTexture = new egret.RenderTexture(); rect.x = j*width; rect.y = i*height; rect.width = width; rect.height = height; if(renderTexture.drawToTexture(srcBm, rect) == false){ console.error("CutImgTool >> cut error"); return null; }else{ textureList.push(renderTexture); cutCount ++; } }else{ return textureList; } } } return textureList; }} |
六 使用示例
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
/** * 主页场景 * @author chenkai * @since 2017/4/17 */class HomeScene extends eui.Component{ public constructor() { super(); this.skinName = "HomeSceneSkin"; } public childrenCreated(){ //创建自定义影片剪辑 var boom:BitmapMovie = new BitmapMovie(); //使用整张序列图初始化 var bm:egret.Bitmap = new egret.Bitmap(RES.getRes("boom_png")); boom.initByBitmap(bm,4,5,0,18,192,192); //使用零散的多张序列图初始化 //boom.initByTile("dragon", "jpg",18); //设置位置 boom.x = (this.stage.stageWidth - boom.width)/2; boom.y = (this.stage.stageHeight - boom.height)/2; boom.delay = 1000/20; this.addChild(boom); //监听播放完成 boom.addEventListener(egret.Event.COMPLETE, this.onComplete, this); boom.addEventListener(egret.Event.LOOP_COMPLETE, this.onLoopComplete, this); //开始播放 boom.play(999); } //所有播放完成 private onComplete(){ console.log("HomeScene >> Boom 播放完成"); } //播放完一次 private onLoopComplete(){ console.log("HomeScene >> Boom 播放一次完成"); }} |
七 Demo源码下载
标签：bar awt IV amp got stat create BYD var
原文地址：https://www.cnblogs.com/gamedaybyday/p/9219954.html
