Wiki
With our wiki, you can get a complete overview of the editor in all of its aspects.
Introduction
In this guide our goal is to explain in a simple way how to best use the Storyground editor.
New story
As soon as you create a new story, a popup will open where you can decide the main features.
You may decide how many languages to work with, to set up a simplified or standard working area, the number of characters you’ll be able to insert in each “node”. Of course you’ll be able to edit these options even after starting, to not limit the user’s work and the editor’s potential.
Working area
It’s possible to see, as soon as we generate a new story, that the editor has already added a node. A node is basically any rectangle in the working area. We will analyse each type of node in the appropriate section. At the top is the toolbar, while on the right the sidebar is present.
In the toolbar we can find several elements, including the chosen languages and the format of the working area (diagram mode or writing mode).
Working area modes
Diagram mode
It’s the default option which offers a view of the flowchart(s). It works like a sheet of paper where we can draw diagrams on. With this mode, nodes can be positioned in any part of the working area, and by selecting a node it is possible to drag it not just with the mouse, but also with the arrow keys.
Writing mode
It allows one to have a view of one’s work in a more tidy way, that is by only showing text nodes. This mode allows you to identify typos immediately without having to scan flowcharts with your eyes in a more laborious and tedious way.
Toolbar
The toolbar is made up of the following elements
Back to the dashboard
Leave the working area and go back to the user’s homepage
Save
CTRL+s
Previous action
CTRL+z
Following action
SHIFT+CTRL+z
Import a story
it allows you to upload your work on the platform
Export a story
it allows you to download your work on your device
Show preview
When you click on this button, a menu will show up providing a preview of the way the story will present. This function was created specifically to spot mistakes at an early stage.
Settings
It allows you to edit on the flight the parameters set previously, when the story was created
show ID
Show all node’s id
Help
It leads to this page
Sidebar
It’s possible to collapse the sidebar with the arrows in the top right. The sidebar contains 3 tabs: nodes, levels and variables.
Nodes
Nodes are the core of Storyground. Following is a brief description of every node, and how to best make use of it.
Inserting a node in the working area is as easy as dragging it in it with the mouse. In order to link it to a different node you will have to click on the circles at the bottom of the node and then on the circle of the node you want to link to it. This will draw a line between the two nodes. The link between nodes can be selected by clicking on it and then deleted by pressing the backspace button.
Start
Ideally, the “start” node is used to mark the beginning of an important section of the story. It can be easily used in conjunction with the node “link”.
In the node two pretty important parameters are present:
- Begin game, which is used to make your story start from the selected start node.
- Main start is a parameter used in writing mode to understand from which node the story starts in each level, thus changing the order in which nodes are shown.
End
The node is (one of) the possible ending(s) of the story. It can be used in two different ways, depending on the check in the “open a new page” box.
In case this option isn’t selected, the node can show text and a picture.
In case it’s selected, a link to redirect the user to can be added.
Game over
The node is (one of) the possible ending(s) of the story. The text inserted in this node will lead back to the beginning of the story when clicked.
Sentence
Through this node, it’s possible to insert text and pictures in the text segments. The amount of characters you can insert can be determined in the settings.
Choice
The node is used to create choices in the story. The amount of characters you can insert can be determined in the settings.
Set variable
The node is used to set or change the value of a variable.
if variable
The node gives two different results depending on the logical operator used.
Link
It has the function of linking to a start node. The main function of this node is to navigate between different levels, but it can be used to link any start node (in the case of multiple values, one will be chosen at random).
Null
It’s used to link nodes without giving any functions. Null was mostly designed to optimise the links between nodes. The value of this node is much better appreciated when you have to work with a vast quantity of other types of nodes linked to each other.
Emit
Can be used to emit data outside the reader see devs section for more info.
Levels
Levels can be considered different sheets in the same working area.
In order to link narration between levels, the link node is necessary.
Variables
It’s possible to set numerical variables to use in your story. To those with no programming background, its use may appear convoluted, but we still encourage you to try it out. Variables will be necessary in order to use certain types of nodes, such as set variable and if variable. It’s also possible to specify a max value for the variable (when the story is initialised, the value of each variable will be 0).
For a specific example, check the “How to use variables” section.
p.s
The use of variables isn’t fundamental to use the editor, but it’s recommended that they be used in order to manage a complex story.
How to use variables
Variables are an interesting tool that may seem complex, but in reality follows a simple logic. In summary, math symbols are used to compare numerical values of variables and then show or hide certain portions of the story depending on said numerical values.
First, it’s possible to create a variable in Storyground by doing as follows: from the sidebar, click on variables. Then you can choose a name for the variable. Let’s assume our variable is used to figure out if a character has enough pieces of candy to give to their grandchildren, and call the variable “candy”.
You will only have to click on the “add variable” button. Once the variable is created, you just have to go back to the nodes tab and drag the “set variable” node on the working area.
In the empty space under “Variables” you will have to type the name of the variable you just created, in our case “candy”: the red cross will become a green checkmark, thus confirming that the variable was inserted correctly.
Now all that’s left is to decide the value of the variable. For example, we will now assign to “candy” the value of 0, so let’s click on the = sign and leave the number at 0.
The node in the working area should show “candy = 0”.
Now the if variablenode will be used, as it’s always used in tandem with set variable. If variable determines the condition that needs to be fulfilled by the variable. If variable is set in the same way as set variable.
Let’s use a practical example for our “candy” variable to show how it can be applied.
Let’s imagine that in our story our character has to give candy to their grandchildren, as we established earlier.
The character will be asked the question “do you have enough candy?”.
If variable here will be set to >2, so the character will need at least 2 pieces of candy to fulfil the condition. The options, created with the choice node will be:
- I don’t like children
- Yes, I do
- No, I don’t
Note that for option 2. to even be seen by the player, they have to have at least 2 pieces of candy.
Here’s how we will use the various nodes to represent this:
First a text node, asking the question “do you have enough candy?”, then we’ll link the set variable to it, with the value set to 0. We will link this node to a choice node and an if variable node. The choice node will be the “I don’t like children” option, and the if variable node will be set to >2.
Then we will link two choice nodes to this if variable node, one saying “Yes, I do” and the other saying “No, I don’t”.
Now, since the variable was set to 0, our character has no candy. Therefore, the condition of having >2 candy in the if variable node will not be fulfilled. Therefore, the “Yes, I do” option will not be visible to the player. If we changed the value in “set variable” to anything greater than 2, all three options will be visible.
We decided to dedicate a few more pages to the use of variables because it may seem counterintuitive. Variables were created in order to help users deal with long and complicated stories, and thus to better manage previously written information.
If we wanted to give a practical example outside of Storyground, we can consider RPG (RolePlayinG) games, both in the form of video games and tabletop games. Who roleplayed in the past knows there are quests to complete, and these quests have conditions (for example, talking to a certain character, walking a certain path, fighting this or that enemy, finding a treasure etc.). If, while we roleplay, our character has done an action or not, the game “knows” and will act accordingly. In the case of video games, data is stored in the device we use to play, while in tabletop games the game master will be the one to remember what you did.
In the viewers the variables will not be made clearer, because what will be shown is the response to satisfying a certain condition or not.