create-playcanvas 0.16.0 → 0.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "create-playcanvas",
-    "version": "0.16.0",
+    "version": "0.16.1",
     "description": "Scaffold a PlayCanvas project",
     "keywords": [
         "playcanvas",

package/templates/engine/ar-placement/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>AR Placement</title>
+    </head>
+    <body>
+        <canvas id="application-canvas"></canvas>
+        <div class="hud">
+            <section class="panel">
+                <h1>AR Placement</h1>
+                <p id="xr-status">Checking AR support…</p>
+                <div class="controls"><button id="xr-button" disabled>Start AR</button></div>
+            </section>
+        </div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/engine/ar-placement/src/main.ts

@@ -17,24 +17,36 @@ import {
 import { ArPlacement } from './ar-placement';
 import './starter.css';
 
-document.body.insertAdjacentHTML(
-    'beforeend',
-    '<div class="hud"><section class="panel"><h1>AR Placement</h1><p id="xr-status">Checking AR support…</p><div class="controls"><button id="xr-button" disabled>Start AR</button></div></section></div>'
-);
-
 const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
+
 const device = await createGraphicsDevice(canvas);
-const options = new AppOptions();
-options.graphicsDevice = device;
-options.componentSystems = [RenderComponentSystem, CameraComponentSystem, LightComponentSystem, ScriptComponentSystem];
-options.xr = XrManager;
+device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+
+const createOptions = new AppOptions();
+createOptions.graphicsDevice = device;
+createOptions.componentSystems = [
+    RenderComponentSystem,
+    CameraComponentSystem,
+    LightComponentSystem,
+    ScriptComponentSystem
+];
+createOptions.xr = XrManager;
 
 const app = new AppBase(canvas);
-app.init(options);
+app.init(createOptions);
 app.start();
+
+// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
 app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
 app.setCanvasResolution(RESOLUTION_AUTO);
 
+// Ensure canvas is resized when window changes size
+const resize = () => app.resizeCanvas();
+window.addEventListener('resize', resize);
+app.on('destroy', () => {
+    window.removeEventListener('resize', resize);
+});
+
 const camera = new Entity('camera');
 camera.addComponent('camera', { clearColor: new Color(0.05, 0.08, 0.12, 1) });
 camera.setPosition(3, 2.4, 4);
@@ -73,5 +85,3 @@ const placement = new Entity('placement');
 placement.addComponent('script');
 placement.script!.create(ArPlacement, { properties: { camera, preview } });
 app.root.addChild(placement);
-
-window.addEventListener('resize', () => app.resizeCanvas());

package/templates/engine/first-person-controller/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>First-Person Controller</title>
+    </head>
+    <body>
+        <canvas id="application-canvas"></canvas>
+        <div class="hud">
+            <section class="panel">
+                <h1>First-Person Controller</h1>
+                <p>Click the scene, then use WASD, mouse look and Space to jump.</p>
+            </section>
+        </div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/engine/first-person-controller/src/main.ts

@@ -28,16 +28,14 @@ await new Promise<void>((resolve) => {
     WasmModule.getInstance('Ammo', () => resolve());
 });
 
-document.body.insertAdjacentHTML(
-    'beforeend',
-    '<div class="hud"><section class="panel"><h1>First-Person Controller</h1><p>Click the scene, then use WASD, mouse look and Space to jump.</p></section></div>'
-);
-
 const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
+
 const device = await createGraphicsDevice(canvas);
-const options = new AppOptions();
-options.graphicsDevice = device;
-options.componentSystems = [
+device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+
+const createOptions = new AppOptions();
+createOptions.graphicsDevice = device;
+createOptions.componentSystems = [
     RenderComponentSystem,
     CameraComponentSystem,
     LightComponentSystem,
@@ -47,11 +45,20 @@ options.componentSystems = [
 ];
 
 const app = new AppBase(canvas);
-app.init(options);
+app.init(createOptions);
 app.start();
+
+// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
 app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
 app.setCanvasResolution(RESOLUTION_AUTO);
 
+// Ensure canvas is resized when window changes size
+const resize = () => app.resizeCanvas();
+window.addEventListener('resize', resize);
+app.on('destroy', () => {
+    window.removeEventListener('resize', resize);
+});
+
 const material = (color: Color) => {
     const result = new StandardMaterial();
     result.diffuse = color;
@@ -134,5 +141,3 @@ const fill = new Entity('fill');
 fill.addComponent('light', { type: 'directional', intensity: 0.8 });
 fill.setEulerAngles(-25, -140, 0);
 app.root.addChild(fill);
-
-window.addEventListener('resize', () => app.resizeCanvas());

package/templates/engine/product-configurator/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Product Configurator</title>
+    </head>
+    <body>
+        <canvas id="application-canvas"></canvas>
+        <div class="hud">
+            <section class="panel">
+                <h1>Product Configurator</h1>
+                <p>Choose a paint finish, then drag to orbit.</p>
+                <div class="controls variants" id="paints">
+                    <button aria-pressed="true" data-color="#d6293e" data-shade="#9b1731">
+                        <span class="finish" style="--color: #d6293e"></span>Crimson
+                    </button>
+                    <button data-color="#d8e4e9" data-shade="#8fa8b5">
+                        <span class="finish" style="--color: #d8e4e9"></span>Arctic
+                    </button>
+                    <button data-color="#9acb34" data-shade="#3c742d">
+                        <span class="finish" style="--color: #9acb34"></span>Volt
+                    </button>
+                </div>
+            </section>
+        </div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/engine/product-configurator/src/main.ts

@@ -29,33 +29,38 @@ import './product.css';
 import './starter.css';
 
 const PRODUCT_URL = 'https://developer.playcanvas.com/assets/lambo.glb';
-const PAINTS = [
-    { name: 'Crimson', color: '#d6293e', shade: '#9b1731' },
-    { name: 'Arctic', color: '#d8e4e9', shade: '#8fa8b5' },
-    { name: 'Volt', color: '#9acb34', shade: '#3c742d' }
-];
 const CAMERA_FOCUS = new Vec3(0, 0.8, 0);
 const CAMERA_PITCH = new Vec2(-85, -4);
 
-document.body.insertAdjacentHTML(
-    'beforeend',
-    `<div class="hud"><section class="panel"><h1>Product Configurator</h1><p>Choose a paint finish, then drag to orbit.</p><div class="controls variants" id="paints">${PAINTS.map(({ name, color }, i) => `<button aria-pressed="${i === 0}" data-color="${color}"><span class="finish" style="--color:${color}"></span>${name}</button>`).join('')}</div></section></div>`
-);
-
 const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
+
 const device = await createGraphicsDevice(canvas);
-device.maxPixelRatio = Math.min(device.maxPixelRatio, 2);
+device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
 
-const options = new AppOptions();
-options.graphicsDevice = device;
-options.componentSystems = [RenderComponentSystem, CameraComponentSystem, LightComponentSystem, ScriptComponentSystem];
-options.resourceHandlers = [TextureHandler, ContainerHandler];
+const createOptions = new AppOptions();
+createOptions.graphicsDevice = device;
+createOptions.componentSystems = [
+    RenderComponentSystem,
+    CameraComponentSystem,
+    LightComponentSystem,
+    ScriptComponentSystem
+];
+createOptions.resourceHandlers = [TextureHandler, ContainerHandler];
 
 const app = new AppBase(canvas);
-app.init(options);
+app.init(createOptions);
+
+// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
 app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
 app.setCanvasResolution(RESOLUTION_AUTO);
 
+// Ensure canvas is resized when window changes size
+const resize = () => app.resizeCanvas();
+window.addEventListener('resize', resize);
+app.on('destroy', () => {
+    window.removeEventListener('resize', resize);
+});
+
 const product = new Asset('car', 'container', { url: PRODUCT_URL });
 await new Promise<void>((resolve) => new AssetListLoader([product], app.assets).load(() => resolve()));
 
@@ -82,10 +87,18 @@ const paint = body[0].material!.clone() as StandardMaterial;
 const shade = panels[0].material!.clone() as StandardMaterial;
 body.forEach((mesh) => (mesh.material = paint));
 panels.forEach((mesh) => (mesh.material = shade));
-paint.diffuse.fromString(PAINTS[0].color);
-shade.diffuse.fromString(PAINTS[0].shade);
-paint.update();
-shade.update();
+
+// Each paint button in index.html carries its finish's two colors
+const buttons = document.querySelectorAll<HTMLButtonElement>('#paints button');
+const choose = (button: HTMLButtonElement) => {
+    paint.diffuse.fromString(button.dataset.color!);
+    shade.diffuse.fromString(button.dataset.shade!);
+    paint.update();
+    shade.update();
+    buttons.forEach((item) => (item.ariaPressed = String(item === button)));
+};
+buttons.forEach((button) => (button.onclick = () => choose(button)));
+choose(buttons[0]);
 
 const sky = new Entity('sky');
 sky.addComponent('script');
@@ -141,15 +154,3 @@ light.addComponent('light', {
 });
 light.setEulerAngles(45, -145, 0);
 app.root.addChild(light);
-
-document.querySelectorAll<HTMLButtonElement>('#paints button').forEach((button, i, buttons) => {
-    button.onclick = () => {
-        paint.diffuse.fromString(PAINTS[i].color);
-        shade.diffuse.fromString(PAINTS[i].shade);
-        paint.update();
-        shade.update();
-        buttons.forEach((item, j) => (item.ariaPressed = String(i === j)));
-    };
-});
-
-window.addEventListener('resize', () => app.resizeCanvas());

package/templates/engine/sprite-game/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Sprite Game</title>
+    </head>
+    <body>
+        <canvas id="application-canvas"></canvas>
+        <div class="hud">
+            <section class="panel">
+                <h1>Sprite Game</h1>
+                <p>Use A/D or the arrow keys to move and Space to jump.</p>
+            </section>
+        </div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/engine/sprite-game/src/main.ts

@@ -16,25 +16,35 @@ import {
 import { SpriteGame } from './sprite-game';
 import './starter.css';
 
-document.body.insertAdjacentHTML(
-    'beforeend',
-    '<div class="hud"><section class="panel"><h1>Sprite Game</h1><p>Use A/D or the arrow keys to move and Space to jump.</p></section></div>'
-);
-
 const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
+
 const device = await createGraphicsDevice(canvas);
 device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
 
-const options = new AppOptions();
-options.graphicsDevice = device;
-options.componentSystems = [RenderComponentSystem, CameraComponentSystem, SpriteComponentSystem, ScriptComponentSystem];
+const createOptions = new AppOptions();
+createOptions.graphicsDevice = device;
+createOptions.componentSystems = [
+    RenderComponentSystem,
+    CameraComponentSystem,
+    SpriteComponentSystem,
+    ScriptComponentSystem
+];
 
 const app = new AppBase(canvas);
-app.init(options);
+app.init(createOptions);
 app.start();
+
+// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
 app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
 app.setCanvasResolution(RESOLUTION_AUTO);
 
+// Ensure canvas is resized when window changes size
+const resize = () => app.resizeCanvas();
+window.addEventListener('resize', resize);
+app.on('destroy', () => {
+    window.removeEventListener('resize', resize);
+});
+
 const camera = new Entity('camera');
 camera.addComponent('camera', {
     projection: 1,
@@ -68,5 +78,3 @@ game.setPosition(0, -2.15, 0);
 game.addComponent('script');
 game.script!.create(SpriteGame);
 app.root.addChild(game);
-
-window.addEventListener('resize', () => app.resizeCanvas());

package/templates/engine/third-person-controller/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Third-Person Controller</title>
+    </head>
+    <body>
+        <canvas id="application-canvas"></canvas>
+        <div class="hud">
+            <section class="panel">
+                <h1>Third-Person Controller</h1>
+                <p>Click the scene, then use WASD to move, mouse to orbit and Space to jump.</p>
+            </section>
+        </div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/engine/third-person-controller/src/main.ts

@@ -49,16 +49,14 @@ await new Promise<void>((resolve) => {
     WasmModule.getInstance('Ammo', () => resolve());
 });
 
-document.body.insertAdjacentHTML(
-    'beforeend',
-    '<div class="hud"><section class="panel"><h1>Third-Person Controller</h1><p>Click the scene, then use WASD to move, mouse to orbit and Space to jump.</p></section></div>'
-);
-
 const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
+
 const device = await createGraphicsDevice(canvas);
-const options = new AppOptions();
-options.graphicsDevice = device;
-options.componentSystems = [
+device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+
+const createOptions = new AppOptions();
+createOptions.graphicsDevice = device;
+createOptions.componentSystems = [
     RenderComponentSystem,
     CameraComponentSystem,
     LightComponentSystem,
@@ -68,10 +66,19 @@ options.componentSystems = [
 ];
 
 const app = new AppBase(canvas);
-app.init(options);
+app.init(createOptions);
 app.start();
+
+// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
 app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
 app.setCanvasResolution(RESOLUTION_AUTO);
+
+// Ensure canvas is resized when window changes size
+const resize = () => app.resizeCanvas();
+window.addEventListener('resize', resize);
+app.on('destroy', () => {
+    window.removeEventListener('resize', resize);
+});
 app.scene.ambientLight = new Color(0.28, 0.32, 0.38);
 
 const groundMaterial = new StandardMaterial();
@@ -216,5 +223,3 @@ light.addComponent('light', {
 });
 light.setEulerAngles(45, 30, 0);
 app.root.addChild(light);
-
-window.addEventListener('resize', () => app.resizeCanvas());

package/templates/engine/vr-starter/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>VR Starter</title>
+    </head>
+    <body>
+        <canvas id="application-canvas"></canvas>
+        <div class="hud">
+            <section class="panel">
+                <h1>VR Starter</h1>
+                <p id="xr-status">Checking VR support…</p>
+                <div class="controls"><button id="xr-button" disabled>Enter VR</button></div>
+            </section>
+        </div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/engine/vr-starter/src/main.ts

@@ -17,23 +17,35 @@ import {
 import './starter.css';
 import { setupVr } from './vr';
 
-document.body.insertAdjacentHTML(
-    'beforeend',
-    '<div class="hud"><section class="panel"><h1>VR Starter</h1><p id="xr-status">Checking VR support…</p><div class="controls"><button id="xr-button" disabled>Enter VR</button></div></section></div>'
-);
-
 const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
+
 const device = await createGraphicsDevice(canvas);
-const options = new AppOptions();
-options.graphicsDevice = device;
-options.componentSystems = [RenderComponentSystem, CameraComponentSystem, LightComponentSystem, ScriptComponentSystem];
-options.xr = XrManager;
+device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+
+const createOptions = new AppOptions();
+createOptions.graphicsDevice = device;
+createOptions.componentSystems = [
+    RenderComponentSystem,
+    CameraComponentSystem,
+    LightComponentSystem,
+    ScriptComponentSystem
+];
+createOptions.xr = XrManager;
 
 const app = new AppBase(canvas);
-app.init(options);
+app.init(createOptions);
 app.start();
+
+// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
 app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
 app.setCanvasResolution(RESOLUTION_AUTO);
+
+// Ensure canvas is resized when window changes size
+const resize = () => app.resizeCanvas();
+window.addEventListener('resize', resize);
+app.on('destroy', () => {
+    window.removeEventListener('resize', resize);
+});
 app.scene.ambientLight = new Color(0.32, 0.34, 0.38);
 
 const material = (color: Color) => {
@@ -97,5 +109,3 @@ light.addComponent('light', {
 });
 light.setEulerAngles(45, 30, 0);
 app.root.addChild(light);
-
-window.addEventListener('resize', () => app.resizeCanvas());