ブラウザゲームを作ってみよう(その6:画像表示)

はじめに

その5では図形表示を行いました。
今回は画像の表示を行いたいと思います。

画像表示

以下のサンプル画像を表示したいと思います。
[sample.png]

  <img src="sample.png">

表示するだけなら上記のようなHTMLタグになります。
ただこれだと画像の内容が全て表示されてしまうため、画像ファイルは1枚のままで画像の一部分だけを切り出して表示させたいと思います。

画像ファイルの読み込みと表示は以下のようになります。

var img = new Array( 1 );

var imgName = [ "sample.png" ];
loadImageFile( imgName );  // 画像ファイルロード

drawImageClip( img[0], 0, 0, 0, 0, 32, 32 );  // 画像表示

//-----------------------------------------------------------
// loadImageFile : イメージファイルロード
//          引数 : ファイル名
//        戻り値 : 無し
//-----------------------------------------------------------
function loadImageFile( fileName )
{
	for( var i=0; i<fileName.length; i++ ){
		img[i] = new Image();
		img[i].src = fileName[i];
	}
}

//-----------------------------------------------------------
// drawImageClip : イメージ描画
//          引数 : イメージ,表示X,表示Y,開始X,開始Y,幅,高さ
//        戻り値 : 無し
//-----------------------------------------------------------
function drawImageClip( objImg, x, y, sx, sy, w, h )
{
	if( objImg == null )	return;
	g.drawImage( objImg, sx, sy, w, h, x, y, w, h );
}

実行イメージ

上記を実行すると、以下のような表示になります

また、以下のように記述すると「下」の部分が表示されます。

drawImageClip( img[0], 0, 0, 32, 0, 32, 32 );

drawImageClipメソッドの第4引数が「0」→「32」に変わっています。
この部分で画像表示の開始位置を変更しています。

サンプル

今回の内容を踏まえて以下のサンプルを作成しました。
カーソルキーを入力した方向の画像(↑なら上)が表示されます。

See the Pen Qiita17_sample1(画像表示) by nojima (@noji505) on CodePen.

画像の切替は、以下のような配列を定義して行っています。

  var drawCharas = [
    [0,0],  // 上
    [32,0], // 下
    [64,0], // 左
    [96,0]  // 右
  ];

このようにしておくと、後から画像のサイズが変わった時にも対応しやすいと思います。

最後に

画像を表示出来るようになるとゲームっぽさが出ますね。
次回は当たり判定を行いたいと思います。