背景和原理

因為手機設備的尺寸不一，分辨率也不一樣，這給游戲開發適配帶來了一點工作量。為了保證多端基本一致的視覺體驗，在開發游戲的時候需要做游戲的適配。

在游戲開發前，需要了解的一個概念是游戲的“設計尺寸”。這個是設計同學在輸出設計稿的唯一參考，通常以最常見的設備尺寸作為設計基準。如iPhone 6：750 x 1334。

圖片來自cocos creator官網

如果最終的設計稿尺寸是750 * 1334，那么在比這個更小的手機上怎么顯示呢？比如iPhone 5：640 *1136，你不可能只顯示的一部分。引擎底層的通常做法是將canvas畫布設置一個scale縮放。

問題是scale的值怎么設定？在2D游戲中，分別可以做X和Y方向設置縮放值。如果X和Y的縮放值是一樣的，就是等比縮放。如果不一樣那就是不等比縮放，那么畫布會產生壓縮或拉伸效果。iPhone 6的寬高比：750/1334 = 0.5622，iPhone 5的寬高比：0.5633。基本接近，但不完全一樣，再比如iPhone X：0.4618，差別更大。

一般情況下可能不太接受游戲畫布拉伸或者壓縮，因此只能適配一個，要么適配寬度，要么適配高度。其結果就是裁剪了一部分，或者出現黑邊。實際做法是屏幕尺寸依舊是canvas的大小，開發者繪制的精靈全部在一個容器里面，只要對容器設置一個scale值。如果scale放大了，超出屏幕外的自然就會被裁剪掉，scale變小了就會出現黑邊。

cocos 示例

在cocos編輯器中，選擇圖層中canvas就能看到設計尺寸的填寫地方，另外可以選擇適配高度還是寬度。如圖，游戲的設計尺寸：750 * 1220。如果設備的尺寸剛好是這樣，那么就是非常完美，無需適配，剛好把屏幕填滿。

如果是iPhone 5，選擇適配寬度，就會出現黑邊（只先關注背景，因為其他按鈕元素做了適配）。

如果是iPhone 5，選擇適配高度，屏幕雖然被填滿，但是細心一點會發現，背景圖的寬度兩邊是被裁剪了一部分。

如果同時選了適配高度和寬度呢？那么不會裁剪，其效果就是和適配寬度是一樣的，因為這樣才能保留所有細節，因此垂直方向出現黑邊。

Widget 掛件

圖片來自cocos creator官網

Widge稱之為對齊掛件：能夠根據需要將元素對齊父節點的不同參考位置。其實是一個相對定位組件，相對于自己的父元素。頂部的三個按鈕相對于屏幕上邊的距離保持不變。

先看下圖層結構：

三個元素還有一個父容器: daoju_layout，父容器有一個widget對齊組件，相對于canvas父元素，分別設置了距離left/top/right：20px。因此無論是在哪種設備下，相對畫布的位置總是保持不變。所以針對游戲里面那些相對靜止的元素可以通過這種定位方式，讓整體布局看起來更優雅一點。

那么怎么填滿背景的黑邊呢？有兩種方式
1：設計一張高度更大背景圖，那么就能把黑色的區域填充滿。
2：讓背景存在一定的拉伸，也是通過widget組件

將上下左右全部勾上，且全部是0，這樣就可以鋪滿。
如果是相對純色的背景，可以采用這種方式。如果背景上的圖案拉伸后會很丑就不適合這種，尤其是在iPhoneX下。如下圖，拉伸和不拉伸的區別還是挺明顯。

iPhone 5

iPhone X

這種情況應該把背景圖的高度設計大一點就不會出現黑邊。不會有一勞永逸的方法，根據游戲的特點，需要開發者自己去調整。最重要的是要理解適配多端背后的原因和原理，搞清楚了這點后，熟悉widget組件的用法就能很快的適配好游戲。

總結

以上是生活随笔為你收集整理的iphonex适配游戏_Cocos Creator 适配怎么做？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。