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.

第4回 IT講座 ゲームを作ってみよう! 応用編

135 views

Published on

中学生・高校生向けにIT講座を開いてきました。
第4回目はPhina.js についての補足と、ゲームを作るために基本的な課題をこなしていきます。

■ 第1回 IT講座 IT基礎知識
https://www.slideshare.net/s-komori/1-it-it-82954806

■ 第2回 IT講座 ゲームを作るって?
https://www.slideshare.net/s-komori/2-it-83019937

■ 第3回 IT講座 ゲームを作ってみよう! 基礎編
https://www.slideshare.net/s-komori/3-it-82957912

■ 第4回 IT講座 ゲームを作ってみよう! 応用編
https://www.slideshare.net/s-komori/4-it-82958211

■ 第5回 IT講座 ゲームを作ってみよう! 実践編
https://www.slideshare.net/s-komori/5-it-82958449

【連絡先】
小森俊哉/Shunya Komori
株式会社デイブレイク Webディレクター
http://www.day-b.jp/

Published in: Education
  • Be the first to comment

  • Be the first to like this

第4回 IT講座 ゲームを作ってみよう! 応用編

  1. 1. IT講座 第4回 株式会社デイブレイク
  2. 2. 全講義内容について 1. IT基礎知識 自己紹介、webの世界について、ITの基礎知識について学ぶ。 2. ゲームを作るって? ゲームを作るのに必要な知識を学ぶ。プログラミングの基本的な考え方を学ぶ。 3. ゲームを作ってみよう!/基礎編 簡単なゲームを作ってみる。 Javascript ライブラリのphina.js を使うことを考えています。 4. ゲームを作ってみよう!/応用編 基礎編よりも難しい内容のゲームを作ってみる。 5. ゲームを作ってみよう!/実践編 自分たちでゲームを考えてみて実際に作ってみる。
  3. 3. Phina.js について もう少し詳しく
  4. 4. → Phina.js を使うときは Chrome, Safari, Firefox などのブラウザを推奨 ブラウザ 動作保障 Chrome, Safari, Firefox 動作未保障 IE, IE Edge
  5. 5. → 英語で書かれています。 ・・わかりにくいので次がおすすめ。 公式ドキュメント
  6. 6. https://qiita.com/advent-calendar/2015/phinajs https://qiita.com/advent-calendar/2016/phinajs 2017年版も年末に出るハズ ドキュメント Advent Calendar → チュートリアル記事があります。
  7. 7. 気鋭の新JSゲームライブラリ「phina.js」 の概要を自分なりにまとめてみた https://qiita.com/emadurandal/items/ac6d7a74a9b5521018d5 ↑に詳しく載っています。
  8. 8. 解説 05_walk_tomapiko.html を見てみよう
  9. 9. 解説 計算 について
  10. 10. プログラミングの考え方 var x = 10; x = x + 5; → X の値は?
  11. 11. プログラミングの考え方 var x = 10; // var は変数を定義する宣言 x = x + 5; // xは右のもので新しく定義されます → X の値は? 正解は 15
  12. 12. 解説 背景 の表示
  13. 13. var ASSETS = { image: { bg: “http://jsrun・・・5YD.png”, }, }; ・・・ this.bg = Sprite(“bg”).addChildTo(this); ・・・ phina.main(function() { var app = GameApp({ assets: ASSETS, }); app.run(); });
  14. 14. 解説 トマピコ の表示
  15. 15. var ASSETS = { image: { tomapiko: ‘http://cdn.・・・tomapiko_ss.png', }, }; ・・・ this.player = Sprite('tomapiko', 64, 64).addChildTo(this); ・・・ phina.main(function() { var app = GameApp({ assets: ASSETS, }); app.run(); });
  16. 16. 解説 画面 の設定
  17. 17. var SCREEN_WIDTH = 465; var SCREEN_HEIGHT = 465; ・・・ phina.main(function() { var app = GameApp({ ・・・ width: SCREEN_WIDTH, height: SCREEN_HEIGHT, }); ・・・ app.run(); });
  18. 18. 解説 トマピコの歩く速さ の設定
  19. 19. var SPEED = 4; ・・・ this.player.x += SPEED; ・・・ this.player.x -= SPEED;
  20. 20. 解説 05_walk_tomapiko.html で課題をこなしていこう
  21. 21. 05_walk_tomapiko.html 基本編 課題1 背景画像を変えてみよう。 (phina.js-develop/assets/images/flappy/background.png) 課題2 キャラクター画像を変えてみよう。 (phina.js-develop/assets/images/character/mikapiyo.png) 課題3 スクリーン幅と高さを変えてみよう。 (背景画像の大きさ960px × 640px に合わせてみよう) 課題4 移動の速さを変えてみよう。
  22. 22. 05_walk_tomapiko.html 基本編 課題5 キャラクター画像のサイズを変えてみよう。 (2倍の128px × 128px がオススメ、確認したら元に戻そう) 課題6 キャラクター画像の位置を変えてみよう。 (真ん中にするには、背景画像サイズの半分がオススメ) 課題7 キャラクターの初期表示の画像を変えてみよう。 (2箇所書き換えるところがあるよ) 課題8 diffの値を見てみよう。 ※console.logの使い方
  23. 23. 05_walk_tomapiko.html 基本編 課題9 this.player.x をコメントアウトしてみよう。 ※コメントアウトの使い方 (確認したら元に戻そう) 課題10 キャラクターの向きを進行方向と合わせよう。 課題11 キャラクターの動作をゆっくりにしてみよう。 課題12 歩いてる画像を飛ぶ画像にしてみよう。
  24. 24. 解説 パス について
  25. 25. 他のファイルを参照したい。 <script src=’???'></script> 絶対パス 絶対的な位置の指定 file:///Applications/MAMP/htdocs/phina.js-develop/build/phina.js 例)京都府京都市北区金閣寺町1 相対パス 自分の位置から見た相対的な場所を指定 ../build/phina.js 例)ここから西南西380kmにある金閣寺
  26. 26. 解説 スプライト画像 について
  27. 27. スプライト画像とは 複数の画像を一つにまとめて、一部分を表示させる画像。 画像をまとめることでページが速く読み込める。 元画像 実際の表示 一部分だけ表示させている
  28. 28. スプライト画像とは 0 6 12 1 7 13 2 8 14 3 9 15 4 10 16 5 11 17 一コマの大きさを指定したら 左上から順番に番号が振られます
  29. 29. 解説 デバッグ について
  30. 30. デバッグとは ・・・プログラムのバグを見つけて手直しすること。 var x, y, z; x = 100; y = 300; z = x + y; z の値が知りたい! console.log(); ※jsの場合 console.log(‘コンソールを出すよ’); console.log(z);
  31. 31. ここに出て来ます
  32. 32. 参考サイト ■ phina.js 公式サイト http://phinajs.com/ ■ phina.js github https://github.com/phinajs/phina.js ■ phina.js Advent Calendar 2015 https://qiita.com/advent-calendar/2015/phinajs ■ phina.js Tips集 https://qiita.com/alkn203/items/bca3222f6b409382fe20 ■ 気鋭の新JSゲームライブラリ「phina.js」の概要を自分なりにまとめてみた https://qiita.com/emadurandal/items/ac6d7a74a9b5521018d5 ■ phina.jsの簡単さから基礎知識まで https://qiita.com/axion014/items/1094487f88cc056da1f2
  33. 33. 参考サイト ■ [phina.js-Tips] デフォルトで用意されてるSceneについて知る https://qiita.com/alkn203/items/c8ad8ad6c2a21fb3b0f7 ■ [phina.js-Tips-44] ゲームのfpsを変えてみる https://qiita.com/alkn203/items/ffd7c59498cdc932f323 ■ 【phina.js】Gridクラスを使いこなそう https://qiita.com/alkn203/items/d176a10d4e38d15e4062 ■ はじめてのphina.js – JavaScriptゲームライブラリを使ってみた! https://liginc.co.jp/306739

×