Introduction

Opal is a browser-based 2D game engine for making, testing, publishing, and sharing games from one editor. The public portal adds accounts, project storage, and an arcade. The editor itself still runs in the browser, so the core creative loop stays fast: change something, press Play, adjust, publish again.

Opal combines familiar ideas in one web-native workflow:

Inspiration	In Opal
Unreal Blueprints	Object Flow and Scene Flow node graphs
Unity	Components attached to scene objects
Spine	Rigging / Skeleton Studio for bone-based character animation
Traditional animation tools	Motion clips, Art Canvas sprite-sequence baking, and Sound Canvas audio baking
Itch-style portals	Arcade pages for published games and remixes

Core Concepts

Project

A project is your whole game. It contains scenes, the start scene, global GameState variables, the shared asset library, project components, scripts, UI definitions, and publishing metadata.

On the hosted portal, projects are saved to your account. In a local development copy, projects can save through the local Node server. In a static/offline copy, browser storage is used as a fallback.

Scene

A scene is one level, menu, or screen. Scenes contain stage objects, hierarchy, object graphs, scene graphs, motion data, UI references, background settings, and physics tuning. Use the Scene picker to move between scenes in a project.

Object

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

Objects can have:

• Transform - position, size, rotation, opacity, flip
• Inspector properties - name, art, visibility, interaction, parent, tags
• Components - reusable behavior modules such as Health, Physics, Inventory, or custom project components
• Object Flow - per-object visual scripts
• Motion / skeleton data - animation clips or rig references
• Variables - object-scoped state for Flow and components

Objects can be parented. The Scene Hierarchy shows the tree, and the inspector edits the selected object.

Assets

Images, sounds, prefabs, characters, and .ssb sprite sequence bundles live in the asset library. Use the Add menu to import art and sounds, use the library to place assets into scenes, and use Asset Studio, Art Canvas, or Sound Canvas to prepare assets before gameplay work.

Art Canvas

The Art workspace is for frame-based sprite animation. It can slice sheets, assemble loose sprites, preview animation, register frames, bake effects, and save .ssb bundles. Those bundles can then be used from the asset library or Object Flow.

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

Sound Canvas

The Sound workspace is for composing and baking sound effects. It can trim and normalize clips, layer samples, generate synth tones and noise, record mic takes, preview waveforms, and save .wav assets to the library. Baked sounds are used from Flow, scene music, or motion markers like any other audio clip.

Use Sound Canvas when a sound needs processing or design beyond a raw import. Use Add → Sounds when the file is already ready to play.

Visual Scripting

Behavior is authored as node graphs:

Graph	Scope	Examples
Object Flow	One object	On Tap, On Drag, collision, damage, pickup, animation triggers
Scene Flow	Whole scene/project	Startup rules, win/lose checks, scene transitions, timers

White wires carry execution. Colored wires carry data such as numbers, text, booleans, object references, assets, or sprite sequences. Many fields also accept = expressions (for example =self.hp + 1 on component params). Prefer Get/Set variable nodes for GameState.

GameState Variables

GameState holds project-wide variables like score, level, coins, hasKey, or timeLeft. Declare them from the Variables menu in the top bar. Object Flow, Scene Flow, UI bindings, and components can read and write the same state.

Components

Components are typed behavior blocks attached to objects. Built-ins cover common needs such as physics, controllers, health, inventory, pickups, spawners, turns, teams, and combat. Project components let you define your own fields, actions, conditions, and events inside the editor.

Prefabs

A prefab is a reusable object template: art, transform defaults, children, components, Motion, and Flow included. Save a configured object as a blueprint, place instances from the library, and spawn them at runtime.

Play Mode

Press Play to run the game inside the editor viewport or fullscreen. Input, physics, animation, Flow, audio, and UI run as they will for players. Stop returns to editing. The Stats and Flow overlays help debug the runtime while the game is playing.

Publishing

Use File -> Publish to Arcade... to publish the current project through the hosted portal. Opal creates public game pages such as /g/<slug> and playable pages such as /play/<slug>. Use File -> Export Game for .opal backups and standalone player builds.

How A Typical Game Is Built

1. Create or open a project
2. Arrange - place art, build hierarchy, set cameras and scene structure
3. Assets / Art / Sound - import files, cut out images, bake .ssb sprite sequences, bake WAV sound effects
4. Components - attach Health, Physics, Inventory, etc.
5. Object Flow - wire tap, drag, collision, timer, and animation rules
6. Scene Flow - wire startup, win/lose, scene transitions, and global logic
7. UI - design HUD screens, menus, buttons, and labels
8. Play-test - iterate in the viewport and inspect Flow/Stats/Problems
9. Publish - send a build to the arcade and export a backup

You do not have to follow this order strictly. Many games start as one object and one Flow rule, then grow into art, UI, scenes, and publishing.

Where To Go Next

• Getting started - open the editor, create scenes, save, and publish your first build
• Build your first game - follow a small project from art to export
• Editor overview - tour the interface
• Assets and importing - import art, sounds, prefabs, and sprite bundles
• Art Canvas - slice sheets and save .ssb animation bundles
• Sound Canvas - compose, process, and bake WAV sound effects
• Visual scripting - your first Flow graph
• Sharing and publishing - arcade publishing, exports, and standalone builds