mcpField
B
build-app

build-app

github.com/playcanvasDevelopment31313 installsUpdated 1w ago
Repository

About build-app

A skill for building applications with Engine, aimed at developers working with its direct, React, or Web Components surfaces. It covers lifecycle ownership, startup, updates, input, and UI choices.

Key features

  1. 01Inspect project entry points and references
  2. 02Configure application input and resizing
  3. 03Manage update timing and app state
  4. 04Render UI from application state
  5. 05Keep resource lifecycle ownership explicit

Use cases

  1. 01Bootstrap an Engine application
  2. 02Wire input and canvas resizing
  3. 03Implement time-dependent app logic
  4. 04Organize UI and teardown

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/playcanvas/skills --skill build-app

After installing, type/build-appin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
direct-engine.md
react.md
web-components.md

Details

From the project README

Build an Engine application

Read package.json and the entry point, keep the surface that owns the lifecycle, and read only its reference: direct Engine, React, or Web Components. Choose from imports and markup, not dependencies.

Bootstrap

  • Input is opt-in. app.keyboard, mouse, touch, gamepads, and elementInput stay null unless passed to new Application(canvas, { ... }); UI buttons need new ElementInput(canvas).
  • The Engine adds no window resize listener; call app.resizeCanvas() from your own handler.
  • graphicsDevice.maxPixelRatio defaults to 1. Raise it, at most to window.devicePixelRatio, only where the target holds its frame budget, call app.resizeCanvas(), and confirm with canvas.width / canvas.clientWidth.
  • Rigid bodies stay inert until Ammo loads through WasmModule. Copy the loader from the physics/falling-shapes example with find-examples.
  • devtools defaults to true, so debugging tools can find the app (inspect-runtime). Set it to false only to hide a production build.

Update loop

  • dt is already clamped by app.maxDeltaTime (0.1 s); tune it instead of clamping by hand. app.timeScale scales it, and 0 pauses scaled time.
  • Keep app state explicit and owned in one place; advance time-dependent logic from dt, and reset through the same setup used at start.

UI

  • Render UI from app state; never keep the source of truth in the DOM or UI elements.
  • Use a DOM or React overlay, or Engine screen and element components adapted from a user-interface example.
  • Hide unused elements with enabled = false; an element at opacity 0 still draws.

Ownership

  • Keep one owner for app creation, assets, entities, update callbacks, and teardown.
  • Prefer the surface's declarative primitives. Put per-entity and per-frame behaviour in an Engine Script.
  • Remove external events and resources in the lifecycle that created them.

Comments

Markdown supported