The first game

This page will guide you through the creation of the simplest of games, and from there we will be increasingly adding more complexity and use cases for lots of features.

A few notes before we get started

Storage

The moment you access the application, everything, from that point on, will be created in your computer. This means that there will be no communication with any server, and you'll be the only person that can access the story.

The story is being kept in the local storage of your browser, which means that its state can be easily deleted (clearing your browser history would be enough). To prevent unnecessary stressfull moments, two save actions have been added:

  1. "Save" - which will update the local storage version of the story;

  2. "Download game" - which will export the story to a file that will be kept in your computer (downloads folder).

Be careful and export your story often!

Game structure

Introduction

To follow the original structure of the fighting fantasy games, all games have the following:

  • Skill points

  • Stamina points

  • Luck points

  • Gold

  • Provisions

  • Inventory

At any given moment, if a player's stamina reaches 0, he will be dead and the game is over - regardless of other means to end the game.

Even though, by default, the structure is divided by those items, you can disregard any, or all, of them. They are not mandatory, apart from specific contexts (if you plan on having battles in-game, the skill and stamina points must be set).

Battles

The sequence for combats are as follow:

  1. Both dice will be rolled for the creature and its skill score will be added to the result. The resulting value it's its attack strength;

  2. Both dice will be rolled for the player ant his skill score will be added to the result. The resulting value it's his atack strength;

  3. If the player's attack strength is higher than the creature's, the player has wounded the creature. Proceed to step 4. If the creature's attack strength is higher than the player's, the creature has wounded the player. Proceed to step 5. If both attack strengths are the same, there is no penalty for either, and the next round takes place. Go back to step 1;

  4. The player has wounded the creature, so 2 points will be subtracted from its stamina score (the player can use his luck to increase the damage - see below);

  5. The creature has wounded the player, so 2 points will be subtracted from his stamina score (the player can use his luck do decrease the damage - see below);

  6. Begin the next round by returning to step 1. The combat is over when the creature or player's stamina reaches 0.

Escaping

When preparing a battle scene, you can give the player a chance to flee. This option is present at the combat screen. By default, the player will lose 2 stamina points when using it.

Luck

At various times during the game, you may want to introduce a luck factor. Gustaf let's you use, through several actions and blocks, trigger specific actions when the player is lucky or unlucky. These are clearly described in the editor and in this documentation. Whenever you decide to use luck, this is how it is processed:

Two dice will be rolled. If the number rolled is equal or less than the current lukc score, the player is lucky. If the number rolled is higher the player is unlucky.

Luck in battles

When in combat, luck can be used immediatly after a round. If the player wounded the creature, when lucky 2 extra points can be subtracted from the creature's stamina, and when unlucky only one total will be subtracted; if the creature wounded the player, when lucky only 1 stamina point total will be subtracted, and when unlucky 1 extra stamina point will be substracted.

Provisions

At the beginning of the game, the player will have provisions for 10 meals. When consumed, each meal will add 4 points to the stamina score. You can decide, for each chapter, when a player can consume a meal.

The first screen

When you first arrive, you'll be taken straight to the Editor, where the overall structure of your story will be presented.

Below is a screenshot of that screen with numbers (from 1 to 6) added for these docs, that serve as legend. Details are below.

  1. Main area of the editor, where all the story nodes will be presented;

  2. A button to add a new node, without any relationships, with other nodes, associated with it;

  3. Menu button to access more configurations (see below);

  4. The save button, to save, at any time, the state of the story, to the local storage;

  5. The title of your story;

  6. The first node of your story. By default, the first time you access the application, a single node is created automatically. You can drag around the nodes as you wish, so to create a visualization structure that you are confortable with.

First step - the title

Let's start by giving a title to our story. Just double click "Title", on the top left of your screen, write the new title, and press the enter key or click anywhere outside the input box, to save it. Let's call ours... The Warlock at Firetop Mountain...

Throughout the application there are lots of tooltips that will help you to navigate.

The first node

Now, you'll want to start writing the first chapter. Each chapter is represented by nodes in the editor. Each node, when you hover with the mouse over it, displays a bar at the bottom, besides other information. Image and legend below.

  1. The nodes edit bar, which allows you to, by this order, edit, add a child node, and delete the node;

  2. The summary of the node, with the title, at the top left, and the unique ID of that node, at the bottom right.

The node editor

Go ahead and press the edit button, the first in the edit bar of the node. A new editor will be displayed - and this is called the node editor.

The node editor is where you'll spend most of your time, because it's in this editor that you'll input all the text and configurations of the nodes. Below is a screenshot of the editor with the correspondent legend.

  1. Save and keep the node editor open;

  2. Save and close the node editor;

  3. Close without saving;

  4. The node ID;

  5. Details of the node's relationships: what is/are the previous node/s ("From") and what is/are the next node/s ("To") - this means from what nodes there was a jump to this node, and to what nodes will the story goes from here;

  6. The title of the node/chapter;

  7. An URL for the main image of the node/chapter;

  8. Where the content for this node will be displayed;

  9. The several options for the types of content that can be included - let's keep the details ot these options for later, so we can focus first on creating the simplest story.

Editing the first chapter

So, now we can start editing our first chapter. Imagining we're writing, for the first time, as if we were in 1986, the Warlock of Firetop Mountain, let's begin with the introduction to this story.

You can go ahead and change the title to "Rumours" and press the first button of the options at the bottom - this will add a new "Paragraph".

Everytime you click one of these buttons a new block will be added to the content. These blocks can be dragged up or down to change the order they will be presented in the chapter.

Adding a new "Paragraph" will add a new block to the content. You can then click on it and start typing!

The editor uses Markdown to style the content. A preview pane is presented in the right side of the editor with the html version.

You can add as many new Paragraphs as you want, and change their order, if needed.

If you now save and close the node editor you'll see that the node has been updated with the new title, and now also includes the beginning of the text, to allow for easier navigation, later on.

Creating the first choice

There are three ways through which it's possible to create child nodes:

  1. In the editor view, adding a new chapter through the "Add chapter below" button in any node bottom bar;

  2. In the editor view, using the "Add chapter" button, located at the bottom right of the editor;

  3. In the node editor view, automatically creating new nodes when creating "jumps" (a choice, for instance, will have one or more "jumps" to other nodes, depending on what is chosen).

To create a new node in our story, we will try all of the above.

Creating a new node through another nodes bar

Start by clicking the "Add chapter below" (the middle button in the node's bar) in our only node for the moment. A new node will be created right below the first one. Also a path will be drawn to represent that there's a relationship between those two nodes.

Let's now create the choice that will provide this jump! Click the "Edit chapter" button of the first node. This will bring you back to the node editor view. You can now add a new choice block.

At this point, a new block (a "choice" block) will appear below the paragraph blocks we've already created. By clicking on it, a button to add choices will be visible.

If you then add a new choice, several fields will be visible for this choice. Image and legend below.

  1. The text that will be presented to the user for this choice;

  2. The node to which to jump to;

  3. Settings for this choice (let's forget about them for now);

  4. A button to delete this choice.

For our simple story, two fields will be used: the text field (1), in which we'll input the text being presented to the user for that choice; and the "jump to" (2) field, from where you can start typing the title of the node to jump to or its ID, that any nodes that have that query will be listed below. By then, you can just click on it and the connection is made!

Don't forget to save and then you can close the node editor.

You can add as many choices as you want. Just click again in the button to add choices.

Creating a new node through the add chapter button

To add a new node through the add chapter button, use the button in the bottom right corner of the editor view. A new node will appear in the top right corner, and you can drag it around to any position you want. The process then, to connect the previous node to this new one, is exactly the same as if you were creating a node through the add chapter in other nodes bar.

Automatically creating new nodes when creating a choice

After editing the second node (adding a title and a paragraph), we can now add new choices for it. You can now "Turn west" or "Turn east".

When creating a choice like this, in the node editor view, the field that refers to the node that will jump into has a button at the end of it, that allows you to create that node. The tooltip, appropriately, tells you that that button will "Create a new Node to jump to".

You can now add a second choice, to "Turn east", using the same method. At the end, the screen will look like this:

Closing and saving the node, the editor view will show the two newly created nodes and their correspondent connections to the previous node.

Ending the game

Imagine, that, right at the start of the game, the choice "Turn west" would instantly kill you and end the game. There's a short path to death in this game. You can just edit the node in question, add a paragraph, and a "Over" block.

And you've now created a game!

Testing the game

To test out short game, two options are provided for you:

1. you can go to the menu (top right), select "Settings", set the "Root node", which is the chapter from what you want the test to start, and the press the "Test game" button;

2. Select the "Test game from here" button at the top right, in the node editor view of the chapter you want the test to start with.

The test engine

After you press the "Test game" or "Test game from here" button, you'll be sent to a new window with the game interface. This interface is exactly the same it will be presented to the users of your game.

By default, just for the test game, the skills will be initialized with 30. If you are not planning on using them, you can disregard them at this point.

In it, you'll see all the features and actions of your game, exactly as they'll be presented to the player. More on the frontend interface a few chapters ahead (there'll be a link here if i remember to do it...).

Last updated