phaserを使ってクソゲー作った
2017-02-15 / Game制作, Go, TypeScript
この前、社内の LT 交流会があったので、その発表用にちょっとしたゲームを作ってみた。
iPhone とパソコンで連携するウェブゲーム
プレーヤーは iPhone をライトセーバーのようなものとして扱う。
iPhone を左右に振ると、パソコン上のライトセーバーのようなものが同期して左右に揺れる。
パソコン上では次々と敵と思わしきものが上から落ちてくるので、ライトセーバーのようなものを接触させて、消滅させる。
そんなゲーム。面白さはあまりない。
動機
最初は force という salesforce のデータを扱える CLI のツールについて紹介しようと思っていた。
ForceCLI/force: A command-line interface to force.com
でも途中でたまにはいつもと違うことをやってみようと思い、ゲームを作ってみることにした。
phaser とは
Phaser - A fast, fun and free open source HTML5 game framework
ゲームエンジンであってるかな。ブラウザでゲームを作るためのライブラリで、色々とできるっぽい。
- ゲーム内のオブジェクト管理
- 音声
- 画像
- 当たり判定
- イベント管理
本格的なゲームを作った経験はないが、flash とかで簡単なものは作ったことがあって、思いの外苦労はしなかった。
それに、オブジェクトが当たった時の跳ね返りとか勝手にやってくれるので、かなりラクができた。
Typescript の定義ファイルもあったので、コーディングもあまり苦労しなかった。
iPhone とパソコンの同期
websocket を使った。サーバは Go で構築した。
- iPhone からの接続とパソコンからの接続を管理
- iPhone からのデータをパソコンに転送する
というやつを作った。
iPhone では、
- 端末の角度を取得、計算して送信
- 加速度を取得して、音量調整
を行なった。ライトセーバーっぽさを演出するために、強く振るとブーンの音が大きくなるようにした(が LT の時には聞こえなかったっぽい)。
パソコンでは、送信されてきた角度に合わせて、画面上のライトセーバーを傾けるようにした。
ゲームとしてのクオリティ
もともとすごいゲームを作ろうってわけでもなかったので、完成度の低さは気にしていないが、
素材が大事
ということが勉強になった。
発表の 3 週間くらい前からやり始めたが、websocket で通信し合うとか、ゲーム内の当たり判定とか、そういうのはライブラリなどのおかげでほとんど苦労はしなかった。
画像や音声の素材探しと調整のための加工が大変だった。正解が良く分からないし、無限に時間が吸われていく感じがした。
何でも作ると面白い
専門で仕事にしようとはあまり思わないが、自分でゲームを作るのも面白かった。
iPhone とパソコンの画面が繋がった時にはやっぱり「おぉーー!すごいすごい!」ってなるし、こういう風に動くかな〜と思って実装したものが期待通りに動く楽しさや嬉しさがある。
良い経験になった。