Skip to content
cccskills
FreePublished on GitHub

build-app

Use when creating or restructuring a PlayCanvas app with the Engine API, @playcanvas/react, or @playcanvas/web-components, covering bootstrap, input, resize, physics, update loop, UI, and lifecycle.

The English summary is being prepared. Showing the original description.

See how to install

Files included (4)

  • SKILL.md2.2 KB
  • references/direct-engine.md728 B
  • references/react.md1.1 KB
  • references/web-components.md2.0 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Use when adding visual effects to a PlayCanvas app, to choose between particle systems, shader chunks, runtime meshes, and post-processing.

The English summary is being prepared. Showing the original description.

playcanvas/skills29Updated Oct 22, 2026

Use when writing PlayCanvas Engine code touching transforms, cameras, lights, materials, meshes, bounds, or imports, to apply Engine conventions and avoid legacy APIs.

The English summary is being prepared. Showing the original description.

playcanvas/skills29Updated Oct 22, 2026

Use when composing PlayCanvas entity hierarchies from models, colliders, rigid bodies, and scripts, so each object has one semantic root and clear lifecycle.

The English summary is being prepared. Showing the original description.

playcanvas/skills29Updated Oct 22, 2026

Use when static PlayCanvas lighting, shadows, or ambient occlusion cost too much per frame and should be baked into lightmaps.

The English summary is being prepared. Showing the original description.

playcanvas/skills29Updated Oct 22, 2026

Use before repeatedly placing GLB models in PlayCanvas to record each asset's uniform scale, grounding offset, pivot compensation, and yaw once.

The English summary is being prepared. Showing the original description.

playcanvas/skills29Updated Oct 22, 2026

Use before playing, blending, or retargeting GLB animation clips in PlayCanvas, or when diagnosing T-pose, frozen playback, or binding failures.

The English summary is being prepared. Showing the original description.

playcanvas/skills29Updated Oct 22, 2026

See all skills by playcanvas

Report a problem with this skill