圖1：歡樂(lè)麻將微信小游戲版

?

大部分同學(xué)應(yīng)該都處理過(guò)2D麻將桌的適配，從iPhoneX(目前最長(zhǎng)的移動(dòng)設(shè)備）到iPad（目前最短的移動(dòng)設(shè)備）

無(wú)非就是根據(jù)長(zhǎng)寬比來(lái)選擇最適合的適配方式。麒麟子之前寫過(guò)一遍，傳送門：棋牌UI全分辨率適配方案

但3D的適配則不是通過(guò)縮放來(lái)的，因?yàn)?D看到的畫面，大部分是調(diào)整攝相機(jī)參數(shù)得來(lái)的。我們常見的設(shè)備有以下分辨率

2.16 : 1? iPhoneX系列為代表

2:1 華為、小米等2018年后出的Android手機(jī)為代表

16:9 蘋果6以及同時(shí)期的Android手機(jī)為代表

1024:768 iPad為代表。

麒麟子打開了麻將的代表作，歡樂(lè)麻將。在不同設(shè)備下玩了一圈后總結(jié)出了歡樂(lè)麻將的適配規(guī)則。

1、設(shè)計(jì)分辨率是 16:9, （常見的就是1280 x 720)

2、在寬于16:9的設(shè)備上，它什么都沒(méi)做，只是簡(jiǎn)單地把桌面保持左右撐滿。

3、在高于16:9的設(shè)備上，它會(huì)保持左右兩邊不變，讓高顯示得更多一點(diǎn)。

要實(shí)現(xiàn)以上目標(biāo)，我們需要做如下處理就行。

1、U3D編輯器中，使用16:9的預(yù)覽窗口，調(diào)整好攝相機(jī)和畫面。

2、切換為1024x768的分辨率，保持?jǐn)z相機(jī)不動(dòng)（最好是在運(yùn)行模式下調(diào)，這樣16:9的參數(shù)就不會(huì)影響），調(diào)整好桌面的縮放和位置。

3、記錄下1024x768的參數(shù) 縮放和位移。

4、在代碼中，通過(guò)真實(shí)橫縱比(寬/高)?與 設(shè)計(jì)橫縱比(1280/720) 進(jìn)行比較

a、如果更寬(真實(shí)橫縱比 > 設(shè)計(jì)橫縱比)，則將背景的scaleX放大，放大倍數(shù) = 真實(shí)橫縱比 / 設(shè)計(jì)橫縱比。

b、如果更高(真實(shí)橫縱比 > 設(shè)計(jì)橫縱比)，則將桌面縮小和位移。

縮小的方式就是插值， 設(shè)計(jì)分辨率下的縮放和位移，我們作為初值，1024 x 768下的值作為目標(biāo)值（剛剛U3D編輯器中編輯的時(shí)候，我們需要把這個(gè)值記下來(lái)）。 插值的計(jì)算如下：（代碼中的Laya.stage.height / Laya.stage.width 就是真實(shí)高/真實(shí)寬，大家根據(jù)自己用的引擎來(lái)調(diào)整 即可）

let fromRatio = 720 / 1280;let targetRatio = 768 / 1024;let curRatio = Laya.stage.height / Laya.stage.width;let factor = (curRatio - fromRatio) / (targetRatio - fromRatio);

有了這個(gè)factor我們只需要做一個(gè)線性插值，就能得到不同分辨率下的桌面縮放和位移了。

最后上幾張圖

iPhone6/7/8效果 iPhoneX效果

?

iPad效果

---

代碼與工程相關(guān)比較多，不方便抽出來(lái)，如果有需要的朋友，可以聯(lián)系我一起探討。

總結(jié)

以上是生活随笔為你收集整理的真3D麻将游戏桌面适配任意分辨率的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。