MacでPhaser使ってゲーム作る話 #001 計画と素材の調達

# はじめに
GWに体調崩してどこにも行けないので、久しぶりにゲーム作ろうと思います。
ただ作るだけだとアレなので、いろいろ挑戦しようと思い、以下の制約を課しました。

1. 使った事無いライブラリを使う事
2. Macで遊べる事
3. 素材の作成にMacだけを使う事
    4. なるべくフリー素材を使わず調達する事
    5. wineとかをもちいてWindowsのツールを動かすのはギルティ
    6. Windowsで使っていたツールと比較してみる
    6. 素材のクオリティは考慮しない
4. 何かしらのオンライン要素を含む事

１と２について、今回はJavascriptのゲーム作成ライブラリであるところの、Phaserを使い、ブラウザゲームにする事にしました。
http://phaser.io

理由はenchant.jsに比べてTypescriptで書きやすかったからです。
Haxeでもやってみようかと思ったので、あとで同じゲームをHaxeに移植してみたいと思います。
殆ど調べてないですが、d.tsをHaxeの定義ファイルに変換できるみたいだし、１年半くらいActionScriptと戯れてたし、何とかなると予想。

# 何を作るか
初めて使う環境で何を作るか、といえば
**シューティングゲームかアルカノイド（ブロック崩し）**と相場が決まっています。
これは義務教育のような物です。初心者たるもの、いきなり上を目指しすぎると失敗します。
（別にマーリオみたいなゲームでもいいのですが、少し敷居が高いので）

今回は、横スクロールなシューティングゲームを作ります。そこについては一片の創意工夫も凝らしません。

# 素材を用意する
Windowsであればフリーのいいツールがいくらでもあるのですが、ぴゅあーなMac上で使えるツールを探すところからになります。

## 画像
pixenでポチポチ書きます。
https://github.com/Pixen/Pixen

僕が現役時代にWindowsで使っていたツールを１００点とすれば、７０点くらいでしょうか。減点ポイントとしては

1. １枚の画像からアニメーションを作れない（複数の画像を１枚にするのは多分楽にできる）
2. 矩形選択 -> コピー -> ペーストすると、全く同じ位置に新しいレイヤーとしてコピーされる
    3. アクティブレイヤーにコピーもあるが、コピーもとと全く同じ位置にコピーされる
4. 直線と曲線と四角形以外の図形が書けない（○とか）
5. 文字入力が無い

2と4と5あたりは結構辛い印象。
特に2は僕的にかなり直感的とは言いがたい操作で、たとえば、32pix離れた場所に画像をコピーしたい場合、矩形選択してコピーした後、移動ツールに切り替えてコピー元の位置をずらしたあと、ペーストを行う必要があるようです。
正直言って、wineかなんかで、自分で使い慣れたツールをWindowsから引っ張ってきた方が楽かと。

### おまけ：使いやすいドット絵エディタ
wine環境で動くか等は未チェックです。ぼくがちゅうがくせいだったころのツールです。
[点画師鳳雛３](http://park2.wakwak.com/~kuribo/download/shiyuan3.htm)
[DotPainterALFAR](http://dispell.net/alfar.html)

EDGEも大変便利なツールなので、使ってみてお好みで。

## 効果音
効果音に関しては、クオリティを要求するならフリー素材の力を借りる事になると思うのですが、今回は自作する事にします。
ガレージバンドでもなんとかなりそうですが、とくにこだわりが無ければBfxrがよさそうです。
http://www.bfxr.net

オンライン版があるのが少し評価高いです。
ある程度ジャンルを指定すると、ランダムな効果音が作成され、そこからパラメータを調整して音を作る訳ですが、生成した効果音の履歴が残っていて、いつでも戻れるのがツボを押さえていていいです。
波形選択やミキサも備えていて大変よろしいので、Windowsユーザーにもオススメできます。

## BGM
ガレージバンドが無難でいいでしょう。昔を思い出しつつぽちぽち打つのも一興かと。

こちらも腕に自信がなければフリー素材をお借りした方が仕上がりがよいです。昨今自動作曲も盛り上がっていますね。難を挙げるとすれば、macでMIDIを扱う敷居が少し高いので、素材はmp3なりoggなりで用意した方がよいです。

音楽に限った話ではないですが、フリー素材の利用規約は大抵の場合において、ギッハブに公開するような事は想定されていませんので、利用する場合は権利者の方々に相談した方がよいでしょう。
（ギッハブでの公開が、２次配布にあたるか微妙なため）

# 公開方法
jsとリソースだけで構成されてるので、本来ならそれこそ、dropboxとかでも事足りるのですが、思うところがあってnode + expressで公開します。何かしらのオンライン要素、をつけるためです。

# phaserを学ぶ
## ドキュメント片手にチュートリアルをみる
http://phaser.io/tutorials/making-your-first-phaser-game

Gameオブジェクトを作り、そこに、preload,updateなどの関数を叩き込んでいくようですね。
パッとみた感じ、Spriteに、ゲーム作成に必要な機能が片っ端から詰め込まれており、可読性の上昇にやや貢献していつつも、やや冗長でバカでかい印象を受けました。
（コンポーネント化された２０個近いクラスを継承しており、kill()メソッドや時限消滅機能、物理演算、あたり判定にカメラ関係のメソッドまで生えてる）
**ワシはただ画像を出したいだけなんじゃ！**という場合には、Imageオブジェクトを使うとよいみたいです。物理演算やあたり判定等一部の継承をやめた、軽めのオブジェクトとなっています。

> An Image is a light-weight object you can use to display anything that doesn't need physics or animation.

ってドキュメントにも書いてあるので間違いないでしょう。タイトルロゴとかに使ってね、とも書かれています。

## phaserのサンプルを読む
http://phaser.io/examples/v2/games/invaders
http://phaser.io/examples/v2/audio/sound-complete
http://phaser.io/examples/v2/audio/play-music

とりあえずこの辺を読みます。
シューティングゲームには、ループ、あたり判定、複数オブジェクトの管理、開始終了条件など、ゲームに必要な要素が殆ど含まれていて初学者によいと（僕は）思います。
あとは音周りを適宜読む。

# ひとまずまとめ
長くなりそうなのでphaserに関しては、別の記事にします。
ツールに慣れさえすれば、macでも以外と素材の用意は出来そうです。（個人的にpixenはちょっとむずがゆいですが）
先達の記事がありましたので、素材の調達に関してはこちらも参考になります。
[ゲーム開発環境をWindowsからMacへ移行するための代替ツール](http://qiita.com/2dgames_jp/items/c2604084a6c6b5551feb)