Visual Novel Creator
Thank you for playing Girl Propblems; which was created using the Visual Novel Creator.
By waffle (Norm Perry) 6/24/2024. The purpose of VNC was to edit JSON files used by my
javascript VN engine. The system is very simple, but I kept getting lost in the dialogs.
I created this tool just to help me get an overview of how all the dialogs were connected.
Contents
Important Links:
Quick Start
Globals
Dialog Editor
Buttons
Menus
Contact Information
Top
Quick Start
Project setup:
Most of this is automated ...
- Need a web server setup (included)
- Need index.html (or whatever) that calls script.js; will be autocreated at game launch if you forget.
- Need script.js ; will be autocreated if not found
- Need dialogues.json (this is your actual novel)
- folders for images (locations and people)
- All this stuff must be in same folder
How all this works ...
This app (Visual Novel Creator) uses relative paths of images ...
RELATIVE TO LOCATION or PEOPLE
Location is assumed to be the background images while people are smaller.
As a general rule, there are a possible 4 images per dialog.
- Background Image
- Left Image
- Right Image
- Center Image
Background works well to show the location while Left/Right to
show who is talking. The center image could be to show what they are talking about.
In general, each dialog should be in order (1,2,3,4) with the default
Next button moving to the next one. In reality, that does not work.
For branching dialogs, things can get tricky. That is why I created this.
From the main display you can see all dialogs at a glance and see how they connect.
Then double-click or click edit to make changes.
The initial display will have the dialogs sorted by index (in order) with some
text being displayed, followed by the jumps specified by the buttons.
Invalid jumps will be highlighted to see what needs editing. I like setting jumps to
9999 to flag it as invalid. The JS engine will detect this and reset to index 0 (the start).
Paths are Important
- The server runs in the folder installed. Your project must be in a sub folder
- Your root folder of your project is assumed to be where dialogues.json is located.
- All Images are relative to your .json file
- Index.html and script.js will be created for you in the same path as your .json if not already there.
- favicon.ico will also be copied to your .json location if not already there
Other Links:
Contents
Contact
Top
Menus
File Menu
Server Menu
Sort Menu
Dialog Menu
Various major help topics
Other Links:
Contents
Contact
Top
Dialog Menu
This is where you manage the project. From here you can
- View Link - Default View. Show index value of button links in dialogs
- View Captions - Display Button Captions instead of dialog links
- Add Dialog - Adds a new dialogue to the view at the current location.
for speed, it duplicates most of the settings from the previous dialogue
and adds one button that defaults to "Next" with the target being the next index.
This will also scan all previous and following dialogues and adjust links
- Delete Dialog - Deletes the current dialogue and adjust all links.
Any link pointing to this location will be set to 9999 to flag as invalid.
- Edit Dialog - Calls up the
dialog editor to permit editing the text and
to modify the buttons.
- Confirm New Dialog - If checked, Will ask to confirm chaining a new dialog.
you can uncheck this to avoid having answer this question over and over if creating a long chain.
This can also be "unchecked" by answering the question that pops up during edits.
Each dialogue listed show it's Index, some of the text, and the first few options.
Only the links are shown, not the text for the buttons. To see more detail use
dialog editor .
FileMenu
Just the usual file stuff...
reminder: project files get copied to _temp_ folder
The only real file managed by this app is "dialogue.json".
All project and such are for managing folders. To test your game,
all files get copied from your directories to _temp_ so the Server
can find them.
- New Project - Saves changes, Clears data, Creates Default Globals
NOTE:
You need at least 1 dialog to save a project.
- Open Project - Saves changes, Loads new data, Deletes _temp_
- Save Project - Saves changes to projectpath/dialogue.json
- Save Project As - Saves JSON as new file. Does not copy folders
- Project Globals - Calls up the
Globals editor. This editor manages all paths and Global
variables used by your project
- Set HighLight - Permits you to change the Highlight Color
Loading Error
Sometimes, when loading a JSON, you may encounter an error.
The best thing to do in this case is call up Notepad++,
navigate to the indicated line and see what you find there.
in this case is was an extra comma as shown here:
"nextDialogue": 90,
The extra comma was from me creating the file by hand using copy and paste.
The last item in an array, does not get a comma.
Save Error
During a save, a temperary file is created, so your original remains unharmed.
The temp file is then checked to ensure it is valid. If it is not valid,
a message like this is diplayed. You will notice the similarities in the message.
In addition, I display the lines before and after the error. Most of the time,
the error will be on the second line ...
"text":"Eric,
in this case. The error is a missing close quote... At the bottom of the text
I added a "Section =" .... this is to narrow the scope for you to search in...
"index":19 indicates the error is most likely in Dialogue index 19.
By "knowing" text and nextDialogue are references to button settings ...
you can see exactly where the error is located: The button "Eric" in
dialog index 19 that has a target of 22.
you could use the sort menu to search for Index 19, or index 22 and find this.
Contents
Menus
Top
Server Menu
To run your game, you need a dedicated server. Here is where you control
your server. Security concerns ....
This server will only access files in the _temp_ folder and is restricted to
only certain types ... images, javascript, text, json, html ...
This makes the server very safe to use, as if any remote users try to do
anything, they will be blocked. Also, do not place anything into this folder
you feel is important. This folder gets deleted regularly.
- Start Server - Starts the web server running
- Stop Server - Shuts down the webserver
- Test Game - Starts the web server if required, deletes the _temp_ folder
contents, copies all game data to _temp_ and launches the browser.
- Force Close - This will close the browser when shutting down the server.
WARNING
This may close all browser tabs. This is not recommended, but
sometimes you are starting and stopping many times. This will help keep control.
Contents
Menus
Top
Sort Menu
Sometimes, you just can't find something. That is what this menu is for.
Normally, all dialogues are in order (by index), the same way they are stored in
the JSON . These sorting options do not change the order of the dialogues,
only the displayed order.
- Index - Highlight specific Index
- Text - In my VN, I used [Name] to show who is talking. If you sort by
text, you can easily find all dialogues where this person is talking
- Location - This sorts dialogues by the background image used
- People - This sorts dialogues based on the people images used.
first by Left image, then Right image next is Center image.
- Invalid Links - This sorts by listing dialogs that have broken links:
meaning links to dialogs not yet created. I use 9999 to mark connections
to dialogues that I have not written yet. But, sometimes you forget about these.
- Globals - Sorts dialogs based on globals used. It checks the main
dialog and the buttons. You specify a global you are looking for, and it lists those using it
Contents
Menus
JSON
Top
Help Menu
This list the most common help sections, or the ones
that are most important.
Contents
Menus
Globals
Dialog Editor
Buttons
Contact Information
Top
Globals Editor
Also called the Project Settings
This looks complicated, but lets break it down.
- At the top you have the full path to your project
- "location/" is the sub folder to location images.
These images are assumed to be full background images.
Click the Browse button to change this
- "people/" is the path to people images. These are assumed to be
smaller images used to represent people during chat. Click Browse
to change this folder
- The main display shows all your global variables and there
initial settings. To edit, double-click on it, or press the Edit button.
- Add - Add a new global variable to the project. Name your global
HUDmyglobal
to have your global show up as part of the HUD display.
special:
HUDdayofweek is predefined to display day of week.
If you do not need this, you can safely delete it.
- Edit - Edit an existing Global
- Rename - Changes the name of a global. Provides an option to change
all references to this global to the new name. Comes with a warning.
- Delete- Delete a global from the list. Warning: If the global is in use,
you should remove it from use before deleting it. Provides an option
to delete all references to this global, comes with a warning.
See Sort Menu
- Help - Brings you here
- Cancel - Cancel changes and close
- Save - Save Changes and close
Contents
Menus
Dialog Editor
Buttons
JSON
Contact Information
Top
Dialogs Editor
Where most of your time will be spent
There is a lot happening here, but I tried to keep it simple.
Important
Backgrounds are assumed to be full sized
and in the "location/" folder while (left/right/center) images
are assumed to be in th "people/" folder. You can change this in
Globals Editor
. The text below
the image shows the partial path relative
to this path.
Example: "kara/karakitchen.jpg" is actually "location/kara/..."
while "kara/backpack.png" is "people/kara/...". Click on the Image
to change it. Images not used will show the waffle icon. The images are
shown (left/right/center) because the center image is the least used.
Just my own preference ...
Images
- Background - The Image your dialog will be rendered on
- Left - Left side Character Image
- Right - Right side Chacter Image
- Center - Center Character Image
Left - Click an Image to change it
Right - Click an Image to Clear it
On a new Dialog, the last images used will be selected by default.
To remove an image from constantly being added. you need to
Right - Click to clear, Left - Click (and then cancel the select image)
That will basically save the blank image as the default image.
This control scheme may seem strange, but most of the time, the
previous image use just works, and clearing an image is just one click.
But, sometimes, you forget to clear an image and so you may want a way
to clear the last used image. I do this for the Center image as it
it not used most of the time.
Top Right
- Dialog Index - the current Index. (see buttons below)
- Globals - Below the index is the global used by this Dialog.
To keep things simple, my system only permits one global per dialog.
At first, this seems limiting, but as most "conversations" take multiple
dialogs to present, you can have as many globals as you like, just chain them
over multiple dialogs .. If no global is used, it will simply be "Global"
- Under Global - This is the value set by the dialog. Most of the time,
you just need to set this to a 1 to indicate a goal is complete. In this
case, "Kara" drank coffee, so the quest is complete. This will be blank
for most dialogs as it is only used with global variables.
Warning
this is a javascript JSON file. If you use "1" instead of 1
it may or maynot work the same. You could also use "Hello" but using
Hello might have issues later.
- Mode - When not used (as in this case) will simply say "Mode".
Use this to decide what to do with a global variable: Add, Sub, Set (default)
to add/subtract your value to the Global. Exmple: if buying coffee you might
set the Global to Money, the field to 10, Mode to "Sub" to subtract
10 from money to buy the coffee.
- Help - Brings you to this help topic
Below this is the actual message to be displayed to the player.
Again, remember, this is javascript - JSON so the text needs to be
inside quotations. Also, you may want to use single quotes instead of
double quotes or maybe even backquote. Just remember that JS behaves funny
when you use the enter key inside text.
Buttons
The main display below the text is a list of buttons that will
display to the right of the text. The order shown in the display
will be the order drawn on the display. The columns show a
summary of the button. What follows is an explaination of how
these setting interact with each other; and the dialog overall.
- Button - The text to present to the user on the button. The
button will auto-size to hold the text, but you should keep this short.
- Index - The dialog Index that this button links to. You can
RightDoubleClick to jump to this dialog.
- Global - The Global variable examined by the button (if any). If
this is set, this button will
ONLY
be shown if
the global variable matches requirements that follow
- Value - The value that will be compared to the Global variable.
- Mode - How the variable will be compared. If not set,
the default will be for the Value to match the Global. Possible modes are:
less,more,rless,rmore and unset (blank).
see Buttons
for more information.
- Stop - Normally blank. If any text is here, it is for you eyes only.
if the conditions are met to display the button, and there is any text here,
no other buttons will be rendered. This permits you to have a
button that looks just like another button, but depending on
the global, some other options will be hidden. For example:
Player may buy coffee, but not have crackers to sell ...
On the right side are management buttons. The Edit and Jump have
shortcuts: LeftDoubleClick to Edit and RightDoubleClick to Jump.
RightDoubleClick and Jump will save changes before jumping.
- Add - Add a Button to the Dialog.
- Edit - Edit a Button's settings
- Shift Up - Move a Button up the list
- Shift Down - Move a Button down the list
- Delete - Remove a button from the dialog
- Jump - Jump to the dialog specified by the button, and save changes.
If a jump is invalid [example: 9999] A prompt will ask if you wish to create a dialog chain.
If you answer yes, the 9999 will be replace with the index of the newly created dialog.
You can avoid this warning by Unchecking the "Confirm New Dialog" option in the menu or
by answering "Yes" in the followup prompt "Hide Message in the future".
- Cancel - Close without saving
- OK - Save changes and close
I felt that some people would like an example of a complex dialog showing how these settings interact with each other.
Notice how there are 3 buttons that say "See Eric". I will refer to them by the Index
- 104 - checks the global "dayofweek" = 0 [Mode is blank] If this is true,
This button will be shown, and ,
Stop will prevent all other buttons from being displayed.
- 105 - checks the global "dayofweek" les than 6 [Mode is less], If this is true,
Show this button and Stop will prevent the remaining buttons from being shown.
- 1004 - if neither 104 or 105 are shown, this button will be shown.
The "Get Dressed" is always shown, as that is the first one on the list.
Contents
Menus
Globals Editor
Buttons
JSON
Contact Information
Top
Button Settings
There is not much happening here. This is just to make all the possible
settings easy to find.
- Text - This is where you enter the text to be scene in the button
- Next Dialog - Where you enter which dialog this button connects to
- Global - Select the global variable to test. If no global is selected,
"Globals" will be displayed.
- Value - This is the value to test the global for. If no other options (see below)
are selected, the Global Variable above must match this value for the Button to be displayed.
- Mode - This selects the methode of comparision (see below) on how the Value will be
compared to the Global. Only if the comparison is true, will the button be displayed.
If no comparison is selected, "Mode" will be displayed.
- Stop - User text you enter for your own use. However,
ANY
text here will
prevent any other
buttons from being checked. Usefull if you need to check for
multiple global values. Use this to hide buttons.
- OK - save changes and close
- Cancel - Close without saving
- Edit - Edit Globals
- Help - Links to Here
There are several comparison modes. Use Mode to select one.
If the comparison is true, the button will be shown. Also,
if the comparison is true AND stop is set, no other buttons will be drawn.
- Less - read this as "If Global is Less Than Value, Show Button"
- More - "If Global is More than Value, Show Button"
- RLess - R is for random. The random range is 0-100.
read this as "If Global is less than (Random 0-100), Show Button"
- RMore - "If Global is more than (Random 0-100), show button"
- If this is not set, "Mode" will be shown. (default) read this as
"If Global equals Value, Show Button"
Reminder, Stop only applies if the button is visible.
Contents
Menus
Dialog Editor
Globals
JSON
Contact Information
Top
JSON File Format
All dialog information is stored in .json form. This is a flexible
file format recognized by javascript as a javascript object. Most of the time,
the details of this format are not important; but, if something goes wrong,
you will need to fix it. The browser debugger is usefull for explaining the error.
Most of the time is will be a symbol in the wrong place. This can happen easily.
A common way is to leave out quotes when using text. It is easy to forget that
anything you type using my tool is being placed into a javascript object.
For this reason, you need to know how your "code" is entered into the json file.
Globals
Globals are placed at the start of the JSON file:
{
"title": "Girl Problems - StoryBoard",
"debug": true,
"jquest": 0,
"dayofweek": 0,
"coffeequest": 0,
"underwear": 10,
"rquest":0,
"dave": 0,
"clean": 0,
"school": 0,
"shower":0,
"coffee":0,
Notice quotes around the text, while not around numbers. If you get an error,
the debugger will tell you where in the JSON. You can fix it with notepad++.
If you reload it with VNCreator, everything can become corrupted because when loading,
having a comma in the wrong place just breaks everything. Consider the global
"title" : "Girl Problems..." If there was an extra quote in there, It mat still
work, but with the wrong title, or it may add in an extra global ...
So, if you encounter errors, fix it with notepad++ (it is free and just works).
Dialogs
Dialogs are placed after the globals and fill up the rest of the File
"dialogues": [
{
"chatmsg": "[Girl Problems] Select Chapter",
"index": 0,
"backgroundIMG": "kara/karabed.jpg",
"chatIMG1": "kara/backpack.png",
"options": [
{
"text": "Intro",
"nextDialogue": 21
},
{
"text": "Meet Dave",
"nextDialogue": 71
},
{
"text": "Routine",
"nextDialogue": 89
}
]
},
the last dialog does not have a comma
and the file is terminated with:
]
}
And here is the full specification for a dialog
"dialogues": [
{
"chatmsg": "[Girl Problems] Select Chapter", // chat msg to display
"questa": "jquest", // optional quest to change setting of
"questb": 1, // value to change to setting to
"questm": "set", // mode, or what to do with questb value, options are
// "set" or undefined, sets quest level to this value
// "add" adds questb to questlevel
// "sub" subtracts questb from questlevel
"index": 0, // debug msg ID only used during testing
"backgroundIMG": "kara/karabed.jpg", // background image to display (fills display)
"chatIMG1": "kara/backpack.png", // 1,2,3 ... left,right center images
"options": [ // button descriptions
{
"text": "Intro", // text to display in button
"nextDialogue": 21 // next dialogue index to go to on click
},
{
"questa": "jquest", // only show this option if specified quest is active
"questb": true, // quest must be active AND in this state
"questc": "Bob is here", // stops all other options, text is not shown
"questm": "rless", // questm is comparison mode options are
//"undefined - defaults to match questb"
//"less" questbqueststate
//"rless" random(100)questb
"text": "Meet Dave",
"nextDialogue": 71
}
]
}
Contents
Menus
Top
Contact Information
ArchonRpg
waffle on itch
Contents
Menus
Top