|Tutorial for creating visual novels in Tuesday JS editor (alpha version)|
|Launch the editor in current browser for PC, Chrome, FireFox, Opera, Edge Chromium, Safari or their analogues
Warning: Editor does not work in Internet Explorer and Edge browsers.
|Step 1 : New project|
|Create a new project by clicking on the file icon in the upper left corner.|
|Step 2 : Setting up a new project|
|In the window that appears, specify the working folder with the resources for the project.|
|Step 3 : Available localization|
|Indicate the project name and available languages.
The 1st added language will be set as default language of the novel.
|Step 4 : Add story block|
| Click on "Create Project", now we can proceed to create a story block by clicking on the "Add story block" button in the lower right corner.
A story in Tuesday JS is made up of story block that the reader can switch between as they progress through the story, using choices or their consequences.
|Step 5 : Setting up a story block|
|We set the block name in Latin letters and the block color as desired.
The player will not see these names or colors, they are needed for your convenience when navigating through the plot.
Click "Create Block".
The first created story block will be considered the start block by default. if necessary, you can change it in the project settings.
|Step 6 : Add scene|
|Open the created story block by clicking on the three dots on the left side
Click (+) for call the menu of elements
And add a new scene to the story block in the pop-up menu.
|Step 7 : Scene background|
|In the scene options window that appears, set the background image by clicking the folder icon.|
|The dialog box that appears displays all matching files from the project's working folder.|
|Specify images for other languages if necessary, otherwise the image for the rest of the localization will be taken from the default language
Click “Apply” and you will see the scene appear in the story block.
|Step 10 : Add Dialog|
|Now you need to add a dialog element to it. Click the top (+) button and select "Add Dialog".|
|Step 11 : Launch scene edit|
|In the item that appears, click the menu button and select "Scene edit".
The Tuesday JS story structure is divided into story blocks that contain the story scenes, and inside the scenes there are dialogs with other elements like text, graphics and choices.
|Step 12 : Main menu|
|We are now in the scene editor. Since the first created story block is the start one, it is logical to make the main menu in it.
Under "Buttons & Choices", click (+)
|Step 13 : Buttons & Choices|
|A button appeared in the layout
And a panel with its parameters appeared in the right menu.
|For the button, set the "go to" parameter to the value "Next scene"
Which means that when you click on it, the story will continue in the current story block.
After pressing "Back" button to return to the script.
|Step 15 : add dialogue text|
|Add another dialog to the scene by clicking in the middle (+) and selecting the "text" element|
|Step 16 : Text setting|
|A window with parameters for the dialog will appear. We set phrases for all available languages.
The text area both in the editor and in the already created novel will not be displayed if no text is specified, so the text must be specified for all translations.
If the translation texts differ in the number of phrases, then you can write “skip”, then the phrase will be automatically skipped.
|Now we can see how the entire interface looks.
Click the menu of this dialog box and choose "Scene edit".
|Step 18 : Interface view|
|In the section "text panel (global)" we can change the text area.
In the section "interface buttons (global)" add new buttons for the interface and their appearance.
It is important that the mark (global) means that the changes will affect the entire story, and not a specific scene.
|Step 19 : Add sprite|
|Now add the sprite to the scene,
Find the "Arts" item and press (+)
|In the window that appears, select the desired sprite from the working folder.|
|We place the element in the scene and set its parameters in the same way as with the buttons.
And do not forget about localization.
|Step 22 : Duplicate element|
|We create selection elements for the further development of the story.
To do this, in the menu of the last dialog item, select the "Duplicate" item, so as not to place the sprites again.
|In copied dialog, select "Scene edit"|
|In the Scene Content section click on "Edit Text" and set a new text for the dialog,|
|Step 25 : Character name|
|This time we will set the character name in the Settings Name Panel section.
The name translation is set together with the text.
|Step 26 : Name panel|
|Now we can see that the character's name has appeared in the scene,
Just like in the text panel, the "name panel" does not appear if the name is not specified.
You can change the appearance and position of this element in the "Name panel (globally)".
|Step 27 : Сhoice|
|Then add select buttons in the same way as when creating a menu. In the section "Buttons & Choice".
One of the buttons sets the value "go to" to "Next scene".
And back to the script.
|In the scene, add another dialog for choice with the value "Next scene"|
|Next, we will create a new story block for the development of an alternative story, and add a scene and dialogue with the sprite to it. (Following the same steps of previous paragraphs)|
|Return to the scene editor for a dialog with a choice, for the second button set the value "go to" to a new story block.|
|Step 31 : Linking plot blocks|
|Now we can see the name of the new story block in the "go to" item.
We select it and return to the script.
|Now we can see in the script that one of the choice leads to another story block.|
|Step 33 : Preview|
|Using the preview, you can check the project with the selected localization.|
|Step 34 : Save project|
|Most browsers save files by default in the Download folder, where the project will most likely be placed.
To reopen the project, you need to move the json file of the project to the working folder.
|Step 35 : Open project|
|When opening a project, just point to the folder where the json file is located and Tuesday JS will find it by itself.
If there are multiple json files in the folder, Tuesday JS will ask which file you want to open.
|Step 36 : Build project|
|The situation is similar when exporting a project to an html file.
It will go to the Download folder, and it will need to be manually copied to the working folder to the rest of the history resources.
|It is important to understand that Tuesday JS is still under development and some things may not work correctly.
If you notice something like this, be sure to send me an email: email@example.com