《乱世王者》是由腾讯天美工作室出品的一款战争策略手游,2017 年 8 月开启测试,数天之内便取得了 App Store 中国区畅销榜前三的成绩,充分体现了市场、玩家对于这款游戏的认可。
在尊重和传承经典 SLG 玩法的前提下,游戏做出了不少突破:游戏构建了一个大世界,为玩家呈现更加真实、热点的游戏环境和生态;游戏融入了极具乐趣的养成模式,使得游戏策略性更强;游戏内加入了如 AR 寻宝玩法、 自定义头像等酷炫新玩法。
6 月 22 日,来自腾讯的游戏高级工程师 肖程祺 受邀出席了 Cocos 上海沙龙,向开发者分享了《乱世王者》的深度优化方案,包括《乱世王者》项目中 地形 处理和优化思路,深入讲解了游戏针对 纹理内存 优化的解决方案,并分享了项目对 引擎渲染层 所做的一些优化。
肖程祺
在获得程祺同意后,Cocos 将其优化方案整理成文,同更多开发者进行分享,具体内容如下:
《乱世王者》深度优化方案分享
腾讯 肖程祺
《乱世王者》是基于 Cocos2d-x 开发的一款战争策略类游戏,需要在游戏玩法创新的同时,在美术品质和性能方面也做出突破。
一、SLG 地图 的微创新和优 化
美术上想要增加细节表现力,让地形的细节更加丰富,同时需要增加 3D 透视的感觉。
实现成果:
1、丰富的细节
地形细节丰富的代价:
tile 数量从 100 块左右提升到 500 多块。
渲染压力提升,渲染层数从 2 层变 5 层,拖动地图的时候重新组织数据的开销增加。
面临的问题有:
我们的优化方案:
(1)提升贴图的利用率,减少地图纹理的内存
重新排列 tile, 贴图利用率从 50%提升到 85%
效果:
5 张贴图最终变成 3 张
(2)建立更高效的数据组织,提升加载效率
地图数据离线处理后,以 protobuff 的数据格式存储,并使用 zstd 无损压缩进行处理,加载速度和大小都得到保证。
(3)合并 地图批次,减少不必要的顶点数据
每一层地图的都根据 TextureID 排序后绘制,由于顶点和 UV 数据已经存储在 VBO 里面,只需要根据裁剪结果修改 indexbuffer 即可。 5 层一共 3 张贴图,意味着 drawcall 数量不会超过 15 个。
2、3D 透视关系效果
(1)处理3D透视关系
所有物件绕x轴旋转
至垂直于摄像机的fov中线的角度
(2)解决大物件的视角偏差
边缘位移:
对于皇城和虎牢关这种比较“宽大”建筑单位,在拖动大地图的过程中会出现边缘位移的现象,这个效果也是非常影响美术表现的。
我想到的解决方案是,将大的建筑单位拆分为多个部件,并对每个部件分别作 billboard 处理。
以皇城为例,考虑到部件之间的关联性,使用了如下的拆分方案,可以看到边缘位移问题得到了很好的解决。
(3)解决 3D 物体的透视带来的偏差
为了表现更加丰富的怪物细节以及更流畅的动画,美术希望直接在现有的场景中加入 3D 模型。
由于我们改用了 3D 摄像机,同时大地图场景单位都是 2D 资源,加入 3D 模型后两者的透视效果不一致。
在透视相机下,左右移动相机透视问题严重
容易想到的解决方案:先将 3D 模型按照指定角度渲染到 RT 上,再将 RT 上的纹理和其他 2D 元素一样渲染到场景中。但是 Cocos2d-x 对多照相机和多渲染路径的支持不够友好,这种方案需要对引擎作比较大的改造,而且会增加更多的显存占用。
我们采用的是第二个方案:在每帧绘制 3D 模型前,计算出其缩放和位移,然后再使用正投影照相机参数绘制 3D 模型到屏幕。整个过程只需要一次绘制,没有额外的纹理占用,而且对引擎的改造也是最小的。
渲染 3D 物体前自己计算正交投影矩阵
上述这些效果提高了《乱世王者》大地图的美术品质,与同类 SLG 游戏对比,我们游戏获得了更多的关注。
二、纹理内存的深度优化
《乱世王者》内存中资源的大致占比为:
用 4 步搞定内存大户: 纹理
1、Smash Texture
Smash Texture 解决的问题:
(1)Smash Texture Pipeline
drawcall的降低
未作任何其他改造的情况下,批量使用 smash texture 后,当前界面的 drawcall 从 64 降低到了35。
(2)减少 IO:Block Cache
现网版本用户行为上报的 cache 命中率
(75%左右)
(3)提升Smash Texture的使用率
原本 smash texture 里面的每一行是 32 像素统一高度,利用率比较低(比如说 36 像素高的图片,最后还会留下 6 像素左右的空间。填充到 32 像素高的 smash texture 行里会存在浪费),因此我们按照下图,重新划分了高度行,容纳更多的 UI 图元。
经过优化,smash texture 的使用率可以从 80%提升到 90%。
(4)总结 Smash Texture 的优缺点
优点:
缺点:
2.文字系统的内存优化
提升贴图利用率:改良装箱算法
基于 maxrect 做优化,将纹理利用率提升到 95%+。
提升贴图利用率:减少字号数量
统计了文字的字号使用频率,根据字号分布,我们取了 5 个字号,其他字号向下取到最接近的预定义字号上,缩放后渲染,大于最大字号的时候则用最大字号放大后渲染。
3.压缩纹理
压缩纹理的一些痛点:
压缩纹理优化:
4.Texture Pool
内存管理的小结:
三、解决 UI batch 的痛点
即便 Smash Texture,即便 Font 在一张纹理上,我们还是面临着一些 darwcall 明显可以优化的地方。
期望的渲染顺序:
通过 TriangleCommand 底层的 dynamic batching,自动合并批次。
Cocos2d-x的默认渲染顺序:
充分利用 TriangleCommand:
利用 GlobalZ 来解决合批的问题:
新的问题:
当 UI 有多层弹窗的时候,上下两层的控件由于 GlobalZ 都从 1 开始,所以会出问题。
改动最小的解决方案:
改动后的情况:
四、结语
程祺: Cocos2d-x 使用上手难度比较低,实际使用项目也很多,在开发的过程中也存在一些普遍的性能和优化痛点,希望这次为大家带来的经验分享,能帮大家在优化的道路上走得更加顺利。我们的 腾讯天美上海 T1 工作室 正在 招聘 Cocos2d-x开发 ,对游戏开发感兴趣且有 Cocos2d-x 使用经验的朋友,欢迎加入我们,简历投递邮箱: cloudxiao@tencent.com。
C 姐:非常感谢 程祺带来的分享!并祝项目更加顺利!
C 姐: Cocos 引擎一路走来,收到了很多来自用户的宝贵建议, 通过不断的优化和改进,在 Cocos Creator 中,上述许多性能问题都已得到解决。 包括:
留言与评论(共有 0 条评论) |