cocos creator螢屏適配的一些知識點(2.0之后的版本)

一. cocos creator 提供的幾種適配策略

• EXACT_FIT：

　　　整個應用程式在指定區域可見，無需嘗試保留原始縱橫比，可能會出現失真，應用程式會被拉伸或壓縮，也就是說設計解析度的長和寬不會等比縮放，它們會各自進行縮放，設計解析度的寬會用 “螢屏寬/設計解析度寬” 作為縮放因子，設計解析度的高會用 “螢屏高/設計解析度高” 作為縮放因子，(2.0版本這個策略有問題，等修復)

• NO_BORDER：

　　　整個應用程式填充指定區域，沒有失真，但可能會有一些裁剪，同時保持原樣應用程式的縱橫比，這個是等比進行縮放設計解析度，取 “螢屏寬/設計解析度寬” “螢屏高/設計解析度高” 中較大的一個作為縮放因子，比如：“螢屏寬/設計解析度寬”是2，“螢屏高/設計解析度高”是1，那么取2作為縮放因子，這個時候高放大兩倍，自然超出螢屏之外看不見了，

• SHOW_ALL：

　　　整個應用程式在指定區域可見而不失真，同時保持原樣應用程式的縱橫比，邊界可以出現在應用程式的兩側，這個是等比進行縮放設計解析度，取 “螢屏寬/設計解析度寬” “螢屏高/設計解析度高” 中較小的一個作為縮放因子，比如上述的那個例子，取1作為縮放因子，寬只放大一倍，明顯不夠，雖然整個應用程式都能看到，但會有黑邊，

• FIXED_HEIGHT：

　　　應用程式采用設計解析度大小的高度并修改內部的寬度畫布使其適合設備的縱橫比，不會發生失真，這個是等比進行縮放設計解析度，保持設計解析度的高度不變，根據螢屏解析度改變設計解析度的寬度，這個時候設計解析度和螢屏解析度一樣了，再進行等比縮放，

• FIXED_WIDTH：

　　　這個和 FIXED_HEIGHT 類似，唯一不同的是它是保持的寬度不變，

二. cocos提供的幾個獲取View的函式

• cc.view.getDesignResolutionSize()

　　　獲取的是你在編輯器中設計的解析度，也就是canvas 組件下設定的設計解析度，

• cc.view.getFrameSize()

　　　獲取各種手機、pad上的螢屏解析度，也就是硬體解析度，

• cc.view.getVisibleSizeInPixel()

　　　獲取的是 visibleSize 的基礎上乘以各種適配策略下的縮放比例后的解析度，

• cc.view.getVisibleSize()

　　　官方檔案上說回傳視圖視窗可見區域尺寸，經過輸出對比發現，這個可見區域尺寸實際上是指設計解析度，不過它回傳的是經過各種適配策略后的設計解析度，在EXACT_FIT，NO_BORDER，SHOW_ALL中因為不改變設計解析度，所以和cc.view.getDesignResolutionSize()回傳的結果一樣，但在FIXED_HEIGHT，FIXED_WIDTH中改變了設計解析度，所以回傳的是修改后的設計解析度，

后續通過查看creator原始碼也證實了這一點，以下是原始碼解釋：

 1 /**
 2      * !#en
 3      * Returns the visible area size of the view port.
 4      * !#zh 回傳視圖視窗可見區域尺寸，
 5      * @method getVisibleSize
 6      * @return {Size}
 7      */
 8     getVisibleSize: function () {
 9         return cc.size(this._visibleRect.width,this._visibleRect.height);
10     },

getVisibleSize()回傳的是this._visbleRect的值，我們來找找this._visbleRect在哪進行賦值

 1 cc.js.mixin(View.prototype, {
 2     init () {
 3         .........
 4 
 5         var w = cc.game.canvas.width, h = cc.game.canvas.height;
 6         this._designResolutionSize.width = w;
 7         this._designResolutionSize.height = h;
 8         this._originalDesignResolutionSize.width = w;
 9         this._originalDesignResolutionSize.height = h;
10         this._viewportRect.width = w;
11         this._viewportRect.height = h;
12         this._visibleRect.width = w;
13         this._visibleRect.height = h;
14 
15         cc.winSize.width = this._visibleRect.width;
16         cc.winSize.height = this._visibleRect.height;
17         ......
18     },
19 ........
20 }

可以看到在這里給一些保持解析度的物件賦了同一個值，那就是cc.game.canvas里面的值，這個值代表的是螢屏解析度，因為后續進行適配策略是用的也是這個值，這就奇怪了，都一樣了還怎么比較，每個函式回傳的值也應該一樣呀，所以一定有一個地方改變了它們，繼續找，

 1 setDesignResolutionSize: function (width, height, resolutionPolicy) {
 2         .........
 8         this.setResolutionPolicy(resolutionPolicy);
 9         var policy = this._resolutionPolicy;
10         if (policy) {
11             policy.preApply(this);
12         }
13 
14        ..........28 
29         this._originalDesignResolutionSize.width = this._designResolutionSize.width = width;
30         this._originalDesignResolutionSize.height = this._designResolutionSize.height = height;
31 
32         var result = policy.apply(this, this._designResolutionSize);
33 
34         if(result.scale && result.scale.length === 2){
35             this._scaleX = result.scale[0];
36             this._scaleY = result.scale[1];
37         }
38 
39         if(result.viewport){
40             var vp = this._viewportRect,
41                 vb = this._visibleRect,
42                 rv = result.viewport;
43 
44             vp.x = rv.x;
45             vp.y = rv.y;
46             vp.width = rv.width;
47             vp.height = rv.height;
48 
49             vb.x = 0;
50             vb.y = 0;
51             vb.width = rv.width / this._scaleX;
52             vb.height = rv.height / this._scaleY;
53         }
54 
55         policy.postApply(this);
56         cc.winSize.width = this._visibleRect.width;
57         cc.winSize.height = this._visibleRect.height;
58 　　　　 ........64     },

我們直接來看setDesignResolutionSize()這個函式，它是通過設定設計解析度和匹配模式來進行游戲畫面的螢屏適配，所以它必然會改變相應的值，可以看到第29，30行把我們傳進來的設計解析度賦值給了this._originalDesignResolutionSize和this._designResolutionSize，改變了它們的值，那么什么時候改變this._visbleRect的值呢，我們看39行到52行，很明顯就是在這里改變的，vb.width = rv.width / this._scaleX; vb.height = rv.height / this._scaleY;

那么憑什么說this._visbleRect是適配策略后到設計解析度呢，我們來看看result.viewport里面是什么東西，var result = policy.apply(this, this._designResolutionSize);policy是一個適配策略的實體，它根據你傳入的適配策略來決定呼叫哪個適配策略的方法，類似于c++中的多型，然后我們來看看每個適配策略做了什么，這里主要就拿SHOW_ALL和FIXED_HEIGHT來加以說明：

 1 var ShowAll = cc.Class({
 2         name: "ShowAll",
 3         extends: cc.ContentStrategy,
 4         apply: function (view, designedResolution) {
 5             var containerW = cc.game.canvas.width, containerH = cc.game.canvas.height,
 6                 designW = designedResolution.width, designH = designedResolution.height,
 7                 scaleX = containerW / designW, scaleY = containerH / designH, scale = 0,
 8                 contentW, contentH;
 9 
10             scaleX < scaleY ? (scale = scaleX, contentW = containerW, contentH = designH * scale)
11                 : (scale = scaleY, contentW = designW * scale, contentH = containerH);
12 
13             return this._buildResult(containerW, containerH, contentW, contentH, scale, scale);
14         }
15     });
16 
17 var FixedHeight = cc.Class({
18         name: "FixedHeight",
19         extends: cc.ContentStrategy,
20         apply: function (view, designedResolution) {
21             var containerW = cc.game.canvas.width, containerH = cc.game.canvas.height,
22                 designH = designedResolution.height, scale = containerH / designH,
23                 contentW = containerW, contentH = containerH;
24 
25             return this._buildResult(containerW, containerH, contentW, contentH, scale, scale);
26         }
27     });

可以看到它們都繼承于cc.ContentStrategy，在apply函式中回傳值來自于this._buildResult()函式，我們來看這個函式：

 1 _buildResult: function (containerW, containerH, contentW, contentH, scaleX, scaleY) {
 2         // Makes content fit better the canvas
 3         Math.abs(containerW - contentW) < 2 && (contentW = containerW);
 4         Math.abs(containerH - contentH) < 2 && (contentH = containerH);
 5 
 6         var viewport = cc.rect((containerW - contentW) / 2, (containerH - contentH) / 2, contentW, contentH);
 7 
 8         // Translate the content
 9         if (cc.game.renderType === cc.game.RENDER_TYPE_CANVAS){
10             //TODO: modify something for setTransform
11             //cc.game._renderContext.translate(viewport.x, viewport.y + contentH);
12         }
13 
14         this._result.scale = [scaleX, scaleY];
15         this._result.viewport = viewport;
16         return this._result;
17     },

主要來看this._result中的viewport的值，它的width是contentW，height是contentH，到這里，一切都清楚了，我們假設螢屏解析度的寬高是Pw和Ph，設計解析度的寬高是Sw和Sh，

那么在SHOW_ALL中：假設Pw/Sw更小，contentW=Pw，contentH=Sh*(Pw/Sw),在進行this._visbleRect賦值時，width = Pw/(Pw/Sw) = Sw，height = (Sh*(Pw/Sw))/(Pw/Sw) = Sh，所以設計解析度沒有改變，

在FIXED_HEIGHT中：contentW=Pw，contentH=Ph，scale = Ph/Sh，在進行this._visbleRect賦值時，width = Pw/(Ph/Sh) = Sh*(Pw/Ph)，height = Ph/(Ph/Sh) = Sh，所以設計解析度是改變的，

從上述代碼還發現cc.winSize和cc.view.getVisibleSize()的回傳值是一樣的，二者可以通用，

在進行螢屏適配時主要用到cc.view.getDesignResolutionSize()和cc.view.getFrameSize()兩個函式，

標籤：其他

上一篇：錢多活少飯好吃的公司，你愿意來嗎？

下一篇：2W+銷量Steam獨游戲立開發者，微信群分享，游戲的成功之路！