[Corona SDK] display.contentWidth 和 display.viewableContentWidth 的差別是什麼?

我們常常會用到 display.contentWidth和display.contentHeight，
不管你是要放圖或顯示文字等等，
那...display.viewableContentWidth和display.viewableContentHeight又是幹嘛用的？
怎麼感覺這個好像比較是我們該用的參數？

如果你查了一下display.viewableContentWidth，
官網的解釋是：
A read-only property that contains the width of the viewable screen area in content coordinates.
看完了更加覺得它比display.contentWidth更適合我們在程式裡使用，
真的是這樣嗎？

因為config.lua裡的scale有四種選擇，
只有在scale = "zoomEven"時，它們才有差異，
所以，我們就設定scale = "zoomEven"，
來看看它們有何不同...

我們將main.lua的程式改寫如下：

display.setStatusBar( display.HiddenStatusBar )

local xpos = display.contentWidth/2
local ypos = display.contentHeight/2
local background = display.newImage( "320x480.jpg", xpos, ypos )
local xpos = display.contentWidth
local ypos = display.contentHeight
local myText = display.newText( xpos .. "x" .. ypos, display.contentWidth/2, display.contentHeight/2-20, native.systemFont, 40 )
local xpos = display.viewableContentWidth
local ypos = display.viewableContentHeight
local myText = display.newText(  xpos .. "x" .. ypos, display.viewableContentWidth/2, display.viewableContentHeight/2+20, native.systemFont, 40 )
myText:setFillColor( 1, 110/255, 110/255 )

在模擬器跑跑看

View As 640 x 960

在View As "320x480"或"640x960"時，

二者值是一樣的，

在來試試其它解析度看看，例如1080x1920.

View As 1080 x 1920

數值不一樣了，

而且，文字的位置也相對移動了，

在[Corona SDK] config.lua中的scale - 實例演練裡，

如果你仔細研讀的話，你會發現似曾相識，
用個圖來說明原因，

原來，display.ContentWidth＝320是相當於一開始可用的畫布寛度(A點到F點），
display.viewableContentWidth＝270是相當於要scale時會截取的有效畫布寛度(B點到E點)，
截取的中心點還是160，然後往兩旁展開，
如果程式裡用display.ContentWidth ,  中心點是160(C點)，
如果程式裡用display.viewableContentWidth ，中心點就會變成是135(G點)，
display.newText()的動作會先發生，然後才scale,

在scale到真的解析度寬度1080後，結果就會和上圖的情形一樣，

如果是1920x1080呢?

Viewa As 1920 x 1080

上面的圖，程式其實有稍微修改，

不然，文字會跑出視窗外，看不到了

local xpos = display.contentWidth/2
local ypos = display.contentHeight/2
local background = display.newImage( "320x480.jpg", xpos, ypos )
local xpos = display.contentWidth
local ypos = display.contentHeight
local myText = display.newText( xpos .. "x" .. ypos, display.contentWidth/2, display.contentHeight/2-20, native.systemFont, 40 )
local xpos = display.viewableContentWidth
local ypos = display.viewableContentHeight
local myText = display.newText(  xpos .. "x" .. ypos, display.contentWidth/2, display.contentHeight/2+20, native.systemFont, 40 )
myText:setFillColor( 1, 110/255, 110/255 )

從上面的解說，你會發現如果不是"zoomEven" Mode,
那用一個都可以，
如果是"zoomEven" Mode，
那就是要display.contentWidth和display.contentHeight，
那...display.viewableContentWidth和display.viewableContentHeight要幹嘛？
它們可以讓你知道實際會出現的"有效"寬度和長度資訊，
就看你程式是不是有這樣的需求...

Note:理論上，在letterbox模式時，display.viewableContentWidth或display.viewableContentHeight應要比display.contentWidth或display.contentHeight來的大，
所以你會看到在letterbox mode時，上下或兩旁可能有黑邊現象，
但display.viewableContentWidth或display.viewableContentHeight看起來是指"有效的"寬度和長度資訊，而不是"可視的"寬度和長度資訊，所以它最大值會受限於display.contentWidth或display.contentHeight,
在letterbox mode，如果要取得包括黑邊的長度或寬度，應該是要用display.actualContentWidth和display.actualContentHeight，
這二個參數在zoomEven mode也適用，它們的值會和display.viewableContentWidth或display.viewableContentHeight一樣