enchant.js meetup Tokyo vol.2 Tutorial

enchant.js
チュートリアル
UEI/ARC Makoto Kondo

自己紹介

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

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

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

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

有名なSTG

ゼビウスグラディウス R-TYPE
ナムコ 1982 コナミ 1985 アイレム 1987

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

共通点は？

ナムコ 1982 コナミ 1985 アイレム 1987

1.自機がいる

ナムコ 1982 コナミ 1985 アイレム 1987

2.敵機がいる

ナムコ 1982 コナミ 1985 アイレム 1987

3.弾を撃てる

ナムコ 1982 コナミ 1985 アイレム 1987

4.弾で敵を倒せる

ナムコ 1982 コナミ 1985 アイレム 1987

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

ナムコ 1982 コナミ 1985 アイレム 1987

6.スコアがある

ナムコ 1982 コナミ 1985 アイレム 1987

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

2. 敵がでる

3. 弾を撃てる

4. 弾で敵を倒せる

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

6. スコアがある

もう少し細かく
1. 自機がでる 0.enchant.js初期化

2. 敵がでる 1.1自機を動かす

3. 弾を撃てる
2.1敵を動かす
4. 弾で敵を倒せる
3.1弾を動かす
5. ゲームオーバーになる

6. スコアがある

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

1. enchant.js初期化 6. 弾を撃つ

2. 自機を出す 7. 弾で敵を倒す

3. 自機を動かす 8. 敵をたくさん出す

4. 敵を出す 9. ゲームオーバーを作る

5. 敵を動かす 10.スコアを出す
http://chephes.com/meetup/

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

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

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

• index.html
• main.js

index.html
<html>
<head>
<script type=‘text/javascript’ src=‘enchant.js’></script>
<script type=‘text/javascript’ src=‘main.js’></script>
</head>
</html>

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

4. ブラウザにindex.htmlをドラッグ&ドロップ

5. ブラウザのjavascriptコンソールを開く

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

main.js
enchant();
};
game.start();
};

main.js
enchant();
enchant.jsの読み込み
console.log(‘Hello, enchant.js!!’); (おまじない)
};
game.start();
};

main.js
enchant();
ページ読み込み
}; 完了の処理の設定
game.start();
};

main.js
enchant();
console.log(‘Hello, enchant.js!!’); 実際の処理
};
game.start();
};

main.js
enchant();
var game=new Game(320, 320); Gameクラスの初期化
};
game.start();
};

Gameクラス

クラスとは？

クラスとは？

Game

クラスとは？

Sprite
Game

クラスとは？

Sprite
Game

Label

クラスとは？

Sprite Scene
Game

Label

クラスとは？

Sprite Scene
Game

Label Surface

クラスとは？

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

Gameクラスが持つデータ

Gameクラスが持つ処理

クラスの定義方法
enchant();
var MyClass = Class.create({
initialize:function(){
console.log(‘My Class Init’);
},
myMethod:function(){
console.log(‘My Method’);
}
});

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

クラスの生成
enchant();
},
}
});


enchant();
},
console.log(‘My Method’); 親クラス
}
});


enchant();
},
console.log(‘My Method’); コンストラクタ
}
});


enchant();
},
} メソッドの定義
});


main.js
enchant();
game.onload=function(){ Gameクラスの
};
game.start(); 初期化完了の処理
};

main.js
enchant();
console.log(‘Hello, enchant.js!!’); ゲームの処理
};
game.start();
};

main.js
enchant();
};
game.start(); ゲームの開始
};

Game.start()

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

2.自機を出す
1. enchant.jsに同梱のchara1.gifをフォルダに入れる

2. main.jsを以下のように書き換える
main.js
enchant();
game.preload(‘chara1.gif’);
var player=new Sprite(32, 32);
player.image=game.assets[‘chara1.gif’];
game.rootScene.addChild(player);
};
game.start();
};

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

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

2.自機を出す

自機がでた

2.自機を出す
main.js
enchant();
};
game.start();
};

2.自機を出す
main.js
enchant();
window.onload=function(){ 画像の読み込み
};
game.start();
};

2.自機を出す
game.preload(‘chara1.gif’)とは？
wise9-enchant.js-..../doc/ja/index.html

2.自機を出す
enchant.Gameをクリック

2.自機を出す
enchant.Game.preloadをさがす

2.自機を出す
説明文を読んでみる

サンプル

2.自機を出す
main.js
enchant();
自機の生成
};
game.start();
};

2.自機を出す

2.自機を出す

=32

2.自機を出す

=32
=32

2.自機を出す

=32 32

32
=32

2.自機を出す
main.js
enchant();

};
game.rootScene.addChild(player); 画像の設定
game.start();
};

2.自機を出す

2.自機を出す

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

2.自機を出す
main.js
enchant();
};

};
game.start();
シーンに追加して表示

2.自機を出す
enchant.Game enchant.Scene

enchant.Group

2.自機を出す
enchant.Game enchant.Scene

enchant.Group

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

3.自機を動かす

main.js
enchant();
//...中略...
game.rootScene.addEventListener(‘touchstart’, function(e){
player.y=e.y;
});
};
game.start();
};

4. 画面をクリック

main.js
enchant();
window.onload=function(){ 画面のタッチの処理の設定
//...中略...
player.y=e.y;
});
};
game.start();
};

EventTarget.addEventListener(type, listener);

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

main.js
enchant();
//...中略...
player.y=e.y;
});
};

};
game.start();
タッチされたときの処理

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

main.js
enchant();
//...中略...
player.y=e.y;
});
};
game.start();
};

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

main.js
//...中略...
game.preload(‘chara1.gif’, ‘chara2.gif’);
//...中略...
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);
//...中略...

4.敵を出す

4.敵を出す
main.js 敵の画像の読み込み
//...中略...
//...中略...
enemy.x = 320 - 32;
enemy.y = (320 - 32) * Math.random();
//...中略...

4.敵を出す
main.js
//...中略...
//...中略...
敵の初期化と表示
enemy.x = 320 - 32;
//...中略...

4.敵を出す
main.js
//...中略...
//...中略...
敵の初期化と表示
enemy.x = 320 - 32;
//...中略... var player=new Sprite(32, 32);
player.image=game.assets[‘chara1.gif];

4.敵を出す
main.js
//...中略...
//...中略...
enemy.x = 320 - 32; 敵の位置の設定
enemy.y = (320 - 32) * Math.random()
//...中略...

5.敵を動かす

main.js
//...中略...
enemy.x = 320 - 32;
enemy.addEventListener(‘enterframe’, function(){
this.x -= 2;
});
//...中略...

5.敵を動かす

5.敵を動かす
main.js

//...中略...
enemy.x = 320 - 32;
this.x -= 2;
}); 敵の毎フレームの
//...中略... 処理の設定

5.敵を動かす
main.js

//...中略...
enemy.x = 320 - 32;
this.x -= 2;
}); 自分の位置を
//...中略... 左に2px動かす

6.弾を撃つ
1. icon0.gifをフォルダに追加

main.js
//...中略...
game.preload(‘chara1.gif’, ‘chara2.gif’, ‘icon0.gif’);
//...中略...
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);
});
//...中略...

6.弾を撃つ

6.弾を撃つ
弾画像の読み込み
main.js
//...中略...
//...中略...
player.y = e.y;
var missile=new Sprite(16, 16);
missile.frame = 54;
this.x += 2;
});
});
//...中略...

6.弾を撃つ
main.js
//...中略...
//...中略...
player.y = e.y;
missile.frame = 54;
弾の初期化
this.x += 2;
});
});
//...中略...

6.弾を撃つ
main.js
//...中略...
//...中略...
player.y = e.y;
missile.frame = 54;
missile.x = player.x; 弾の画像の選択
this.x += 2;
});
});
//...中略...

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

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 55 56 57 58 59 60 61 62 63
64 65 66 67 68 69 70

6.弾を撃つ
main.js
//...中略...
//...中略...
player.y = e.y;
missile.frame = 54;
missile.x = player.x; playerの位置に
this.x += 2; 弾を移動
});
});
//...中略...

6.弾を撃つ
main.js
//...中略...
//...中略...
player.y = e.y;
missile.frame = 54;
弾の移動
this.x += 2;
});
});
//...中略...

7.弾で敵を倒す
main.js
//...中略...
//...中略...
this.x += 2;
if(enemy.intersect(this)){
game.rootScene.removeChild(enemy);
game.rootScene.removeChild(this);
}
});
});
//...中略...

main.js
//...中略...
//...中略...
this.x += 2;
敵と弾のあたり
}
}); 判定
});
//...中略...

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

main.js
//...中略...
//...中略...
this.x += 2;
敵と弾を消す
}
});
});
//...中略...

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

8.敵をたくさん出す
main.js
//...中略...
var enemies = [];
game.rootScene.addEventListener(‘enterframe’, function(){
if(Math.random() < 0.1){
//...中略...
this.x -= 2;
});
enemies.push(enemy);
}
});
//...中略...

2. main.jsをまだまだ書き換える
main.js
//...中略...
this.x += 2;
for(var i = 0; i < enemies.length; i++){
if(enemies[i].intersect(this)){
game.rootScene.removeChild(enemies[i]);
enemies.splice(i, 1);
break;
}
}
});
//...中略...

main.js
//...中略...
var enemies = [];
敵配列の用意
//...中略...
this.x -= 2;
});
}
});
//...中略...

main.js
//...中略...
var enemies = [];
//...中略...
this.x -= 2; 毎フレームごとの
});
} 処理を追加
});
//...中略...

main.js
//...中略...
var enemies = [];
//...中略... 毎フレームだと
this.x -= 2;
});
多すぎるので、
}
});
//...中略...
1/10の確率で出現

main.js
//...中略...
var enemies = [];
//...中略...
this.x -= 2; 表示されてる
});
} 敵リストに追加
});
//...中略...

main.js
//...中略...
this.x += 2;
enemies.splice(i, 1); 敵の数だけループ
break;
}
}
});
//...中略...

main.js
//...中略...
this.x += 2;

}
break;
i番目の敵と
}
});
//...中略...
ミサイルの当たり判定

main.js
//...中略...
this.x += 2;

}
break;
i番目の敵を
}
});
//...中略...
敵リストから削除

main.js
//...中略...
this.x += 2;
break;
}
}
});
ループの中断
//...中略...

9.ゲームオーバーを作る
main.js
//...中略...
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
//...中略...
this.x -= 2;
game.stop();
label.font = ‘32px sans-serif’; 敵とPlayerの
label.x = 50;
label.y = 150;
game.rootScene.addChild(label); 当たり判定
}
});
//...中略...

main.js
//...中略...
this.x -= 2;
game.stop();
label.font = ‘32px sans-serif’;
label.x = 50;
ゲームの停止
label.y = 150;
}
});
//...中略...

main.js
//...中略...
this.x -= 2;
game.stop();
label.font = ‘32px sans-serif’; GAMEOVER
label.x = 50;
label.y = 150; の表示
}
});
//...中略...

10.スコアを出す
main.js
//...中略...
}
});
var label = new Label(“SCORE:0”);
var score = 0;
//...中略...
score++;
label.text = “SCORE:” + score;
break;
//...中略...

main.js
//...中略...
} ラベルの表示
});
var score = 0;
//...中略...
score++;
break;
//...中略...

main.js
//...中略...
}
});
game.rootScene.addChild(label); スコアの初期化
var score = 0;
//...中略...
score++;
break;
//...中略...

main.js
//...中略...
}
});
var score = 0;
//...中略...
score++;
スコアの増加
break;
//...中略...

main.js
//...中略...
}
});
var score = 0;
//...中略...
score++;
表示の更新
break;
//...中略...

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

1. enchant.js初期化 6. 弾を撃つ

済
2. 自機を出す 7. 弾で敵を倒す

3. 自機を動かす 8. 敵をたくさん出す

4. 敵を出す 9. ゲームオーバーを作る

5. 敵を動かす 10.スコアを出す
http://chephes.com/meetup/

1 enchant();
2 window.onload=function(){
3 var game=new Game(320, 320);
4 game.preload('chara1.gif', 'chara2.gif','icon0.gif');
5 game.onload=function(){
6 ! var player=new Sprite(32,32);
7 ! player.image=game.assets['chara1.gif'];
8 ! game.rootScene.addChild(player);
9 ! var enemies = [];
10 ! game.rootScene.addEventListener('enterframe', function(){
11 ! ! if(Math.random() < 0.1){
12 ! ! ! var enemy=new Sprite(32, 32);
13 ! ! ! enemy.image=game.assets['chara2.gif'];
14 ! ! ! enemy.x = 320 - 32;
15 ! ! ! enemy.y = (320 - 32) * Math.random();
16 ! ! ! game.rootScene.addChild(enemy);
17 ! ! ! enemy.addEventListener('enterframe', function(){
18 ! ! ! ! this.x -= 2;
19 ! ! ! ! if(player.intersect(this)){
20 ! ! ! ! ! game.stop();
21 ! ! ! ! ! var label = new Label('GAME OVER');
22 ! ! ! ! ! label.font = '32px sans-serif';
23 ! ! ! ! ! label.x = 50;
24 ! ! ! ! ! label.y = 150;
25 ! ! ! ! ! game.rootScene.addChild(label);
26 ! ! ! ! }
27 ! ! ! });
28 ! ! ! enemies.push(enemy);
29 ! ! }
30 ! });

31 ! var label = new Label("SCORE:0");
32 ! game.rootScene.addChild(label);
33 ! var score = 0;
34 ! game.rootScene.addEventListener('touchstart', function(e){
35 ! ! player.y=e.y;
36 ! ! var missile=new Sprite(16,16);
37 ! ! missile.image=game.assets['icon0.gif'];
38 ! ! missile.frame=54;
39 ! ! missile.x=player.x;
40 ! ! missile.y=player.y;
41 ! ! missile.addEventListener('enterframe',function(){
42 ! ! ! this.x += 2;
43 ! ! ! for(var i = 0; i < enemies.length; i++){
44 ! ! ! ! if(enemies[i].intersect(this)){
45 ! ! ! ! ! game.rootScene.removeChild(enemies[i]);
46 ! ! ! ! ! game.rootScene.removeChild(this);
47 ! ! ! ! ! enemies.splice(i, 1);
48 ! ! ! ! ! score++;
49 ! ! ! ! ! label.text = "SCORE:" + score;
50 ! ! ! ! ! break;
51 ! ! ! ! }
52 ! ! ! }
53 ! ! });
54 ! ! game.rootScene.addChild(missile);
55 ! });
56 };
57 game.start();
58 };

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

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

ステージを作ってみる

敵をクラス化してみる

弾をクラス化してみる

enchant.js meetup Tokyo vol.2 Tutorial

enchant.js meetup Tokyo vol.2 Tutorial

More Related Content

What's hot

Viewers also liked

Similar to enchant.js meetup Tokyo vol.2 Tutorial

More from Ryo Shimizu

Recently uploaded

enchant.js meetup Tokyo vol.2 Tutorial