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

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

今回も演出関連です。

10.png ゲームを作るうえで重要なことは、プレーヤーの作業に対して見返りを与えるということだと思います。
別に金銭的な見返りというわけではありません。
RPGならモンスターを倒すという作業を行えば、経験値、アイテムなどがもらえますね、それが見返りです。
シューティングでもいろいろあると思いますが、最も初歩的なところ「敵を倒したぞ!!」という印象・達成感?を与えるために、爆発アニメーションを作ります。

爆発もクラスにして、敵が消去されるときに敵がいた位置に作成します。
見返りなので、もっとディテールにこだわる必要があると思いますが、今回はarcにグラデーションで適当に色をつけただけにしました(^^;

var Explosion = function (x, y)
{
	var sx, sy;
	sy = Math.sqrt((HEIGHT - y - 1) / HEIGHT);
	sy = r - sy * r;
	this.coeff = Math.abs(sy / HEIGHT);
	
	sx = sy * Math.cos(x * Math.PI * 2 / WIDTH + Math.PI) + hw;
	sy = sy * Math.sin(x * Math.PI * 2 / WIDTH + Math.PI) + hh;

	this.x = sx;
	this.y = sy;
	
	this.count = 0;

	this.limit = 10;

	this.move = function ()
	{
		if (this.limit < ++this.count) return false;
		return true;
	}

	this.draw = function (ctx)
	{
		var radius = (140 - (this.limit - this.count) * (this.limit - this.count) * 140 / (this.limit * this.limit)) * this.coeff;
		var alpha = 1;
		if (this.limit - 4 <= this.count)
			alpha = (this.limit - this.count) / 4;
	
		ctx.save();
		ctx.translate(this.x, this.y);
		ctx.beginPath();
		ctx.arc(0, 0, radius, 0, Math.PI * 2, false)
		var grad  = ctx.createRadialGradient(0, 0, 0, 0, 0, radius);
		grad.addColorStop(0, "rgba(255, 255, 255," + alpha + ")");
		grad.addColorStop(0.5, "rgba(255, 255, 255," + alpha + ")");
		grad.addColorStop(0.8, "rgba(255, 255, 0," + alpha + ")");
		grad.addColorStop(1, "rgba(255, 0, 0," + alpha + ")");
		ctx.fillStyle = grad;
		ctx.fill();
		ctx.restore();
	}
}
これを直交座標に描いてから極座標に変換すると円がゆがんで大変なことになるので、極座標に変換した後の画面に直接描画します。
作成時に直交座標上での敵の位置を与えて、極座標への変換をして爆発のx座標、y座標としています。

10.png
Play

演出ついでに、自機弾を発射したときにエフェクトをつけました。
あまり目立ちませんが、ないよりはましでしょう。

var Spark = function (x, y)
{
	this.x = x;
	this.y = y;
	this.count = 0;

	this.move = function ()
	{
		if (1 < ++this.count) return false;
		return true;
	}
	
	this.draw = function (ctx)
	{
		ctx.save();
		ctx.beginPath();
		ctx.translate(this.x, this.y);
		ctx.moveTo(0, 0);
		ctx.lineTo(-9, 1);
		ctx.lineTo(-4, -1);
		ctx.lineTo(-10, -3);
		ctx.lineTo(-4, -3);
		ctx.lineTo(-10, -7);
		ctx.lineTo(0, -4);
		ctx.lineTo(9, -7);
		ctx.lineTo(4, -3);
		ctx.lineTo(11, -3);
		ctx.lineTo(5, -1);
		ctx.lineTo(10, 1);
		ctx.fillStyle = "rgb(255, 128, 128)";
		ctx.fill();
		ctx.restore();
	}
}

10a.png
Play

トラックバック(0)

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

コメントする

オリジナルゲーム

オンラインツール