1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

アドベンチャーゲーム「こみゅもん」を作る

1
Last updated at Posted at 2025-12-12

動いてしゃべるキャラクターたちとひとときを過ごす、ほのぼのアドベンチャーゲーム「こみゅもん」の解説を行う。

デモ1

「こみゅもん」は Web ブラウザで遊べる。スマートフォンでも遊べる。

スペシャルサンクス

このゲームは以下のライブラリ、キャラクター、素材がなければ完成しなかったでしょう。深く感謝いたします。

項目 リンク
ゲームライブラリ Phaser
キャラクター 東北ずん子・ずんだもん PJ 公式サイト
キャラクターボイス VOICEVOX:ずんだもん VOICEVOX:四国めたん (VOICEVOX)
キャラクターイラスト ずんだもん立ち絵素材 (坂本アヒル様)
キャラクターイラスト 四国めたん立ち絵素材 (坂本アヒル様)
フォント Yusei Magic (Tanukizamurai 様)
効果音 カラスの鳴き声 - ニコニ・コモンズ (音の輪[リアル効果音制作部]様)
効果音 「スポッ」抜ける音・ポップ音 - ニコニ・コモンズ (Chisato Kimura 様)
背景 住宅街の公園(日中) - ニコニ・コモンズ (みんちり様)
背景 街中の踏切(日中・開) - ニコニ・コモンズ (みんちり様)
背景 アーケード商店街(日中) - ニコニ・コモンズ (みんちり様)
背景 川沿いの土手の遊歩道(夕方) - ニコニ・コモンズ (みんちり様)

プログラムについて

こういった類のゲームではシナリオ(以降と呼ぶ)の量が増えると当然コードの量も増える。

そこでこのゲームのプログラミングにおいてはコードの量が増えても開発効率が落ちないように全体を設計することを目標にした。

全体の設計について

当時の自分はクリーンアーキテクチャという考え方に傾倒していた。

クリーンアーキテクチャという考え方に出会った自分は抽象と具象の分離にこだわった。

以下はゲームの肝の部分のクラス図である。

依存関係逆転の原則を参考にして、劇という抽象ウィンドウ表示やキャラクターのアニメーションのような具象を分離させた。

この設計により劇のコードは次のとおり抽象的になり、劇について考えている間は具体的な実装を意識しなくても良くなった。(逆もまた然り)

劇のコードの例
export class DramaZundamonOtsukai extends Drama {
  async run(drama: IDramaScene): Promise<Drama | null> {
    // 略
    drama.playMusic("music001");
    await zundamon.setMotion("smile1");
    await drama.showMessageWindow();
    zundamon.talk("zundamonOtsukaiZundamonVoice00");
    await drama.typeText("また会ったのだ", "ずんだもん").waitKey();

    await zundamon.setMotion("default");
    zundamon.talk("zundamonOtsukaiZundamonVoice01");
    await drama
      .typeText("ボクはこれから、おつかいにいくところなのだ", "ずんだもん")
      .waitKey();
    // 略
  }
}

それ以外にも DI コンテナを使って依存関係を整理したり、リアクティブエクステンションの仕組みを取り入れて宣言的に状態管理できるようにした。

こういった工夫をすることで、劇の量が増えても開発効率が落ちないように努めた。

だから理屈ではゲームを無限大のボリュームにできるのだ。実際のボリュームは…君の目で確かめてくれ!

演出面について

デモ2

UI の目新しさはないが、よくあるウィンドウのアニメーションとか、1 文字ずつ出るテキストとか、バックログ機能の作成を頑張った。

キャラクターの口パク・瞬き・身振り手振りなどを頑張ったのだが、口パクと音声の一致は大変すぎるので簡略化した。例えば「ボクはこれから、おつかいにいくところなのだ」という音声の場合、最後にはキャラクターは口を閉じるが、途中の「、」のときには口を閉じない。この辺もきちんとしているゲームはかなり手間をかけているのだろうと実感した。

サウンドについて

音楽については特筆すべきことはない。

音楽をシームレスに無限ループさせたかったのだが Phaser にそういった API を見つけることができなかった。
その辺を対応できるサウンドドライバー的なものも作ったが、Phaser の読み込みシーケンスとのすり合わせやフェードイン・フェードアウトなどの仕組みも考えないといけなくなり、大変なので途中で諦めた。非常に残念だ。

音量を頑張って整えた。

グラフィックについて

グラフィックについては特筆すべきことはない。(自分は殆ど描いていない)

劇について

ユーザーの選択によってゲームの展開が変わるように頑張った。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?