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

enchant.js
enchant.js / Ubiquitous Entertainment Inc.

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

 ”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 円を描く”の記事で円を描いたが、ほぼ同じ考え方だ。

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

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

[html firstline=”1″ highlight=”33,34,35,36,37,38″ 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;

// pre(前)-load(読み込み)、ゲームで使用する素材を予め読込.
game.preload( ‘./img/xxx.png’ );

// メイン処理を実行.
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(); // パスを開始.
context.moveTo( 50, 50 ); // ペンを( 50, 50 )に移動.
context.lineTo( 100, 300 ); // ( 100, 300 )まで直線を描く.
context.closePath(); // パスを終了.
context.stroke(); // パスを描画.

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

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

enchant41

■直線の色、幅を変えてみる

[html firstline=”33″ highlight=”35,36″ title=”main.js”]
// 直線を描画.
context.beginPath(); // パスを開始.
context.strokeStyle = ‘#ff0000’;
context.lineWidth = 5;
context.moveTo( 50, 50 ); // ペンを( 50, 50 )に移動.
context.lineTo( 100, 300 ); // ( 100, 300 )まで直線を描く.
context.closePath(); // パスを終了.
context.stroke(); // パスを描画.
[/html]

enchant42

■直線を重ねて描く

 直線を重ねて描いてみよう。

[html firstline=”33″ highlight=”39,40″ title=”main.js”]
// 直線を描画.
context.beginPath(); // パスを開始.
context.strokeStyle = ‘#ff0000’;
context.lineWidth = 5;
context.moveTo( 50, 50 ); // ペンを( 50, 50 )に移動.
context.lineTo( 100, 300 ); // ( 100, 300 )まで直線を描く.
context.moveTo( 50, 300 ); // ペンを( 50, 300 )に移動.
context.lineTo( 400, 100 ); // ( 400, 100 )まで直線を描く.
context.closePath(); // パスを終了.
context.stroke(); // パスを描画.
[/html]

enchant43

■直線と円を組み合わせて描く

 ”ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 円を描く”の記事の円と組み合わせて描いてみよう。

[html firstline=”1″ highlight=”6,7,8,9,10,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84″ title=”main.js”]
enchant();

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

var CIRCLE_ORIGIN_X = (SCREEN_WIDTH / 2);
var CIRCLE_ORIGIN_Y = (SCREEN_WIDTH / 2);
var CIRCLE_MARGIN = 50;
var CIRCLE_RADIUS = ((SCREEN_WIDTH / 2) – CIRCLE_MARGIN); // 半径.
var CIRCLE_DIAMETER = (CIRCLE_RADIUS * 2); // 直径.

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

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

// pre(前)-load(読み込み)、ゲームで使用する素材を予め読込.
game.preload( ‘./img/xxx.png’ );

// メイン処理を実行.
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;

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

context.beginPath();
context.fillStyle = ‘#eece95’;
context.arc( CIRCLE_ORIGIN_X, CIRCLE_ORIGIN_Y, CIRCLE_RADIUS, 0, (Math.PI * 2), true );
context.closePath();
context.fill();

// 原点(240,240)、半径150pxの円を描画.
context.beginPath();
context.strokeStyle = ‘#220022’;
context.lineWidth = 2;
context.arc( CIRCLE_ORIGIN_X, CIRCLE_ORIGIN_Y, (CIRCLE_RADIUS – 40), 0, (Math.PI * 2), true );
context.closePath();
context.stroke();

context.beginPath();
context.fillStyle = ‘#eece95’;
context.arc( CIRCLE_ORIGIN_X, CIRCLE_ORIGIN_Y, (CIRCLE_RADIUS – 40), 0, (Math.PI * 2), true );
context.closePath();
context.fill();

// 直線を描画.
context.beginPath();
context.strokeStyle = ‘#220022’;
context.lineWidth = 2;
context.moveTo( CIRCLE_ORIGIN_X – (CIRCLE_RADIUS * Math.cos( 0 * Math.PI / 180)), CIRCLE_ORIGIN_Y – (CIRCLE_RADIUS * Math.sin( 0 * Math.PI / 180)) );
context.lineTo( CIRCLE_ORIGIN_X + (CIRCLE_RADIUS * Math.cos( 0 * Math.PI / 180)), CIRCLE_ORIGIN_Y + (CIRCLE_RADIUS * Math.sin( 0 * Math.PI / 180)) );
context.moveTo( CIRCLE_ORIGIN_X – (CIRCLE_RADIUS * Math.cos( 30 * Math.PI / 180)), CIRCLE_ORIGIN_Y – (CIRCLE_RADIUS * Math.sin( 30 * Math.PI / 180)) );
context.lineTo( CIRCLE_ORIGIN_X + (CIRCLE_RADIUS * Math.cos( 30 * Math.PI / 180)), CIRCLE_ORIGIN_Y + (CIRCLE_RADIUS * Math.sin( 30 * Math.PI / 180)) );
context.moveTo( CIRCLE_ORIGIN_X – (CIRCLE_RADIUS * Math.cos( 60 * Math.PI / 180)), CIRCLE_ORIGIN_Y – (CIRCLE_RADIUS * Math.sin( 60 * Math.PI / 180)) );
context.lineTo( CIRCLE_ORIGIN_X + (CIRCLE_RADIUS * Math.cos( 60 * Math.PI / 180)), CIRCLE_ORIGIN_Y + (CIRCLE_RADIUS * Math.sin( 60 * Math.PI / 180)) );
context.moveTo( CIRCLE_ORIGIN_X – (CIRCLE_RADIUS * Math.cos( 90 * Math.PI / 180)), CIRCLE_ORIGIN_Y – (CIRCLE_RADIUS * Math.sin( 90 * Math.PI / 180)) );
context.lineTo( CIRCLE_ORIGIN_X + (CIRCLE_RADIUS * Math.cos( 90 * Math.PI / 180)), CIRCLE_ORIGIN_Y + (CIRCLE_RADIUS * Math.sin( 90 * Math.PI / 180)) );
context.moveTo( CIRCLE_ORIGIN_X – (CIRCLE_RADIUS * Math.cos(120 * Math.PI / 180)), CIRCLE_ORIGIN_Y – (CIRCLE_RADIUS * Math.sin(120 * Math.PI / 180)) );
context.lineTo( CIRCLE_ORIGIN_X + (CIRCLE_RADIUS * Math.cos(120 * Math.PI / 180)), CIRCLE_ORIGIN_Y + (CIRCLE_RADIUS * Math.sin(120 * Math.PI / 180)) );
context.moveTo( CIRCLE_ORIGIN_X – (CIRCLE_RADIUS * Math.cos(150 * Math.PI / 180)), CIRCLE_ORIGIN_Y – (CIRCLE_RADIUS * Math.sin(150 * Math.PI / 180)) );
context.lineTo( CIRCLE_ORIGIN_X + (CIRCLE_RADIUS * Math.cos(150 * Math.PI / 180)), CIRCLE_ORIGIN_Y + (CIRCLE_RADIUS * Math.sin(150 * Math.PI / 180)) );
context.closePath();
context.stroke();

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

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

enchant44

(アシベズヘア@ashibehair_m

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

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

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

  3. ピンバック: materialize.jp » AndroidのWebViewで画面の右横にできる隙間を消す方法(スクロールバー表示領域を消す方法)

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

コメントを残す

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