Visual Novel Creator

Contents

Quick Start

• 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

RELATIVE TO LOCATION or PEOPLE

• Background Image
• Left Image
• Right Image
• Center Image

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:

Menus

Other Links:

Dialog Menu

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

FileMenu

reminder: project files get copied to _temp_ folder

• 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

Save Error

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

• 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

Help Menu

Globals Editor

Project Settings

• 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

Dialogs Editor

Important

relative

Images

• Background - The Image your dialog will be rendered on
• Left - Left side Character Image
• Right - Right side Chacter Image
• Center - Center Character Image

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

Buttons

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

• 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

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

Button Settings

• 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

• 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"

JSON File Format

Globals

{
  "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,

Dialogs

"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:
	
  ]
}

"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
	}
  ]
}

Contact Information