Skip to main content

Composer Overview

Clicking a world box in the dashboard will take you to the composer.

note

When you are just starting out with Elm Story, the composer can feel a little overwhelming. Read through this bulleted guide quickly from top to bottom, but don't feel as though you need to remember everything. As you get more comfortable with the interface, refer back to validate and reinforce your memory.

If you prefer a natural introduction to Elm Story, consider joining our Discord community where you can ask questions. The r/ElmStoryGamessubreddit is also a great place to request clarifications and provide feedback.

Composer UI

info

Title bar buttons will invert position on macOS to match platform convention.

1. World Outline

The World Outline panel starts with the title bar.

  • The back button will return you to the dashboard.
  • When another element is selected, click the world title to select the world (root) element.
  • To export your storyworld as a PWA or JSON file, click the export button.
  • Add a folder, scene or event element to your world by clicking the add element button.

Below the title bar is an ordered, nested list of your world's elements.

Element Composer

  • Open a element for editing by clicking the desired element title in the list.
  • Reorder and nest world elements via drag and drop.
  • Right-click a element to rename, remove or add a nested element.
  • Click the caret to the left of the parent element title to expand or collapse.
  • Collapsed parent elements display children count to the right of the element title.
info

The world (root) element supports folder and scene child elements.

Scene elements support event child elements.

info

Both the add element menu and element context (right-click) menu will display supported options, contextual to your current selection.

2. Element Composer

The Element Composer provides an expansive view for working on multiple scenes and testing your world.

Element Composer

  • Selecting a scene will open/focus the respective scene tab.
  • Selecting a event will open/focus the parent scene tab and focus the respective event node.
  • Like Photoshop, organize your layout by dragging and dropping world and scene tabs.
  • Below each tab title are contextual tools.
info

Open elements and custom layouts are not currently persisted between sessions.

Preview Tab

Hosts a hot-reloading, embedded version of the Elm Story Runtime Engine (ESRE) used for testing your storyworld.

Preview Tab

Below the tab title is the devtool bar:

Reset

  • Restarts world after resetting ESRE's bookmarks, events and state.
info

ESRE will recommend a storyworld reset when you make changes the runtime engine is unable to hot-reload.

Xray

  • Toggles a debug panel displaying current event and world state information.
  • Clicking content element name will open/focus the parent scene map and focus the respective event node.

Toggle audio icon

  • Mute or unmute audio in the preview.

Expressions

  • Toggles expression highlighting.
  • Hover a highlighted expression to peak the underlying code.

Blocked Choices

Scene Tab

An editable map (graph) of a scene's events and jumps (nodes/vertices) and connected paths (edges).

Scene Tab

Below the tab title is a contextual tool bar:

+ Event / + Jump

  • Available when nothing is selected.
  • Adds event or jump in the center of the view.

Center Selection

  • Available when events, jumps or paths are selected.
  • Centers selection, but does not zoom.
  • Used when you have a selected event, jump or path that is not currently in view.

Below the tool bar is the scene map.

Scene Map

  • Click-drag the background to pan.
  • Scroll your mouse wheel to zoom.
  • Right-click an empty spot to add event and jump nodes at click position.
  • Click node to select that node.
  • Double-Click node excerpt to edit node content.
  • Hover over node excerpt and click the button to open edit node content.
  • Scroll your mouse wheel in node excerpt area to scroll node content.
  • Right-click node headers for additional options, including remove.
  • Click-drag node headers to reposition nodes.
  • Click-drag node handles to create paths between nodes or create new nodes.
  • After selecting a single node, press backspace to remove connected paths.
  • Click dotted lines to select paths.
  • After selecting a single dotted line, press backspace to remove selected path.
  • Select an event node to add choices.
  • Double-click choice titles to rename inline.
  • Right-click choices for additional options, including remove.
  • Double-click event node headers to rename title inline.
  • Double-click the character area to open the character manager.
  • Shift-click-drag across nodes to select multiple nodes and paths for reposition.

In the bottom-left corner are map controls for zooming in and out, fitting the view and locking the map from edits.

info

Zoom level and position are persisted for each world and included during storyworld export.

info

Locking the map from edits is not currently persisted between sessions.

In the bottom-right corner is the minimap, useful for visualizing your scene layout and what part of your scene map is currently visible.

  • Events are purple.
  • Jumps are green.
  • Storyworld Ending events are red.

3. Element Properties

Selecting a element in the World Outline or Element Composer will update Element Properties with representative options.

Aside from title, elements possess different features, settings and relationships. In the following image, you'll notice that we've selected the A balanced and pessimistic statesman choice, a child of the Choose Character event, which is a child of the Intro scene.

Based on our current selection, Element Properties displays what we can manage in this selected hierarchy.

Element Properties

The next guide on World Elements will cover the properties of each element type in detail.

4. Managers

Manage your world's global variables and characters

5. About Elm Story

The Es button will open the about modal displaying:

About Elm Story

6. Toggle Fullscreen

F11 will also toggle fullscreen mode.