@@ -13,55 +13,55 @@ A modular, JSON-driven visual novel engine built with React and Vite, inspired b
1313### Creating Your First Visual Novel
1414
15151 . ** Create JSON files** in the ` public/data ` folder:
16- - ` start.json ` - Your first scene
17- - ` order.json ` - Controls the flow of your story
16+ - ` start.json ` - Your first scene
17+ - ` order.json ` - Controls the flow of your story
1818
19192 . ** Minimal ` start.json ` example** :
20- ``` json
21- [
22- {
23- "text" : " Welcome to my visual novel!" ,
24- "speaker" : " Narrator" ,
25- "background" : " room.jpg"
26- },
27- {
28- "text" : " Would you like to continue?" ,
29- "speaker" : " Narrator" ,
30- "type" : " choice" ,
31- "choices" : [
32- {
33- "text" : " Yes" ,
34- "value" : " Yes"
35- },
36- {
37- "text" : " No" ,
38- "value" : " No"
39- }
20+ ``` json
21+ [
22+ {
23+ "text" : " Welcome to my visual novel!" ,
24+ "speaker" : " Narrator" ,
25+ "background" : " room.jpg"
26+ },
27+ {
28+ "text" : " Would you like to continue?" ,
29+ "speaker" : " Narrator" ,
30+ "type" : " choice" ,
31+ "choices" : [
32+ {
33+ "text" : " Yes" ,
34+ "value" : " Yes"
35+ },
36+ {
37+ "text" : " No" ,
38+ "value" : " No"
39+ }
40+ ]
41+ }
4042 ]
41- }
42- ]
43- ```
43+ ```
4444
45453 . **Minimal `order.json` example**:
46- ``` json
47- [
48- {
49- "event" : " start.json"
50- },
51- {
52- "condition" : " user_choice == 'Yes'" ,
53- "event" : " continue.json"
54- },
55- {
56- "condition" : " user_choice == 'No'" ,
57- "event" : " end.json"
58- }
59- ]
60- ```
46+ ```json
47+ [
48+ {
49+ "event" : " start.json"
50+ },
51+ {
52+ "condition" : " user_choice == 'Yes'" ,
53+ "event" : " continue.json"
54+ },
55+ {
56+ "condition" : " user_choice == 'No'" ,
57+ "event" : " end.json"
58+ }
59+ ]
60+ ```
6161
62624 . **Add assets**:
63- - Place background images in ` public/assets/backgrounds/ `
64- - Place audio files in ` public/assets/audio/music/ ` and ` public/assets/audio/sfx/ `
63+ - Place background images in `public/assets/backgrounds/`
64+ - Place audio files in `public/assets/audio/music/` and `public/assets/audio/sfx/`
6565
66665 . **Run your visual novel** with `npm run dev`
6767
@@ -95,24 +95,24 @@ Each event file is an array of nodes that define the visual novel's content:
9595 "background" : " background-image.jpg" ,
9696 "music" : " background-music.mp3" ,
9797 "sfx" : " sound-effect.mp3" ,
98- "effect" : " fade" or { "variableName": "value" }
98+ "effect" : " \" fade\" OR { \ " variableName\ " : \ " value\ " }"
9999 }
100100]
101101```
102102
103103##### Node Properties
104104
105- | Property | Type | Description | Example |
106- | ----------| ------| -------------| ---------|
107- | ` type ` | string | Node type (dialogue, choice, jump, etc.) | ` "dialogue" ` |
108- | ` text ` | string | The text to display | ` "Hello world" ` |
109- | ` speaker ` | string\| null | Character name or null for narration | ` "Alice" ` |
110- | ` background ` | string | Background image filename | ` "forest.jpg" ` |
111- | ` music ` | string | Background music filename or "stop" | ` "theme.mp3" ` |
112- | ` sfx ` | string\| array | Sound effect(s) to play | ` "click.mp3" ` |
113- | ` effect ` | string\| object | Visual effect or variable assignment | ` "fade" ` or ` {"var1": "value"} ` |
114- | ` choices ` | array | Array of choices (for choice nodes) | See below |
115- | ` target ` | string | Target event file (for jump nodes) | ` "chapter2.json" ` |
105+ | Property | Type | Description | Example |
106+ | -------------- | ---------------- | ------------------------------------------ | ------------------------ ---------|
107+ | ` type ` | string | Node type (dialogue, choice, jump, etc.) | ` "dialogue" ` |
108+ | ` text ` | string | The text to display | ` "Hello world" ` |
109+ | ` speaker ` | string\| null | Character name or null for narration | ` "Alice" ` |
110+ | ` background ` | string | Background image filename | ` "forest.jpg" ` |
111+ | ` music ` | string | Background music filename or "stop" | ` "theme.mp3" ` |
112+ | ` sfx ` | string\| array | Sound effect(s) to play | ` "click.mp3" ` |
113+ | ` effect ` | string\| object | Visual effect or variable assignment | ` "fade" ` or ` {"var1": "value"} ` |
114+ | ` choices ` | array | Array of choices (for choice nodes) | See below |
115+ | ` target ` | string | Target event file (for jump nodes) | ` "chapter2.json" ` |
116116
117117##### Choice Objects
118118
@@ -141,9 +141,9 @@ The `order.json` file defines the flow of events:
141141
142142##### Order Properties
143143
144- | Property | Type | Description | Example |
145- | ----------| ------| -------------| ---------|
146- | ` event ` | string | Event file to load | ` "start.json" ` |
144+ | Property | Type | Description | Example |
145+ | ------------- | -------- | ----------------------- | ----------------- ---------|
146+ | ` event ` | string | Event file to load | ` "start.json" ` |
147147| ` condition ` | string | Condition to evaluate | ` "user_choice == 'Yes'" ` |
148148
149149### Condition Syntax
@@ -207,11 +207,11 @@ The engine provides a comprehensive save/load system:
207207
208208- Saves are stored in localStorage with the prefix ` vn_save_ `
209209- Each save contains the full game state, including:
210- - Current event
211- - Current node index
212- - All choice variables
213- - Event status tracking
214- - Timestamp
210+ - Current event
211+ - Current node index
212+ - All choice variables
213+ - Event status tracking
214+ - Timestamp
215215
216216### UI Customization
217217
@@ -243,6 +243,7 @@ Adjust the typing speed of the text with the text speed control in the settings
243243#### Event Viewer
244244
245245The event viewer shows all events and their status:
246+
246247- White: Unseen
247248- Orange: In Progress
248249- Green: Completed
0 commit comments