1.3 以上所有版本 canvas模式真机掉帧问题，第二版本。期望关注！

Creator 2.x
#1

首先，说明一下，在半个月前，我就提过这个问题，由于要急着上线，只在论坛讨论了这个问题。最后没有结果的结束了，感觉一个炸弹就摆在身边。

我为什么一定要与canvas模式纠结？微信页游准备上线，拿了不少真机测试。发现有些机器掉帧十分严重（卡钝），根本无法进行游戏。IPHONE6，IPHONE6 Plus 都会卡，神奇。IPHONE7 不会。如果这样，项目基本报废。看了一些帖子，发现ios8，ios9 应该是创建不了webgl ，所以是canvas渲染模式。

但回想，当初项目开启的时候，拿引擎做了技术测试。问题不大啊，虽然不是特别流畅，但也不至于掉帧到不能玩。

原来，我升级了1.3.1，提升webgl渲染效率。但canvas模式可能存在一些问题（我个人猜测，不一定，也有可能是我自己写程序的问题。）

后来，我们团队又重下载1.2.1来开发，所有真机都没太大问题了，但是想一想，官方可能认知到这问题，也可能没认知。(因为上一贴子，有人说，1.2.1之后，canvas 模式的代码没动过。)为了自己的项目，决定花再多时间，也要找到，到底是哪些代码，或则哪些控件，导致掉帧。

花费4天，一点点的测试。1.3.2 与 1.2.1 一步一步测试。

最终做了一个dome

希望官方帮看一下，也有可能是我的错误导致。如果是我的错误帮忙指正。谢谢。当然也有可能canvas 模式要退出历史的舞台，但是在2017年前，应该还会有人的手机不会升级IOS10.
代码不超过20行

测试方法.
电脑1->安装 1.3.2->iphone6(ios8) 或者 iphone5(ios 9.3.1)-> 用微信扫码

以下测试均使用同一台手机、同样微信扫码

测试1：
50个 Animation ，同时移动

cocos1.2.1 canvas 模式
平均FPS: 60

cocos1.3.2 canvas 模式
平均FPS: 40

测试2：
50 个Animation ，自转
cocos1.2.1 canvas 模式
平均FPS: 60

cocos1.3.2 canvas 模式
平均FPS: 25

http://pan.baidu.com/s/1qXGalQW

#2

感谢你的反馈，我们应该在 IOS9 的微信上重启 WebGL 渲染模式 @panda ，否则 Canvas 太坑了。
另外对楼主的项目，有一个临时解决方案是强制开启 WebGL，就是在发布后的 main.js 中，为 options 对象添加一个属性 renderMode: 2

1赞
#3

万分感谢！！！！

#4 
    var option = {
        //width: width,
        //height: height,
        id: 'GameCanvas',
        scenes: settings.scenes,
        debugMode: settings.debug ? cc.DebugMode.INFO : cc.DebugMode.ERROR,
        showFPS: settings.debug,
        frameRate: 60,
        jsList: jsList,
        groupList: settings.groupList,
        collisionMatrix: settings.collisionMatrix,
    renderMode: 1
    };

好像强行开不了。ios9

#5

我记错了，是 renderMode: 2 才是 WebGL

#6

目前在 iOS 9 的 UIWebView（也就是微信使用的 WebView）上关闭了 WebGL，原因是在 iOS 9 的 UIWebView 有 bug，在用户关闭微信，再返回的过程中，有极大概率会导致微信崩溃。有几个非常重要的使用路径会重现这个问题：接电话；部分跳出网页的支付方式；

主要是这个原因让我们作出在 iOS 9 UIWebView 上关闭 WebGL 的。微信团队一直在努力将 UIWebView 替换为 WKWebView（就不会有此问题），但不知为何至今没有完成。

如果你需要强制开启 WebGL，可以尝试 Jare 给的方案，或者在 main.js 的最开始做下面的事情：

window.indexedDB = {}; // 这是我们判断有问题的 UIWebView 的方法

就可以开启 WebGL 了，但崩溃的问题是无法解决的

#7

谢谢。jare提供的方法，renderMode:2 在真机上，我无法进入游戏。

panda提供的
window.indexedDB = {};
可以进入游戏，帧数也回归正常。但会有崩溃问题。

还是先用1.2.1的版本上线吧。

#8

开启以后，

cc.view.setDesignResolutionSize(this.size.width, this.size.height, cc.ResolutionPolicy.SHOW_ALL);

如果手机屏幕尺寸较小的话，要旋转一次才行，如果手机已经设置了锁定自动旋转，将显示画面左上角的一部分

#9

这个也会有崩溃问题哦，UIWebView 的 bug 是只要是 WebGL 渲染引擎，都有可能崩

你说的适配问题跟加的那句代码没关系，可以截图来看看

#10

手机IPHONE5 ios9.25 ，锁定不让手机自动旋转。

场景2代码
this.size = cc.view.getDesignResolutionSize();
cc.view.setDesignResolutionSize(this.size.width, this.size.height, cc.ResolutionPolicy.SHOW_ALL);
cc.view.setOrientation(cc.macro.ORIENTATION_LANDSCAPE);

场景1 按BUTTON 可以进入场景2.

旋转 38479674701900753.jpg1280×960 124 KB

场景2

875628949980675730.jpg1280×960 122 KB

如果加入 window.indexedDB = {}; 场景2的样子，

375507387302948729.jpg1280×960 100 KB

#11

你试试将 cc.view.setOrientation 放在适配前

有没有在线测试地址我试一下？

#12

http://120.24.38.244:3333/

测试 iphone5 ios 9.25 或 iphone6 ios 9.0 都不行，

#13

找到原因了，你的代码导致同一帧多次调用 setDesignResolutionSize，先是 FIXED_HEIGHT，再是 SHOW_ALL，因为你的场景 Canvas 设置是 Fit height，而 onLoad 中设置的是 SHOW_ALL。最终导致出现这个 bug，我测试同一帧只执行任意一个都不会有问题，两次执行估计是触发了浏览器的一些底层 bug。

建议是不要在 onLoad 中执行 setDesignResolutionSize，不同场景的适配策略用 Canvas 组件的设置去配置就好了，不要做额外的事情

#14

解决了，万分感谢，不知道h5项目，手机发烫这个问题，应该没有这么容易解决吧

#15

降低分辨率，降低帧率，降低 CPU 损耗，得一点一点抠

#16

请问什么是Canvas模式？