enchant.js / Ubiquitous Entertainment Inc.

　”ゲーム開発をenchant.js（HTML5 + JavaScript）で！　【導入篇】　enchant.jsのダウンロードと開発準備”の記事で作成したひな型を用いて、単純な円を描いてみたいと思う。

■コードはHTML5の使い方とほぼ一緒

　以下がコードとなる。このままコピーして使ってもらえば、すぐに円が確認できるぞ。

[html firstline=”1″ highlight=”33,34″ title=”main.js”]
enchant();

var SCREEN_WIDTH = 480; // ゲーム画面の幅.
var SCREEN_HEIGHT = 640; // ゲーム画面の高さ.

window.onload = function() {
// 表示領域を設定（幅と高さ）.
game = new Game( SCREEN_WIDTH, SCREEN_HEIGHT );

// frames（フレーム）per（毎）second（秒）、ゲーム進行スピードを設定.
game.fps = 24;

// メイン処理を実行.
game.onload = function() {
// ゲームのシーンに背景色を設定.
game.rootScene.backgroundColor = ‘#eece95’;

// Spriteを作成.
sprite = new Sprite( SCREEN_WIDTH, SCREEN_HEIGHT );

// Surfaceを作成.
surface = new Surface( SCREEN_WIDTH, SCREEN_HEIGHT );

// SpriteのimageにSurfaceを代入.
sprite.image = surface;

// Surfaceのコンテキストを取得.
context = surface.context;

// パスを開始.
context.beginPath();

// 原点(240,240)、半径190pxの円を描画.
context.arc( (SCREEN_WIDTH / 2), (SCREEN_WIDTH / 2), 190, 0, (Math.PI * 2), true );

// パスを終了.
context.closePath();

// パスを描画.
context.stroke();

// ゲームのシーンにSurfaceを追加.
game.rootScene.addChild( sprite );
}

// ゲームをスタート.
game.start();
}
[/html]

　beginPath()でパスを開始し、arc()で円状にパスを配置する。HTML5から経験した人は上記がキャンバスの使い方に過ぎないことに気が付くだろう。「arc()メソッド」のリファレンスはこちら（HTML5.JP）。で確認するようにしてほしい。

■円の色、幅を変えてみる

　折角なので、色を変えてみる。線の太さが1pxだと色が分かりづらいので、線の太さも変えた。

[html firstline=”30″ highlight=”33,34,35,36,37″ title=”main.js”]
// パスを開始.
context.beginPath();

// 描画色を指定.
context.strokeStyle = ‘rgb( 34, 0, 34 )’;

// 描画線幅を指定.
context.lineWidth = 4;

// 原点(240,240)、半径190pxの円を描画.
context.arc( (SCREEN_WIDTH / 2), (SCREEN_WIDTH / 2), 190, 0, (Math.PI * 2), true );
[/html]

■円の中に円を描く

　円の中に円を描いてみよう。

[html firstline=”30″ highlight=”48,49,50,51,52,53,54,55,56,57,58,59,60,61″ title=”main.js”]
// パスを開始.
context.beginPath();

// 描画色を指定.
context.strokeStyle = ‘rgb( 34, 0, 34 )’;

// 描画線幅を指定.
context.lineWidth = 3;

// 原点(240,240)、半径190pxの円を描画.
context.arc( (SCREEN_WIDTH / 2), (SCREEN_WIDTH / 2), 190, 0, (Math.PI * 2), true );

// パスを終了.
context.closePath();

// パスを描画.
context.stroke();

// パスを開始.
context.beginPath();

// 描画線幅を指定.
context.lineWidth = 2;

// 原点(240,240)、半径150pxの円を描画.
context.arc( (SCREEN_WIDTH / 2), (SCREEN_WIDTH / 2), 150, 0, (Math.PI * 2), true );

// パスを終了.
context.closePath();

// パスを描画.
context.stroke();
[/html]

　

　意外な落とし穴は、パスの開始とパスの終了の間に２つ「arc()」を実装してしまうこと。パスの指定は”一筆描き”と同じである為、パスの指定を別々にしないと、以下のようになってしまう。

[html firstline=”30″ highlight=”42,43,44,45,46″ title=”main.js”]
// パスを開始.
context.beginPath();

// 描画色を指定.
context.strokeStyle = ‘rgb( 34, 0, 34 )’;

// 描画線幅を指定.
context.lineWidth = 3;

// 原点(240,240)、半径190pxの円を描画.
context.arc( (SCREEN_WIDTH / 2), (SCREEN_WIDTH / 2), 190, 0, (Math.PI * 2), true );

// 描画線幅を指定.
context.lineWidth = 2;

// 原点(240,240)、半径150pxの円を描画.
context.arc( (SCREEN_WIDTH / 2), (SCREEN_WIDTH / 2), 150, 0, (Math.PI * 2), true );

// パスを終了.
context.closePath();

// パスを描画.
context.stroke();
[/html]

　あらあら、まるでカプセルコーポレーションのようになってしまった。

■円を特定の色で塗りつぶす

　円に囲まれている内側を特定の色で塗りつぶしてみよう。コメントが多くなってきたので整理して、以下のようにしてみた。色も先程までのとは変えているぞ。

[html firstline=”15″ highlight=”38,39,40,41,42,52,53,54,55,56″ title=”main.js”]
// ゲームのシーンに背景色を設定.
game.rootScene.backgroundColor = ‘#c1d8f7’;

// Spriteを作成.
sprite = new Sprite( SCREEN_WIDTH, SCREEN_HEIGHT );

// Surfaceを作成.
surface = new Surface( SCREEN_WIDTH, SCREEN_HEIGHT );

// SpriteのimageにSurfaceを代入.
sprite.image = surface;

// Surfaceのコンテキストを取得.
context = surface.context;

// 原点(240,240)、半径190pxの円を描画.
context.beginPath();
context.strokeStyle = ‘#21233c’;
context.lineWidth = 5;
context.arc( (SCREEN_WIDTH / 2), (SCREEN_WIDTH / 2), 190, 0, (Math.PI * 2), true );
context.closePath();
context.stroke();

context.beginPath();
context.fillStyle = ‘#6e7c89’;
context.arc( (SCREEN_WIDTH / 2), (SCREEN_WIDTH / 2), 190, 0, (Math.PI * 2), true );
context.closePath();
context.fill();

// 原点(240,240)、半径150pxの円を描画.
context.beginPath();
context.strokeStyle = ‘#21233c’;
context.lineWidth = 5;
context.arc( (SCREEN_WIDTH / 2), (SCREEN_WIDTH / 2), 150, 0, (Math.PI * 2), true );
context.closePath();
context.stroke();

context.beginPath();
context.fillStyle = ‘#031794’;
context.arc( (SCREEN_WIDTH / 2), (SCREEN_WIDTH / 2), 150, 0, (Math.PI * 2), true );
context.closePath();
context.fill();
[/html]

（アシベズヘア@ashibehair_m）