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

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

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

3. Phina.js について
もう少し詳しく

4. → Phina.js を使うときは Chrome, Safari, Firefox
などのブラウザを推奨
ブラウザ
動作保障 Chrome, Safari, Firefox
動作未保障 IE, IE Edge

5. → 英語で書かれています。
・・わかりにくいので次がおすすめ。
公式ドキュメント

6. https://qiita.com/advent-calendar/2015/phinajs
https://qiita.com/advent-calendar/2016/phinajs 2017年版も年末に出るハズ
ドキュメント Advent Calendar
→ チュートリアル記事があります。

7. 気鋭の新JSゲームライブラリ「phina.js」
の概要を自分なりにまとめてみた
https://qiita.com/emadurandal/items/ac6d7a74a9b5521018d5
↑に詳しく載っています。

8. 解説
05_walk_tomapiko.html
を見てみよう

9. 解説
計算 について

10. プログラミングの考え方
var x = 10;
x = x + 5;
→ X の値は？

11. プログラミングの考え方
var x = 10; // var は変数を定義する宣言
x = x + 5; // xは右のもので新しく定義されます
→ X の値は？
正解は 15

12. 解説
背景 の表示

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. 解説
トマピコ の表示

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. 解説
画面 の設定

17. var SCREEN_WIDTH = 465;
var SCREEN_HEIGHT = 465;
・・・
phina.main(function() {
var app = GameApp({
・・・
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT,
});
・・・
app.run();
});

18. 解説
トマピコの歩く速さ の設定

19. var SPEED = 4;
・・・
this.player.x += SPEED;
・・・
this.player.x -= SPEED;

20. 解説
05_walk_tomapiko.html
で課題をこなしていこう

21. 05_walk_tomapiko.html 基本編
課題１
背景画像を変えてみよう。
（phina.js-develop/assets/images/flappy/background.png）
課題２
キャラクター画像を変えてみよう。
（phina.js-develop/assets/images/character/mikapiyo.png）
課題３
スクリーン幅と高さを変えてみよう。
(背景画像の大きさ960px × 640px に合わせてみよう）
課題４
移動の速さを変えてみよう。

22. 05_walk_tomapiko.html 基本編
課題５
キャラクター画像のサイズを変えてみよう。
（2倍の128px × 128px がオススメ、確認したら元に戻そう）
課題６
キャラクター画像の位置を変えてみよう。
(真ん中にするには、背景画像サイズの半分がオススメ)
課題７
キャラクターの初期表示の画像を変えてみよう。
（２箇所書き換えるところがあるよ）
課題８
diffの値を見てみよう。
※console.logの使い方

23. 05_walk_tomapiko.html 基本編
課題９
this.player.x をコメントアウトしてみよう。
※コメントアウトの使い方
（確認したら元に戻そう）
課題10
キャラクターの向きを進行方向と合わせよう。
課題11
キャラクターの動作をゆっくりにしてみよう。
課題12
歩いてる画像を飛ぶ画像にしてみよう。

24. 解説
パス について

25. 他のファイルを参照したい。
<script src=’???'></script>
絶対パス
絶対的な位置の指定
file:///Applications/MAMP/htdocs/phina.js-develop/build/phina.js
例）京都府京都市北区金閣寺町１
相対パス
自分の位置から見た相対的な場所を指定
../build/phina.js
例）ここから西南西380kmにある金閣寺

26. 解説
スプライト画像 について

27. スプライト画像とは
複数の画像を一つにまとめて、一部分を表示させる画像。
画像をまとめることでページが速く読み込める。
元画像
実際の表示
一部分だけ表示させている

28. スプライト画像とは
０
６
12
１
７
13
２
８
14
３
９
15
４
10
16
５
11
17
一コマの大きさを指定したら
左上から順番に番号が振られます

29. 解説
デバッグ について

30. デバッグとは
・・・プログラムのバグを見つけて手直しすること。
var x, y, z;
x = 100;
y = 300;
z = x + y;
z の値が知りたい！
console.log(); ※jsの場合
console.log(‘コンソールを出すよ’);
console.log(z);

31. ここに出て来ます

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