ピエールの日記 by pierre 長尾和美

ピエールです。SamuraiTraditional(サムトラ)、たけしを(逸見泰典とのユニット)でギターやってます♪思いつきをブログに! ^^v by pierre

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

      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();
 };

どうでしょう??

 

 - アプリ