ゲーム画面とスマホ画面のサイズを揃える

enchant.js はデフォルトで画面一杯に広がるようになっているので、
まずはそれをオフにします。

HTML（index.htmlのboby内）に

<a href="https://pierre-net.com/wp-content/uploads/2014/01/20140131.png">
<img src="https://pierre-net.com/wp-content/uploads/2014/01/20140131" alt="20140131" width="300"/>
</a>

と記載します。
すると、画面のフィット機能がオフになります。

そうした上で、スマホの画面とゲームの画面のサイズを合わせます。

なぜ、自分はこういったことをやろうかと思ったのか。。。
nend広告を貼る場合、ゲームの画面のみをフィットさせてしまうと
nend広告が画面から消えてしまうからです。。
また、nend広告が見える様にレイアウトすると、
今度はゲームの画面がスマホの画面とフィットしなくなってしまうから。。

そんなわけで、こんな手法をとってみました。

さて。次に、main.jsの方になります。
例えば
　core.scale = 2;
とすると、ゲーム領域は２倍になるので、これをつかって。。

ゲームの領域を

　var game = new Core(320, 480);

としていたときは、横が320pxなので、

　var scale_w = window.innerWidth/320;
　coer.scale = scale_w;

こんな風にウィンドウの幅をゲームの幅で割ってやり、
この変倍率をcore.scaleとしてあげて、
あとはデバイスに合わせてフィットしてもらう。
という感じにします。

後は、縦と横の大きさのうち、変倍率の低い方を拡大するため、
下記の様にやりました。

// enchant.jsを使った場合のプログラム
// main.js

// enchant.jsを使う場合のおまじない
　enchant();
　
　window.onload = function() {
　　　// ゲームの画面サイズを決定する。
　　　// Core(横px, 縦px)
　　　var game = new Core(320, 480);
　
　　　// スマホの画面のサイズとゲームの画面のサイズを合わせるため
　　　var scale_h = window.innerHeight/480;
　　　var scale_w = window.innerWidth/320;
　　　if (scale_h >= scale_w){
　　　　　game.scale = scale_w;
　　　}
　　　else{
　　　　　game.scale = scale_h;
　　　}
　-------省略-------
　　game.start();
　};

どうでしょう？？

　

 - アプリ