Canvasを作ってその上に描画する

ジャンプ先:
  1. ゲームのHTML
  2. Canvasの基本
  3. 自分のコードと比べる
  4. 次のステップ

« 前のページ次のページ »

これはゲーム開発Canvasチュートリアルの10ステップのうち1番最初のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson1.htmlで入手できます。

ゲームの機能を書き始める前に、ゲーム内部を記述する基本的な構造を作る必要があります。これにはHTMLと<canvas>要素を用います。

ゲームのHTML

ゲームは全て<canvas>要素に描画されるため、HTML文書構造は極めて簡潔です。好きなテキストエディタを使って新しいHTML文書を作成し、適当な場所にindex.htmlとして保存してください。そして、そのHTML文書に次のコードを追加します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Gamedev Canvas Workshop</title>
    <style>
    	* { padding: 0; margin: 0; }
    	canvas { background: #eee; display: block; margin: 0 auto; }
    </style>
</head>
<body>

<canvas id="myCanvas" width="480" height="320"></canvas>

<script>
	// JavaScriptのコードがここに入ります
</script>

</body>
</html>

charset を定義し、<title>と簡単ななCSSをヘッダに記述しました。本体には<canvas>と<script>要素があり、前者にはゲームを描画し、後者にはそれを制御するJavaScriptのコードを記述します。<canvas>要素は簡単に参照を取得できるようにmyCanvasというidを持ち、幅は480ピクセル、高さは320ピクセルとしています。このチュートリアルで書く全てのJavaScriptのコードは開始の<script>と終了の</script>タグの間に配置されます。

Canvasの基本

実際に<canvas>要素に映像を描画するために、まずはJavaScriptから要素への参照を取得しなければなりません。次のコードを開始の<script>タグのあとに追記してください。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ここでは<canvas>要素への参照をcanvasに保存しています。それから2D描画コンテキストを保存するためにctx変数を作成しています。2D描画コンテキストは実際にCanvasに描画するために使うツールとなります。

赤い四角形をキャンバスの上に表示するコード例を見てみましょう。下記のコードを先程記述したJavaScriptのあとに追記して、index.htmlをブラウザで読み込んでみてください。

ctx.beginPath();
ctx.rect(20, 40, 50, 50);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();

全ての命令はbeginPath()メソッドと closePath()メソッドの間に記述されています。四角形をrect()を用いて定義しています。最初の2つの値は左上の角のキャンバス上での座標を指定し、あとの2つの値は幅と高さを指定しています。今回描画された四角形は画面の左端から20ピクセル、上端から40ピクセルの位置に幅50ピクセル、高さ50ピクセルの大きさで、正方形になっています。fillStyleプロパティはfill()メソッドで用いられる色 (今回は赤) を保存します。

もちろん四角形だけではありません。ここでは緑の円を描画するコードを紹介します。次のコードを自分のJavaScriptの最後に追記し、保存して再読込してみてください。

ctx.beginPath();
ctx.arc(240, 160, 20, 0, Math.PI*2, false);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();

見て分かるとおり、beginPath()メソッドとclosePath()メソッドが再び用いられています。その間にこのコードで最も重要な部分、arc()メソッドが呼び出されています。このメソッドは6つのパラメーターを持ちます。

  • 円の中心のx、y座標
  • 円の半径
  • 開始角度と終了角度 (円を描く始める時点の角度と描き終えたあとの角度をラジアンで)
  • 描く方向 (時計回りはfalseで、デフォルト。半時計回りはtrue。) この最後のパラメーターは省略可能です。

fillStyleプロパティは先程とは違う形になっています。これはCSSでそうであるように、色は16進値、色キーワード、rgba()関数、その他利用可能な色メソッドなら何でも指定することができるからです。

図形をfill()で塗りつぶすかわりにstroke()で縁だけ色を付けることも出来ます。次のコードも自分のJavaScriptに追記してみてください。

ctx.beginPath();
ctx.rect(160, 10, 100, 40);
ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
ctx.stroke();
ctx.closePath();

上記のコードは青く縁取られたからの四角形を描画します。rgba()関数内のアルファチャネルにより青色は半透明になっています。

自分のコードと比べる

以下がJSFiddleで即実行可能な最初のレッスンのソースコード全てです。

 

 

練習: 与えられた図形の大きさや色を変えてみましょう。

次のステップ

ここまでで基本的なHTMLを組み上げcanvasに少し学習しました。それでは、第2章に進みどうやってゲーム内のボールを動かすか学びましょう。

« 前のページ次のページ »

ドキュメントのタグと貢献者

このページの貢献者: wbamberg, nekomanma
最終更新者: wbamberg,