egret微信小遊戲項目圖檔管理

工具—Egret Launcher中下載下傳 egret Texture Merger

• 圖一

• 

工具達到的效果—

• 每次看到assets檔案夾下面那麼多圖檔就頭疼，通過這個管理工具對所有需要用到的圖檔進行歸類，友善将來對圖檔進行二次操作
• 更少的圖檔個數也意味着更少的圖檔網絡請求，這樣整體遊戲的加載時間就得到了壓縮，遊戲體驗必然更好

工具達到目的的實作方式—

• 通過将很多小的圖檔進行合成為一個.json檔案和一個.png檔案，json檔案中對應着每張小圖檔在合成的大圖檔中的坐标，進而在egret中對圖檔進行更友善的管理，如下圖第一張為合成後的json檔案截圖，第二張為合成後的大圖：
• 圖二

• 

• 圖三

• 

工具的使用方法

• 1. 首先在Egret Launcher中下載下傳 egret Texture Merger
• 1. 打開工具之後選擇Sprite Sheet選項，開始進行圖檔的合成操作
• 1. 将需要合成的小圖檔首先放到一個獨立于項目的檔案夾，友善将來對檔案夾圖檔進行增減，因為assets檔案中用于合成的小圖檔馬上會删除
• 1. 點選建立項目選項，輸入适合自己歸類的檔案名，此處以common為例。
• 1. 将你需要合成的圖檔拖動到編輯器中，此時軟體能夠完成的功能就結束了，下面的重點是
• 1. 點選儲存項目此時會生成一個common.tmproject檔案，這個檔案作用
  • 1. 将來我們在對合成的common.json和common.png進行增減圖檔時，該檔案能夠被今天使用的texture merger檔案打開，并連結到本地檔案位置，進行進一步的操作
  • 1. 這也是為何在步驟3.中使用一個獨立的檔案夾儲存需要合成的圖檔的原因
• 1. 點選導出檔案，将檔案導入到egret項目的assets檔案夾下
• 1. 在vscode編輯器中修改default.res.json檔案，新增下面兩項：

group數組下新增

{
			"keys": "common",
			"name": "common"
		}
           

resources數組下新增

{
			"url": "assets/common.json",
			"type": "sheet",
			"name": "common",
			"subkeys": "common_bg_png,firstLight_png,long_bg_png,raffle_bg_png,secondLight_png"
		},
           

其中group中的兩個values值必須和resources中url和name的values值保持一緻，此值是步驟7.中到處檔案我們命名的檔案名，subkeys可以為空，馬上在egret編輯器中點選common檔案右鍵重新整理subkeys會自動更新

• 1. 加載資源組，在main.ts中loadResource函數下加載common.json檔案

• 1. 重新開機項目重新整理，整個項目中的檔案會自動追蹤到自己的檔案位置，不用二次編輯檔案位址

以上就是整個使用步驟，如果有不妥或者疑問歡迎留言交流。

ps：文中markdown圖檔位址使用的免費ipic軟體生成，第一次用這個軟體還不錯