2012-10-02

近看 LimeJS 的 Viewport

遊戲設計最累的一個地方在於，要適合各種尺寸的螢幕，不只是桌機的各種尺寸，還有手持行動裝置，基本上應該是列不完的尺寸，根本不可能一一去指定。

如果可以指定遊戲長寬比例後，然後在各種裝置上以放到最大的前提下自動縮放，那不是很完美嗎？這就是 LimeJS 的超能力，而使用這超能力只有兩個地方要注意。
HelloLimeJS.gameW = 600;
HelloLimeJS.gameH = 400;

/** 程式進入點 */
HelloLimeJS.start = function() {
  // 每個遊戲只會有一個導演 director，所以要 keep 起來
  HelloLimeJS.director = new lime.Director(document.body, HelloLimeJS.gameW, HelloLimeJS.gameH);
  HelloLimeJS.director.makeMobileWebAppCapable();
  // 切入主場景
  HelloLimeJS.mainScene();
};
這樣就是一個 3:2 的遊戲 Viewport，可以隨著瀏覽器縮放，但有一個前提，就是傳入 lime.Driector 的第一個參數，必須是一個會隨著瀏覽器縮放的 Dom 物件，body 就是一個很好的選項。

來看看有沒有 body 以外的選項？

先試試相同尺寸的 div。
<body onload="HelloLimeJS.start()">
<div id="game" style="width: 600px; height: 400px; margin: 0 auto; border: 1px solid #eee;"></div>
</body>

HelloLimeJS.gameW = 600;
HelloLimeJS.gameH = 400;

/** 程式進入點 */
HelloLimeJS.start = function() {
  // 每個遊戲只會有一個導演 director，所以要 keep 起來
  HelloLimeJS.director = new lime.Director(document.getElementById('game'), HelloLimeJS.gameW, HelloLimeJS.gameH);
  HelloLimeJS.director.makeMobileWebAppCapable();
  // 切入主場景
  HelloLimeJS.mainScene();
};
乍看之下沒問題。


但是一旦瀏覽器縮小之後，就出現 srollbar 了。


接下來的測試只是純屬無聊。

看看相同比例但較小的 div。
<div id="game" style="width: 300px; height: 200px; margin: 0 auto; border: 1px solid #eee;"></div>

HelloLimeJS.gameW = 600;
HelloLimeJS.gameH = 400;
...
一切正常，只是以 div 的尺寸顯示，縮小之後一樣會出現 scrollbar。

再來相同比例但較大的 div。
<div id="game" style="width: 900px; height: 600px; margin: 0 auto; border: 1px solid #eee;"></div>

HelloLimeJS.gameW = 600;
HelloLimeJS.gameH = 400;
...
一切正常，還是以 div 的尺寸顯示，縮小之後一樣會出現 scrollbar。

最後來試試不同的比例。
<div id="game" style="width: 600px; height: 600px; margin: 0 auto; border: 1px solid #eee;"></div>

HelloLimeJS.gameW = 600;
HelloLimeJS.gameH = 400;
...
結果蠻有趣的，說明了 LimeJS 以所在 Dom 物件自動縮放，即使比例不相等。


所以結論就是前面提過的「必須是一個會隨著瀏覽器縮放的 Dom 物件」，然後在 lime.Director 決定長寬比例，剩下的都交給 LimeJS 了。

長寬比例的重要性更甚於隨瀏覽器縮放的 Dom 物件，原因在於 Dom 物件隨時可以更改，長寬比例一旦決定，遊戲設計之後要改就很難了。
---
---
---
於

沒有留言:

張貼留言