如果可以指定遊戲長寬比例後，然後在各種裝置上以放到最大的前提下自動縮放，那不是很完美嗎？這就是 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 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 物件隨時可以更改，長寬比例一旦決定，遊戲設計之後要改就很難了。
---
---
---
沒有留言:
張貼留言