HTML5 でゲームを作る際のスマホ対応

カテゴリ:programming

スマホの向きの問題

HTML からデバイスの回転を制御(禁止)する方法はない(2016/6月現在). HTML5 でゲームを作成するときは縦と横と,両方の向きで正しく表示できるようにしなければならない.

CSS の変更

メディアクエリ―を使えばデバイスの向きによって適用する CSS を変更できる. 詳しくは CSS メディアクエリを使用してレスポンシブにする を参照.

canvas の変更

単純な向きならば screen.width と screen.height で判断できる.

function isLandscape(){
  return screen.width > screen.height;
}
var oldOrientation = isLandscape();

function update(){
  if ( oldOrientation != isLandscape() ){
    // 向きが変わったのでカンバスを作り直し
    
    
    oldOrientation = isLandscape();
  }
  if (isLandscape()){
    // 横の時のゲーム描画
  }
  else{
    // 縦の時のゲーム描画
  }
}

window.onorientation を使えば 90 度単位で傾きを取得できる. 詳しくは スマホやブラウザの画面サイズや向きを取得してやんよ!!! を参照.

画面解像度の問題

アスペクト比

ゲームを実行するアスペクトをひとつきめて, 隙間を適当な帯で埋めるようにする.

ブラウザ内で利用可能なピクセルは window.width,window.height で取得できる. 以下のコードで実際のカンバスサイズを計算できる.

// ゲームのアスペクト比は 16:9
var aspectRatio = 9/16;
var canvas_width;
var canvas_height;

// クライアント領域のアスペクト比
var clientAspectRatio = window.height/window.width;

if (aspectRatio > clientAspectRatio){
  // 縦にフィット
  canvas_height = window.height;
  canvas_width  = window.width * aspectRatio;
}
else{
  // 横にフィット
  canvas_width  = window.width;
  canvas_height = window.height / aspectRatio;
}

関連リンク

Androidの解像度の違いを考慮したデザイン基礎知識

【Android】いまさら聞けないdp入門