egret.MovieClipEvent 使用範例, 請參考 egret.MovieClip
先了解 MovieClip 格式
// ------------------------------------------------
// [Egret MovieClip json 參考範例]
// mc 存放多個 MovieClip 資料, 本範例只有一個 mcName
// res 表示每個動畫影格所在圖片位置大小(自動生成可以不用關心)
// mcName 動畫資源名, 由程式代碼引用
// frameRate 影格速率
// labels 自訂義影格標籤. 譬如角色動畫有move, jump, attack.
// 代碼會這樣寫 player.gotoAndPlay('jump',1);
// name 是標籤名 frame 是動畫起始影格 end 是動畫結束影格
// events 自訂義事件. name 是事件名(前面記得加@) frame 是觸發的影格數
// frames 是每個影格需要微調位移, 因為寬高可能會不一樣(自動生成可以不用關心)
// ------------------------------------------------
{
"mc":{
"mcName":{
"frameRate":24,
"labels":[
{"name":"fall","frame":1,"end":3}
,{"name":"move","frame":4,"end":6}
],
"events":[
{"name":"@fallhalf","frame":2}
,{"name":"@movehalf","frame":5}
],
"frames":[
{"res":"7ADF0F11","x":224,"y":123},
{"res":"69D013A4","x":228,"y":122},
{"res":"191777D3","x":228,"y":123},
{"res":"BD2A2889","x":222,"y":124},
{"res":"BCE2A311","x":227,"y":132},
{"res":"433DB5E0","x":228,"y":135}
]
}
},
"res":{
"7ADF0F11":{"x":1,"y":87,"w":105,"h":80},
"69D013A4":{"x":111,"y":1,"w":104,"h":85},
"191777D3":{"x":108,"y":88,"w":98,"h":81},
"BD2A2889":{"x":1,"y":1,"w":108,"h":84},
"BCE2A311":{"x":110,"y":171,"w":97,"h":68},
"433DB5E0":{"x":104,"y":241,"w":95,"h":65}
}
}
實作新範例與上述檔案格式描述無關
class Main extends eui.UILayer {
protected createChildren(): void {
super.createChildren();
egret.lifecycle.onPause = () => egret.ticker.pause();
egret.lifecycle.onResume = () => egret.ticker.resume();
egret.registerImplementation('eui.IAssetAdapter', new AssetAdapter());
egret.registerImplementation('eui.IThemeAdapter', new ThemeAdapter());
this.runGame();
}
private async loadResource() {
let loadingView = this.stage.addChild(new LoadingUI()) as LoadingUI;
await RES.loadConfig('resource/default.res.json', 'resource/');
await new Promise(resolve => new eui.Theme('resource/default.thm.json', this.stage).once(eui.UIEvent.COMPLETE, resolve, this));
await RES.loadGroup('preload', 0, loadingView);
this.stage.removeChild(loadingView);
}
private async runGame() {
await this.loadResource();
// --- Edwin 給你最乾淨的程式碼, 從這行以下開始寫喔 ---
// 先建立資料工廠
const playerFactory = new egret.MovieClipDataFactory(RES.getRes('myPlayer_json'), RES.getRes('myPlayer_png'));
// 從資料工廠產生資料
const mc_data: egret.MovieClipData = playerFactory.generateMovieClipData('player'); // player 同檔名
// 建立資料顯示容器
const player = new egret.MovieClip(mc_data);
// 設定每秒播放12格
player.frameRate = 12;
// 0 表示從第 0 格開始播放,播放次數 -1 表示 loop
player.gotoAndPlay(0, -1);
// 顯示於場景
this.addChild(player);
// 先在 myPlayer.json 定義一個影格事件
// "events":[{"name":"@sayHI", "frame":4}],
player.addEventListener(egret.MovieClipEvent.FRAME_LABEL, (e:egret.MovieClipEvent)=>{
e.frameLabel === '@sayHI' && player.stop(); //當播放動畫到指定影格停止動畫
}, this);
}
}
沒有留言:
張貼留言