enchant.js meetup Tokyo vol.2 Tutorial
-
Upload
ryo-shimizu -
Category
Technology
-
view
11.321 -
download
2
Transcript of enchant.js meetup Tokyo vol.2 Tutorial
![Page 1: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/1.jpg)
enchant.jsチュートリアル
UEI/ARC Makoto Kondo
![Page 2: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/2.jpg)
自己紹介
株式会社ユビキタスエンターテインメント
ARC 秋葉原リサーチセンター研究員
プログラマ(iOS/Android/i-modeなど)
![Page 3: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/3.jpg)
![Page 4: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/4.jpg)
enchant.jsを使ってシューティングゲーム
を作ろう!
![Page 5: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/5.jpg)
有名なSTG
ゼビウスナムコ 1982
グラディウスコナミ 1985
R-TYPEアイレム 1987
![Page 6: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/6.jpg)
シューティングゲームには、最低限何が必要か?
![Page 7: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/7.jpg)
ゼビウスナムコ 1982
グラディウスコナミ 1985
R-TYPEアイレム 1987
共通点は?
![Page 8: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/8.jpg)
1.自機がいる
ゼビウスナムコ 1982
グラディウスコナミ 1985
R-TYPEアイレム 1987
![Page 9: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/9.jpg)
2.敵機がいる
ゼビウスナムコ 1982
グラディウスコナミ 1985
R-TYPEアイレム 1987
![Page 10: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/10.jpg)
3.弾を撃てる
ゼビウスナムコ 1982
グラディウスコナミ 1985
R-TYPEアイレム 1987
![Page 11: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/11.jpg)
4.弾で敵を倒せる
ゼビウスナムコ 1982
グラディウスコナミ 1985
R-TYPEアイレム 1987
![Page 12: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/12.jpg)
5.ゲームオーバーがある
ゼビウスナムコ 1982
グラディウスコナミ 1985
R-TYPEアイレム 1987
![Page 13: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/13.jpg)
6.スコアがある
ゼビウスナムコ 1982
グラディウスコナミ 1985
R-TYPEアイレム 1987
![Page 14: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/14.jpg)
必要な要素(a.k.a.仕様)1. 自機がでる
2. 敵がでる
3. 弾を撃てる
4. 弾で敵を倒せる
5. ゲームオーバーになる
6. スコアがある
![Page 15: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/15.jpg)
1. 自機がでる
2. 敵がでる
3. 弾を撃てる
4. 弾で敵を倒せる
5. ゲームオーバーになる
6. スコアがある
もう少し細かく0.enchant.js初期化
1.1自機を動かす
2.1敵を動かす
3.1弾を動かす
![Page 16: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/16.jpg)
まとめると、、、
![Page 17: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/17.jpg)
あなたがシューティングゲームを作るのに必要なたった10個の要素
1. enchant.js初期化
2. 自機を出す
3. 自機を動かす
4. 敵を出す
5. 敵を動かす
6. 弾を撃つ
7. 弾で敵を倒す
8. 敵をたくさん出す
9. ゲームオーバーを作る
10.スコアを出す
625 users
http://chephes.com/meetup/
![Page 18: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/18.jpg)
あなたがシューティングゲームを作るのに必要なたった10個の要素
1. enchant.js初期化
2. 自機を出す
3. 自機を動かす
4. 敵を出す
5. 敵を動かす
6. 弾を撃つ
7. 弾で敵を倒す
8. 敵をたくさん出す
9. ゲームオーバーを作る
10.スコアを出す
625 users
http://chephes.com/meetup/
![Page 19: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/19.jpg)
1.enchant.js初期化
![Page 20: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/20.jpg)
1.enchant.js初期化1.好きな場所にフォルダを作る
2.フォルダの中にenchant.jsを入れる
3.以下のファイルを作る
• index.html
• main.js
![Page 21: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/21.jpg)
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
![Page 22: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/22.jpg)
1.enchant.js初期化4. ブラウザにindex.htmlをドラッグ&ドロップ
![Page 23: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/23.jpg)
1.enchant.js初期化5. ブラウザのjavascriptコンソールを開く
![Page 24: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/24.jpg)
1.enchant.js初期化6. コンソールにHello, enchant.js!!と表示される
![Page 25: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/25.jpg)
1.enchant.js初期化
enchant();window.onload=function(){ var game=new Game(320, 320); game.onload=function(){ console.log(‘Hello, enchant.js!!’); }; game.start();};
main.js
![Page 26: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/26.jpg)
1.enchant.js初期化
enchant();window.onload=function(){ var game=new Game(320, 320); game.onload=function(){ console.log(‘Hello, enchant.js!!’); }; game.start();};
main.js
enchant.jsの読み込み(おまじない)
![Page 27: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/27.jpg)
1.enchant.js初期化
enchant();window.onload=function(){ var game=new Game(320, 320); game.onload=function(){ console.log(‘Hello, enchant.js!!’); }; game.start();};
main.js
ページ読み込み完了の処理の設定
![Page 28: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/28.jpg)
1.enchant.js初期化
enchant();window.onload=function(){ var game=new Game(320, 320); game.onload=function(){ console.log(‘Hello, enchant.js!!’); }; game.start();};
main.js
実際の処理
![Page 29: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/29.jpg)
1.enchant.js初期化
enchant();window.onload=function(){ var game=new Game(320, 320); game.onload=function(){ console.log(‘Hello, enchant.js!!’); }; game.start();};
main.js
Gameクラスの初期化
![Page 30: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/30.jpg)
1.enchant.js初期化Gameクラス
![Page 31: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/31.jpg)
1.enchant.js初期化Gameクラス
![Page 32: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/32.jpg)
1.enchant.js初期化クラスとは?
![Page 33: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/33.jpg)
1.enchant.js初期化クラスとは?
Game
![Page 34: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/34.jpg)
1.enchant.js初期化クラスとは?
Sprite
Game
![Page 35: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/35.jpg)
1.enchant.js初期化クラスとは?
Sprite
Game
Label
![Page 36: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/36.jpg)
1.enchant.js初期化クラスとは?
Sprite
Game
Label
Scene
![Page 37: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/37.jpg)
1.enchant.js初期化クラスとは?
Sprite
Game
Label Surface
Scene
![Page 38: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/38.jpg)
1.enchant.js初期化クラスとは?
データと関連する処理をひとまとめにした、意味のある一つのまとまり。enchant.jsには、Game, Sprite, Labelなどいろいろなクラスが存在する。
![Page 39: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/39.jpg)
1.enchant.js初期化Gameクラスが持つデータ
![Page 40: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/40.jpg)
1.enchant.js初期化Gameクラスが持つ処理
![Page 41: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/41.jpg)
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();
![Page 42: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/42.jpg)
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();
クラスの生成
![Page 43: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/43.jpg)
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();
親クラス
![Page 44: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/44.jpg)
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();
コンストラクタ
![Page 45: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/45.jpg)
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();
メソッドの定義
![Page 46: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/46.jpg)
1.enchant.js初期化
enchant();window.onload=function(){ var game=new Game(320, 320); game.onload=function(){ console.log(‘Hello, enchant.js!!’); }; game.start();};
main.js
Gameクラスの初期化完了の処理
![Page 47: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/47.jpg)
1.enchant.js初期化
enchant();window.onload=function(){ var game=new Game(320, 320); game.onload=function(){ console.log(‘Hello, enchant.js!!’); }; game.start();};
main.js
ゲームの処理
![Page 48: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/48.jpg)
1.enchant.js初期化
enchant();window.onload=function(){ var game=new Game(320, 320); game.onload=function(){ console.log(‘Hello, enchant.js!!’); }; game.start();};
main.js
ゲームの開始
![Page 49: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/49.jpg)
1.enchant.js初期化Game.start()
ゲームを開始する. enchant.Game#fpsで設定されたフレームレートに従ってenchant.Game#currentSceneのフレームの更新が行われるようになる. プリロードする画像が存在する場合はロードが始まりローディング画面が表示される.
![Page 50: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/50.jpg)
1.enchant.js初期化
![Page 51: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/51.jpg)
あなたがシューティングゲームを作るのに必要なたった10個の要素 625 users
1. enchant.js初期化
2. 自機を出す
3. 自機を動かす
4. 敵を出す
5. 敵を動かす
6. 弾を撃つ
7. 弾で敵を倒す
8. 敵をたくさん出す
9. ゲームオーバーを作る
10.スコアを出すhttp://chephes.com/meetup/
![Page 52: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/52.jpg)
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を以下のように書き換える
![Page 53: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/53.jpg)
2.自機を出す3. ブラウザのキャッシュを消す
![Page 54: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/54.jpg)
2.自機を出す4. ブラウザをリロード
![Page 55: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/55.jpg)
2.自機を出す4. ブラウザをリロード
自機がでた
![Page 56: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/56.jpg)
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
![Page 57: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/57.jpg)
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
画像の読み込み
![Page 58: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/58.jpg)
game.preload(‘chara1.gif’)とは?2.自機を出す
wise9-enchant.js-..../doc/ja/index.html
![Page 59: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/59.jpg)
2.自機を出す
enchant.Gameをクリックgame.preload(‘chara1.gif’)とは?
![Page 60: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/60.jpg)
2.自機を出す
enchant.Game.preloadをさがすgame.preload(‘chara1.gif’)とは?
![Page 61: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/61.jpg)
2.自機を出す
説明文を読んでみるgame.preload(‘chara1.gif’)とは?
サンプル
![Page 62: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/62.jpg)
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
![Page 63: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/63.jpg)
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
自機の生成
![Page 64: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/64.jpg)
2.自機を出すvar player=new Sprite(32, 32);
![Page 65: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/65.jpg)
2.自機を出すvar player=new Sprite(32, 32);
![Page 66: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/66.jpg)
2.自機を出すvar player=new Sprite(32, 32);
![Page 67: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/67.jpg)
2.自機を出すvar player=new Sprite(32, 32);
![Page 68: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/68.jpg)
2.自機を出すvar player=new Sprite(32, 32);
=32
![Page 69: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/69.jpg)
2.自機を出すvar player=new Sprite(32, 32);
=32
![Page 70: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/70.jpg)
2.自機を出すvar player=new Sprite(32, 32);
=32=32
![Page 71: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/71.jpg)
2.自機を出すvar player=new Sprite(32, 32);
=32=32
32
32
![Page 72: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/72.jpg)
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
画像の設定
![Page 73: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/73.jpg)
2.自機を出すplayer.image=game.assets[‘chara1.gif’];
![Page 74: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/74.jpg)
2.自機を出すplayer.image=game.assets[‘chara1.gif’];
![Page 75: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/75.jpg)
2.自機を出すplayer.image=game.assets[‘chara1.gif’];
![Page 76: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/76.jpg)
2.自機を出すplayer.image=game.assets[‘chara1.gif’];
![Page 77: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/77.jpg)
2.自機を出すplayer.image=game.assets[‘chara1.gif’];
![Page 78: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/78.jpg)
2.自機を出すplayer.image=game.assets[‘chara1.gif’];
ロードされたchara1.gifをplayerの画像として表示する
![Page 79: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/79.jpg)
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
シーンに追加して表示
![Page 80: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/80.jpg)
2.自機を出すgame.rootScene.addChild(player);
enchant.Game
enchant.Group
enchant.Scene
![Page 81: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/81.jpg)
2.自機を出すgame.rootScene.addChild(player);
enchant.Game
enchant.Group
enchant.Scene
![Page 82: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/82.jpg)
2.自機を出すgame.rootScene.addChild(player);
enchant.Game
enchant.Group
enchant.Scene
![Page 83: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/83.jpg)
2.自機を出すgame.rootScene.addChild(player);
enchant.Game
enchant.Group
enchant.Scene
![Page 84: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/84.jpg)
2.自機を出すgame.rootScene.addChild(player);
enchant.Game
enchant.Group
enchant.Scene
![Page 85: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/85.jpg)
2.自機を出すgame.rootScene.addChild(player);
enchant.Game
enchant.Group
enchant.Scene
Gameの表示ツリーにplayerを追加する
![Page 86: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/86.jpg)
あなたがシューティングゲームを作るのに必要なたった10個の要素 625 users
1. enchant.js初期化
2. 自機を出す
3. 自機を動かす
4. 敵を出す
5. 敵を動かす
6. 弾を撃つ
7. 弾で敵を倒す
8. 敵をたくさん出す
9. ゲームオーバーを作る
10.スコアを出すhttp://chephes.com/meetup/
![Page 87: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/87.jpg)
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
1. main.jsを以下のように書き換える
![Page 88: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/88.jpg)
3.自機を動かす2. ブラウザのキャッシュを消す
![Page 89: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/89.jpg)
3.自機を動かす3. ブラウザをリロード
![Page 90: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/90.jpg)
3.自機を動かす4. 画面をクリック
![Page 91: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/91.jpg)
3.自機を動かす4. 画面をクリック
![Page 92: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/92.jpg)
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
画面のタッチの処理の設定
![Page 93: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/93.jpg)
3.自機を動かすEventTarget.addEventListener(type, listener);
イベントリスナを追加する。typeには‘enterframe’や‘touchstart‘などが利用でき、それらのイベントが起きたときに、listenerを実行する。EventTargetを継承するSpriteやSceneなど様々なクラスから利用可能
![Page 94: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/94.jpg)
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
タッチされたときの処理
![Page 95: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/95.jpg)
3.自機を動かすNode.y
Nodeのy座標の値。読み込む事も、書き込む事も可能である。yのプロパティはSpriteが継承しているNodeにて定義されているので、Spriteでも利用可能
![Page 96: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/96.jpg)
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
![Page 97: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/97.jpg)
あなたがシューティングゲームを作るのに必要なたった10個の要素 625 users
1. enchant.js初期化
2. 自機を出す
3. 自機を動かす
4. 敵を出す
5. 敵を動かす
6. 弾を撃つ
7. 弾で敵を倒す
8. 敵をたくさん出す
9. ゲームオーバーを作る
10.スコアを出すhttp://chephes.com/meetup/
![Page 98: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/98.jpg)
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をフォルダに入れる
2. main.jsを以下のように書き換える
![Page 99: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/99.jpg)
4.敵を出す3. ブラウザのキャッシュを消す
![Page 100: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/100.jpg)
4.敵を出す4. ブラウザをリロード
![Page 101: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/101.jpg)
//...中略...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 敵の画像の読み込み
![Page 102: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/102.jpg)
//...中略...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
敵の初期化と表示
![Page 103: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/103.jpg)
//...中略...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
敵の初期化と表示
var player=new Sprite(32, 32);player.image=game.assets[‘chara1.gif];game.rootScene.addChild(player);
![Page 104: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/104.jpg)
//...中略...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
敵の位置の設定
![Page 105: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/105.jpg)
あなたがシューティングゲームを作るのに必要なたった10個の要素 625 users
1. enchant.js初期化
2. 自機を出す
3. 自機を動かす
4. 敵を出す
5. 敵を動かす
6. 弾を撃つ
7. 弾で敵を倒す
8. 敵をたくさん出す
9. ゲームオーバーを作る
10.スコアを出すhttp://chephes.com/meetup/
![Page 106: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/106.jpg)
5.敵を動かす
//...中略...enemy.x = 320 - 32;game.rootScene.addChild(enemy);enemy.addEventListener(‘enterframe’, function(){
this.x -= 2;});game.rootScene.addEventListener(‘touchstart’, function(e){//...中略...
main.js
1. main.jsを以下のように書き換える
![Page 107: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/107.jpg)
5.敵を動かす2. ブラウザのキャッシュを消す
![Page 108: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/108.jpg)
5.敵を動かす3. ブラウザをリロード
![Page 109: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/109.jpg)
5.敵を動かす3. ブラウザをリロード
![Page 110: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/110.jpg)
5.敵を動かす
//...中略...enemy.x = 320 - 32;game.rootScene.addChild(enemy);enemy.addEventListener(‘enterframe’, function(){
this.x -= 2;});game.rootScene.addEventListener(‘touchstart’, function(e){//...中略...
main.js
敵の毎フレームの処理の設定
![Page 111: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/111.jpg)
5.敵を動かす
//...中略...enemy.x = 320 - 32;game.rootScene.addChild(enemy);enemy.addEventListener(‘enterframe’, function(){
this.x -= 2;});game.rootScene.addEventListener(‘touchstart’, function(e){//...中略...
main.js
自分の位置を左に2px動かす
![Page 112: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/112.jpg)
あなたがシューティングゲームを作るのに必要なたった10個の要素 625 users
1. enchant.js初期化
2. 自機を出す
3. 自機を動かす
4. 敵を出す
5. 敵を動かす
6. 弾を撃つ
7. 弾で敵を倒す
8. 敵をたくさん出す
9. ゲームオーバーを作る
10.スコアを出すhttp://chephes.com/meetup/
![Page 113: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/113.jpg)
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をフォルダに追加
2. main.jsを以下のように書き換える
![Page 114: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/114.jpg)
6.弾を撃つ3. ブラウザのキャッシュを消す
![Page 115: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/115.jpg)
6.弾を撃つ4. ブラウザをリロード
![Page 116: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/116.jpg)
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 弾画像の読み込み
![Page 117: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/117.jpg)
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
弾の初期化
![Page 118: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/118.jpg)
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
弾の画像の選択
![Page 119: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/119.jpg)
6.弾を撃つicon0.gif
![Page 120: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/120.jpg)
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
![Page 121: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/121.jpg)
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
![Page 122: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/122.jpg)
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
playerの位置に弾を移動
![Page 123: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/123.jpg)
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
弾の移動
![Page 124: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/124.jpg)
あなたがシューティングゲームを作るのに必要なたった10個の要素 625 users
1. enchant.js初期化
2. 自機を出す
3. 自機を動かす
4. 敵を出す
5. 敵を動かす
6. 弾を撃つ
7. 弾で敵を倒す
8. 敵をたくさん出す
9. ゲームオーバーを作る
10.スコアを出すhttp://chephes.com/meetup/
![Page 125: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/125.jpg)
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を以下のように書き換える
![Page 126: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/126.jpg)
7.弾で敵を倒す2. ブラウザのキャッシュを消す
![Page 127: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/127.jpg)
7.弾で敵を倒す3. ブラウザをリロード
![Page 128: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/128.jpg)
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.js
敵と弾のあたり判定
![Page 129: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/129.jpg)
3.自機を動かすEntity.intersect(s);
Entityの矩形が交差しているかどうかにより判定衝突を行う。引数には対象のEntitiyをとる。このメソッドはEntityクラスにて定義さているので、Spriteで利用可能
![Page 130: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/130.jpg)
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.js
敵と弾を消す
![Page 131: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/131.jpg)
3.自機を動かすGroup.removeChild(s);
GroupからNodeを削除する。引数には対象のEntitiyをとる。このメソッドはGroupクラスにて定義さているので、Sceneで利用可能
![Page 132: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/132.jpg)
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を以下のように書き換える
![Page 133: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/133.jpg)
1. enchant.js初期化
2. 自機を出す
3. 自機を動かす
4. 敵を出す
5. 敵を動かす
6. 弾を撃つ
7. 弾で敵を倒す
8. 敵をたくさん出す
9. ゲームオーバーを作る
10.スコアを出す
あなたがシューティングゲームを作るのに必要なたった10個の要素 625 users
http://chephes.com/meetup/
![Page 134: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/134.jpg)
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);
}});//...中略...
main.js1. main.jsを以下のように書き換える
![Page 135: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/135.jpg)
8.敵をたくさん出す
//...中略...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をまだまだ書き換える
![Page 136: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/136.jpg)
8.敵をたくさん出す3. ブラウザのキャッシュを消す
![Page 137: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/137.jpg)
8.敵をたくさん出す4. ブラウザをリロード
![Page 138: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/138.jpg)
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);
}});//...中略...
main.js
敵配列の用意
![Page 139: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/139.jpg)
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);
}});//...中略...
main.js
毎フレームごとの処理を追加
![Page 140: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/140.jpg)
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);
}});//...中略...
main.js
毎フレームだと多すぎるので、
1/10の確率で出現
![Page 141: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/141.jpg)
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);
}});//...中略...
main.js
表示されてる敵リストに追加
![Page 142: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/142.jpg)
8.敵をたくさん出す
//...中略...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.js
敵の数だけループ
![Page 143: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/143.jpg)
8.敵をたくさん出す
//...中略...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.js
i番目の敵とミサイルの当たり判定
![Page 144: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/144.jpg)
8.敵をたくさん出す
//...中略...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.js
i番目の敵を敵リストから削除
![Page 145: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/145.jpg)
8.敵をたくさん出す
//...中略...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.js
ループの中断
![Page 146: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/146.jpg)
1. enchant.js初期化
2. 自機を出す
3. 自機を動かす
4. 敵を出す
5. 敵を動かす
6. 弾を撃つ
7. 弾で敵を倒す
8. 敵をたくさん出す
9. ゲームオーバーを作る
10.スコアを出す
あなたがシューティングゲームを作るのに必要なたった10個の要素 625 users
http://chephes.com/meetup/
![Page 147: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/147.jpg)
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.js1. main.jsを以下のように書き換える
![Page 148: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/148.jpg)
9.ゲームオーバーを作る
![Page 149: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/149.jpg)
9.ゲームオーバーを作る
![Page 150: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/150.jpg)
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の当たり判定
![Page 151: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/151.jpg)
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
ゲームの停止
![Page 152: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/152.jpg)
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
GAMEOVERの表示
![Page 153: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/153.jpg)
1. enchant.js初期化
2. 自機を出す
3. 自機を動かす
4. 敵を出す
5. 敵を動かす
6. 弾を撃つ
7. 弾で敵を倒す
8. 敵をたくさん出す
9. ゲームオーバーを作る
10.スコアを出す
あなたがシューティングゲームを作るのに必要なたった10個の要素 625 users
http://chephes.com/meetup/
![Page 154: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/154.jpg)
10.スコアを出す
//...中略...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.js1. main.jsを以下のように書き換える
![Page 155: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/155.jpg)
10.スコアを出す
![Page 156: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/156.jpg)
10.スコアを出す
//...中略...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
ラベルの表示
![Page 157: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/157.jpg)
10.スコアを出す
//...中略...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
スコアの初期化
![Page 158: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/158.jpg)
10.スコアを出す
//...中略...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
スコアの増加
![Page 159: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/159.jpg)
10.スコアを出す
//...中略...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
表示の更新
![Page 160: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/160.jpg)
1. enchant.js初期化
2. 自機を出す
3. 自機を動かす
4. 敵を出す
5. 敵を動かす
6. 弾を撃つ
7. 弾で敵を倒す
8. 敵をたくさん出す
9. ゲームオーバーを作る
10.スコアを出す
あなたがシューティングゲームを作るのに必要なたった10個の要素 625 users
http://chephes.com/meetup/
![Page 161: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/161.jpg)
1. enchant.js初期化
2. 自機を出す
3. 自機を動かす
4. 敵を出す
5. 敵を動かす
6. 弾を撃つ
7. 弾で敵を倒す
8. 敵をたくさん出す
9. ゲームオーバーを作る
10.スコアを出す
あなたがシューティングゲームを作るのに必要なたった10個の要素 625 users
済http://chephes.com/meetup/
![Page 162: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/162.jpg)
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
![Page 163: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/163.jpg)
! 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
![Page 164: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/164.jpg)
発展アイテムなどを作ってみる
敵キャラのバリエーションを増やす
ステージを作ってみる
敵をクラス化してみる
弾をクラス化してみる
![Page 165: enchant.js meetup Tokyo vol.2 Tutorial](https://reader037.fdocuments.net/reader037/viewer/2022102917/588614261a28abe63e8b5dc3/html5/thumbnails/165.jpg)