※こちらは2018年に弊社ブログで掲載していた内容と同様の内容の記事になります。
月島ファクトリープログラマーのLeeです。
以前Facebook Instant Gameを開発したので、簡単にまとめます。
「Space Evaders」紹介
今回は開発した「Space Evaders」を紹介いたします。
左右にタップして落ちてくる隕石をよけてハイスコアを目指すゲームです。
隕石の数が増えればよけるのが難しい時がありますが、そういう時はバリアを活用して乗り切ることができるようになっています。
ゲーム自体はよくある避けゲーなのですが、難易度調整をシビアにしてあるのと、隕石どうしのあたり判定をつけることで予測しづらく、緊張感があって他と差別化できたんじゃないかと思っています。
50点で出現する巨大隕石が現れてからは、バリアをうまく活用しないと厳しくなりますので、だいたい70点あたりを目安に遊んでみてください。
フレームワークについて
Facebook Instant GameはHtml5での開発になるため、必然的にjsのフレームワークから選ぶ必要がありました。
Facebookでは対応しているフレームワーク一覧を掲載しているので、この中から気に入ったものを選ぶだけで特に問題ありませんでした。
今回は、「Phaser」という、２Dゲーム特化のフレームワークを選定しました。
理由としては、コミュニティーが調べた中では最も活発で（英語のみですが）今後もサポートが長続きしそうと判断したためです。
また、公式のサンプルも相当な数用意されていたびで開発が容易にできると考えました。
実際、開発においてフレームワークの問題でつまったところはほとんどありませんでした。
・シーン管理
game.state.add("scenename", scene.scenename);
scene.scenename = function () {};
scene.scenename.prototype = {
preload: function() {
},
create: function () {
},
update: function() {
},
}
game.start("scenename");
上記のテンプレートを追記していくだけでシーン管理を行うことができます。
基本関数として、下記３つを利用することができ、新規関数もここに追記していくだけで実装できます。
preload - 素材の読み込み
create - シーンのはじめに一度実行
update - 毎フレーム実行
・画面表示
デバイスの大きさに合わせてゲーム画面を表示したい場合、ゲーム初期化時に下記を実行することにより勝手に合わせてくれます。
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.stage.disableVisibilityChange = true;
ゲーム画面内でオブジェクトを適切に配置したい場合は、
game.world.centerX
game.world.centerY
ワールドの中央値を取得できるので、そこからどのあたりに表示するか設定することで異なる大きさの画面でも適切に配置することが可能となります。
苦労した点について
最も苦労したのはレベルデザインでした。
避けゲーは一歩間違うと退屈になるので、個人的には難易度高い方が面白いとおもうのですが、絶対に不可能な箇所ができてはまずいためその間をとる調整が大変でした。
隕石同士のあたり判定を実装したところ、予測不能な点は面白かったのですが、真横からのスマッシュがたまに発生して無理ゲーになることもあり...
結局、隕石同士のあたり判定は実装し、バリアでしのぐことのできる機能でバランスを取りました。
まとめ
実装に関して、やりたかったことがほとんど公式のサンプルの組み合わせと、少しのコミュニティの調査で済んだためコストもかからずうまくいったと感じています。
Phaserはコミュニティがほとんど英語なのが玉に瑕ですが、チュートリアルがしっかりしているため初めてのHTML５ゲーム開発にとても向いていると感じました。
一度使ってみて基本的な部分は慣れたので、次に開発する際はより早くうまく開発できそうです。