feat(ecs): add camera zoom in/out (#629)

feat(ecs): add transform scale property

---------

Co-authored-by: Ruggero Visintin <9091842+RuggeroVisintin@users.noreply.github.com>

Author: RuggeroVisintin

.github/workflows/visual-tests-only.yml

@@ -60,24 +60,10 @@ jobs:
           path: test-results/visual/snapshots/
           if_no_artifact_found: ignore
 
-      - name: Download baselines from main (fallback or for PRs)
-        if: (inputs.event_name == 'pull_request' && steps.download_updated_pr_baseline.outcome == 'failure')
-        uses: dawidd6/action-download-artifact@v6
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          workflow: ci.yml
-          branch: main
-          name: visual-baseline
-          path: test-results/visual/snapshots/
-          if_no_artifact_found: fail
-          
-      - name: Install dependencies
-        run: npm ci
-      - name: Build project
-        run: npm run build
-        
       # Verify baselines exist (only for PRs)
       - name: Verify baselines exist
+        id: verify_baselines
+        continue-on-error: true
         if: inputs.pr_number || inputs.event_name == 'pull_request'
         run: |
           if [ ! -d "test-results/visual/snapshots" ] || [ "$(find test-results/visual/snapshots -name "*-ci-snapshots" -type d | wc -l)" -eq 0 ]; then
@@ -100,6 +86,22 @@ jobs:
             echo "Baseline files:"
             find test-results/visual/snapshots -name "*.png" | head -5
           fi
+
+      - name: Download baselines from main
+        if: (inputs.event_name == 'pull_request' && steps.verify_baselines.outcome == 'failure')
+        uses: dawidd6/action-download-artifact@v6
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          workflow: ci.yml
+          branch: main
+          name: visual-baseline
+          path: test-results/visual/snapshots/
+          if_no_artifact_found: fail
+          
+      - name: Install dependencies
+        run: npm ci
+      - name: Build project
+        run: npm run build   
 
       # Run visual tests
       - name: Run Visual Tests

examples/cameraMovement/index.html

@@ -11,7 +11,7 @@
             resolution: { width: 1920, height: 1080 }
         });
 
-        const scene = engine.createScene();
+        const scene = new SparkEngine.Scene();
 
         const leftWall = new SparkEngine.StaticObject();
         leftWall.transform.size = { width: 20, height: 150 };
@@ -31,7 +31,7 @@
         const playerCamera = new SparkEngine.CameraComponent();
         camera.addComponent(playerCamera);
 
-        cameraController.onInputEventCb = (({ KeyW, KeyS, KeyA, KeyD }) => {
+        cameraController.onInputEventCb = (({ KeyW, KeyS, KeyA, KeyD, KeyQ, KeyE }) => {
             const parentTransform = cameraController.getContainer().getComponent('TransformComponent');
 
             if (KeyW === SparkEngine.KeyStatus.Down) {
@@ -52,6 +52,12 @@
             } else {
                 parentTransform.velocity.x = -0;
             }
+
+            if (KeyQ === SparkEngine.KeyStatus.Down) {
+                parentTransform.scale += 0.3;
+            } else if (KeyE === SparkEngine.KeyStatus.Down) {
+                parentTransform.scale -= 0.3;
+            }
         });
 
 
@@ -85,6 +91,7 @@
         scene.registerEntity(camera);
 
 
+        scene.draw(engine);
         engine.run();
     </script>
 </body>

src/ecs/components/CameraComponent.ts

@@ -10,8 +10,7 @@ import { IDrawableComponent } from "./interfaces/IDrawableComponent";
  */
 @Type('CameraComponent')
 export class CameraComponent extends BaseDrawableComponent implements IDrawableComponent {
-
     public draw(renderer: Renderer): void {
-        renderer.pushRenderCommand(new SetTransformMatrixCommand([-this.transform.position.x, -this.transform.position.y]));
+        renderer.pushRenderCommand(new SetTransformMatrixCommand([-this.transform.position.x, -this.transform.position.y], [this.transform.scale, this.transform.scale]));
     }
 }

src/ecs/components/TransformComponent.ts

@@ -14,6 +14,7 @@ export interface TransformComponentProps extends ComponentProps {
     size?: Size2D;
     depthIndex?: number;
     velocity?: Vec2;
+    scale?: number;
 }
 
 /**
@@ -25,6 +26,7 @@ export class TransformComponent extends BaseComponent {
     public size: Size2D = { width: 0, height: 0 };
     public depthIndex: number = 0;
     public velocity: Vec2 = new Vec2();
+    public scale: number = 1;
 
     constructor(props?: TransformComponentProps) {
         super();
@@ -33,6 +35,7 @@ export class TransformComponent extends BaseComponent {
         if (props?.size) this.size = props.size;
         if (props?.depthIndex) this.depthIndex = props.depthIndex;
         if (props?.velocity) this.velocity = Vec2.from(props.velocity);
+        if (props?.scale) this.scale = props.scale;
     }
 
     public update(deltaTime?: number): void {
@@ -46,7 +49,8 @@ export class TransformComponent extends BaseComponent {
             position: this.position,
             size: this.size,
             depthIndex: this.depthIndex,
-            velocity: this.velocity
+            velocity: this.velocity,
+            scale: this.scale
         };
     }
 }

src/renderer/commands/SetTransformMatrixCommand.ts

@@ -1,15 +1,17 @@
 import { CanvasDevice } from "../../platform";
 import { RenderCommand, RenderCommandID } from "./RenderCommand";
 
+/** @internal */
 export class SetTransformMatrixCommand implements RenderCommand {
     public readonly renderCommandID: RenderCommandID = RenderCommandID.RC_SetTransformMatrix;
 
     public constructor(
-        public readonly position: [number, number]
+        public readonly translate: [number, number],
+        public readonly scale: [number, number] = [1, 1],
     ) { }
 
     public execute(ctx: CanvasRenderingContext2D, gfx: CanvasDevice): void {
         // Apply resolution scaling to the transformation matrix where the 1s are
-        gfx.setTransform(ctx, [1, 0, 0, 1, this.position[0], this.position[1]]);
+        gfx.setTransform(ctx, [this.scale[0], 0, 0, this.scale[1], this.translate[0], this.translate[1]]);
     }
 }

test/unit/__mocks__/assets/EntitiesWithComponents.scene.json

@@ -12,7 +12,8 @@
                     "size": {
                         "width": 100,
                         "height": 50
-                    }
+                    },
+                    "scale": 1
                 }
             ]
         },
@@ -28,7 +29,8 @@
                     "size": {
                         "width": 100,
                         "height": 50
-                    }
+                    },
+                    "scale": 1
                 },
                 {
                     "__type": "MaterialComponent",

test/unit/ecs/components/CameraComponent.test.ts

@@ -5,24 +5,19 @@ describe('ecs/components/CameraComponent', () => {
     let cameraComponent = new CameraComponent();
 
     beforeEach(() => {
-        renderer = new Renderer(new CanvasDevice(), {width: 1920, height: 1080}, new CanvasRenderingContext2D());
+        renderer = new Renderer(new CanvasDevice(), { width: 1920, height: 1080 }, new CanvasRenderingContext2D());
         cameraComponent = new CameraComponent();
     });
 
     describe('.draw()', () => {
-        it('Should push the right draw command to the renderer', () => {
-            cameraComponent.draw(renderer);
-
-            expect(renderer.commandBuffer).toEqual([new SetTransformMatrixCommand([-0, -0])])
-        })
-
-        it('Should push the camera position into the render command', () => {
+        it('Should push the camera transform position and scale into the renderer', () => {
             cameraComponent.transform.position.x = 10;
             cameraComponent.transform.position.y = 20;
+            cameraComponent.transform.scale = 2;
 
             cameraComponent.draw(renderer);
 
-            expect(renderer.commandBuffer).toEqual([new SetTransformMatrixCommand([-10, -20])])
+            expect(renderer.commandBuffer).toEqual([new SetTransformMatrixCommand([-10, -20], [2, 2])])
         })
     })
 
@@ -62,6 +57,4 @@ describe('ecs/components/CameraComponent', () => {
             })
         })
     })
-
-    
 })

test/unit/ecs/components/TransformComponent.test.ts

@@ -18,14 +18,20 @@ describe('ecs/components/TransformComponent', () => {
                 width: 0,
                 height: 0
             })
-        })
+        });
+
+        it('Should have a default scale of 1', () => {
+            const transformComponent = new TransformComponent();
+            expect(transformComponent.scale).toEqual(1);
+        });
 
         it('Should init from a props object', () => {
             const init: TransformComponentProps = {
                 position: new Vec2(0, 2),
                 depthIndex: 1,
                 velocity: new Vec2(3, 4),
-                size: { width: 10, height: 15 }
+                size: { width: 10, height: 15 },
+                scale: 2
             }
 
             const transformComponent = new TransformComponent(init);
@@ -38,7 +44,7 @@ describe('ecs/components/TransformComponent', () => {
         it('Should apply the velocity to the position of the component', () => {
             const transformComponent = new TransformComponent();
             transformComponent.velocity.x = 3;
-            
+
             transformComponent.update();
 
             expect(transformComponent.position.x).toEqual(3);
@@ -63,7 +69,8 @@ describe('ecs/components/TransformComponent', () => {
                 size: {
                     width: 0,
                     height: 0
-                }
+                },
+                scale: 1
             })
         })
     })

test/unit/engine/Scene.test.ts

@@ -5,7 +5,7 @@ import { defaultEntitiesScene, entitiesWithComponents } from "../__mocks__/scene
 describe('/game/Scene', () => {
     let scene: Scene;
     let engine: GameEngine;
-    
+
 
     beforeEach(() => {
         engine = new GameEngine({
@@ -15,14 +15,14 @@ describe('/game/Scene', () => {
                 width: 800,
                 height: 600
             },
-            additionalRenderSystems: (renderer, imageLoader) => { 
+            additionalRenderSystems: (renderer, imageLoader) => {
                 return [
                     new RenderSystem(renderer, imageLoader),
                     new RenderSystem(renderer, imageLoader)
                 ];
             }
         });
-        
+
         scene = new Scene();
     })
 
@@ -204,7 +204,7 @@ describe('/game/Scene', () => {
                 expect(engine.soundSystem.components).not.toContain(soundComponent);
             });
         });
-        
+
 
         it('Should throw if the same entity is added twice', () => {
             const entity = new StaticObject();

test/unit/engine/__snapshots__/Scene.test.ts.snap

@@ -13,6 +13,7 @@ exports[`/game/Scene .loadFromFile() Should load the entities configuration as w
             "x": 1,
             "y": 2,
           },
+          "scale": 1,
           "size": {
             "height": 50,
             "width": 100,
@@ -33,6 +34,7 @@ exports[`/game/Scene .loadFromFile() Should load the entities configuration as w
               "x": 1,
               "y": 2,
             },
+            "scale": 1,
             "size": {
               "height": 50,
               "width": 100,
@@ -66,6 +68,7 @@ exports[`/game/Scene .loadFromFile() Should load the entities configuration as w
             "x": 10,
             "y": 20,
           },
+          "scale": 1,
           "size": {
             "height": 50,
             "width": 100,
@@ -96,6 +99,7 @@ exports[`/game/Scene .loadFromFile() Should load the entities configuration as w
               "x": 10,
               "y": 20,
             },
+            "scale": 1,
             "size": {
               "height": 50,
               "width": 100,
@@ -126,6 +130,7 @@ exports[`/game/Scene .loadFromJson() Should load the entities configuration as w
             "x": 1,
             "y": 2,
           },
+          "scale": 1,
           "size": {
             "height": 50,
             "width": 100,
@@ -146,6 +151,7 @@ exports[`/game/Scene .loadFromJson() Should load the entities configuration as w
               "x": 1,
               "y": 2,
             },
+            "scale": 1,
             "size": {
               "height": 50,
               "width": 100,
@@ -179,6 +185,7 @@ exports[`/game/Scene .loadFromJson() Should load the entities configuration as w
             "x": 10,
             "y": 20,
           },
+          "scale": 1,
           "size": {
             "height": 50,
             "width": 100,
@@ -209,6 +216,7 @@ exports[`/game/Scene .loadFromJson() Should load the entities configuration as w
               "x": 10,
               "y": 20,
             },
+            "scale": 1,
             "size": {
               "height": 50,
               "width": 100,