HTML5/Javascriptでマルチプラットフォームのゲームを作るときの小ネタ

小ネタ

iPhoneやAndroidといったスマートフォンや、iPadなどのタブレット端末を意識したゲーム作りの小ネタです。

イベントの伝播を防ぐ

スマートフォンやタブレット端末ではタッチイベントが多用されます。
ブラウザで実行する際に、タッチすると拡大縮小やフォーカスやスクロールといった現象が発生します。


これを防ぐために下記のようなコードを仕込みます。

function on_touch(e)
{
    // hogehoge
    e.preventDefault();
}

拡大縮小を制御する

スマートフォンやタブレット端末ではウィンドウを扱わないので仮想ウィンドウサイズを決めることができます。
metaタグで指定することで開いた時の拡大縮小の率を設定することができます。
なお、設定次第で実行速度が向上する場合があります。

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">


htmlのヘッダに上記のように設定することができます。
initial-scaleはデフォルトの拡大率です。
user-scalableはユーザーに拡縮を許可するかです。
参考：http://www.minimo.jp/?p=308


リサイズ

スマートフォンでは、デフォルトで設定した解像度を下回る場合があります。
また、タブレット端末では全面に拡大して用いたい場合があります。


下記のように、canvasの大きさを100%に設定することで実現できます。

<head>
<style type="text/css"> #imgCanvas { width:100%; height:100% } </script>
</head>

// hoge hoge

<canvas id="imgCanvas" width="640" height="480" style="border:1px black solid;" />


また、ブラウザ情報やスクリーンサイズから判断して拡大縮小を行うのもよいでしょう。

  if( document.body.clientWidth < 640 || document.body.clientHeight < 480  )
  {
      var target = document.getElementById('imgCanvas'); 
      target.style.width="100%";
      target.style.height="100%";
  }

タッチ座標とゲーム内座標

上記の項目のようにスクリーンの拡大縮小を行なっている場合があります。
そのような場合にタッチ座標とゲーム内の座標にズレが生じてしまいます。


例えば、全画面に拡大した場合は比率を補正する必要があります。

var x = e.touches[0].screenX;
var y = e.touches[0].screenY;

if( resize_flag )
{
    var w = document.body.clientWidth;
    var h = document.body.clientHeight;
    x = parseInt( 640 * (x/w) + 0.5 );
    y = parseInt( 480 * (y/h) + 0.5 );
}

指で隠れるのを防ぐ

これはゲームデザイン的な意味です。
タッチ時のY座標を補正するなど、操作キャラクターなどのオブジェクトが指で隠れないようにしましょう。


参考までに

以前、HTML5/Javascriptで弾幕STGを作りました。
右クリックからソースを開けば全部見られます。(jsやりたてなので結構ヒドイですが)
雲色の風