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

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

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


Step 5 - Spring Bounces

Goal

Blocks Used

Step By Step

1. Detect The Landing

2. Launch

3. Duplicate

Editor Features

Test And Save

Further reading

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