create-playcanvas 0.10.1 → 0.11.1

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/README.md

@@ -33,7 +33,7 @@ Open <http://localhost:5173>. Edit `index.html` to change the scene.
 | `npm run fmt`       | Check formatting                  |
 | `npm run typecheck` | Run TypeScript checks             |
 
-Run `npm run build` to generate a deployable static site in `dist/`.
+Run `npm run build` to generate a deployable static site in `dist/`. Its paths are relative, so it runs from any folder, such as a GitHub Pages project site or an itch.io upload.
 
 ## How it fits together
 

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

@@ -16,15 +16,15 @@
     },
     "dependencies": {
         "@playcanvas/web-components": "^0.28.0",
-        "playcanvas": "^2.23.1"
+        "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.4"
+        "vite": "^8.3.5"
     },
     "engines": {
         "node": ">=22.23.2"

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

@@ -2,6 +2,9 @@ import { defineConfig } from 'vite';
 
 // https://vite.dev/config/
 export default defineConfig({
+    // Relative URLs, so the build runs wherever it's served from: a domain root, a subpath such as
+    // GitHub Pages or itch.io, or a Snapchat Web Lens
+    base: './',
     plugins: [
         {
             // Dev only: install the PlayCanvas Inspector before the app starts (press ` to toggle)

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

@@ -14,12 +14,7 @@
             <pc-material id="green-material" diffuse="#2e6638" emissive="#09140b" gloss="0.2"></pc-material>
             <pc-material id="wood-material" diffuse="#7a451a" emissive="#180e05" gloss="0.2"></pc-material>
             <pc-material id="metal-material" diffuse="#475461" emissive="#0e1113" gloss="0.5"></pc-material>
-            <pc-wasm
-                name="Ammo"
-                glue="/ammo/ammo.wasm.js"
-                wasm="/ammo/ammo.wasm.wasm"
-                fallback="/ammo/ammo.js"
-            ></pc-wasm>
+            <pc-wasm name="Ammo" glue="./ammo/ammo.wasm.js" wasm="./ammo/ammo.wasm.wasm"></pc-wasm>
             <pc-scene>
                 <pc-entity name="light" rotation="50 30 0"
                     ><pc-light

package/templates/web-components/interactive-sphere/src/main.ts

@@ -4,8 +4,8 @@ import { Asset, TEXTURETYPE_RGBP } from 'playcanvas';
 import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
 import { Grid } from 'playcanvas/scripts/esm/grid.mjs';
 
+import './counter.css';
 import './starter.css';
-import './style.css';
 
 const HOVER_COLOR = '#40ccff';
 const DEFAULT_COLOR = '#e6edf9';
@@ -25,7 +25,7 @@ const app = appElement.app!;
 const envAtlas = new Asset(
     'env-atlas',
     'texture',
-    { url: '/environment-map.png' },
+    { url: './environment-map.png' },
     {
         type: TEXTURETYPE_RGBP,
         mipmaps: false

package/templates/web-components/model-viewer/index.html

@@ -8,8 +8,8 @@
     </head>
     <body>
         <pc-app>
-            <!-- Swap this for your own model - anything you drop in public/ is served from the site root -->
-            <pc-asset id="model" src="/playcanvas-cube.glb"></pc-asset>
+            <!-- Swap this for your own model - files in public/ are served next to index.html, so use a ./ path -->
+            <pc-asset id="model" src="./playcanvas-cube.glb"></pc-asset>
 
             <pc-scene>
                 <!-- Camera. Orbit controls are attached in src/main.ts. The sky is HDR, so it needs

package/templates/web-components/model-viewer/src/main.ts

@@ -4,7 +4,6 @@ import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
 import { ProceduralSky } from 'playcanvas/scripts/esm/sky/procedural-sky.mjs';
 
 import './starter.css';
-import './style.css';
 
 // The camera is awaited as <pc-camera> rather than the <pc-entity> holding it - an entity becomes
 // ready before its component children do, and CameraControls needs the camera component to exist

package/templates/web-components/physics-playground/index.html

@@ -8,12 +8,7 @@
     </head>
     <body>
         <pc-app>
-            <pc-wasm
-                name="Ammo"
-                glue="/ammo/ammo.wasm.js"
-                wasm="/ammo/ammo.wasm.wasm"
-                fallback="/ammo/ammo.js"
-            ></pc-wasm>
+            <pc-wasm name="Ammo" glue="./ammo/ammo.wasm.js" wasm="./ammo/ammo.wasm.wasm"></pc-wasm>
             <pc-material id="floor-material" diffuse="#2e333d" gloss="0.2"></pc-material>
             <pc-material id="cyan-material" diffuse="#29ade6" gloss="0.45"></pc-material>
             <pc-material id="coral-material" diffuse="#f25738" gloss="0.45"></pc-material>

package/templates/web-components/spinning-cube/src/main.ts

@@ -3,7 +3,6 @@ import { whenReady } from '@playcanvas/web-components';
 import { Script } from 'playcanvas';
 
 import './starter.css';
-import './style.css';
 
 class Rotate extends Script {
     static scriptName = 'rotate';

package/templates/web-components/splat-viewer/src/main.ts

@@ -2,7 +2,6 @@ import { whenReady } from '@playcanvas/web-components';
 import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
 
 import './starter.css';
-import './style.css';
 
 // The camera is awaited as <pc-camera> rather than the <pc-entity> holding it - an entity becomes
 // ready before its component children do, and CameraControls needs the camera component to exist

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

@@ -16,12 +16,7 @@
             <pc-material id="shirt-material" diffuse="#268bd2"></pc-material>
             <pc-material id="skin-material" diffuse="#c78759"></pc-material>
             <pc-material id="pants-material" diffuse="#2e4a85"></pc-material>
-            <pc-wasm
-                name="Ammo"
-                glue="/ammo/ammo.wasm.js"
-                wasm="/ammo/ammo.wasm.wasm"
-                fallback="/ammo/ammo.js"
-            ></pc-wasm>
+            <pc-wasm name="Ammo" glue="./ammo/ammo.wasm.js" wasm="./ammo/ammo.wasm.wasm"></pc-wasm>
             <pc-scene>
                 <pc-entity name="camera" position="0 3 6"><pc-camera clear-color="#7ab8e6"></pc-camera></pc-entity>
                 <pc-entity name="light" rotation="45 30 0"

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' }
+            ]
+        }
+    ]
+});