Quick Start

Web Engine is a browser-based game engine, so there's no heavy installation required. You can start creating games immediately by opening the Studio in your browser, or run it locally for full development access.

Step 1: Choose Your Path#

You have two options to get started:

Option A: Web Studio (Recommended for Beginners)#

The fastest way to get started is to launch the Studio directly from your browser:

1. Visit https://studio.web-engine.dev
2. The Studio will load in your browser — no installation needed
3. Your projects are stored locally in your browser using IndexedDB
4. Everything runs client-side — no data is sent to any server

Option B: Local Development#

For local development with source access, follow these steps:

# Clone the repository
git clone https://github.com/web-engine/web-engine.git
cd engine
 
# Install dependencies (requires pnpm)
pnpm install
 
# Build core packages
pnpm run build:packages
 
# Start the Studio
pnpm --filter @web-engine-dev/studio dev
 
# Open http://localhost:3000 in your browser

For detailed installation instructions, see the Installation Guide.

Step 2: Create a New Project#

When you first open the Studio, you'll see the Project Hub — your central place for managing projects.

1. Click the New Project button in the top-right corner
2. Enter a name for your project (e.g., "My First Game")
3. Choose a template:
   • Empty — Blank scene with just a camera
   • 3D Starter — Basic 3D scene with ground, lighting, and a cube
   • Physics Demo — Pre-built physics playground
   • Character Controller — Third-person character template
4. Click Create to initialize your project

Your project will open in the Studio with the chosen template scene ready for editing.

Step 3: Navigate the Editor#

The Studio interface is divided into several key panels:

Viewport Navigation#

Master these controls to navigate the 3D viewport efficiently:

• Right-Click + Drag — Rotate camera (orbit around focus point)
• Middle-Click + Drag — Pan camera (move parallel to view)
• Scroll Wheel — Zoom in/out
• F — Focus on selected object
• Alt + Left-Click + Drag — Alternative pan method

Step 4: Add Your First Object#

Let's add a simple 3D object to your scene:

1. Right-click in the Hierarchy Panel (left side)
2. Select 3D Object → Cube
3. A cube will appear at the origin (0, 0, 0) in your scene
4. The cube will automatically be selected

Transform Tools#

Use the transform tools to position your cube:

• W — Move tool (translate along X, Y, Z axes)
• E — Rotate tool (rotate around axes)
• R — Scale tool (resize uniformly or per-axis)
• Q — Select tool (click to select without transforming)

Click and drag the colored arrows, arcs, or planes on the gizmo to transform your object:

• Red — X axis (right/left)
• Green — Y axis (up/down)
• Blue — Z axis (forward/back)
• Yellow/White — All axes (uniform transform)

Inspect Properties#

With the cube selected, look at the Inspector Panel on the right. You'll see the entity's components:

• Transform — Position, rotation, and scale in 3D space (you can type exact values here)
• Mesh Renderer — The visual representation (cube geometry and material)
• Material — Surface properties (color, roughness, metalness)

Try changing the color of your cube:

1. In the Inspector, find the Material component
2. Click the color swatch next to albedoColor
3. Pick a new color in the color picker
4. Your cube will update in real-time!

Step 5: Build Your Scene#

Let's add a few more objects to make your scene interesting:

Add a Ground Plane#

1. Right-click in Hierarchy → 3D Object → Plane
2. Rename it to "Ground" (double-click the name or press F2)
3. Set Position to (0, 0, 0) and Scale to (10, 1, 10)

Add Lighting#

1. Right-click in Hierarchy → Light → Directional Light
2. Set Position to (5, 10, 5)
3. Set Rotation to (-45, 45, 0) to angle the light
4. Enable castShadows in the Inspector for realistic shadows

Add a Sphere#

1. Right-click in Hierarchy → 3D Object → Sphere
2. Position it above the ground at (0, 2, 0)
3. Change its material color to something bright

Step 6: Enter Play Mode#

Once you've set up your scene, test it in Play Mode:

1. Press Ctrl/Cmd + P or click the Play button (▶) in the toolbar
2. The game will start running in the viewport
3. All systems activate — physics, scripts, audio, particles, etc.
4. Press Ctrl/Cmd + P again to stop and return to Edit Mode

Step 7: Save Your Work#

Don't forget to save your progress:

• Ctrl/Cmd + S — Save the current scene
• The project auto-saves to your browser's local storage
• File → Export Project — Download a portable .webengine file for backup or sharing
• File → Export as ZIP — Download all project files as a ZIP archive

Step 8: Add Interactivity (Optional)#

Ready to add some physics? Let's make the sphere fall and bounce:

1. Select the Sphere entity
2. Click Add Component in the Inspector
3. Search for and add RigidBody
4. Set type to Dynamic
5. Set restitution to 0.8 (bounciness)
6. Add another component: Collider
7. Set type to Sphere

Now add a static collider to the ground so the sphere doesn't fall through:

1. Select the Ground entity
2. Add RigidBody component, set to Fixed
3. Add Collider component, set to Box

Press Ctrl/Cmd + P to enter Play Mode and watch the sphere fall and bounce!

Next Steps#

Congratulations! You've created your first scene in Web Engine. Here's what to explore next: