Inputs overhaul (CameraControls updated)

examples/src/examples/camera/fly.controls.mjs

@@ -2,22 +2,13 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export const controls = ({ observer, ReactPCUI, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, SliderInput, VectorInput } = ReactPCUI;
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
+    const { BindingTwoWay, LabelGroup, Panel, SliderInput, VectorInput, TextInput } = ReactPCUI;
 
     return fragment(
         jsx(
             Panel,
             { headerText: 'Attributes' },
-            jsx(
-                LabelGroup,
-                { text: 'Pitch range' },
-                jsx(VectorInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.pitchRange' },
-                    dimensions: 2
-                })
-            ),
             jsx(
                 LabelGroup,
                 { text: 'Rotate speed' },
@@ -31,14 +22,14 @@ export const controls = ({ observer, ReactPCUI, jsx, fragment }) => {
             ),
             jsx(
                 LabelGroup,
-                { text: 'Rotate damping' },
+                { text: 'Rotate joystick sensitivity' },
                 jsx(SliderInput, {
                     binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.rotateDamping' },
+                    link: { observer, path: 'attr.rotateJoystickSens' },
                     min: 0,
-                    max: 0.999,
-                    step: 0.001,
-                    precision: 3
+                    max: 10,
+                    step: 0.01,
+                    precision: 2
                 })
             ),
             jsx(
@@ -71,6 +62,18 @@ export const controls = ({ observer, ReactPCUI, jsx, fragment }) => {
                     max: 10
                 })
             ),
+            jsx(
+                LabelGroup,
+                { text: 'Rotate damping' },
+                jsx(SliderInput, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'attr.rotateDamping' },
+                    min: 0,
+                    max: 0.999,
+                    step: 0.001,
+                    precision: 3
+                })
+            ),
             jsx(
                 LabelGroup,
                 { text: 'Move damping' },
@@ -82,6 +85,41 @@ export const controls = ({ observer, ReactPCUI, jsx, fragment }) => {
                     step: 0.001,
                     precision: 3
                 })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Pitch range' },
+                jsx(VectorInput, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'attr.pitchRange' },
+                    dimensions: 2
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Yaw range' },
+                jsx(VectorInput, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'attr.yawRange' },
+                    dimensions: 2
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Gamepad deadzone' },
+                jsx(VectorInput, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'attr.gamepadDeadZone' },
+                    dimensions: 2
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Mobile input layout' },
+                jsx(TextInput, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'attr.mobileInputLayout' }
+                })
             )
         )
     );

examples/src/examples/camera/fly.example.mjs

@@ -1,10 +1,12 @@
-// @config DESCRIPTION <div style='text-align:center'><div>(<b>LMB</b>) Fly</div><div>(<b>WASDQE</b>) Move</div></div>
+// @config DESCRIPTION <div style='text-align:center'><div>(<b>WASDQE</b>) Move </div><div>(<b>Hold Shift</b>) Move Fast (<b>Hold Ctrl</b>) Move Slow</div><div>(<b>LMB / RMB </b>) Fly</div></div>
 import { data } from 'examples/observer';
 import { deviceType, rootPath, fileImport } from 'examples/utils';
 import * as pc from 'playcanvas';
 
 const { CameraControls } = await fileImport(`${rootPath}/static/scripts/esm/camera-controls.mjs`);
 
+const tmpVa = new pc.Vec2();
+
 const canvas = document.getElementById('application-canvas');
 if (!(canvas instanceof HTMLCanvasElement)) {
     throw new Error('No canvas found');
@@ -59,6 +61,24 @@ await new Promise((resolve) => {
     new pc.AssetListLoader(Object.values(assets), app.assets).load(resolve);
 });
 
+app.start();
+
+app.scene.ambientLight.set(0.4, 0.4, 0.4);
+
+app.scene.skyboxMip = 1;
+app.scene.skyboxIntensity = 0.4;
+app.scene.envAtlas = assets.helipad.resource;
+
+// Create a directional light
+const light = new pc.Entity();
+light.addComponent('light');
+light.setLocalEulerAngles(45, 30, 0);
+app.root.addChild(light);
+
+const statue = assets.statue.resource.instantiateRenderEntity();
+statue.setLocalPosition(0, -0.5, 0);
+app.root.addChild(statue);
+
 /**
  * Calculate the bounding box of an entity.
  *
@@ -77,92 +97,129 @@ const calcEntityAABB = (bbox, entity) => {
     return bbox;
 };
 
+const start = new pc.Vec3(0, 20, 30);
+const bbox = calcEntityAABB(new pc.BoundingBox(), statue);
+
+const camera = new pc.Entity();
+camera.addComponent('camera');
+camera.addComponent('script');
+camera.setPosition(start);
+app.root.addChild(camera);
+const cc = /** @type { CameraControls} */ (camera.script.create(CameraControls));
+Object.assign(cc, {
+    sceneSize: bbox.halfExtents.length(),
+    focusPoint: bbox.center,
+    enableOrbit: false,
+    enablePan: false
+});
+
 /**
- * @param {pc.Entity} focus - The entity to focus the camera on.
- * @returns {CameraControls} The camera-controls script.
+ * @param {string} side - The name.
+ * @param {number} baseSize - The base size.
+ * @param {number} stickSize - The stick size.
  */
-const createFlyCamera = (focus) => {
-    const start = new pc.Vec3(0, 20, 30);
-
-    const camera = new pc.Entity();
-    camera.addComponent('camera');
-    camera.addComponent('script');
-    camera.setPosition(start);
-    app.root.addChild(camera);
-
-    const bbox = calcEntityAABB(new pc.BoundingBox(), focus);
-
-    /** @type {CameraControls} */
-    const script = camera.script.create(CameraControls, {
-        properties: {
-            enableOrbit: false,
-            enablePan: false,
-            focusPoint: bbox.center,
-            sceneSize: bbox.halfExtents.length(),
-            pitchRange: new pc.Vec2(-90, 90)
-        }
+const createJoystickUI = (side, baseSize = 100, stickSize = 60) => {
+    const base = document.createElement('div');
+    Object.assign(base.style, {
+        display: 'none',
+        position: 'absolute',
+        width: `${baseSize}px`,
+        height: `${baseSize}px`,
+        borderRadius: '50%',
+        backgroundColor: 'rgba(50, 50, 50, 0.5)',
+        boxShadow: 'inset 0 0 20px rgba(0, 0, 0, 0.5)'
     });
 
-    return script;
-};
-
-app.start();
-
-app.scene.ambientLight.set(0.4, 0.4, 0.4);
+    const stick = document.createElement('div');
+    Object.assign(stick.style, {
+        display: 'none',
+        position: 'absolute',
+        width: `${stickSize}px`,
+        height: `${stickSize}px`,
+        borderRadius: '50%',
+        backgroundColor: 'rgba(255, 255, 255, 0.5)',
+        boxShadow: 'inset 0 0 10px rgba(0, 0, 0, 0.5)'
+    });
 
-app.scene.skyboxMip = 1;
-app.scene.skyboxIntensity = 0.4;
-app.scene.envAtlas = assets.helipad.resource;
+    /**
+     * @param {HTMLElement} el - The element to set position for.
+     * @param {number} size - The size of the element.
+     * @param {number} x - The x position.
+     * @param {number} y - The y position.
+     */
+    const show = (el, size, x, y) => {
+        el.style.display = 'block';
+        el.style.left = `${x - size * 0.5}px`;
+        el.style.top = `${y - size * 0.5}px`;
+    };
+
+    /**
+     * @param {HTMLElement} el - The element to hide.
+     */
+    const hide = (el) => {
+        el.style.display = 'none';
+    };
+
+    app.on(`${cc.joystickEventName}:${side}`, (bx, by, sx, sy) => {
+        if (bx < 0 || by < 0 || sx < 0 || sy < 0) {
+            hide(base);
+            hide(stick);
+            return;
+        }
 
-// Create a directional light
-const light = new pc.Entity();
-light.addComponent('light');
-light.setLocalEulerAngles(45, 30, 0);
-app.root.addChild(light);
+        show(base, baseSize, bx, by);
+        show(stick, stickSize, sx, sy);
+    });
 
-const statue = assets.statue.resource.instantiateRenderEntity();
-statue.setLocalPosition(0, -0.5, 0);
-app.root.addChild(statue);
+    document.body.append(base, stick);
+};
 
-const multiCameraScript = createFlyCamera(statue);
+// Create joystick UI
+createJoystickUI('left');
+createJoystickUI('right');
 
+// Bind controls to camera attributes
 data.set('attr', [
-    'pitchRange',
     'rotateSpeed',
-    'rotateDamping',
+    'rotateJoystickSens',
     'moveSpeed',
     'moveFastSpeed',
     'moveSlowSpeed',
-    'moveDamping'
+    'rotateDamping',
+    'moveDamping',
+    'pitchRange',
+    'yawRange',
+    'gamepadDeadZone',
+    'mobileInputLayout'
 ].reduce((/** @type {Record<string, any>} */ obj, key) => {
-    const value = multiCameraScript[key];
+    const value = cc[key];
 
     if (value instanceof pc.Vec2) {
         obj[key] = [value.x, value.y];
         return obj;
     }
 
-    obj[key] = multiCameraScript[key];
+    obj[key] = cc[key];
     return obj;
 }, {}));
 
-const tmpVa = new pc.Vec2();
 data.on('*:set', (/** @type {string} */ path, /** @type {any} */ value) => {
     const [category, key, index] = path.split('.');
     if (category !== 'attr') {
         return;
     }
 
     if (Array.isArray(value)) {
-        multiCameraScript[key] = tmpVa.set(value[0], value[1]);
+        cc[key] = tmpVa.set(value[0], value[1]);
         return;
     }
     if (index !== undefined) {
         const arr = data.get(`${category}.${key}`);
-        multiCameraScript[key] = tmpVa.set(arr[0], arr[1]);
+        cc[key] = tmpVa.set(arr[0], arr[1]);
         return;
     }
-    multiCameraScript[key] = value;
+
+    cc[key] = value;
 });
 
 export { app };