中学生・高校生向けに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/

1. IT講座
第３回
株式会社デイブレイク

2. 全講義内容について
1. IT基礎知識
自己紹介、webの世界について、ITの基礎知識について学ぶ。
2. ゲームを作るって？
ゲームを作るのに必要な知識を学ぶ。プログラミングの基本的な考え方を学ぶ。
3. ゲームを作ってみよう！／基礎編
簡単なゲームを作ってみる。
Javascript ライブラリのphina.js を使うことを考えています。
4. ゲームを作ってみよう！／応用編
基礎編よりも難しい内容のゲームを作ってみる。
5. ゲームを作ってみよう！／実践編
自分たちでゲームを考えてみて実際に作ってみる。

3. Web ページにおけるプログラミング
HTML / CSS / JavaScript

4. Web ページ
構造 デザイン 動き

5. JavaScript
文字や画像など
ページにあるものを動かすことができる
プログラミング言語です
※ 他にも色々できます！

6. Phina.js を使って
ゲームを作ろう

7. Phina.js
って何？

8. jQuery React Angular JS Backbone.js Vue.js
Phina.jsenchant.js
JavaScript の ライブラリ
ライブラリ・・使いやすい複数のプログラムを一つにまとめたもの。
JS だけだと難しい記述も短く記述できたりする。
ゲームに強い。
Phina.js は2015年にリリースされた
比較的新しいライブラリ。
JavaScript の ライブラリ や フレームワーク

9. http://phinajs.com/
Phina.js 公式サイト

10. ファイルをダウンロードしてみよう
https://github.com/phinajs/phina.js
緑色のボタン「Clone or download」から
「Download ZIP」を押してダウンロード！

11. phina.js-develop を htdocs へ持っていって
http://localhost/phina.js-develop/examples/
へアクセス
ゲームをしてみよう！

12. 今後の講座で使う XAMPP(ザンプ) というソフトは
ネットワーク上でないと動かないプログラミング言語を
ローカル環境でも使用できるようにするもの。
サーバーを用意せずに作ったものを確認できます！

13. 解説
01_hello_phinajs.html
を見てみよう

14. Sublime Text 3 を開いて
phina.js-develop フォルダ を
Sublime に ドラッグ&ドロップ
すると見やすくなります

15. <meta charset='utf-8' />
→ 文字コードの宣言
<title>Hello, phina.js | phina.js</title>
→ ページのタイトル
<script src='../build/phina.js'></script>
→ phina.js の読み込み
<script>〜
</script>
→ 具体的なプログラミングの記述

16. /* 〇〇 */
// 〇〇
→ 記述が処理されないようにする
コメントアウトと言って、説明を書いたりする
phina.globalize();
→ phina.js を書くよ、という宣言
phina.define('MainScene', {
〜 });
→ メインシーンを定義
シーン？

17. シーンとは
表示される画面
phina.js にはデフォルトで簡単なシーンが用意されています
SplashScene
ゲーム起動時に表示されるシーンです。
TitleScene
タイトル画面です。デフォルトだとこの画面が表示されます。
MainScene
メインのゲームシーンです。
ResultScene
結果表示に使う画面です。
スコアなどをTweetボタンでツイートすることもできます。

18. init: function() {
〜 }
→ 関数（プログラムの部品）を定義
this.superInit();
→ デフォルトの記述を初期化
・・・少し飛ばして・・・

19. phina.main(function() {
〜 });
→ 定義したプログラムを呼び出す処理
var app = GameApp({
startLabel: ‘main’,
});
→ メインシーンから始める
app.enableStats();
→ fps（フレームレート） の表示
※動画において、単位時間あたりに処理させる
フレーム数（静止画像数、コマ数）。デフォルトは30。

20. app.run();
→ プログラムを実行させる処理

21. example フォルダをコピー
→ _origin に名前を変更 ※見返せるように
example フォルダで課題を一緒にこなしていこう！
課題をこなしていこう

22. 01_hello_phinajs.html
課題１
スプラッシュシーン（splash scene）を表示させよう。
課題２
タイトルシーン（title scene）を表示させよう。
課題３
リザルトシーン（result scene）を表示させよう。
課題４
fps の表示を消してみよう。

23. 01_hello_phinajs.html
課題５
真ん中の 文字 を自分の名前に変えてみよう。
課題６
背景の色 をオレンジ色（#ff8c00）に変えてみよう。
課題７
文字の色 を青色（#0000cd）に変えてみよう。
課題８
文字の 場所 を動かしてみよう。

24. 01_hello_phinajs.html
Phina.js に用意されているGrid システム
縦・横 それぞれ
16のグリッドにわけられている
span()
左上からの位置
center()
中央からの位置

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. 参考サイト
■ [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