Cocos2d-JS項目之四: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 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM