• Save
Enchant講座
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
981
On Slideshare
966
From Embeds
15
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
7

Embeds 15

http://emono.edoblog.net 15

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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