logo

Babylon.js Market

By Lawrence

5 minutes

Goals score and the HUD counts them. But the match still feels unfinished. After a goal, the ball snaps back to centre. The two teams keep playing from wherever they stood. There is no kickoff, no formation reset, and no first-to-five finish.

The match needs one part that is in charge. It watches for goals. It keeps the match score. On each goal, it pauses, moves both teams back to centre, and starts play again. In many engines, this logic ends up as loose code in main.ts. In Arcade ECS, it is a component like any other. It is called SoccerDirector, and it sits on a single world entity. Here is why that matters. If the glue is not a component, the events it fires have no clear source. Then the whole graph stops resolving.

Add the director to a world entity

You add one new entity. It is tagged world, and it carries one component:

src/scenes/soccer.json
"World": {
  "tags": ["world"],
  "components": {
    "SoccerDirector": { "matchPoint": 5, "kickoffDelayMs": 1500, "teams": ["Red", "Blue"] }
  }
}

That is the last entity in the file. Add every change from the nine lessons in order. Now the scene matches the shipped SoccerPitch exactly.

Continue reading

Unlock the Full Course

Every lesson, the runnable examples, and the finished build — yours to keep.

$9one-time

Was this page helpful?

We read every note — tell us what's working and what isn't.

↑↓ NavigateEnter SelectEsc CloseCtrl+K Open Search