enchant.js meetup Tokyo vol.2 Tutorial

11,387 views

Published on

enchant.js meetup Tokyo vol.2

Published in: Technology
1 Comment
15 Likes
Statistics
Notes
No Downloads
Views
Total views
11,387
On SlideShare
0
From Embeds
0
Number of Embeds
6,352
Actions
Shares
0
Downloads
113
Comments
1
Likes
15
Embeds 0
No embeds

No notes for slide

enchant.js meetup Tokyo vol.2 Tutorial

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

×