小游戏开发之Egret自定义插件压缩图片

引言

开发过小游戏的小伙伴们都知道，小游戏主包的大小不能超过4M，也就是说如果我们的小游戏代码+资源如果超过4M的话，我们的资源就需要放服务器上，或者采取分包的形式，将资源放在分包里面。前者的话需要额外的服务器开销，后者的话我们知道目前小游戏主包+分包的大小不能超过20M，假如我们游戏的资源比较多，又不想放服务器上，有缓解的办法吗？

压缩美术资源

压缩美术资源在游戏或应用开发中至关重要。首先，压缩可以减少资源文件的大小，从而减小应用的下载和安装时间，提升用户体验。其次，压缩后的资源占用更少的存储空间，使得应用占用更少的手机存储，方便用户安装其他应用。此外，压缩后的资源文件也有助于减少应用在传输时消耗的数据流量，以及加快加载速度，提高应用的响应速度。

另外，压缩美术资源还有助于减少应用在运行时的内存占用。大量的高分辨率、高质量的美术资源会占用较多的内存，导致应用在低端设备上运行缓慢或崩溃。通过压缩资源，可以降低内存占用，提高应用的稳定性和性能。

最后，压缩美术资源还可以降低应用开发成本。将资源文件压缩后，可以减少服务器存储和带宽开销，降低了运营成本。同时，压缩后的资源也更容易进行版本管理和更新，方便开发团队进行迭代开发和维护。

综上所述，压缩美术资源对于游戏和应用开发来说至关重要。它可以提升用户体验，节省存储空间和数据流量，改善应用性能，并降低开发成本。因此，在开发过程中，应该重视对美术资源进行压缩处理。

如何进行美术资源压缩

在本文中，我们使用pngquant 进行压缩。pngquant是一个用于png图片有损压缩的命令。命令常用的选项如下：

scss 复制代码

--force 强制覆盖现有的输出文件(短选项：-f) 
--skip-if-larger 在压缩时仅保存小于原始的文件
--output file    输出文件目标文件路径，而不是--ext (短命令: -o) 
--ext 设置输出文件名的自定义后缀/扩展名
--quality 设置图片颜色范围，值为0-100
--speed   设置速度和图片质量，速度越快质量越差。参数：1=slow, 3=default, 11=fast & rough
--nofs    禁止Floyd-Steinberg抖动

使用pngquant.exe压缩PNG资源的方法说明：

确保你已经安装了pngquant.exe程序。

打开命令提示符或终端窗口。

导航到包含要压缩的PNG文件的目录。

运行以下命令：pngquant.exe [选项] 文件名.png（其中，[选项]是你想要使用的参数，文件名.png是要压缩的PNG文件的名称）。

程序将会压缩PNG文件，并在同一目录下创建一个压缩后的PNG文件。

可以根据需要多次运行该命令来压缩其他PNG文件。

实践

实践过程由作者自己编写的微信小游戏《填色之旅》提供，大家可以自行搜索体验。由于我们的资源压缩仅仅需要应用到小游戏，因此我们需要把压缩工具嵌入到Egret工程，因此我们采用的是Egret的自定义插件。实践过程如下：

1.首先我们编写自定义的Egret插件。插件代码如下：

2.其中插件中的关键是child_process,它是 Node.js 的一个模块，用于创建和管理子进程。它允许你在 Node.js 应用程序中执行外部命令，并与这些子进程进行交互。我们主要用它来执行我们的压缩指令:

typescript 复制代码

let worker = require("child_process");
for (let file of this.pngArr) {
    worker.exec("pngquant.exe -f --ext .png --quality 90-90 \"" + this.outputDir + "/" + file + "\"");
}

3.将pngquant.exe置于项目的根目录。

4.在导出小程序的脚本中引入插件。

5.使用插件。

6.发布。

7.压缩前后对比。

总结

本文的重点内容，不知道大家有没有掌握：

小游戏的主包和分包大小。
压缩资源的重要意义。
运用 pngquant 进行资源压缩。
Egret 自定义插件的使用。
完整源码和压缩工具大家可以通过关注"亿元程序员"，发送"pngquant "获取。
游戏名字"填色之旅",欢迎大家搜索体验。
关注我，给大家分享更多的小游戏开发经验，分享更实用的工具，分享游戏开发者的心路历程。
觉得本文有帮助的可以点个赞和在看，谢谢大家。