Enchant講座

1,153 views
1,048 views

Published on

Enchant講座

  1. 1. enchant.jsでゲームを作る! くまを追いかけるゲーム
  2. 2. enchant.jsとは •  JavaScriptで書かれたライブラリー!  – いろいろ便利な機能が作られてる  •  9leapというサイトのゲームは全部これ  – h.p://9leap.net      
  3. 3. enchantを使うための準備! •  テキストエディタを準備  – SublimとかemacsとかTeraPadとか    •  enchant.jsをダウンロード  – ダウンロードしたら解凍してね!  •  Google  Chromeをダウンロード  
  4. 4. enchantでゲームを作るよ! •  enchant/examples/expert/getbanana/index.htmlをChromeで開いてみよう!  •  enchant/examples/expert/getbanana/main.jsテキストエディタを開いてみよう!  
  5. 5.  enchantでゲームを作るよ!(準備) 黄色の枠線の部分を消してしまおう!
  6. 6. enchantでゲームを作るよ!(準備) 黄色の枠線の部分を消してしまおう!
  7. 7. enchantでゲームを作るよ!(2) •  main.js  – window.onload  =  funcDon()  の中身全部  – game.rootScene.addEventListener    (‘enterframe’,funcDon()の中身全部    消します!(カッコを消さないように注意!)  
  8. 8. JavaScriptの基本のルール •  文章の最後には ; をつける  •  全部半角!  •  //はコメントアウト  •  変数宣言はvarを使う  
  9. 9. main.jsの説明(1) こんな感じになります!
  10. 10. main.jsの説明(1) •  enchant();  – おまじない •  window.onload = function() ; – window全体の設定 •  game = new Game(320, 320); – 画面サイズ
  11. 11. main.jsの説明(2) •  game.fps  =  24;  – 1秒間に何回画面更新するか  •  game.preload([chara1.gif,icon0.gif,bg.png])  – 画像を使うための工程1  •   game.onload  =  funcDon();  – ゲームの設定をする  
  12. 12. main.jsの説明(3) •  game.rootScene.addEventListener(enterframe,funcDon()  – 毎フレーム呼び出される  – 1秒間に24回ここを実行する
  13. 13. くまを表示してみよう!
  14. 14. くまを表示してみよう! •  bear = new Sprite(32, 32); – 画像を32×32にきって表示 •  bear.image = game.assets[chara1.gif]; – 画像を表示するための工程2 •  game.rootScene.addChild(bear); – 画像を表示するための工程3
  15. 15. index.htmlを開いてみよう! こんな感じで表示されたら成功です(*´ω`*)
  16. 16. index.htmlを開いてみよう! 表示されないって時はコンソールをみる(`・ω・´)  これがエラー! くまがいない!!(;・∀・) メニュー  >  ツール  >  Java  Scriptコンソール ここに行数
  17. 17. くまに動いてもらおう!
  18. 18. くまに動いてもらおう! •  bear.x    =  bear.x  +  1;  – bear.xはくまの画像の座標    – x座標を1ずつ増やす  
  19. 19. くまに動いてもらおう! こっち向きに動いたらおk!
  20. 20. 違うくまがいい!茶色いや!
  21. 21. 違うくまがいい!茶色いや! •  bear.frame  =  5;  – 32ずつで切った画像の5番目  – 1こめから0,1,2,・・・となっている
  22. 22. 違うくまがいい!茶色いや! シロクマになりました(‘∀`) わかりやすいようにとりあえずくまは茶色に戻しておきます。
  23. 23. くまを自由に動かそう!(1)
  24. 24. くまを自由に動かそう!(1) •  if(game.input.right)  – 右矢印が押されたらする動作  •  bear.x  =  bear.x  +  1;  – bearのx座標を1つずつ増やす  •  Chromeを更新して動きを確認しよう!  
  25. 25. くまを自由に動かそう!(2) •  他の方向もおんなじようにしてみよう!  –  if(game.input.le[)  •  左矢印を押した時  –  if(game.input.up)  •  上矢印を押した時  –  if(game.input.down)  •  下矢印を押した時    •  ちなみに、y座標はbear.yでおk!  
  26. 26. くまを自由に動かそう!(2)
  27. 27. 気づいたと思いますが・・・! x座標増える y座標増える
  28. 28. くまを拡大してみよう!
  29. 29. くまを拡大してみよう! •  bear.scaleX  =  2;  – くまの横幅を2倍にする  •  bear.scaleY  =  2;  – くまの縦幅を2倍にする  
  30. 30. くまを拡大してみよう! 画像が荒く、頭飛び出してますが。。。
  31. 31. そういえばこのくま変ですよ •  左に歩くときは逆を向いてほしい!  – bear.scaleX  =  2; bear.scaleY  =  2;を消す  •  左に歩くときだからどこに書けばいいかな  
  32. 32. そういえばこのくま変ですよ
  33. 33. そういえばこのくま変ですよ •  if(game.input.le[)  – 左に動くときだからこの中に書く  •  bear.scaleX  =  -­‐1.0;  – 逆向きだから横幅をマイナス倍すればおk  •  if(game.input.right)  – 右に動くときに  •  bear.scaleX  =  1.0;  – 向きを元に戻す  
  34. 34. そういえばこのくま変ですよ ちゃんと左を向くようになった!ヽ(=´▽`=)ノ
  35. 35. 画面外に出ないようにする! •  画面の外に出ないようにしたい  – 画面の横幅 game.width  – 画面の縦幅 game.height  – くまの横幅 bear.width  – くまの縦幅 bear.height  •  画面外に出ようとしたらそのままの位置  – if文を使う!
  36. 36. 画面外に出ないようにする!  
  37. 37. 画面外に出ないようにする! game.width ここで止まって欲しい game.width – bear.width くまの座標は左上のここ! bear.width  
  38. 38. 画面外に出ないようにする! •   if(bear.x  >  game.width  -­‐  bear.width){  – 画面外に出ようとしたら  •   bear.x  =  game.width  -­‐  bear.width  – その場の位置にいるようにする    }    ほかも同じように考えれるよ!
  39. 39. 走ってるように見せる! •  画像の1番目と2番目が交互になるように  – 画像を変えるための変数があると便利
  40. 40. 走ってるように見せる!
  41. 41. 走ってるように見せる!(1) •  bear.pose  – くまの画像を扱うための変数  •  if(game.frame  %  2  ==  0)  – 毎フレームではなく、偶数フレームの時だけ   毎フレームだと手がちぎれんばかりに動くのでw
  42. 42. 走ってるように見せる!(2) •  bear.pose  =  bear.pose  +  1;  – 変数を1つ増やす  •  bear.pose  =  bear.pose  %  2;  – 2で割ったあまりを入れる(0か1)  •  bear.frame  =  bear.pose  +  1;  – 1つずらしたくまを表示する  
  43. 43. 走ってるように見せる!(3)  0,1のままだと前2つが表示されるので  1をたして1つずつずらす
  44. 44. 走ってるように見せる! 手が動いているようにみえたらおk!
  45. 45. もう1匹くまを表示してみよう! •  女の子のくま  •  大きさは今までのくまの1.5倍(縦横両方)  •  座標は(160,160)の位置に表示
  46. 46. もう1匹くまを表示してみよう! •  画像を表示するには  – var  bear  =  new  Sprite(32,32);  – bear.image  =  game.assets[chara1.gif];    – game.rootScene.addChild(bear);    
  47. 47. もう1匹くまを表示してみよう!
  48. 48. もう1匹くまを表示してみよう!
  49. 49. もう1匹くまを表示してみよう! こんな感じで表示されます!  うまく行かなときはコンソールを見てみよう!(・∀・)
  50. 50. 当たり判定をつけよう!  距離が一定以下になったら〇〇するという条件をつける 距離が20以下になったら、女の子が泣くようにしてみよう!
  51. 51. 当たり判定をつけよう! •  距離は2点の距離を求める公式  – ルートは Math.sqrt()   – 2乗はないので掛け算  
  52. 52. 当たり判定をつけよう!
  53. 53. 当たり判定をつけよう! •  var  distans  =  Math.sqrt((bear.x  -­‐  target.x)*(bear.x  -­‐  target.x)  +  (bear.y  -­‐  target.y)  *  (bear.y  -­‐  target.y));  –  茶色くまと女の子くまの距離  •  if(distans  <  20)  –  距離が20以下になったとき  •  target.frame  =  13;  –  女の子が泣く  
  54. 54. 当たり判定をつけよう! •  else  – 距離が20以上になったとき  •  target.frame  =  10;  – 泣き止む  
  55. 55. 当たり判定をつけよう! 近づいて泣いたらおk(´;ω;`)    離れて泣き止んだらおk(*´ω`*)
  56. 56. 女の子が逃げる! •  当たったら女の子がランダムな位置に移動    – Math.random()をつかう。  •  x=Math.random()でxに0から1までのランダムな数を入れてくれる
  57. 57. 女の子が逃げる!
  58. 58. 女の子が逃げる! •  target.x  =  Math.random(  )  *  300;  – 女の子のx座標をランダム  •  target.y  =  Math.random()  *  300;  – 女の子のy座標をランダム
  59. 59. 女の子が逃げる! 当たって女の子が移動したらおk!
  60. 60. スコアをつけます!(とりあえず表示)
  61. 61. スコアをつけます!(とりあえず表示)
  62. 62. スコアをつけます!(とりあえず表示) •  var  score  =  new  Label();  – 文字やテキストを表示するオブジェクト  •  score.x  =  10;score.y  =  10  – 表示する位置  •  score.text  =  "0point!";  – 表示する内容
  63. 63. スコアをつけます!(とりあえず表示) •  var  point  =  0;  – ポイントを増やしていくための変数  •   game.rootScene.addChild(score);  – 画面に表示したいものはすべてこれをかく!
  64. 64. スコアをつけます!(とりあえず表示) こんなかんじで表示されるはずです。
  65. 65. スコアをつけます!(点数増やすよ) •  くま同士が当たったら point を100増やす    
  66. 66. スコアをつけます!(点数増やすよ)
  67. 67. スコアをつけます!(点数増やすよ) •  if(distans  <  20)  – 当たった時だからこの中にかく  •  point  =  point  +  100;  – 1回当たったらpointを100増やす  •  score.text  =  point+"point!”  – 表示するないようは増えたポイントの値とpoint!という文字列  
  68. 68. スコアをつけます!(点数増やすよ) 女の子の位置が変わってポイントが100増えればおk!!
  69. 69. 時間制限をつけよう! •  game.rootScene.addEventListener(enterframe,funcDon()  – この中は1秒間に24回呼び出されるから、24回呼ばれたら秒を1増やす。  
  70. 70. 時間制限をつけよう!
  71. 71. 時間制限をつけよう!
  72. 72. 時間制限をつけよう! •   var  Dme  =  new  Label();  •                 Dme.x  =  300;  •                 Dme.y  =  300;  •                 Dme.text  =  "30”  –  30と表示する  •                 var  limt  =  30;  –  この数を段々減らして秒数を表す  •                 var  count  =  0;  –  ふやして24になったら1秒減らす
  73. 73. 時間制限をつけよう! •   count  =  count  +  1;  –  countを1ずつ増やしていく  •     if(count  ==    24)  –  24回カウントしたら  •     limt  =  limt  -­‐  1;  –  30から1引いて1秒たったとする  •     Dme.text  =  limt;  –  1秒減らした数を表示する  •   count  =  0;  –  また24数えるために0にする  
  74. 74. 時間制限をつけよう! こんな感じに数が減って行ったらおk!
  75. 75. gameoverをつける
  76. 76. gameoverをつける •  if(Dme.text  <  0)  – Dme.textが0より小さくなろうとしたら  •     Dme.text  =  0;  – 0にする  •     game.end(point,“点数は”+point+“点です”);  – 9leapに上げた時にでるメッセージ
  77. 77. gameoverをつける メッセージは出ないけど、GAMEOVERの画面がでたらおk!

×