ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 円を描く

enchant.js
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]

enchant31

 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]

enchant32

■円の中に円を描く

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

[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]

 enchant33

 意外な落とし穴は、パスの開始とパスの終了の間に2つ「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]

enchant34

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

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

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

[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]

enchant35

(アシベズヘア@ashibehair_m

ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 円を描く」への4件のフィードバック

  1. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 直線を描いてみる

  2. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【ホロスコープ(Horoscope)篇】 黄道十二宮(Zodiac)を描く

  3. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 enchant.jsのダウンロードと開発準備

  4. ピンバック: ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 enchant.jsのダウンロードと開発準備 | materialize.jp

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です