行き当たりばったりゲーム制作

~~仕切り直して~~
「誰かに教える体で学ぶと覚える」の理念のもとに
行き当たりばったりゲーム作成講座、開☆幕！

というわけで前回は不本意な形で終わっちゃったけど
今回はでゲームを作ることにするよ

JavaScriptか
ActionScriptの親みたいなやつと紹介されたものだな

そうそう
多分JavaScriptならサポート切れなんか起こさないし
作者のやる気切れ以外なら打ち切りになる心配はほぼないよ

そのやる気切れがなのは置いといて、
とりあえずプログラミングできる環境を整えよう

JavaScriptってブラウザとテキストエディタだけでいいんじゃないのか？

いや、たしかにそうだけど
今回はphina.jsっていうフレームワークを使うことにするよ
URL：phina.js
ゲームを作るのに必要な関数がたくさん詰まってるやつって思ってもらえればいいかも

たとえば、衝突判定したい！ってなったとき
何もない状態からだと縦の長さがどうとかこうとか、そういうプログラムを自分で組まないといけないけど
phina.jsの方には予めそういう関数が用意されてあるからそれを使えばいいっていう感じになってるよ

んー、phina.jsを使えば面倒な処理をしなくていいってことか？

まあ、そういうことになるね
習うより慣れろだし、とりあえず雛形だけでも作ろう
適当なフォルダにhtmlファイルとjsファイルを作ってね

こんなかんじか

それで、htmlにはこれをコピペする

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<meta http-equiv="Content-Script-Type" content="text/javascript">

	<title>sample01</title>
	<!-- phina.js を読み込む -->
	<script src='http://cdn.rawgit.com/phi-jp/phina.js/v0.2.3/build/phina.js'></script>

	<!-- メイン処理 -->
	<script src='main.js'></script>
</head>

<body>
	<canvas id="sample01">
		canvas非対応
	</canvas>
	テスト
</body>
</html>

ここで重要なのは以下の3つの要素

<script src='http://cdn.rawgit.com/phi-jp/phina.js/v0.2.3/build/phina.js'></script>
<script src='main.js'></script>

～中略～

<canvas id="sample01">

一番上はphina.jsを使いますよ～っていうもの
例えば上で書いた衝突判定用の関数がこれで使えるようになるよ
二番目はおんなじフォルダにあるやつを指定してあるね
ここにソースコードを書いてくよ

で、三番目

canvasタグ？で追加されたやつだよな
正直あんまり良くわからんが……

canvasタグっていうのは
JavaScriptという筆で図形とかを描くためのその名の通りキャンバスだね

じゃあ、丸を描くようなコードを書けばcanvasの部分に丸が描かれるのか

そういうこと
これをゲームにするには1秒に60回画面を更新して
さも動いてるように見せないといけないんだけど……

メンドーだな

そんなこともあろうかと！
phina.jsがそのへんの処理をすべて代わりにやってくれてるんだな、それが！

ああ、そういうのはやってくれるのか

便利な世の中になったね……
あ、ちなみにタグの中にある「canvas非対応」っていうのは
canvasタグに非対応のブラウザだけに表示されるやつだからあんまり関係ないよ
で、次はいよいよ本命のjsの方なんだけど、これをmain.jsに丸コピしてね

// phina.js をグローバル領域に展開
phina.globalize();

// MainScene クラスを定義
phina.define('MainScene', {
	superClass: 'CanvasScene',
	init: function() {
		// 親クラス初期化
		this.superInit({
			// 画面サイズ
			width: 400,
			height: 300,
		});
		// 背景色を指定
		this.backgroundColor = '#444';
		// ラベルを生成
		this.label = Label('Hello, phina.js!').addChildTo(this);
		this.label.x = this.gridX.center(); // x 座標
		this.label.y = this.gridY.center(); // y 座標
		this.label.fill = 'white'; // 塗りつぶし色
	},
});

// メイン処理
phina.main(function() {
	// アプリケーション生成
	var app = GameApp({
		startLabel: 'main', // メインシーンから開始する
		fit: false, // フィットさせない
		query: '#sample01', // キャンバスのIDを指定 CSSのように#をつけな（アカン）
		width: 400, //縦のサイズ
		height: 300, //横のサイズ
	});
	// アプリケーション実行
	app.run();
});

phina.jsのホームページに乗ってるソースをちょこっと改造したやつなんだけど
参考：phina.js Tips集
その他ゲーム作成に関するTips　辺り

うーん、よくわからんな

あはは……
JavaScriptある程度知ってる人は大丈夫だと思うけど
何も知らないっていう人はどういうことなの……っていう状態かもね
何はともあれ両方のファイルを保存してhtmlをブラウザで開けば下のようになると思うよ

灰色の背景に白文字で「Hello, phina.js!」って表示されたな

javascriptの解説についてはコメントに書いてあるとおり
細かいことはまあ置いといて、
phina.define(～～～);の中でやってるのが「Hello, phina.js!」っていうを書くための処理
正確には「シーン」っていうのも作ってるけど、このシーンについてはまたちょっとあとでね
phina.main(～～～);の中でやってるのがhtmlにどんな感じで表示するの？っていう設定をしている感じだね

画像サイズが二箇所に書かれてあるのはなんでだ？

それは、下の方は枠組みで、上の方は「シーン」のサイズだからだね
紙芝居で例えると下のは木の枠組みで上のは紙一枚ってかんじ

よくわからないっていう人は作者の説明なんか見るより
自分でサイズを消して試したほうがわかりやすいと思うよ
デフォルトでは縦960、横640が設定されるから下のような感じになると思う

上の方のサイズを消す：Hello, phina.jsの文字がない
　＝シーンの大きさが960×640なので文字列は右下の方にあり、隠れていて見えない
下の方のサイズを消す：一見通常通り
　＝枠組みが960×640なのでhtmlに書いた「テスト」の文字が下の方に移動してしまっている
両方のサイズを消す：デフォルトの960×640で表示される

若干めんどくさいところだな

シーンの大きさをキャンバスいっぱいにしない状況を想定してるのかな？
正直phina.jsを触って日が浅いからよくわかんないんだよね……

日が浅いって大丈夫なのかよ

だからこそ行きあたりばったりなんだし
ともかく、今回はちゃんとphina.jsが動くかどうかの確認をしたから、
次回からはどんどんゲームっぽいことをやってくよ
それじゃ、まったね～

小休止

あ、そうそう（黒バラ風に）

今回もやるのか……

今回なんで作者がphina.jsを選んだかというとね……

なんだ？
取り付きやすいとか、日本人が作ったから不明な点が質問がしやすいとか？

キャラが可愛いから！！！！

……いいのかそれで

あー、言い方悪いけどとりあえず何でも良かったんだよね
enchant.jsとかいろいろあるなか、どれにしようかしら？とか悩んでいるより
何でもいいから何かに取り掛かったほうがいいしね

そうだな
javascriptの文法学んどけば他にも応用できるし

みんなもなにか迷ってるものがあったりしたら、思い切ってやってみるのも
それじゃまたね～