Build Your First Game

This walkthrough builds a tiny coin collector. It is small on purpose: by the end you will have used the core Opal loop of create project, place objects, add state, wire behavior, show UI, play-test, publish, export.

You can use starter assets, your own files, or quick prepared art from Asset Studio.

What You Will Make

Part	Behavior
Player	A visible object in the scene
Coin	Tapping it adds score, plays feedback, and removes the coin
Score	A GameState variable named score
HUD	A label that shows score
Play mode	The game runs in the editor viewport
Publish	A playable build on the arcade
Export	A .opal backup

1. Create A Project And Scene

1. Open /create on the hosted site.
2. Sign in if prompted.
3. Open the Project picker.
4. Create a project named Coin Collector.
5. Open the Scene picker.
6. Create or rename a scene to Level 1.
7. Make Level 1 the start scene if the scene/project controls show that option.

Keep the scene simple. You only need a background, player, coin, and HUD.

2. Add Art

Use one of these approaches:

Approach	Steps
Starter assets	Open the Assets tab, pick an image, place it on the stage
Your files	Use Add -> Add Art, choose image files, and place them
Prepared art	Use Add -> Cutout Tool, save the result, then place it
Frame animation	Use Art to create a .ssb bundle, then use it later in Flow

Place one object for the player and one object for the coin.

Rename them in the inspector:

Player
Coin

Good names matter because Flow, UI bindings, Graph Explorer, and debugging tools use object names.

3. Configure The Coin

Select Coin in Arrange.

In the inspector:

1. Make sure it is visible in play.
2. Enable interaction if the object is not already tappable.
3. Keep it above the background so pointer input can reach it.
4. Optionally set a simple tap feedback action if available.

If taps do not work later, return here first. Most tap problems are either "not interactable" or "another object is covering it."

4. Add A Score Variable

Open Variables in the top bar.

Create:

Name	Type	Default
score	Number	0

This creates the project GameState variable score. Flow reads and writes it through Add Counter / Set variable / Get nodes; UI bindings can use self.score.

5. Wire The Coin Tap

Select Coin, then open the Object Flow workspace.

Create an Object Flow rule:

On Tap
  -> Add Counter / Add to variable (score, 1)
  -> Play Audio (optional)
  -> Spawn VFX (optional)
  -> Destroy

Detailed steps:

1. Add an On Tap event rule (this also ensures Interactable is on the coin).
2. Add Add Counter (catalog label; writes the GameState variable) from the state/variables nodes and set key to score, value to 1.
3. Add Play audio if you imported a sound — or bake a pickup blip in Sound Canvas first.
4. Add Spawn VFX and choose a small preset such as sparkle.
5. Add Destroy so the coin disappears after collection.
6. Connect the white execution wire through each node in order.

Press Play in viewport and tap the coin. The coin should disappear and score should increase.

6. Add A HUD Label

Open the UI workspace.

1. Add a Text element.
2. Name it ScoreLabel.
3. Place it near the top-left or top-right of the screen.
4. Bind the text to the GameState variable (expression binding on props.text):

=`Score ${self.score}`

The UI runtime reads project GameState through self, so self.score maps to the score variable you declared.

7. Add A Simple Win Rule

Open Scene Flow.

For a one-coin test, you can keep this tiny:

On Scene Start
  -> wait or timer loop
  -> branch: score at least 1
  -> Say "You got the coin!"

For a real level, use a custom event:

Coin / On Tap
  -> Add Counter score +1   # GameState
  -> Emit Event coin_collected
  -> Destroy

Scene Flow / On Custom Event coin_collected
  -> branch score at least 5
  -> Go To Scene Win Screen

This keeps object behavior local and win/lose logic global.

8. Play-Test

Use this loop:

1. Press Play in viewport.
2. Tap the coin.
3. Toggle Flow overlay while playing to see nodes fire.
4. Toggle Stats if runtime state or performance looks suspicious.
5. Press Stop.
6. Adjust the graph or scene.

Do not wait until the project is large to test. Opal is designed for tiny edit-play cycles.

9. Publish To The Arcade

When the game works:

1. Confirm the correct start scene is set.
2. Use File -> Publish to Arcade....
3. Choose whether the published game can be remixed.
4. Save the public link Opal gives you.
5. Open the link in another tab to test it outside the editor.

Publishing can happen early. A tiny published build is useful because it proves the game runs for players, not only inside your editor session.

10. Export A Backup

Use File -> Export Game to download a .opal bundle.

Use this export as:

• A milestone backup
• A file to move to another machine
• Input for a standalone player build
• A small repro if you report a bug

What You Learned

Create projectPlace objectsAdd GameStateWire Object FlowBuild UIPlay-testPublishExport

Next Steps

• Objects and hierarchy
• Assets and importing
• Art Canvas
• Visual scripting
• UI and HUD
• Audio and VFX
• Sound Canvas
• Sharing and publishing