Assets And Importing
Assets are reusable resources used by scenes and graphs. Images, audio clips, prefabs, character rigs, generated cutouts, and .ssb sprite sequence bundles live in the asset library so you can place them, assign them, animate them, or spawn them later.
Asset Library
Open the Assets tab in the left drawer from Arrange, Art, or another workspace with the dock visible.
| Folder | Typical contents |
|---|---|
| Images | Sprites, backgrounds, tiles, icons, particles |
| Characters | Rigged Skeleton Studio character assets |
| Blueprints | Prefabs and configured object templates |
| Audio | Imported sound effects and music |
| Sprite sequences | .ssb bundles saved from Art Canvas |
Right-click assets for organization actions such as rename, delete, reveal, and folder management.
Importing Images
Use the Add menu:
| Command | Result |
|---|---|
| Add -> Add Art | Import image files and place them into the current scene immediately |
| Add -> Library | Import image files into the asset library without placing them |
| Add -> Cutout Tool | Open Asset Studio for preparation before saving to the library |
PNG, JPEG, WebP, and SVG are the safest image choices. Browser support decides the final set of image formats.
Project Asset Folder And Source Diffs
When Opal is running locally, use the folder button in the Assets drawer to open the current project's source asset folder. Drop supported images, audio, and .ssb bundles into its subfolders. Opal maps the top-level source folder to the matching project folder in the asset library.
Folder sync is content-aware:
| Source change | Result |
|---|---|
| New file | Adds a project asset |
| Replaced contents at the same path | Reimports the payload without changing the asset ID |
| File moved to a different folder | Preserves the asset ID when the content match is unambiguous |
| File temporarily missing | Keeps the last imported payload and reports a Project Health warning |
| Missing file restored | Clears the warning and resumes source tracking |
Stable IDs mean scenes, prefabs, and Flow references continue to point to the same asset when art is revised or reorganized. If several files have identical contents, Opal will not guess which asset moved; it reports separate additions and missing sources instead.
Project source folders are a local/standalone workflow. Hosted Opal cannot read folders from a visitor's computer.
Placing And Assigning Assets
| Action | Result |
|---|---|
| Click an image asset | Place it as a sprite in the scene |
| Drag from the library | Place it or assign it, depending on the target |
| Select object and choose art | Replace the selected object's image |
| Place a prefab/blueprint | Create a new instance from the template |
Use a .ssb bundle in Flow | Play or swap sprite-sequence animation at runtime |
After placement, the scene object stores its transform and inspector fields while the project library keeps the shared asset record.
Asset Studio And Cutout Tool
Open Add -> Cutout Tool for image preparation.
Common operations:
| Tool | Use |
|---|---|
| Crop | Trim empty space or isolate a sprite |
| Padding | Add transparent space around an asset |
| Outline | Create readable sprites for game pieces |
| Shadow | Add depth for icons and characters |
| Background removal | Remove photo or generated-image backgrounds when server tooling is available |
Background removal requires server-backed tooling. Crop, padding, outline, shadow, and normal asset import can still work without it.
Use Asset Studio before Art Canvas when the source image needs cleanup. Use Art Canvas after import when you need to slice or bake frame sequences.
Art Canvas And .ssb Bundles
Use the Art workspace when an asset should become a frame animation:
| Source | Typical pipeline |
|---|---|
| Sprite sheet | Image -> Slice Sheet -> Animation -> Preview -> Save .ssb |
| Loose frames | Sprites -> Animation -> Preview -> Save .ssb |
| Existing bundle | Sprite Sequence -> Animation -> Preview -> Save .ssb |
Saved .ssb bundles appear in the asset library. Use them from Sprite Animator, Object Flow Sprite Sequence nodes, or by placing/assigning the asset from the library.
See Art Canvas and Motion and rigging.
Importing Sounds
Use Add -> Sounds to import or manage audio clips. Imported clips can be used by Flow graph actions, scene-level music controls, or as source material in Sound Canvas.
Good sound workflow:
- Import short sound effects for taps, hits, pickups, and UI feedback — or record them from the Sounds modal or a Sound Canvas Mic node.
- Rename clips clearly in the asset library.
- Optional: open Sound Canvas to trim, layer, normalize, or bake variants before wiring gameplay.
- Trigger effects from Object Flow with Play audio.
- Keep background music scene-level when it applies to a whole level or menu.
See Sound Canvas for composing and baking WAV assets.
Importing Scenes And Projects
Use File -> Import Scene... to load a scene file into the current project.
Use File -> Open Project... to load a .opal project bundle exported with File -> Export Game.
Use File -> Export Scene and File -> Export Game for backups and sharing. See Sharing and publishing.
Prefabs And Blueprints
Prefabs appear in the library as reusable object templates. They are best for content that must appear multiple times with the same structure or behavior.
Examples:
- Enemy with Health, Motion, and Object Flow
- Coin pickup with a sound and score event
- Door that loads another scene
- HUD counter connected to GameState
- Spawner marker with configured spawn settings
If you change the source prefab, instances can update automatically unless an instance has manual overrides.
Asset Organization
Good names prevent confusion in larger games.
| Weak name | Better name |
|---|---|
image1 | player_idle |
new-sound | sfx_coin_pickup |
button | ui_button_primary |
enemy | enemy_slime_prefab |
Animation | player_walk_right |
Prefer names based on role, not visual guesswork. A file called level_1_exit_door is easier to find than brown_rectangle.