likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 12

引言

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

压缩美术资源

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

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

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

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

如何进行美术资源压缩

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

--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资源的方法说明:

  1. 确保你已经安装了pngquant.exe程序。
  2. 打开命令提示符或终端窗口。
  3. 导航到包含要压缩的PNG文件的目录。
  4. 运行以下命令:pngquant.exe [选项] 文件名.png(其中,[选项]是你想要使用的参数,文件名.png是要压缩的PNG文件的名称)。
  5. 程序将会压缩PNG文件,并在同一目录下创建一个压缩后的PNG文件。
  6. 可以根据需要多次运行该命令来压缩其他PNG文件。

实践

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

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

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

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

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

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

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

5.使用插件。

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

6.发布。

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

7.压缩前后对比。

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

总结

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

  • 小游戏的主包和分包大小。

  • 压缩资源的重要意义。

  • 运用 pngquant 进行资源压缩。

  • Egret 自定义插件的使用。

  • 完整源码和压缩工具大家可以通过关注"亿元程序员",发送"pngquant "获取。

  • 游戏名字"填色之旅",欢迎大家搜索体验。

  • 关注我,给大家分享更多的小游戏开发经验,分享更实用的工具,分享游戏开发者的心路历程。

  • 觉得本文有帮助的可以点个赞和在看,谢谢大家。