Panels Nonlinear Story Example

An example project demonstrating how to create a branching, choose-your-own adventure comic with Panels.

Setup

This project includes the Panels framework as a git submodule. Be sure to properly initialize the submodule when cloning the repo.

If you're not using git, you can download this code as a ZIP file. In that case you'll also need to download the code from the Panels repo and place it in the source/libraries/panels/ folder of this template.

Usage

To create a branching choice in your comic, define multiple options in the advanceControls table for your sequence.

Each option can define an input trigger, a target sequence, and x and y positions for the button graphics.

Documentation

Documentation for these new features can be found in the Panels docs:

📄 Creating Comics with Branching Storylines

Examples

This project includes some example sequences to help you get started:

Basic Example
Add two branching options to the end of the sequence.
Anchored Controls
By default, a sequence's advance buttons float above the panels. This example shows how they can be anchored to the scroll position of the last panel.
Hidden Controls
Hide Panel's built in button graphics in order to display your own text or graphics for the user.
Directional Controls
Let the user choose a physical direction to move in.
Custom Functions
Use a custom render function to draw interactive content (like a mini-game). Use the targetSequenceFunction to define a target sequence based on any custom-defined criteria.

Look in the comicData/ folder to find data tables for each sequence.