star-code.net

2 対 2 オンライン対戦鬼ごっこゲームを作った

はじめに

2 対 2 オンライン対戦鬼ごっこゲーム,"Ghost Tag" を作りました. こちらから遊べます.

こちらのゲームは 2020 年秋に某所で展示したもののリメイクです. 期間限定でしたので,オリジナルのゲームはもう二度と遊べません.コード自体は手元にあるので不可能ではないですが.

思い出は思い出のままの方が美しいのかもしれませんが,どうしても心残りでしたので,オンラインでいつでもどこでも遊べるようにしました.ついでに CPU も実装したので 1 人でも遊べます.やったね.

ルール自体は当時から手を加えていませんが,中身のアルゴリズムが少し異なるので完璧に当時のままではありません.また,得点もテストプレイを行い調節したので当時のままではありません.

見えるゲームとしては近しいものにはしていますが,中身はまるっきり別物です.素材も全部作り直しました.

ドットは 1920×1080 に合わせて作っています.遊ぶ時はフルスクリーン推奨です.

ルール

人間チーム 2 人と,ゴーストチーム 2 人に分かれての鬼ごっこです. 最終的な合計得点が高いチームが勝ちです.

WASD あるいは矢印キーで移動します.アイテムは Enter キーあるいはスペースキーで使用できます.

視界

  • 人間:キャラクター正面方向のみ,通常時ゴーストの姿は見えない.
  • ゴースト:画面全域.人間の位置は常に把握可能.

索敵

ゴーストの姿は人間側から通常見えないが,以下の条件で位置が伝わる.

  1. ライト照射 人間の正面に立つと,ライトによりゴーストの姿が現れる.
  2. アイテム取得 ゴーストがアイテムを取得した際に発生するエフェクトは人間側も視認できる.
  3. スタン使用 人間がスタンアイテムを使用すると,全てのゴーストの現在位置が一定時間表示される.

スコア

  • ゴースト捕獲(人間):人間がゴーストに接触すると,人間チームに +500 点,捕まったゴーストは一定時間後にリスポーンする.
  • アイテム取得(ゴースト)
    • スコアアイテム(通常):+100 点
    • スコアアイテム(ゴールド):+200 点

アイテム効果

スコアアイテムの他に,拾って使用できるアイテムがあります.

  • スピードアップ:一定時間,移動速度が上昇する.
    • ゴーストが使用中,アイテム取得時のスコア加算値が上昇する.
  • スタン:相手を一定時間行動不能にする.
    • 人間が使用した場合,ゴーストの位置がわかる.

技術情報

プログラム

ゲームエンジンに Phaser 3,サーバーには Node.js を用いました.通信には Socket.io を使用しました.

CPU の実装について

人間

マップ全体で熱伝導シミュレーションを行います.

  • 熱源:ゴーストの目撃地点やアイテム消失地点を「高温」とする.
  • 探索:CPU は隣接するマスのうち最も「熱い」方向を目指す.
  • クリアリング:通過したマス,ライトで照らされているマスを「冷ます」ことで,未探索エリアを優先する.
ゴースト

幅優先探索により,人間からの最短距離,得点アイテムへの距離を計算します.

  • 逃走:人間から近い場合,人間からなるべく遠ざかるように移動.
  • 回遊:人間から少し遠い場合,ランダムウォーク.
  • 収集:人間から遠い場合,アイテムをなるべく集めるように移動.

ドット絵

Resprite を使用.iPad で描きました.たのしいね.

効果音

効果音の作成には jsfxr を用いました.

おわりに

作れてよかった. ずっと心残りでしたから.

実は,この Web サイトを作った理由はこのゲームを作るためでした. 作りたいものが溢れて寄り道ばかりで変なものばかり作っていましたし,これからも作りますが.

作るで言えばイラスト制作が滞ってしまっている.ドット絵はいっぱい描きましたが.ドット絵は初めてだったが何とかなるもんだ.

オリジナルを作った時は絵が描ける人がいたのですが.全部を一人で走り切るのも良いものです. 普段やらないことをやって,新しい景色が見えるのです.それで言うと小説が書きたくて.ドット絵ももっとやってみたくて.

プログラムの方は,通信対戦なので考えることがめちゃくちゃ多くて大変でした. 何をどこで管理すればいいか,何をどこ任せるかどれだけ通信相手を信用するか.加えてラグ対策. それなりに滑らかに動作するように頑張ってみましたが,どうでしょう?

さて,3 月をこれの作成に費やしてしまった.放り出していたものの回収に行かねば.