egret插件使用案例

匿名 (未验证) 提交于 2019-12-02 22:56:40

2018年8月13日,白鹭引擎发布5.2.7 版本。本次版本主要新增了两大功能:命令行增加自动合图插件TextureMergerPlugin,微信小游戏支持库增加二进制和声音缓存方案。

同时,本次版本还是对 5.2 版本的一次集中性缺陷修复,更新修复了大家反馈的涉及2D渲染- JavaScript、AssetsManager、微信小游戏支持库的数个BUG。在此,我们要再次特别感谢开发者们通过Egret社区、白鹭引擎小游戏开发微信群等渠道提交的BUG反馈。

据小编了解,5.2.7版本中新增的自动合图插件可以帮助开发者在开发期使用碎图,在发布后将碎图自动整合为整图发布,提高开发者开发和发布的效率,完善整个开发和发布的工作流。
由于原有的文件缓存方案只缓存了图片和文本资源,所以这次微信小游戏支持库新增的二进制和声音缓存方案,解决游戏第二次进入不重新加载资源问题,节省资源服务器费用,提高用户体验。

引言

本文不详细介绍各插件的细节,只展示使用方法,如果开发者对细节有兴趣可以参考 文档

为了让开发者以更简单的使用Egret内置的插件,我们将通过一个案例来展示插件的具体使用方法和注意事项。

本文案例从一个刚编写完成的eui卡牌项目开始发布到微信小游戏,为了让代码包的体积更小更好管理,逐步添加使用不同的插件,以实现不同的需求。

todos

  • 使用UglifyPlugin将代码混淆压缩

  • 使用ResSplitPlugin把部分资源分离出去

  • 使用ZipPlugin把文件压缩成zip格式

  • 使用TextureMergerPlugin将纹理合并,且用ConvertResConfigFilePlugin修改res.json配置文件

项目初始化

  1. 把index.html中的data-scale-mode改成fixedWidth

  2. 打开EgretLauncher,将本项目发布成微信小游戏

  3. 打开微信开发者工具

使用UglifyPlugin压缩代码

在微信开发者工具可以看到,js文件夹中5个库文件和一个main.js

现在需求是是要把库文件压缩到一个文件lib.min.js中。

回到EgretWing,编辑sctipts下的config.wxgame.ts:

 

保存后在终端执行:

 egret build

可以在微信开发者工具看到发布后的代码,js文件夹内的库文件已经被压缩到lib.min.js。

但是报错,找不到eui,这是因为自动生成的manifest.js里面对js的引用顺序出错,需要优先引用lib.min.js

打开根目录下的manifest.js, 修改一下引用顺序。

 require("js/lib.min.js") require("js/main.js") require("js/default.thm.js")

每次编译的时候manifest.js都会被重新生成,所以我们使用一个自定义脚本来修改他们的顺序

打开 scripts下的myPlugin.ts :

  
 

这个文件就是用来自定义插件的,在config.wxgame.ts中已经默认引用,所以只需要调用即可,注意调用顺序

  
 

使用ResSplitPlugin分离资源文件

因为微信对代码包的大小是有限制的,总大小不能超过4M(使用分包功能可以提升到8M),所以我们需要通过ResSplitPlugin把某些游戏资源文件分离出去,将游戏资源放置在一个外部CDN服务器上,需要的时候动态加载即可。

编辑config.wxgame.ts:

 

保存后在终端执行:

 egret build

微信开发者工具中resource > art 下的aboutheros_goods已经不在了。

被分离出去的在项目根目录中 egret-eui-demo_wxgame_remote 文件夹内。

使用ZipPlugin把文件压缩成zip格式

为了减少加载次数和传输量,我们可以把文件压缩成zip格式,使用的时候可以使用第三方库JSZip来读取使用zip文件。

使用ZipPlugin插件之前,需要安装cross-zip 和 cross-zip-cli , 在终端中输入:

 

安装完成之后,在config.wxgame.ts添加代码:

 

项目中其实assets里面的资源都是没有用到的,这里我们用它来演示压缩插件的使用。

保存后在终端执行:

 egret build

执行之后可以在微信开发者工具看到,resource目录下原来的assets文件夹已经被压缩成了assets.zip。

使用TextureMergerPlugin,ConvertResConfigFilePlugin合并纹理集

项目中使用的图片资源都是单独的png文件,在加载的时候每张图片都会单独请求。我们可以通过合并纹理集的方式把这些图片合成一张图,以减少请求数量。使用插件之前,我们需要有纹理集的配置文件tmpropject, 可以用两种方式生成:

  1. 使用TextureMerger工具

  2. 执行脚本生成

这里使用第二种方法,使用脚本autoMerger.js:

 
  把这个脚本放在scripts文件夹内,这个脚本是根据项目的default.res.json文件的内容来生成tmpropject文件

在终端中执行:

 nodescripts/autoMerger.js

执行成功之后可以在resource文件夹中看到多出了一个TextureMerger文件夹,里面就是根据default.res.json分组生成的tmpropject文件。

现在只需要执行TextureMergerPlugin插件就可以自动合并,这里需要注意TextureMergerPlugin依赖 TextureMerger 1.7 以上的版本,如果不符合请自行安装,并且在运行时TextureMerger需要处于关闭状态。

 

保存后在终端执行:

 egret build

执行完成后,在微信开发者工具可以看到,resource > TextureMerger 内新增了三个png文件,就是合并之后的纹理集。游戏运行的时候只需要加载这三个纹理集就可以,无需加载那些单独的png文件但是需要去res.json里面配置,把单独的资源引用都删除,加上纹理集的引用。

这些操作当然不需要手动去完成,现在只需要使用ConvertResConfigFilePlugin插件就可以实现这个功能。

编辑config.wxgame.ts:

  
 

保存后在终端执行:

 egret build

在微信开发者工具中,打开调试器,在network面板可以看到加载的纹理集。

这里有个注意事项,在游戏中点击英雄按钮,切换到英雄场景时,会发现列表里面的图片加载不出来。

在network面板可以看到加载请求是单独的png文件,而不是纹理集。

这是因为列表中的图片地址是直接使用url。

  
 

这种引用方式的图片,需要开发者手动在代码中修改,将图片地址修改成纹理集中的图片。

结语

本文通过使用UglifyPlugin,ResSplitPlugin,ZipPlugin,TextureMergerPlugin,ConvertResConfigFilePlugin插件,使项目发布到微信小程序之后的代码包体积减小,用户发起的请求数变少,且将代码混淆压缩。

使用Egret自带的插件,已经可以满足开发者的基本需求,如果有针对项目的特殊需求,可以选择自定义插件

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!