Introduction

Opal is a 2D game engine — editor, runtime, and arcade. Open it in the browser or in Opal Desktop, build a scene, press Play, and publish. The editor is the same in both places. Your game runs where you made it.

Opal borrows proven ideas and puts them in one workflow:

Inspiration	In Opal
Unreal Blueprints	Object Flow and Scene Flow node graphs
Unity	Components on scene objects
Spine	Rigging — bones, IK, and slots in Skeleton Studio
Frame, audio, and FX bakers	Pixel Studio (draw), Art Canvas (`.ssb`), Sound Canvas (WAV sfx), Particle Canvas (`.pfx`), Motion clips
Game portals	Arcade — public pages at `/g/<slug>` and playable builds at `/play/<slug>`

Understanding Opal

Project — your whole game

A project is the container for a game. It holds:

an ordered scene list and a start scene
GameState — typed project-wide variables (Number, True / False, Text, List, Object) with a lifetime of Session, Saved, or Scene. See Variables and GameState.
the shared asset library (images, sounds, prefabs, characters, .ssb bundles, .pfx effects)
Scripts — typed OpalScript classes (class Foo : Component) and reusable Behavior Components (opal.component(...))
UI definitions, Art / Sound / FX (particle) graphs, and publishing metadata

On opal-engine.com, projects save to your account and follow you across devices. In Opal Desktop, a project is an ordinary folder on your computer — you can work offline, then use File → Cloud Sync… to upload or download against that same account.

Scene — one screen or level

A scene is one level, menu, or screen. It contains stage objects and their hierarchy, transforms, Object Flow and Scene Flow graphs, motion and rig data, UI references, background settings, and physics tuning.

Switch scenes with the Scene picker in the top bar (quick switch) or the Scenes panel in the left dock (full management). The start scene (★) is where players spawn — list order is authoring order; players go where Go To Scene sends them.

Object — anything on the stage

An object is anything placed on the stage: a player sprite, pickup, trigger area, platform, spawner, or group.

Each object can carry:

Transform — position, size, rotation, opacity, flip, pivot
Inspector fields — name, art, visibility, parent, group
Components — reusable behaviors such as Physics, Health, Inventory, Pickup, Spawner, or your own OpalScript / Behavior Components
Object Flow — its own visual script
Motion / skeleton data — clips or rig references. Rig characters in Skeleton Studio.
Variables — object-scoped typed state for Flow and components

Objects are parented in a tree. The Scene Hierarchy (left drawer) shows that tree; the Inspector (right) edits the selected object.

Assets — what you build with

Images, sounds, prefabs, characters, .ssb sprite-sequence bundles, and .pfx particle effects live in the asset library. Bring things in through Add in the top bar — Add Art drops images onto the stage, Library imports to the library without placing, Sounds imports audio. Then place from the library drawer into any scene. Use Pixels, Art, Sound, or FX under Create ▾ to prepare assets before you wire gameplay.

Pixel Studio — drawing surface

The Pixels workspace (inside Create ▾) is where you draw or cut out a sprite. Keep a .opix working file with File → Save. Bake PNG writes sprites the scene can use; Bake animation needs two or more drawing frames and writes PNG frames plus an .ssb.

Use Pixels when the pixels still need work. Use Art Canvas when you already have frames and want timing, registration, and a .ssb bundle.

Art Canvas — frame animation baker

The Art workspace (inside Create ▾) is a frame-animation baker, not a realtime renderer. It slices sheets, assembles loose sprites, previews timing, registers frames, and saves reusable .ssb sprite-sequence bundles to the library. Consume them from the library or from the Sprite Sequence Flow node.

Use Art Canvas when the pixels change frame by frame. Use Motion when the object itself moves, rotates, scales, or fades.

Sound Canvas — audio baker

The Sound workspace (inside Create ▾) is the sibling baker for audio. Compose from Sample / Mic / Tone / Noise, shape with trim, gain, fade, pitch, reverse, lo-fi, filter, echo, reverb, normalize, mix, variation, preview, and bake to 16-bit stereo WAV library assets. Baker only — it never runs in the player.

Use Sound Canvas when a sound needs design or processing. Use Add → Sounds when the file is ready to play as-is.

Baked sounds play from Play Audio Flow nodes, sound: / sfx: motion markers, or scene music (scene.audio).

Particle Canvas — FX baker

The FX workspace (inside Create ▾) is the sibling baker for particles. Compose an emitter chain (or start from + Sparkle / + Smoke / + Fire / …), preview it, and bake a .pfx library asset. Baker only — it never runs in the player.

Use Particle Canvas when a built-in name (sparkle, smoke, fire, …) is not the look you want. Use Spawn VFX or Particle Emitter to play the result.

Baked effects play from Spawn VFX, a Particle Emitter component, or vfx: motion markers.

Visual scripting — Flow

Behavior is authored as node graphs in two scopes:

Graph	Scope	Typical use
Object Flow	One object	On Tap, On Drag, collisions, pickups, animation triggers
Scene Flow	Whole scene / project	Startup, win/lose, scene transitions (`Go to scene`), timers

Wires have kinds. Execution wires drive the order of operations; data wires carry typed values and are tinted by type — number (gold), boolean (red), object reference (blue), string (green), vector (purple), and more. Many value fields also accept = expressions: prefix a string with = to evaluate it against self, params, event, get/run/check, and Math (for example =self.score + 1 or =Math.random() * 100). For project-wide state, prefer Get / Set variable nodes over inline expressions. HUD labels use the UI Inspector Data bindings card, not a Flow = expression.

GameState and object variables

GameState is the single project-wide state object — typed variables (Number, True / False, Text, List, Object) with a lifetime of Session, Saved, or Scene. Declare them from Variables in the bottom shelf. Object Flow, Scene Flow, UI Data bindings, and components all read and write the same state. Each object can also declare its own object variables in the Inspector's Variables card — same types, scoped to that object. Details: Variables and GameState.

Components — reusable behaviors

Components are typed behavior blocks you attach to objects. Built-ins cover physics, control, combat, and logistics — Rigid Body 2D, Collider 2D, Platformer Controller, Health, Inventory, Pickup, Spawner, Turn Queue, and more. Each exposes lifecycle hooks (onAttach, onTick, …) and can require other components.

For custom behavior, open Scripts. New Behavior starts a typed OpalScript class (class Name : Component). New → Behavior Component starts opal.component("Name", { … }) when you want Inspector fields without types. Attach either from the object's Components card like a built-in; public methods and declared actions appear in Flow. Start at Scripts or the Scripting API.

Prefabs — reusable blueprints

A prefab is a reusable object template: art, transforms, children, components, motion, and Flow included. Save a configured object as a prefab, place instances from the library, spawn them at runtime (from Flow or a Spawner), and override per instance with revert.

Play mode — test as you build

Press Play in viewport to run the game inside the editor, or Fullscreen play to fill the window. While playing, input, physics, animation, Flow, audio, components, and UI run as players will see them. Stop discards the play session and returns to editing. Toggle Stats and the live Flow overlay to watch the runtime while it runs.

Publishing — ship it

File → Publish to Arcade… ships the current build to the arcade (public page at /g/<slug>, playable at /play/<slug>). Manage Arcade Listing… edits the store page without re-shipping. Publish from the browser editor; Desktop uses File → Cloud Sync… to put the folder on your account first.
File → Export Game downloads a full .opal project bundle. File → Export Scene downloads the active scene as opal-scene.opal. Treat .opal exports as milestone backups even when the project lives on your account or in a Desktop folder.

Using Opal

A typical game follows this order, but you don't have to — most games start as one object and one Flow rule, then grow into art, UI, scenes, and publishing:

Create or open a project in the Project picker.
Arrange — place art, build the hierarchy, frame the stage.
Add assets — import art and sounds, bake in Pixels / Art / Sound / FX as needed.
Attach Components — Physics, Health, Inventory, and more.
Wire Object Flow — tap, drag, collision, and animation rules.
Wire Scene Flow — startup, win/lose, and Go To Scene transitions.
Optional Scripts — a reusable calculation or component when the graph is getting awkward.
Build the UI — HUD, menus, and buttons bound to GameState.
Play-test — iterate in the viewport with Stats and the Flow overlay.
Publish — ship a build to the arcade and export a .opal backup.

Example

A coin pickup shows how the pieces connect: a Coin object with an On Tap Object Flow rule that runs Add Counter (score + 1) and then Destroy, while a UI label bound to GameState score shows the total. Press Play in viewport, tap the coin, and the label updates. Build your first game walks this exact loop step by step.

Introduction ​

Understanding Opal ​

Project — your whole game ​

Scene — one screen or level ​

Object — anything on the stage ​

Assets — what you build with ​

Pixel Studio — drawing surface ​

Art Canvas — frame animation baker ​

Sound Canvas — audio baker ​

Particle Canvas — FX baker ​

Visual scripting — Flow ​

GameState and object variables ​

Components — reusable behaviors ​

Prefabs — reusable blueprints ​

Play mode — test as you build ​

Publishing — ship it ​

Using Opal ​

Example ​

See also ​