Getting Started
The easiest way to use Opal is the hosted editor:
https://opal-engine.com/createSign in, create a project, and start editing in the browser. Your project saves to your account, and you can publish playable builds to the arcade when you are ready.
Hosted And Local Modes
Opal can run in more than one mode. The editor detects the environment automatically.
| Mode | How you reach it | Project storage | Best for |
|---|---|---|---|
| Hosted portal | opal-engine.com/create | Account-backed server storage | Daily building, publishing, sharing, arcade |
| Local dev server | npm run dev then http://127.0.0.1:5173/ | Local server data folder | Engine development, LAN testing, background-removal tooling |
If you are making games as a user, start with the hosted portal. If you are editing the engine code, run the local dev server. Without a server API, the editor falls back to browser IndexedDB.
First Launch
- Open Create from the site nav, or go to
/create. - Sign in or create an account.
- Open the Project picker in the editor top bar.
- Create a new project.
- Open the Scene picker and create or rename your first scene.
- Press Play in viewport to confirm the scene runs.
Your work autosaves. The File -> Save command is there when you want to force a save immediately, but normal editing does not require a manual save step.
Projects
The Project picker controls which game you are editing.
Typical actions:
| Action | Where |
|---|---|
| Switch project | Project picker -> select a project |
| Create project | Project picker -> New project |
| Rename project | Project picker -> rename the selected project |
| Delete project | Project picker -> delete |
| Publish project | File -> Publish to Arcade... |
A project contains:
- Ordered scene list and start scene
- GameState variables
- Project components
- Scripts
- UI definitions
- Asset library entries
- Art Canvas graph
- Sound Canvas graph
- Publishing metadata
Scenes
The Scene picker switches the active scene.
| Action | Where |
|---|---|
| New scene | Scene picker -> New |
| Duplicate scene | Scene picker -> duplicate |
| Rename scene | Scene picker |
| Reorder scenes | Scene picker |
| Delete scene | Scene picker -> delete |
Each scene stores objects, hierarchy, Object Flow, Scene Flow, motion data, UI references, physics settings, and scene-level settings.
Top-Bar Menus
Opal has three important top-bar menus:
| Menu | Use it for |
|---|---|
| File | Save, Import Scene, Open Project, Export Scene, Export Game, Publish to Arcade |
| Add | Add Art, Library import, Cutout Tool, Sounds |
| Help | Tutorials & Guides, Keyboard Shortcuts, Console, Problems, About Opal |
If you are looking for backups or publishing, use File. If you are bringing new assets into the project, use Add.
Adding Content
Use Add for asset intake:
| Item | Purpose |
|---|---|
| Add Art | Pick image files and place them in the current scene immediately |
| Library | Import images into the asset library without placing them yet |
| Cutout Tool | Open Asset Studio for crop, padding, outline, shadow, and background removal |
| Sounds | Import or manage audio clips |
Use the left Assets drawer to place imported images, prefabs, character assets, audio, or .ssb sprite sequence bundles.
Use the Art workspace when you need to slice sprite sheets or assemble frame animation before placing/using it.
Use the Sound workspace when you need to trim, layer, normalize, or bake sound effects before wiring them in Flow.
Play Mode
Transport controls sit in the top bar:
| Control | Action |
|---|---|
| Play in viewport | Run the game inside the editor canvas |
| Fullscreen play | Run edge-to-edge; editor chrome hides |
| Stop | End play and restore the editor |
| Stats | Toggle performance and debug stats |
| Flow | Show live graph activity while playing |
Test constantly. A one-object scene with one Flow rule is easier to fix than a large untested level.
Undo And Redo
Almost all editor edits support undo:
- Undo:
Ctrl+Z(Mac:Cmd+Z) - Redo:
Ctrl+YorCtrl+Shift+Z
Undo includes object transforms, inspector edits, Flow graph changes, Art Canvas graph changes, Sound Canvas graph changes, motion keys, and component field edits. When you are typing in a text field or the script editor, undo applies to that field.
Saving, Exporting, And Backups
| Mechanism | What it does |
|---|---|
| Autosave | Saves normal editing changes |
| File -> Save | Forces an immediate save |
| File -> Export Scene | Downloads the active scene as JSON |
| File -> Export Game | Downloads the full project as a .opal bundle |
| File -> Publish to Arcade... | Publishes a playable web build on the hosted portal |
Exporting a .opal bundle is still useful even when the portal stores your project. Treat it like a milestone backup.
Global Variables
Open Variables in the top bar to declare GameState fields:
| Type | Example |
|---|---|
| Number | score, coins, timeLeft |
| Bool | hasKey, bossDefeated |
| Text | playerName, currentQuest |
Flow graphs read and write these values as project-wide state. UI bindings and components can use the same values.
Object-scoped variables live on each object in the inspector.
Learn While Editing
Use Help -> Tutorials & Guides or Help -> Keyboard Shortcuts to open the online learning pages in a new tab. The same Help menu can open Console and Problems in the editor when debugging.