Build Your First Browser Game with the Crate Engine
The Crate Engine is a 3D game editor that runs in your web browser. There's nothing to install, and the games it makes run in a browser too. This guide takes you from an empty scene to a short playable level.
What you need
- A desktop or laptop with a recent version of Chrome, Edge, Firefox or Safari. The editor works on tablets, but building is easier with a keyboard and mouse.
- Optional: a free Crate Ship Games account, so you can save projects to the cloud. Without one, projects are saved in your browser and you can download a backup file.
Step 1: Start a project
Open the editor and start a new project, or pick a starter template. Your work is automatically saved to your browser as you go, and you can take version snapshots to roll back to later.
Step 2: Build the world
Put down ground and platforms first. Simple shapes are fine to begin with. The engine includes:
- Terrain tools to sculpt and paint ground and scatter foliage.
- Physically based materials and lighting presets, including a physical sky, so scenes look good straight away.
- Animated water, with adjustable wave height, wavelength, speed, choppiness and foam.
- Your own 3D models. Import GLB files made in Blender or downloaded from free asset libraries. The engine can create optimized copies and lower-detail versions for faster loading.
Static custom shapes collide along their drawn outline, so ramps, hills and curved platforms behave the way they look. You can switch any object to a simple box collider if you need to.
Step 3: Make it a game
Gameplay comes from components you attach to objects:
- Player: the character you control. Give it a dynamic rigid body so physics moves it. The optional character controller handles steps, slopes and a short "coyote time" grace period for jumps.
- Camera: add a camera that follows the player.
- Goal: reaching it wins the level.
- Hazard: touching it sends the player back.
- Checkpoint: changes where the player respawns.
- Collectible: pickups for score or progress.
- Mover: moving platforms and obstacles.
A classic first level needs only a few of them: a player at one end, a goal at the other, a gap with a hazard in it, a moving platform across the gap, and a checkpoint halfway.
Step 4: Add logic with scripts or visual events
When components aren't enough, write scripts in JavaScript, TypeScript or Lua. Scripts run in an isolated sandbox, separate from your account and the rest of the page. You can pause, step through and inspect variables while the game runs, and errors point to the exact line. For simple rules there are also visual events, which need no code.
Two of our test games show what this looks like. Crash Derby uses TypeScript for the player's car and JavaScript for the rival drivers, with real physics collisions and damage. Home Run Derby uses Lua for pitch timing, distance and scoring.
Step 5: Test it
Press Play to run the game inside the editor, then Stop to go back to exactly where you were. Test on a phone-sized window too: the engine has touch-control support, and the profiler and adaptive resolution help keep the frame rate smooth on slower devices.
Step 6: Save and share
- Download a project file to keep a backup you can open again later.
- Export a playable web build: a folder with your game, its scripts, the physics engine and a license list for the models you used. You can host it on any static web host.
- Export the source if you want to keep developing outside the editor.
Only include models and sounds you have the rights to use. The export's license list helps you check.
Optional: build with an AI assistant
If you use Claude, ChatGPT or Cursor, you can connect it to the editor and ask it to build, script and test scenes for you. You stay in control: changes need your permission for each project. AI features use your own provider account and API key.
Where to go next
The engine documentation covers commands and the scripting API. Once your game is ready, the creator program explains how games are reviewed for listing on Crate Ship Games.