Babylon.js Market

Right now, you can dribble the ball into the net and nothing happens. No point. No reset. No score. The goal line is only paint on the grass.

Four components fix that: Goal, Score, BallReset, and Scoreboard. They all listen for one event. None of them ever calls another. When the ball crosses the line, a goal fires. The score goes up, the ball moves back to centre, and the HUD updates.

Add the goals, the score, and the HUD

Each net gets a Goal. A Goal is an invisible trigger box. Its ownerEntity is the team that scores into it. Add a Score entity to hold the tally. Add a Board for the scoreboard. Add a BallReset to the ball:

src/scenes/soccer.json

"RedNet": {
  "components": {
    "Goal": { "ballEntity": "Ball", "ownerEntity": "Blue", "center": [-14, 1, 0], "size": [1.5, 2, 5], "resetPosition": [0, 0.5, 0], "resetBallOnScore": true, "points": 1, "cooldown": 1 }
  }
},
"BlueNet": {
  "components": {
    "Goal": { "ballEntity": "Ball", "ownerEntity": "Red", "center": [14, 1, 0], "size": [1.5, 2, 5], "resetPosition": [0, 0.5, 0], "resetBallOnScore": true, "points": 1, "cooldown": 1 }
  }
},
"Ball": {
  "components": {
    "BallReset": { "resetY": 0.5, "minY": -5, "maxY": 20, "boundaryX": 17, "boundaryZ": 12, "defaultPosition": [0, 0.5, 0] }
  }
},
"ScoreState": { "components": { "Score": { "scores": { "Red": 0, "Blue": 0 } } } },
"Board":      { "components": { "Scoreboard": {} } }

The ownerEntity swap is on purpose. A ball in the red net scores for Blue. So RedNet's owner is Blue. That one string sends the point to the right team.

Add the goals, the score, and the HUD

Unlock the Full Course

Build an AI Soccer Game with Arcade ECS

Was this page helpful?