日本免费精品视频,男人的天堂在线免费视频,成人久久久精品乱码一区二区三区,高清成人爽a毛片免费网站

第5章 分辨率適配

當(dāng)在不同的分辨率下運行程序時，就會碰到分辨率適配的問題，如出現(xiàn)黑邊、界面的一部分顯示在屏幕外，我們希望程序在不同的分辨率下運行都能有良好的表現(xiàn)。在Cocos2d-x中，可以通過選擇合適的分辨率適配策略，結(jié)合合適的坐標(biāo)編碼，適配各種不同的分辨率。而靈活使用Cocos2d-x的分辨率適配策略，還可以解決各種分辨率適配的難題。本章主要介紹以下內(nèi)容：

Cocos2d-x適配策略。

分辨率適配經(jīng)驗。

CocoStudio分辨率適配。

5.1 Cocos2d-x適配策略

可以在Cocos2d-x中調(diào)用CCEGLView的setDesignResolutionSize方法設(shè)置游戲的分辨率策略，以及我們的設(shè)計分辨率。

setDesignResolutionSize()方法包含3個參數(shù)，分別是設(shè)計分辨率的寬和高，以及分辨率的適配策略。下面這行代碼設(shè)置了960×640的設(shè)計分辨率，并使用了SHOW_ALL分辨率適配策略。

Director::getInstance()->getOpenGLView()->setDesignResolutionSize(960, 640, ResolutionPolicy::SHOW_ALL);

5.1.1 分辨率適配策略

Cocos2d-x的分辨率適配一般不是為每一種分辨率設(shè)計一種布局方案，而是在一種分辨率下進(jìn)行設(shè)計(也就是設(shè)計分辨率)，然后通過分辨率適配策略，讓程序能夠適應(yīng)不同的分辨率。Cocos2d-x提供以下5種分辨率適配策略。

EXACT_FIT以設(shè)置的分辨率為標(biāo)準(zhǔn)，按照該分辨率對x和y進(jìn)行拉伸。

NO_BORDER不留黑邊，不拉伸，等比縮放，有一個方向(上下或左右)可能超出屏幕。

SHOW_ALL設(shè)置的分辨率區(qū)域內(nèi)全部可見，但上下左右都可能出現(xiàn)黑邊。

FIXED_HEIGHT鎖定分辨率的高度，寬度不管，可能出現(xiàn)黑邊也可能超出屏幕。

FIXED_WIDTH鎖定分辨率的寬度，高度不管，可能出現(xiàn)黑邊也可能超出屏幕。

通過圖5-1～圖5-3可以直觀地了解到在不同分辨率下，各個分辨率適配策略的表現(xiàn)。以960×640為設(shè)計分辨率，然后通過調(diào)整窗口的實際分辨率，選擇不同的適配模式進(jìn)行觀察。在PC上調(diào)用Director的setFrameSize()方法可以自定義窗口的尺寸，但不要在移動設(shè)備上設(shè)置FrameSize。

首先是EXACT_FIT模式，當(dāng)在不同的分辨率下運行時，界面的寬和高都會根據(jù)我們的設(shè)計分辨率進(jìn)行縮放，例如，當(dāng)設(shè)計分辨率是100×200，在200×300的分辨率下運行時，寬會放大2.0，高會放大1.5，當(dāng)實際分辨率小于設(shè)計分辨率時，Cocos2d-x又會相應(yīng)地縮小界面使其適配，如圖5-1所示。

圖5-1 EXACT_FIT模式

NO_BORDER模式下會根據(jù)實際分辨率進(jìn)行等比縮放，不留黑邊。首先按照EXACT_FIT模式的縮放規(guī)則計算出寬和高的縮放值，按照高的縮放值進(jìn)行等比縮放。當(dāng)實際分辨率無法完整放下縮放后的界面時，會有一部分內(nèi)容顯示在屏幕外，如圖5-1所示，當(dāng)界面以NO_BORDER模式進(jìn)行適配時，紅色邊框為界面的完整內(nèi)容，紅色邊框左下角的紅色原點為OpenGL窗口的原點坐標(biāo)，如圖5-2所示。

圖5-2 NO_BORDER模式

SHOW_ALL模式下會根據(jù)實際分辨率進(jìn)行等比縮放，顯示界面的完整內(nèi)容，與NO_BORDER模式相反，其會先按照EXACT_FIT模式的縮放規(guī)則計算出寬和高的縮放值，按照低的縮放值進(jìn)行等比縮放。由于是按照小的分辨率進(jìn)行縮放，所以左右和上下都有可能出現(xiàn)黑邊，圖5-3右側(cè)圖片中的紅點處為OpenGL窗口的原點坐標(biāo)，如圖5-3所示。

FIXED_HEIGHT和FIXED_WIDTH模式比較類似，它們會將高度或?qū)挾孺i定，按照高度或?qū)挾冗M(jìn)行等比縮放，另外一個方向既可能超出，也有可能留下黑邊。這兩種模式會先按照EXACT_FIT模式的縮放規(guī)則計算出寬和高的縮放值，F(xiàn)IXED_HEIGHT取高度縮放值進(jìn)行等比縮放，保障設(shè)計分辨率的高度剛好鋪滿設(shè)計分辨率，F(xiàn)IXED_WIDTH取寬度進(jìn)行等比縮放，保障設(shè)計分辨率的寬度剛好鋪滿設(shè)計分辨率。

圖5-3 SHOW_ALL模式

5.1.2 坐標(biāo)編碼

當(dāng)我們的程序在不同的分辨率下運行時，setDesignResolutionSize()方法會對整個程序按照適配策略根據(jù)設(shè)計分辨率和實際分辨率進(jìn)行縮放。在對坐標(biāo)進(jìn)行編碼時，需要使用相對坐標(biāo)編碼，而根據(jù)窗口尺寸可以進(jìn)行相對坐標(biāo)的編碼，如希望將一個節(jié)點放置在屏幕的正中間，就需要將其坐標(biāo)的x和y分別設(shè)置為窗口尺寸的寬和高的1/2。相對左下角原點的坐標(biāo)則可以直接使用坐標(biāo)，設(shè)置相對位置可以使得程序在不同的分辨率下運行，我們的對象都能夠顯示在正確的位置上。

在使用相對坐標(biāo)編碼時，Director單例中有幾個方法可以獲取尺寸，下面了解一下這幾個獲取尺寸相關(guān)的方法。

getWinSize，獲取OpenGL窗口的單位尺寸。

getWinSizeInPixels，獲取OpenGL窗口的實際像素尺寸。

getVisibleSize，獲取可視窗口的尺寸。

getVisibleOrigin，獲取可視窗口左下角坐標(biāo)的位置。

另外GLView對象還提供了以下兩個接口來獲取其他的尺寸。

getFrameSize，獲取設(shè)備或窗口的尺寸。

getDesignResolutionSize，獲取設(shè)置的設(shè)計分辨率。

如圖5-4直觀地演示了上面描述的各種尺寸，WinSize和WinSizeInPixels分別是當(dāng)前整個OpenGL窗口的單位尺寸和像素尺寸。VisibleSize和VisibleOrigin可以共同構(gòu)成當(dāng)前窗口中實際可見部分內(nèi)容的矩形范圍，F(xiàn)rameSize為當(dāng)前窗口或設(shè)備的真實尺寸。

圖5-4 WinSize與VisibleSize

WinSize分別為圖5-4中左右兩圖的紅色框范圍，雖然看上去范圍不同，但這是一個單位尺寸，所以值并沒有變化，也就是原圖尺寸960×640，一般等同于設(shè)計分辨率的尺寸，也是OpenGL窗口的單位尺寸。

WinSizeInPixels也對應(yīng)圖5-4兩圖中的紅色框范圍，但這個尺寸為實際占用的像素尺寸，所以在不同分辨率下有不同的值(程序邏輯中使用的坐標(biāo)是單位尺寸，而非像素尺寸)。

VisibleSize表示可視內(nèi)容的尺寸，在圖5-4左圖中為紅色框范圍，右圖則為黃色框范圍，也就是可以看到的有內(nèi)容的顯示區(qū)域尺寸。

VisibleOrigin表示可視內(nèi)容的左下角坐標(biāo)，分別是左右圖中左下角的紅點的位置，左圖中OpenGL窗口原點的坐標(biāo)與紅點重疊，而右圖中OpenGL窗口的原點為紅色框的左下角，VisibleOrigin的Y軸比原點高了64個像素。

FrameSize為窗口或設(shè)備的實際尺寸，也就是圖5-4中兩個窗口的窗口大小1200×640。

Cocos2d-x推薦使用VisibleSize和VisibleOrigin進(jìn)行相對位置的計算，就是因為根據(jù)它們來計算可以保障我們的對象能夠處于可視范圍中。

WinSize和(0,0)坐標(biāo)構(gòu)成了OpenGL窗口，VisibleSize和VisibleOrigin構(gòu)成了可視窗口，可視窗口不會大于OpenGL窗口，因為OpenGL窗口以外的內(nèi)容都是不可見的！但OpenGL窗口范圍內(nèi)的對象并不一定可見，如當(dāng)屏幕窗口容不下OpenGL窗口時。可視窗口可以理解為OpenGL窗口和設(shè)備實際分辨率窗口相交的矩形區(qū)域。

5.1.3 OpenGL窗口與可視化窗口

絕大部分的游戲都可以使用FIXED_HEIGHT或FIXED_WIDTH模式來實現(xiàn)簡單的分辨率適配，只需要在背景上將可能有黑邊的內(nèi)容進(jìn)行填充即可。這兩種模式與SHOW_ALL有些類似，就是都可能導(dǎo)致黑邊或超出，但有一種本質(zhì)區(qū)別，即它們的OpenGL窗口不同，這對于坐標(biāo)編碼是有巨大影響的！OpenGL窗口不同，說的是原點位置不同，WinSize、VisibleSize不同。

在圖5-5中，使用FIXED_HEIGHT和SHOW_ALL模式都是同樣的表現(xiàn)，左右都會有同樣的黑邊，但FIXED_HEIGHT模式下的OpenGL窗口和可視化窗口對應(yīng)的是圖5-5中的黃色矩形區(qū)域(包括左右的黑邊)，而SHOW_ALL模式下的OpenGL窗口和可視化窗口對應(yīng)的是圖5-5中的紅色矩形區(qū)域(不包括黑邊)。

圖5-5 OpenGL窗口和可視化窗口

直觀的表現(xiàn)就是，在(0,0)的位置創(chuàng)建一個對象，F(xiàn)IXED_HEIGHT模式下會出現(xiàn)在黃色矩形區(qū)域的左下角，而SHOW_ALL模式下會出現(xiàn)在紅色矩形區(qū)域的左下角。SHOW_ALL模式下的黑邊部分是不會出現(xiàn)任何顯示對象的，因為不在OpenGL窗口中。而FIXED_HEIGHT模式則可以正常顯示，所以只要背景圖片大一些，將左右的黑邊區(qū)域遮住，即可簡單地解決適配黑邊的問題。正是由于這種實現(xiàn)方式，F(xiàn)IXED_HEIGHT和FIXED_WIDTH模式才可以在背景上對可能有黑邊的內(nèi)容進(jìn)行填充來解決黑邊的問題。

5.1.4 setDesignResolutionSize詳解

在了解了適配策略和Cocos2d-x的各種尺寸之后，下面來進(jìn)一步了解setDesign- ResolutionSize()方法，setDesignResolutionSize()方法中會簡單判斷傳入的設(shè)計分辨率的寬度和高度，以及分辨率適配策略，將這些參數(shù)保存并調(diào)用updateDesignResolutionSize()方法更新分辨率。

void GLView::setDesignResolutionSize(float width, float height,

ResolutionPolicy resolutionPolicy

{

CCASSERT(resolutionPolicy != ResolutionPolicy::UNKNOWN, "should set

resolutionPolicy");

if (width == 0.0f || height == 0.0f

{

return;

}

_designResolutionSize.setSize(width, height);

_resolutionPolicy = resolutionPolicy;

updateDesignResolutionSize();

}

在updateDesignResolutionSize()方法中，首先根據(jù)屏幕尺寸和設(shè)計分辨率計算出x和y方向的縮放值，然后根據(jù)分辨率適配模式選擇終的縮放值，計算完縮放值之后，再計算視口的大小。

void GLView::updateDesignResolutionSize

{

if (_screenSize.width > 0 && _screenSize.height > 0

&& _designResolutionSize.width > 0 && _designResolutionSize.height

> 0

{

_scaleX = (float)_screenSize.width / _designResolutionSize.width;

_scaleY = (float)_screenSize.height / _designResolutionSize.height;

//NO_BORDER模式下取大的縮放值等比縮放

if (_resolutionPolicy == ResolutionPolicy::NO_BORDER

{

_scaleX = _scaleY = MAX(_scaleX, _scaleY);

}

//SHOW_ALL模式下取小的縮放值等比縮放

else if (_resolutionPolicy == ResolutionPolicy::SHOW_ALL

{

_scaleX = _scaleY = MIN(_scaleX, _scaleY);

}

//FIXED_HEIGHT模式下取y軸縮放值等比縮放，并將設(shè)計分辨率的寬度調(diào)整為全屏的

寬度

else if ( _resolutionPolicy == ResolutionPolicy::FIXED_HEIGHT) {

_scaleX = _scaleY;

_designResolutionSize.width = ceilf(_screenSize.width/_scaleX);

}

//FIXED_WIDTH模式下取x軸縮放值等比縮放，并將設(shè)計分辨率的高度調(diào)整為全屏的

高度

else if ( _resolutionPolicy == ResolutionPolicy::FIXED_WIDTH) {

_scaleY = _scaleX;

_designResolutionSize.height = ceilf(_screenSize.height/_

scaleY);

}

//計算視口的尺寸，并設(shè)置視口的矩形區(qū)域

float viewPortW = _designResolutionSize.width _scaleX;

float viewPortH = _designResolutionSize.height _scaleY;

_viewPortRect.setRect((_screenSize.width - viewPortW) / 2,

_screenSize.height - viewPortH) / 2, viewPortW, viewPortH);

//重置Director的成員變量來適應(yīng)可視化矩形

auto director = Director::getInstance();

director->_winSizeInPoints = getDesignResolutionSize();

director->_isStatusLabelUpdated = true;

director->setGLDefaultValues();

}

}

5.2 分辨率適配經(jīng)驗

5.2.1 寬度或高度鎖定

我們希望所有的機型都能夠很地適配，不要拉伸！不要黑邊！FIXED_HEIGHT或FIXED_WIDTH模式是比較容易做到的。

要做到上面的要求，需要選取一個范圍，即要適配的分辨率比例的范圍。我們都知道iPhone 5的比例非常長，應(yīng)該沒有什么機器比這個比例更長的了，所以一般筆者將iPhone 5的比例設(shè)置為要適配的極限比例，也就是說，如果有比iPhone 5更長的手機，筆者就基本放棄這個機型了。接下來選擇一個扁的比例，一般在平板電腦上的比例會更扁一些，縱觀主流的分辨率，基本都在iPhone 5和iPad之間，所以筆者習(xí)慣將要適配的比例在iPhone 5到iPad之間(這里的是以橫屏游戲為例，如果是豎屏游戲，只需要把寬和高對調(diào)一下即可)。也就是說，假設(shè)選擇固定高度的FIXED_HEIGHT模式，那么就要選擇一個寬和窄的寬度。

選擇好比例之后，需要好好設(shè)計一下游戲內(nèi)容，以方便不同分辨率的適配，主要包含游戲的背景、游戲的內(nèi)容區(qū)域，以及UI等。

背景的設(shè)計是非常重要的一步，因為背景設(shè)計的好壞，直接決定了是否有黑邊，以及游戲內(nèi)容的布局。首先，背景圖需要有多大？其次，游戲區(qū)域只能有多大？這些問題需要根據(jù)游戲的內(nèi)容來設(shè)計。

如果是一個橫屏的斗地主游戲，可以將游戲區(qū)域放在游戲的正中間，游戲內(nèi)容可以根據(jù)游戲區(qū)域的原點為相對坐標(biāo)計算，這時候兩邊各有一部分區(qū)域是可裁剪的。

如果是一個豎屏的雷電射擊游戲，可以將游戲區(qū)域放在正下方，上方是可裁剪區(qū)域，敵人從上方出現(xiàn)，可以將上方的可裁剪區(qū)域也納入游戲區(qū)域，敵機根據(jù)左上角為原點設(shè)置相對坐標(biāo)。

如果是一個消除類游戲，如果是橫屏的，一般把游戲區(qū)域放在正中間，左右兩邊裁剪；如果是豎屏的，一般也把游戲區(qū)域放在正中間，上下兩邊是可裁剪區(qū)域。

5.2.2 計算設(shè)計分辨率

使用FIXED_HEIGHT或FIXED_WIDTH模式結(jié)合一個比較大的背景，一般可以解決大部分游戲的分辨率適配問題，但如果游戲背景并不是鎖定寬度或高度的，那么就需要選擇其他的分辨率適配策略了。

下面介紹一個簡單的適配示例，如圖5-6所示。首先背景尺寸是1280×800，這個分辨率沒有任何講究，是美工隨便給出的一個分辨率，是一個足夠大的尺寸，寬度和高度都不進(jìn)行鎖定，而是根據(jù)實際設(shè)備的分辨率進(jìn)行動態(tài)調(diào)整，這個分辨率盡管不怎么標(biāo)準(zhǔn)，但還是可以用來完成適配。

圖5-6 分辨率480×320

游戲中有兩部分UI，主界面的菜單面板是居中對齊，getWinSize得到的大小的一半即是居中的位置，面板設(shè)置錨點為(0.5,0.5)，并設(shè)置居中的位置即可。第二部分UI是頂部的信息欄，信息欄的位置是靠上居中，信息欄設(shè)置錨點為(0.5,1.0)，然后設(shè)置getWinSize的width×0.5f為x坐標(biāo)，height為y坐標(biāo)即可。

在這里選擇的策略是SHOW_ALL，但是設(shè)計分辨率需要動態(tài)計算出來(一般的代碼這里都會設(shè)置一個分辨率)，因為要使用好1280×800的背景圖，關(guān)鍵有以下幾點：

不拉伸，不留黑邊。

根據(jù)手機的分辨率調(diào)整可視區(qū)域(設(shè)置的標(biāo)準(zhǔn)分辨率)。

當(dāng)目標(biāo)分辨率比背景還要寬時，把目標(biāo)分辨率等比縮小，直到分辨率內(nèi)容全部在可視區(qū)域內(nèi)。

當(dāng)目標(biāo)分辨率比背景還要高時，把目標(biāo)分辨率等比縮小，直到分辨率內(nèi)容全部在可視區(qū)域內(nèi)。

當(dāng)目標(biāo)分辨率比背景小時，把目標(biāo)分辨率等比放大，直到分辨率內(nèi)容全部在可視區(qū)域內(nèi)。

我們的背景分辨率是1280×800，720是筆者自己定義的一個值，因為筆者不希望整個背景太寬，所以進(jìn)行了限制，然后根據(jù)實際的分辨率與預(yù)期分辨率計算出期望的高和寬(要么高變，要么寬變)，代碼如下。

float height = 800.0f;

float width = 1280.0f;

float ratio = sz.width / sz.height;

float maxratio = width / height;

float minratio = width / 720.0f;

if (ratio > maxratio

{

//比寬的還要寬

height = width / ratio;

}

else if(ratio < minratio

{

//比窄的還要窄

width = height ratio;

……