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

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

私は今までDOMを駆使してゲームを作ってきました。
しかし、HTML5の特にCanvasの登場によって、ゲーム作りも大きく変わってきています。
すでにCanvasを利用したゲームライブラリなども登場してきているようですね。
IE9もCanvasをサポートすることですし、遅ればせながら私もCanvasの勉強をしようと思います。
ただ勉強するだけではつまらないので、ついでにゲームでも作っちゃおう!!

canvas000.png まず、どんなゲームを作るか・・・
やっぱり入門者が誰でも一度はつくるシューティングにしようかな。
以前DOMを使ってJShooterを作ったので、それと作り方の比較もできますし。

とりあえず、ゲームとは関係ないところから。
Canvasタグについて詳しくはここにあります。
要するに「width」と「height」をもっているということですね。
当然Javascriptから扱うので、エレメントを取得しやすいように「id」もつけたほうが良いでしょう。

<canvas id="field" width="300" height="300"></canvas>
こんな感じでしょうか。

Javascript側では、Canvasエレメントを取得して、そこから「getContext」で実際に操作するコンテキストを取得するようです。
引数は今のところ「2d」のみだそうです。
今後「3d」とか出てくるのでしょうか。

var canvas = document.getElementById("field");
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
一応、Canvasに対応していないブラウザのために「getContext」がなければ、それ以降の処理はしないようにしました。

以上をまとめると

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>HTML5 - Canvasの勉強</title>
		<script type="text/javascript">

window.onload = function ()
{
	var canvas = document.getElementById("field");
	if (!canvas.getContext) return;
	var ctx = canvas.getContext("2d");
}

		</script>
	</head>
	<body>
		<canvas id="field" width="300" height="300"></canvas>
	</body>
</html>

ブラウザで表示しても何にも出ませんが、とりあえず最初の一歩が踏み出せたような気になりました(^^;

トラックバック(0)

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

コメントする

オリジナルゲーム

オンラインツール