core-egret.CanvasRenderer

egret.CanvasRenderer 動態材質設計範例

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 給你最乾淨的程式碼, 從這行以下開始寫喔 ---

        // 此範例為材質動畫設置辦法
        // 依照 index.html 設置 canvas 模式, 選取 web.WebGLRenderer 或 egret.CanvasRenderer
        const renderer = egret.Capabilities.renderMode == 'webgl' ? egret.sys.systemRenderer : egret.sys.canvasRenderer;
        
        // 建立材質繪製元素 (半徑為 50 的橘色圓)
        const shape = new egret.Shape;
        shape.graphics.beginFill(0xFFCC00);
        shape.graphics.drawCircle(50, 50, 50);
        shape.graphics.endFill();
        // 建立 100 x 100 繪圖緩衝區
        const buffer = new egret.sys.RenderBuffer(100, 100);
        // 設置材質
        const texture = new egret.Texture();
        texture.bitmapData = new egret.BitmapData(buffer.surface);
        // 設置顯示圖片
        const image = new eui.Image(texture);
        this.addChild(image);
        // 針對材質進行動畫繪製
        this.addEventListener(eui.UIEvent.ENTER_FRAME, () => {
            buffer.clear(); // 清空繪圖緩衝區
            shape.scaleX = shape.scaleY = Math.random(); // 隱含更改 matrix 的 scale 屬性
            renderer.render(shape, buffer, shape.matrix); // 重新繪製 shape 於繪圖緩衝區
        }, this);
    }

}