はじめに

その1ではWebシステムとゲームの作り方の違いを解説しました。
今回は文字表示を行っていきたいと思います。

表示方法について

既に前回のタイマー表示で文字表示は出来ているのですが表示要素がDOM(Document Object Model)になっており、少しこのままだと扱いにくいため「キャンバス」を使って表示するようにしたいと思います。

タイマー表示サンプル(キャンバス版)

キャンバスを使って表示したサンプルが以下になります。

See the Pen
Qiita12_sample01(グラフ表示) by nojima (@noji505)
on CodePen.

文字は表示されていますが、数字の部分の表示がおかしくなっていると思います。
これはなぜかというと「キャンバス」という名前で察しがつくかもしれませんが、基本的にゲームのプログラムはループの開始時点で一旦画面をクリア→表示→クリアというのをループ毎に繰り返して画面を表示しています。
上のサンプルは表示をクリアをしていないため、数字の表示が残ったままになりこういう表示になっています。

というわけで、先ほどのサンプルに画面クリアの処理を追加しましょう。

main.js

  // 画面クリア
  drawFill( 0, 0, SC_W, SC_H, 0xFFFFFF, null );

See the Pen Qiita12_sample02(グラフ表示_クリアあり) by nojima (@noji505) on CodePen.

これで前回と同じ状態になりました。

表示位置について

続いて文字の表示位置についてです。

main.js

//-----------------------------------------------------------
// drawText : 文字列描画
//     引数 : 文字,X,Y,色,サイズ,表示位置フラグ
//   戻り値 : 無し
//-----------------------------------------------------------
function drawText( text, x, y, c, size, flg )
{
  var textWidth;            // テキスト横幅
  var textHeight = size;    // テキスト縦幅

  g.font = ""+size+"px ＭＳ ゴシック";  // フォント
  g.fillStyle = c;                      // 文字色

  // 表示位置フラグによって、表示位置を変更
  if( (flg & TEXT_HCENTER) != 0 ){  // 中央
    textWidth = g.measureText( text ).width;    // 横幅取得
    x = SW_HALF - (textWidth >> 1);
  } else if( (flg & TEXT_HRIGHT) != 0 ){  // 右寄せ
    textWidth = g.measureText( text ).width;    // 横幅取得
    x = SC_W - textWidth;
  }

  if( (flg & TEXT_VCENTER) != 0 ){          // 中央
    y = SH_HALF - (textHeight >> 1);
  } else if( (flg & TEXT_VBOTTOM) != 0 ){   // 下寄せ
    y = SC_H - textHeight;
  }

  y += textHeight;  // テキストの高さ分、下にずらす

  g.fillText( text, x, y );  // 表示
}

上記のメソッドで指定した位置に文字を表示出来そうなのは何となく分かるかと思うのですが、例えば文字をゲーム画面の中央に表示したいといった時にいちいち表示位置を指定するのは面倒だと思います。
HTMLタグの位置指定のように「text-align:center;」といった指定で常に真ん中に表示出来ると便利そうです。
それを実現するのが第6引数のフラグ変数になっています。
数値指定なのですが、以下のように定数があるのでそれを指定して呼び出すとコードが読みやすくなると思います。

main.js

// テキスト表示位置フラグ
var TEXT_NONE = 0x0000;
var TEXT_HCENTER = 0x0001;
var TEXT_HRIGHT = 0x0020;
var TEXT_VCENTER = 0x0010;
var TEXT_VBOTTOM = 0x0004;

上記のフラグを使って文字の表示位置を指定したサンプルが以下になります。

See the Pen
Qiita12_sample03(テキスト表示位置指定) by nojima (@noji505)
on CodePen.

画面が真っ白のままだと右端がどこか分からないため、色をつけています。
テキスト表示のメソッド呼び出しは以下になります。

main.js

  drawText( "左上", 0, 0, '#000000', 16, TEXT_NONE );
  drawText( "真ん中", 0, 0, '#000000', 16, TEXT_HCENTER );
  drawText( "右端", 0, 0, '#000000', 16, TEXT_HRIGHT );
  drawText( "中心", 0, 0, '#000000', 24, TEXT_HCENTER | TEXT_VCENTER );
  drawText( "右下", 0, 0, '#000000', 30, TEXT_HRIGHT | TEXT_VBOTTOM );

第二引数のX座標と、第三引数のY座標がともに「0」指定にも関わらず、表示位置がそれぞれ異なっているのが分かるかと思います。
横方向の指定と縦方向の指定は同時に行いたいときがあるので(画面中央寄せとか)、ビットで指定出来るようになっています。

最後に

まだ文字表示だけですが画像表示なども基本的には同じような処理になります。
次回はキー入力処理を作ってみたいと思います。

オマケ

See the Pen by nojima (@noji505) on CodePen.

ブラウザゲームを作ってみよう(その2)

はじめに

表示方法について

タイマー表示サンプル(キャンバス版)

表示位置について

最後に

オマケ