PlayCanvas Getting Started

Create a PlayCanvas Account and Project

Navigate to playcanvas.com and sign up for a free account using your email or a GitHub login. Once logged in, you land on your dashboard where all your projects are listed. Click the "New Project" button to create one. PlayCanvas offers several starter templates including blank projects, first-person controllers, and physics demos. For your first project, choose the blank template so you learn the fundamentals without pre-built code getting in the way.

When the editor opens, take a moment to understand the interface layout. The center of the screen shows the 3D viewport where you compose your scene visually. On the left side, the hierarchy panel displays every entity in your scene as a tree structure. The bottom panel is the asset browser where your textures, models, scripts, and materials live. On the right side, the inspector panel shows the properties and components of whatever entity you have selected. A blank project starts with a camera entity and a directional light, which are the minimum requirements for rendering anything visible.

The toolbar along the top of the viewport provides transform tools for moving, rotating, and scaling entities. The "W" key activates the translate tool, "E" activates rotate, and "R" activates scale. You can switch between local and world coordinate spaces using the toggle in the toolbar, which affects whether the transform gizmo aligns with the entity's own orientation or with the global axes. Practice clicking entities in the viewport or hierarchy to select them, then dragging the gizmo arrows to reposition them in the scene.

Build Your First Scene

Right-click in the hierarchy panel and select "New Entity" to add objects to your scene. PlayCanvas provides built-in primitive shapes including Box, Sphere, Capsule, Cone, Cylinder, and Plane. Start by adding a Plane entity to serve as the ground. Select it, then in the inspector set its scale to 10 on the X and Z axes so it covers a reasonable area. The plane will appear as a flat gray surface in the viewport.

Next, add a Box entity and position it above the plane by setting its Y position to 0.5 (half the box's default height of 1 unit, so it sits exactly on the ground surface). Add a few more primitives, a sphere, a cylinder, perhaps another box at a different position, to populate your scene with objects you can see and interact with later. Use the translate gizmo or type exact coordinates in the inspector's position fields.

Check your lighting by selecting the directional light in the hierarchy. In the inspector, you can adjust the light's color, intensity, and shadow properties. Enable shadows on the light by checking the "Cast Shadows" option, then verify that your primitives cast shadows onto the ground plane. If shadows appear pixelated, increase the shadow resolution in the light's shadow settings. Adjust the light's rotation to change the angle of illumination, simulating different times of day.

Select the camera entity and position it so it has a good view of your scene. Set the camera's position to something like (0, 3, 8) and its rotation to (-15, 0, 0) so it looks slightly downward at your objects. Click the "Launch" button in the top toolbar to preview your scene in a new browser tab. You should see your primitives rendered with lighting and shadows.

Apply Materials and Textures

Every rendered entity uses a material that defines its visual appearance. To create a new material, right-click in the asset panel and select "New Asset" then "Material." A material asset appears in the panel. Click it to open its properties in the inspector, where you can configure values like diffuse color, metalness, roughness, emissive glow, and opacity.

Set the diffuse color to something visible like a bright red or blue. To apply this material to an entity, select the entity in the hierarchy, find its Render component in the inspector, and drag your material asset from the asset panel into the material slot. The entity updates immediately in the viewport to reflect the new material. Create several materials with different colors and assign them to different primitives so your scene has visual variety.

To add textures, drag image files (PNG, JPG, or HDR) from your computer into the asset panel. PlayCanvas uploads and processes them automatically. Open a material's properties, expand the Diffuse section, and drag your texture asset into the texture slot. The texture maps onto the entity's surface using its UV coordinates. For primitive shapes, PlayCanvas generates standard UV layouts automatically. You can adjust tiling and offset values in the material to control how the texture repeats across the surface.

Experiment with the roughness and metalness values to see how they affect the material's response to light. A roughness of 0 produces a mirror-like reflection while a roughness of 1 creates a completely matte surface. Metalness controls whether the material behaves like a metal (reflecting the environment color) or a dielectric like plastic or wood (reflecting white highlights). These physically-based properties produce realistic-looking results under any lighting condition.

Write Your First Script

Scripts add interactive behavior to your entities. Right-click in the asset panel and select "New Asset" then "Script." Name it something descriptive like "rotator.js." Double-click the script asset to open it in the built-in code editor. The template provides a skeleton with initialize and update methods already defined.

The initialize method runs once when the entity first becomes active. Use it to set up variables, cache references to other entities or components, and configure initial state. The update method runs every frame and receives a "dt" parameter representing the time elapsed since the last frame in seconds. Using dt for movement calculations ensures your game runs at the same speed regardless of framerate.

Write a simple rotation script by adding one line to the update method: this.entity.rotate(0, 30 * dt, 0); This rotates the entity 30 degrees per second around the Y axis. Save the script with Ctrl+S. Back in the scene, select the entity you want to rotate, click "Add Component" in the inspector, and choose "Script." In the Script component, click "Add Script" and select your rotator script. Launch the preview and watch your entity spin.

To respond to player input, use the app's input systems. Add keyboard detection by checking this.app.keyboard.isPressed(pc.KEY_LEFT) in your update method to detect if the left arrow key is held down. For mouse input, use this.app.mouse to track cursor position and button clicks. The input API provides both "is currently pressed" polling and "was just pressed this frame" event-style checks, giving you flexibility in how you structure your input handling logic.

You can add script attributes to expose configurable values in the editor inspector. Declare an attribute at the top of your script class like Rotator.attributes.add('speed', { type: 'number', default: 30 }); and then reference it as this.speed in your code. This lets designers adjust values visually in the editor without modifying code, which is particularly valuable as your team grows.

Launch and Test Your Game

Click the Launch button (the play icon in the top toolbar) to open your game in a new browser tab. The launched preview reflects the current state of your project, including any unsaved script changes. If something looks wrong, check the browser's developer tools console (F12 in most browsers) for JavaScript errors. PlayCanvas outputs descriptive error messages that include the script name and line number where the problem occurred.

The editor and the launched game communicate in real time during development. If you modify an entity's position or a material's color in the editor while the preview is running, the changes appear in the preview immediately for most property types. Script changes require a page refresh in the preview tab to take effect, but the editor can trigger this automatically when you save a script.

Use console.log statements in your scripts to output debug information. For more detailed debugging, add breakpoints in the browser developer tools' Sources panel, stepping through your code line by line to inspect variable values and execution flow. PlayCanvas scripts run as standard JavaScript in the browser, so every debugging technique you already know from web development applies directly.

The built-in profiler, accessible from the launch preview by pressing the tilde key or adding "?profile=true" to the URL, shows real-time performance metrics including frame time, draw calls, shader count, and VRAM usage. Use this early and often so you develop an intuition for what is and is not expensive in your scene.

Publish or Download Your Build

When your game is ready to share, PlayCanvas offers two publishing paths. The quick option is clicking "Publish" in the top toolbar, which creates a hosted build at a playcanvas.com URL you can share with anyone. This is ideal for playtesting, portfolio pieces, or small projects. The hosted build updates each time you publish, so you can iterate and re-share the same URL.

For production deployment, click "Download" in the publish menu to get a self-hosted build as a zip file. Extract it and you have a complete set of static files including an index.html, the engine runtime, and all your assets in optimized form. Upload these files to any web server, cloud storage bucket, or static hosting service and your game is live on your own domain.

The downloaded build can be further optimized by enabling asset compression in the project settings before building. PlayCanvas supports gzip and Brotli pre-compression for script bundles and texture basis compression for images. These optimizations reduce download sizes significantly, which directly improves load times for your players, especially on mobile networks where every kilobyte matters.