physics works at least...

Author: sojs-coder

Math/Vector.ts

@@ -12,6 +12,12 @@ export class Vector {
         }
         return new Vector(this.x + other, this.y + other);
     }
+    toObject(): { x: number, y: number } {
+        return { x: this.x, y: this.y };
+    }
+    toArray(): [number, number] {
+        return [this.x, this.y];
+    }
     subtract(other: number | Vector): Vector {
         if (other instanceof Vector) {
             return new Vector(this.x - other.x, this.y - other.y);
@@ -46,6 +52,21 @@ export class Vector {
     dot(other: Vector): number {
         return this.x * other.x + this.y * other.y;
     }
+    clone(): Vector {
+        return new Vector(this.x, this.y);
+    }
+    set(...args: [number, number] | [Vector]): Vector {
+        if (args.length === 1 && args[0] instanceof Vector) {
+            this.x = args[0].x;
+            this.y = args[0].y;
+        } else if (args.length === 2) {
+            this.x = args[0];
+            this.y = args[1];
+        } else {
+            throw new Error("Invalid arguments for set method");
+        }
+        return this;
+    }
     static From(scalar: number): Vector {
         return new Vector(scalar, scalar);
     }

Parts/AreaTrigger.ts

@@ -4,7 +4,7 @@ import { Collider } from "./Children/Collider";
 export class AreaTrigger extends Part {
     onEnter?: (other: Collider) => void;
     onExit?: (other: Collider) => void;
-    private activeCollisions: Set<string> = new Set();
+    activeCollisions: Set<Collider> = new Set();
 
     constructor({ name, onEnter, onExit }: { name?: string, onEnter?: (other: Collider) => void, onExit?: (other: Collider) => void }) {
         super({ name: name || 'AreaTrigger' });
@@ -13,19 +13,19 @@ export class AreaTrigger extends Part {
         this.debugEmoji = "🧲";
     }
 
-    act() {
-        super.act();
+    act(delta: number) {
+        super.act(delta);
         const collider = this.sibling<Collider>("Collider");
         if (!collider) {
             console.warn(`AreaTrigger <${this.name}> requires a Collider sibling.`);
             return;
         }
 
-        const currentCollisions = new Set<string>();
+        const currentCollisions = new Set<Collider>();
         if (collider.colliding) {
             for (const other of collider.collidingWith) {
-                currentCollisions.add(other.id);
-                if (!this.activeCollisions.has(other.id)) {
+                currentCollisions.add(other);
+                if (!this.activeCollisions.has(other)) {
                     // New collision - onEnter
                     if (this.onEnter) {
                         this.onEnter(other);
@@ -35,9 +35,9 @@ export class AreaTrigger extends Part {
         }
 
         // Check for exited collisions - onExit
-        for (const activeId of this.activeCollisions) {
-            if (!currentCollisions.has(activeId)) {
-                const exitedCollider = collider.collidingWith.find(c => c.id === activeId); // This might be tricky as collidingWith is reset
+        for (const other of this.activeCollisions) {
+            if (!currentCollisions.has(other)) {
+                const exitedCollider = Array.from(collider.collidingWith).find(c => c.id === other.id); // This might be tricky as collidingWith is reset
                 // A more robust way would be to store references to the actual collider objects
                 // For simplicity, we'll just call onExit without the specific collider for now
                 if (this.onExit) {

Parts/Camera.ts

@@ -7,14 +7,11 @@ import { Scene } from "./Scene";
 export class Camera extends Part {
     zoom: Vector;
 
-    constructor({ name, position = new Vector(0, 0), zoom = Vector.From(1) }: { name: string, position: Vector, zoom?: Vector }) {
+    constructor({ name }: { name: string, zoom?: Vector }) {
         super();
         this.name = name;
-        this.zoom = zoom;
+        this.zoom = Vector.From(1);
         this.debugEmoji = "📷"; // Camera specific emoji for debugging
-
-        this.addChild(new Transform({ position })); // Add a Transform part for position
-
     }
 
     onMount(parent: Part) {
@@ -47,11 +44,13 @@ export class Camera extends Part {
         };
     }
 
-    act() {
-        super.act();
+    act(delta: number) {
+        super.act(delta);
         const transform = this.children["Transform"] as Transform;
         if (transform) {
             this.zoom = transform.scale;
+        } else {
+            console.warn(`Camera <${this.name}> (${this.id}) does not have a Transform component. Camera zoom will not be updated.`);
         }
     }
 

Parts/CameraShake.ts

@@ -21,7 +21,7 @@ export class CameraShake extends Part {
         // Find the camera in the scene and store its original position
         const camera = this.top?.currentScene?.activeCamera;
         if (camera) {
-            const cameraTransform = camera.sibling<Transform>("Transform");
+            const cameraTransform = camera.children["Transform"] as Transform | undefined;
             if (cameraTransform) {
                 this.originalCameraPosition = cameraTransform.position.clone();
             }
@@ -32,26 +32,26 @@ export class CameraShake extends Part {
         this.shakeTimer = this.duration;
     }
 
-    act() {
-        super.act();
+    act(delta: number) {
+        super.act(delta);
         if (this.shakeTimer > 0) {
             const camera = this.top?.currentScene?.activeCamera;
             if (camera) {
-                const cameraTransform = camera.sibling<Transform>("Transform");
+                const cameraTransform = camera.children["Transform"] as Transform | undefined;
                 if (cameraTransform) {
                     const offsetX = (Math.random() - 0.5) * this.intensity;
                     const offsetY = (Math.random() - 0.5) * this.intensity;
-                    cameraTransform.position = this.originalCameraPosition!.add(new Vector(offsetX, offsetY));
+                    cameraTransform.moveTo(this.originalCameraPosition!.add(new Vector(offsetX, offsetY)));
                 }
             }
             this.shakeTimer--;
         } else if (this.originalCameraPosition) {
             // Reset camera position after shake
             const camera = this.top?.currentScene?.activeCamera;
             if (camera) {
-                const cameraTransform = camera.sibling<Transform>("Transform");
+                const cameraTransform = camera.children["Transform"] as Transform | undefined;
                 if (cameraTransform) {
-                    cameraTransform.position = this.originalCameraPosition;
+                    cameraTransform.moveTo(this.originalCameraPosition);
                 }
             }
         }

Parts/CharacterMovement.ts

@@ -1,21 +1,21 @@
 import { Part } from "./Part";
 import { Transform } from "./Children/Transform";
 import { Input } from "./Input";
+import { Vector } from "../Math/Vector";
 
 export class CharacterMovement extends Part {
     speed: number;
-    movementType: 'WASD' | 'ArrowKeys';
+    movementType: 'WASD' | 'ArrowKeys' | 'BOTH';
     input: Input | undefined;
 
-    constructor({ name, speed = 5, movementType = 'WASD', input }: { name?: string, speed?: number, movementType?: 'WASD' | 'ArrowKeys', input?: Input }) {
+    constructor({ name, speed = 5, movementType = 'WASD', input }: { name?: string, speed?: number, movementType?: 'WASD' | 'ArrowKeys' | 'BOTH', input?: Input }) {
         super({ name: name || 'CharacterMovement' });
         this.speed = speed;
         this.movementType = movementType;
         this.input = input
     }
 
-
-    act(): void {
+    act(_delta: number): void {
         if (!this.input) {
             return;
         }
@@ -27,32 +27,44 @@ export class CharacterMovement extends Part {
 
         const keys = this.input.downkeys;
 
-        if (this.movementType === 'WASD') {
+        let dx = 0;
+        let dy = 0;
+
+        if (this.movementType === 'WASD' || this.movementType === 'BOTH') {
             if (keys.has('w')) {
-                transform.position.y -= this.speed;
+                dy -= 1;
             }
             if (keys.has('s')) {
-                transform.position.y += this.speed;
+                dy += 1;
             }
             if (keys.has('a')) {
-                transform.position.x -= this.speed;
+                dx -= 1;
             }
             if (keys.has('d')) {
-                transform.position.x += this.speed;
+                dx += 1;
             }
-        } else if (this.movementType === 'ArrowKeys') {
+        }
+        if (this.movementType === 'ArrowKeys' || this.movementType === 'BOTH') {
             if (keys.has('ArrowUp')) {
-                transform.position.y -= this.speed;
+                dy -= 1;
             }
             if (keys.has('ArrowDown')) {
-                transform.position.y += this.speed;
+                dy += 1;
             }
             if (keys.has('ArrowLeft')) {
-                transform.position.x -= this.speed;
+                dx -= 1;
             }
             if (keys.has('ArrowRight')) {
-                transform.position.x += this.speed;
+                dx += 1;
             }
         }
+
+        // Normalize diagonal movement
+        if (dx !== 0 && dy !== 0) {
+            dx *= Math.SQRT1_2; // 1 / sqrt(2)
+            dy *= Math.SQRT1_2;
+        }
+
+        transform.move(new Vector(dx * this.speed, dy * this.speed));
     }
 }

Parts/Children/AnimatedSprite.ts

@@ -8,35 +8,37 @@ export class AnimatedSprite extends Renderer {
     spritesheetData?: SpriteSheetData; // Parsed spritesheet data
     loadedSheet?: HTMLImageElement; // Loaded image for the spritesheet
     frames: Record<string, HTMLImageElement[]> = {}; // Object to hold individual frame images for each animation
-    lastFrameTime: number = 0; // Timestamp of the last frame update
     currentFrameIndex: number = 0; // Index of the current frame being displayed
     hasWarnedAboutTransform: boolean = false; // Flag to prevent multiple warnings about missing Transform part
     width: number; // Width of the animated sprite
     height: number; // Height of the animated sprite
     bouncing: boolean = false; // Flag to indicate if the sprite animation is in reverse (bouncing)
     currentAnimation: string = "default"; // Current animation name
     disableAntiAliasing: boolean = false; // Option to disable anti-aliasing
+    webEngine: boolean = false; // Flag to indicate if this is running in a web engine context
     onAnimationComplete?: (animationName: string, sprite: AnimatedSprite) => void; // Callback for when an animation completes
-    constructor({ spritesheet, spritesheetImage, width, height, startingAnimation, disableAntiAliasing = false, onAnimationComplete }: { spritesheet: string, spritesheetImage?: string, width: number, height: number, startingAnimation?: string, disableAntiAliasing?: boolean, onAnimationComplete?: (animationName: string, sprite: AnimatedSprite) => void }) {
+    constructor({ spritesheet, spritesheetImage, width, height, startingAnimation, disableAntiAliasing = false, onAnimationComplete, webEngine = false }: { spritesheet: string, spritesheetImage?: string, width: number, height: number, startingAnimation?: string, disableAntiAliasing?: boolean, onAnimationComplete?: (animationName: string, sprite: AnimatedSprite) => void, webEngine?: boolean }) {
         super({ width, height }); // Call the parent constructor with empty imageSource
         this.name = "AnimatedSprite";
         this.debugEmoji = "🎞️"; // Default emoji for debugging the animated sprite
         this.spritesheet = spritesheet;
         this.width = width;
         this.height = height;
         this.ready = false;
+        this.spritesheetImage = spritesheetImage; // Optional image for the spritesheet
         this.currentAnimation = startingAnimation || "default";
         this.disableAntiAliasing = disableAntiAliasing;
         this.onAnimationComplete = onAnimationComplete; // Set the callback for animation completion
-
+        this.webEngine = webEngine; // Set the web engine flag
     }
 
     async onMount(parent: Part) {
         super.onMount(parent);
         parent.setSuperficialDimensions(this.width, this.height); // Set dimensions for the parent part
-        console.log(this.width, this.height);
-        console.log(this.parent)
         let spritesheetData: SpriteSheetData;
+        if (!this.spritesheet) {
+            return;
+        }
         if (this.spritesheet.startsWith("data:application/json")) {
             spritesheetData = JSON.parse(atob(this.spritesheet.split(',')[1]));
         } else {
@@ -46,7 +48,6 @@ export class AnimatedSprite extends Renderer {
             }
             spritesheetData = await response.json() as SpriteSheetData; // Assuming the spritesheet is a JSON file
         }
-
         // Validate the data structure
         if (!spritesheetData.frames || !Array.isArray(spritesheetData.frames)) {
             throw new Error("Invalid spritesheet format: 'frames' array is missing or not an array.");
@@ -62,12 +63,15 @@ export class AnimatedSprite extends Renderer {
         }
 
         const image = new Image();
-        if (spritesheetImage) {
-            image.src = spritesheetImage;
+        // If spritesheetImage is provided, use it directly. Otherwise, try to resolve from spritesheet data.
+        if (this.spritesheetImage) {
+            image.src = this.spritesheetImage;
         } else {
-            const relativeToSpritesheet = this.spritesheet.startsWith("data:") ? "" : this.spritesheet.split("/").slice(0, -1).join("/");
-            const path = spritesheetData.meta.image.startsWith("http") ? spritesheetData.meta.image : new URL(relativeToSpritesheet + "/" + spritesheetData.meta.image, window.location.href).href;  // Handle relative paths
-            image.src = path; // Set the image source to the spritesheet image path
+            if (!this.webEngine) {
+                const relativeToSpritesheet = this.spritesheet.startsWith("data:") ? "" : this.spritesheet.split("/").slice(0, -1).join("/");
+                const path = spritesheetData.meta.image.startsWith("http") ? spritesheetData.meta.image : new URL(relativeToSpritesheet + "/" + spritesheetData.meta.image, window.location.href).href;  // Handle relative paths
+                image.src = path; // Set the image source to the spritesheet image path
+            }
         }
 
         image.onerror = (err) => {
@@ -91,9 +95,9 @@ export class AnimatedSprite extends Renderer {
         for (const animation of Object.keys(this.frames)) {
             this.frames[animation] = new Array(this.frames[animation].length);
             for (let i = 0; i < this.frames[animation].length; i++) {
-                const frameIndex = this.spritesheetData?.frames.findIndex(frame => frame.filename === data.meta.animations[animation].frames[i]);
+                const frameIndex = this.spritesheetData?.frames.findIndex(frame => frame.filename === this.spritesheetData!.meta.animations[animation].frames[i]);
                 if (frameIndex === -1) {
-                    throw new Error(`Frame '${data.meta.animations[animation].frames[i]}' does not exist in spritesheet for animated sprite <${this.name}> attached to ${this.parent?.name}.`);
+                    throw new Error(`Frame '${this.spritesheetData!.meta.animations[animation].frames[i]}' does not exist in spritesheet for animated sprite <${this.name}> attached to ${this.parent?.name}.`);
                 }
                 const frame: HTMLImageElement | null = this.frame(frameIndex!);
                 if (frame) {
@@ -171,7 +175,6 @@ export class AnimatedSprite extends Renderer {
             this.currentAnimation = animationName;
             this.currentFrameIndex = 0; // Reset to the first frame of the new animation
             this.bouncing = bounce ?? this.spritesheetData.meta.animations[animationName].bounce ?? false; // Reset bouncing state
-            this.lastFrameTime = performance.now(); // Reset frame timing
 
             if (loop !== undefined) {
                 this.spritesheetData.meta.animations[this.currentAnimation].loop = loop;
@@ -180,10 +183,11 @@ export class AnimatedSprite extends Renderer {
             console.warn(`Animation '${animationName}' does not exist in spritesheet for animated sprite <${this.name}> attached to ${this.parent?.name}.`);
         }
     }
-    act() {
-        super.act();
-        const now = performance.now();
-        const delta = now - this.lastFrameTime;
+    act(delta: number) {
+        super.act(delta);
+        if (!this.ready) {
+            return;
+        }
         const duration = (this.spritesheetData?.frames[this.currentFrameIndex].duration || 100)
         if (this.ready && this.spritesheetData) {
             if (delta > duration) {
@@ -220,7 +224,6 @@ export class AnimatedSprite extends Renderer {
                         // Stay at the last frame if we've reached it
                     }
                 }
-                this.lastFrameTime = now;
             }
             const transform = this.sibling<Transform>("Transform");
             if (!transform) {