Skip to content

Make Your First Game

Build, play, and export a complete (if tiny) game - a ground plane, a player object you can drive with the keyboard, a light, and a one-file game.html you can share - in a single sitting, without leaving the browser.

This is the foundational tutorial. It walks the whole Awaken loop end-to-end: create objects, edit them in the Inspector, script a behaviour, Play to test, and export a shippable file. Every other tutorial assumes you have done this one, because it teaches the create → edit → Play → ship rhythm the rest of the manual is organised around.

Coming soon

This tutorial is being written. The full step outline below is final, so you can already follow the project shape using the linked reference pages. Finished prose, screenshots, and a downloadable sample scene are on the way.

What you will build

A small playable scene: a flat floor, a cube "player" that slides around under WASD control, and a directional light so the scene is lit. You will press ▶ Play to drive it, then export it to a single game.html a friend can double-click.

Before you start

Steps

  1. Add the ground. Right-click the Viewport (or use + Create) and choose Create → Plane. In the Inspector scale it up so it reads as a floor. See Transforms for the Move/Rotate/Scale gizmos (W / E / R).

  2. Add the player. Create → Cube, then lift it above the plane so it sits on the floor. Rename it Player in the Hierarchy so your script can find it.

  3. Add a light. Create → Directional Light. Rotate it so the scene is clearly lit; see PBR & Lighting for how the directional light and ambient sky combine.

  4. Write a move script. Open the Code panel and write a small ScriptBehavior that reads the keyboard and moves the object:

    ts
    export default class implements ScriptBehavior {
      speed = 5; // m/s, 0..20 - a `min..max` comment turns this into an Inspector slider
    
      onUpdate(api: ScriptApi, dt: number) {
        let x = 0, z = 0;
        // Keys are matched by KeyboardEvent.key, lower-cased - so "a"/"d"/"w"/"s", not "KeyA".
        if (api.input.isDown("a")) x -= 1;
        if (api.input.isDown("d")) x += 1;
        if (api.input.isDown("w")) z -= 1;
        if (api.input.isDown("s")) z += 1;
        api.translate(x * this.speed * dt, 0, z * this.speed * dt);
      }
    }

    Press Compile. The public speed field becomes an Inspector control - a plain number is a drag-to-scrub box, and the 0..20 range in its comment upgrades it to a slider. See Inspector Parameters and the full ScriptApi Reference.

  5. Attach it. Select Player, Add Component → Script, and pick your script. Adjust speed on the component if you like.

  6. Play. Press ▶ Play in the Toolbar, click the Game view to give it focus, and drive the cube with WASD. Press ■ Stop - the scene snaps back exactly to where you left it (play-time motion never persists; see Core Concepts).

  7. Export. Open File ▾ → Export Game (game.html)…. Awaken writes one self-contained file. Double-click it, or send it to a friend - it runs the same runtime you just played. See Export game.html.

📸 Screenshot - save as img/tutorials-first-game-play.png

The editor in Play with the Game view focused: the Player cube on the ground plane, lit by the directional light, and the Script component's speed slider visible in the Inspector.

Where to go next

See also

Awaken — browser-native WebGPU game engine.