catch.jp-wiki

enchant.js のバックアップ差分(No.1)

  • 追加された行はこの色です。
  • 削除された行はこの色です。
[[Programing]]

ここは、enchant.jsをはじめるときに必要な、ごくごく基本的なコード類のまとめです。enchant.jsに付属のサンプルのアクションゲーム(\examples\action)とシューティングゲーム(\examples\shooting)などを改良していきます。

enchant.jsは、ゲームプログラムを作るためのライブラリプログラムです(ゲームエンジンとも言う)。

HTML5とJavascriptという技術で作られていて、パソコンだけじゃなくスマートフォンやタブレットにも対応したゲームを作成できます。

ここでは、少しずつコードを複雑にしていって、クマが走り回るゲームを完成させます。

-[[9leap : 30秒、リンゴ集めゲーム by y_catch - どこでも遊べる、投稿型ゲームサイト:http://9leap.net/games/1126]]
-30秒間で、できるだけたくさんリンゴを集めてください。
-左右の矢印キーで、クマが走ります。
-左下の十字エリアを使うと、マウスクリック(パソコン)、タッチ(スマートフォン)でも操作できます。

もう少しゲームらしくした。

-[[9leap : 30秒、リンゴ集めゲームPart2:http://9leap.net/games/1176]]

#ref(1176_140.gif)



#contents

*ダウンロード [#yc6b9b9f]

-[[enchant.js - HTML5 + JavaScript Game Engine:http://enchantjs.com/ja/]]


*必要なファイル [#b8f4e08f]

enchant.jsから、次のファイルを取り出します。

クマ画像(bear.gif)は、改良しています。

- enchant.js：enchant.js本体
- game.js：ゲームのメインプログラム
- index.html：メインプログラムを呼び出すHTMLファイル。これをブラウザで開く
- bear.gif:画像ファイル

#ref(bear.gif)

* index.html [#nde0ff97]

ゲームを実行するには、 index.htmlをダブルクリック。ここから、メインプログラムであるgame.jsや、ライブラリであるenchant.jsを呼び出しています。

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, user-scalable=no"> 
         <meta name="apple-mobile-web-app-capable" content="yes"> 
         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
         <title>Sample Game</title>
         <script type="text/javascript" src="enchant.js"></script>
         <script type="text/javascript" src="game.js"></script>
         <style type="text/css">
             body {
                 margin: 0;
             }
         </style>
     </head>
     <body>
     </body>
 </html>

* game.jsの基本コード [#b1f8a8b5]

ゲームのメインプログラムであるgame.jsの基本的な構成を順番にみていきます。

**何もしないコード [#z5168b76]

これが、基本形。いちおう、画像ファイル(bear.gif)を読み込んでいるけれど表示はしない。

下記のテキストをgame.jsというテキストファイルとして保存する。そして、index.htmlを呼び出すと、プログラム実行。

 enchant();
 
 window.onload = function() {
 	var game = new Game(320, 320); 	//ゲーム画面を設定
 	game.preload('bear.gif');	//画像ファイルを読み込み
 
 	game.onload = function() {
 		//「{」と「}」の間に、ゲームの動作を記述する
 	}
 	game.start();
 }

**画像をただ表示する [#qb76c8e5]

前述のファイルを書き換えて、スプライト機能(Sprite)で画像を表示する。

 enchant();
 
 window.onload = function() {
 	var game = new Game(320, 320);
 	game.preload('bear.gif');
 
 	game.onload = function() {
 		var bear = new Sprite(20, 30);
       	　　　　bear.image = game.assets['bear.gif'];
 
 		game.rootScene.addChild(bear);
 	}
 	game.start();
 }

**表示する画像を変える [#p7e99849]

複数のイメージを持っている画像の場合、スプライトで別のイメージを表示する。

クマが歩いているアニメーションなどに使えます(まだ歩きません)。

 enchant();
 
 window.onload = function() {
 	var game = new Game(320, 320);
 	game.preload('bear.gif');
 
 	game.onload = function() {
 		var bear = new Sprite(20, 30);
       	　　　　bear.image = game.assets['bear.gif'];
 		bear.frame = 1;
 
 		game.rootScene.addChild(bear);
 	}
 	game.start();
 }


**表示位置を指定 [#mb934d47]

スプライトの位置を指定

 enchant();
 
 window.onload = function() {
 	var game = new Game(320, 320);
 	game.preload('bear.gif');
 
 	game.onload = function() {
 		var bear = new Sprite(20, 30);
       	　　　　bear.image = game.assets['bear.gif'];
 		bear.x = 150;
 		bear.y = 150;
 		bear.frame = 1;
 
 		game.rootScene.addChild(bear);
 	}
 	game.start();
 }

**キー入力で画像を切り替え [#s89a6625]

左右の矢印キーを押して、画像を切り替え

 enchant();
 
 window.onload = function() {
 	var game = new Game(320, 320);
 	game.preload('bear.gif');
 
 	game.onload = function() {
 		var bear = new Sprite(20, 30);
       		bear.image = game.assets['bear.gif'];
 
       		bear.addEventListener('enterframe', function() {
 			bear.x = 150;
 			bear.y = 150;
 			if(game.input.left) bear.frame = 1;
 			if(game.input.right) bear.frame = 2;
 		});
 		game.rootScene.addChild(bear);
 	}
 	game.start();
 }

**アニメーション１ [#f6c15a11]

左右の矢印キーで、その場で走る

 enchant();
 
 window.onload = function() {
 	var game = new Game(320, 320);
 	game.preload('bear.gif');
 
 	game.onload = function() {
 		var bear = new Sprite(20, 30);
       		bear.image = game.assets['bear.gif'];
 
       		bear.addEventListener('enterframe', function() {
			bear.x = 150;
			bear.y = 150;
			if(game.input.right) {
				if(bear.frame == 1) {
					bear.frame = 2;
				} else {
					bear.frame = 1;
				}
			}
			if(game.input.left) {
				if(bear.frame == 4) {
					bear.frame = 5;
				} else {
					bear.frame = 4;
				}
			}
 		});
 		game.rootScene.addChild(bear);
 	}
 	game.start();
 }

**アニメーション２ [#v06aaf4f]

左右の矢印キーで走る。壁は無視。

 enchant();
 
 window.onload = function() {
 	var game = new Game(320, 320);
 	game.preload('bear.gif');
 
 	game.onload = function() {
 		var bear = new Sprite(20, 30);
       		bear.image = game.assets['bear.gif'];
 
       		bear.addEventListener('enterframe', function() {
			bear.y = 150;
			if(game.input.right) {
				if(bear.frame == 1) {
					bear.frame = 2;
				} else {
					bear.frame = 1;
				}
				bear.x += 5;	
			}
			if(game.input.left) {
				if(bear.frame == 4) {
					bear.frame = 5;
				} else {
					bear.frame = 4;
				}
				bear.x -= 5;	
			}
 		});
 		game.rootScene.addChild(bear);
 	}
 	game.start();
 }

**アニメーション３ [#r9bd2f81]

左右の矢印キーで走る。壁で止まる。

 enchant();
 
 window.onload = function() {
 	var game = new Game(320, 320);
 	game.preload('bear.gif');
 
 	game.onload = function() {
 		var bear = new Sprite(20, 30);
       		bear.image = game.assets['bear.gif'];
 
       		bear.addEventListener('enterframe', function() {
 			bear.y = 150;
 			if(game.input.right) {
 				if(bear.frame == 1) {
 					bear.frame = 2;
 				} else {
 					bear.frame = 1;
 				}
 				if (bear.x < 300) {
 					bear.x += 5;
 				} else {
 					bear.x = 300;
 				}
 			}
 			if(game.input.left) {
 				if(bear.frame == 4) {
 					bear.frame = 5;
 				} else {
 					bear.frame = 4;
 				}
 				if (bear.x > 0) {
 					bear.x -= 5;
 				} else {
 					bear.x = 0;
 				}
 			}
 		});
 		game.rootScene.addChild(bear);
 	}
 	game.start();
 }

**サンプル [#t3df58f2]

-[[サンプルプログラムを実行する:http://www.catch.jp/program/enchant.js/lesson_1/]]
-左右の矢印キーで、クマが走ります。
-[[ソースコード:http://www.catch.jp/program/enchant.js/lesson_1/game.js]]

ここまでで完成したファイル

#ref(enchant_sample_lesson1.lzh)

*文字を表示する [#rff46cbc]

画面上に文字を表示するには、ラベル機能(Label)を使います。


**画面上部に固定で文字を表示する [#u7bfd3f6]

「Running Bear:」という文字を表示する

 enchant();
 
 window.onload = function() {
 	var game = new Game(320, 320);
 
 	var label = new Label("Running Bear:");
 	label.x = 0;
 	label.y = 0;
 	game.rootScene.addChild(label);
 
 	game.start();
 }


**文字を書き換える [#l4d79b5d]

固定ではなく、表示している文字を変化させる

 enchant();
 
 window.onload = function() {
 	var game = new Game(320, 320);
 	game.preload("bear.gif");
 
 	var label = new Label("Running Bear:");
 	label.x = 0;
 	label.y = 0;
 	game.rootScene.addChild(label);
 	
 	game.onload = function() {
 		var label_time = new Label();
 		label_time.x = 0;
 		label_time.y = 14;
 		
       		label_time.addEventListener('enterframe', function() {
 			label_time.text = game.frame;
 		});
 		game.rootScene.addChild(label_time);
 	}
 	game.start();
 }

**アニメーションと文字表示 [#x93a3f15]

クマが走り、経過時間が表示されます。

アニメーションのスピードを「game.fps = 15;」で調整しています。
 
 enchant();
 
 window.onload = function() {
 	var game = new Game(320, 320);
 	game.preload("bear.gif");
 	game.fps = 15;
 
 	var label = new Label("Running Bear:");
 	label.x = 0;
 	label.y = 0;
 	game.rootScene.addChild(label);
 	
 	game.onload = function() {
		//ラベルで文字表示
 		var label_time = new Label();
 		label_time.x = 0;
 		label_time.y = 14;
 				
       	　　　　label_time.addEventListener('enterframe', function() {
 			label_time.text = game.frame;
 		});
 		game.rootScene.addChild(label_time);
 
		//スプライトでクマ表示
 		var bear = new Sprite(20, 30);
       	　　　　bear.image = game.assets['bear.gif'];
 		
 		bear.addEventListener('enterframe', function() {
 			if(bear.frame == 1) {
 				bear.frame = 2;
 			} else {
 				bear.frame = 1;
 			}
 			
 			bear.x += 5
 			if (bear.x > 300) {
 					bear.x = 0;
 			}
 			bear.y = 50;
 		});
 		game.rootScene.addChild(bear);
 	}
 	game.start();
 }


**サンプル [#dcb86424]

-[[サンプルプログラムを実行する:http://www.catch.jp/program/enchant.js/lesson_2/]]
-クマが走り、経過時間が表示されます。
-[[ソースコード:http://www.catch.jp/program/enchant.js/lesson_2/game.js]]

ここまでで完成したファイル

#ref(enchant_sample_lesson2.lzh)



*効果音を出す [#o4cfc1f5]

ゲームに効果音がつくと、楽しさ倍増です。

**とにかく音を出す [#hab3d314]

サウンドファイル()を読み込んで、それを「.play」で再生します。
 
 enchant();
 
 window.onload = function() {
     var game = new Game(320, 320);
     game.preload('jump.wav');
     game.onload = function() {
 	    var sound = game.assets['jump.wav'].play();
 	    sound.play();
     };
     game.start();
 };



**操作にあわせて音を出す。 [#se2442cc]

画像表示のところに、再生を組み込みます。

※効果音ファイルを読み込めなくて、何度か苦労しました。enchant.jsのバージョンが古いとうまくいかない時がありました。

 enchant();
 
 window.onload = function() {
     var game = new Game(320, 320);
     game.preload('jump.wav', 'bear.gif');
     game.onload = function() {
 	    game.assets['jump.wav'].play();
 		
 		var bear = new Sprite(20, 30);
       	bear.image = game.assets['bear.gif'];
 		
 		bear.addEventListener('enterframe', function() {
 			if(game.input.right) {
 				var sound = game.assets['jump.wav'].clone();
 				sound.play();
 			}
 		});
 		game.rootScene.addChild(bear);
     };
     game.start();
 };

**サンプル [#m807a206]

-[[サンプルプログラムを実行する:http://www.catch.jp/program/enchant.js/lesson_4/]]
-右矢印キーで音が出ます。
-[[ソースコード:http://www.catch.jp/program/enchant.js/lesson_4/game.js]]

ここまでで完成したファイル

#ref(enchant_sample_lesson4.lzh)

*画像を部品化する [#h52552ae]

プログラムは、いくつかの部品の組み合わせとして作ると、作成しやすくなります。

**キャラ画像を部品化 [#n27ba729]

Kumaという部品(オブジェクト)を定義。それをplayer1とplayer2に割り当てています。
ひとつの設計図(Kuma)から、複数の部品を作り出しています。部品の定義は、頭文字を大文字にします。割り当て先は、全部小文字で書いています。

 enchant();
 
 var Kuma = enchant.Class.create(enchant.Sprite, {
     initialize: function(x, y){
         enchant.Sprite.call(this, 20, 30);
         this.image = game.assets['bear.gif'];
         this.x = x; this.y = y; this.frame = 0;
         game.rootScene.addChild(this);
     }
 });
 
 window.onload = function() {
     game = new Game(320, 320); 
     game.preload('bear.gif');
     game.onload = function() {
 	player1 = new Kuma(0, 0);
 	player1.frame = 1;
 	player2 = new Kuma(30, 0);
 	player2.frame = 2;
     }
     game.start();
 }

**部品化した画像を移動 [#ia4fd2e6]

部品では、部品の設計図側で動作を定義できます。ここでは、Kuma部品に、move_rightとmove_leftを定義しています。そして、メイン部分で、押されたキーに合わせて、move_rightとmove_leftを呼び出しています。

 enchant();
 
 var Kuma = enchant.Class.create(enchant.Sprite, {
     initialize: function(x, y){
         enchant.Sprite.call(this, 20, 30);
         this.image = game.assets['bear.gif'];
         this.x = x; this.y = y; this.frame = 0;
         game.rootScene.addChild(this);
     },
 	move_right: function() {
 		this.x += 5;
 	},
 	move_left: function() {
 		this.x -= 5;
 	}
 });
 
 window.onload = function() {
     game = new Game(320, 320); 
     game.preload('bear.gif');
     game.onload = function() {
 		player = new Kuma(0, 0);
 		
 		game.addEventListener('enterframe', function() {
 			if(game.input.right) {
 				player.move_right();
 			}
 			if(game.input.left) {
 				player.move_left();
 			}
 		});
     }
     game.start();
 }

**部品化したキャラのアニメーション [#q6b81d2f]

くっつけてみた。キー入力の検出は、部品側に移動した。これで、本体側はすっきり。
キャラは左右キーで操縦できる。

 enchant();
 SCREEN_WIDTH = 320;
 SCREEN_HEIGHT = 320;
 
 var Kuma = enchant.Class.create(enchant.Sprite, {
     initialize: function(x, y){
 		this.KUMA_WIDTH = 20;
 		this.KUMA_HEIGHT = 30;
 		this.KUMA_Y = 50;
 		this.dir = 0;		//進行方向 0:右(right)、1:左(left)
 		this.walk = 0;		//歩行ポーズ 0:停止 1:右足 2:左足
 		this.step = 5;
 		
 		enchant.Sprite.call(this, this.KUMA_WIDTH, this.KUMA_HEIGHT);
 		this.image = game.assets['bear.gif'];
 		this.x = x;
 		this.y = this.KUMA_Y;
 		this.frame = 0;
 
 		this.addEventListener('enterframe', function() {
 			if(game.input.right) {
 				this.move_right();
 			} else if(game.input.left) {
 				this.move_left();
 			} else {
 				this.move_stop();
 			}
 			this.change_frame();
 		});
 		game.rootScene.addChild(this);
 	},
 	move_right: function() {
 		this.dir = 0;
 		if((this.walk == 0) || (this.walk == 2)){
 			this.walk = 1;
 		} else if(this.walk == 1) {
 			this.walk = 2;
 		}
 		if (this.x < (SCREEN_WIDTH - this.KUMA_WIDTH)) {
 			this.x += this.step;
 		} else {
 			this.x = SCREEN_WIDTH - this.KUMA_WIDTH;
 		}
 	},
 	move_left: function() {
 		this.dir = 1;
 		if((this.walk == 0) || (this.walk == 2)){
 			this.walk = 1;
 		} else if(this.walk == 1) {
 			this.walk = 2;
 		}
 		if (this.x > 0) {
 			this.x -= this.step;
 		} else {
 			this.x = 0;
 		}
 	},
 	move_stop: function(){
 		if(this.walk !== 0) {
 			game.assets['jump.wav'].play();
 		}
 		this.walk = 0;
 	},
 	change_frame: function() {
 		this.frame = this.dir * 3 + this.walk;
 	}
 });
 
 window.onload = function() {
 	game = new Game(SCREEN_WIDTH, SCREEN_HEIGHT); 
 	game.preload('jump.wav', 'bear.gif');
 	game.onload = function() {
 		player = new Kuma(0, 0);
 	}
 	game.start();
 }

-[[サンプルプログラムを実行する:http://www.catch.jp/program/enchant.js/lesson_5/]]
-左右の矢印キーでクマが走ります。
-[[ソースコード:http://www.catch.jp/program/enchant.js/lesson_5/game.js]]

ここまでで完成したファイル

#ref(enchant_sample_lesson5.lzh)


*複数のパーツを動かす [#f49c9150]

アクションゲームでは、複数の敵機やターゲットが登場します。たとえば、隕石が飛んでくるとか、インベーダが現れるといった具合です。これを実現するためには、共通のパーツを複数登場させて、同時に動かす必要があります。

**複数の画像を表示する [#he4e0e00]

まず複数の画像を表示する前に、画像をひとつだけ部品化して表示してみましょう。これは、先ほどのキャラを部品化する方法とほとんど同じで、Appleという部品が上から降ってきます。Appleは、1こだけ表示されます。違っているのは、実体化した部品を消去できるようにしているところ(remove)です。

 enchant();
 SCREEN_WIDTH = 320;
 SCREEN_HEIGHT = 320;
 
 var Apple = enchant.Class.create(enchant.Sprite, {
 	initialize: function(x, y){
 		this.WIDTH = 16;
 		this.HEIGHT = 16;
 		this.STEP = 5;
 		
 		enchant.Sprite.call(this, this.WIDTH, this.HEIGHT);
 		this.image = game.assets['icon0.gif'];
 		this.x = x;
 		this.y = y;
 		this.frame = 15;
 		this.addEventListener('enterframe', function(){
 			this.move_step();
 		});
 		game.rootScene.addChild(this);
 	},
 	move_step: function() {
 		this.y += this.STEP;
 		if (this.y >= (SCREEN_HEIGHT - this.HEIGHT)) {
 			this.remove();
 		}
 	},
 	remove: function(){
 		game.rootScene.removeChild(this);
 	}
 });
 
 window.onload = function() {
 	game = new Game(SCREEN_WIDTH, SCREEN_HEIGHT); 
 	game.fps = 15;
 	game.preload('icon0.gif');
 	game.onload = function() {
 		target = new Apple(100, 0);
 	}
 	game.start();
 }

**複数の画像を動かす [#oda390f1]

これを改造して複数キャラを動かせるようにすると、こうなります。複数のAppleが上から降ってきます。部品の部分は、先ほどと同じですが、本体側で複数のAppleを実体化しています。

 enchant();
 SCREEN_WIDTH = 320;
 SCREEN_HEIGHT = 320;
 
 var Apple = enchant.Class.create(enchant.Sprite, {
 	initialize: function(x, y){
 		this.WIDTH = 16;
 		this.HEIGHT = 16;
 		this.STEP = 5;
 		
 		enchant.Sprite.call(this, this.WIDTH, this.HEIGHT);
 		this.image = game.assets['icon0.gif'];
 		this.x = x;
 		this.y = y;
 		this.frame = 15;
 		this.addEventListener('enterframe', function(){
 			this.move_step();
 		});
 		game.rootScene.addChild(this);
 	},
 	move_step: function() {
 		this.y += this.STEP;
 		if (this.y >= (SCREEN_HEIGHT - this.HEIGHT)) {
 			this.remove();
 		}
 	},
 	remove: function(){
 		game.rootScene.removeChild(this);
 	}
 });
 
 window.onload = function() {
 	game = new Game(SCREEN_WIDTH, SCREEN_HEIGHT); 
 	game.fps = 15;
 	game.preload('icon0.gif');
 	game.onload = function() {
 		targets = [];
 		game.rootScene.addEventListener('enterframe', function(){
  			if((game.frame % 10) == 0){
 				var x = Math.floor(Math.random() * 300);
 				targets[game.frame] = new Apple(x, 0);
 			}
 		});
 	}
 	game.start();
 }

-[[サンプルプログラムを実行する:http://www.catch.jp/program/enchant.js/lesson_6_2/]]
-[[ソースコード:http://www.catch.jp/program/enchant.js/lesson_6_2/game.js]]

ここまでで完成したファイル

#ref(enchant_sample_lesson6-2.lzh)

これに、味方キャラを付け加えると、それらしくなってきますね。


**自キャラ(操縦できる)と敵キャラを同時に表示する [#v823b793]

左右キーで操縦できる自キャラと、敵キャラを同時に表示すると、こうなります。
 
 enchant();
 SCREEN_WIDTH = 320;
 SCREEN_HEIGHT = 320;
 
 //操縦できる自キャラ
 var Kuma = enchant.Class.create(enchant.Sprite, {
     initialize: function(x, y){
 		this.KUMA_WIDTH = 20;
 		this.KUMA_HEIGHT = 30;
 		this.KUMA_Y = 200;
 		this.dir = 0;		//進行方向 0:右(right)、1:左(left)
 		this.walk = 0;		//歩行ポーズ 0:停止 1:右足 2:左足
 		this.step = 5;
 		
 		enchant.Sprite.call(this, this.KUMA_WIDTH, this.KUMA_HEIGHT);
 		this.image = game.assets['bear.gif'];
 		this.x = x;
 		this.y = this.KUMA_Y;
 		this.frame = 0;
 
 		this.addEventListener('enterframe', function() {
 			if(game.input.right) {
 				this.move_right();
 			} else if(game.input.left) {
 				this.move_left();
 			} else {
 				this.move_stop();
 			}
 			this.change_frame();
 		});
 		game.rootScene.addChild(this);
 	},
 	move_right: function() {
 		this.dir = 0;
 		if((this.walk == 0) || (this.walk == 2)){
 			this.walk = 1;
 		} else if(this.walk == 1) {
 			this.walk = 2;
 		}
 		if (this.x < (SCREEN_WIDTH - this.KUMA_WIDTH)) {
 			this.x += this.step;
 		} else {
 			this.x = SCREEN_WIDTH - this.KUMA_WIDTH;
 		}
 	},
 	move_left: function() {
 		this.dir = 1;
 		if((this.walk == 0) || (this.walk == 2)){
 			this.walk = 1;
 		} else if(this.walk == 1) {
 			this.walk = 2;
 		}
 		if (this.x > 0) {
 			this.x -= this.step;
 		} else {
 			this.x = 0;
 		}
 	},
 	move_stop: function(){
 		if(this.walk !== 0) {
 			game.assets['jump.wav'].play();
 		}
 		this.walk = 0;
 	},
 	change_frame: function() {
 		this.frame = this.dir * 3 + this.walk;
 	}
 });
 
 //複数表示される相手キャラ
 var Apple = enchant.Class.create(enchant.Sprite, {
 	initialize: function(x, y){
 		this.WIDTH = 16;
 		this.HEIGHT = 16;
 		this.STEP = 5;
 		
 		enchant.Sprite.call(this, this.WIDTH, this.HEIGHT);
 		this.image = game.assets['icon0.gif'];
 		this.x = x;
 		this.y = y;
 		this.frame = 15;
 		this.addEventListener('enterframe', function(){
 			this.move_step();
 		});
 		game.rootScene.addChild(this);
 	},
 	move_step: function() {
 		this.y += this.STEP;
 		if (this.y >= (SCREEN_HEIGHT - this.HEIGHT)) {
 			this.remove();
 		}
 	},
 	remove: function(){
 		game.rootScene.removeChild(this);
 	}
 });
 
 window.onload = function() {
 	game = new Game(SCREEN_WIDTH, SCREEN_HEIGHT); 
 	game.fps = 15;
 	game.preload('bear.gif', 'icon0.gif', 'jump.wav');
 	game.onload = function() {
 		player = new Kuma(0, 0);
 		targets = [];
 		game.rootScene.addEventListener('enterframe', function(){
  			if((game.frame % 10) == 0){
 				var x = Math.floor(Math.random() * 300);
 				targets[game.frame] = new Apple(x, 0);
 			}
 		});
 	}
 	game.start();
 }

-[[サンプルプログラムを実行する:http://www.catch.jp/program/enchant.js/lesson_6_3/]]
-[[ソースコード:http://www.catch.jp/program/enchant.js/lesson_6_3/game.js]]

ここまでで完成したファイル

#ref(enchant_sample_lesson6-3.lzh)

これに当たり判定を付け加えると、ゲームっぽくなりますね。

**当り判定 [#vf730204]

自キャラと相手キャラが接触したかどうか、当り判定を行います。当り判定は、画像を表示するための部品であるスプライト(Sprite)の当り判定命令(intersect)を使います。リンゴ(Apple)が移動したとき、毎回クマとの当り判定を行って、当たっていたら、対象のリンゴを消去し効果音を鳴らします。

 enchant();
 SCREEN_WIDTH = 320;
 SCREEN_HEIGHT = 320;
 score = 0;
 
 //操縦できる自キャラ
 var Kuma = enchant.Class.create(enchant.Sprite, {
     initialize: function(x, y){
 		this.KUMA_WIDTH = 20;
 		this.KUMA_HEIGHT = 30;
 		this.KUMA_Y = 200;
 		this.dir = 0;		//進行方向 0:右(right)、1:左(left)
 		this.walk = 0;		//歩行ポーズ 0:停止 1:右足 2:左足
 		this.step = 5;
 		
 		enchant.Sprite.call(this, this.KUMA_WIDTH, this.KUMA_HEIGHT);
 		this.image = game.assets['bear.gif'];
 		this.x = x;
 		this.y = this.KUMA_Y;
 		this.frame = 0;
 
 		this.addEventListener('enterframe', function() {
 			if(game.input.right) {
 				this.move_right();
 			} else if(game.input.left) {
 				this.move_left();
 			} else {
 				this.move_stop();
 			}
 			this.change_frame();
 		});
 		game.rootScene.addChild(this);
 	},
 	move_right: function() {
 		this.dir = 0;
 		if((this.walk == 0) || (this.walk == 2)){
 			this.walk = 1;
 		} else if(this.walk == 1) {
 			this.walk = 2;
 		}
 		if (this.x < (SCREEN_WIDTH - this.KUMA_WIDTH)) {
 			this.x += this.step;
 		} else {
 			this.x = SCREEN_WIDTH - this.KUMA_WIDTH;
 		}
 	},
 	move_left: function() {
 		this.dir = 1;
 		if((this.walk == 0) || (this.walk == 2)){
 			this.walk = 1;
 		} else if(this.walk == 1) {
 			this.walk = 2;
 		}
 		if (this.x > 0) {
 			this.x -= this.step;
 		} else {
 			this.x = 0;
 		}
 	},
 	move_stop: function(){
 		this.walk = 0;
 	},
 	change_frame: function() {
 		this.frame = this.dir * 3 + this.walk;
 	}
 });
 
 //複数表示される相手キャラ
 var Apple = enchant.Class.create(enchant.Sprite, {
 	initialize: function(x, y){
 		this.WIDTH = 16;
 		this.HEIGHT = 16;
 		this.STEP = 5;
 		
 		enchant.Sprite.call(this, this.WIDTH, this.HEIGHT);
 		this.image = game.assets['icon0.gif'];
 		this.x = x;
 		this.y = y;
 		this.frame = 15;
 		this.addEventListener('enterframe', function(){
 			this.move_step();
 		});
 		game.rootScene.addChild(this);
 	},
 	move_step: function() {
 		this.y += this.STEP;
 
 		//当り判定
 		if(this.intersect(player)){
 			this.remove();
 			game.assets['jump.wav'].play();
 		}
 		//下端に到達
 		if (this.y >= (SCREEN_HEIGHT - this.HEIGHT)) {
 			this.remove();
 		}
 	},
 	remove: function(){
 		game.rootScene.removeChild(this);
 	}
 });
 
 window.onload = function() {
 	game = new Game(SCREEN_WIDTH, SCREEN_HEIGHT); 
 	game.fps = 15;
 	game.preload('bear.gif', 'icon0.gif', 'jump.wav');
 	game.onload = function() {
 		player = new Kuma(0, 0);
 		targets = [];
 		game.rootScene.addEventListener('enterframe', function(){
  			if((game.frame % 10) == 0){
 				var x = Math.floor(Math.random() * 300);
 				targets[game.frame] = new Apple(x, 0);
 			}
 		});
 	}
 	game.start();
 }

-[[サンプルプログラムを実行する:http://www.catch.jp/program/enchant.js/lesson_7/]]
-[[ソースコード:http://www.catch.jp/program/enchant.js/lesson_7/game.js]]

ここまでで完成したファイル

#ref(enchant_sample_lesson7.lzh)

*ゲーム作成に便利なプラグイン [#o7f33f99]

enchant.jsは、プラグイン(plugin)で機能を拡張できます。

ゲームを作るときも、プラグインを活用すると作業効率が上がります。

-[[plugin／enchant.js - HTML5 + JavaScript Game Engine:http://enchantjs.com/ja/plugin.html]]

下記も参考になります。

-[[enchant.jsで今まで作ったゲームを『9leap』仕様にする方法 | IDEA*IDEA:http://www.ideaxidea.com/archives/2011/05/for_9leap.html]]

**プラグインの使い方 [#x47ae7cf]

プラグインは、enchant.jsと同じフォルダか、その直下のpluginsフォルダに放り込むといいでしょう。

enchant.jsを解凍した場合は、後者になっています。

それから、プラグインが必要とする画像を同じフォルダに用意します。

-nineleap.enchant.jsの場合
--start.png
--end.png
--font.png
-ui.enchant.jsの場合
--apad.png
--pad.png

あとは、index.htmlにプラグインファイルの記述を追加します。

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, user-scalable=no"> 
         <meta name="apple-mobile-web-app-capable" content="yes"> 
         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
         <title>enchant</title>
         <script type="text/javascript" src="enchant.js"></script>
         <script type="text/javascript" src="plugins/nineleap.enchant.js"></script>
         <script type="text/javascript" src="plugins/util.enchant.js"></script>
         <script type="text/javascript" src="plugins/ui.enchant.js"></script>
         <script type="text/javascript" src="game.js"></script>
         <style type="text/css">
             body {margin: 0;}
         </style>
     </head>
     <body>
     </body>
 </html>

上記では、10-11行目でpluginsフォルダにあるプラグインファイル(nineleap.enchant.js、util.enchant.js)を指定しています。プラグインは、プログラム本体(例:game.js)より前に記述します。

**スタート画面 [#g122127c]

nineleap.enchant.jsを読み込むと、ゲームスタート時に自動的にスタート用メッセージが表示されます。

**終了画面 [#h45a6768]

nineleap.enchant.jsを読み込み、ゲーム終了すべきところに下記のコードを書きます。

 game.end(game.score, "game end");

game.scoreは、得点を格納した変数。


**タイム表示 [#df53f786]

プログラム本体(game.onload = function()のところ)に、下記のコードを書きます。これだと、時間が増えていく(カウントアップ)になります。

 timeLabel = new TimeLabel(8, 8);
 game.rootScene.addChild(timeLabel);

下記のように書くとカウントダウン。

 timeLabel = new TimeLabel(8, 8, "countdown");
 timeLabel.time = 30;
 game.rootScene.addChild(timeLabel);

表示するラベルを変更するには

 timeLabel.label = "LIFE:";

現在の経過時間を取り出すには、

 A = timeLabel.label;

**スコア表示 [#w26baaee]

プログラム本体の初期化部分(window.onload = function() )に、下記のコードを書きます。これが、ゲームの得点になります。

 game.score = 0; //得点の初期化

プログラム本体(game.onload = function()のところ)に、下記のコードを書きます。これが得点の表示

 scoreLabel = new ScoreLabel(40, 8);
 game.rootScene.addChild(scoreLabel);

ゲームの得点追加コードとして、下記のコードを書きます。

 game.score += 10;

表示するラベルを変更するには

 scoreLabel.label = "APPLE:";

**乱数を作る(ランダム表示) [#f8deb4c9]

敵キャラや障害物などをバラバラに表示することをランダム表示といいますね。このランダム表示には、乱数を使います。乱数とは、たとえば1から10までの数字を次々と適当に作り出す方法です。util.enchant.jsプラグインを使うと、この乱数を次のように簡単に扱えます。

 A = rand(10); //

**タッチパッド対応 [#y718b9d7]

スマートフォンなどのタッチパッド対応にするには、下記のコードを追加します。これだけで、指やマウスで、矢印キーと同じようにゲームを操作できます。

 var pad = new Pad();
 pad.x = 0;
 pad.y = 220;
 game.rootScene.addChild(pad);

pad.xとpad.yで、操作用パッドの表示位置を指定。

**サンプル [#t3df58f2]

-[[サンプルプログラムを実行する:http://www.catch.jp/program/enchant.js/lesson_8/]]
-30秒間で、できるだけたくさんリンゴを集めてください。
-左右の矢印キーで、クマが走ります。
-左下の十字エリアを使うと、マウスクリック(パソコン)、タッチ(スマートフォン)でも操作できます。
-[[ソースコード:http://www.catch.jp/program/enchant.js/lesson_8/game.js]]

ここまでで完成したファイル

#ref(enchant_sample_lesson8.lzh)


*ゲーム画面を重ね合わせる [#hfa3967f]

複雑なゲーム画面を表示させるときは、重ね合わせるように作れると便利です。

enchant.jsでは、このように重ねる画面をシーン(Scene)と呼びます。

-[[enchant.jsのサンプルコードを解読する（RPG編その1） | IDEA*IDEA:http://www.ideaxidea.com/archives/2011/04/enchant_rgb_undocumented.html]]
-[[【enchant.js】 「最速でクルマを乗りこなすゲーム」の技術的解説 | IDEA*IDEA:http://www.ideaxidea.com/archives/2011/04/cars_explained.html]]

*ゲームを9leapで公開する [#q01863b9]

9leapは、enchant.jsを使ったゲームの投稿サイト。投稿されたゲームは、パソコンでもスマートフォンでも遊べます。

-[[9leap : トップページ - どこでも遊べる、投稿型ゲームサイト:http://9leap.net/]]

 ログインするとゲームの投稿・コメントの投稿が可能になるほか、
 同じゲームでプレイしたTwitterでフォローしている人の情報やハイスコアが表示されます。
 ゲームをお気に入りに追加して、後から遊ぶこともできます。

9leapにログインするには、Twitterアカウントが必要です。

**投稿方法 [#r7d51209]

やり方は、こちらが参考になります。

-[[iPad 2が当たるプログラミングコンテストサイト『9leap』にゲームを投稿する方法 | IDEA*IDEA:http://www.ideaxidea.com/archives/2011/05/9leap.html]]

**9leapに投稿してみた [#c4044f76]

-[[9leap : 30秒、リンゴ集めゲーム by y_catch - どこでも遊べる、投稿型ゲームサイト:http://9leap.net/games/1126]]

*背景／マップの表示 [#m1aa7ffd]

ゲームを作るとき、キャラクターだけではさびしいので、背景を表示してみます。

背景には、背景色を指定する方法と画像を指定する方法があります。

**背景色の指定 [#g6911641]

背景色を指定するには、次のようにシーン(game.rootScene)の背景色(backgroundColor)をRGBで設定します。

 game.rootScene.backgroundColor = 'rgb(182, 255, 255)';

**背景画像の表示 [#n13e96b1]

背景画像の表示するには、まず背景の元になる素材画像を用意します。今回は、次のような9×3マスの素材画像(map2.gif)を使います。

#ref(map2.gif)

この9×3マスの画像は、次のように番号を割り当てます。

  0, 1, 2, 3, 4, 5, 6, 7, 8
  9,10,11,12,13,14,15,16,17
 18,19,20,21,22,23,24,25,26

次に、この画像をどのようにならべるか、数値で指定します。

素材画像を配置したいところには、その番号を指定します。
なにもないところは「-1」を指定します。

今回は、横20マス、縦10マスの画像を背景として表示します。

 var blocks = [
 	[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
 	[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
 	[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
 	[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
 	[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
 	[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
 	[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
 	[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
 	[4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4],
 	[3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3],
 ];　

これを実際に配置するには、次のようにします。

-game.preload('bear.gif', 'map2.gif'); で素材画像を読み込む
-次のコードで背景を指定

 var map = new Map(16, 16);
 map.image = game.assets['map2.gif'];
 map.loadData(blocks);

-game.rootScene.addChild(map); で、最後に登録

**サンプル [#b332014e]


-[[サンプルプログラムを実行する:http://www.catch.jp/program/enchant.js/lesson_3/]]
-背景が表示され、左右の矢印キーでクマが走ります。
-[[ソースコード:http://www.catch.jp/program/enchant.js/lesson_3/game.js]]

ここまでで完成したファイル

#ref(enchant_sample_lesson3.lzh)

*nakamura001 サンプル集 [#z2822510]

ここまで、シコシコとenchant.jsのサンプルを作ってきたら、下記のサイトにも良くまとまっているのを発見。ただ、ソースとデモにたどり着くのが少しだけ面倒に感じました。そこで、ここからもリンクしておきます。

-[[nakamura001 @ ウィキ - トップページ/JavaScriptゲーム/ライブラリ/enchant.js/サンプル:http://www32.atwiki.jp/nakamura001/pages/149.html]]

-キャラクターを右に移動 [[ソース:http://tsuyobi.heteml.jp/html/javascript/enchantjs/samples/01.js]]、[[デモ:http://tsuyobi.heteml.jp/html/javascript/enchantjs/samples/01.html]]
-キャラクターを方向キーで移動 [[ソース:http://tsuyobi.heteml.jp/html/javascript/enchantjs/samples/02.js]]、[[デモ:http://tsuyobi.heteml.jp/html/javascript/enchantjs/samples/02.html]]
-往復移動処理(キャラクターの画像反転) [[解説:http://d.hatena.ne.jp/nakamura001/20110503/1304432316]]
-タップした位置にキャラクターを移動 [[ソース:http://tsuyobi.heteml.jp/html/javascript/enchantjs/samples/03.js]]、[[デモ:http://tsuyobi.heteml.jp/html/javascript/enchantjs/samples/03.html]]
-ラベルの表示 [[ソース:http://tsuyobi.heteml.jp/html/javascript/enchantjs/samples/04.js]]、[[デモ:http://tsuyobi.heteml.jp/html/javascript/enchantjs/samples/04.html]]

-当たり判定(ライブラリのメソッドを使わずに自前で判定) [[ソース:http://tsuyobi.heteml.jp/html/javascript/enchantjs/samples/05.js]]、[[デモ:http://tsuyobi.heteml.jp/html/javascript/enchantjs/samples/05.html]]
-当たり判定(ライブラリのメソッドで判定) [[ソース:http://tsuyobi.heteml.jp/html/javascript/enchantjs/samples/06.js]]、[[デモ:http://tsuyobi.heteml.jp/html/javascript/enchantjs/samples/06.html]]
-キャラクターアニメーションの方法 [[解説:http://d.hatena.ne.jp/nakamura001/20110421/1303383146]]
-キャラクターの追加方法 [[解説:http://d.hatena.ne.jp/nakamura001/20110422/1303491804]]

-車の移動処理 [[解説:http://d.hatena.ne.jp/nakamura001/20110423/1303565014]]
-レイヤーの前後関係を考慮したキャラクター追加方法 [[解説:http://d.hatena.ne.jp/nakamura001/20110423/1303579051]]
-放物線状に物を投げる方法 [[解説:http://d.hatena.ne.jp/nakamura001/20110503/1304433222]]

*git [#ecca0cf8]

-[[ycatch/test_enchant.js - GitHub:https://github.com/ycatch/test_enchant.js]]
トップ   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Site admin: catch.jp-wiki

PukiWiki 1.5.0 Copyright © 2001-2006 PukiWiki Developers Team. License is GPL.
Based on "PukiWiki" 1.3 by yu-ji. Powered by PHP 5.4.16. HTML convert time: 0.062 sec.