手机发烫怎么办？消消乐游戏发热优化总结

作者：Marvinc

1、背景

项目组同学在体验斗棋牌消消乐玩法时，反馈iPhone7p玩半个小时，手机发烫，针对这个问题，程序和美术同学采取将静态UI渲染到纹理、降低帧率、简化小部分动画等方式进行了优化。

2、发热原因

游戏发热严重，主要受CPU或者GPU占用过高影响。分析之后发现，消消乐玩法CPU占用不高，而GPU占用却很高，GPU占用高基于如下几个原因：

消消乐玩法待机状态如下图所示：图中红色箭头指向场景中的静态纹理，并由里向外进行了编号，从图中可以看出，场景左侧区域包含两层静态纹理，中间区域包含三层静态纹理，右侧区域包含两层静态纹理。

Cocos2dx引擎在绘制场景代码如下图所示：图中代码说明，每次渲染时，首先对节点据zorder和加入场景树的前后顺序进行排序，从场景根节点开始递归遍历绘制，不会判断节点之间是否有遮挡关系，这意味着场景中，同一个区域有几层纹理，GPU就需要画几层。消消乐玩法，屏幕中被重复覆盖的面积是屏幕面积的两倍都不止，远大于斗棋牌中其他玩法。每次渲染场景，上图中红色区域中的像素都需要GPU重复绘制多次。

消消乐结算动画有三个，根据收益与投入比分别播放小奖动画、中奖动画和大奖动画，其中中奖动画和大奖动画比较复杂，其中中奖动画如下图所示：全屏纹理多达5个。

3、优化方案

针对消消乐发热严重的原因，提出以下优化措施：

1、将静态UI渲染到纹理，将静态多层纹理渲染到一个纹理上，可以有效减少同一个像素被重复绘制的次数，从而有效减少GPU的负担；

2、降低帧率，在不影响体验效果的情况下，适当降低帧率，将帧率限制在30帧；

3、简化部分结算动画，中奖动画和大奖动画比较复杂，全屏纹理较多，其中大奖动画出现概率较低，与美术同学商量后，适当简化了中奖动画。

下面重点介绍一下渲染到纹理的优化方案。

将静态UI渲染到纹理有如下两种方案：

方案一：

１、修改布局，将静态UI和动态UI分离，静态UI的子节点不包含动态UI；

２、将静态UI逐个渲染到纹理上；

３、将纹理挂到场景树上；

４、隐藏静态UI；

方案二：

１、修改布局，将静态UI和动态UI分离，静态UI的子节点不包含动态UI；

２、将动态UI隐藏；

３、将整个场景树渲染到纹理上；

４、将纹理挂到场景树上；

５、隐藏静态UI；

６、恢复动态UI展示；

方案一优缺点：

优点：不需要处理动态UI；

缺点：因为将静态UI逐个渲染到纹理，所以必须计算节点的各种变换矩阵，渲染完之后，需要还原变换矩阵，因为后续可能还会用到；

方案二优缺点：

优点：不需要结算节点变换矩阵，同时方案更具普适性；

缺点：需要处理动态UI；

通过对比以上两种方案的优缺点，最终选择了方案二。

致谢：优化方案由gladhu提出，kelvinxiong实现。

4、优化结果

测试设备：ipad 9.7

优化前：

优化后：

从上图可以看出，不管是待机状态还是消除过程中，GPU占用都明显降低。优化后消除过程中GPU占用还是比斗棋牌其他玩法高，是因为消除过程中，动画效果比较复杂，在不修改美术效果的前提下难以优化。

优化前iPhone7p真机测试半个小时，明显发烫；优化后，iPhone7p真机测试半个小时，已无明显发烫。