Texture Merger 軟體用法

本文提及

• MovieClip 製作方式
• SpriteSheet 製作方式
• BitmapFont 製作方式

MovieClip 製作方式

step1. 準備一個動畫 gif

step2. 開啟 Texture Merger 選擇 Egret MovieClip

step3. 開啟將 gif 拉入 Texture Merger 視窗

step4. 導出並命名 player 會產出 player.json 跟 player.png

step5. 將 player.json 跟 player.png 拉入 preload 資源

step6. 將代碼加入 createGameScene 函式內即可

let playerFactory: egret.MovieClipDataFactory = 
    new egret.MovieClipDataFactory(RES.getRes('player_json'), RES.getRes('player_png'));
let mc_data:egret.MovieClipData = playerFactory.generateMovieClipData('player');
let player:egret.MovieClip = new egret.MovieClip(mc_data);
player.frameRate = 12; // 設定每秒播放12格
player.gotoAndPlay(0,-1); // 0 表示從第 0 格開始播放，播放次數 -1 表示 loop
this.addChild(player);

SpriteSheet 製作方式

step1. 準備多個圖檔 ( png 或 jpg )

step2. 開啟 Texture Merger 選擇 Sprite Sheet

step3. 開啟將多個圖片拉入 Texture Merger 視窗 ( 左側 Angela 等就是程式取用資源名 )

step4. 導出並命名 characters 會產出 characters.json 跟 characters.png

step5. 將 characters.json 跟 characters.png 拉入 preload 資源 ( 會發現只能拉 json 但沒關係)

step6. 將代碼加入 createGameScene 函式內即可

let spriteSheet = <egret.SpriteSheet>RES.getRes('characters_json');
let Angela = this.addChild(new egret.Bitmap(spriteSheet.getTexture("Angela"))); // 只取其中一個角色
Angela.scaleX = Angela.scaleY = 10;
(<egret.Bitmap> Angela).smoothing = false; // 不要平滑處理

BitmapFont 製作方式 - 方式1 圖片組

step1. 準備0-9圖檔 ( png )

step2. 開啟 Texture Merger 選擇 Bitmap Font

step3. 開啟將0-9圖片拉入 Texture Merger 視窗 ( 左側資源名請更改 0-9 如下 )

step4. 導出並命名 mynums 會產出 mynums.fnt 跟 mynums.png

step5. 將 mynums.json 跟 mynums.png 拉入 preload 資源

step6. 將代碼加入 createGameScene 函式內即可

let bt = new egret.BitmapText();
bt.font = RES.getRes("mynums_fnt");
bt.text = '0123456789';
bt.scaleX = bt.scaleY = 8;
bt.smoothing = false;
this.addChild(bt);
// 字體製作也可以用中英文字

BitmapFont 製作方式 - 方式2 字體簿
step1. 請先學會方式1
step2. 選擇 Texture Merger 工具列的『更多字符』並輸入想要在代碼用到的字符

step3. 按確定後

step4. 剩下步驟跟方式一一樣（方式一可以製作比方式二更花俏的字體）