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 ... 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 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




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
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.

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.

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.

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.

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


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



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.

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.

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
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.

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.
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