PlayCanvas

PlayCanvas is a web-first 3D/2D game engine with a browser-based editor.

Two ways to build a PlayCanvas Game:

• npm/bundler workflow: a custom web app with playcanvas and @minit-games/sdk from npm.
• Cloud Editor workflow: entirely at playcanvas.com, no local npm project.

Quick Start#

Step 1: Create a Project#

Sign up at playcanvas.com and create a project in the Cloud Editor, or start a code-first project with npm install playcanvas. Building the game itself is standard PlayCanvas work (official docs).

Step 2: Set Up for Portrait#

Games run in the host's portrait iframe. Use fillMode: pc.FILLMODE_FILL_WINDOW and resolutionMode: pc.RESOLUTION_AUTO so the canvas fills the frame responsively:

var canvas = document.getElementById('canvas');
var app = new pc.Application(canvas, {
  fillMode: pc.FILLMODE_FILL_WINDOW,
  resolutionMode: pc.RESOLUTION_AUTO
});

// Set target aspect ratio
app.resizeCanvas(960, 1480);

npm and Bundler Workflow#

Building entirely in the browser instead? Jump to the Cloud Editor workflow.

Step 3: Integrate Minit SDK#

npm install @minit-games/sdk

import { initializeSDK, loadingDone, reportResult } from '@minit-games/sdk';

initializeSDK();

// ...load assets, then optionally signal the game is ready...
loadingDone();

// when the game ends, report the final score once:
function onGameOver(score) {
  reportResult(score);
}

This is the same @minit-games/sdk every non-Cloud-Editor integration uses. Full API: Install the Minit SDK.

Step 4: Export and Publish#

Create a production build: a static web build with index.html at the root.

Step 5: Upload to Creator Console#

Zip the build folder's contents with index.html at the root and upload to the Creator Console. Test in the feed preview.

Cloud Editor Workflow#

Building a local app with npm and a bundler instead? Jump to the npm/bundler workflow.

Build your game in the Editor as usual; the steps below cover the Minit Games-specific parts.

Step 3: Create an ESM Script Asset#

The Minit SDK is an ES module. In the PlayCanvas Editor, .js script assets are classic scripts and cannot use import/export, so your script asset must use the .mjs extension (e.g. game.mjs).

Step 4: Add the Minit SDK#

Download the Minit SDK (minit.mjs)

Upload minit.mjs as a script asset, or create a new .mjs script asset and paste its contents in. No dependencies beyond the playcanvas engine the Editor already provides.

Step 5: Import and Use the API#

import { Minit } from './minit.mjs';

// Call once your game has finished loading and is ready to be shown
Minit.loadingDone();

// Read a game-config value from the URL query string, e.g. ?difficulty=hard
const difficulty = Minit.getConfigValue('difficulty', 'normal');

// Read this player's persisted userData slot (or undefined if never written)
const savedProgress = Minit.getUserData();

// When the game ends, report the final score once.
// Time-based games (resultSorting fastestTime/slowestTime): pass SECONDS, not ms.
function onGameOver(score) {
  Minit.reportResult(score);
}

Options and result handling: Reporting Results.

• Minit.shouldShowTutorial(): gate your first-play tutorial UI on it; it returns false once the app reports the player has played the Game. Interactive Tutorials.
• Minit.isViewable() / Minit.onViewableChange(fn): whether the player can see the game right now. Pause When Off-Screen.

Outside the Minit Games host (the Editor's Launch preview, local dev, self-hosting), window.minit isn't present: loadingDone and reportResult fall back to a console.log, and the read methods still return values. All safe to call while iterating. Declaring config keys: Config Values.

Optional: MinitReady Drop-In Script#

No precise fully-loaded moment? minit.mjs exports a MinitReady script component that calls Minit.loadingDone() automatically on its first frame:

1. Attach the minit.mjs script asset to any entity; an empty root entity works well.
2. Add the minitReady script to that entity in the Editor's script-attributes panel.

If your game has its own loading gate, call Minit.loadingDone() directly from that point instead.

Step 6: Export#

Publish > Download produces a self-hosting build: a folder containing index.html and your assets.

Warning: The #1 export gotcha. Zip the contents of the downloaded build folder, not the folder itself, so index.html sits at the root of the ZIP. MyGame/index.html is rejected.

Step 7: Upload to Creator Console#

Upload the ZIP to the Creator Console. Test in the feed preview on Android or in the web preview (see the iOS note above).

Cloud Editor Constraints#

• Bundle limits: the ZIP must meet the platform requirements.
• index.html at the ZIP root: reference your game code from a <script> tag; no nested build folder.
• No localStorage: browser persistence is unavailable in the host's opaque-origin sandbox. Persist via Minit.getUserData() and Minit.reportResult(score, { userData }). See Saving User Data.

Start from a template#

Instead of generating from nothing, clone the official starter template, with structure and SDK wiring already in place:

• minit-template-playcanvas: engine project, SDK wired and simple example game mechanic

Minit Games-Specific Tips#

Touch Input#

Always use app.touch events. window.onmousedown and other mouse-only events won't work on mobile. PlayCanvas input docs.

Pause When Off-Screen#

Players swipe past your Game in the feed and background the app mid-run. In the Cloud Editor workflow, pause while the game isn't viewable:

import { Script } from 'playcanvas';
import { Minit } from './minit.mjs';

export class PauseWhenHidden extends Script {
  static scriptName = 'pauseWhenHidden';

  initialize() {
    const apply = (viewable) => {
      this.app.timeScale = viewable ? 1 : 0;
    };
    const unsubscribe = Minit.onViewableChange(apply);
    apply(Minit.isViewable());
    this.once('destroy', unsubscribe);
  }
}

• fn fires only when the value changes; Minit.isViewable() returns the current value. Subscribing the same fn twice returns the existing unsubscribe.
• Only the Minit app reports feed and focus changes; elsewhere it follows browser tab visibility.

Bundle Size#

Compress textures, minify code, strip unused assets. Limits in Platform Requirements.

Deeper Dives#

• Install the Minit SDK: the full @minit-games/sdk API used by npm/bundler projects.
• Game Ready Signal: npm and bundler workflow · Cloud Editor workflow
• Reporting Results: npm and bundler workflow · Cloud Editor workflow
• Saving User Data: npm and bundler workflow · Cloud Editor workflow