game-egret.MovieClip

MovieClip 製作方式

step1. 先準備一個動畫 gif

step2. 開啟 TextureMerger 並選擇 Egret MovieClip

step3. 將 gif 檔拉到 TextureMerger, 請自行設定專案名稱, 畫布請選 Free Size 節省空間. 間隙為 1px ( 很重要, 如果設置 0px 會有圖片邊緣拉扯問題, 可以試試 ), 其他可以自行調整看看. 

step4. 上方工具列有『導出』按鈕, 導出 100% 大小並命名 myPlayer(自定義) 會產出 myPlayer.json 跟 myPlayer.png, 請將這兩個檔案拖到資源庫.

step5. 撰寫程式碼

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.gif 檔同名
        // 建立資料顯示容器 
        const player = new egret.MovieClip(mc_data);
        // 設定每秒播放12格
        player.frameRate = 12; 
        // 0 表示從第 0 格開始播放，播放次數 -1 表示 loop
        player.gotoAndPlay(0, -1); 
        // 顯示於場景
        this.addChild(player);

    }

}