初めに
先日より、enchantjsとcordovaでスマホゲーム作成を楽しんでいます。
enchantjsは
9leap:トップページ - どこでも遊べる、投稿型ゲームサイトというサイトがあり、サンプルが充実しています。
できることを調べるのにはやっぱりサンプルが助かります。
数本cordovaで動作するよう修正してみましたが、音声再生と表示位置の調整が必要に思いました。
音声再生は、
こちらの記事で取り上げているので、今回は表示位置の調整で行ったことを記載します。
enchantjsでゲーム画面を中央表示させる方法
androidスマホは機器によって色んなモノがあるので、単純にいきません。
enchantjsでは次のようにゲーム画面サイズを指定して行いますが、値はピクセル値ですから、解像度の細かい機器では小さく表示されては操作性が損なわれます。
var game = Game(320,320)；// 320横 320縦
当然、画面いっぱいに表示できるように拡大してもらうのは当然でしょう。
また、横または縦サイズを合わせたとして、後の余白は中央寄せにしてもらいたいものです。
右とか左とか、上や下に偏った表示は残念な感じがしますからね。
画面サイズに合わせた表示は、viewportで指定します。index.htmlで次のように指定します。
FileName:index.html
<meta name="viewport"
content="width=device-width,height=device-height,user-scalable=no">
viewportは問題ないとして、あとは中央寄せ表示です。
いつもどおりGoogle検索してみましたがdiv指定でのサンプルはどうもうまく行きませんでした。
半分諦めかけたところに、次のページを参考に中央寄せができました。
筆者が実施した方法は以下のとおり。中央寄せのファンクションを作成します。
function previewCenter ( game ){
var left = ( window.innerWidth - ( game.width * game.scale )) /2;
var top=( window.innerHeight - ( game.height * game.scale )) /2;
$('#enchant-stage').css({
"position":"absolute",
"left":left+"px",
"top":top+"px",
});
game._pageX = left;
game._pageY = top;
}
次のようにnew Game()にて生成されるオブジェクトを渡して実行します。
これだけです。中央寄せで表示されます。
FileName:js/main.js
window.onload = function(){
game = new Game(320,320);
previewCenter(game); // ←この行で中央寄せを実施
: :
実行結果を記載したいところですが、9leapのサンプルをお借りしたので、作者の承諾後に掲載したいと思います。
500MB未満まで0円のSIM
ところで、筆者の通信量は？と確認してみたのですが、なんと700MB程度ですね。
