enchant.jsのゲーム画面の中央表示

enchant.jsで作成したゲームをブラウザの中央に表示する方法です。


enchant.jsでゲーム画面を表示すると、（特に指定をしない場合）ブラウザの左上に表示されます。



これを下のように、中央に表示し余白には背景画像を表示します。


以下のような関数を作成し、この関数をenchant.coreのインスタンスを引数に呼び出すとゲーム画面が中央表示となります。

// enchant.jsの表示をセンタリング
var moveStageToCenter = function(core) {
 var stagePos = {
  top: (window.innerHeight - (core.height * core.scale)) / 2,
  left: (window.innerWidth - (core.width * core.scale)) / 2,
 };
 var stage = document.getElementById('enchant-stage');
 stage.style.position = 'absolute';
 stage.style.top = stagePos.top + 'px';
 stage.style.left = stagePos.left + 'px';
 core._pageX = stagePos.left;
 core._pageY = stagePos.top;
};

また、センタリングした結果できた余白には、cssでbody要素に背景画像を設定します。

body {
 background-image: url(./img/hexabump.png);
 background-repeat: repeat;
}

実際に中央表示を行っているサンプルソースをGithubに作成しました。
ソースコード(Github)