added a little bit more functionality

Author: sojs-coder

Parts/Children/SpriteRender.ts

@@ -6,13 +6,15 @@ import type { Transform } from "./Transform";
 export class SpriteRender extends Renderer {
     imageSource: string | null;
     image: any; // Using any for cross-platform compatibility
-    constructor({ imageSource, width, height }: { imageSource: string, width: number, height: number }) {
+    disableAntiAliasing: boolean; // Whether to disable anti-aliasing
+    constructor({ imageSource, width, height, disableAntiAliasing }: { imageSource: string, width: number, height: number, disableAntiAliasing?: boolean }) {
         super({ width, height });
         this.name = "SpriteRender";
         this.type = "SpriteRender";
         this.base = "Renderer";
         this.ready = false;
         this.imageSource = imageSource;
+        this.disableAntiAliasing = typeof disableAntiAliasing !== "undefined" ? disableAntiAliasing : false;
         this.debugEmoji = "🖼️"; // Default emoji for debugging the sprite render 
         this.image = new Image() as HTMLImageElement;
 
@@ -35,7 +37,8 @@ export class SpriteRender extends Renderer {
         const clonedSprite = new SpriteRender({
             imageSource: this.imageSource!,
             width: this.width,
-            height: this.height
+            height: this.height,
+            disableAntiAliasing: this.disableAntiAliasing
         });
 
         memo.set(this, clonedSprite);
@@ -76,6 +79,7 @@ export class SpriteRender extends Renderer {
         const rotation = transform.rotation;
 
         this.top.context.save();
+        this.top.context.imageSmoothingEnabled = !this.disableAntiAliasing; // Respect anti-aliasing setting
         // Move to the center of the sprite for rotation
         this.top.context.translate(position.x, position.y);
         this.top.context.rotate(rotation);

Parts/Game.ts

@@ -195,13 +195,16 @@ export class Game extends Part {
                 this.context.setTransform(1, 0, 0, 1, 0, 0);
                 this.currentScene.debugTreeRender(this.canvas.width / 2, 10, { x: 10, y: 40 });
                 this.context.restore();
+                this.currentScene.preFrame();
                 this.currentScene.act(delta);
                 this.currentScene.frameEnd(delta);
                 this.updateDebugToolTip();
                 this.context.fillStyle = "red";
                 this.context.fillRect(this.canvas.width / 2 - 2, this.canvas.height / 2 - 2, 4, 4);
             } else {
+                this.currentScene.preFrame();
                 this.currentScene.act(delta);
+                this.currentScene.frameEnd(delta);
             }
             this._lastUpdateTime = now;
         }

Parts/GameObject.ts

@@ -4,8 +4,8 @@ import { Part } from "./Part";
 
 export class GameObject extends Part {
     layer?: Layer;
-    constructor({ name }: { name: string }) {
-        super();
+    constructor({ name, render }: { name: string, render?: boolean }) {
+        super({ name, render });
         this.name = name;
         this.debugEmoji = "🕹️"; // Default emoji for debugging the game object
     }

Parts/Part.ts

@@ -36,7 +36,8 @@ export class Part {
     warned: Set<string> = new Set(); // Set to track warnings for this part, preventing duplicate warnings
     private _childrenByName: { [name: string]: Part } = {}; // For quick access to children by name
     private _childrenByType: { [type: string]: Array<Part> } = {}; // For quick access to children by type
-    constructor({ name }: { name?: string } = {}) {
+    render: boolean; // Whether this part should be rendered, default true
+    constructor({ name, render }: { name?: string, render?: boolean } = {}) {
         this.id = generateUID();
         this.name = name || "New Object";
         this.type = "Part";
@@ -45,6 +46,7 @@ export class Part {
         this.top = undefined;
         this.ready = true;
         this.base = "Part";
+        this.render = typeof render !== "undefined" ? render : true;
         this.type = this.constructor.name || "Part"; // Default type is the class name
         this.debugEmoji = "🧩"; // Default emoji for debugging
     }
@@ -162,9 +164,6 @@ export class Part {
         });
     }
     addChild(child: Part) {
-        if (child.name == "LightSource") {
-            console.log(this, child)
-        }
         if (this._childrenByName[child.name]) {
             this.top?.warn(`Child with name <${child.name}> already exists in <${this.name}>. Skipping addition. (Child has ID <${child.id}>).`);
             return;
@@ -201,7 +200,11 @@ export class Part {
         (this as any)[attribute] = value;
         return value;
     }
-
+    preFrame() {
+        this.childrenArray.forEach(child => {
+            child.preFrame();
+        });
+    }
     act(delta: number) {
         if (!this.ready) {
             return;
@@ -212,6 +215,7 @@ export class Part {
                 tie.target.attr(tie.targetAttribute, value);
             }
         });
+        if (!this.render) return;
         this.childrenArray.forEach(child => {
             child.act(delta);
         });
@@ -408,11 +412,11 @@ export class Part {
         // Deep clone children
         this._cloneAndAddChildren(clone, memo);
 
-        // Deep clone ties, registrations, flats
+        // Deep clone ties, registrations, flats -- these actually dont need to be cloned, the just need to be re-assigned
         // Ties
         const clonedTies = new Set<Tie>();
         this.ties.forEach(tie => {
-            const clonedTarget = memo.get(tie.target) || tie.target; // Get cloned target if available, else use original
+            const clonedTarget = tie.target; // pass reference
             clonedTies.add({
                 target: clonedTarget,
                 localAttribute: tie.localAttribute,
@@ -425,27 +429,17 @@ export class Part {
         const clonedRegistrations: { [key: string]: any } = {};
         for (const regKey in this.registrations) {
             const regValue = this.registrations[regKey];
-            if (regValue instanceof Part) {
-                clonedRegistrations[regKey] = regValue.clone(memo);
-            } else if (regValue instanceof Vector) {
-                clonedRegistrations[regKey] = regValue.clone();
-            } else if (typeof regValue === 'object' && regValue !== null) {
-                clonedRegistrations[regKey] = { ...regValue }; // Shallow copy for now, can be made deeper if needed
-            } else {
-                clonedRegistrations[regKey] = regValue;
-            }
+            clonedRegistrations[regKey] = regValue; // Pass reference
         }
         clone.registrations = clonedRegistrations;
-
         // Flats
         const clonedFlats = { colliders: [] as Collider[] };
         if (this.flats.colliders) {
             clonedFlats.colliders = this.flats.colliders.map((collider: Collider) => {
-                return collider.clone(memo);
+                return collider; // pass reference
             });
         }
         clone.flats = clonedFlats;
-
         // Copy other simple properties that are not handled by constructor or special logic
         clone.id = generateUID(); // Generate new ID
         clone.name = this.name; // Copy name
@@ -455,9 +449,9 @@ export class Part {
         clone._layoutWidth = this._layoutWidth; // Copy layout width
         clone._superficialWidth = this._superficialWidth; // Copy superficial width
         clone._superficialHeight = this._superficialHeight; // Copy superficial height
+        clone.base = this.base; // Copy base
         clone.warned = new Set(this.warned); // Copy warned set
 
-
         return clone;
     }
 

Parts/Scene.ts

@@ -5,12 +5,10 @@ import { Part } from "./Part";
 
 export class Scene extends Part {
     activeCamera: Camera | null = null; // The active camera for this scene
-    backgroundColor: string; // Background color of the scene
-    constructor({ name, backgroundColor }: { name: string, backgroundColor?: string } = { name: "Scene" }) {
+    constructor({ name }: { name: string } = { name: "Scene" }) {
         super();
         this.name = name;
         this.debugEmoji = "🏞️"; // Default emoji for debugging the scene
-        this.backgroundColor = backgroundColor || "#000"; // Default background color
     }
     clone(memo = new Map()): this {
         if (memo.has(this)) {
@@ -19,7 +17,6 @@ export class Scene extends Part {
 
         const clonedScene = new Scene({
             name: this.name,
-            backgroundColor: this.backgroundColor
         });
 
         memo.set(this, clonedScene);
@@ -56,13 +53,6 @@ export class Scene extends Part {
             throw new Error("Game instance must have a canvas element.");
         }
 
-        // Draw background BEFORE applying camera transformations
-        // This ensures the background covers the entire screen regardless of camera position
-        if (this.backgroundColor) {
-            this.top.context.fillStyle = this.backgroundColor;
-            this.top.context.fillRect(0, 0, this.top.canvas.width, this.top.canvas.height);
-        }
-
         // Now apply camera transformations for world space objects
         if (this.activeCamera && this.top instanceof Game) {
             const camera = this.activeCamera;

docs/custom-classes.md

@@ -52,9 +52,20 @@ export interface PropertyDefinition {
     fileType?: 'image' | 'audio' | 'video' | 'json'; // For the 'file' type
     options?: string[]; // For enum type. Enum only accepts string as subtype
     dontShow?: boolean; // If true, this property will not show up in the editor. 
+    tertiaryType?: string; // For defining the type of Parts when Part is a subtype of main type List
 }
 ```
 
+Examples:
+```js
+{ type: "number", default: 50, description: "How fast the character moves" },
+{ type: "boolean", default: false, description: "Whether the character is on offensive or defensive" },
+{ type: "list", subType: "number", default: [0.2, 1, 1.5], description: "Crawl speed, walk speed, run speed multipliers" },
+{ type: "enum", options: ["CRAWL", "WALK", "RUN"], description: "The starting state of the character" },
+{ type: "list", subType: "ParT", tertiaryType: "GameObject", description: "Target game objects- the character wins when he reaches any one of these" },
+{ type: "boolean", default: true, dontShow: true, description: "A hidden property that changes the way that sprites are loaded if in the web editor" }
+```
+
 #### Setting `default`
 
 As a general rule, follow the type of your property. Eg: