# Playcanvas Engine

Lightweight WebGL/WebGPU game engine with entity-component architecture and visual...

- Repository: https://github.com/freshtechbro/claudedesignskills (1210 stars)
- Category: Media
- License: MIT
- Last updated: 2025-11-20
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add freshtechbro/claudedesignskills --skill playcanvas-engine -g -a claude-code -y`
Codex: `npx skills add freshtechbro/claudedesignskills --skill playcanvas-engine -g -a codex -y`
Cursor: `npx skills add freshtechbro/claudedesignskills --skill playcanvas-engine -g -a cursor -y`
Gemini CLI: `npx skills add freshtechbro/claudedesignskills --skill playcanvas-engine -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add freshtechbro/claudedesignskills`

## Description

Lightweight WebGL/WebGPU game engine with entity-component architecture and visual editor integration. Use this skill when building browser-based games, interactive 3D applications, or performance-critical web experiences. Triggers on tasks involving PlayCanvas, entity-component systems, game engine development, WebGL games, 3D browser applications, editor-first workflows, or real-time 3D rendering. Alternative to Three.js with game-specific features and integrated development environment.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# PlayCanvas Engine Skill

Lightweight WebGL/WebGPU game engine with entity-component architecture, visual editor integration, and performance-focused design.

## When to Use This Skill

Trigger this skill when you see:
- "PlayCanvas engine"
- "WebGL game engine"
- "entity component system"
- "PlayCanvas application"
- "3D browser games"
- "online 3D editor"
- "lightweight 3D engine"
- Need for editor-first workflow

Compare with:
- **Three.js**: Lower-level, more flexible but requires more setup
- **Babylon.js**: Feature-rich but heavier, has editor but less mature
- **A-Frame**: VR-focused, declarative HTML approach
- Use PlayCanvas for: Game projects, editor-first workflow, performance-critical apps

---

## Core Concepts

### 1. Application

The root PlayCanvas application manages the rendering loop.

```javascript
import * as pc from 'playcanvas';

// Create canvas
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);

// Create application
const app = new pc.Application(canvas, {
  keyboard: new pc.Keyboard(window),
  mouse: new pc.Mouse(canvas),
  touch: new pc.TouchDevice(canvas),
  gamepads: new pc.GamePads()
});

// Configure canvas
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);

// Handle resize
window.addEventListener('resize', () => app.resizeCanvas());

// Start the application
app.start();
```

---

### 2. Entity-Component System

PlayCanvas uses ECS architecture: Entities contain Components.

```javascript
// Create entity
const entity = new pc.Entity('myEntity');

// Add to scene hierarchy
app.root.addChild(entity);

// Add components
entity.addComponent('model', {
  type: 'box'
});

entity.addComponent('script');

// Transform
entity.setPosition(0, 1, 0);
entity.setEulerAngles(0, 45, 0);
entity.setLocalScale(2, 2, 2);

// Parent-child hierarchy
const parent = new pc.Entity('parent');
const child = new pc.Entity('child');
parent.addChild(child);
```

---

The rest: https://github.com/freshtechbro/claudedesignskills/blob/HEAD/.claude/skills/playcanvas-engine/SKILL.md