Panels
Last updated
Was this helpful?
Last updated
Was this helpful?
The Chapters panel features the story tree, where Chapters can be organized, named, and grouped. Chapters can be linked either one-to-one or one-to-many, and each Chapter contains its own unique Map scene. User decisions within a Chapter trigger transitions between Chapters or Books. Creators define these relationships within the Chapter tab, and movement between Chapters is only possible when they are linked in the Chapter view.
To remove a connection between Chapters, simply click on the connection string and drag it to the right to release the link.
To delete a chapter, click the trash bin icon beside the chapter
To create new chapters, click on the New button on the lower left corner of the Chapters Panel
To duplicate a chapter, click on the Duplicate button on the lower left corner of the Chapters Panel
Importing and Exporting Chapters
To import or export chapters, use the buttons located in the lower-left corner of the Chapters Panel.
Exporting Chapters
âĸ Allows chapters to be copied from one book to another.
âĸ Includes all Sparks and Behaviors used in the chapter, ensuring a complete transfer of functionality.
This feature enables seamless content migration and reuse between books.
Chapters can be easily modified within the Behaviors panel, with the current Chapter name displayed at the top left to indicate which one is being edited.
The behavior tree defines the flow between Chapters and manages Spark Behavior within Maps, responding to user interactions with Sparks both within and across Chapters. Bonfire supports both linear and non-linear branching paths, enabling creators to craft a wide range of interactive and dynamic experiences.
The Behavior Panel can be expanded horizontally to expose more of the screen by placing your cursor on the right edge of the panel to reveal an enhanced arrow resize cursor.
The Toggle Behavior Execution button, also known as the Freeze button, allows enabling or disabling the execution of behavior nodes without entering play mode.
When active, a diagonal blue line appears across the background of the entire application, indicating that Debug Modifiers (in Edit Mode) and connected nodes will not execute. This signifies that the system is in a frozen state.
When inactive, it is possible to trigger Debug Modifiers and execute connected nodes in Edit Mode.
This feature is useful for performing isolated testing without starting the Chapter. However, it is important to note that any changes made during edit mode, such as repositioning in the unfreeze state, will not revert to their original state.
Copy is found on the left side of the Behavior panel. This function creates a duplicate of a behavior node preserving their properties, behaviors, and settings. The copied node can then be modified independently of the original, allowing for rapid iteration and reuse without affecting the original node. This function is commonly used for level design, asset placement, or creating variations of existing elements.
Paste is found on the left side of the Behavior panel. This function is used to place or apply a previously copied node into a specific location or context, retaining the original's properties, settings, and behaviors. The pasted node can be placed at a new position or within a different hierarchy, enabling efficient asset reuse and modification without needing to recreate the object from scratch.
The Retarget Node button opens the Retarget Behaviors Window, allowing the transfer of node ownership from one Spark to another.
For example, in the GIF below, the Collided Effect and Move Cause behavior nodes are originally owned by the Cylinder. By pressing Retarget, ownership of these nodes can be transferred to the Cube, enabling the Cube to execute those behaviors instead.
This functionality also applies to Configs and Symbols, making it a versatile tool for reorganizing and reassigning behaviors within a project.
Zoom to Fit is found on the right hand side of the Behavior panel. In advanced experiences, the number and complexity of nodes can quickly grow, making organization and space management critical. Zooming in, out, and grouping nodes becomes essential for keeping the workspace clear and easy to navigate. The Zoom to Fit function simplifies this by automatically adjusting the viewport to display the selected node(s) or the entire graph within the visible area.
This feature is particularly helpful when working with large or intricate node structures, allowing you to instantly refocus on specific nodes or get a clear overview of the entire behavior tree, ensuring you never lose track of your work.
Found at the bottom left of the Behavior panel, grouping enables creators to organize multiple nodes into a single, labeled group, streamlining complex graphs and enhancing readability. While grouping nodes doesn't alter their functionality, it significantly improves the ability to manage and navigate nodes, especially in larger and more intricate projects. This organizational tool helps reduce visual clutter, making the development process more efficient and easier to understand.
Found at the bottom left of the Behavior panel, grouping, ungrouping separates a previously grouped set of behavior nodes, returning them to their individual, ungrouped state. Once ungrouped, each node can be manipulated independently, giving you full control over individual adjustments and modifications. This process restores the nodes to their original layout while preserving their functionality, allowing for more precise editing and flexibility.
Found at the bottom left of the Behavior panel, Comments can be added within the behavior tree as labels, descriptions, tasks, or resource notes to provide context, explanation, or clarification. They help creators and collaborators understand the purpose and functionality of specific behavior nodes, making it easier to navigate, maintain, and modify complex projects. By offering clear insights into how and why certain behaviors are structured, comments improve both the workflow and long-term management of the behavior tree.
Sub Graph is found at the bottom left of the Behavior panel. A subgraph is a feature in the Behavior panel designed to encapsulate a group of nodes. This is particularly useful for managing large numbers of nodes, which can become difficult to track. A subgraph organizes these nodes into a single unit for easier management and navigation.
Click the Subgraph button located below the Behavior panel.
Assign a name to the new subgraph.
Once the subgraph is created, click the Open button to enter the subgraph and start adding new nodes within it.
To automatically add nodes to a subgraph:
Highlight the desired nodes.
Click the Subgraph button. The selected nodes will be automatically included in the newly created subgraph.
To remove nodes within a subgraph:
Click the Open button in the Subgraph.
Once inside the Subgraph, click the Flatten button. This action removes the nodes from the Subgraph.
Important note:
It is very important to utilize subgraphs to organize your behavior nodes. A behavior panel containing a lot of nodes can introduce significant frame drops especially on lower-end computers. Subgraph can solve this issue by encapsulating nodes inside a subgraph.
When importing a subgraph, the Retarget Behaviors menu will appear. This menu requires assigning a new Spark (or target) to ensure the behavior functions correctly.
Select the appropriate behavior or Spark from the dropdown menu for each listed item.
Click the Retarget button to apply the changes.
Note: Ensure that the appropriate Modifier and Spark are available for the behavior to function correctly.
To export a Subgraph:
Open the desired Subgraph using the Open button.
In the upper-right corner of the behavior panel, click the Export Subgraph option from the menu.
Choose the folder location where the Subgraph file will be stored. The file type will be a Custom (.dimxsubg).
Click Save to complete the export process.
The Map Editor allows Sparks to be selected, moved, rotated, or scaled using the Gizmo Control panel. Various viewing angles are available, including Fly Cam (default), Top-Down, Bottom, North-to-South, and more, providing flexibility for different editing perspectives.
Fly Cam
The Fly Cam is the default view, allowing freeform navigation for seamless editing. Movement is controlled using the W, A, S, and D keys, enabling smooth traversal across the environment for precise adjustments to Sparks and Maps.
Top-Down
The Top-Down view provides a birdâs-eye perspective, making it ideal for placing, scaling, and aligning objects with accuracy.
Bottom-Up
The Bottom-Up view functions similarly to the Top-Down view but from an inverted angle, looking upward from below. This view is useful for inspecting objects from underneath or adjusting elements positioned above ground level.
North-to-South
The North-to-South view orients the camera to face southward, offering a structured directional perspective. This view helps maintain consistency when positioning objects along a fixed axis.
South-to-North
The South-to-North view is the reverse of the North-to-South view, aligning the camera to face northward. This provides an alternative structured perspective for precise navigation and object placement.
East-to-West
The East-to-West view positions the camera facing westward, assisting with accurate alignment and object placement along the east-west axis.
West-to-East
The West-to-East view mirrors the East-to-West perspective, orienting the camera to face eastward, allowing for structured navigation and editing.
Important Notes: For all view axis options except Fly Cam, camera movement is controlled by holding the right mouse button while panning across the scene.
The eye icon in the Map Editor indicates editing mode. When visible and labeled as "Focused," the Map Editor is active and can be modified. If the icon is not visible or labeled as "Unfocused," editing is disabled. Clicking outside the Map Editor hides the eye icon, while clicking on the Map Editor enables editing. Clicking the icon itself toggles editing mode on or off.
Snap Mode constrains the movement of sparks to âsnapâ between positions on the Map that are defined by the parameters defined in the two subsequent fields. The first field impacts movement in meters along the x/y grid. The second field impacts rotation by degrees.
This function allows a creator to place a Spark exactly on top of the next lower plane. This precision eliminates the placement effort that would otherwise be required for objects to be placed on surfaces without them âclippingâ below the lower plane or hovering above the lower plane. The Drop function is generally useful to quickly assemble Sparks in logical relationships with each other as in creating a kitchen environment with food sitting on the table surface.
The X-ray function toggles on/off and scales up and down vertically using the left/right slider. It allows creators to âlook through obscuring layersâ within a Map. It can be turned on to remove the roof of a building to see players inside or in this instance, to slice through Spark characters.
The Zoom to Selected function allows creators to select Sparks and then zoom in or out to fill the Map view with those selected items. It allows creators to move immediately to a scale where precise Spark adjustments can be made.
The Zoom to Player function instantly resets the camera view to the playerâs location, allowing creators to quickly refocus without manually searching for the player. This is especially useful when the creator has navigated far from the playerâs position, providing a one-click solution to streamline navigation and improve workflow efficiency.
The Map Explorer is a 3D view of the experience. Sparks can be selected, moved, rotated, or scaled in this panel via the Gizmo Control (see image below). This view doesnât include the purple bounding boxes that indicate a selection.
This feature enables or disables the playerâs collision and obstruction characteristics. When turned on, the player interacts with the environmentâs physics, colliding with objects, experiencing gravity, and falling when jumping. When turned off, the player is unaffected by gravity, remains afloat, and can pass through collidable structures. This is particularly useful for debugging, allowing movement to hard-to-reach areas or navigating through closed spaces without restrictions.
When in 1st person view, the camera is positioned as if the player is seeing the game world through the eyes of the character. The player's perspective is limited to what the character can see directly, creating an interactive experience that allows for greater focus on fine details, such as aiming, exploration, and interactions. This view is commonly used in games where precision and personal involvement are important, such as navigating, puzzle-solving, or exploration games.
Key characteristics of 1st person view:
Direct, immersive perspective
Restricted field of view to what the character sees
Greater precision for aiming and interacting with objects
Heightened sense of personal involvement
In First-Person View, rotating the camera is done by holding the right mouse button and moving the mouse, allowing for smooth directional control.
In 3rd person view, the camera is positioned behind and slightly above the character, allowing the player to see the character's entire body as well as a broader area of the surrounding environment. This view is useful in games that emphasize character movement, positioning, and environmental awareness, such as adventure, action, and platforming games. The ability to see more of the environment makes it easier to navigate obstacles, engage in combat, or solve puzzles from a wider perspective.
Key characteristics of 3rd person view:
Wider field of view showing the character and surroundings
Greater situational awareness
Easier to control and observe character movement
Useful for action-oriented or exploration gameplay
In Third-Person View, the camera can be zoomed in and out using the mouse scroll wheel. To move the camera around, hold the right mouse button while dragging the mouse.
Switching between 1st and 3rd person views allows the player to dynamically adjust their experience based on gameplay needs or personal preference. For example, a player might switch to 1st person for precise navigation and then switch to 3rd person for better control during platforming or combat. This flexibility enhances gameplay by giving players the best of both perspectives, depending on the situation.
This function returns the Chapter that it was in before you entered Play Mode. It clears the âstoredâ actions (e.g. grabbing, moving objects, scores, behaviors) that were done during Play Mode.
The Restart, Start, Stop, and Reset options provide creators with precise control over the sequence of actions within a scene during Game Play mode. These options allow for efficient testing and debugging by enabling creators to start, pause, restart, or reset scene interactions as needed.
The User Interface (UI) Editor Panel allows a creator to add UI elements like signs, menus, status, health, or other helpful information to the experience.
The dropdown in the upper-right corner of the UI Editor allows navigation between existing UI panels, including the Default UI, Screen Space UI, and other UI-based components such as Billboards. This provides a quick and efficient way to switch between different UI elements within the editor.
Additionally, the arrow keys can be used for precise micro-movements of symbols within the UI Editor, allowing for controlled and accurate positioning.
The Snap Button enables UI Sparks, known as Symbols, to align with the grid lines in the UI Editor panel. When enabled, Symbols snap to the grid for precise placement. When disabled, UI elements can be freely positioned without grid constraints.
Similar to the Zoom to Selected button in the Map Explorer, this button instantly zooms the UI Editor view to the selected Symbol Spark, allowing for quick navigation and precise editing.
Use the Traits panel to view and edit Spark properties. What creators can see and edit in the Traits panel depends on the Spark that creators have selected. If a Spark is not selected, this panel will be blank.
The Notes panel provides a dedicated space for creators to manage their notes within a Book. It allows them to write new notes, edit existing ones, and delete notes as needed. This panel is useful for organizing thoughts, documenting progress, or adding contextual information related to the Chapterâs content. All notes are saved and accessible within the Book for easy reference and modification.
The Settings Panel allows creators to save or load customizations made to their layout. Panels can be rearranged by clicking and dragging a tab to another panelâs tab area to place them side by side or dropping it in a dock zone to create a new panel. To revert to Bonfireâs default layout, select âReset Layout to Default.â
UI customization options include UI Scale, which adjusts the size of the Bonfire UI to make it larger or smaller. All changes made in the Settings Panel are saved and applied upon restarting Bonfire.
Additional settings include mouse sensitivity for First-Person View, performance options to prioritize either battery saving or performance, and the display of the current build version number.
The Ember Panel is where custom code can be written to manipulate Spark behaviors. Ember is a scripting language built for Bonfire, utilizing the open-source Mini-Script technology. For more details on using Ember, refer to the Ember section of this document.
The Spark Browser displays all the Sparks available to creators. This is the primary way that creators can find and use Sparks. Sparks are added to the Spark Browser panel by importing Spark Libraries from the Bonfire Assets screen or by importing or creating Sparks in a special directory called 'My Sparks.'
The search input box allows for searching Sparks by name. Note that the search range is limited to the current folder level. If a Spark cannot be found, try navigating up one folder level or return to the root folder.
Folder names are clickable, enabling navigation and movement back up through folder levels by selecting the folder names.
The Downloads Folder in Bonfireâs Spark Browser stores Sparks that are automatically pulled from the server when opening a book, whether from a local copy or a remote source. Sparks are downloaded when Bonfire cannot locate a local reference copy of the ones used in the book.
This system enables creators to efficiently reuse Sparks across multiple projects without needing to re-download them, streamlining workflow by keeping all externally sourced assets in one centralized location.
This tutorial outlines the process of importing individual Spark files into Bonfire.
NOTE that importing Sparks is only available for Bonfire Pro users.
Open the Spark Browser
Navigate to the "My Sparks" directory.
Click "Import Spark"
Select a Spark File
Browse to the desired Spark file (with a .dimxs file extension).
Select the file, and Bonfire will automatically load it into the "My Sparks" folder.
Final Step:
Once imported, the Spark will be available for use within Bonfire Builder.
This video shows a step-by-step process of importing Spark files into Bonfire Builder.
First, open the Spark Browser and navigate to the My Sparks directory. Click the Import Spark button and select a .dimxs Spark file. Bonfire will automatically load the file into the My Sparks folder, making it available for use within the Builder.
Creators can link to an external folder containing various types of Sparks. This allows for access to Sparks without having to import them directly into the Book. It helps manage large files, makes it easier to share Sparks across different Books, and reduces the overall Book size.
In the Spark Browser, navigate to the âMy Sparksâ directory.
After selecting the new folder, the External Directory folder will appear in the Spark Browser under âMy Sparksâ.
The Map Browser displays all the Maps available to creators. It is the primary way creators can see virtual maps. Maps are added to the Map Browser panel by importing Spark Libraries from the Bonfire Assets screen or by importing or creating Maps in a special directory called 'My Maps.'
The Console panel displays errors, warnings, and messages generated by Bonfire. It also allows creators to search for specific messages. Each entry includes a timestamp indicating the precise time it was logged. The search function looks for an exact match of the text entered in the search box. Creators can filter messages by type (e.g., Errors, Warnings, Messages), clear all messages, and collapse duplicate messages.
The Configs panel includes a special type of Spark that enables experience changes. This Spark doesnât occupy 2D/3D virtual space, but it impacts the overall experience. These Sparks include a Countdown timer, an Inventory counter of items collected, a Modifier, and more. The Respawn Spark is a Configuration Spark that events can trigger.
The Entities panel displays all the Sparks currently in use within the Chapter, providing an alternative way for creators to locate Sparks by their names.
The Group Button in the Entities Panel allows entities to be grouped together, enabling the control of common traits with a single node call. This makes it possible to apply changes, such as modifying the visibility trait, to multiple Sparks simultaneously, improving efficiency in managing multiple entities at once.
The Symbols Panel displays all the Spark Symbols or UI widgets currently used within the Chapter, providing an alternative method for creators to easily locate UI elements by name.
By default, a Crosshair - Default HUD Spark is included in the Symbols Panel and can be removed if necessary.
The Presets Panel displays all the Spark presets that have been created. Presets are reusable Sparks, including Configs, Entities, or Symbols, that retain their attached nodes and connections. This allows creators to efficiently reuse Sparks along with their behaviors, streamlining workflow and maintaining consistency across projects.
The Help Panel offers creators a built-in reference for using Bonfire Builder, providing step-by-step instructions and a tutorial video. It serves as a quick-access guide within the platform, outlining key functions and workflows. While it shares similarities with the Bonfire documentation, the Help Panel is specifically designed to deliver immediate, in-platform support, ensuring that instructional materials, such as video tutorials, are readily available within the Bonfire Builder interface.
Note: If the Help Panel is not visible, navigate to Settings and select Reset Layout to Default to restore it within the Bonfire Builder panel.
Toggling this function switches between 1st and 3rd person views.
The refresh icon is used to rebuild the index if a Spark is not loading correctly.
Locate and click the "Import Spark" button in the interface.
Once in the âMy Sparksâ directory, click on the icon.
After clicking on the icon, creators will have the option to create a new folder or select an existing folder to link to the Spark Browser.
