TypeScript
express4
Phaser

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

More than 1 year has passed since last update.

はじめに

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

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

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

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

何を作るか

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

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

素材を用意する

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

画像

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

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

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

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

おまけ:使いやすいドット絵エディタ

wine環境で動くか等は未チェックです。ぼくがちゅうがくせいだったころのツールです。
点画師鳳雛3
DotPainterALFAR

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

効果音

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

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

BGM

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

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

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

公開方法

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

phaserを学ぶ

ドキュメント片手にチュートリアルをみる

http://phaser.io/tutorials/making-your-first-phaser-game

Gameオブジェクトを作り、そこに、preload,updateなどの関数を叩き込んでいくようですね。
パッとみた感じ、Spriteに、ゲーム作成に必要な機能が片っ端から詰め込まれており、可読性の上昇にやや貢献していつつも、やや冗長でバカでかい印象を受けました。
(コンポーネント化された20個近いクラスを継承しており、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へ移行するための代替ツール