enchant.jsでゲームを作る!	くまを追いかけるゲーム
enchant.jsとは	•  JavaScriptで書かれたライブラリー!	  – いろいろ便利な機能が作られてる	  •  9leapというサイトのゲームは全部これ	  – h.p://9leap.net	  	  	  
enchantを使うための準備!	•  テキストエディタを準備	  – SublimとかemacsとかTeraPadとか	  	  •  enchant.jsをダウンロード	  – ダウンロードしたら解凍してね!	  •  Google	  C...
enchantでゲームを作るよ!	•  enchant/examples/expert/getbanana/index.htmlをChromeで開いてみよう!	  •  enchant/examples/expert/getbanana/mai...
 enchantでゲームを作るよ!(準備)	黄色の枠線の部分を消してしまおう!
enchantでゲームを作るよ!(準備)	黄色の枠線の部分を消してしまおう!
enchantでゲームを作るよ!(2)	•  main.js	  – window.onload	  =	  funcDon()	  の中身全部	  – game.rootScene.addEventListener	  	  (‘enterf...
JavaScriptの基本のルール	•  文章の最後には ; をつける	  •  全部半角!	  •  //はコメントアウト	  •  変数宣言はvarを使う	  
main.jsの説明(1)	こんな感じになります!
main.jsの説明(1)	•  enchant(); 	– おまじない		•  window.onload = function() ;	– window全体の設定	•  game = new Game(320, 320);	– 画面サイズ
main.jsの説明(2)	•  game.fps	  =	  24;	  – 1秒間に何回画面更新するか	  •  game.preload([chara1.gif,icon0.gif,bg.png])	  – 画像を使うための工程1	  •...
main.jsの説明(3)	•  game.rootScene.addEventListener(enterframe,funcDon()	  – 毎フレーム呼び出される	  – 1秒間に24回ここを実行する
くまを表示してみよう!
くまを表示してみよう!	•  bear = new Sprite(32, 32); 	– 画像を32×32にきって表示	•  bear.image = game.assets[chara1.gif];	– 画像を表示するための工程2	•  ga...
index.htmlを開いてみよう!	こんな感じで表示されたら成功です(*´ω`*)
index.htmlを開いてみよう!	表示されないって時はコンソールをみる(`・ω・´)	  これがエラー!	くまがいない!!(;・∀・)	メニュー	  >	  ツール	  >	  Java	  Scriptコンソール	ここに行数
くまに動いてもらおう!
くまに動いてもらおう!	•  bear.x	  	  =	  bear.x	  +	  1;	  – bear.xはくまの画像の座標	  	  – x座標を1ずつ増やす	  
くまに動いてもらおう!	こっち向きに動いたらおk!
違うくまがいい!茶色いや!
違うくまがいい!茶色いや!	•  bear.frame	  =	  5;	  – 32ずつで切った画像の5番目	  – 1こめから0,1,2,・・・となっている
違うくまがいい!茶色いや!	シロクマになりました(‘∀`)	わかりやすいようにとりあえずくまは茶色に戻しておきます。
くまを自由に動かそう!(1)
くまを自由に動かそう!(1)	•  if(game.input.right)	  – 右矢印が押されたらする動作	  •  bear.x	  =	  bear.x	  +	  1;	  – bearのx座標を1つずつ増やす	  •  Chrom...
くまを自由に動かそう!(2)	•  他の方向もおんなじようにしてみよう!	  –  if(game.input.le[)	  •  左矢印を押した時	  –  if(game.input.up)	  •  上矢印を押した時	  –  if(ga...
くまを自由に動かそう!(2)
気づいたと思いますが・・・!	x座標増える	y座標増える
くまを拡大してみよう!
くまを拡大してみよう!	•  bear.scaleX	  =	  2;	  – くまの横幅を2倍にする	  •  bear.scaleY	  =	  2;	  – くまの縦幅を2倍にする	  
くまを拡大してみよう!	画像が荒く、頭飛び出してますが。。。
そういえばこのくま変ですよ	•  左に歩くときは逆を向いてほしい!	  – bear.scaleX	  =	  2; bear.scaleY	  =	  2;を消す	  •  左に歩くときだからどこに書けばいいかな	  
そういえばこのくま変ですよ
そういえばこのくま変ですよ	•  if(game.input.le[)	  – 左に動くときだからこの中に書く	  •  bear.scaleX	  =	  -­‐1.0;	  – 逆向きだから横幅をマイナス倍すればおk	  •  if(gam...
そういえばこのくま変ですよ	ちゃんと左を向くようになった!ヽ(=´▽`=)ノ
画面外に出ないようにする!	•  画面の外に出ないようにしたい	  – 画面の横幅 game.width	  – 画面の縦幅 game.height	  – くまの横幅 bear.width	  – くまの縦幅 bear.height	  • ...
画面外に出ないようにする!	 
画面外に出ないようにする!	game.width	ここで止まって欲しい		game.width – bear.width		くまの座標は左上のここ!	bear.width	  
画面外に出ないようにする!	•  	  if(bear.x	  >	  game.width	  -­‐	  bear.width){	  – 画面外に出ようとしたら	  •  	  bear.x	  =	  game.width	  -­‐	...
走ってるように見せる!	•  画像の1番目と2番目が交互になるように	  – 画像を変えるための変数があると便利
走ってるように見せる!
走ってるように見せる!(1)	•  bear.pose	  – くまの画像を扱うための変数	  •  if(game.frame	  %	  2	  ==	  0)	  – 毎フレームではなく、偶数フレームの時だけ	   毎フレームだと手がちぎ...
走ってるように見せる!(2)	•  bear.pose	  =	  bear.pose	  +	  1;	  – 変数を1つ増やす	  •  bear.pose	  =	  bear.pose	  %	  2;	  – 2で割ったあまりを入れる...
走ってるように見せる!(3)	 0,1のままだと前2つが表示されるので	  1をたして1つずつずらす
走ってるように見せる!	手が動いているようにみえたらおk!
もう1匹くまを表示してみよう!	•  女の子のくま	  •  大きさは今までのくまの1.5倍(縦横両方)	  •  座標は(160,160)の位置に表示
もう1匹くまを表示してみよう!	•  画像を表示するには	  – var	  bear	  =	  new	  Sprite(32,32);	  – bear.image	  =	  game.assets[chara1.gif];	  	  ...
もう1匹くまを表示してみよう!
もう1匹くまを表示してみよう!
もう1匹くまを表示してみよう!	こんな感じで表示されます!	  うまく行かなときはコンソールを見てみよう!(・∀・)
当たり判定をつけよう!	 距離が一定以下になったら〇〇するという条件をつける	距離が20以下になったら、女の子が泣くようにしてみよう!
当たり判定をつけよう!	•  距離は2点の距離を求める公式	  – ルートは Math.sqrt() 	  – 2乗はないので掛け算	  
当たり判定をつけよう!
当たり判定をつけよう!	•  var	  distans	  =	  Math.sqrt((bear.x	  -­‐	  target.x)*(bear.x	  -­‐	  target.x)	  +	  (bear.y	  -­‐	  tar...
当たり判定をつけよう!	•  else	  – 距離が20以上になったとき	  •  target.frame	  =	  10;	  – 泣き止む	  
当たり判定をつけよう!	近づいて泣いたらおk(´;ω;`)	  	  離れて泣き止んだらおk(*´ω`*)
女の子が逃げる!	•  当たったら女の子がランダムな位置に移動 	  	  – Math.random()をつかう。	  •  x=Math.random()でxに0から1までのランダムな数を入れてくれる
女の子が逃げる!
女の子が逃げる!	•  target.x	  =	  Math.random(	  )	  *	  300;	  – 女の子のx座標をランダム	  •  target.y	  =	  Math.random()	  *	  300;	  – 女...
女の子が逃げる!	当たって女の子が移動したらおk!
スコアをつけます!(とりあえず表示)
スコアをつけます!(とりあえず表示)
スコアをつけます!(とりあえず表示)	•  var	  score	  =	  new	  Label();	  – 文字やテキストを表示するオブジェクト	  •  score.x	  =	  10;score.y	  =	  10	  – 表...
スコアをつけます!(とりあえず表示)	•  var	  point	  =	  0;	  – ポイントを増やしていくための変数	  •  	  game.rootScene.addChild(score);	  – 画面に表示したいものはすべて...
スコアをつけます!(とりあえず表示)	こんなかんじで表示されるはずです。
スコアをつけます!(点数増やすよ)	•  くま同士が当たったら point を100増やす	  	  
スコアをつけます!(点数増やすよ)
スコアをつけます!(点数増やすよ)	•  if(distans	  <	  20)	  – 当たった時だからこの中にかく	  •  point	  =	  point	  +	  100;	  – 1回当たったらpointを100増やす	  •...
スコアをつけます!(点数増やすよ)	女の子の位置が変わってポイントが100増えればおk!!
時間制限をつけよう!	•  game.rootScene.addEventListener(enterframe,funcDon()	  – この中は1秒間に24回呼び出されるから、24回呼ばれたら秒を1増やす。	  
時間制限をつけよう!
時間制限をつけよう!
時間制限をつけよう!	•  	  var	  Dme	  =	  new	  Label();	  •  	  	  	  	  	  	  	  	  Dme.x	  =	  300;	  •  	  	  	  	  	  	  	  	 ...
時間制限をつけよう!	•  	  count	  =	  count	  +	  1;	  –  countを1ずつ増やしていく	  •  	  	  if(count	  ==	  	  24)	  –  24回カウントしたら	  •  	 ...
時間制限をつけよう!	こんな感じに数が減って行ったらおk!
gameoverをつける
gameoverをつける	•  if(Dme.text	  <	  0)	  – Dme.textが0より小さくなろうとしたら	  •  	  	  Dme.text	  =	  0;	  – 0にする	  •  	  	  game.end(...
gameoverをつける	メッセージは出ないけど、GAMEOVERの画面がでたらおk!
Upcoming SlideShare
Loading in...5
×

Enchant講座

864

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!

×