Quickstart: Creating Your First Interactive Story

Welcome to our quickstart guide! The goal of this page is to get you up-and-running, writing your first story as soon as possible. This page will walk you through the process of creating your first interactive story using our platform. By the end, you'll have a good grasp of the basic concepts and tools at your disposal.

Introduction to Interactive Storytelling

Interactive stories, also known as Choose Your Own Adventure (CYOA) stories, are narratives where readers make choices that affect the plot's direction. Key concepts include:

• Reader Agency: Readers actively participate in shaping the story.
• Branching Narratives: The story splits into different paths based on reader choices.
• Multiple Endings: Stories can have various outcomes depending on the choices made.

The Editor

Our editor consists of three main components to help you create your interactive stories:

Text Editor

Where you write the content of your story.

• Rich text formatting options (bold, italic, headers, etc.)
• Support for embedding images
• Inline scripting to easily add story logic
• Auto-saves your changes

Story Diagram

A visual representation of your story's structure.

• Nodes represent individual pages or story sections
• Arrows show connections between pages based on choices
• Auto layout feature for keeping things organized

Scripting Blocks

Simple programming tools to add logic and interactivity.

• Visual drag-and-drop block scripting
• Conditional statements for branching logic
• Variables to track player choices and story state
• Math operations for more complex game mechanics

Getting Started

Creating a New Story

1. Go to your Dashboard (or try it out without creating an account).
2. Click the "New Story" button in the top-right of your dashboard.
3. Enter a title for your story (don't worry, you can change this later).

Navigating the Editor

After creating your story, you'll be taken to the editor view. Here's what you'll see:

On most computer screens, all three components (Text Editor, Story Diagram, and Scripting Blocks) will be visible as resizable panels, as seen above. But depending on the size of your screen, the editor layout may look a little different.

• On smaller screens, the Scripting Blocks panel will be hidden. Access it by clicking the code icon in the top left.
• On mobile devices, only one panel is shown at a time. Use the icon buttons in the corners to switch between panels. In the diagram view, double-tap a page node to return to the text editor for that page.

Creating a Simple Story

Let's walk through creating a basic interactive story to familiarize you with the tools.

Step 1: Writing Your First Page

1. In the Text Editor, you'll see a blank page titled "New Story".
2. Write an opening paragraph for your story. For example: "You wake up in a mysterious forest. The air is thick with mist, and you can barely see a few feet in front of you. You notice two paths leading away from where you stand."

Step 2: Creating New Pages

1. Switch to the Story Diagram view.
2. You'll see a single node with a green play icon , that says "New Story". This is the start of your story.
3. Hover your mouse over the small gray box at the bottom-center of the page node. Your cursor should turn into a crosshair , indicating that you are hovering over the correct element.
4. Click and drag to start creating a page connection, then drop it anywhere on the canvas to create a new page.
5. Rename that page to "Left Path" in the Text Editor.
6. Repeat these steps to create "Right Path".

Step 3: Adding Choices

1. Switch back to the starting page, you should now see two new choice blocks, each pointing to your new pages.
2. Inside the empty textbox of each choice block, type out a label to display for each choice. These choices will now appear as buttons in your story.

Step 4: Previewing Your Story

1. Finish up the story by writing an outcome for each page.
2. Click the "Play" button (or ) in the top-right corner of the Text Editor to see how your story looks and plays.
3. Test the different choices to ensure everything is working correctly.

Congratulations! You've created a simple interactive story with branching paths.

Next Steps

There is a lot that this guide doesn't cover, including the logic blocks (such as the if and if-else blocks) for more story flow control, variables to store custom data, and the go-to block for making custom page jumps. But this should be enough to get you started.

Now that you understand the fundamentals, you can start creating your own stories. Remember, the best way to learn is by doing! Experiment with different story structures, add more complex choices, and explore the various scripting blocks available.

In the following sections, we'll dive deeper into each component of StoryScapes, explaining advanced features for more flexible storytelling.