Get the Pitch on Screen

A soccer match needs a pitch. Right now the canvas is black: no grass, no goalposts, no light to see by. Before anything can move, the pitch has to exist.

Five terms carry the whole course. An entity is a named thing in the world, like a wall, a light, or the ball. A component is data attached to an entity. A MeshPrimitive holds a shape and colour. A Goal holds a box. A System reads one kind of component every frame and acts on it. The World holds them all and ticks once per frame. A scene is a JSON file listing the starting entities and their components. You build this game by writing that file, not a render loop.

Scaffold a project with create-arcade, then open the empty scene at src/scenes/soccer.json. Every component this course uses lives under src/components/ — the path printed on each code chip below.

The scene file, lights, and camera

A scene file starts with a few headers and an entities map. Add the sun, the ambient fill light, and the overhead camera:

{
  "name": "SoccerPitch",
  "gameTitle": "AI Soccer",
  "sceneTitle": "Red vs Blue — Push, Strike, Score",
  "clearColor": [0.04, 0.12, 0.07, 1],
  "entities": {
    "Sun": {
      "tags": ["sun"],
      "components": {
        "DirectionalLight": {
          "direction": [-0.4, -0.85, -0.3],
          "intensity": 0.9,
          "diffuse": [1.0, 0.95, 0.85],
          "shadowEnabled": true,
          "shadowMapSize": 2048,
          "shadowMinZ": 0.1,
          "shadowMaxZ": 90
        }
      }
    },
    "Ambient": {
      "components": {
        "HemisphericLight": { "intensity": 0.6, "diffuse": [0.75, 0.85, 0.9], "groundColor": [0.12, 0.22, 0.14] }
      }
    },
    "Camera": {
      "components": {
        "ArcCamera": { "distance": 34, "alpha": -1.5708, "beta": 0.9, "controlsEnabled": false }
      }
    }
  }
}

The DirectionalLight is the sun: one angled beam that lights up surfaces and, because shadowEnabled is true, also casts shadows. Its toSpec() packs those fields into a renderer spec: