AutoSave

The parameter is responsible for automatic saving of the script execution progress and values ​​from the array variables in each dialog. This will allow the continue to script from the end of the last session.

	"autosave": setting autosave progress (true / false),

The attribute is responsible for loading autosave. "tue_load_autosave" is specified in "name" or "go_to"

Buttons

A set of buttons and parameters for the main interface (dialog management, saving and loading). They will not appear in the block specified in launch_story.

	"buttons": [{
		"name": "Functional name or id button id",
		"art":"path to the background image of the button",
		"art_size": ["width", "height"] images on the button,
		"position": [left, right, top, bottom] position relative to the edges of the scene,
		"size": ["width", "height"],
		"color": "button color",
		"color_text": "Text color",
		"className": "a set of css style classes",
		"style": "css style parameters and their values",
		"indent_text": "indents for text",
		"size_text": "text size"
	}]

"name" - button identifier (analogous attribute id in html), it defines the button functionality. The names and descriptions of all available buttons can be found in the System Buttons section

		"name": "Functional name or button id",

Adding third party functions to buttons using javaScript,

document.getElementById('/** name button */').onclick = function(){ '/** button functionality */ }

In the "buttons" section. Add all the buttons to the interface by adding them to an array in curly brackets, with all required elements separated by commas.

"buttons": [{
		"first button parameters"
	},{
		"first button parameters"
	}]

Working example "buttons"

"buttons": [
			{
				"name": "tue_back",
				"position": ["0","55%","0","8px"],
				"size": ["52px","52px"],
				"color": "#888",
				"size_text": "48px",
				"text":"<"
			},{
				"name": "tue_next",
				"position": ["55%","0","0","8px"],
				"size": ["52px","52px"],
				"color": "#888",
				"size_text": "48px",
				"text":">"
			},{
				"name": "tue_home",
				"position": ["50%","0","0","8px"],
				"size": ["52px","52px"],
				"color": "#888",
				"size_text": "48px",
				"style": "transform: translateX(-50%);",
				"text":"M"
			}
		]
    },

Characters

Global parameters for most characteristics can be found on "name_panel". By specifying id, character identifier and parameters required for it, including localization. Also, if you specify this id in the "name" dialog parameter, then, all values ​​for this symbol will be taken from this array. Unless the dialog itself has its own parameters set in "name_panel".

	"characters": {
		"character id": {
			"color": "background color name panel",
			"color_text": " text color name panel",
			"className": "a set of css style classes для name panel",
			"en": "English name localization",
			"ja": "日本語名のローカリゼーション",
			"ru": "Локализация имени на английском языке"
		}

Working example "characters"

	"characters": {
		"boss": {
			"className": "negativ",
			"ru": "Босс",
			"en": "Boss",
			"ja": "ボス"
		},"doctor": {
			"className": "girl",
			"ru": "Врачь",
			"en": "Doctor",
			"ja": "医師"
		},"assis": {
			"className": "assistent",
			"ru": "Assistant 5000",
			"en": "Assistant 5000",
			"ja": "Assistant 5000"
		}
	},

In case of character change, there is no need to make changes to the whole script, it will be enough only to make changes to this array.

Languages

Array of supported project languages, English "en" is set by default. At the start, the engine automatically detects the browser language and, if there is a suitable localization, it automatically switches to it. Otherwise, the default language will be English if it is available, if not then the first language in this list. Language dialect values ​​(like en_GB and en_US) are not supported.

	"languages": [language codes available in the project],

All language codes can be found at: "HTML Language Code Reference"

Working example "languages"

	"languages": ["en","ja","ru"],

Launch story

Id name of the block from which the script starts (for example, the block with the main menu). If this parameter is not specified, the script will start from the first block in the list.

	"launch_story": "id of the block with which the script starts",

Name panel

Panel to display the name and avatar image of the character. Its location relative to the text panel parameters text_panel

	"name_panel": {
		"art":"path to character avatar or photon drawing",
		"art_size": ["width", "height"] Image size,
		"className": "a set of css style classes",
		"color_text": "Text color",
		"color": "color elements",
		"indent_bottom": "indent the text bar from the bottom edge",
		"position": [left, right, top, bottom] position relative to the edges of the text_panel,
		"size": ["width", "height"],
		"size_text": "text size",
		"style": "css style parameters and their values"
	},

Working example "name_panel"

	"name_panel": {
		"size": ["0","48px"],
		"position": ["0","0","0px","0"],
		"size_text": "18px"
	},

Text panel

Basic panel settings to display texts in the scene

	"text_panel": {
                "className": "a set of css style classes",
                "color": "color of element",
                "color_text": "Text color"
                "position": [left, right, top, bottom] position relative to the edges of the scene,
                "dialog_speed": symbol spawn rate,
                "indent_text": "indents for text",
                "indent_bottom": "indent the text bar from the bottom edge",
                "size": ["width", "height"],
                "size_text": "text size",
                "style": "css style parameters and their values",
	},

"dialog_speed" is the speed apparition of text in the text panel, set in milliseconds, where 0 - the text appears immediately and 1000 -is one character per second.

	"dialog_speed": symbol spawn rate,

"indent_bottom" is the text bar's indent from the bottom of the scene is 0 by default.

	"indent_bottom": "indent the text bar from the bottom edge",

Working example "text_panel"

	"text_panel": {
		"size": ["95%","25%"],
		"color": "#9cf",
		"indent_bottom": "32px",
		"size_text": "20px",
		"dialog_speed": 20
	},

Sounds

An array of sound files used in the project. Due to the specifics of the browser support for audio formats (mpeg or ogg), you need to specify a file without an extension, the engine itself will determine the supported format .ogg or .mp3. The project can use only mp3, it can be played in almost all browsers. But in case this is not the case, it is recommended to duplicate the audio data in .ogg format with the same name and in the same folder.

	"sounds": {
			"id_sound_1":"File path without extension",
			"id_sound_2":"File path without extension",
		}

Title

The name of the project to display in the page tab and other headings.

	"title": "the name of project",

Localization is supported for the specified languages ​​in the languages options.

	"title": {
			"en":"Name in English",
			"ja":"日本語での名前",
			"ru":"Имя на русском"
		}

Key

Assigning functionality to keyboard keys via key ID event.code.

	"key": "keyboard control settings",

load_autosave - Continue from last autosave

launch_story - Go to the block specified in parameters / launch_story (main menu)

next - next line

back - previous line

save - save script stage

load - load the last stage of the script (not autosave)

full_screen - puts the Tuesday element in full screen mode

Working example "key"

	"key": {
		"load_autosave": "KeyC",
		"launch_story": "Escape",
		"full_screen": "KeyF",
		"next": "ArrowRight",
		"back": "ArrowLeft",
		"save": "KeyS",
		"load": "KeyL"
	},

Variables

Array of variables to store data. When you save the progress of the script, this data is also saved.

These values ​​are used in script elements such as "variables" to change the value and during script, and "legacy_choice" to automatically determine the next block of the script.

	"variables": [set of global variables used in the project],

Working example "variables"

	"variables": [
		"experience_points": 80,
		"magic_points": 100,
		"health_points": 100
	],

Variable values can be displayed in the text_panel specifying its name in angle brackets

{
	"parameters": {
		other values
		"variables": [
			"health_points": 100
		],
	}
	"example_block_1": [{
		"dialogs": [{
			"text": "You have <health_points> health points left"
		}]
	}]
}

In this case, the phrase "You have 100 health points left" will appear.

Background music

Launches looped background music in the scene.

	"background_music": "path to audio file without extension only its name"

Localization supported

	"background_music": {
			"en":"path to audio file for English",
			"ja":"path to audio file for Japanese",
			"ru":"path to audio file for Russian"
		}

Background image

Analogue of the css parameter css background_image. Designed to display the background in the scene.

	"background_image": "path to the image file"

By default, it is aligned to the center of the scene and proportionally fills the entire background, regardless of the size of the scene or the file itself.

Supports localization if there is a background image for the specific translation.

	"background_image": {
			"en":"path to image file for English",
			"ja":"path to image file for Japanese",
			"ru":"path to image file for Russian"
		}

Dialogs

An array of the sequence of dialogues in the scene and its attributes such as art and selection buttons Choice.

	"dialogs":[
			{Parameters and elements of the replica of the 1st dialogue},
			{Parameters and elements of the replica of the 2nd dialogue},
			{Parameters and elements of the replica of the 3rd dialogue}
	]

Art

Also "sprite" or "image". Analogue of the html tag <img>. Designed to display graphic elements in the scene such as characters or objects.

"art": [{
		"url":"path to the image file",
		"position": [X position, Y position],
		"size": ["width", "height"],
		"style": "css style parameters and their values",
		"className": "a set of css style classes"
	}]

It supports localization if there are images created for a specific translation specified in the "parameters" / "languages" section.

		"url": {
				{Parameters and elements of the replica of the 1st dialogue},
				{Parameters and elements of the replica of the 2nd dialogue},
				{Parameters and elements of the replica of the 3rd dialogue}
			}

You can add multiple images to the scene by creating additional elements in curly brackets in the array with all the necessary parameters.

"art": [{
		"url":"Images 1",
		"position": [X position, Y position],
		"size": ["width", "height"]
	},{
		"url":"Images 2",
		"position": [X position, Y position],
		"size": ["width", "height"]
	}]

Working example "art"

"art": [{
		"position": ["75%", "50%"],
		"size": ["auto", "90%"],
		"style": "transform: translateX(-50%) translateY(-50%);",
		"className": "example",
		"url": {
				"en":"img/example_en.png",
				"ja":"img/example_ja.png",
				"ru":"img/example_ru.png"
		}
	},{
		"position": ["25%", "50%"],
		"size": ["auto", "90%"],
		"style": "transform: translateX(-50%) translateY(-50%);",
		"url":"img/character.png"
	}]

Text

Character dialogue or other texts in a specific scene. Also, elements to change the "text_panel" in the text.

	"text": {
		"className": "a set of css style classes",
		"style": "css style parameters and their values"
		"en":"Boss"
	}

You can simply specify a replica, in this case, all missing parameters will be taken by default from the "parameters" / "text_panel" section.

	"text": "Hello how are you"

It is possible to add a localized dialogue option for the specified languages in the "parameters" / "languages" section.

	"text": {
		"en":"Hello how are you",
		"ja":"こんにちは、元気ですか",
		"ru":"Привет как дела"
		}

The dialog box can display the values ​​of the variable from the "parameters" / "variables". section. If you specify the name of the variable in angle brackets, then the value from the variable of the same name will appear in the text instead.

{
	"parameters": {
		other values
		"variables": [
			"health_points": 100
		],
	}
	"example_block_1": [{
		"dialogs": [{
			"text": "You have <health_points> health points left"
		}]
	}]
}

In this case, the phrase "You have 100 health points left" will appear.

One location may have more or fewer lines than another. In this case, you can specify the value 'skip', then this line will be automatically skipped.

{
	"text": {
		"en":"Hello!",
		"ja":"こんにちは、元気ですか",
		"ru":"Привет!"
	}
},{
	"text": {
		"en":"How are you",
		"ja":"skip",
		"ru":"Kак дела"
	}
}

In this case, the 2nd line will be skipped in the Japanese localization.

Text add

Analogous to the usual "text" element, except that the text from this element is added to the already existing text in the "text_panel". Basic element for visual novels

	"text_add": {
		"art":"path to the background image of the panel",
		"art_size": ["width", "height"] size background image,
		"className": "a set of css style classes",
		"color_text": "Text color",
		"color": "color element",
		"indent_bottom": "indent the text bar from the bottom edge",
		"position": [left, right, top, bottom] position relative to the edges of the scene,
		"size": ["width", "height"],
		"size_text": "text size",
		"style": "css style parameters and their values"
		"en":"Boss"
	}

Working example "variables"

{
	"text": "Hello! "
},{
	"text_add": "will you go for a walk?"
}

Name

Parameter to display the name and avatar of the character in the text panel. This data can be specified in various forms.

The easiest option is just provide his name. If this name does not match the id identifier in the "parameters" / "characters" section, then the name will be displayed as specified in this parameter.

	"name": "Boss"

In the "parameters" / "languages" ​​section, you can specify a localized variant of the name for other lenguages.

	"name": {
		"en":"Boss",
		"ja":"ボス",
		"ru":"Босс"
		}

If you often use the same name, you can specify it in the "parameters" / "characters" section. This greatly simplifies the name change process.

{
	"parameters": {
		other values
		"characters": {
			"boss": {
				"en":"Boss",
				"ja":"ボス",
				"ru":"Босс"
			}
		}
	}
	"example_block_1": [{
		"dialogs": [{
			"name": "boss"
		}]
	}]
}

Parameters for changing "name_panel" can be specified both in "dialogs" for the current line, and in the "characters" array for a specific name.

	"text": {
		"art":"path to the background image of the button",
		"art_size": ["width", "height"] изображения на панеле,
		"className": "a set of css style classes",
		"color_text": "Text color",
		"color": "color of element",
		"indent_bottom": "indent the text bar from the bottom edge",
		"position": [left, right, top, bottom] position relative to the edges of the scene,
		"size": ["width", "height"],
		"size_text": "text size",
		"style": "css style parameters and their values",
		"en":"Boss"
	}

If some element is not specified, then the default value from "parameters" / "name_panel" will be taken. If the name or its ID is not specified, then this panel will not appear in the scene.

Choice

Buttons to select the next block of the chart and changing values ​​in the "parameters" / "variables". Same as "buttons" except that select buttons appear on a specific line.

	"choice": [{
		"go_to": "id of the block for the transition",
		"position": [X position, Y position],
		"size": ["width", "height"],
		"className": "a set of css style classes",
		"sound": "Sound id"
		"sound_stop": "Sound id to stop"
		"style": "css style parameters and their values",
		"color": "background color",
		"color_text": "Text color",
		"variables": [
			["variable name", "variable operation", value]
		],
		"text": {
			"en":"Translation of the text into English",
			"ja":"テキストの日本語への翻訳",
			"ru":"Перевод текста на русский"
			}
		}
	]

The "go_to" parameter transfers further narration to the specified block. If the "go_to" parameter is missing, the current block will continue.

The "variables" parameters make changes to the variables at the moment the select button is pressed.

Working example "choice"

{ "name": "inga",
	"text": "which road to take?"
	"choice": [{
		"go_to": "block_left",
		"position": ["25%", "0", "0", "50%"],
		"size": ["256px", "0"],
		"className": "buttons hot_center",
		"text": "<== to the left"
	},{
		"go_to": "block_right",
		"position": ["75%", "0", "0", "50%"],
		"size": ["256px", "0"],
		"className": "buttons hot_center",
		"text": "on the right ==>"
	}]
}

Variables

Parameter to change values ​​from "parameters" / "variables" section in specific "dialogs" or when choosing "choice"

	"variables": [
		["variable name", "variable operation", value]
	],

Variable operation

"set" - set a value in a variable (analog of the "=" operator in JavaScript)

"add" - add a value to the already specified value in a variable (analog of the "+ =" operator in JavaScript)

Working example "variables"

{
    "parameters": {
		other values
		"variables": [
			"experience_points": 80,
			"magic_points": 100,
			"health_points": 100
		],
	},
	"example_block_1": [{
		"dialogs": [{
			"variables": [
				["experience_points", "add", 10],
				["magic_points", "add", -15],
				["health_points", "set", 200]
			]
		}]
	}]
}

When starting the block "Example block 1"
10 experience points will be added to the value of "Experience Points",
15 points will be removed from the "Magic Points".
and "Health Points" will be set to 200 points.

Events

An element intended for external use in JavaScript. It marks the beginning of the moment on the script where this element is indicated.

	"event": "id_event",

tuesday.addEventListener(id_event', function(event) { alert("event starting") } );

Controll

Hides the interface buttons in the dialogues specified in the ( parameters / buttons ) section. After a dialog with the "controll": "hidden" parameter is set, buttons will be hidden in all subsequent dialogs until the end of the block. To display buttons you need to specify "controll": "visible".

	"controll": "'hidden' / 'visible' displaying interface buttons in a dialog",

Legacy choice

Automatic transition to another block of history when the specified conditions are met in variables (parameters / variables)

{
	"legacy_choice": [
		["variable name", "comparison operator", comparison value, "id of the block for the transition"]
	]
}

Important! This element is not part of the "dialogs" array. And run as part of a block next to the "dialogs" elements.

"example_block_1": [{
		"dialogs": [{"text": "hello"}]
	},{
		"legacy_choice": [
			["variable name", "comparison operator", comparison value, "id of the block for the transition"]
		]
	}
]

If the conditions do not match the values in the variables, then you can specify the "go_to" parameter, in this case the history will go to the specified block.

{
	"legacy_choice": [
		["variable name", "comparison operator", comparison value, "id of the block for the transition"],
		{"go_to": "example_block_4"}
	]
}

Working example "legacy_choice"

{
    "parameters": {
		other values
		"variables": [
			"experience_points": 80,
			"magic_points": 100,
			"health_points": 100
		],
	},
	"example_block_1": [{
		"legacy_choice": [
			["experience_points", "=", 80, "example_block_2"],
			["experience_points", "<", 80, "example_block_3"],
			{"go_to": "example_block_4"}
		]
	}],
	"example_block_2": [{
		"dialogs": [{
			"text": "Awesome!!!"
		}]
	}],
	"example_block_3": [{
		"dialogs": [{
			"text": "you cool"
		}]
	}],
	"example_block_4": [{
		"dialogs": [{
			"text": "hello"
		}]
	}]
}

Touch Swipe

Allows you to switch dialogs by swiping your finger across the touchscreen. Mouse not supported

 <script type="text/javaScript" src="touch_swipe.js"></script> 

Toast

A small message appears for a while

 <script type="text/javaScript" src="toast.js"></script> 

Customizing CSS by Toast ID

#toast {
	background-color: rgba(74,64,69,0.7);
	border-radius: 24px;
	border: 0.1em solid rgba(207,173,156,0.7);
	height: 48px;
	width: 256px;
}

toast (message) - shows the message, the message parameter sets the message text.

Example of use in javaScript (text output to progress loading event)

tuesday.addEventListener('load', function(event) {toast("load")});

An example of use in tusday. used in the parameters "dialogs", "choice" and "legacy_choice"

"toast": " Message text",