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



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



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


Step 2 - Move The Hero

Goal

Blocks Used

Step By Step

1. Initialize State

2. Read The Keys

3. Apply Velocity Each Frame

4. Group It

Test In The Editor

Save

Further reading

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

Control Flow Blocks

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