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

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

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


Step 4 - Collect Coins

Goal

Blocks Used

Step By Step

1. Central Collect Handler

2. Trigger From Collisions

3. Reuse The Pattern

Editor Features

Test And Save

Further reading

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 5 - Spring Bounces

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

Data Access Blocks

Detailed reference for the Data Access family in the Babylon.js Flow Graph Editor.