Hello! I’m HAYAO, a programmer at HazeDenki Inc.
If you’d like, please follow me on Twitter(X) as well.
I’m continuing this series based on the outline I shared earlier.
You can jump to the previous entries:
- Building the foundation for a visual novel: where to start?
- Choosing a Visual Novel engine — Utage vs Naninovel
- Setting up the development environment
- Customizing the VN engine with AI (this post)
- Several deep dives into Naninovel features
This time, I’ll cover how to customize your VN engine with AI.
If you’re wondering, “Is it okay to let an AI read the Naninovel engine?”, the short answer is yes. As mentioned previously, the Naninovel developer has even adjusted the engine’s syntax with LLM-assisted coding in mind.
On the Discord forum, if you ask a very basic question, support staff may even say, “We recommend you learn it with AI.” (Guilty as charged—speaking from experience!)
Let’s set up AI tools to help you clear the basic hurdles of Naninovel development.
Choosing an AI (LLM)
For coding support, we’ll use Claude.
As of October 2025, OpenAI and others have various coding-focused models on the way, ex Codex
but in day-to-day work Claude has felt the most reliable to me, so I’ll demonstrate with Claude.
Even if you choose Claude, you have two main options: Claude for Desktop and Claude Code.
Roughly speaking, Claude for Desktop is a GUI-based chat app; Claude Code is CLI-oriented.
I use Claude for Desktop because it’s easier to manage things visually. It also makes it clearer what the AI is thinking and doing during a task. This post focuses on setting up Claude for Desktop.
Setting up Claude for Desktop
◆Download & account
Download from the official site and create an account (Google sign-in is fine).
◆Plan
For serious use, you’ll want the Pro plan (USD $20/mo).
I’m currently on Max, but you can start on Pro and see if you need to upgrade.
◆Model choice (as of Oct 2025)
Available models: Opus 4.1, Sonnet 4.5, Haiku 4.5.
My pick is Sonnet 4.5. A couple months ago Opus had a clear edge for coding, but now Sonnet is comparable—while Opus hits usage limits very quickly (even on Max), so I don’t recommend it.
◆Key settings
About the “Settings” items displayed when you click your account
Here are the important items.
●Usage
Think of this as your AI’s remaining “HP.” When it hits the limit, the AI stops. Limits are inevitable, but try to avoid hitting them mid-debug or mid-implementation. On Pro, keep an eye on this and prioritize tasks accordingly.
●Capabilities
I keep everything Off. For coding and design docs, basic file read/write is enough; disabling extras reduces latency and token usage.
●Memory
Keep Memory = On.
Claude hits per-chat limits fast. Even if your overall quota remains, a single long chat can cut off abruptly near the end of an implementation.
With Memory on, Claude can reference info across chats and you can resume smoothly.
●Developer
This is essential for coding support. We’ll enable MCP (Model Context Protocol) so the LLM can access files on your PC.
To enable the basic file read/write capability, follow these steps:
Overview of the workflow
- Install Node.js
- Install server-filesystem
- Edit Claude for Desktop’s config file
- Verify it works
I’ll go through them one by one.
1.Install Node.js
Download the installer from the official site: Node.js
Node.js — Run JavaScript Everywhere
After installation, open Windows Search, type “cmd”, and press Enter to open the Command Prompt.
Type the following and press Enter:
node -v
If you see a version number printed (for example, v22.XX.XX), the installation was successful.
2.Install server-filesystem
Once Node.js is ready, run the following command in the Command Prompt:
npm install -g @modelcontextprotocol/server-filesystem
If you see a message suggesting an npm update (for example, it shows a command like npm install -g npm@XX.YY.ZZ), run that update command first to bring npm to the latest version.
After updating npm, run the original install command again:
When the installation completes without errors (you’ll see a summary with added packages), you’re done with this step.
3.Edit the Claude for Desktop config file
Return to Claude for Desktop and open Settings → Developer.
Click Edit Config. This opens a folder; open the file named claude_desktop_config.json in a text editor (Notepad is fine).
Paste the following JSON:
{
"mcpServers": {
"filesystem": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-filesystem",
"C://Temp",
"C://Temp2"
]
}
},
"preferences": {
"legacyQuickEntryEnabled": false
}
}
Note: Replace the "C://Temp" paths with the folders that contain files you want Claude to access. You can specify multiple folders by listing them as additional arguments separated by commas.
After editing, restart Claude completely. Don’t just close the window—right-click the Claude icon in the taskbar and choose Quit to ensure a full restart.
When Claude restarts, go back to Settings → Developer and confirm the status shows “filesystem running”. If you see that, this step is complete.
4. Verify it’s working
Place a small .txt file inside one of the folders you listed above.
Open a chat in Claude and ask it to read the contents of that file.
If Claude asks for permission to access files, click Always Allow.
If Claude returns the file’s contents correctly, file read is working.
Next, test write/append access: ask Claude to add a line to the same file (e.g., “Please append Hello World to the file.”).
If you open the file and see the text appended, the setup is complete—Claude can now read and write your local files.
Loading the Naninovel Engine
●Add your Unity project path to Claude’s MCP config
If you’ve completed the tests above, the path forward to let the AI analyze the Naninovel engine should be clear.
Assuming you finished the earlier setup, you should have a Unity project where the Naninovel engine is installed.
Add the path to that Unity project folder to the JSON config, the same way you did during the file-access test.
Tip: It’s more convenient to specify the entire project folder (which includes Naninovel and your other assets), rather than only the Naninovel package directory.
●Use Claude’s Projects feature
When you start development assistance, always use Projects in Claude.
Besides organizing chat history, Projects let you define shared, project-wide instructions.
Create a “Naninovel” project:
In the left sidebar, open Projects → New Project.
Fill in any sensible details—just make it clear what the project is.
After creation, you’ll see the project screen.
You don’t need to touch Memory or Files here; instead, set Instructions. These act as the common directives for everything inside this project.
Sample project Instructions (based on my setup)
Most questions will be about Unity game development. Think deeply. Avoid over-engineering. Work carefully to prevent bugs. Before you start coding, propose the change directly in chat with concise code (a focused patch/diff). Don’t paste full files unless asked. Keep explanations brief. If I ask, you may paste the entire file. After I approve, edit the actual files. For Unity library/API questions, search the official docs first and aim for accurate answers. Unity version is 6000.0.58f2. When writing shaders or URP code, use Unity 6 (URP 17) APIs. For Naninovel-related topics, consult these first: 1) "D:\NovelGameProject\Packages\com.elringus.naninovel" Treat this as the primary reference to learn the engine internals. 2) "D:\NovelGameProject\Document\CodingGuidelines_Naninovel.md" Review before answering/coding. 3) If still insufficient: "https://naninovel.com/guide/" When creating scripts, place them under: Assets/Projects/Scripts
This may look simple, but it works well. The key points:
- Constrain where Claude searches for Naninovel info; otherwise it will wander across the entire Unity tree.
- Maintain a coding guidelines document.
- Provide critical environment details (Unity version, URP 17, etc.), especially for shader work where APIs differ by version.
Creating coding guideline documentation is extremely important.
When having AI investigate the engine, it's best to keep in mind that the deliverable should be coding guideline documentation.
Create a Coding Guidelines document
Call it a spec or coding guidelines—either is fine. Have the AI survey Naninovel and help you build a single consolidated document.
A tip for creating an investigation document: first have the AI present the overall processing flow of systems related to your target, and then dig into the specific feature you want to study.
Explaining this only in text can be hard to follow, so here’s the workflow I used when investigating on the assumption that we’ll “refine the typewriter (reveal) animation.”
First, in a project where the Naninovel engine is already loaded, start a chat with the following question:
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のテキストが表示されるまでの仕組みを知りたい。
With just this, you should get a pretty good sense of what Claude can do.
Below, I’ll paste the report that was output based on my prompt:
----------
NaniNovel Text Rendering Pipeline Analysis
I have analyzed the text rendering and typewriter effect flow in NaniNovel's text window. Here is the main pipeline:
1. Text Setup Phase
UITextPrinter (Actor)
↓
RevealableTextPrinterPanel (UI Panel)
↓ SetMessages() / AddMessage() / AppendText()
RevealableText (Wrapper over TMPro)
↓ Text property setter
TMPro.TMP_Text (TextMeshPro Component)
```
**Key Classes:**
- `RevealableText` - Wraps TextMeshPro component and provides text reveal functionality
- When text is set, internally calls `ForceMeshUpdate()` to immediately update TextMeshPro's `textInfo`
### 2. **Reveal Process (Typewriter Effect)**
```
RevealableTextPrinterPanel.RevealMessages(delay)
↓
TextRevealer.Reveal(delay, token)
↓ Repeatedly in loop
IRevealableText.RevealNextChars(count, duration, token)
↓
RevealState.SetLast(charIndex, duration, token)
↓ Fires OnChange event
TextRevealEffect classes react
↓
TMPro vertex data update (colors32, vertices, etc.)
Key Points:
- TextRevealer manages reveal at normalized speed (framerate-independent)
- RevealState tracks each character's reveal state (start time, duration, progress, etc.)
- IRevealInfo.OnChange event notifies each effect
2. Visual Effect Application
Main effect classes (all inherit from TextRevealEffect):
RevealFader (RevealFader.cs)
- Character fade-in effect - Calculates alpha value using Info.GetRevealRatio(charIndex, length) - Directly manipulates textInfo.meshInfo[].colors32 - Updates with UpdateVertexData(TMP_VertexDataUpdateFlags.Colors32)
RevealClipper
- Character clipping effect (gradual display)
- Manipulates vertex positions
RevealPaginator
- Page control (when confirmation is required)
3. Per-Character Callbacks
Inside TextRevealer.Reveal():
handleCharRevealed?.Invoke(text.GetLastRevealedChar(), token)
↓
RevealableTextPrinterPanel.HandleCharRevealed(char, token)
↓
- PlayAuthorSound() - Play character-specific SFX
- PlayRevealSfxForChar() - Play SFX for specific characters
- ExecuteCommandForChar() - Execute commands for specific characters
4. State Management Details
Information managed by RevealState:
- LastRevealedCharIndex: Index of last revealed character - LastAppendIndex: Index of last character before text was appended - indexToInfo: CharRevealInfo for each character (start time, duration, token) - indexToAppendTime: Time when each character was added
CharRevealInfo structure:
struct CharRevealInfo {
float StartTime; // Reveal start time
float Duration; // Time until reveal completion
AsyncToken Token; // Cancellation token
}
```
### 6. **Customization Points**
Main ways to customize the typewriter effect:
1. **Inherit from TextRevealEffect** to create new effects
- Listen to `Info.OnChange`
- Get progress with `Info.GetRevealRatio(charIndex)`
- Manipulate TMPro vertex data
2. **Inherit from RevealableText** to modify reveal behavior
- Override `RevealNextChars()`
- Customize reveal order
3. **Inherit from TextRevealer** to modify reveal speed control
- Override `Reveal()` method
- Implement dynamic speed changes
### Data Flow Diagram
```
@startuml
PrintedMessage → UITextPrinter: Send message
UITextPrinter → RevealableTextPrinterPanel: SetMessages()
RevealableTextPrinterPanel → RevealableText: Text = "..."
RevealableText → TMPro: base.text = "..."
RevealableText → RevealState: Reset()
note right: Reveal phase begins
RevealableTextPrinterPanel → TextRevealer: Reveal(delay)
loop Each frame
TextRevealer → RevealableText: RevealNextChars(count)
RevealableText → RevealState: SetLast(index, duration)
RevealState -> TextRevealEffect: OnChange event
TextRevealEffect -> TMPro: Update vertex data
TextRevealer -> HandleCharRevealed: Callback
end
@enduml
Main Technical Mechanisms:
- Direct manipulation of TextMeshPro's TMP_CharacterInfo and TMP_MeshInfo
- Normalized time calculation for smooth framerate-independent animation
- Event-driven architecture makes adding effects easy
- Unified cancellation management via AsyncToken
----------
Using that report as a base, you can search the source code, debug, ask questions in Discord support, and so on—the range of what you can do expands quickly.
One thing you must not forget is that AI investigations can often be inaccurate. The best thing about AI is that it helps you find starting points for investigation. Read the report carefully, open the code for the referenced areas, ask the AI follow-up questions if anything is unclear, and deepen your understanding.
If you have the AI produce detailed, easy-to-understand write-ups on the parts you care about, your investigation will proceed even more smoothly.
If you say, “Append the above report to CodingGuidelines.md,” it will create the file for you. Depending on your project settings, that file will then be automatically read in the next chat, allowing you to continue the investigation—and thus build a loop.
As you become more familiar with the engine, you can give the AI detailed and concrete change requests, have it code the changes, and then review and apply them yourself. Let’s keep at it.
------
At this point, you’re ready to code with AI. You may even find it faster to keep chatting with the AI than to keep reading this post.
If you run into problems anywhere, please leave a comment indicating exactly where things went wrong, and I’ll update the article.
From the next entries onward, I’ll introduce several Naninovel modifications and added features.
Thanks for reading.
See you next time—and thanks for supporting HazeDenki!
Comments (0)
Leave a comment
No comments yet. Be the first to comment!