egret微信小游戏项目图片管理

egret微信小游戏项目图片管理

工具—Egret Launcher中下载 egret Texture Merger

• 图一
• 

工具达到的效果—

• 每次看到assets文件夹下面那么多图片就头疼，通过这个管理工具对所有需要用到的图片进行归类，方便将来对图片进行二次操作
• 更少的图片个数也意味着更少的图片网络请求，这样整体游戏的加载时间就得到了压缩，游戏体验必然更好

工具达到目的的实现方式—

• 通过将很多小的图片进行合成为一个.json文件和一个.png文件，json文件中对应着每张小图片在合成的大图片中的坐标，进而在egret中对图片进行更方便的管理，如下图第一张为合成后的json文件截图，第二张为合成后的大图：
• 图二
• 
• 图三
• 

工具的使用方法

• 1. 首先在Egret Launcher中下载 egret Texture Merger
• 2. 打开工具之后选择Sprite Sheet选项，开始进行图片的合成操作
• 3. 将需要合成的小图片首先放到一个独立于项目的文件夹，方便将来对文件夹图片进行增减，因为assets文件中用于合成的小图片马上会删除
• 4. 点击新建项目选项，输入适合自己归类的文件名，此处以common为例。
• 5. 将你需要合成的图片拖动到编辑器中，此时软件能够完成的功能就结束了，下面的重点是
• 6. 点击保存项目此时会生成一个common.tmproject文件，这个文件作用
  • 1. 将来我们在对合成的common.json和common.png进行增减图片时，该文件能够被今天使用的texture merger文件打开，并链接到本地文件位置，进行进一步的操作
  • 2. 这也是为何在步骤3.中使用一个独立的文件夹保存需要合成的图片的原因
• 7. 点击导出文件，将文件导入到egret项目的assets文件夹下
• 8. 在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会自动更新

• 9. 加载资源组，在main.ts中loadResource函数下加载common.json文件

  await RES.loadGroup("common", 0, loadingView);

• 10. 重启项目刷新，整个项目中的文件会自动追踪到自己的文件位置，不用二次编辑文件地址

以上就是整个使用步骤，如果有不妥或者疑问欢迎留言交流。

ps：文中markdown图片地址使用的免费ipic软件生成，第一次用这个软件还不错