On play mode, you can test and prototype your project as a choose-your-path game. Every turn, the player advances the story by choosing one of the available options.
Μore specifically:
{info} To let others play your project, you must make it public, first.
To run your project on Play Mode, you must first Set the Play Mode start.
To set the Play Mode start:
To remove the play mode start:
{info} There can only be one starting element in a project.
You can also choose to quickstart Play Mode from any element in your project. To do that:
To run your project on Play Mode, click on the play icon at the top right of the workspace.
{success} Making changes in your project updates Play Mode in ⚡ real-time!
The Play Mode is actually the only environment where you can reorder an element's clickable options.
While running your project on Play Mode, drag and drop options to the desired order. Arcweave will save your preferences.
When you attach audio assets to elements, these audio files will automatically play during transitions between elements in Play Mode.
The Play Mode interface includes audio controls in the top navigation bar:
Audio settings and playback states are maintained throughout your play session, allowing for a consistent audio experience as users navigate through your interactive story.
Arcweave allows you to customize the appearance of the Play Mode interface using custom CSS via the Style Editor.
To access the Style Editor:
The Style Editor panel provides a dedicated environment for writing and managing your custom CSS:
The following keyboard shortcuts are available within the Style Editor:
Shortcut | Action |
---|---|
Tab |
Indent the current line (inserts 2 spaces) |
Shift + Tab |
Outdent the current line (removes 2 spaces) |
You can target various parts of the Play Mode UI using specific CSS classes. Here are some of the commonly used selectors based on the underlying structure:
Selector | Description | Notes |
---|---|---|
.prototype |
The outermost container for the entire Play Mode interface. | Applied higher up in the application structure. |
.prototype__main |
The main content area, excluding potentially fixed elements. | |
.prototype__root |
A primary wrapper within prototype__main . |
Scrollable. Contains the element-specific div. |
#el-[element-id] |
The div specific to the currently displayed element. | e.g. el-38375689-9e4d-430e-954c-65205eb622fe |
.prototype__wrapper |
An additional wrapper inside the element-specific div. | Contains .prototype__content and .prototype__options |
.prototype__content |
The container holding the element\'s visual parts and text. | |
.prototype__header |
Container for media (cover, icon, components without cover). | |
.prototype__media |
Holds the cover image, embed, or icon. | |
.prototype__components |
Grid container for attached components. | |
.prototype__body |
Container for the element\'s main text content. | |
.prototype__body .editor |
The rich text editor instance displaying the content. | Target p , a , etc. inside this. |
.prototype__options |
The container holding the clickable choice/option buttons. | |
.prototype__option |
An individual choice button. | Contains the option text directly (use v-html ). |
.prototype__body.showArrow |
Style the body when the single-path arrow is visible. | Arrow itself is an ::after pseudo-element. |
Notes:
.prototype__option
directly (e.g., .prototype__option { color: blue; }
or .prototype__option p { font-weight: bold; }
). There isn't a separate label class.Example:
To change the background color of the option buttons and make their text bold:
/* Target the container for options if needed */
.prototype__options {
padding-top: 15px;
}
/* Style individual option buttons and their text */
.prototype__option {
background-color: #4a90e2; /* A nice blue */
border-radius: 8px;
margin-bottom: 10px; /* Add some space between options */
color: #ffffff; /* White text */
font-weight: bold;
}
/* Example: Change main text color */
.prototype__body .editor {
color: #e0e0e0; /* Slightly lighter grey text */
}
Beyond the general classes, you can apply styles to specific elements shown in Play Mode. Each element's content is wrapped within a div
that has a unique id
attribute, typically starting with el-
.
To find an element's ID:
div
element that has an id
attribute like id="el-abcdef12345..."
. Copy this ID (including the el-
prefix).You can then use this ID in your CSS selectors with the standard ID selector (#
):
/* Style the body text only for a specific element */
#el-your-specific-element-id .prototype__body {
font-family: 'Courier New', monospace;
font-size: 18px;
}
/* Style the options only for a specific element */
#el-your-specific-element-id .prototype__option {
background-color: darkred;
}
This allows for highly granular control over the appearance of individual parts of your story.
{info} Experiment with different CSS rules and selectors to achieve your desired look and feel. Use your browser's developer tools (usually by pressing F12) while in Play Mode to inspect elements and discover the most specific selectors for your needs.
When Arcweave renders an element containing arcscript segments, it runs them in the order they appear. If those segments assign new values to variables, you can inspect the changes using the Play Mode's debugger.
To open the debugger:
The debug drawer shows the number, name, type, before and after value of each of the project's variables, tracking any changes in real time. You can change on the fly the before values of the variables to inspect how their after value changes in real-time.
{success} When your game's logic doesn't work as expected, the debugger helps you define and fix bugs by demonstrating irregular behaviours of variables.
Debug info is visible only to the owner and editors of a project. If you can see the other UI elements but not the debug button, make sure that you are either the owner or an editor of the project.
{primary} To have an element "revisit" itself in Play Mode you can do it via a connection to a jumper linking to that element.