lots of updates, added sprite builder, better animations

Author: sojs-coder

Parts/AreaTrigger.ts

@@ -14,6 +14,26 @@ export class AreaTrigger extends Part {
         this.type = "AreaTrigger";
     }
 
+    clone(memo = new Map()): this {
+        if (memo.has(this)) {
+            return memo.get(this);
+        }
+
+        const clonedTrigger = new AreaTrigger({
+            onEnter: this.onEnter,
+            onExit: this.onExit
+        });
+
+        memo.set(this, clonedTrigger);
+
+        this._cloneProperties(clonedTrigger, memo);
+
+        // Reset properties that need re-initialization after construction
+        clonedTrigger.activeCollisions = new Set<Collider>(); // Reset active collisions
+
+        return clonedTrigger as this;
+    }
+
     act(delta: number) {
         super.act(delta);
         const collider = this.sibling<Collider>("Collider");

Parts/CameraShake.ts

@@ -18,6 +18,28 @@ export class CameraShake extends Part {
         this.type = "CameraShake";
     }
 
+    clone(memo = new Map()): this {
+        if (memo.has(this)) {
+            return memo.get(this);
+        }
+
+        const clonedShake = new CameraShake({
+            intensity: this.intensity,
+            duration: this.duration
+        });
+
+        memo.set(this, clonedShake);
+
+        this._cloneProperties(clonedShake, memo);
+
+        // Reset properties that need re-initialization after construction
+        clonedShake.initialized = false;
+        clonedShake.shakeTimer = 0;
+        clonedShake.originalCameraPosition = null;
+
+        return clonedShake as this;
+    }
+
     initialize() {
         this.initialized = true;
         // Find the camera in the scene and store its original position

Parts/Children/AnimatedSprite.ts

@@ -37,6 +37,38 @@ export class AnimatedSprite extends Renderer {
         this.webEngine = webEngine; // Set the web engine flag
         this.type = "AnimatedSprite";
     }
+    clone(memo = new Map()): this {
+        if (memo.has(this)) {
+            return memo.get(this);
+        }
+
+        const clonedSprite = new AnimatedSprite({
+            spritesheet: this.spritesheet,
+            spritesheetImage: this.spritesheetImage,
+            width: this.width,
+            height: this.height,
+            startingAnimation: this.currentAnimation,
+            disableAntiAliasing: this.disableAntiAliasing,
+            onAnimationComplete: this.onAnimationComplete,
+            webEngine: this.webEngine,
+            bounce: this.startBouncing,
+            loop: this.startLoop
+        });
+
+        memo.set(this, clonedSprite);
+
+        this._cloneProperties(clonedSprite, memo);
+
+        // Reset properties that need re-initialization after construction
+        clonedSprite.ready = false;
+        clonedSprite.currentFrameIndex = 0;
+        clonedSprite.loadedSheet = undefined;
+        clonedSprite.frames = {};
+        clonedSprite.spritesheetData = undefined;
+        clonedSprite.lastFrameTime = performance.now(); // Reset last frame time
+
+        return clonedSprite as this;
+    }
     destroy() {
         super.destroy();
         // Clean up the loaded spritesheet image
@@ -135,6 +167,7 @@ export class AnimatedSprite extends Renderer {
             }
 
         }
+        await Promise.all(frameLoadPromises);
         if (this.currentAnimation === "default" && this.spritesheetData.meta.startingAnimation) {
             this.currentAnimation = this.spritesheetData.meta.startingAnimation;
             this.setAnimation(this.currentAnimation, { loop: this.startLoop, bounce: this.startBouncing });

Parts/Children/Button.ts

@@ -89,6 +89,71 @@ export class Button extends Renderer {
             }
         };
     }
+    clone(memo = new Map()): this {
+        if (memo.has(this)) {
+            return memo.get(this);
+        }
+
+        const clonedButton = new Button({
+            label: this.name,
+            onClick: this.onClickHandler,
+            styles: this.styles,
+            clickSound: this.clickSound,
+            hoverSound: this.hoverSound,
+            activeSound: this.activeSound,
+            width: this.width,
+            height: this.height,
+        });
+
+        memo.set(this, clonedButton);
+
+        this._cloneProperties(clonedButton, memo);
+
+        // Reset properties that need re-initialization after construction
+        clonedButton.isHovered = false;
+        clonedButton.isActive = false;
+
+        // Re-assign event handlers to ensure they are bound to the cloned instance
+        clonedButton.onclick = (event: MouseEvent, input: any) => {
+            if (clonedButton.onClickHandler) {
+                clonedButton.onClickHandler();
+            }
+            if (clonedButton.clickSound) {
+                clonedButton.clickSound.play({ clone: true });
+            }
+            event.stopPropagation();
+            event.preventDefault();
+        };
+
+        clonedButton.onhover = () => {
+            clonedButton.isHovered = true;
+            if (clonedButton.hoverSound) {
+                clonedButton.hoverSound.play({ clone: true });
+            }
+        };
+
+        clonedButton.onunhover = () => {
+            clonedButton.isHovered = false;
+            clonedButton.isActive = false;
+        };
+
+        clonedButton.onmousedown = (event: MouseEvent) => {
+            if (event.button === 0) {
+                clonedButton.isActive = true;
+                if (clonedButton.activeSound) {
+                    clonedButton.activeSound.play({ clone: true });
+                }
+            }
+        };
+
+        clonedButton.onmouseup = (event: MouseEvent) => {
+            if (event.button === 0) {
+                clonedButton.isActive = false;
+            }
+        };
+
+        return clonedButton as this;
+    }
     onMount(parent: Part) {
         super.onMount(parent);
         if (!this.sibling("Transform")) {

Parts/Children/Collider.ts

@@ -10,6 +10,24 @@ export class Collider extends Part {
         this.type = "Collider";
     }
 
+    clone(memo = new Map()): this {
+        if (memo.has(this)) {
+            return memo.get(this);
+        }
+
+        const clonedCollider = new Collider();
+
+        memo.set(this, clonedCollider);
+
+        this._cloneProperties(clonedCollider, memo);
+
+        // Reset properties that need re-initialization after construction
+        clonedCollider.colliding = false;
+        clonedCollider.collidingWith = new Set<Collider>();
+
+        return clonedCollider as this;
+    }
+
     onMount(parent: Part) {
         super.onMount(parent);
         if (!this.sibling("Transform")) {

Parts/Children/ColorRender.ts

@@ -42,7 +42,24 @@ export class ColorRender extends Renderer {
 
         parent.setSuperficialDimensions(this.width, this.height);
     }
+    clone(memo = new Map()): this {
+        if (memo.has(this)) {
+            return memo.get(this);
+        }
+
+        const clonedColor = new ColorRender({
+            width: this.width,
+            height: this.height,
+            color: this.color,
+            vertices: this.vertices.map(v => v.clone())
+        });
+
+        memo.set(this, clonedColor);
 
+        this._cloneProperties(clonedColor, memo);
+
+        return clonedColor as this;
+    }
     act(delta: number) {
         super.act(delta);
 

Parts/Children/SpriteRender.ts

@@ -19,13 +19,33 @@ export class SpriteRender extends Renderer {
             this.ready = true;
         };
         this.image.onerror = (err: any) => {
-            this.top?.error(`Failed to load image <${this.imageSource}>:`, err);
+            this.top?.error(`[C] Failed to load image<${this.imageSource?.slice(0, 30)}>:`, err.message);
         };
         this.image.src = imageSource;
 
         this.width = width;
         this.height = height;
     }
+    clone(memo = new Map()): this {
+        if (memo.has(this)) {
+            return memo.get(this);
+        }
+
+        const clonedSprite = new SpriteRender({
+            imageSource: this.imageSource!,
+            width: this.width,
+            height: this.height
+        });
+
+        memo.set(this, clonedSprite);
+
+        this._cloneProperties(clonedSprite, memo);
+
+        // Reset properties that need re-initialization after construction
+        clonedSprite.ready = false;
+
+        return clonedSprite as this;
+    }
     onMount(parent: Part) {
         super.onMount(parent);
         if (!this.sibling("Transform")) {

Parts/Follow.ts

@@ -28,6 +28,34 @@ export class Follow extends Part {
         this.debugEmoji = "🎯";
     }
 
+    clone(memo = new Map()): this {
+        if (memo.has(this)) {
+            return memo.get(this);
+        }
+
+        const clonedFollow = new Follow({
+            name: this.name,
+            target: this.target as Transform,
+            offset: this.offset.clone(),
+            interpolationSpeed: this.interpolationSpeed
+        });
+
+        memo.set(this, clonedFollow);
+
+        this._cloneProperties(clonedFollow, memo);
+
+        // Reset properties that need re-initialization after construction
+        // Handle target separately, as it might be a cloned object
+        if (this.target && memo.has(this.target)) {
+            clonedFollow.target = memo.get(this.target);
+        } else {
+            clonedFollow.target = this.target; // Keep reference to original if not cloned
+        }
+        clonedFollow.externalOffset = new Vector(0, 0); // Reset external offset
+
+        return clonedFollow as this;
+    }
+
     act(delta: number) {
         super.act(delta);
         if (this.target) {

Parts/Game.ts

@@ -1,4 +1,3 @@
-import { Sound } from "../engine/bundle";
 import { getDebugInfo } from "../helpers";
 import { Part } from "./Part";
 import { Scene } from "./Scene";
@@ -62,6 +61,47 @@ export class Game extends Part {
         }
     }
 
+    clone(memo = new Map()): this {
+        if (memo.has(this)) {
+            return memo.get(this);
+        }
+
+        // Game constructor requires canvas, width, height, name
+        // We cannot clone the canvas directly, so we'll create a placeholder
+        // The user will need to re-assign a real canvas after cloning
+        const clonedGame = new Game({
+            name: this.name,
+            canvas: document.createElement('canvas'), // Placeholder canvas
+            devmode: this.devmode,
+            width: this.width,
+            height: this.height,
+            disableAntiAliasing: !this.context.imageSmoothingEnabled, // Infer from original context
+            showtoolTips: this.showtoolTips
+        });
+
+        memo.set(this, clonedGame);
+
+        this._cloneProperties(clonedGame, memo);
+
+        // Reset properties that are tied to the DOM or internal state
+        clonedGame.canvas = undefined as any; // User must provide a real canvas
+        clonedGame.context = undefined as any; // Context will be derived from new canvas
+        clonedGame.currentScene = undefined; // Will be set by start() or setScene()
+        // clonedGame.childrenArray is handled by _cloneProperties
+        clonedGame.hovering = undefined; // Reset hovering part
+        clonedGame.tooltipLocked = undefined; // Reset tooltip lock
+        clonedGame.lastMousePosition = { x: 0, y: 0 }; // Reset mouse position
+        clonedGame.scaleFactor = 1; // Reset scale factor
+        clonedGame.canvasOffset = { x: 0, y: 0 }; // Reset canvas offset
+        clonedGame.messageHook = undefined; // Clear message hook
+        clonedGame._isRunning = false; // Reset running state
+        clonedGame._isPaused = false; // Reset paused state
+        clonedGame._animationFrameId = undefined; // Clear animation frame ID
+        clonedGame._lastUpdateTime = 0; // Reset last update time
+
+        return clonedGame as this;
+    }
+
     changeCanvasSize(width: number, height: number) {
         this.canvas.width = width;
         this.canvas.height = height;

Parts/Health.ts

@@ -15,6 +15,27 @@ export class Health extends Part {
         this.type = "Health";
     }
 
+    clone(memo = new Map()): this {
+        if (memo.has(this)) {
+            return memo.get(this);
+        }
+
+        const clonedHealth = new Health({
+            maxHealth: this.maxHealth,
+            onDeath: this.onDeath
+        });
+
+        memo.set(this, clonedHealth);
+
+        this._cloneProperties(clonedHealth, memo);
+
+        // Reset properties that need re-initialization after construction
+        clonedHealth.isDead = false;
+        clonedHealth.currentHealth = clonedHealth.maxHealth;
+
+        return clonedHealth as this;
+    }
+
     takeDamage(amount: number) {
         this.currentHealth -= amount;
         if (this.currentHealth <= 0) {