どんなゲーム？
RPGの戦闘部分のみ切り出したようなオンライン対戦ゲームです
（会員登録不要・完全無料）
2～4人までのオンライン対戦とオフラインで遊ぶことも出来ます
また、チャット機能やコマンド入力までの時間制限も付けました
技術スタック
-
言語
typescript -
フレームワーク
vue.js -
データベース
Firebase RealtimeDatabase -
ホスティング
Firebase -
バックエンド
無し（サーバレスと呼ばれる Google Apps Script や AWS Lambda も使用していません）
なぜ作ったのか
- サクッとオンラインゲーム遊びたい・対戦したい ということがありますが
会員登録が不要のゲームが無く、長い会員登録のあと長いチュートリアルをやって
ようやくゲームが出来るというモノばかりだと思った - 最近のゲームは課金ドリブンで、金で殴るゲームばかりだなと思い
プレイヤースキルが試されるゲームを作りたかったから - RealtimeDatabaseでゲームが作れる！みたいなのをよく目にしたもんですが、実際出来るのかどうかと言うのを試してみたかった
（下記記事の応用って感じですが）
開発時に注意したこと
一番気を使ったところが、
- オンラインゲームのなのでホスト・クライアント同士で齟齬が発生しないか
- 無料枠に収めるためになるべくRealtimeDatabaseの通信量を抑える
- アニメーションで画像表示時に遅延しないようにプリロードをする
というところです
ダメージ計算も全てフロントエンドで行っていますが
ホストで計算を行い、各クライアントに返すようにしています（これが基本だとは思いますが）
また、通信量を抑えるために、メッセージの送信は行わずEnumで定義したKeyをクライアントに送信し、クライアント側でEnumからメッセージを作り直して表示するようにしました
アニメーションの遅延の件ですが、はじめはアニメーション実行時にサーバに画像取得するようにしていました
しかし、１回目のアニメーション表示時に飛び飛びになってしまってアニメーションと呼べるものではありませんでした
そこで、プリロードを行うことによって、キャッシュから画像を取得され、遅延なくアニメーションが表示出来るようになりました
リリース後に分かったこと
「開発時に注意したこと」のときに「RealtimeDatabaseの通信量を抑える」ということを注意して開発し、RealtimeDatabaseの通信量に関しては問題ありませんでした
しかし・・・Hostingの方の通信量がヤバかったです・・・
キャラグラフィック・アニメーション・サウンドエフェクト等のアセットを使用しており
１つ１つは100kbもいかないくらいなのですが、プレイヤーが増えるたびに読み込まれて大変でした
リリース直後150人程度にプレイしてもらって600MBの読み取りくらいだったと思います
これに関しては、一番容量の食っていたキャラグラフィックを縮小したり圧縮したりで一応改善しました
課題
課題としてはRealtimeDatabaseにゴミデータが残ってしまうことがあるということです
プレイヤー参加時にDBに追加、退出時にDBから削除というような処理があるのですが
ブラウザバックではなく、ブラウザを強制終了した場合退出の処理が走らないのでゴミデータが残ってしまいます
バックエンドが無いので、ここらへんの処理がどうすることも出来ず・・・。ということがあります
GASを使って定期的にお掃除するのが一番いいのかなとは考えています
最後に
オンラインゲームはプレイヤーが居てなんぼのものなので
良かったら遊んでやったください