create-playcanvas 0.10.0 → 0.11.0

package/templates/engine/web-lens/vite.config.ts

@@ -0,0 +1,44 @@
+import { defineConfig } from 'vite';
+
+// Approximates the Web Lens sandbox, which allows resources from the Lens itself and nothing else
+const LENS_SANDBOX = [
+    "default-src 'self' data: blob:",
+    "script-src 'self' 'unsafe-inline' 'unsafe-eval' 'wasm-unsafe-eval' blob:",
+    "style-src 'self' 'unsafe-inline'",
+    "frame-src 'none'",
+    "object-src 'none'",
+    "base-uri 'none'",
+    "form-action 'none'"
+].join('; ');
+
+// https://vite.dev/config/
+export default defineConfig({
+    // Snapchat serves a Lens from its own origin, so every URL in the build must be relative
+    base: './',
+    build: {
+        // npm run package zips this folder and writes the zip beside it, inside the ignored dist/
+        outDir: 'dist/lens',
+        // source maps only add to the 8 MB upload
+        sourcemap: false
+    },
+    preview: {
+        // npm run start serves the build under the Lens rules, so a request for anything outside
+        // the zip fails in the browser console as it would in Snapchat
+        headers: {
+            'Content-Security-Policy': LENS_SANDBOX,
+            'Cross-Origin-Opener-Policy': 'same-origin',
+            'Cross-Origin-Embedder-Policy': 'require-corp'
+        }
+    },
+    plugins: [
+        {
+            // Dev only: install the PlayCanvas Inspector before the app starts (press ` to toggle)
+            name: 'playcanvas-inspector',
+            apply: 'serve',
+            config: () => ({ optimizeDeps: { include: ['@playcanvas/inspector'] } }),
+            transformIndexHtml: () => [
+                { tag: 'script', attrs: { type: 'module', src: '/src/inspector.ts' }, injectTo: 'head-prepend' }
+            ]
+        }
+    ]
+});

package/templates/index.ts

@@ -90,6 +90,12 @@ export const STARTERS = [
         category: 'Games',
         description: 'an orthographic camera, sprite animation and input'
     },
+    {
+        name: 'web-lens',
+        display: 'Snapchat Web Lens',
+        category: 'Games',
+        description: 'a portrait game with Snapchat leaderboards, packaged for upload'
+    },
     {
         name: 'scene-editor',
         display: 'Scene Editor',

package/templates/react/base/package.json

@@ -16,20 +16,20 @@
     },
     "dependencies": {
         "@playcanvas/react": "^0.11.7",
-        "playcanvas": "^2.23.0",
-        "react": "^19.3.0",
-        "react-dom": "^19.3.0"
+        "playcanvas": "^2.23.3",
+        "react": "^19.3.1",
+        "react-dom": "^19.3.1"
     },
     "devDependencies": {
         "@playcanvas/eslint-config": "3.0.0-beta.8",
-        "@playcanvas/inspector": "^0.2.0",
+        "@playcanvas/inspector": "^0.3.0",
         "@types/react": "^19.3.0",
         "@types/react-dom": "^19.3.0",
-        "@vitejs/plugin-react": "^6.1.1",
+        "@vitejs/plugin-react": "^6.1.2",
         "eslint": "^9.39.5",
-        "prettier": "^3.9.9",
+        "prettier": "^3.9.10",
         "typescript": "~6.0.3",
-        "vite": "^8.3.2"
+        "vite": "^8.3.5"
     },
     "engines": {
         "node": ">=22.23.2"

package/templates/react/third-person-controller/src/App.tsx

@@ -79,6 +79,8 @@ function Pine({
                     scale={[size * width, size * height, size * width]}
                 >
                     <Render type="cone" material={i === 1 ? tips : leaves} />
+                    {/* A trigger: it stops the camera's line of sight but the player walks through it */}
+                    <Collision type="cone" radius={(size * width) / 2} height={size * height} />
                 </Entity>
             ))}
         </>
@@ -139,9 +141,10 @@ function Scene() {
             <Block name="fallen-log" position={[0, 0.35, 6]} scale={[3.8, 0.7, 0.7]} material={wood} />
             <Block name="stump" position={[-1.8, 0.4, -2.2]} scale={[0.9, 0.8, 0.9]} material={wood} />
             <Entity name="player" ref={player} position={[0, 1.1, 0]}>
-                <Collision type="capsule" radius={0.5} height={2.4} linearOffset={[0, 0.1, 0]} />
+                {/* A box rather than a capsule, so the player stands on ledges instead of sliding off them */}
+                <Collision type="box" halfExtents={[0.4, 1.2, 0.4]} linearOffset={[0, 0.2, 0]} />
                 <RigidBody type="dynamic" mass={70} angularFactor={[0, 0, 0]} />
-                <Entity name="character" ref={model} position={[0, 0.2, 0]}>
+                <Entity name="character" ref={model} position={[0, 0.3, 0]}>
                     <Entity name="body" scale={[0.56, 0.88, 0.38]}>
                         <Render type="box" material={shirt} />
                     </Entity>

package/templates/react/web-lens/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+        <title>Dodge</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>

package/templates/react/web-lens/src/App.tsx

@@ -0,0 +1,85 @@
+import { Application, Entity } from '@playcanvas/react';
+import { Camera, Light, Script } from '@playcanvas/react/components';
+import { useApp, useAppEvent } from '@playcanvas/react/hooks';
+import { useCallback, useEffect, useState } from 'react';
+
+import { CARDS, DodgeGame } from './dodge-game';
+import type { GameEvents, GameState } from './dodge-game';
+import { hasLeaderboard, loadAvatar, loadBest, recordScore, showLeaderboard } from './lens';
+import './lens.css';
+
+function Scene({ onState }: { onState: GameEvents['game:state'] }) {
+    const app = useApp();
+    useAppEvent<GameEvents>('game:state', onState);
+
+    useEffect(() => {
+        // render at up to twice the CSS resolution: sharp on a phone, without the cost of 3x
+        // eslint-disable-next-line react-hooks/immutability -- the device belongs to the engine, not React
+        app.graphicsDevice.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+    }, [app]);
+
+    return (
+        <>
+            {/* fix the field's width, so a taller phone shows more of the falling blocks */}
+            <Entity name="camera" position={[0, 0, 7]}>
+                <Camera clearColor="#0b1020" fov={45} horizontalFov />
+            </Entity>
+            <Entity name="light" rotation={[40, 30, 0]}>
+                <Light type="directional" intensity={1.5} />
+            </Entity>
+            <Entity name="game">
+                <Script script={DodgeGame} />
+            </Entity>
+        </>
+    );
+}
+
+function App() {
+    const [state, setState] = useState<GameState>('ready');
+    const [score, setScore] = useState(0);
+    const [best, setBest] = useState(0);
+    const [avatar, setAvatar] = useState<string>();
+
+    useEffect(() => {
+        loadBest().then(setBest);
+        loadAvatar().then(setAvatar);
+    }, []);
+
+    // the HUD follows the game's state, and the Lens records each finished run
+    const onState = useCallback((next: GameState, value: number) => {
+        setState(next);
+        setScore(value);
+        if (next === 'over') recordScore(value).then(setBest);
+    }, []);
+
+    const card = CARDS[state];
+
+    return (
+        <main className="lens">
+            {/* lens.css sizes the canvas, filling a phone screen and centering a 9:16 column anywhere wider */}
+            <Application>
+                <Scene onState={onState} />
+            </Application>
+            <div className="lens-hud">
+                <header className="lens-bar">
+                    {avatar && <img className="lens-avatar" src={avatar} alt="Your Bitmoji" />}
+                    <span className="lens-score">{score}</span>
+                    <span className="lens-best">Best {best}</span>
+                </header>
+                {card && (
+                    <section className="lens-card">
+                        <h1 className="lens-title">{card.title}</h1>
+                        {state === 'over' && hasLeaderboard() && (
+                            <button className="lens-leaderboard" onClick={showLeaderboard}>
+                                Leaderboard
+                            </button>
+                        )}
+                        <p className="lens-hint">{card.hint}</p>
+                    </section>
+                )}
+            </div>
+        </main>
+    );
+}
+
+export default App;

package/templates/react/web-lens/vite.config.ts

@@ -0,0 +1,46 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// Approximates the Web Lens sandbox, which allows resources from the Lens itself and nothing else
+const LENS_SANDBOX = [
+    "default-src 'self' data: blob:",
+    "script-src 'self' 'unsafe-inline' 'unsafe-eval' 'wasm-unsafe-eval' blob:",
+    "style-src 'self' 'unsafe-inline'",
+    "frame-src 'none'",
+    "object-src 'none'",
+    "base-uri 'none'",
+    "form-action 'none'"
+].join('; ');
+
+// https://vite.dev/config/
+export default defineConfig({
+    // Snapchat serves a Lens from its own origin, so every URL in the build must be relative
+    base: './',
+    build: {
+        // npm run package zips this folder and writes the zip beside it, inside the ignored dist/
+        outDir: 'dist/lens',
+        // source maps only add to the 8 MB upload
+        sourcemap: false
+    },
+    preview: {
+        // npm run start serves the build under the Lens rules, so a request for anything outside
+        // the zip fails in the browser console as it would in Snapchat
+        headers: {
+            'Content-Security-Policy': LENS_SANDBOX,
+            'Cross-Origin-Opener-Policy': 'same-origin',
+            'Cross-Origin-Embedder-Policy': 'require-corp'
+        }
+    },
+    plugins: [
+        react(),
+        {
+            // Dev only: install the PlayCanvas Inspector before the app starts (press ` to toggle)
+            name: 'playcanvas-inspector',
+            apply: 'serve',
+            config: () => ({ optimizeDeps: { include: ['@playcanvas/inspector'] } }),
+            transformIndexHtml: () => [
+                { tag: 'script', attrs: { type: 'module', src: '/src/inspector.ts' }, injectTo: 'head-prepend' }
+            ]
+        }
+    ]
+});

package/templates/web-components/base/package.json

@@ -16,15 +16,15 @@
     },
     "dependencies": {
         "@playcanvas/web-components": "^0.28.0",
-        "playcanvas": "^2.23.0"
+        "playcanvas": "^2.23.3"
     },
     "devDependencies": {
         "@playcanvas/eslint-config": "3.0.0-beta.8",
-        "@playcanvas/inspector": "^0.2.0",
+        "@playcanvas/inspector": "^0.3.0",
         "eslint": "^9.39.5",
-        "prettier": "^3.9.9",
+        "prettier": "^3.9.10",
         "typescript": "~6.0.3",
-        "vite": "^8.3.2"
+        "vite": "^8.3.5"
     },
     "engines": {
         "node": ">=22.23.2"

package/templates/web-components/third-person-controller/index.html

@@ -65,12 +65,15 @@
                 ></pc-entity>
                 <pc-entity name="tree-0-crown-0" position="-7 2.09 -6" scale="2.31 1.98 2.31"
                     ><pc-render type="cone" material="leaves-material"></pc-render
+                    ><pc-collision type="cone" radius="1.155" height="1.98"></pc-collision
                 ></pc-entity>
                 <pc-entity name="tree-0-crown-1" position="-7 2.915 -6" scale="1.76 1.705 1.76"
                     ><pc-render type="cone" material="tips-material"></pc-render
+                    ><pc-collision type="cone" radius="0.88" height="1.705"></pc-collision
                 ></pc-entity>
                 <pc-entity name="tree-0-crown-2" position="-7 3.63 -6" scale="1.21 1.54 1.21"
                     ><pc-render type="cone" material="leaves-material"></pc-render
+                    ><pc-collision type="cone" radius="0.605" height="1.54"></pc-collision
                 ></pc-entity>
                 <pc-entity name="tree-1-trunk" position="6.5 1.125 -6.5" scale="0.475 2.25 0.475"
                     ><pc-render type="box" material="wood-material"></pc-render
@@ -79,12 +82,15 @@
                 ></pc-entity>
                 <pc-entity name="tree-1-crown-0" position="6.5 2.375 -6.5" scale="2.625 2.25 2.625"
                     ><pc-render type="cone" material="leaves-material"></pc-render
+                    ><pc-collision type="cone" radius="1.3125" height="2.25"></pc-collision
                 ></pc-entity>
                 <pc-entity name="tree-1-crown-1" position="6.5 3.3125 -6.5" scale="2 1.9375 2"
                     ><pc-render type="cone" material="tips-material"></pc-render
+                    ><pc-collision type="cone" radius="1" height="1.9375"></pc-collision
                 ></pc-entity>
                 <pc-entity name="tree-1-crown-2" position="6.5 4.125 -6.5" scale="1.375 1.75 1.375"
                     ><pc-render type="cone" material="leaves-material"></pc-render
+                    ><pc-collision type="cone" radius="0.6875" height="1.75"></pc-collision
                 ></pc-entity>
                 <pc-entity name="tree-2-trunk" position="-7.5 0.81 5" scale="0.342 1.62 0.342"
                     ><pc-render type="box" material="wood-material"></pc-render
@@ -93,12 +99,15 @@
                 ></pc-entity>
                 <pc-entity name="tree-2-crown-0" position="-7.5 1.71 5" scale="1.89 1.62 1.89"
                     ><pc-render type="cone" material="leaves-material"></pc-render
+                    ><pc-collision type="cone" radius="0.945" height="1.62"></pc-collision
                 ></pc-entity>
                 <pc-entity name="tree-2-crown-1" position="-7.5 2.385 5" scale="1.44 1.395 1.44"
                     ><pc-render type="cone" material="tips-material"></pc-render
+                    ><pc-collision type="cone" radius="0.72" height="1.395"></pc-collision
                 ></pc-entity>
                 <pc-entity name="tree-2-crown-2" position="-7.5 2.97 5" scale="0.99 1.26 0.99"
                     ><pc-render type="cone" material="leaves-material"></pc-render
+                    ><pc-collision type="cone" radius="0.495" height="1.26"></pc-collision
                 ></pc-entity>
                 <pc-entity name="tree-3-trunk" position="7 1.035 5.5" scale="0.437 2.07 0.437"
                     ><pc-render type="box" material="wood-material"></pc-render
@@ -107,12 +116,15 @@
                 ></pc-entity>
                 <pc-entity name="tree-3-crown-0" position="7 2.185 5.5" scale="2.415 2.07 2.415"
                     ><pc-render type="cone" material="leaves-material"></pc-render
+                    ><pc-collision type="cone" radius="1.2075" height="2.07"></pc-collision
                 ></pc-entity>
                 <pc-entity name="tree-3-crown-1" position="7 3.0475 5.5" scale="1.84 1.7825 1.84"
                     ><pc-render type="cone" material="tips-material"></pc-render
+                    ><pc-collision type="cone" radius="0.92" height="1.7825"></pc-collision
                 ></pc-entity>
                 <pc-entity name="tree-3-crown-2" position="7 3.795 5.5" scale="1.265 1.61 1.265"
                     ><pc-render type="cone" material="leaves-material"></pc-render
+                    ><pc-collision type="cone" radius="0.6325" height="1.61"></pc-collision
                 ></pc-entity>
                 <pc-entity name="tree-4-trunk" position="-2.2 0.765 -8" scale="0.323 1.53 0.323"
                     ><pc-render type="box" material="wood-material"></pc-render
@@ -121,12 +133,15 @@
                 ></pc-entity>
                 <pc-entity name="tree-4-crown-0" position="-2.2 1.615 -8" scale="1.785 1.53 1.785"
                     ><pc-render type="cone" material="leaves-material"></pc-render
+                    ><pc-collision type="cone" radius="0.8925" height="1.53"></pc-collision
                 ></pc-entity>
                 <pc-entity name="tree-4-crown-1" position="-2.2 2.2525 -8" scale="1.36 1.3175 1.36"
                     ><pc-render type="cone" material="tips-material"></pc-render
+                    ><pc-collision type="cone" radius="0.68" height="1.3175"></pc-collision
                 ></pc-entity>
                 <pc-entity name="tree-4-crown-2" position="-2.2 2.805 -8" scale="0.935 1.19 0.935"
                     ><pc-render type="cone" material="leaves-material"></pc-render
+                    ><pc-collision type="cone" radius="0.4675" height="1.19"></pc-collision
                 ></pc-entity>
                 <pc-entity name="fallen-log" position="0 0.35 6" scale="3.8 0.7 0.7"
                     ><pc-render type="box" material="wood-material"></pc-render
@@ -139,9 +154,9 @@
                     ><pc-rigid-body type="static"></pc-rigid-body
                 ></pc-entity>
                 <pc-entity name="player" position="0 1.1 0">
-                    <pc-collision type="capsule" radius="0.5" height="2.4" linear-offset="0 0.1 0"></pc-collision>
+                    <pc-collision type="box" half-extents="0.4 1.2 0.4" linear-offset="0 0.2 0"></pc-collision>
                     <pc-rigid-body type="dynamic" mass="70" angular-factor="0 0 0"></pc-rigid-body>
-                    <pc-entity name="character" position="0 0.2 0">
+                    <pc-entity name="character" position="0 0.3 0">
                         <pc-entity name="body" scale="0.56 0.88 0.38"
                             ><pc-render type="box" material="shirt-material"></pc-render
                         ></pc-entity>

package/templates/web-components/web-lens/index.html

@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+        <title>Dodge</title>
+    </head>
+    <body>
+        <main class="lens">
+            <pc-app max-pixel-ratio="2">
+                <pc-scene>
+                    <pc-entity name="camera" position="0 0 7">
+                        <pc-camera clear-color="#0b1020" fov="45" horizontal-fov></pc-camera>
+                    </pc-entity>
+                    <pc-entity name="light" rotation="40 30 0">
+                        <pc-light type="directional" intensity="1.5"></pc-light>
+                    </pc-entity>
+                    <pc-entity name="game"></pc-entity>
+                </pc-scene>
+            </pc-app>
+            <div class="lens-hud">
+                <header class="lens-bar">
+                    <img class="lens-avatar" alt="Your Bitmoji" hidden />
+                    <span class="lens-score">0</span>
+                    <span class="lens-best">Best 0</span>
+                </header>
+                <section class="lens-card">
+                    <h1 class="lens-title">Dodge</h1>
+                    <button class="lens-leaderboard" hidden>Leaderboard</button>
+                    <p class="lens-hint">Drag to steer. Tap to play</p>
+                </section>
+            </div>
+        </main>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/web-components/web-lens/src/main.ts

@@ -0,0 +1,47 @@
+import type { EntityElement } from '@playcanvas/web-components';
+import { whenReady } from '@playcanvas/web-components';
+
+import { CARDS, DodgeGame } from './dodge-game';
+import type { GameState } from './dodge-game';
+import { hasLeaderboard, loadAvatar, loadBest, recordScore, showLeaderboard } from './lens';
+import './lens.css';
+
+// the HUD follows the game's state, and the Lens records each finished run
+const hud = {
+    avatar: document.querySelector<HTMLImageElement>('.lens-avatar')!,
+    score: document.querySelector('.lens-score')!,
+    best: document.querySelector('.lens-best')!,
+    card: document.querySelector<HTMLElement>('.lens-card')!,
+    title: document.querySelector('.lens-title')!,
+    hint: document.querySelector('.lens-hint')!,
+    leaderboard: document.querySelector<HTMLButtonElement>('.lens-leaderboard')!
+};
+const showBest = (best: number) => {
+    hud.best.textContent = `Best ${best}`;
+};
+
+const { app } = await whenReady('pc-app');
+app!.on('game:state', (state: GameState, score: number) => {
+    const card = CARDS[state];
+    hud.score.textContent = String(score);
+    hud.card.hidden = !card;
+    if (card) {
+        hud.title.textContent = card.title;
+        hud.hint.textContent = card.hint;
+    }
+    hud.leaderboard.hidden = state !== 'over' || !hasLeaderboard();
+    if (state === 'over') recordScore(score).then(showBest);
+});
+hud.leaderboard.addEventListener('click', showLeaderboard);
+
+loadBest().then(showBest);
+loadAvatar().then((url) => {
+    if (!url) return;
+    hud.avatar.src = url;
+    hud.avatar.hidden = false;
+});
+
+// the game is an engine script imported through the bundler, so it attaches through the entity
+const game = await whenReady<EntityElement>('pc-entity[name="game"]');
+game.entity!.addComponent('script');
+game.entity!.script!.create(DodgeGame);

package/templates/web-components/web-lens/vite.config.ts

@@ -0,0 +1,44 @@
+import { defineConfig } from 'vite';
+
+// Approximates the Web Lens sandbox, which allows resources from the Lens itself and nothing else
+const LENS_SANDBOX = [
+    "default-src 'self' data: blob:",
+    "script-src 'self' 'unsafe-inline' 'unsafe-eval' 'wasm-unsafe-eval' blob:",
+    "style-src 'self' 'unsafe-inline'",
+    "frame-src 'none'",
+    "object-src 'none'",
+    "base-uri 'none'",
+    "form-action 'none'"
+].join('; ');
+
+// https://vite.dev/config/
+export default defineConfig({
+    // Snapchat serves a Lens from its own origin, so every URL in the build must be relative
+    base: './',
+    build: {
+        // npm run package zips this folder and writes the zip beside it, inside the ignored dist/
+        outDir: 'dist/lens',
+        // source maps only add to the 8 MB upload
+        sourcemap: false
+    },
+    preview: {
+        // npm run start serves the build under the Lens rules, so a request for anything outside
+        // the zip fails in the browser console as it would in Snapchat
+        headers: {
+            'Content-Security-Policy': LENS_SANDBOX,
+            'Cross-Origin-Opener-Policy': 'same-origin',
+            'Cross-Origin-Embedder-Policy': 'require-corp'
+        }
+    },
+    plugins: [
+        {
+            // Dev only: install the PlayCanvas Inspector before the app starts (press ` to toggle)
+            name: 'playcanvas-inspector',
+            apply: 'serve',
+            config: () => ({ optimizeDeps: { include: ['@playcanvas/inspector'] } }),
+            transformIndexHtml: () => [
+                { tag: 'script', attrs: { type: 'module', src: '/src/inspector.ts' }, injectTo: 'head-prepend' }
+            ]
+        }
+    ]
+});