
## Goal

When the hero collects a coin, increase the score, log it, and play a sound. This introduces custom events, which let you keep "a coin was collected" separate from "update the score".

Open this step in the editor: [#W0H5RG](https://flowgraph.babylonjs.com/#W0H5RG) (scene `P41T6E#2`).

![Coin graph: collision triggers a collect custom event that updates score](/img/tools/flowGraphEditor/tutorial/coins.webp)

Run this step:

<Playground id="#VM4J12#0" title="Babylon Bros - Coins" description="Tutorial step: move, jump, and collect coins, powered by flow graph #W0H5RG." category="Flow Graph"/>

## Blocks Used

- `PhysicsCollisionEvent` (per question block / coin)
- `Branch` with an "active?" variable so each coin can only be collected once
- `SendCustomEvent` / `ReceiveCustomEvent` (`collect`)
- `GetVariable`, `Add`, `SetVariable` (score)
- `PlaySound`, `ConsoleLog`

## Step By Step

### 1. Central Collect Handler

Add `ReceiveCustomEvent` named `On Collect`. Wire it into `score + 1` (a `GetVariable` + `Add` + `SetVariable`), a `ConsoleLog` for the score, and `PlaySound` for the coin. This is the single place where the score changes.

### 2. Trigger From Collisions

For each block, add a `PhysicsCollisionEvent` on its body and a `Branch` that tests an `active` variable so it fires once. Set `active` to false, run the bump animation with `PlayAnimation`, then `SendCustomEvent collect`.

### 3. Reuse The Pattern

Build the first block fully, group it (`Ctrl/Cmd+G`), copy and paste it, then retarget it. Copying preserves the configuration and internal wiring; just point the new collision block at `block_2` and `block_3`.

## Editor Features

- Use [execution contexts](/toolsAndResources/flowGraphEditor/executionContexts) to confirm score is per run.
- Use Find (`Ctrl/Cmd+F`) to jump between block clusters as the graph grows past 100 nodes.

## Test And Save

Run, collect coins, watch the score log. Save; match `#W0H5RG`. Continue with [Step 5 - Spring Bounces](/toolsAndResources/flowGraphEditor/babylonBrosTutorial/springs).



## Goal

Enemies (`goomba_1`, `goomba_2`, `flyer_1`, the spiky hazard) react two ways: a stomp from above defeats them and bounces the hero, while a side touch hurts the hero. This reuses the `collect`/`hurt` custom-event pattern.

Open this step in the editor: [#CMWMAN](https://flowgraph.babylonjs.com/#CMWMAN) (scene `P41T6E#2`).

![Enemy graph: stomp-versus-hurt branches and a hurt custom event](/img/tools/flowGraphEditor/tutorial/enemies.webp)

Run this step:

<Playground id="#VOKQC5#0" title="Babylon Bros - Enemies" description="Tutorial step: stomp enemies or take damage, powered by flow graph #CMWMAN." category="Flow Graph"/>

## Blocks Used

- `PhysicsCollisionEvent` (per enemy body)
- `GetLinearVelocity`, `ExtractVector3`, `LessThan` (falling onto enemy?)
- `Branch` (stomp vs hurt), `Abs`, `Subtract`
- `SendCustomEvent` / `ReceiveCustomEvent` (`hurt`)
- `PlayAnimation`, `PlaySound`, `SetLinearVelocity`

## Step By Step

### 1. Hurt Handler

Add `ReceiveCustomEvent` `On Hurt` that decreases score, logs it, and plays the hurt sound - the opposite of the coin collect handler.

### 2. Stomp Versus Hurt

For each enemy, add `PhysicsCollisionEvent` and an `active` `Branch`. Check whether the hero is descending and above the enemy: if so, defeat it (deactivate, play its inactive animation, bounce the hero up). Otherwise `SendCustomEvent hurt`.

### 3. Scale It Up

You now have many near-identical clusters. Use copy/paste, smart groups, and `Ctrl/Cmd+F` search to keep the canvas manageable. This is where the editor's organization features become really helpful.

## Editor Features

- Use breakpoints on each `active?` branch to debug stomp detection.
- Use the minimap to navigate; the graph is now large.

## Test And Save

Run and try stomping vs side-hitting enemies. Save; match `#CMWMAN`. Continue with [Step 7 - Win Condition](/toolsAndResources/flowGraphEditor/babylonBrosTutorial/win).



## Goal

Make the hero jump on `Space`, but only when grounded, and play a sound. This adds your first conditional branch.

Open this step in the editor: [#LI45XB](https://flowgraph.babylonjs.com/#LI45XB) (scene `P41T6E#2`).

![Jump graph: Space event, ground-check branch, impulse and sound](/img/tools/flowGraphEditor/tutorial/jump.webp)

Run this step:

<Playground id="#PBXYWT#0" title="Babylon Bros - Jump" description="Tutorial step: run and jump with Space, powered by flow graph #LI45XB." category="Flow Graph"/>

## Blocks Used

- `KeyDownEvent` (Space)
- `GetLinearVelocity`, `ExtractVector3`, `Abs`, `LessThan` (ground check)
- `Branch` (Control Flow)
- `ApplyImpulse` (Physics)
- `PlaySound` (Audio)

## Step By Step

### 1. Listen For Space

Add `KeyDownEvent` configured for `Space`. Label it "On Space".

### 2. Check Grounded

Read the hero velocity with `GetLinearVelocity`, `ExtractVector3` to get `y`, take `Abs`, then `LessThan` a small threshold. A near-zero vertical speed approximates "on the ground". Feed the result into a `Branch` ("Can jump?").

### 3. Jump And Play Sound

On the `true` path, add `ApplyImpulse` on the `hero` body with an upward vector, then `PlaySound` selecting the jump sound. Use `Sequence` if you want the impulse and sound to fire together cleanly.

## Editor Features To Use

- Set a breakpoint (`F9`) on the `Branch` and run: you can pause and confirm the ground check value before the jump fires.
- Use Debug Mode to confirm only the `true` path lights up when grounded.

## Test And Save

Run, then jump with `Space` while moving. Save the graph; it should match `#LI45XB`. Continue with [Step 4 - Collect Coins](/toolsAndResources/flowGraphEditor/babylonBrosTutorial/coins).



## Goal

Make the hero run left and right with the arrow keys. The pattern is: keyboard events set a direction variable, and a per-frame tick converts that direction into physics velocity.

Open this step in the editor: [#1CUUOO](https://flowgraph.babylonjs.com/#1CUUOO) (load scene `P41T6E#2` in the preview).

![Movement graph: keyboard input and a per-frame velocity update](/img/tools/flowGraphEditor/tutorial/movement.webp)

Run this step:

<Playground id="#LKYK2H#0" title="Babylon Bros - Move" description="Tutorial step: drive the hero left and right with the arrow keys, powered by flow graph #1CUUOO." category="Flow Graph"/>

## Blocks Used

- `KeyDownEvent`, `KeyUpEvent` (Events)
- `SetVariable`, `GetVariable` (Data Access)
- `SceneTickEvent` (Events)
- `GetProperty` / `SetLinearVelocity` (Data Access / Physics)
- `Multiply`, `CombineVector3` (Math / Data Conversion)

## Step By Step

### 1. Initialize State

Add `SceneReadyEvent` and a `SetVariable` named `heroVX = 0`. This sets the starting horizontal direction once the scene is ready. Use the property panel to set the variable type to number.

### 2. Read The Keys

Add two `KeyDownEvent` blocks. Configure one for `ArrowRight` and one for `ArrowLeft` in the property panel. Wire each into a `SetVariable` that sets `heroVX` to `1` and `-1`. Add two `KeyUpEvent` blocks that reset `heroVX` to `0`.

Use a sticky note (`Ctrl/Cmd+M`) to label this cluster "Input".

### 3. Apply Velocity Each Frame

Add `SceneTickEvent`. Read `heroVX` with `GetVariable`, multiply it by a speed `Constant`, and build a velocity vector with `CombineVector3` (x = heroVX*speed, y = current vy, z = 0). Feed it into `SetLinearVelocity` targeting the `hero` physics body, selected from the scene picker.

### 4. Group It

Select the tick blocks and press `Ctrl/Cmd+G` to make a smart group. This keeps the canvas readable as later steps add more.

## Test In The Editor

Press Start and use the arrow keys in the preview. The hero should run. Turn on Debug Mode to watch the tick blocks light up each frame, and inspect `heroVX` in the Variables panel as you press keys.

## Save

Save to the snippet server. Your graph should match `#1CUUOO`. Continue with [Step 3 - Add Jumping](/toolsAndResources/flowGraphEditor/babylonBrosTutorial/jump).



## Why The Scene Comes First

This tutorial is about authoring interactions in the editor, not about modeling. So the assets are prepared up front and treated as a fixed starting point. This step explains what the scene already contains so the later flow graph steps make sense, but you do not build it block by block.

You can run the finished scene here:

<Playground id="#P41T6E#2" title="Babylon Bros Scene" description="The still Babylon Bros scene used as the starting point for the Flow Graph tutorial. All interaction is added later in the editor." category="Flow Graph"/>

## The Scene Does Nothing On Its Own

Nothing in the scene moves by itself. The animations are loaded but not playing, the sounds are loaded but silent, and the physics is set up but nothing tells the hero to move. Every behavior is added later as a flow graph, which is exactly what makes this a good editor tutorial.

## What Is Already Built

- **Hero** - a mesh named `hero` with a Havok physics body, the player you will drive.
- **Terrain** - `ground`, `terrain_step_1`, `terrain_step_2`, all static physics bodies.
- **Coins** - collectible meshes with trigger bodies.
- **Springs** - `spring_1`, `spring_2` pads with compress animations that are ready but not playing.
- **Enemies** - `goomba_1`, `goomba_2`, `flyer_1`, and a spiky hazard, each with patrol/hover animations that are ready but not playing.
- **Question blocks** - `block_1` to `block_3` with bump animations that are ready but not playing.
- **Flag** - the goal, with a raise animation that is ready but not playing.
- **Sounds** - jump, coin, spring, stomp, and win, registered for Audio V2.
- **Physics** - Havok enabled with gravity, so the hero falls and collides.

## Naming Matters

The flow graph references scene objects by name. Mesh pickers, animation-group pickers, and physics body lookups all resolve against the loaded scene, so consistent names like `hero`, `spring_1`, and `block_1` are what make the graph readable in later steps.

## Next

With the scene ready, continue to [Step 1 - Set Up The Editor](/toolsAndResources/flowGraphEditor/babylonBrosTutorial/setup) to load it into the Flow Graph Editor.



## Goal

Turn the finished graph into something a scene can run by saving it to a snippet and loading it at runtime.

## Save To The Snippet Server

In the editor, save to the snippet server. You get an ID back; the final tutorial graph is `#HUA46E`. To preview it against the level, load scene `P41T6E#2` in the editor's preview panel.

![The complete Babylon Bros graph in the editor, ready to save to the snippet server](/img/tools/flowGraphEditor/tutorial/editorOverview.webp)

## Load It From A Scene

In your scene code, parse the coordinator from the snippet and start it:

```javascript
const coordinator = await BABYLON.ParseFlowGraphCoordinatorFromSnippetAsync("HUA46E", { scene });
coordinator.start();
```

Because the scene does nothing on its own, this single graph is what brings it to life - movement, jumping, coins, springs, enemies, and the win condition all come from the flow graph.

## See It Together

The full demo is the complete scene plus the graph:

<Playground id="#P41T6E#1" title="Babylon Bros - Finished" description="The finished Babylon Bros platformer: a still scene brought to life entirely by a Flow Graph loaded from a snippet." category="Flow Graph"/>

## Where To Go Next

- Reopen any step in the editor and experiment: change jump force, coin scoring, or enemy behavior.
- Save your edits to the snippet server, then reload them to compare against `#HUA46E`.
- Revisit the [block families](/toolsAndResources/flowGraphEditor/supportedBlockFamilies) for capabilities this tutorial did not use.



## Open The Editor

Open the [Flow Graph Editor](https://flowgraph.babylonjs.com). It starts with a default scene and a single empty graph tab, which you will replace with the Babylon Bros scene.

## Load The Scene Snippet

In the Scene Preview panel, enter the scene snippet ID `P41T6E#2` and press `Enter` to load it. The preview switches to the platformer level, and its meshes, animation groups, and sounds become available to scene-aware pickers.

That scene context is shared by every graph and execution context, so you only load it once.

## Confirm The Scene Context

Open the scene context panel and check that the expected names are present: `hero`, `ground`, `spring_1`, `block_1`, the enemies, and the flag. If those resolve, mesh pickers and physics lookups will work in the next steps.

## Start With An Empty Graph

You begin from a blank graph and build it up. Validation will report that the graph has no event yet, which is expected until Step 2 adds the first event block.

Press Start once to confirm the empty graph runs without error, then Stop. You now have a working scene plus an empty graph, ready for logic.

## Next

Continue to [Step 2 - Move The Hero](/toolsAndResources/flowGraphEditor/babylonBrosTutorial/movement) to add the first real interaction.



## Goal

Make `spring_1` and `spring_2` launch the hero when he lands on them. Bounce only when the hero is descending, so it feels like a real spring.

Open this step in the editor: [#YCDRLC](https://flowgraph.babylonjs.com/#YCDRLC) (scene `P41T6E#2`).

![Spring graph: collision while descending launches the hero upward](/img/tools/flowGraphEditor/tutorial/springs.webp)

Run this step:

<Playground id="#765E20#0" title="Babylon Bros - Springs" description="Tutorial step: bounce on spring pads, powered by flow graph #YCDRLC." category="Flow Graph"/>

## Blocks Used

- `PhysicsCollisionEvent` (spring body)
- `GetLinearVelocity`, `ExtractVector3`, `LessThan` (descending check)
- `Branch` ("can bounce?")
- `SetLinearVelocity` (launch)
- `PlayAnimation` (compress), `PlaySound` (boing)

## Step By Step

### 1. Detect The Landing

Add `PhysicsCollisionEvent` on `spring_1`. Read the hero velocity, extract `y`, and test `LessThan 0` so it bounces only while descending. Feed into a `Branch`.

### 2. Launch

On `true`, build a launch velocity with `CombineVector3` (keep x, set a strong positive y) and apply it with `SetLinearVelocity`. Trigger the compress `PlayAnimation` and the boing `PlaySound`.

### 3. Duplicate

Group the spring logic and paste it for `spring_2`, re-targeting the collision body and animation. This is the same reuse pattern from the coin step.

## Editor Features

- Lower the time scale to watch the bounce frame by frame.
- Add a `DebugBlock` on the launch velocity to confirm the value flowing through.

## Test And Save

Run and bounce on a spring. Save; match `#YCDRLC`. Continue with [Step 6 - Enemies](/toolsAndResources/flowGraphEditor/babylonBrosTutorial/enemies).



## Goal

Reaching the flag wins the game: raise the flag, play victory music, and set a `gameDone` flag so input stops mattering.

Open this step in the editor: [#HUA46E](https://flowgraph.babylonjs.com/#HUA46E) (scene `P41T6E#2`). This is the complete graph.

![The complete Babylon Bros graph with the win handler in place](/img/tools/flowGraphEditor/tutorial/win.webp)

Run this step:

<Playground id="#609FGO#0" title="Babylon Bros - Win" description="Tutorial step: the complete game with the win condition, powered by flow graph #HUA46E." category="Flow Graph"/>

## Blocks Used

- `PhysicsCollisionEvent` (flag)
- `ReceiveCustomEvent` / `SendCustomEvent` (`win`)
- `SetVariable` (`gameDone = true`)
- `PlayAnimation` (raise flag), `PlaySound` (win), `ConsoleLog`

## Step By Step

### 1. Detect The Flag

Add `PhysicsCollisionEvent` on the flag, sending a `win` custom event.

### 2. Win Handler

Add `ReceiveCustomEvent On Win`: set `gameDone` to true, log the win, run the flag raise `PlayAnimation`, and play victory music.

### 3. Respect Game State

Only run the movement and jump branches when `gameDone` is false, so input is ignored after winning. A single `GetVariable` + `Branch` at the top of those chains is enough.

## Editor Features

- Use the Variables panel to watch `gameDone` turn true on win.
- Run one final manual validation pass before publishing.

## Test And Save

Run and reach the flag. Save; this is `#HUA46E`. Finish with [Step 8 - Save And Publish](/toolsAndResources/flowGraphEditor/babylonBrosTutorial/publish).



## What You Will Build

This tutorial builds [Babylon Bros](/toolsAndResources/flowGraphEditor/babylonBrosExample), a small physics-driven platformer, entirely in the [Flow Graph Editor](https://flowgraph.babylonjs.com). You start from a finished scene that does nothing on its own and add every interaction as a flow graph: running, jumping, coin pickups, spring bounces, enemies, and a win condition.

The point of the tutorial is the editor workflow. Each step uses real editor features: the node palette, the scene preview, the property panel, validation, execution contexts, debug mode, and the snippet server.

![The finished Babylon Bros flow graph open in the Flow Graph Editor](/img/tools/flowGraphEditor/tutorial/editorOverview.webp)

## How The Series Works

Each step ends with a saved flow graph snippet that includes everything from the previous steps. You can open any step directly in the editor and continue from there:

| Step | Snippet |
| ---- | ------- |
| Move the hero | `#1CUUOO` |
| Add jumping | `#LI45XB` |
| Collect coins | `#W0H5RG` |
| Spring bounces | `#YCDRLC` |
| Enemies | `#CMWMAN` |
| Win condition (final) | `#HUA46E` |

The scene is loaded from Playground snippet `#P41T6E#2` throughout, so every step shares the same preview scene.

## Steps

- [Step 0 - Prepare The Assets](/toolsAndResources/flowGraphEditor/babylonBrosTutorial/prepareAssets)
- [Step 1 - Set Up The Editor](/toolsAndResources/flowGraphEditor/babylonBrosTutorial/setup)
- [Step 2 - Move The Hero](/toolsAndResources/flowGraphEditor/babylonBrosTutorial/movement)
- [Step 3 - Add Jumping](/toolsAndResources/flowGraphEditor/babylonBrosTutorial/jump)
- [Step 4 - Collect Coins](/toolsAndResources/flowGraphEditor/babylonBrosTutorial/coins)
- [Step 5 - Spring Bounces](/toolsAndResources/flowGraphEditor/babylonBrosTutorial/springs)
- [Step 6 - Enemies](/toolsAndResources/flowGraphEditor/babylonBrosTutorial/enemies)
- [Step 7 - Win Condition](/toolsAndResources/flowGraphEditor/babylonBrosTutorial/win)
- [Step 8 - Save And Publish](/toolsAndResources/flowGraphEditor/babylonBrosTutorial/publish)

## Before You Start

Read [Getting Started](/toolsAndResources/flowGraphEditor/gettingStarted) and build [Your First Runnable Graph](/toolsAndResources/flowGraphEditor/firstGraphExample) first. You will be more comfortable with the palette, the preview, and the run controls before tackling a full game.



## A Full Interactive Demo

The previous examples build a single interaction at a time. Babylon Bros is the other extreme: a complete, physics-driven, flow-graph-powered platformer that brings many of the editor's block families together into one scene.

It is a good demo to study once the basic patterns make sense, because it shows how events, control flow, physics, and data access blocks combine into real gameplay rather than a single console log.

## Run It

You can run the full scene directly in the Playground:

<Playground id="#P41T6E#1" title="Babylon Bros Platformer" description="A physics-driven, Flow-Graph-powered Mario-style platformer. Run with the arrow keys, jump with Space, collect coins, bounce on springs, and reach the flag." category="Flow Graph"/>

Use the arrow keys to run, `Space` to jump, collect coins, bounce on springs, and reach the flag.

## Open The Graph In The Editor

The interaction logic lives in a flow graph stored on the snippet server. You can open it straight in the hosted editor with the snippet preloaded:

[Open Babylon Bros in the Flow Graph Editor](https://flowgraph.babylonjs.com/#EH7L45#2)

The graph is named `Babylon Bros — Interactions`. Loading it in the editor lets you inspect how the gameplay is wired, run it against a preview scene, and experiment with changes before saving a new snippet version.

## What It Demonstrates

Babylon Bros is useful as a reference because it combines several block families that the earlier examples introduce one at a time:

- **Events** drive input and scene reactions, including pointer and pick interactions.
- **Control Flow** sequences gameplay steps, branches on game state, and times repeated actions.
- **Physics** moves the player, handles jumping and bouncing, and reacts to collisions.
- **Data Access** reads and writes the variables that track coins, state, and progress.

## How To Study It

A practical way to learn from this graph is to open it in the editor and work through it incrementally:

1. Use [Find In Graph](/toolsAndResources/flowGraphEditor/editorOperations) to jump to event blocks and trace where each interaction starts.
2. Turn on Debug Mode and run it to watch execution highlight the active path.
3. Inspect variables in the Variables panel to see how coin and state values change.
4. Drop a breakpoint on a key block to pause before a jump or collision response.

From there, try small edits, such as changing jump force or coin behavior, then save your own snippet to compare against the original.


Tutorial - Build Babylon Bros

What You Will Build

How The Series Works

Steps

Before You Start

Further reading

Example - Babylon Bros Platformer

A complete, physics-driven flow graph demo that powers a Mario-style platformer in Babylon.js, ready to open and edit in the Flow Graph Editor.

Getting Started With The Flow Graph Editor

Learn the basic workflow for creating, testing, saving, and restoring flow graphs in the Babylon.js Flow Graph Editor.

Coming next

Step 1 - Set Up The Editor

Load the Babylon Bros scene into the Flow Graph Editor, confirm physics, and create an empty graph ready for logic.

Step 0 - Prepare The Assets

Prepare the still Babylon Bros scene with meshes, materials, ready-but-not-playing animation groups, sounds, and physics before adding any flow graph logic.

Step 2 - Move The Hero

Drive the Babylon Bros hero left and right with keyboard events, a velocity variable, and a per-frame physics update in the Flow Graph Editor.

Step 3 - Add Jumping

Add a grounded jump to Babylon Bros using a key event, a ground check branch, an upward impulse, and a sound in the Flow Graph Editor.

Step 4 - Collect Coins

Add coin collection to Babylon Bros using physics collision events, a score variable, custom events, and sound in the Flow Graph Editor.

Step 5 - Spring Bounces

Add spring pads to Babylon Bros that launch the hero upward on collision when descending, with a compress animation and sound.

Step 6 - Enemies

Add enemy interactions to Babylon Bros - stomp from above to defeat, touch from the side to get hurt - using collision events and custom events.

Step 7 - Win Condition

Finish Babylon Bros by reaching the flag - raise it, play victory music, and lock the game as done using a custom event in the Flow Graph Editor.

Step 8 - Save And Publish

Save the finished Babylon Bros flow graph to a snippet and load it from a Playground scene to ship the full demo.

Step	Snippet
Move the hero	`#1CUUOO`
Add jumping	`#LI45XB`
Collect coins	`#W0H5RG`
Spring bounces	`#YCDRLC`
Enemies	`#CMWMAN`
Win condition (final)	`#HUA46E`