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.

第3回 IT講座 ゲームを作ってみよう! 基礎編

408 views

Published on

中学生・高校生向けにIT講座を開いてきました。
第3回目はJavascript ライブラリの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

第3回 IT講座 ゲームを作ってみよう! 基礎編

  1. 1. IT講座 第3回 株式会社デイブレイク
  2. 2. 全講義内容について 1. IT基礎知識 自己紹介、webの世界について、ITの基礎知識について学ぶ。 2. ゲームを作るって? ゲームを作るのに必要な知識を学ぶ。プログラミングの基本的な考え方を学ぶ。 3. ゲームを作ってみよう!/基礎編 簡単なゲームを作ってみる。 Javascript ライブラリのphina.js を使うことを考えています。 4. ゲームを作ってみよう!/応用編 基礎編よりも難しい内容のゲームを作ってみる。 5. ゲームを作ってみよう!/実践編 自分たちでゲームを考えてみて実際に作ってみる。
  3. 3. Web ページにおけるプログラミング HTML / CSS / JavaScript
  4. 4. Web ページ 構造 デザイン 動き
  5. 5. JavaScript 文字や画像など ページにあるものを動かすことができる プログラミング言語です ※ 他にも色々できます!
  6. 6. Phina.js を使って ゲームを作ろう
  7. 7. Phina.js って何?
  8. 8. jQuery React Angular JS Backbone.js Vue.js Phina.jsenchant.js JavaScript の ライブラリ ライブラリ・・使いやすい複数のプログラムを一つにまとめたもの。 JS だけだと難しい記述も短く記述できたりする。 ゲームに強い。 Phina.js は2015年にリリースされた 比較的新しいライブラリ。 JavaScript の ライブラリ や フレームワーク
  9. 9. http://phinajs.com/ Phina.js 公式サイト
  10. 10. ファイルをダウンロードしてみよう https://github.com/phinajs/phina.js 緑色のボタン「Clone or download」から 「Download ZIP」を押してダウンロード!
  11. 11. phina.js-develop を htdocs へ持っていって http://localhost/phina.js-develop/examples/ へアクセス ゲームをしてみよう!
  12. 12. 今後の講座で使う XAMPP(ザンプ) というソフトは ネットワーク上でないと動かないプログラミング言語を ローカル環境でも使用できるようにするもの。 サーバーを用意せずに作ったものを確認できます!
  13. 13. 解説 01_hello_phinajs.html を見てみよう
  14. 14. Sublime Text 3 を開いて phina.js-develop フォルダ を Sublime に ドラッグ&ドロップ すると見やすくなります
  15. 15. <meta charset='utf-8' /> → 文字コードの宣言 <title>Hello, phina.js | phina.js</title> → ページのタイトル <script src='../build/phina.js'></script> → phina.js の読み込み <script>〜 </script> → 具体的なプログラミングの記述
  16. 16. /* 〇〇 */ // 〇〇 → 記述が処理されないようにする コメントアウトと言って、説明を書いたりする phina.globalize(); → phina.js を書くよ、という宣言 phina.define('MainScene', { 〜 }); → メインシーンを定義 シーン?
  17. 17. シーンとは 表示される画面 phina.js にはデフォルトで簡単なシーンが用意されています SplashScene ゲーム起動時に表示されるシーンです。 TitleScene タイトル画面です。デフォルトだとこの画面が表示されます。 MainScene メインのゲームシーンです。 ResultScene 結果表示に使う画面です。 スコアなどをTweetボタンでツイートすることもできます。
  18. 18. init: function() { 〜 } → 関数(プログラムの部品)を定義 this.superInit(); → デフォルトの記述を初期化 ・・・少し飛ばして・・・
  19. 19. phina.main(function() { 〜 }); → 定義したプログラムを呼び出す処理 var app = GameApp({ startLabel: ‘main’, }); → メインシーンから始める app.enableStats(); → fps(フレームレート) の表示 ※動画において、単位時間あたりに処理させる フレーム数(静止画像数、コマ数)。デフォルトは30。
  20. 20. app.run(); → プログラムを実行させる処理
  21. 21. example フォルダをコピー → _origin に名前を変更 ※見返せるように example フォルダで課題を一緒にこなしていこう! 課題をこなしていこう
  22. 22. 01_hello_phinajs.html 課題1 スプラッシュシーン(splash scene)を表示させよう。 課題2 タイトルシーン(title scene)を表示させよう。 課題3 リザルトシーン(result scene)を表示させよう。 課題4 fps の表示を消してみよう。
  23. 23. 01_hello_phinajs.html 課題5 真ん中の 文字 を自分の名前に変えてみよう。 課題6 背景の色 をオレンジ色(#ff8c00)に変えてみよう。 課題7 文字の色 を青色(#0000cd)に変えてみよう。 課題8 文字の 場所 を動かしてみよう。
  24. 24. 01_hello_phinajs.html Phina.js に用意されているGrid システム 縦・横 それぞれ 16のグリッドにわけられている span() 左上からの位置 center() 中央からの位置
  25. 25. 参考サイト ■ 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
  26. 26. 参考サイト ■ [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

×