ゲーム製作でHTML5-Canvasを勉強するぞ!! 第9回

| コメント(0) | トラックバック(0)

9.png 背景をつけたのにキャラが三角のままというのバランスが悪いので絵に変えようと思います。

Canvasではimgタグで読み込んだ画像を簡単に描画できます。

drawImage(image, dx, dy)
転送先(dx,dy)に画像(image)を描画
drawImage(image, dx, dy, dw, dh)
転送先に拡大/縮小して画像を描画
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
転送先に画像の一部を拡大/縮小して画像を描画

これだけではつまらないので、画像もHTMLの中に持たせてしまいましょう。
これはimgタグのsrc属性にURLデータスキームを書くことで、実現できます
実はこのために「ドット絵エディタ」を作りました。
この「ドット絵エディタ」で出力したURLデータスキームを貼り付ければ簡単に利用できます。
myship.png

myShipクラス作成時にimgタグを動的に作成し、srcに画像データを設定します。

this.image = new Image();
this.image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABZElEQVQ4jZ1UQU6DQBR9U7r1CE2adNnCoks3JV0a6YQDeASIddlDWKNH8AATrHEnwQuwEFyamHgO8l2Y+R1goOhLCAzvzePN/8MAJxDsKnKlolM6jdFQ4VDTXsNgVw1OpiH6SAIIADyp+F2RhL1zOhNqMwB4T0KrxraCwTVsQkwiAtq1rRk2O2ouVUPzl1d31g91JvSkwnS+sZp2pQWAsZnu6+OJRdP5hu8euk21rvh+sCcs83TQnjM/bqb8d1OaWCzXYMO/bOAyT3v5VsLVrOg1W80K+L5vDSAmEXFTmjVpjm2wacaaKPOU6wAcuwcAz4/XVkOtMXmhoy6Wa17S2flrZ8I+DdfXlYoIoEg45Ps+uVJRJBwigK9IOORKRa5UVo3mj03ZB7iniof8vA9aHGtuL355Qz/iqNsDYuHg7dMFAMTCqU02x1mWCQCIb16A7aHG89mm66jPu66/xTwPm5oiCcUP97u2VtEplmIAAAAASUVORK5CYII=";

描画は三角からdeawImageに変更しました。

this.draw = function (ctx)
{
	ctx.save();
	ctx.beginPath();
	if (button)
		ctx.transform(-1, 0, 0, 1, this.x, this.y);
	else
		ctx.translate(this.x, this.y);
	ctx.drawImage(this.image, -10, -10);
	ctx.restore();
}
自機画像は少し傾いている画像にし、逆回転しているときは逆方向に傾くようにtransformを使って左右反転しています。

同様にして敵にも画像をつけました。
enemy1.png

this.image = new Image();
this.image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAB00lEQVQ4jZ2UvYrbUBCFvyv8EOlCSGtwY4d0BovLkjZF2CdYV6qSLVQsATcunFQqglykC7hSGxuxhu1E1o3AbcBl8ghpdlJII66vJBNyGoFmzpnfOwBsy5PQA7m5EQERkBR6/YyNBCDYlidZbXa9YqzXAKzrf32is/EQYyMxYZzK/XJuWmI1cd3mAjCHFsfYSAYAXaIq9DsrAHh4LAF4t5x3BtCSBwDTyQhq0TBOBeD59VUl+PMXD48l+8OxYsZpJXA4CoDkiTE2ktl4yP5wxBgbyfdP7/lRE100IlQ98qF2FQMYSJ6Y1WYot3VGAB+/fGscp5PRWckqpAHcQJInJgC4X87NarPj1ctnDXE2HuIGUSHNxM1+fzgieWKaHroO+p1ORqw2uzOin5EbQHE2WWMj0Ug6NS27q786EOUABK6Ta3DFujJSX5/TWs5FVohmc3t91SrbnehFwUVWCNDsnEu8tDK+cKBid9uv3L193RqOX7Yv9vTiD0950vS8UvcuihrDOJVteZJFVoixkRgbib4kYyPpukTV2ngXxcWbD597+3eJR+plpzA2kkVWSBinTXauLfXuZGvKPsI4Fff5dZ06F8ElI1QD0CfpT/a/oQP5F9+/KPYxXHvJ4FsAAAAASUVORK5CYII=";

敵は反転する必要はないので、そのまま描画するだけです。

this.draw = function (ctx)
{
	ctx.save();
	ctx.beginPath();
	ctx.translate(this.x, this.y);
	ctx.drawImage(this.image, -10, -10);
	ctx.restore();
}

こうなってくると、自機弾、敵弾も味気ないですね。
自機弾、敵弾はパスで描画していますが、パスはbeginPathを呼ぶまで初期化されません。
これを利用して、線幅や色を変えてstrokeすることで味付けできます。

自機弾

this.draw = function (ctx)
{
	ctx.save();
	ctx.beginPath();
	ctx.translate(this.x, this.y);
	ctx.moveTo(0, -6);
	ctx.lineTo(0, 6);
	ctx.strokeStyle = "rgb(255, 0, 0)";
	ctx.lineWidth = 4;
	ctx.lineCap = "round";
	ctx.stroke();
	ctx.strokeStyle = "rgb(255, 128, 128)";
	ctx.lineWidth = 2;
	ctx.stroke();
	ctx.restore();
}

敵弾は同じパスだと変だったので、普通に2回lineToで描画しました。

this.draw = function (ctx)
{
	ctx.save();
	ctx.translate(this.x, this.y);
	ctx.rotate(this.count);

	ctx.beginPath();
	ctx.moveTo(0, -2);
	ctx.lineTo(0, 2);
	ctx.strokeStyle = "rgb(255, 64, 255)";
	ctx.lineWidth = 6;
	ctx.lineCap = "round";
	ctx.stroke();

	ctx.beginPath();
	ctx.moveTo(0, -4);
	ctx.lineTo(0, 4);
	ctx.strokeStyle = "rgb(255, 255, 255)";
	ctx.lineWidth = 2;
	ctx.lineCap = "round";
	ctx.stroke();

	ctx.restore();
}

だいぶそれらしくなってきたと思います。
・・・あれ?自機や敵が欠けることがあるぞ。
そうです、キャラが画面端にいるとき反対側にも描画しないと極座標側で欠けてしまいます。

var drawObjs = function (objs, ctx)
{
	for (var n = 0; n < objs.length; n++)
	{
		objs[n].draw(ctx);
	}
	
	ctx.save();
	ctx.translate(WIDTH, 0);
	for (var n = 0; n < objs.length; n++)
	{
		objs[n].draw(ctx);
	}
	ctx.restore();
	
	ctx.save();
	ctx.translate(-WIDTH, 0);
	for (var n = 0; n < objs.length; n++)
	{
		objs[n].draw(ctx);
	}
	ctx.restore();
}
だいぶ手抜きですが、本来の描画、左に1画面分移動させ描画、右に1画面分移動させ描画の計3回描画するようにしました。
今後処理速度が厳しくなるようだったら、もう少し早くなるように修正したいと思います。

それから、細かいことですが、自機の移動方向を変えるためにマウスボタンを押したり離したりするので、ダブルクリックと判断されて変に選択されることがありました。
マウスボタンが押された際にデフォルトの処理をやめることでこれを回避するようにしました。

polarCanvas.onmousedown = function (e)
{
	button = true;
	e.preventDefault();
}

9.png
Play

トラックバック(0)

トラックバックURL: http://murakya.net/mt/mt-tb.cgi/21

コメントする

オリジナルゲーム

オンラインツール