ゲーム画面とスマホ画面のサイズを揃える
2016/11/10
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;
とすると、ゲーム領域は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(); };
どうでしょう??