O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

432 visualizações

Publicada em

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

Publicada em: Tecnologia
  • (Unlimited)....ACCESS WEBSITE Over for All Ebooks ................ accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • ACCESS that WEBSITE Over for All Ebooks (Unlimited) ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... DOWNLOAD FULL EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M }
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • ACCESS that WEBSITE Over for All Ebooks (Unlimited) ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... DOWNLOAD FULL EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M }
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • 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,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • 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,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Seja a primeira pessoa a gostar disto

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

  1. 1. テーマ1 enchant.js で ゲーム作り (3) 2015/05/12 苫小牧高専 ソフトウェアテクノロジー部
  2. 2. 今日やること • 前回のまとめ • インデントの話 • ラベルを表示しよう
  3. 3. 前回のまとめ
  4. 4. クマさん端っこで消える問題
  5. 5. クマさん端っこで消える問題 • bear.x が 320を超えた時、
 bear.xを0にリセットすれば良いのでは?
  6. 6. if文 if (条件) { 処理; }
  7. 7. bearのX座標が320を超えたら
 0にリセット 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); bear.addEventListener('enterframe', function() { this.x += 3; if (this.x > 320) { this.x = 0; } }); } core.start(); }
  8. 8. if文 if (this.x > 320) { this.x = 0; } ↓ this.x が 320を超えた時 ↑ this.x に 0 を設定する。
  9. 9. クマさん端っこで消える問題
 ☆解☆決☆
  10. 10. キャラクターの
 アニメーションを作ってみる 前回のテーマ(1)
  11. 11. main.js 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); bear.addEventListener('enterframe', function() { this.x += 3; this.frame = this.age % 3; if (this.x > 320) { this.x = 0; } }); } core.start(); } this.frame = this.age % 3;
  12. 12. クマが歩いた!
  13. 13. 画像のフレーム について
  14. 14. chara1.png
  15. 15. ゲーム画面
  16. 16. chara1.pngの
 一部分(フレーム)を切り抜いて表示している var bear = new Sprite(32, 32); // この画像は 32px で切り取ればOK
  17. 17. chara1.pngの
 一部分(フレーム)を切り抜いて表示している var bear = new Sprite(32, 50); // 切り抜くサイズを間違えると大変なことになるので注意
  18. 18. 「キャラクターを操作してみる」 前回のテーマ(2)
  19. 19. main.js ∼クマさんをコントロールする∼ // 省略
 
 bear.addEventListener('enterframe', function() { this.frame = this.age % 3; if (core.input.left) { this.x -= 3; } if (core.input.right) { this.x += 3; } if (core.input.up) { this.y -= 3; } if (core.input.down) { this.y += 3; } });
 // 省略
  20. 20. main.js ∼クマさんをコントロールする∼ • 「もし、キーボードの○○が押されたら、○○方向へ移動 する。」 • 「もし、∼なら、∼する。」は if文 • if (core.input.left) {
 this.x -= 3;
 } • 座標系に気をつけて!
 (X軸は右向きに正、Y軸は下向きに正)
  21. 21. インデント
  22. 22. どっちが見やすい? 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(); } インデントあり インデントなし
  23. 23. インデントとは • インデント = 字下げ • インデントを使って、
 入れ子になっている部分をわかりやすくするべし。 • インデントは、キーボードの[tab]キーで!
 (スペースキー連打はダメよ) • 自分と、他人(3日後の自分も他人!)が
 見やすいコードを書くよう心がけよう!
  24. 24. エディタの設定を
 いじってみよう • プログラマーを目指すなら、
 道具を自分仕様に改造しよう! • プログラマにとっての道具 → エディタ! • TeraPadのオートインデントを有効にしよう! • 自分のPCがある人は、
 ぜひTeraPad以外のエディタを使ってみよう!
 (最近だとSublimeTextがオススメ?)
  25. 25. 本題
  26. 26. ラベルを表示してみる
 ∼ストップウォッチを表示してみよう∼ 今日のテーマ(1)
  27. 27. 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(); }
  28. 28. ストップウォッチ的な
  29. 29. 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と同じ
  30. 30. label.on label.on('enterframe', function() { label.text = core.frame / core.fps; }); • たぶんaddEventListenerと同じ • label.text は labelに表示されるテキスト。
 そこに core.frame / core.fps を格納している。 • 現在のフレーム数をfpsで割れば秒数が出るよ!!
  31. 31. 課題1 1. カウントアップではなく、
 カウントダウンしてみよう! 2. ラベルを整数だけの表示にしよう!
 【ヒント】
   5 / 2;
   #=> 2.5 と表示される
 
   Math.floor(5 / 2);
   #=> 2 と表示される
  32. 32. 衝突判定をやってみる
 
 ∼いよいよゲームっぽくなってきたかも∼ 今日のテーマ(2)
  33. 33. 衝突判定とは? • キャラクターとキャラクターが
 衝突した事(イベント)を判定する処理。 • ゲームプログラミングには必須の処理!
  34. 34. まずは敵を作ろう 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; var enemy = new Sprite(32, 32); enemy.image = core.assets['chara1.png']; enemy.x = 280; enemy.y = 50; enemy.frame = 5; bear.addEventListener('enterframe', function() {      // 以下略 addChildするのも忘れずに! ← 敵は白いクマさん(フレーム番号5)にする
  35. 35. 衝突判定の処理を書こう     // 省略 if (core.input.down) { this.y += 3; } if (this.within(enemy, 15)) { label.text = 'HIT!'; } }); 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; });     // 以下略 ↑ 衝突したらlabel.text を HIT! にする
  36. 36. within if (this.within(enemy, 15)) { label.text = 'HIT!'; } • thisはbear • this.within(enemy, 15)
 thisの中心とenemyの中心が15px近づいたらHIT! • 数値を変えれば衝突判定を厳しくしたり、
 ゆるくしたりできる。
  37. 37. 課題2 1. 敵にアニメーションをつけよう! 2. 敵も動かしてみよう!
 【適当に動かす?】
  frameが進むごとにxやyを変えてみる?
 
 【鬼ごっこゲーム?】
  矢印キー以外を割り当てて、
  2人で対戦できるようにする?

×