game-egret.MovieClipEvent

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);

    }

}

spacer

沒有留言:

張貼留言