Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 4

575 views

Published on

苫小牧高専 ソフトウェアテクノロジー部 新入生向けの資料です。

Published in: Technology
  • Download or read that Ebooks here ... ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, Copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, Copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS 1NTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

苫小牧高専 ソフトウェアテクノロジー部 enchant.jsでゲーム作り 4

  1. 1. テーマ1 enchant.js で ゲーム作り (4) 2015/05/19 苫小牧高専 ソフトウェアテクノロジー部
  2. 2. 今日やること • テスト前の活動について • ちょっとしたアンケート • 前回のまとめ • ゲームオーバーの処理を追加してみよう • クラスを使ってみよう
  3. 3. 前回のまとめ
  4. 4. インデント
  5. 5. どっちが見やすい? enchant(); window.onload = function() { var core = new Core(320, 320); core.preload('chara1.png'); core.onload = function() { var bear = new Sprite(32, 32); bear.image = core.assets['chara1.png']; bear.x = 0; bear.y = 0; core.rootScene.addChild(bear); } core.start(); } enchant(); window.onload = function() { var core = new Core(320, 320); core.preload('chara1.png'); core.onload = function() { var bear = new Sprite(32, 32); bear.image = core.assets['chara1.png']; bear.x = 0; bear.y = 0; core.rootScene.addChild(bear); } core.start(); } インデントあり インデントなし
  6. 6. インデントとは • インデント = 字下げ • インデントを使って、
 入れ子になっている部分をわかりやすくするべし。 • インデントは、キーボードの[tab]キーで!
 (スペースキー連打はダメよ) • 自分と、他人(3日後の自分も他人!)が
 見やすいコードを書くよう心がけよう!
  7. 7. ラベルを表示してみる
 ∼ストップウォッチを表示してみよう∼ 前回のテーマ(1)
  8. 8. ストップウォッチ的な
  9. 9. main.js // 省略 if (core.input.down) { this.y += 3; } }); var label = new Label(); label.x = 280; label.y = 5; label.color = 'red'; label.font = '14px "Arial"'; label.text = '0'; label.on('enterframe', function() { label.text = core.frame / core.fps; }); core.rootScene.addChild(bear); core.rootScene.addChild(label); } core.start(); } ← labelを作成 ← 座標指定(おなじみ) ← 色指定 ← フォントとサイズ ← addChildを忘れずに! ← たぶんaddEventListenerと同じ
  10. 10. label.on label.on('enterframe', function() { label.text = core.frame / core.fps; }); • たぶんaddEventListenerと同じ • label.text は labelに表示されるテキスト。
 そこに core.frame / core.fps を格納している。 • 現在のフレーム数をfpsで割れば秒数が出るよ!!
  11. 11. 衝突判定をやってみる
 
 ∼いよいよゲームっぽくなってきたかも∼ 前回のテーマ(2)
  12. 12. within if (this.within(enemy, 15)) { label.text = 'HIT!'; } • thisはbear • this.within(enemy, 15)
 thisの中心とenemyの中心が15px近づいたらHIT! • 数値を変えれば衝突判定を厳しくしたり、
 ゆるくしたりできる。
  13. 13. ゲームオーバーの処理
 
 ∼いよいよゲームっぽくなってきたかも∼ 今日のテーマ(1)
  14. 14. main.js // 略 core.onload = function() { var bear = new Sprite(32, 32); // 中略 var gameOverScene = new Scene(); gameOverScene.backgroundColor = 'black'; var gameOverLabel = new Label(); gameOverLabel.x = 100; gameOverLabel.y = 160; gameOverLabel.color = 'red'; gameOverLabel.font = '24px "Arial"'; gameOverLabel.text = 'GAME OVER!!'; bear.addEventListener('enterframe', function() { // 中略 if (this.within(enemy, 15)) { core.pushScene(gameOverScene); gameOverScene.addChild(gameOverLabel); core.stop(); } }); // 略
  15. 15. ゲームオーバー処理
  16. 16. シーンについて復習 • coreオブジェクトを作成。
 coreオブジェクトは最初からrootSceneを持っている。 • クマさん(Sprite)やテキスト(Label)を作るたびに、
 core.rootSceneにaddChildしていく。 // 第1回目で書いたソースコード enchant(); window.onload = function() { var core = new Core(320, 320); core.preload('chara1.png'); core.onload = function() { // 中略 core.rootScene.addChild(bear); } core.start(); }
  17. 17. 自作のシーンを使う • 自作のシーンをrootSceneに重ねるイメージ。
  18. 18. ゲームオーバー処理を作る • 自作シーンもSpriteやLabelと同様に作る。 var gameOverScene = new Scene(); gameOverScene.backgroundColor = 'black'; • シーンを出す処理 if (this.within(enemy, 15a)) { // 前回やった within core.pushScene(gameOverScene); // core.pushScene(yourSceneName)でシーンを出す core.stop(); // ゲームをstop } • rootSceneと同様にaddChildもできる gameOverScene.addChild(gameOverLabel); // gameOverLabelは前のスライド参照 • rootSceneを自作シーン(gameOverScene)で
 覆い被さるイメージ。
  19. 19. クラスを使ってみよう
 
 ∼いよいよゲームっぽくなってきたかも∼ 今日のテーマ(2)
  20. 20. 突然ですが、そろそろ暖かく なってきてクマも冬眠から覚 める頃かと思うので、大量に クマさんを表示してみたいと 思います。手始めに白いクマ さん(Sprite)を50体作っ て画面に表示してください。
  21. 21. var bear1 = new Sprite(32, 32); bear1.image = core.assets['chara1.png']; bear1.x = 280; bear1.y = 50; bear1.frame = 5; var bear2 = new Sprite(32, 32); bear2.image = core.assets['chara1.png']; bear2.x = 200; // クマさん同士が重ならないように適当に bear2.y = 30; // 座標を変えてね bear2.frame = 5; var bear3 = new Sprite(32, 32); bear3.image = core.assets['chara1.png']; bear3.x = 100; bear3.y = 50; bear3.frame = 5; var bear4 = new Sprite(32, 32); bear4.image = core.assets[‘chara1.png'];
 // 略 // これを40回以上繰り返す(頑張れ
  22. 22. さて、50体の白いクマさん を作ってもらいましたが、やっ ぱり白いクマさんだとあり きたりなので、白いクマさ んじゃなくてピンクのクマ さんに変更してください。
  23. 23. var bear1 = new Sprite(32, 32); bear1.image = core.assets['chara1.png']; bear1.x = 280; bear1.y = 50; bear1.frame = 5; var bear2 = new Sprite(32, 32); bear2.image = core.assets['chara1.png']; bear2.x = 280; bear2.y = 50; bear2.frame = 5; var bear3 = new Sprite(32, 32); bear3.image = core.assets['chara1.png']; bear3.x = 280; bear3.y = 50; bear3.frame = 5; var bear4 = new Sprite(32, 32); bear4.image = core.assets[‘chara1.png'];
 // 略 ← ここを bearN.frame = 9 にする 50回
  24. 24.             / ̄ ̄\           /   _ノ  \           |    ( ●)(●)           |     (__人__)              |     ` ⌒´ノ   学生時代に打ち込んだものは?               |         }               ヽ        }             ヽ、.,__ __ノ    _, 、 -― ''"::l:::::::\ー-..,ノ,、.゙,i 、   /;;;;;;::゙:':、::::::::::::|_:::;、>、_ l|||||゙!:゙、-、_  丿;;;;;;;;;;;:::::i::::::::::::::/:::::::\゙'' ゙||i l\>::::゙'ー、 . i;;;;;;;;;;;;;;;;;;;;;;|::::::::::::::\::::::::::\ .||||i|::::ヽ::::::|:::! /;;;;;;;;;;;;;;;;;;;;;;;;![面接官 ]\:::::::::ヽ|||||:::::/::::::::i:::| ;;;;;;;;;;;;;;;;;;;;;;;;;;|;;;;:::::::::::::::::::::::\:::::゙、|||:::/::::::::::|:::        ____     /      \    /  ─    ─\  /    (●) (●) \    キーボードです  |       (__人__)    |  \     ` ⌒´   / ,,.....イ.ヽヽ、___ ーーノ゙-、. :   |  '; \_____ ノ.| ヽ i     |  \/゙(__)\,|  i |     >   ヽ. ハ  |   ||
  25. 25. var bear1 = new Sprite(32, 32); bear1.image = core.assets['chara1.png']; bear1.x = 280; bear1.y = 50; bear1.frame = 5; var bear2 = new Sprite(32, 32); bear2.image = core.assets['chara1.png']; bear2.x = 280; bear2.y = 50; bear2.frame = 5; var bear3 = new Sprite(32, 32); bear3.image = core.assets['chara1.png']; bear3.x = 280; bear3.y = 50; bear3.frame = 5; var bear4 = new Sprite(32, 32); bear4.image = core.assets[‘chara1.png'];
 // 略 // これを40回以上繰り返す(頑張れ 1.bearN(Nは自然数)を作成 2.bear.imageの指定 3.bearの座標を指定 4.bearのframeを指定 5.rootScene.addChild やってることは皆同じ。 違うのは、座標だけ。
  26. 26. 共通部分は
 まとめられるのでは?
  27. 27. クマさんの共通部分 • Sprite型の変数である • this.image は chara1.png である • 1フレームごとにx += 5する処理 • 画面の端へ行ったらx座標を0にする的な処理 など
  28. 28. enchant(); window.onload = function() { var core = new Core(320, 320); core.preload('chara1.png'); core.onload = function() { var Bear = Class.create(Sprite, { initialize: function(x, y) { Sprite.call(this, 32, 32); this.x = x; this.y = y; this.image = core.assets['chara1.png']; this.addEventListener('enterframe', function() { this.frame = this.age % 3; this.x += 3; if (this.x > 320) { this.x = 0; } }); core.rootScene.addChild(this); } }); var bear = new Bear(0, 0); } core.start(); } せっかくなので大々的に書き直そう
  29. 29. var bear = new Bear(0, 0); var bear2 = new Bear(10, 0); var bear3 = new Bear(30, 20); var bear4 = new Bear(50, 100); // 変えるのは座標だけでOK! もっと楽にやる方法もあるヨ 一度Bearクラスを 定義してしまえば…
  30. 30. クラス
  31. 31. クラス • オブジェクトが持つデータと振る舞いを定義した設 計図のようなもの。
  オブジェクト: クマさん(Sprite)とか
          ストップウォッチ(Label)とか • 詳しい話は次回する(かも)
  32. 32. もうちょっとだけクラス • もし、犬を表すクラス Dog があったら…… • dog = new Dog(40, 8) // 身長40cm 体重8kg
 dog.name = ポチ // 名前データは犬
 dog.run() // 犬を走らせる
  33. 33. var Bear = Class.create(Sprite, { initialize: function(x, y) { Sprite.call(this, 32, 32); this.x = x; this.y = y; this.image = core.assets['chara1.png']; this.addEventListener('enterframe', function() { this.frame = this.age % 3; this.x += 3; if (this.x > 320) { this.x = 0; } }); core.rootScene.addChild(this); } }); 定義済みのクラスから 新しく変数を作る ← 基本形 initialize: function(与える値) {
 初期化処理; } ←addChildも  ここでできる ↑this.○○ でデータにアクセスできる。 ↑ おまじない
  34. 34. var bear = new Bear(0, 0); var bear2 = new Bear(10, 30); var bear3 = new Bear(50, 10); var bear4 = new Bear(200, 50); クラスから 新しいインスタンスを生成 • var bear = new Bear(50, 100);
 というように変数を作れば、めんどくさい処理(座標 の初期設定とか)を全部クラス側でやってくれる。 • initialize: function(x, y) { … } のx, yは
 こちらで指定できる部分。
  35. 35. 課題1 1. Bearクラスに、
 キーボードの矢印キーで移動する処理 
 を書き加えよう! 2. 敵を表すEnemyクラスを作ってみよう!
 ・敵とわかりやすいよう白クマさんに。
 ・初期座標と移動方向、スピードはランダムに。
 ・プレイヤーのクマさんと衝突したら
  ゲームオーバーにしてゲームをstopさせよう。
 ・Math.floor(Math.random() * 300);
  で 0以上300以下のランダムな整数が取れる。

×