enchant.js meetup Tokyo vol.2 Tutorial

enchant.jsチュートリアル

UEI/ARC Makoto Kondo

自己紹介

株式会社ユビキタスエンターテインメント

ARC 秋葉原リサーチセンター研究員

プログラマ(iOS/Android/i-modeなど)

enchant.jsを使ってシューティングゲーム

を作ろう！

有名なSTG

ゼビウスナムコ 1982

グラディウスコナミ 1985

R-TYPEアイレム 1987

シューティングゲームには、最低限何が必要か？




共通点は？

1.自機がいる




2.敵機がいる




3.弾を撃てる




4.弾で敵を倒せる




5.ゲームオーバーがある




6.スコアがある




必要な要素(a.k.a.仕様)1. 自機がでる

2. 敵がでる

3. 弾を撃てる

4. 弾で敵を倒せる

5. ゲームオーバーになる

6. スコアがある

1. 自機がでる

2. 敵がでる

3. 弾を撃てる

4. 弾で敵を倒せる

5. ゲームオーバーになる

6. スコアがある

もう少し細かく0.enchant.js初期化

1.1自機を動かす

2.1敵を動かす

3.1弾を動かす

まとめると、、、

あなたがシューティングゲームを作るのに必要なたった10個の要素

1. enchant.js初期化

2. 自機を出す

3. 自機を動かす

4. 敵を出す

5. 敵を動かす

6. 弾を撃つ

7. 弾で敵を倒す

8. 敵をたくさん出す

9. ゲームオーバーを作る

10.スコアを出す

625 users

http://chephes.com/meetup/



あなたがシューティングゲームを作るのに必要なたった10個の要素


2. 自機を出す


4. 敵を出す

5. 敵を動かす

6. 弾を撃つ





625 users




1.enchant.js初期化

1.enchant.js初期化1.好きな場所にフォルダを作る

2.フォルダの中にenchant.jsを入れる

3.以下のファイルを作る

• index.html

• main.js

1.enchant.js初期化<html><head><script type=‘text/javascript’ src=‘enchant.js’></script><script type=‘text/javascript’ src=‘main.js’></script></head></html>

index.html

enchant();window.onload=function(){ var game=new Game(320, 320); game.onload=function(){ console.log(‘Hello, enchant.js!!’); }; game.start();};

main.js

1.enchant.js初期化4. ブラウザにindex.htmlをドラッグ&ドロップ

1.enchant.js初期化5. ブラウザのjavascriptコンソールを開く

1.enchant.js初期化6. コンソールにHello, enchant.js!!と表示される



main.js



main.js

enchant.jsの読み込み(おまじない)



main.js

ページ読み込み完了の処理の設定



main.js

実際の処理



main.js

Gameクラスの初期化

1.enchant.js初期化Gameクラス

1.enchant.js初期化Gameクラス

1.enchant.js初期化クラスとは？


Game


Sprite

Game


Sprite

Game

Label


Sprite

Game

Label

Scene


Sprite

Game

Label Surface

Scene


データと関連する処理をひとまとめにした、意味のある一つのまとまり。enchant.jsには、Game, Sprite, Labelなどいろいろなクラスが存在する。

1.enchant.js初期化Gameクラスが持つデータ

1.enchant.js初期化Gameクラスが持つ処理

1.enchant.js初期化クラスの定義方法

enchant();var MyClass = Class.create({initialize:function(){console.log(‘My Class Init’);

},myMethod:function(){console.log(‘My Method’);

}});

var myInstance = new MyClass();myInstance.myMethod();




}});


クラスの生成




}});


親クラス




}});


コンストラクタ




}});


メソッドの定義



main.js

Gameクラスの初期化完了の処理



main.js

ゲームの処理



main.js

ゲームの開始

1.enchant.js初期化Game.start()

ゲームを開始する. enchant.Game#fpsで設定されたフレームレートに従ってenchant.Game#currentSceneのフレームの更新が行われるようになる. プリロードする画像が存在する場合はロードが始まりローディング画面が表示される.


あなたがシューティングゲームを作るのに必要なたった10個の要素 625 users


2. 自機を出す


4. 敵を出す

5. 敵を動かす

6. 弾を撃つ




10.スコアを出すhttp://chephes.com/meetup/



2.自機を出す

enchant();window.onload=function(){ var game=new Game(320, 320);game.preload(‘chara1.gif’);

game.onload=function(){var player=new Sprite(32, 32);player.image=game.assets[‘chara1.gif’];game.rootScene.addChild(player);

}; game.start();};

main.js

1. enchant.jsに同梱のchara1.gifをフォルダに入れる

2. main.jsを以下のように書き換える

2.自機を出す3. ブラウザのキャッシュを消す

2.自機を出す4. ブラウザをリロード

2.自機を出す4. ブラウザをリロード

自機がでた

2.自機を出す



}; game.start();};

main.js

2.自機を出す



}; game.start();};

main.js

画像の読み込み

game.preload(‘chara1.gif’)とは？2.自機を出す

wise9-enchant.js-..../doc/ja/index.html

2.自機を出す

enchant.Gameをクリックgame.preload(‘chara1.gif’)とは？

2.自機を出す

enchant.Game.preloadをさがすgame.preload(‘chara1.gif’)とは？

2.自機を出す

説明文を読んでみるgame.preload(‘chara1.gif’)とは？

サンプル

2.自機を出す



}; game.start();};

main.js

2.自機を出す



}; game.start();};

main.js

自機の生成

2.自機を出すvar player=new Sprite(32, 32);





=32


=32


=32=32


=32=32

32

32

2.自機を出す



}; game.start();};

main.js

画像の設定

2.自機を出すplayer.image=game.assets[‘chara1.gif’];






ロードされたchara1.gifをplayerの画像として表示する

2.自機を出す



}; game.start();};

main.js

シーンに追加して表示

2.自機を出すgame.rootScene.addChild(player);

enchant.Game

enchant.Group

enchant.Scene


enchant.Game

enchant.Group

enchant.Scene


enchant.Game

enchant.Group

enchant.Scene


enchant.Game

enchant.Group

enchant.Scene


enchant.Game

enchant.Group

enchant.Scene


enchant.Game

enchant.Group

enchant.Scene

Gameの表示ツリーにplayerを追加する



2. 自機を出す


4. 敵を出す

5. 敵を動かす

6. 弾を撃つ







3.自機を動かす

enchant();window.onload=function(){

//...中略...player.image=game.assets[‘chara1.gif’];game.rootScene.addChild(player);game.rootScene.addEventListener(‘touchstart’, function(e){

player.y=e.y;});

}; game.start();};

main.js


3.自機を動かす2. ブラウザのキャッシュを消す

3.自機を動かす3. ブラウザをリロード

3.自機を動かす4. 画面をクリック

3.自機を動かす4. 画面をクリック




player.y=e.y;});

}; game.start();};

main.js

画面のタッチの処理の設定

3.自機を動かすEventTarget.addEventListener(type, listener);

イベントリスナを追加する。typeには‘enterframe’や‘touchstart‘などが利用でき、それらのイベントが起きたときに、listenerを実行する。EventTargetを継承するSpriteやSceneなど様々なクラスから利用可能




player.y=e.y;});

}; game.start();};

main.js

タッチされたときの処理

3.自機を動かすNode.y

Nodeのy座標の値。読み込む事も、書き込む事も可能である。yのプロパティはSpriteが継承しているNodeにて定義されているので、Spriteでも利用可能




player.y=e.y;});

}; game.start();};

main.js



2. 自機を出す


4. 敵を出す

5. 敵を動かす

6. 弾を撃つ







4.敵を出す

//...中略...game.preload(‘chara1.gif’, ‘chara2.gif’);//...中略...game.rootScene.addChild(player);var enemy = new Sprite(32, 32);enemy.image = game.assets[‘chara2.gif’];enemy.x = 320 - 32;enemy.y = 320 * Math.random();game.rootScene.addChild(enemy);game.rootScene.addEventListener(‘touchstart’, function(e){//...中略...

main.js

1. enchant.jsに同梱のchara2.gifをフォルダに入れる


4.敵を出す3. ブラウザのキャッシュを消す

4.敵を出す4. ブラウザをリロード

//...中略...game.preload(‘chara1.gif’, ‘chara2.gif’);//...中略...game.rootScene.addChild(player);var enemy = new Sprite(32, 32);enemy.image = game.assets[‘chara2.gif’];enemy.x = 320 - 32;enemy.y = (320 - 32) * Math.random();game.rootScene.addChild(enemy);game.rootScene.addEventListener(‘touchstart’, function(e){//...中略...

4.敵を出すmain.js 敵の画像の読み込み


4.敵を出すmain.js

敵の初期化と表示



敵の初期化と表示

var player=new Sprite(32, 32);player.image=game.assets[‘chara1.gif];game.rootScene.addChild(player);

//...中略...game.preload(‘chara1.gif’, ‘chara2.gif’);//...中略...game.rootScene.addChild(player);var enemy = new Sprite(32, 32);enemy.image = game.assets[‘chara2.gif’];enemy.x = 320 - 32;enemy.y = (320 - 32) * Math.random()game.rootScene.addChild(enemy);game.rootScene.addEventListener(‘touchstart’, function(e){//...中略...


敵の位置の設定



2. 自機を出す


4. 敵を出す

5. 敵を動かす

6. 弾を撃つ







5.敵を動かす

//...中略...enemy.x = 320 - 32;game.rootScene.addChild(enemy);enemy.addEventListener(‘enterframe’, function(){

this.x -= 2;});game.rootScene.addEventListener(‘touchstart’, function(e){//...中略...

main.js


5.敵を動かす2. ブラウザのキャッシュを消す

5.敵を動かす3. ブラウザをリロード

5.敵を動かす3. ブラウザをリロード

5.敵を動かす



main.js

敵の毎フレームの処理の設定

5.敵を動かす



main.js

自分の位置を左に2px動かす



2. 自機を出す


4. 敵を出す

5. 敵を動かす

6. 弾を撃つ







6.弾を撃つ

//...中略...

game.preload(‘chara1.gif’, ‘chara2.gif’, ‘icon0.gif’);//...中略...

game.rootScene.addEventListener(‘touchstart’, function(e){player.y = e.y;var missile = new Sprite(16, 16);missile.image = game.assets[‘icon0.gif’];missile.frame = 54;missile.x = player.x;missile.y = player.y;missile.addEventListener(‘enterframe’, function(){

this.x += 2;});game.rootScene.addChild(missile);

});//...中略...

main.js

1. icon0.gifをフォルダに追加


6.弾を撃つ3. ブラウザのキャッシュを消す

6.弾を撃つ4. ブラウザをリロード

6.弾を撃つ

//...中略...game.preload(‘chara1.gif’, ‘chara2.gif’, ‘icon0.gif’);//...中略...game.rootScene.addEventListener(‘touchstart’, function(e){

player.y = e.y;var missile=new Sprite(16, 16);missile.image = game.assets[‘icon0.gif’];missile.frame = 54;missile.x = player.x;missile.y = player.y;missile.addEventListener(‘enterframe’, function(){


});//...中略...

main.js 弾画像の読み込み

6.弾を撃つ




});//...中略...

main.js

弾の初期化

6.弾を撃つ




});//...中略...

main.js

弾の画像の選択

6.弾を撃つicon0.gif


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 27 28 29 30 31

32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

64 65 66 67 68 69 70


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 27 28 29 30 31

32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

48 49 50 51 52 53 55 56 57 58 59 60 61 62 63

64 65 66 67 68 69 70

6.弾を撃つ




});//...中略...

main.js

playerの位置に弾を移動

6.弾を撃つ




});//...中略...

main.js

弾の移動



2. 自機を出す


4. 敵を出す

5. 敵を動かす

6. 弾を撃つ







7.弾で敵を倒す

//...中略...game.rootScene.addEventListener(‘touchstart’, function(e){//...中略...

missile.y = player.y;missile.addEventListener(‘enterframe’, function(){

this.x += 2;if(enemy.intersect(this)){

game.rootScene.removeChild(enemy);game.rootScene.removeChild(this);

}});game.rootScene.addChild(missile);

});//...中略...

main.js1. main.jsを以下のように書き換える

7.弾で敵を倒す2. ブラウザのキャッシュを消す

7.弾で敵を倒す3. ブラウザをリロード







});//...中略...

main.js

敵と弾のあたり判定

3.自機を動かすEntity.intersect(s);

Entityの矩形が交差しているかどうかにより判定衝突を行う。引数には対象のEntitiyをとる。このメソッドはEntityクラスにて定義さているので、Spriteで利用可能







});//...中略...

main.js

敵と弾を消す

3.自機を動かすGroup.removeChild(s);

GroupからNodeを削除する。引数には対象のEntitiyをとる。このメソッドはGroupクラスにて定義さているので、Sceneで利用可能







});//...中略...



2. 自機を出す


4. 敵を出す

5. 敵を動かす

6. 弾を撃つ









8.敵をたくさん出す

//...中略...game.rootScene.addChild(player);var enemies = [];game.rootScene.addEventListener(‘enterframe’, function(){

if(Math.random() < 0.1){var enemy = new Sprite(32, 32);//...中略...

this.x -= 2;});enemies.push(enemy);

}});//...中略...



//...中略...missile.addEventListener(‘enterframe’, function(){

this.x += 2;for(var i = 0; i < enemies.length; i++){

if(enemies[i].intersect(this)){game.rootScene.removeChild(enemies[i]);game.rootScene.removeChild(this);enemies.splice(i, 1);break;

}}

});//...中略...

main.js2. main.jsをまだまだ書き換える

8.敵をたくさん出す3. ブラウザのキャッシュを消す

8.敵をたくさん出す4. ブラウザをリロード





}});//...中略...

main.js

敵配列の用意





}});//...中略...

main.js

毎フレームごとの処理を追加





}});//...中略...

main.js

毎フレームだと多すぎるので、

1/10の確率で出現





}});//...中略...

main.js

表示されてる敵リストに追加





}}

});//...中略...

main.js

敵の数だけループ





}}

});//...中略...

main.js

i番目の敵とミサイルの当たり判定





}}

});//...中略...

main.js

i番目の敵を敵リストから削除





}}

});//...中略...

main.js

ループの中断


2. 自機を出す


4. 敵を出す

5. 敵を動かす

6. 弾を撃つ









9.ゲームオーバーを作る

//...中略...enemy.addEventListener(‘enterframe’, function(){

this.x -= 2;if(player.intersect(this)){

game.stop();var label = new Label(‘GAME OVER’);label.font = ‘32px sans-serif’;label.x = 50;label.y = 150;game.rootScene.addChild(label);

}});//...中略...








}});//...中略...

main.js

敵とPlayerの当たり判定





}});//...中略...

main.js

ゲームの停止





}});//...中略...

main.js

GAMEOVERの表示


2. 自機を出す


4. 敵を出す

5. 敵を動かす

6. 弾を撃つ










//...中略...enemies.push(enemy);

}});var label = new Label(“SCORE:0”);game.rootScene.addChild(label);var score = 0;game.rootScene.addEventListener(‘touchstart’, function(e){//...中略...

enemies.splice(i, 1);score++;label.text = “SCORE:” + score;break;

//...中略...







//...中略...

main.js

ラベルの表示





//...中略...

main.js

スコアの初期化





//...中略...

main.js

スコアの増加





//...中略...

main.js

表示の更新


2. 自機を出す


4. 敵を出す

5. 敵を動かす

6. 弾を撃つ










2. 自機を出す


4. 敵を出す

5. 敵を動かす

6. 弾を撃つ






済http://chephes.com/meetup/



enchant();window.onload=function(){ var game=new Game(320, 320); game.preload('chara1.gif', 'chara2.gif','icon0.gif'); game.onload=function(){ ! var player=new Sprite(32,32); ! player.image=game.assets['chara1.gif']; ! game.rootScene.addChild(player); ! var enemies = []; ! game.rootScene.addEventListener('enterframe', function(){ ! ! if(Math.random() < 0.1){! ! ! var enemy=new Sprite(32, 32);! ! ! enemy.image=game.assets['chara2.gif'];! ! ! enemy.x = 320 - 32;! ! ! enemy.y = (320 - 32) * Math.random();! ! ! game.rootScene.addChild(enemy);! ! ! enemy.addEventListener('enterframe', function(){! ! ! ! this.x -= 2;! ! ! ! if(player.intersect(this)){! ! ! ! ! game.stop();! ! ! ! ! var label = new Label('GAME OVER');! ! ! ! ! label.font = '32px sans-serif';! ! ! ! ! label.x = 50;! ! ! ! ! label.y = 150;! ! ! ! ! game.rootScene.addChild(label);! ! ! ! }! ! ! });! ! ! enemies.push(enemy); ! ! } ! });

123456789

101112131415161718192021222324252627282930

! var label = new Label("SCORE:0"); ! game.rootScene.addChild(label); ! var score = 0; ! game.rootScene.addEventListener('touchstart', function(e){ ! ! player.y=e.y; ! ! var missile=new Sprite(16,16); ! ! missile.image=game.assets['icon0.gif']; ! ! missile.frame=54; ! ! missile.x=player.x; ! ! missile.y=player.y; ! ! missile.addEventListener('enterframe',function(){ ! ! ! this.x += 2; ! ! ! for(var i = 0; i < enemies.length; i++){! ! ! ! if(enemies[i].intersect(this)){! ! ! ! ! game.rootScene.removeChild(enemies[i]);! ! ! ! ! game.rootScene.removeChild(this);! ! ! ! ! enemies.splice(i, 1);! ! ! ! ! score++;! ! ! ! ! label.text = "SCORE:" + score;! ! ! ! ! break;! ! ! ! } ! ! ! } ! ! }); ! ! game.rootScene.addChild(missile); ! }); }; game.start();};

31323334353637383940414243444546474849505152535455565758

発展アイテムなどを作ってみる

敵キャラのバリエーションを増やす

ステージを作ってみる

敵をクラス化してみる

弾をクラス化してみる

Technology

enchant.js meetup Tokyo vol.2 Tutorial