zoukankan      html  css  js  c++  java
  • Cocos2dJS项目之UI界面的优化

    测试环境: iphone4、iOS6.1.2、chrome 37.2062.60,Cocos2d-js 3.6

    之前写了不少,实际项目也按这个去优化了,也有效果,但到最后才发现,尼玛,之前都搞错了,之所以有效果是歪打正着。。。。这次就直接总结一些得到的结论算了吧

    0、pc 端浏览器大部分都支持 webGL,移动端浏览器大部分都还是 canvas 渲染模式,最新的 iPhone6以上(ios8+)、小米4等一些搭载着最新系统的移动端才支持 webGL。最简单的测试当前环境是否支持 webGL 的方法:项目里 project.json 文件里 renderMode 改成2,然后看游戏是否正常运行。

    1、能用sprite就别用imageView。

    2、尽量减少UI的数量,使用合图。

    3、没有背景色的容器不渲染,sprite 渲染一次, imageview 要渲染两次, Button 要渲染四次。。。需要点击效果的采用 Button,否则可以用 imageview 或者 sprite+Layout 来代替。

    4、 canvas 模式下,别在滑动控件里使用带有九宫格的 UI ,否则滑动时一个九宫格会变成九个精灵,使用的 Button 也要把九宫格效果取消掉,因为 canvas 模式没有批渲染。

    5、滑动容器的内容很多时,对于现实范围外的控件,手动处理设置不可见。

    6、不需要交互的 widget 的 可交互性 全部设为 否。

    7、webGL 模式:支持 webGL 的移动端都是比较新的,性能也很强大,应该没有什么性能瓶颈的,最多在大量精灵时使用批渲染即可,需要注意的时,3.x 的自动批处理在 js 版本里是没有的,studio 里也没法用,需要手动代码处理。canvas 模式:目前大部分移动端都还是 canvas 吧,除了1~6点外,使用 bake 可以极大提高 canvas 渲染的效率: http://www.cocos2d-x.org/docs/manual/framework/html5/v3/bake-layer/zh

  • 相关阅读:
    【数学建模】—优秀论文(一)
    【数学建模】—论文排版
    【Linux学习】—第8章linux编程
    【Linux学习】—文件权限和目录配置
    【ESP8266学习】(一)
    【OpenCV】——b站达尔闻
    【Linux学习】——Shell编程基础
    【数学建模】——模拟退火算法(SAA)
    react 开发中火狐,Safari浏览器嵌套iframe显示空白
    element ui dataPicker 日期范围限制
  • 原文地址:https://www.cnblogs.com/jacket/p/6133812.html
Copyright © 2011-2022 走看看