性感码农,在线解答:有什么问题可以扫屏幕右方二维码加我微信或者在下方留言。

H5游戏注重加载速度,让用户以最快的时间进入游戏,然后可以立即体验游戏。

H5版本的优化,大方面来说以下几点:

  • 优化文件结构
  • 减少请求 
  • 减小包体
  • 减少游戏中的drawcall

具体可以细分为以下几个:

  1. 优化文件结构,就是说,要把游戏中第一眼展示给玩家的,玩家可以立即体验的游戏资源预先加载,像logo,主界面资源,这些图片都是需要进游戏之前加载的。另一些资源,比如音效,特定状态下出现的特效,可以在进游戏之后再进行加载。这样可以缩短玩家进游戏的时间。一定要注意一个原则问题,就是玩家不能卡住,或者不能卡住太长时间,否则会大大影响到体验,导致用户流失。
  2. 减少打包后生成的文件数,则可以减少游戏的请求数。文件太多会增加请求数,并拉长单个文件下载前的等待时间,尤其是特别小的文件,可能下载只要几毫秒,但是因为请求数多,要等待几百毫秒;
  3. 减小单个文件的体积,因为大文件会拉长下载时间,所以大文件要根据实际情况拆分,这个优化点要在打出包之后看实际加载情况来定;
  4. 图片采用TinyPng压缩方案来缩小图片体积,点击这里查看
  5. 音效采用单声道,并降低码率,缩小音效体积
  6. 预制体采用延迟加载策略;
  7. 频繁创建和销毁的组件使用对象池或者重复使用,点击查看ScrollView重复使用item的例子
  8. 代码优化,游戏的逻辑优化(这方面的优化就要看个人的编码水平了,主要的优化点就是减少组件的创建和销毁,尽量使组件可以复用)。

优化文件结构

优化文件的工作如何验证已经做好了?打包之后(一定是打包后),在浏览器的开发者工具里查看network一栏,并勾选上Disable cache选项,然后自己搭建一个本地服务器,修改一下服务器的下载带宽,模拟网络情况不好时的加载情况,这样你就可以清晰地看到加载了多少资源进入游戏,进入游戏之后又加载了多少资源(服务器推荐使用nginx,修改带宽方法自己查)。

减少文件请求数

当把以上的工作做好以后,就可以开始下面的优化了。这里着重讲下减少请求数的解决方案。

想要减少请求数,我们先要搞清楚请求的文件都来自哪里。Creator打出web-mobile包后,有好多文件,我们来一一解答下。最外层目录的文件就不多说了,缺一不可,都是很重要的游戏启动文件,但也可以进行优化,在后面说明。

我们看一下res目录里面:有import、raw-assets、raw-internal共3个文件夹。

import:这个文件夹里有一些奇怪的目录,放着长文件名的json文件,这些是游戏场景,预制体,图片信息的配置文件;

raw-assets:这是游戏的图片,声音文件位置;

raw-internal:这是游戏默认的一些图片,粒子资源存放目录。

我们现从这3个文件夹入手。

import文件夹

import文件夹减少配置文件生成。减少配置文件生成需要在制作游戏时遵循一个原则,那就是官方文档里关于resources目录的解释:所有需要通过cc.loader.loadRes动态加载的资源,都必须放置在 resources 文件夹或它的子文件夹下。如果一份资源不需要由脚本直接动态加载,那么千万不要放在 resources 文件夹里。所有放在resource里未被场景或者预制体文件引用,并使用cc.loader.loadRes方法加载的文件(声音资源例外,引用不引用都是它自己,打包之后它只会消耗一个请求),打包之后都会在import文件夹生成一个json文件。所以我们要尽量让资源被引用到,引用并不会消耗性能,使用cc.instantiate方法创建并add到节点才会消耗性能。像预制体,动画文件,一定要放在res目录。如果项目中使用cc.loader.loadRes方法加载预制体,则放弃这种创建方式,把预制体引用到场景中,需要的时候再创建。在我看来,cc.loader.loaderRes方法只适用于播放音效,加载url图片(如微信头像)。图片只要有被引用到,放在res目录和resources目录都是可以的。

raw-assets文件夹

raw-assets文件夹存放声音和图片文件,一个声音文件就是一个请求,这个我们无能为力。图片使用图集,自动图集和TexturePacker都可以。但使用自动图集时要注意上面的问题,一定要把所有图片都引用到。否则放在resources目录下的未引用到的图片就会产生一个json配置文件。粒子图片无法打成图集,有一个比较好的优化方案,就是把粒子图片使用的图片转换成字节码,放到粒子文件.plist文件中(推荐使用Particle Designer ),亲测web平台可以完美运行,原生平台不支持。

raw-internal文件夹

raw-internal目录我们可以完全去除掉。如果需要使用到Creator的默认图片,则让美术同事做一张一样的图拿出来放在res目录或resources下。需要注意的一点,创建button组件时,transition属性选到SPRITE看一下,如果不把这边默认的图片都叉掉,就算选择了SCALE或者其它属性,依然会在打包的时候把默认图片打出来,导致请求的增加,游戏drawcall的增加。每一个button都有这样的风险,所以一定要注意一下。项目中没有使用到Creator默认图片的组件,在打包的时候自然就不会生成这个目录了。

外层文件优化进阶

在这之后又有了新的思路,点击查看H5优化方案进阶,文件的优化又做了一个小小的升级。

打包之后把splash.png图片和style-mobile.css文件合并到index.html中也可以减少两个请求。方法如下:

  1. 把splash.png使用在线base64转换工具,把png图片转换成base64格式的长字符串,点击这里转换
  2. 把转换得到的字符串替换style-mobile.css文件中的#splash中的background的url内容,不用加引号,直接把./splash.png替换成上面得到的字符串;
  3. 在index.html中找到对style-mobile.css文件的引用位置,注释掉,并添加新的标签<sytle>xxx</style>,然后把style-mobile.css文件中的内容复制,并替换掉xxx;
  4. 把生成好的index.html文件放到build-templates文件夹中(不知道这是什么的,点击这里查看官方文档),如果文档找不到,可以在文档里搜索定制项目构建流程。

这样就成功把两个很小的文件又融入到了index.html中,减少了两个请求。

以上工作做完了,你可能觉得main.js,setting.js文件也可以放到index.html中,也不是不可以。但我们发布web版本,构建时一般都勾选md5选项,这样每次生成的文件内容可以会有改变,导致文件的后缀也会随着改变,放入模板中不太合适,所以在打包之后,追求极致请求数的同学,可以把main.js文件和setting.js文件也整合到index.html中。

延迟加载策略

延迟加载是什么?举个简单的例子,网页游戏进游戏之后,有些图片非常模糊,人物有的也可能就是个黑影身上加个问号,但是完全不影响游戏逻辑,你的游戏可以正常进行,并且看到随着时间的推移,图片慢慢变得清晰了,人物也都慢慢出来了。这就是在延迟加载,不会影响到游戏的进行,但是显示上可能和正常的游戏不一样。Creator的H5版本,一些预制体如果不勾选延迟加载,则会卡住游戏。再举个简单的例子,假如游戏里有很多特效绑定在一个预制体上,这个预制体上的图片有部分必须要在进入游戏之前加载,但是另一部份可以在进入游戏之后再加载。如果这个预制体没有勾选延迟加载,那么再调用这个预制体的时候,系统会去检测这个预制体上用到的图片是否已经全部加载了,如果没有,那就会卡住等待。如果勾选了延迟加载,就不会卡住,而是把已经加载的图片显示出来,未显示的图片会在加载完成之后自动显示出来。延迟加载策略可用于游戏玩法主场景的预制体,主场景玩法中必要的资源在进入游戏之前加载,特效资源进入游戏后加载,这样保证玩家不会在游戏环节中卡住,又可以保证加载速度快。

减少游戏Drawcall

减少drawcall的办法有两个,打图集,优化游戏的场景组件结构。一般在打了图集之后,drawcall都能得到很好的控制。具体的drawcall介绍请移步官方文档。点击查看

ok,以上就是H5版本的优化方案,有什么问题,可以在下方留言。

性感码农,在线解答!

发表评论

电子邮件地址不会被公开。 必填项已用*标注