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.

第5回 IT講座 ゲームを作ってみよう! 実践編

365 views

Published on

中学生・高校生向けにIT講座を開いてきました。
第5回目はスプライト画像に関して補足と、もう少し応用的な内容の学習です。

■ 第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

第5回 IT講座 ゲームを作ってみよう! 実践編

  1. 1. IT講座 第5回 株式会社デイブレイク
  2. 2. 全講義内容について 1. IT基礎知識 自己紹介、webの世界について、ITの基礎知識について学ぶ。 2. ゲームを作るって? ゲームを作るのに必要な知識を学ぶ。プログラミングの基本的な考え方を学ぶ。 3. ゲームを作ってみよう!/基礎編 簡単なゲームを作ってみる。 Javascript ライブラリのphina.js を使うことを考えています。 4. ゲームを作ってみよう!/応用編 基礎編よりも難しい内容のゲームを作ってみる。 5. ゲームを作ってみよう!/実践編 自分たちでゲームを考えてみて実際に作ってみる。
  3. 3. 解説 05_walk_tomapiko.html で課題をこなしていこう
  4. 4. 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 移動の速さを変えてみよう。
  5. 5. 05_walk_tomapiko.html 基本編 課題5 キャラクター画像のサイズを変えてみよう。 (2倍の128px × 128px がオススメ、確認したら元に戻そう) 課題6 キャラクター画像の位置を変えてみよう。 (真ん中にするには、背景画像サイズの半分がオススメ) 課題7 キャラクターの初期表示の画像を変えてみよう。 (2箇所書き換えるところがあるよ) 課題8 diffの値を見てみよう。 ※console.logの使い方
  6. 6. 05_walk_tomapiko.html 基本編 課題9 this.player.x をコメントアウトしてみよう。 ※コメントアウトの使い方 (確認したら元に戻そう) 課題10 キャラクターの向きを進行方向と合わせよう。 課題11 キャラクターの動作をゆっくりにしてみよう。 課題12 歩いてる画像を飛ぶ画像にしてみよう。
  7. 7. 解説 スプライト画像 について
  8. 8. スプライト画像とは 2倍の大きさにするには × 画像の表示範囲が変わるだけ this.player = Sprite('tomapiko', 128, 128).addChildTo(this); ◯ 画像を拡大する this.player = Sprite('tomapiko', 128, 128).addChildTo(this).setScale(2.0, 2.0); ・・・ this.player.scaleX = -2; ・・・ this.player.scaleX = 2; ※ 画像が荒くなるのを防ぐには画像の方を直す必要有
  9. 9. 解説 05_walk_tomapiko.html で課題をこなしていこう
  10. 10. 05_walk_tomapiko.html 応用編 Lig のページを参考にしてみよう はじめてのphina.js – JavaScriptゲームライブラリを使ってみた! https://liginc.co.jp/306739 課題1 図形を表示させてみよう 課題2 図形を動かしてみよう 課題3 動きの範囲を指定しよう 課題4 当たり判定をつけてみよう
  11. 11. 05_walk_tomapiko.html 応用編 Qiita のページを参考にしてみよう [phina.js-Tips] Physicalクラスを使って オブジェクトに落下運動をさせる https://qiita.com/alkn203/items/4055cdb69567b883b1ba サンプルゲーム flappy.html を参考にしてみよう phina.js-develop/examples/flappy.html 課題5 キャラクターが自然に落下するようにしてみよう 課題6 飛ぶ動作をつけてみよう
  12. 12. 05_walk_tomapiko.html 応用編 Qiita のページを参考にしてみよう [phina.js-Tips] 任意のタイミングからゲームの経過秒数をカウントする https://qiita.com/alkn203/items/1358bf9058d7d61b72a3 サンプルゲーム typing.html を参考にしてみよう phina.js-develop/examples/typing.html 課題7 スコアをつけてみよう
  13. 13. 解説 飛ぶアニメーション について
  14. 14. // プレイヤークラス phina.define('Player', { superClass: 'Sprite', init: function(index) { this.superInit('tomapiko'); // スプライトシートの読み込み this.anim = FrameAnimation('character').attachTo(this); // スプライトシート内、飛ぶ動作を指定 this.anim.gotoAndPlay('fly'); // 自動で動く動作を指定 // この場合はゆっくり下に落ちていく挙動 // -をつけると反対に動く this.physical.gravity.set(0, 0.5); }, fly: function() { // Physicalクラスを適用して移動 this.physical.force(0, -8); }, });
  15. 15. // 飛ぶ動作にあたり変更、プレイヤークラスを作成、読み込み this.player = Player().addChildTo(this); ・・・ // タッチしたら飛ぶ動作 this.onpointstart = function() { this.player.fly(); };
  16. 16. 参考サイト ■ 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
  17. 17. 参考サイト ■ [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 ■ [phina.js-Tips] Physicalクラスを使ってオブジェクトに落下運動をさせる https://qiita.com/alkn203/items/4055cdb69567b883b1ba ■ [phina.js-Tips] 任意のタイミングからゲームの経過秒数をカウントする https://qiita.com/alkn203/items/1358bf9058d7d61b72a3
  18. 18. 最後までお疲れ様でした!

×