ゼロから始めるゲーム制作4：NaniNovel開発にClaude AIと立ち向かえ

ゼロから始めるゲーム制作4：NaniNovel開発にClaude AIと立ち向かえ

開発日記
書いた人 : HAYAO(PG) HAYAO(PG)

　

　HazeDenki株式会社のプログラマーを担当しているHAYAOと申します。

　良かったらTwitter(X)もフォローしてね。


　今回も、以前紹介した記事のテーマに沿ってブログを書いていきます。

　前回までの記事は以下から飛べます。


  1. ノベルゲームの基盤を作る。まず何をする？
  2. ノベルゲームエンジンの選定。宴とNaniNovelの特徴について
  3. 開発環境のセットアップ
  4. ノベルゲームエンジンのソースをAIとカスタマイズしていく方法（今回）
  5. NaniNovelの機能についての解説数本


　今回は4.ノベルゲームエンジンのソースをAIとカスタマイズしていく方法について、ブログを書いていきます！


　NaniNovelのエンジンをAIに読み込ませるのは大丈夫？と思うかもしれませんが、前回も記載した通り、Naninovel開発者はLLMとのコーディングが上手くいく事まで考えて、エンジンの構文修正を行ってくれています。


　Discordフォーラムで初歩的な質問をすると「AIに教わることをお勧めします」と言われてしまうレベル。。すみません。（経験談）

　Unity+NaniNovel開発の"初歩"を乗り越えるために、AIツールのセットアップを行っていきましょう！


AI（LLM）の選定

　コーディングサポート用のLLMについてはClaudeを使用します。

　2025/10現在、OpenAIからCodexなどコーディングサポート用のAIも続々と出てきているようですが、自分はClaudeのコーディングが実務で一番しっくり来ているので、Claudeでのコーディング方法を説明していきます。


　Claudeを採用する場合でもClaude for DesktopとClaude Codeを使用する場合の二種類の選択肢があります。

　大まかに、Claude for DesktopはGUIベースの対話、Claude CodeはCLIベースの対話を行うアプリケーションとなっています


　自分はClaudeの機能が視覚的に管理しやすいClaude for Desktopを採用していますので、本記事ではClaude for Desktopでのセットアップについて解説します。

　AIがどのような思考の結果、どのような作業を行ったか把握しやすい所もGUIベースの強みであると思います。


Claude for Desktopの設定セットアップ

　まず、以下よりアプリケーションをダウンロードします。

Download Claude

Download Claude

Download Claude for your desktop or mobile device.

www.claude.com

　Google連携でアカウントを作成しましょう。


◆プランの選択

　まず、有料プランのProでないと本格的な使用に耐えられないので、月20$の支払い設定を行いましょう。

　自分はMaxプランですが、ProとMaxの切り替えについては実際に使ってみてからの判断で問題ないと思います。


◆モデルの選択

　2025/10時点、Claudeには以下の3種類のモデルが存在しています。

  • Opus4.1
  • Sonnet4.5
  • Haiku4.5

　これはSonnet4.5一択です。二か月前くらいはOpusモデルの性能出ないとコーディングに影響が出るような状態でしたが、現在はOpusとSonnetは遜色ありません。

　むしろ、OpusはMaxプランでも使用制限に非常に早く到達するモデルとなっており、推奨出来ないです。


◆設定について

　アカウントをクリックして表示される「設定」項目について、重要な項目を紹介します。


　●Usage

　AIの残りHPです。これが限界に到達するとAIは何もできなくなります。

　制限に到達するのはもう仕方のないことではあるのですが、「致命的なバグの調査中に使用制限に達する」「AIがプログラム実装途中に使用制限に到達する」などプロジェクトの進行に支障が出るタイミングの制限は避けたいので、Proプランであればたまにチェックをして作業優先度を意識することをおすすめします。


　●Capabilities

　Capabilitiesの内容について自分は全てOffにしています。

　コーディングも設計書のまとめも基本的なファイルの読み書きだけ出来れば十分なので、視覚効果による遅延や無駄なトークン使用を避けるためにOffにした方が良いでしょう。


　Memory機能はOnにするべきです。

　ClaudeはChatGPTと比べて、1度のチャットの文字数制限到達が非常に速いです。

　そのため、コードの完成間近でいきなりチャットが打ち切られてしまう現象が多発します。

　これは全体の使用量とは別で、各チャットに存在する使用量なのでプランを変更しても無くなりません。

　メモリー機能をOnにしていれば、他のチャットの情報を参照出来るので、続きから作業を再開できます。これは必ずOnにしましょう。


　●Developer

　必須の設定項目です。この設定がAIにコーディングサポートを行わせるための肝となります。

　ここではMCP（Model Context Protocol）という、LLMのサービスから自分のPC内のファイルへアクセスを行えるようにするための経路作りの準備を行っていきます。


　基本であるファイルの読み書きを行ってもらうための作業手順は大まかに以下の通りとなります。


  1. Node.jsのインストール
  2. server-filesystemのインストール
  3. Claude for Desktopの設定ファイルの編集
  4. 動作確認

　

　1から説明していきます。


1.Node.jsのインストール

　以下からNode.jsのインストール媒体をダウンロードします。

　Node.js — Run JavaScript Everywhere


　インストールが終わったら、Windowsの検索欄で"cmd"と入力し、Enterを入力してください。コマンドプロンプトが開きます。

　その後、"node -v"と入力し、以下の表示になればインストール完了です。


2.server-filesystemのインストール

　上記手順が完了したら、以下のコマンドをコマンドプロンプトに打ち込みます。


npm install -g @modelcontextprotocol/server-filesystem


　この画面が出た場合は、表示されている"npm install -g npm@XX.YY.ZZ"コマンドを実行して最新化しましょう。

　最新化が完了したら再度、最初のインストールコマンドを実行してください。


　このような画面になれば完了です。


3.Claude for Desktopの設定ファイルの編集

　Claude for Desktopに戻り、Developer項目に戻ります。

　Edit Configをクリックします。

　すると、フォルダが開くので「claude_desktop_config.json」をメモ帳で開きます。


　そのメモ帳に以下をコピーしてください。

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "C://Temp",
        "C://Temp2"
      ]
    }
  },
  "preferences": {
    "legacyQuickEntryEnabled": false
  }
}

※"C://Temp"となっている個所は読み込ませたいファイルのあるフォルダパスを指定してください。複数読み込ませたいフォルダがある場合は、カンマ区切りで入力していってください。


　編集が終わったら、Claudeを再起動してください。ウインドウを閉じるだけでなく、タスクバーのアイコンを右クリックして終了してください。


　再起動したらDeveloper設定欄を開き、以下のように「filesystem runnning」となっていれば作業完了です！！



4.動作確認

　先ほど指定した読み込ませたいフォルダの中に適当なテキストファイルを置いてください。　


　その後、Claudeのチャットを開きます。　

　まずは以下のように、置いてあるファイルの中身を読んでもらいましょう

　アクセス許可を求められたら、AlwaysAllowを押します。


　以下のようにファイルの中身を教えてくれたらOK!

　ClaudeがあなたのPCのファイルを読めています。


　次に、ファイルの中身に文字を書いてもらいましょう。

　Please add “Hello World”と命令して、文字列を追記してもらいます。

　追記されていればOK！

　この要領でソースコードを調査/修正してもらえるようになりました。


NaniNovelエンジンを読み込ませる

●ClaudeのMCP設定ファイルにUnityプロジェクトフォルダのパスを追加

　以上のテストが終わっていれば、もうNaniNovelエンジンをAIに解析してもらうための方法は見えていると思います。

　前回までのセットアップが終わっていれば、NaniNovelエンジンがインストールされたUnityプロジェクトのフォルダがあるはずです。

　そこへのパスを、動作確認時の要領でJSONファイルに追加してください。


　なお、NaniNovelエンジン以外のデータもすべて含んだプロジェクトフォルダ丸ごとのパスを指定したほうが便利です。


●Claudeのプロジェクト機能を使用する

　開発補助を開始する際は、Claudeのプロジェクト機能を必ず使用してください。

　チャット履歴が整理されるだけでなく、プロジェクト内のチャットで共通の指示を出すことが出来ます。


　NaniNovelプロジェクトを作ってみましょう。

　左サイドバーのProjectsから、NewProjectを押してください

　以上の画面に入力する内容は何でもよいです。何のProjectか分かるようになっていれば問題ありません。


　作成が完了すると、以下のような画面になります。

　MemoryとFilesは触らなくてもよいので、Instructionsを設定しましょう。これが、プロジェクトで共通する指示となります。


　サンプルを提示するのが最も手っ取り早い説明でしょう。以下が自分が使用しているInstructionsです。（一部改変）

基本的にUnityのゲーム開発に関する質問です。
Deepthinkを行い、バグが生まれないように注意しながら過剰な実装をしないように作業を行うこと

コーディングを行う前に、コードの修正案をチャットに明示してください。（コードを直接乗せること）
ファイル全文は載せず、端的に説明してください。指示があった場合、全文を掲載してください
その後、許可が出た後に直接ファイルを編集する作業をしてください

Unity用のライブラリに関する質問は、回答する前にネット検索で仕様を調査し、正確な回答を行うことを心がけてください。
Unityのバージョンは 6000.0.58f2 です
シェーダーやURPに関するコードを組む時はUnity 6（URP 17）に対応した最新のAPIを使用するように


NaniNovel関連の質問に関しては、以下のドキュメントの調査を優先すること
1."D:\NovelGameProject\Packages\com.elringus.naninovel"
基本上記ディレクトリ配下を最優先に参照し、NaniNovelのエンジン仕様を把握する事。

2.コーディングガイドライン（"D:\NovelGameProject\Document\CodingGuidelines_NaniNovel.md"）も事前に参照する事。

3.上記で満足の回答が得られない場合、下記のサイト内の情報も活用すること
"https://naninovel.com/guide/"


Scriptsを作成する際のフォルダはAssets/Projects/Scripts配下に作成してください。


　こんなもんなの？という感じですが、これでも結構ちゃんと動いてくれています。

　上記のプロンプトのポイントは、以下になると思います。

  • NaniNovel関連の質問をしたときに調査するファイルを限定していること。限定しないとUnityの膨大なファイルを調査し始める。
  • コーディングガイドライン資料を作成していること
  • Unityバージョンなどの情報を与えていること。特にShader周りの実装はUnityのバージョンで大きく仕様が変わります。

　

　コーディングガイドライン資料を作っていく事は非常に重要です。

　AIにエンジンを調査させる作業は、成果物としてコーディングガイドライン資料を作ることを意識した方が良いです。


コーディングガイドライン資料を作ってみる

　名前は仕様書でもコーディングガイドラインでも良いですが、AIにNaniNovelの仕様を調査させてドキュメントを一つ作ってみましょう。


　仕様調査ドキュメント作成のコツは、調査対象に関連するシステムの処理の流れをまず提示してもらい、その後調査対象の機能の掘り下げを行うことです。

　文章で説明しても分かりにくいと思いますので、実際に「テキストの文字送り部分の改修」を行う前提で調査を行った際の作業の流れを示します。


　まず、NaniNovelエンジンの読み込み準備が出来ているプロジェクトにて以下の質問でチャットを開始してください。

EN
　I’m planning to refine the typewriter animation for NaniNovel’s text window. To start, I need to learn the pipeline/flow of how text is rendered in NaniNovel.

JP
NaniNovelのテキストウインドウの文字送りアニメーションについて改修を加えたいと思っている まずはNaniNovelのテキストが表示されるまでの仕組みを知りたい。


　これだけでClaudeの力は大体分かるのではないでしょうか。

　以下に、自分が入力した結果出力されたレポートを貼ります。

----------

NaniNovelのテキストレンダリングパイプライン解析

　NaniNovelのテキストウィンドウにおけるテキスト描画とタイプライター効果の流れを解析しました。以下がメインのパイプラインです：

1. テキスト設定フェーズ

UITextPrinter (Actor)
    ↓
RevealableTextPrinterPanel (UI Panel)
    ↓ SetMessages() / AddMessage() / AppendText()
RevealableText (Wrapper over TMPro)
    ↓ Text property setter
TMPro.TMP_Text (TextMeshPro Component)
```

**主要クラス:**
- `RevealableText` - TextMeshProコンポーネントをラップし、テキストのreveal機能を提供
- テキストが設定されると内部で `ForceMeshUpdate()` を呼び、TextMeshProの `textInfo` を即座に更新

### 2. **Revealプロセス（タイプライター効果）**
```
RevealableTextPrinterPanel.RevealMessages(delay)
    ↓
TextRevealer.Reveal(delay, token)
    ↓ ループ内で繰り返し
IRevealableText.RevealNextChars(count, duration, token)
    ↓
RevealState.SetLast(charIndex, duration, token)
    ↓ OnChange イベント発火
TextRevealEffect クラス群がリアクト
    ↓
TMPro頂点データ更新 (colors32, vertices等)

キーポイント:

  • TextRevealer が正規化された速度でrevealを管理（フレームレートに依存しない）
  • RevealState が各文字のreveal状態を追跡（開始時刻、duration、progress等）
  • IRevealInfo.OnChange イベントで各エフェクトに通知


2. ビジュアルエフェクト適用

　主要なエフェクトクラス（全て TextRevealEffect を継承）:

RevealFader (RevealFader.cs)

- 文字のフェードイン効果
- Info.GetRevealRatio(charIndex, length) でアルファ値を計算
- textInfo.meshInfo[].colors32 を直接操作
- UpdateVertexData(TMP_VertexDataUpdateFlags.Colors32) で更新

RevealClipper

  • 文字のクリッピング効果（徐々に表示）
  • 頂点位置を操作

RevealPaginator

  • ページ制御（確認待ちが必要な場合）


3. 文字ごとのコールバック

TextRevealer.Reveal() 内:
    handleCharRevealed?.Invoke(text.GetLastRevealedChar(), token)
        ↓
RevealableTextPrinterPanel.HandleCharRevealed(char, token)
    ↓
    - PlayAuthorSound() - キャラごとのSFX再生
    - PlayRevealSfxForChar() - 特定文字でのSFX再生
    - ExecuteCommandForChar() - 特定文字でのコマンド実行


4. 状態管理の詳細

RevealState が管理する情報:

- LastRevealedCharIndex: 最後にrevealされた文字のインデックス
- LastAppendIndex: テキスト追加前の最後の文字インデックス
- indexToInfo: 各文字のCharRevealInfo (開始時刻、duration、token)
- indexToAppendTime: 各文字が追加された時刻


CharRevealInfo 構造:

struct CharRevealInfo {
    float StartTime;     // reveal開始時刻
    float Duration;      // reveal完了までの時間
    AsyncToken Token;    // キャンセル用トークン
}
```

### 6. **カスタマイズポイント**

タイプライター効果をカスタマイズする主な方法:

1. **TextRevealEffect を継承** して新しいエフェクトを作成
   - `Info.OnChange` をリッスン
   - `Info.GetRevealRatio(charIndex)` でprogress取得
   - TMProの頂点データを操作

2. **RevealableText を継承** してreveal動作を変更
   - `RevealNextChars()` をオーバーライド
   - reveal順序のカスタマイズ

3. **TextRevealer を継承** してreveal速度制御を変更
   - `Reveal()` メソッドをオーバーライド
   - 動的な速度変更を実装

### データフロー図
```
@startuml
PrintedMessage → UITextPrinter: メッセージ送信
UITextPrinter → RevealableTextPrinterPanel: SetMessages()
RevealableTextPrinterPanel → RevealableText: Text = "..."
RevealableText → TMPro: base.text = "..."
RevealableText → RevealState: Reset()

note right: Revealフェーズ開始

RevealableTextPrinterPanel → TextRevealer: Reveal(delay)
loop 各フレーム
    TextRevealer → RevealableText: RevealNextChars(count)
    RevealableText → RevealState: SetLast(index, duration)
    RevealState -> TextRevealEffect: OnChange イベント
    TextRevealEffect -> TMPro: 頂点データ更新
    TextRevealer -> HandleCharRevealed: コールバック
end
@enduml

主な技術的な仕組み:

  • TextMeshProの TMP_CharacterInfo と TMP_MeshInfo を直接操作
  • 正規化された時間計算でフレームレート非依存の滑らかなアニメーション
  • イベント駆動アーキテクチャでエフェクトの追加が容易
  • AsyncToken による統一的なキャンセル管理

この構造により、NaniNovelは高度にカスタマイズ可能なテキスト表示システムを実現しています。


----------


　上記のレポートを基に、ソースコードを実際に検索したりデバッグしたり、Discordでサポートに質問したり・・・出来ることが一気に広がります。

　忘れてはいけないのは"AIの調査は正確でない可能性が高い"ということです。AIの一番良い点は、調査のきっかけを見つけてくれることです。しっかりとレポートを読んで、実際にその箇所のコードを読み、疑問があればAIに質問し、理解を深めていきましょう。


　気になる部分を詳細にわかりやすくレポートに出してもらえば更に調査は円滑に進んでいくでしょう。

　「上記のレポートをコーディングガイドライン.mdに追記して」と言えばファイルも作ってくれます。そのファイルはプロジェクト設定によって次のチャットでは自動的に読み込まれ、そこでさらに調査を進め・・・というループを構築しましょう。


　自分がエンジンについて詳しくなれば、詳細で具体的な修正指示をAIに出してコーディングをしてもらい、自分がレビューして適用する。という実作業の段階に移っていくことが出来ます。頑張りましょう。



　これでAIとコーディングをしていく準備は完了です。もうこのブログを読むよりAIと話していた方が話が早いかも？


　どこかで失敗した方がいらっしゃいましたら、コメントで問題が発生した個所を教えて頂けると助かります。追記します。


　次回からはNaniNovelを改修して追加した機能を何本か紹介しようと思います。


　ここまで読んでくださった方、ありがとうございました。

　また次回。HazeDenkiをよろしくお願いいたします。

　

タグ：
Game Unity NaniNovel Dev-Diary VisualNovels HAYAO Claude LLM
記事一覧へ戻る

コメント (0)

コメントを残す

0/1000

まだコメントはありません。最初のコメントを投稿してください！