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

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

いい加減、黒い背景に三角のキャラにも飽きてきました。
今回は背景をかっこよくしたいと思います。

シューティングゲームといえば宇宙!!(え?、宇宙といえば星!!(え?
ということで、背景はでっかい星にします。

7a.png 丸は第1回でも書きましたが、arcを使います。

さらにかっこよくするためにグラデーションをかけてみます。
グラデーションには線形グラデーションと円形グラデーションがあるようです。

reateLinearGradient(x0, y0, x1, y1)
createRadialGradient(x0, y0, r0, x1, y1, r1)
addColorStop(offset, color)

7b.png 星なので円形グラデーションを使います。

ctx.beginPath();
ctx.arc(140, 140, 80, 0, Math.PI * 2, false);
var grad  = ctx.createRadialGradient(100, 100, 0, 100, 100, 120);
grad.addColorStop(0, "rgb(255, 255, 223)");
grad.addColorStop(0.8, "rgb(127, 95, 63)");
grad.addColorStop(1, "rgb(32, 32, 32)");
ctx.fillStyle = grad;
ctx.fill();

7c.png 星一個ではつまらないので、連星にしましょう。

ctx.beginPath();
ctx.arc(200, 190, 40, 0, Math.PI * 2, false);
var grad  = ctx.createRadialGradient(180, 170, 0, 180, 170, 60);
grad.addColorStop(0, "rgb(223, 223, 255)");
grad.addColorStop(0.8, "rgb(95, 95, 127)");
grad.addColorStop(1, "rgb(32, 32, 32)");
ctx.fillStyle = grad;
ctx.fill();

7d.png このままでは何か立体感に欠けるので、手前の星の影を後ろの星に落とします。

shadowBlur
shadowColor
shadowOffsetX
shadowOffsetY
ctx.save();
ctx.shadowBlur = 30;
ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
ctx.shadowOffsetX = -5;
ctx.shadowOffsetY = -4;
ctx.beginPath();
ctx.arc(200, 190, 40, 0, Math.PI * 2, false);
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fill();
ctx.restore();

あとは小さい星を後ろに散らして完成です。
7e.png

どうでしょうか。
ちょっとのっぺりしてますが、今回はこれでよしとしましょう。

早速これを背景にしてみます。 この絵をputImageDataを呼ぶ前に描画すればよいかと思ったのですが、putImageDataでは透過は適用されないようです。
仕方がないので、前回とは逆にこの絵を極座標の絵として直交座標に変換し、直交座標上で背景として描画します。
7f.png ちょっと細部がおかしくなりますが、まあ、許せる範囲でしょう。

7g.png
Play

・・・まったくスピード感がない(^^;
実際の宇宙ではおそらくこんな感じだと思いますが、ゲームとしては悲しいですね。
どうやったらスピード感を出せるか・・・今回は効果線を入れてみました。
より立体感も出すために、長い効果線は白くて速く移動し、短い効果線は半透明で遅く移動するようにしました。

7h.png
Play

だいぶ良い感じになったと思います。

トラックバック(0)

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

コメントする

オリジナルゲーム

オンラインツール