[Example Project] Scripted Storytelling

Hi Everyone!

Wanted to share a project, which you might have seen on one of our Twitch streams this year. It’s called Scripted Adventure and allows you to create your own branching stories with characters!

Download project here

In this example you have two characters that “say” lines you’ve assigned to them in specified order. User can tap through the screens and has 2 buttons to choose from. Each button defines the branch story goes from that point. 

The setup of the project is actually pretty simple, you don't have to set up each particular screen. You need to configure just one of each type - speech bubble, character icon, text settings etc and their style will be applied everywhere.

Then simply write down their lines in order you want them to appear!

Adding a Character Style

To add a character to your story we’ll need to set up their style first. It is defined by  "character" Scene Object. Each object is a layout of various screen images (icons, backgrounds etc). These can come in any number and forms. The only requirement is that one of Scene Objects should be named “text” and have a TextComponent. This is where your character’s line will be placed.

Once you have the character object, you can connect it to the SceneController object. This will allow our story to have references to all character styles that we are using. 

There is a SceneController script that has references to all character styles.

DescriptionLibrary.js contains descriptions of each character and their "speech" style. It is later used in your story script, to distinguish between different characters. SceneController specifies which sceneObject corresponds to each style.

Adding choice buttons

Additionally you can create buttons of choice.

To create a question with options for the user you should have a similar set up: a container with question and buttons. Like before, make sure you have a Scene Object named “text”, where your customized question will appear.

Make an object for each option you want to have. There doesn’t have to be exactly 2 buttons. You can create as many as you wish!

To make them intractable add TouchComponent to each button.

Adding your story

Your story is described in the DescriptionLibrary.js

Each scene in the story is described there as a simple entry with parameters.

Regular entry

Each entry has a set of parameters to describe when and what will be shown.

style: One of the predefined character styles that you created. 

text:   Message to display

customTrigger: Add Custom Trigger to any screen and use it in combination with BehaviorScript. 

In this example eyeglasses appear as soon as the character proposes to wear it.

Options Entry

This format describes an option entry which allows your readers to make decisions to progress the story. 

optionsId: Array of unique names to define choices made with buttons. This can be anything you want, you will use it later to assign certain entries

optionsText: Text to display on buttons

showIf: Some option from optionsId. Show this regular entry only if specified choice was triggered. This way you can create branching for your story. 

In this example, the user can choose between eyeglasses or ears to wear. The entries referring to the item that wasn’t chosen will be hidden.

typeFX: Add special typing effect :D

To Recap

So to create your own scripted adventure you will have to:

• edit existing / add new characters and their lines style
• add questions with answer buttons to redirect user narrative
• edit character lines in DescriptionLibrary.js, set up custom triggers and special effects if needed

Let us know if you have any questions or have ideas of what kind of example projects you want to see. 

Can’t wait to see what you come up with!

Best,

Olesia