Cocos Creator屏幕適配

本文主要討論若是在Cocos Creator上實現不一樣的屏幕適配方案，補充官方文檔的說明。

Cocos2d-JS屏幕適配

在Cocos2d-JS中，設計分辨率到設備分辨率的適配方案有5種，分別是：

• cc.ResolutionPolicy.EXACT_FIT
• cc.ResolutionPolicy.SHOW_ALL
• cc.ResolutionPolicy.NO_BORDER
• cc.ResolutionPolicy.FIXED_HEIGHT
• cc.ResolutionPolicy.FIXED_WIDTH

關於這五種設計模式的具體效果網絡上已經有很是多的博客介紹了，甚至本身寫個代碼測試下就知道了，這裏就再也不贅述。

在Cocos2d-JS中設置適配方案的API是：

// 設置適配模式
cc.view.setResolutionPolicy(cc.ResolutionPolicy.FIXED_HEIGHT);

// 設置設計分辨率尺寸和適配模式
cc.view,setSesignReolutionSize(960, 540, cc.ResolutionPolicy.FIXED_HEIGHT);

// 設置資源分辨率到設計分辨率的縮放比例
cc.director.setContentScaleFactor(1);

Cocos Creator屏幕適配

實現方式

Creator的屏幕適配主要是放在Canvas組件上實現的，因此每當建立一個新的場景時，默認都會有個一個Canvas對象在層級管理器上，遊戲內其它的節點都應該放在Canvas節點下，這樣纔能有效的在web瀏覽器上進行適配。

Canvas節點

Canvas組件

鼠標點選層級管理器上的Canvas對象，在屬性檢查器面板上會對應顯示對象的組件信息。咱們能夠看到它默認添加了一個Canvas組件，而且勾選了「Fix Height」選項。

Canvas組件

關於Canvas組件，主要有三個屬性：

• Design Resolution：主要設置遊戲設計分辨率的尺寸，默認設置寬度960(W)高度640(H)。
• Fit Height：固定高度。
• Fit Width：固定寬度。

EXACT_FIT（非等比拉伸至全屏）

因爲EXACT_FIT適配方案是將遊戲內容非等比拉伸或縮放至全屏，實際效果一般都沒法接受，因此在Creator中被廢棄了，沒法經過編輯器進行設置。若是非要使用，能夠經過代碼設置：

// 設置適配模式
cc.view.setResolutionPolicy(cc.ResolutionPolicy.EXACT_FIT);

可是可能會和Canvas衝突，因此能夠試試禁用Canvas組件。這樣處理後在web平臺上可能會有問題，native上應該是可行的。

SHOW_ALL（等比顯示整個場景內容）

showAll

在Creator上同時勾選「Fit Height」和「Fit Width」便可開啓showAll適配模式。

這個適配方案其實也不是很是常見，咱們公司早期都是使用這個方案。它的好處是無論屏幕比例如何，保證整個場景都是可見的，並且等比適配。可是老是在左右兩邊或者上下兩邊出現黑邊。

NO_BORDER（等比拉伸到全屏）

NO_BORDER

和SHOW_ALL相反，在Creator上同時去除「Fit Height」和「Fit Width」的勾選便可開啓noBorder適配模式。

這個適配模式是根據屏幕比例等比拉伸畫面，有兩種結果：

• 當高度拉滿，寬度超出屏幕的時候，裁切寬度。
• 當寬度拉滿，高度超出屏幕的時候，裁切高度。

它的好處是沒有黑邊，缺點是在不一樣的屏幕比例上，不能缺點究竟是寬度裁切仍是高度裁切。因此進行場景設計的時候有挺大侷限性。

FIXED_HEIGHT（等比拉伸高度到全屏）

FIXED_HEIGHT

因爲手機屏幕的侷限性，一般遊戲設置爲橫屏的，在橫屏模式下，一般設置適配方案爲固定高度，因此這也是Creator默認的視頻方案。

在Creator中，只勾選Canvas組件的「Fit Height」便可開啓fixedHeight適配模式。

它的好處是能夠實現全屏，拉伸或者縮放高度爲屏幕高度，寬度進行裁切。

FIXED_WIDTH（等比拉伸寬度到全屏）

FIXED_WIDTH

在Creator中，只勾選Canvas組件的「Fit Width」便可開啓fixedWidth適配模式。

它的好處是能夠實現全屏，拉伸或者縮放寬度爲屏幕寬度，高度進行裁切。在豎屏模式下，一般設置適配方案爲固定寬度。