Webデベロッパーにぜひやってほしい『karakuri-web』という謎解き脱出ゲームをリリースしました!!
はじめに
2月に開催されたサポーターズさん主催のマンスリーハッカソンvol.15にて作成した謎解きとWebの仕組みを掛け合わせた脱出ゲーム『karakuri-web』を継続開発してリリースしました。この記事では開発の経緯や思いを紹介します。
karakuri-webとは
『karakuri-web』は、謎解きとWebの仕組みを掛け合わせた、これまでにない新しいタイプの脱出ゲームです。とはいえ、どんなものかイメージしづらいかと思いますので、下のリンクからぜひ一度プレイしてみてください!!
開発エピソード
マンスリーハッカソンや継続開発時のエピソードを紹介します。
マンスリーハッカソン
このゲームを開発したきっかけは、サポーターズさん主催のマンスリーハッカソンでした。私とチームメンバー含めWeb系であったため、Webで作品を作ることにしました。せっかくハッカソンに出るからには賞を取りたいという気持ちがあり、既存のサービスと被りにくく、オリジナリティを出しやすいゲームを作ることにしました。話し合った結果、謎解きゲームを作ることに決めました。しかし、ただの謎解きゲームでは面白くないと考え、Webの仕組みを謎解きのギミックにしたら面白いのではないかと思いました。ここで言うWebの仕組みとは、Webエンジニアなら誰もが開いたことがあるであろうデベロッパーツールや、サイトのテーマを切り替えるダークモードなどです。一般的な謎解きとは異なるため、作問には少し苦労しましたが、作成時はワクワク感でいっぱいでした。今思えば、私はクイズの作問経験があり、またメンバーも競プロの作問経験があったため、この作問という作業が私たちに向いていたのかもしれません。
ハッカソンの開発期間は1週間とちょっとだったので、作問した問題は全部で4問で、最小限の構成で作成しました。プレゼンを終えて結果は最優秀賞🏆をいただくことができました。ちょうど春休み期間中で時間もあったため、その期間中はほぼ毎日7時間作業していたので、頑張った甲斐がありました。
継続開発
マンスリーハッカソンで賞をいただいたことで、技育博という継続開発の場をいただけました。賞を受賞せずとも継続開発する予定ではありましたが、やる気がより高まる良いきっかけとなりました。
世界観の作り込み
継続開発をするにあたって一番大事にしたのは世界観の作り込みです。やはりゲームは世界観がとても重要です。ハッカソンで作った際には時間がなく、Webの仕組みを使った謎解きを4問、同じページに並べて出題するのが精一杯でした。そこで、継続開発では以下のようなストーリーを考えました。
このストーリーによって、今までの謎解きに脱出ゲームの要素を加え、世界観を作り上りあげることができました。ストーリーは、ジブリ映画の『千と千尋の神隠し』から着想を得ました。千尋が親と共に引越し先のニュータウンへ向かう途中で異世界に迷い込み、湯屋を見つけます。そこでハクに出会い助けられる。ゲームでは、プレイヤーが千尋、館が湯屋に、そしてk-15がハクに相当します。
また、館の各部屋の地図を右上に表示し、パスで部屋の位置を表現しました。例えば、1階の風呂場にいる場合は以下のようなパスになります。
https://karakuri-web.vercel.app/floor1/bathroom
部屋の位置をパスで表現したことで、ゲームでよくあるファストトラベルも実装できました。ファストトラベルとは、プレイヤーが既に訪れたことのある地点に瞬間移動できる機能です。例えば、1階の台所に一度行ったことがあれば、以下のパスにアクセスできます。
https://karakuri-web.vercel.app/floor1/kitchen
まだ行っていない部屋にパスでアクセスした場合は、ブロックされるようになっています。
技術的なアップデート
ハッカソンの際は以下のような技術構成でした。
もともと、NextAuth.jsとFirebase Authで認証機能を作っていましたが、一度しか遊ばない謎解きサイトにログイン機能は不要でした。また、せっかく継続開発するのであれば多くのユーザーに遊んでもらいたいと思い、ユーザー体験を損なう可能性のある要素は撤廃する方針にしました。加えて、バックエンドを持つとランニングコストがかかり、運用が厳しくなる可能性を懸念して、クライアントのみで動作するゲームを開発する方針にしました。以上のことから以下のような技術構成に改善しました。
Zustandのミドルウェアを使い、LocalStorageでプレイヤーデータ管理を行いました。また、豊富なギミックを作るために、種類が多いUIライブラリであるDaisyUIを採用しました。
しかし、ひとつ問題が発生しました。ウェブの仕組みを謎解きのギミックとしている性質上、ローカルストレージを編集してもいいと暗に許可してしまっています。また、バックエンドを持つことでしか作れないギミックがあることにも、作問中に気づきました。
そこで、バックエンド側を持ったゲームも並行して開発することにしました。ハッカソンの作品をスケールさせたプロジェクトなので、多くの値をプレーヤーデータとして持つことが予想され、より型安全な開発を行うためにt3-stackを採用しました。
今回リリースしたのはクライアント側のみで作成したものです。そのため、ローカルストレージをいじらないでほしい旨をサイト内に記載しています。やはりログインレスにしたいという思いの方が強く、こちらを公開しました。しかし、バックエンド側を持つアプリも開発しており、今回のリリースでこのゲームを多くの方に知っていただけたら、ログインの弊害や運用コストの心配もなくなるのではないかと考えています。その際にバックエンドを持たないとできないギミックを使った謎解きを含む、新たな『karakuri-web』を公開したいと思います。
その他の変更
謎解きは言語に関係なく世界中の人々に楽しんでもらえるゲームなので、より多くの方に私たちのゲームを楽しんでもらえるように、日本語、英語、中国語の三言語に対応させました。また、Vercelのアナリティクスも導入しました。hobbyプランなので簡易的なものではありますが、UUやページビューなどの基本的な情報は確認できます。
今後の展望
今回リリースしたサイトを多くの方に遊んでいただき、フィードバックをいただいて改善していくことが今後の展望です。以下のフォームから作品を遊んだ感想をいただけると嬉しいです。
また、技術的なアップデートでも記載したバックエンドを持つゲームのリリースも予定しています。さらに、何度も楽しんでいただけるコンテンツにしていきたいと考えています。謎解きゲームの性質上、2回以上遊んでもらうのは難しいかもしれませんが、新しい発想で何度も遊べる謎解きゲームのような要素を追加したいです。
まとめ
拙い記事でしたが、最後まで読んでいただきありがとうございました。チームでこの作品に向き合ったのは、トータルで約2ヶ月ほどでした。何年も開発されているサービスに比べると短いかもしれませんが、私自身にとっては非常に思い入れのあるものです。そのため、少し長くなってしまいました。もし、読んでいただいて少しでも良いなと思っていただけたら、応援していただけると嬉しいです。また、技術的な記述の部分で誤りがありましたら、指摘していただけるとありがたいです。
Discussion