Cocos Creator 教程:屏幕適配

衆所周知,移動終端的各種分辨率大小,各種屏幕寬高比。現在還出全面屏,iphone x的劉海屏。正因爲這些原因,需要遊戲中對這些終端的進行屏幕適配。而一般會進行適配寬或者適配高。

基本概念

如果是從cocos2dx學習過來的,都知道cocos2dx有一套屏幕適配的方案。簡單說來,首先要了解設計分辨率 (其大小依賴於遊戲設計人員,與硬件設備無關)也就是當我們新建一個scene時,需要在Canves節點中的Canves組件設置遊戲設計的分辨率。就是我們以此分辨率爲基準,其二就是結合適配模式(Cocos Creator 簡化爲兩種模式:適配寬或者適配高),從而適配終端屏幕。
Canvas.png

分辨率及座標

由上面的概念可以得到三類分辨率大小,一個設計分辨率、終端硬件分辨率還有就是由設計分辨率與適配模式概念而產生的可視區域大小(是小於等於設計分辨率大小)關於三者關係可以點擊這

  • 取得設計分辨率大小
//設計分辨率
let designSize=cc.view.getDesignResolutionSize();
  • 硬件分辨率
//屏幕物理分辨率 也就是手機分辨率。
let frameSize=cc.view.getFrameSize();
  • 可視區域大小
    我從測試程序中發現:WinSize = WinPixel = VisibleSize。不過一般是使用VisibleSize即可。
        //獲取視圖的大小,以點爲單位。 
        let winSize=cc.director.getWinSize();
        console.log('winSize',winSize.width,winSize.height);
        //獲取運行場景的可見大小。
        let visiSize=cc.director.getVisibleSize();
        console.log('visiSize',visiSize.width,visiSize.height);
        let winSizePixels=cc.director.getWinSizeInPixels();
        console.log('winSizePixels',winSizePixels);

注意2.0後,cc.director關於視圖大小已廢棄。以後請到cc.view查看

適配利器Widget(對齊掛件)

這是Creator用於在編輯ui所用到的組件,也是十分簡單好用。主要能使當前節點自動對齊到父物體的任意位置,或者約束尺寸,讓你的遊戲可以方便地適配不同的分辨率。感興趣的可以參考官方文檔

關於iphone x的適配

在官方論壇中已有人提出了解決方案

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章