はじめに
GWに体調崩してどこにも行けないので、久しぶりにゲーム作ろうと思います。
ただ作るだけだとアレなので、いろいろ挑戦しようと思い、以下の制約を課しました。
- 使った事無いライブラリを使う事
- Macで遊べる事
- 素材の作成にMacだけを使う事
4. なるべくフリー素材を使わず調達する事
5. wineとかをもちいてWindowsのツールを動かすのはギルティ
6. Windowsで使っていたツールと比較してみる
6. 素材のクオリティは考慮しない - 何かしらのオンライン要素を含む事
１と２について、今回はJavascriptのゲーム作成ライブラリであるところの、Phaserを使い、ブラウザゲームにする事にしました。
http://phaser.io
理由はenchant.jsに比べてTypescriptで書きやすかったからです。
Haxeでもやってみようかと思ったので、あとで同じゲームをHaxeに移植してみたいと思います。
殆ど調べてないですが、d.tsをHaxeの定義ファイルに変換できるみたいだし、１年半くらいActionScriptと戯れてたし、何とかなると予想。
何を作るか
初めて使う環境で何を作るか、といえば
**シューティングゲームかアルカノイド（ブロック崩し）**と相場が決まっています。
これは義務教育のような物です。初心者たるもの、いきなり上を目指しすぎると失敗します。
（別にマーリオみたいなゲームでもいいのですが、少し敷居が高いので）
今回は、横スクロールなシューティングゲームを作ります。そこについては一片の創意工夫も凝らしません。
素材を用意する
Windowsであればフリーのいいツールがいくらでもあるのですが、ぴゅあーなMac上で使えるツールを探すところからになります。
画像
pixenでポチポチ書きます。
https://github.com/Pixen/Pixen
僕が現役時代にWindowsで使っていたツールを１００点とすれば、７０点くらいでしょうか。減点ポイントとしては
- １枚の画像からアニメーションを作れない（複数の画像を１枚にするのは多分楽にできる）
- 矩形選択 -> コピー -> ペーストすると、全く同じ位置に新しいレイヤーとしてコピーされる
3. アクティブレイヤーにコピーもあるが、コピーもとと全く同じ位置にコピーされる - 直線と曲線と四角形以外の図形が書けない（○とか）
- 文字入力が無い
2と4と5あたりは結構辛い印象。
特に2は僕的にかなり直感的とは言いがたい操作で、たとえば、32pix離れた場所に画像をコピーしたい場合、矩形選択してコピーした後、移動ツールに切り替えてコピー元の位置をずらしたあと、ペーストを行う必要があるようです。
正直言って、wineかなんかで、自分で使い慣れたツールをWindowsから引っ張ってきた方が楽かと。
おまけ：使いやすいドット絵エディタ
wine環境で動くか等は未チェックです。ぼくがちゅうがくせいだったころのツールです。
点画師鳳雛３
DotPainterALFAR
EDGEも大変便利なツールなので、使ってみてお好みで。
効果音
効果音に関しては、クオリティを要求するならフリー素材の力を借りる事になると思うのですが、今回は自作する事にします。
ガレージバンドでもなんとかなりそうですが、とくにこだわりが無ければBfxrがよさそうです。
http://www.bfxr.net
オンライン版があるのが少し評価高いです。
ある程度ジャンルを指定すると、ランダムな効果音が作成され、そこからパラメータを調整して音を作る訳ですが、生成した効果音の履歴が残っていて、いつでも戻れるのがツボを押さえていていいです。
波形選択やミキサも備えていて大変よろしいので、Windowsユーザーにもオススメできます。
BGM
ガレージバンドが無難でいいでしょう。昔を思い出しつつぽちぽち打つのも一興かと。
こちらも腕に自信がなければフリー素材をお借りした方が仕上がりがよいです。昨今自動作曲も盛り上がっていますね。難を挙げるとすれば、macでMIDIを扱う敷居が少し高いので、素材はmp3なりoggなりで用意した方がよいです。
音楽に限った話ではないですが、フリー素材の利用規約は大抵の場合において、ギッハブに公開するような事は想定されていませんので、利用する場合は権利者の方々に相談した方がよいでしょう。
（ギッハブでの公開が、２次配布にあたるか微妙なため）
公開方法
jsとリソースだけで構成されてるので、本来ならそれこそ、dropboxとかでも事足りるのですが、思うところがあってnode + expressで公開します。何かしらのオンライン要素、をつけるためです。
phaserを学ぶ
ドキュメント片手にチュートリアルをみる
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へ移行するための代替ツール