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


Step 1 - Set Up The Editor

Open The Editor

Load The Scene Snippet

Confirm The Scene Context

Start With An Empty Graph

Next

Further reading

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.