File size: 4,386 Bytes
3ae479a
ef3c3e0
3ae479a
 
063da56
3ae479a
 
 
 
 
4a7cfc9
 
b4ec05a
4a7cfc9
 
b4ec05a
4a7cfc9
b4ec05a
4a7cfc9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b4ec05a
4a7cfc9
b4ec05a
4a7cfc9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b4ec05a
4a7cfc9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b4ec05a
4a7cfc9
b4ec05a
4a7cfc9
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
---
title: VN-AI Studio
emoji: 🦀
colorFrom: yellow
colorTo: green
sdk: static
pinned: false
license: mit
---

# VN-AI Studio
**AI-Assisted Visual Novel Authoring Tool (Web-Based)**

🚀 Live Demo  
https://huggingface.co/spaces/devmeta/visual-novel-creator-v2

VN-AI Studio is a web-based visual novel creation tool that leverages generative AI to reduce the entry barriers of game development—such as story planning, character art creation, and scripting—and enables users to rapidly create, test, and export playable visual novel games.

---

## Overview

Creating a visual novel traditionally requires multidisciplinary expertise in writing, illustration, and programming.  
VN-AI Studio introduces an AI-assisted creation workflow that allows creators to focus on narrative structure and experimentation rather than technical implementation.

Core philosophy:

Generate many playable prototypes quickly, then curate and refine the best result.

---

## Key Features

### AI-Assisted Content Generation
- Automatic story generation from a simple theme input
- Character sprite generation with consistent visual style
- Automatic generation of four emotional expressions (neutral, happy, sad, angry)
- Background image generation from scene descriptions
- Automatic background removal using Canvas API and pixel-level chroma key analysis

### Visual Novel Editor
- Scene creation and deletion
- Branching narrative structure with choice-based flow
- Dialogue editing with character and narration support
- Character management with prompt-based customization

### Scene Tree Visualization
- Hierarchical scene tree for at-a-glance understanding
- Clear visualization of cause-and-effect between choices and outcomes
- Detection of unreachable (orphan) scenes
- Structural awareness of loops and branching complexity

### Three-Stage Scene Architecture
1. Intro (Start Scene)
2. Development (Branching Scenes)
3. Ending (Result Scenes)

This structure guides coherent narrative pacing while preventing uncontrolled branching.

### Play & Export
- In-browser preview player
- Standalone HTML export
- Ren’Py (.rpy) script export
- JSON-based project backup and restore

---

## Technology Stack

- Frontend: React 19
- Language: TypeScript
- Styling: Tailwind CSS
- AI Integration: Google Gemini API  
  - gemini-2.5-flash (text)  
  - gemini-2.5-flash-image (image)
- State Management: React Hooks
- Build Tools: Vite / Webpack
- Image Processing: HTML Canvas API

---

## System Architecture

- Client-side processing only (no backend server)
- All logic, image processing, and file handling run in the browser
- Reduced operational cost and improved data privacy
- Entire project stored as a single JSON object for easy save/load/export

---

## Data Schema (JSON Example)

    {
      "title": "String",
      "characters": [
        {
          "id": "UUID",
          "name": "String",
          "expressions": [
            { "id": "UUID", "imageUrl": "Base64" }
          ]
        }
      ],
      "scenes": [
        {
          "id": "UUID",
          "dialogue": [
            { "text": "String", "characterId": "UUID" }
          ],
          "choices": [
            { "text": "String", "nextSceneId": "UUID" }
          ]
        }
      ]
    }

---

## User Workflow

1. Enter a theme and generate a story draft or demo project.
2. Configure game settings (title, synopsis, cover image, start scene).
3. Add characters and generate or upload expression sprites.
4. Review and adjust the branching scene tree.
5. Edit scene details: backgrounds, dialogue, and choices.
6. Preview the game and export as JSON, HTML, or Ren’Py scripts.

---

## Expected Outcomes

- AI-Assisted Creation Support  
  Enables non-experts to create playable visual novel games with AI assistance.

- Rapid Prototyping  
  Quickly visualize and validate narrative ideas during the planning phase.

- Iterative Design Optimization  
  Generate multiple prototypes and select the most promising one for refinement.

- Structure-Oriented Narrative Design  
  Scene tree visualization encourages logical and coherent storytelling.

- Reduced Development Cost  
  Serverless, client-side architecture minimizes infrastructure requirements.

- Scalability  
  Ren’Py export allows seamless transition from prototype to commercial development.

---

## Credits

Created by: Tae-wan Kim