Building Games in the PlayCanvas Editor

Updated June 2026
The PlayCanvas Editor is a cloud-based visual development environment that runs entirely in your browser. It combines scene composition, asset management, code editing, and live preview into a single tool, letting you build complete 3D games without installing anything. This guide covers the editor workflows that experienced teams use to stay productive on real projects.

While the getting started guide covers the basics of placing entities and writing your first script, building a full game demands a more structured approach. You need consistent hierarchy organization so team members can find things, template entities that propagate changes everywhere at once, collaboration settings that prevent editing conflicts, and asset pipelines that keep download sizes under control. The editor provides tools for all of these, and understanding them early saves significant refactoring time later.

Organize Your Scene Hierarchy

A well-organized hierarchy is the difference between a project that scales gracefully and one that becomes unmanageable after a few dozen entities. Start by creating empty root entities that serve as organizational folders. Common top-level groups include Environment (terrain, buildings, props), Characters (player, NPCs, enemies), Lighting (directional lights, point lights, environment probes), Cameras (main camera, cinematic cameras, debug cameras), UI (menus, HUD elements, overlays), and Systems (game manager scripts, audio managers, input controllers).

Nest entities using parent-child relationships so that moving a parent moves all its children together. A vehicle entity might contain child entities for the body mesh, each wheel, the headlights, and the engine sound emitter. When you move the vehicle parent, everything follows. When you need to animate just the wheels, you target the child entities individually. This hierarchical transform inheritance is fundamental to how PlayCanvas processes entity positions every frame.

Use descriptive names that convey both what an entity is and where it belongs. "Tree_Oak_Large_01" is more useful than "Entity" when you are searching through a hierarchy with hundreds of items. The hierarchy panel supports search filtering, so consistent naming conventions let you quickly locate entities by typing partial names. Avoid deeply nested hierarchies where possible, as each level of nesting adds a transform calculation during rendering.

For games with multiple levels or scenes, use PlayCanvas's scene management system. Each scene is a self-contained hierarchy that can be loaded and unloaded independently. You might have a Main Menu scene, a Gameplay scene, and a Game Over scene, with a persistent root scene that holds the camera, audio manager, and game state controller. Scene loading happens asynchronously, so you can display loading progress to the player while the next level streams in.

Create and Use Template Entities

Templates (sometimes called prefabs in other engines) are reusable entity definitions that maintain a live connection to their source. When you create a template from an entity, every instance of that template in your scene updates automatically when you modify the source definition. This is essential for objects that appear many times across your game, like collectible items, enemy types, environmental props, or UI widgets.

To create a template, right-click an entity in the hierarchy and select "New Template." This converts the entity and all its children into a template asset that appears in the asset panel. You can then drag the template from the asset panel into the viewport or hierarchy to create new instances. Each instance is linked to the source template, shown by a distinct icon in the hierarchy.

Template instances can override specific properties without breaking the link to the source. If you have a template for a crate and you want one instance to be red while all others remain brown, you override the material property on that single instance. The override is preserved even when the source template is updated, so the red crate keeps its color while inheriting any structural changes like new collision shapes or additional child entities.

For complex entities like enemy characters that combine a model, animations, physics, AI scripts, and sound effects, templates ensure consistency. Fix a bug in the enemy's AI script and every enemy instance across every scene picks up the fix. Add a new death animation to the template and every enemy gains the new animation without manual updating. This propagation saves enormous amounts of time on content-heavy projects with dozens or hundreds of placed entities.

Set Up Real-Time Collaboration

PlayCanvas projects support real-time multi-user editing out of the box. Invite team members from the project settings by entering their PlayCanvas account emails and assigning roles. The "Admin" role grants full control including project deletion, "Write" allows editing all assets and scene content, and "Read" provides view-only access for stakeholders who need to observe progress without risk of accidental changes.

When multiple editors are active in the same project, the editor synchronizes changes at the property level. If one person moves an entity while another modifies its material, both changes apply cleanly. If two people edit the same property simultaneously, the last change wins, but this is rare in practice because collaborators typically work on different parts of the scene. The editor shows colored cursors and selection highlights for each active user so you can see who is working where.

For code collaboration, the built-in code editor syncs script files across connected sessions. However, many teams prefer using external code editors like VS Code with the PlayCanvas extension, which syncs local file changes to the cloud project. This approach lets programmers use their preferred tooling while still participating in the collaborative workflow. The project's code history tracks every save, providing a safety net for reverting problematic changes.

Branch-based workflows are available for teams that need to experiment without affecting the main project. You can fork a project to create an independent copy, develop a new feature or level, and then manually merge the results back into the primary project. While this is not as automated as Git branching, it provides isolation for experimental work without the risk of destabilizing a production project.

Configure Your Asset Pipeline

Organize assets into a folder structure that mirrors your project's logical groupings. A common layout uses top-level folders for Models, Textures, Materials, Scripts, Audio, and Fonts, with subfolders for each game system or level. Consistent organization means team members always know where to find and upload assets, reducing duplicated files and naming collisions.

Every asset has preload and loading settings accessible from the inspector. Assets marked for preloading download before the application starts, ensuring they are available the instant the game begins running. Assets not marked for preloading must be loaded explicitly via the Asset Registry API during gameplay. For a small game, preloading everything is fine. For larger projects with multiple levels, preload only the assets needed for the initial scene and load additional content on demand as the player progresses.

Asset bundles group multiple assets into a single downloadable package, reducing HTTP request overhead and giving you control over what loads when. You might create a bundle for each game level containing all the models, textures, and audio that level requires. When the player reaches a new level, you load its bundle, and all the constituent assets become available. Bundles work with the engine's loading progress events, so you can display accurate loading bars.

Texture compression deserves special attention because textures typically dominate download size. The editor's texture import settings let you choose compression formats including Basis Universal, which compresses textures at build time and decompresses them on the GPU at runtime. This reduces both download size and VRAM consumption. Set texture quality per-asset based on visual importance, using higher quality for hero assets and lower quality for distant environment textures that the player will not examine closely.

Use Scene Settings and Project Configuration

The scene settings panel, accessible from the cog icon in the toolbar, controls global rendering and simulation properties. Set the ambient light color and intensity to establish the baseline illumination before any directional or point lights contribute. Configure the skybox by assigning a cubemap or equirectangular HDR image, which provides both a visual backdrop and image-based lighting for PBR materials. Fog settings let you add distance-based atmospheric haze that fades distant objects and adds depth to outdoor environments.

Physics settings live in the scene configuration as well. You can adjust gravity direction and magnitude (the default matches Earth at -9.81 on the Y axis), configure the physics simulation rate independently from the rendering framerate, and set iteration counts that control simulation accuracy. Higher iteration counts produce more stable stacking and joint behavior at the cost of CPU time, so you tune this value based on how physics-heavy your game is.

Project-level settings in the project dashboard control the engine version, script loading order, external script URLs, and build output configuration. You can pin a specific engine version to prevent unexpected behavior from engine updates, or use the latest version to benefit from recent bug fixes and features. The script loading order panel lets you define dependencies between scripts, ensuring that utility scripts load before gameplay scripts that depend on them.

Build settings control what happens when you publish or download your project. You can enable minification and concatenation to reduce the number and size of JavaScript files, toggle asset compression, and set the target resolution and fill mode for the game canvas. The "fill window" mode makes the canvas expand to fill the browser viewport, which is the standard choice for games, while "fixed" mode lets you specify exact pixel dimensions for embedded or ad-unit deployments.

Key Takeaway

A productive PlayCanvas workflow starts with disciplined hierarchy organization, leverages templates for reusable entities, uses the collaboration features to keep teams in sync, and configures the asset pipeline early to prevent download bloat as the project grows.