microCMSとFigmaを管理画面として謎解きゲーム「カミとミコ」をどうやって作ったか by まぁし / 知念

謎解きアドベンチャーゲーム「カミとミコ」開発の裏側を紹介します。
https://realdgame.jp/s/kamitomiko/

ReactのSPA構成で実装したブラウザゲームです。
サーバーサイド無しのため、画面遷移や進行状態の設計で苦労しました。

ゲーム開発ではキャラクターやフラグなど扱う情報が多く、開発が進むほどデータと状態の関係性も複雑になります。
シナリオ・会話・キャラクター情報・謎の答え・フラグなどの情報はmicroCMSで管理しており、「なぜブラウザゲームにCMSを使うのか」という背景から、スキーマ設計や開発・運用のコツまで説明します。
また、「Figmaを管理画面」としてキャラクターの配置や移動ルートを設定する手法を取り入れたので、その連携方法にも触れます。

本セッションでは、JavaScriptでゲームを作ってみたい人や、状態管理・データ設計で悩んでいるエンジニアに向けて、実装の工夫や苦労した点を紹介します。
・進行フラグや状態管理の設計
・CMSやFigmaによるコンテンツ管理
・LocalStorageでのオートセーブ
・開発中にデバッグしやすくする工夫