Cocos Creator 多分辨率完美適配系列-4（內容適配實現）

轉載自：https://www.jianshu.com/p/738a8f6a2ec1

回顧

在上一章教程，我們在 SHOW ALL 模式下，用了 縮放 的方式去實現多分辨率適配，左右或者上下可能會出現部分看不見的情況，但是對於「背景適配」這個場合，這種方式無疑是一種合適的方案的。但是，對於遊戲畫面的內容填充，這種縮放方式明顯不能使用。

針對遊戲畫面內容，我們本章將採用 寬高重置 的方案去適配

1. 內容適配實現

慣例，先上圖

CONTENT_ADAPTER_PROCESS.png

過程如下：

1. 求出設計分辨率在畫布（SHOW ALL 模式下）的實際寬高
2. 將實際寬高的設計分辨率 重設設置 至畫布大小
   • 計算過程如下：
     • B1：畫布寬度 / 設計稿實際寬度
     • B2：畫布高度 / 設計稿實際高度
     • 重新設置節點的寬高
       • 節點新寬度：原始寬度 x B1
       • 節點新高度：原始高度 x B2

僞代碼如下：

 

A1: 畫布分辨率寬 / 設計分辨率寬 = 640 / 800 = 0.8
A2: 畫布分辨率高 / 設計分辨率高 = 960 / 480 = 2

設計稿在畫布上的寬度 = 800 x 0.8 = 640
設計稿在畫布上的高度 = 480 x 0.8 = 384

B1: 畫布寬度 / 設計稿實際寬度 = 640 / 640 = 1
B2: 畫布高度 / 設計稿實際高度 = 960 / 384 = 2.5

this.node.width = 800 x 1 = 800
this.node.height = 480 x 2.5 = 1200

對應實際代碼如下：

 

// 1. 先找到 SHOW_ALL 模式適配之後，本節點的實際寬高以及初始縮放值
let srcScaleForShowAll = Math.min(
  cc.view.getCanvasSize().width / this.node.width,
  cc.view.getCanvasSize().height / this.node.height
);
let realWidth = this.node.width * srcScaleForShowAll;
let realHeight = this.node.height * srcScaleForShowAll;

// 2. 基於第一步的數據，再做節點寬高重置
this.node.width = this.node.width *
  (cc.view.getCanvasSize().width / realWidth);
this.node.height = this.node.height *
  (cc.view.getCanvasSize().height / realHeight);

2. 驗證適配結果

爲了方便驗證結果，我們進行下面操作：

1. 創建一個 Content 節點，採用上面適配代碼
2. 建立4個按鈕，利用 Widget 組件去進行貼邊

按照上面的設置期望，只要我們 Content 節點能真實重置寬高爲畫布寬高，那麼4個貼邊按鈕就一定會貼邊，否則就不會貼邊

image.png

經過上面適配之後，我們取兩組結果演示：

CONTENT_ADAPTER_RESULT.png

可以看到上面「上下左右」4個貼邊塊都能完成 「貼邊操作」，說明我們的適配效果還是不錯的。

爲了方便大家使用，上面代碼（其實也就5行）已經弄成了一個 組件 ，下載下來直接拖入到自己遊戲的內容根節點即可。

更多源碼和示例，歡迎打開下方 Github 項目，如果覺得還不錯，還可以 Star 一下呢~

https://github.com/zhitaocai/CocosCreator-Multi-resolution-Adapter

至此，我們的「內容適配」基本告一段落了嗎？~~~ 不！

3. 設計分辨率像素 VS 畫布分辨率像素

細心的你肯定發現了，我們最後設置的節點寬高是

 

this.node.width = 800 x 1 = 800
this.node.height = 400 x 2.5 = 1200

和我們圖示的 640 x 960 完全不是一回事，但是爲什麼最後效果又和我們的期望一致呢？

這是因爲 800 x 1200 是我們在設計分辨率下的寬高，而 640 x 960 是我們的畫布分辨率，兩者寬高像素不是直接等價的，是 經過 SHOW ALL 模式轉換 的，這裏怎麼理解呢？

設計分辨率 800 x 480 到畫布的分辨率 640x384 （爲什麼是這個值，可以參照上一章第一節理解）這個過程其實是做了一個 SHOW ALL 模式的轉換

 

800 x 0.8 = 640
480 x 0.8 = 384

那麼如果我們的目標畫布分辨率爲 640 x 960 ，也就是佔據畫布全屏，公式就是

 

width x 0.8 = 640
height x 0.8 = 960

計算後結果 800(width) x 1200(height)，也就對應上了，當然在我們 這個場合 也可以簡單理解爲：設計分辨率下的 800 x 1200 經過 SHOW ALL 模式處理後，實際等價於畫布中的 640 x 960 。