
## 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).



## 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.



## 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).


Step 7 - Win Condition

Goal

Blocks Used

Step By Step

1. Detect The Flag

2. Win Handler

3. Respect Game State

Editor Features

Test And Save

Further reading

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 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.