core-egret.Bitmap

egret.Bitmap 範例1

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 bgRect = new eui.Rect;
        bgRect.percentWidth = 100;
        bgRect.percentHeight = 100;
        bgRect.fillColor = 0x333333;
        this.addChild(bgRect);

        // 動態生成材質添加到舞台
        const texture = new egret.RenderTexture;
        const shape = new egret.Shape;
        shape.graphics.lineStyle(1, 0); // 設置 1px 黑色筆刷
        shape.graphics.beginFill(0xFFCC00); // 設置橘色填充
        shape.graphics.drawCircle(50, 50, 50); // 繪製橘色圓
        shape.graphics.moveTo(0, 0); // 設定筆刷起始位置
        shape.graphics.lineTo(100, 100); // 筆刷繪製
        shape.graphics.endFill(); // 結束填充
        texture.drawToTexture(shape, new egret.Rectangle(0, 0, 100, 100)); // 將圖形繪製至材質上
        this.addChild(new egret.Bitmap(texture));// 將材質賦予顯示容器 Bitmap 並加至舞台

        // 直接取得資源庫材質添加在舞台上
        const bmp = new egret.Bitmap(RES.getRes('egret_icon_png')); // Bitmap 參數為 egret.Texture
        bmp.y = 100;
        this.addChild(bmp);

        // 一般而言 EUI 提供方便的顯示圖片方法, 請用 eui.Image
        const img = new eui.Image('egret_icon_png'); // 設好資源索引名從資源庫直接取用圖片
        img.y = 500;
        this.addChild(img);
    }

}

egret.Bitmap 範例2

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 bgRect = new eui.Rect;
        bgRect.percentWidth = 100;
        bgRect.percentHeight = 100;
        bgRect.fillColor = 0x333333;
        this.addChild(bgRect);

        // 以下方法為圖片加載機制，但是建議用範例 1 的方法直接 getRes 取用即可，
        // 因為在 RES.loadGroup('preload', 0, loadingView); 已經把圖都讀取到內存了

        // 建立 ImageLoader 對象
        var loader:egret.ImageLoader = new egret.ImageLoader();
        // 添加加載完成監聽
        loader.addEventListener(egret.Event.COMPLETE, this.onLoadComplete, this);
        var url:string = "resource/assets/egret_icon.png";
        // 開始加載
        loader.load(url);
    }

    private onLoadComplete(event:egret.Event){
        var loader:egret.ImageLoader = <egret.ImageLoader>event.target;
        // 獲取加載到的紋理對象
        var bitmapData:egret.BitmapData = loader.data;
        // 建立紋理對象
        var texture = new egret.Texture();
        texture.bitmapData = bitmapData;
        // 顯示
        this.addChild(new egret.Bitmap(texture));
    }

}