# Build your first game

Go from a starter kit to a playable browser game on your computer. Bring your own editor or coding agent.

Download a standalone game kit, run it locally, and make your first change.

<a id="before-you-start"></a>

## Before you start

You need **Node.js 24 or newer**, **pnpm 12**, and a code editor. You can download a kit and build locally without a SpawnKit account.

Choose your starting point: [Create with the CLI](https://spawnkit.cloud/docs/create-with-cli), download a kit below, or [upload an existing browser game](https://spawnkit.cloud/docs/upload-existing-game). Building with an AI agent? Follow the [Codex](https://spawnkit.cloud/docs/codex), [Claude Code](https://spawnkit.cloud/docs/claude-code), or [Cursor](https://spawnkit.cloud/docs/cursor) guide. Use the [dashboard guide](https://spawnkit.cloud/docs/dashboard) when you are ready to manage a hosted game.

**Check your tools**

```sh
node --version
pnpm --version
```

If either command is missing, install [Node.js](https://nodejs.org/en/download) and [pnpm](https://pnpm.io/installation) before continuing.

<a id="choose-a-kit"></a>

## 1. Choose a starting point

Each kit includes TypeScript source, a small playable scene, local development tools, and a production build. Not sure where to start? Choose [Phaser](https://spawnkit.cloud/kits/phaser) for a simple 2D game. You can edit every part of the game.

| Kit | Start here for |
| --- | --- |
| [PixiJS](https://spawnkit.cloud/kits/pixi) | 2D sprites and a lightweight rendering foundation. |
| [Phaser](https://spawnkit.cloud/kits/phaser) | 2D games built around Phaser scenes. |
| [Babylon.js](https://spawnkit.cloud/kits/babylon) | 3D games with Babylon.js rendering. |
| [Three.js](https://spawnkit.cloud/kits/three) | 3D scenes built with Three.js. |
| [Phaser + Arcade Physics](https://spawnkit.cloud/kits/phaser-arcade) | A 2D starting scene with movement and collisions. |
| [Three.js + Rapier](https://spawnkit.cloud/kits/three-rapier) | A 3D starting scene with a dedicated physics engine. |

Download the ZIP from a kit page and extract it into a new folder. Open the extracted project folder containing `package.json` in your editor. Use the [kit builder](https://spawnkit.cloud/templates) if you want to choose your own combination of tools.

> **Already have a project?**
>
> Extract into a separate folder to compare files. Follow [Extend a game](https://spawnkit.cloud/docs/extend) to work on an existing project without replacing your changes.

<a id="run-locally"></a>

## 2. Run the game

Open a terminal in the project folder, then install its dependencies and start the development server.

**Terminal · inside your game folder**

```sh
pnpm install
pnpm dev
```

Open the local address printed in the terminal. In the starter scene, use the arrow keys to move and collect gold. Leave the terminal running while you edit; stop the server with Ctrl+C.

> **First-time local HTTPS setup**
>
> The development server uses a named HTTPS address. Follow the local certificate setup when prompted. If setup needs attention, run `pnpm exec dev-domains doctor`. For a plain local Vite server, stop the existing server and run `pnpm exec vite`; use the address it prints.

<a id="make-a-change"></a>

## 3. Make it yours

Start with one visible change: update the heading in `index.html`, save it, and check the browser. Then open `src/main.ts` to change the scene, artwork, or game behavior.

| File or folder | What it controls |
| --- | --- |
| `src/main.ts` | The entry point for your chosen rendering engine. |
| `src/` | Game logic and any selected simulation modules. |
| `public/` | Static artwork, audio, and other game assets. |
| `spawnkit.config.ts` | The title, description, and media for your game listing. |
| `package.json` | Installed dependencies and available commands. |
| `AGENTS.md` | Project instructions for your coding agent. |

Working with an agent? Open the project in your agent and have it read `AGENTS.md` before editing. For the reusable create, extend, and publish workflow, see [Agent resources](https://spawnkit.cloud/docs/api#agent-skill).

<a id="check-your-game"></a>

## 4. Check the game and build

Run these checks before sharing a build. Curated kits include browser-based Vitest tests; Chromium only needs to be installed once on each machine.

**Terminal · check and build**

```sh
pnpm lint
pnpm test
pnpm build
```

A successful build creates `dist/`, the files your players will load. Keep the `pnpm-lock.yaml` created during installation so future installs use the same resolved dependencies.

- Play through the starter scene and check movement and scoring.
- Resize the browser and check that the game stays usable.
- Check the browser console for errors.
- If you chose a custom kit, run only the test scripts included in its `package.json`.

Ready to share? Follow [Publish your game](https://spawnkit.cloud/docs/publishing) to upload your browser build.

<a id="troubleshooting"></a>

## If something gets stuck

| What you see | What to try |
| --- | --- |
| `pnpm` or `node` is not recognized | Install the required tool, reopen your terminal, and check its version. |
| The local address does not open | Keep the development terminal running. Run `pnpm exec dev-domains doctor`, or use `pnpm exec vite` for a plain local server. |
| Tests cannot find a browser | Run `pnpm test:setup`, then retry `pnpm test`. |
| The page is blank | Check the terminal and browser console. Confirm you opened the development URL, rather than opening `index.html` directly. |

> **About the SpawnKit CLI**
>
> Run `pnpm dlx @spawnkit/cli` to create or extend a game. See [Create with the CLI](https://spawnkit.cloud/docs/create-with-cli) for the complete create, install, test, and build sequence.