change src image

src/js/main.js

@@ -1,7 +1,7 @@
 import { Settings } from './settings.js';
 import { Pointer } from './pointer.js';
 import { Scene, SceneLayer } from './scene.js';
-import { Rect, StrokeRect, Sprite, TiledSprite } from './objects.js';
+import { Rect, StrokeRect, Sprite, TiledSprite, Empty } from './objects.js';
 
 export class App {
   #version;
@@ -73,4 +73,4 @@ export class App {
   };
 }
 
-export { Scene, SceneLayer, Rect, StrokeRect, Sprite, TiledSprite };
+export { Scene, SceneLayer, Empty, Rect, StrokeRect, Sprite, TiledSprite };

src/js/objects.js

@@ -8,6 +8,12 @@ class Object {
   }
 }
 
+export class Empty {
+  constructor() {
+    this.ticker = null;
+  }
+}
+
 export class Rect extends Object {
   constructor(x, y, w, h, fillColor = 'white') {
     super(x, y, w, h);
@@ -57,13 +63,15 @@ export class Sprite {
     this.width = null;
     this.height = null;
     this.angle = 0;
+    this.src = src;
+    this.srcOld = this.src;
 
     this.loaded = false;
 
     this.#image = new Image();
     this.#image.onload = this.#onload();
 
-    this.#image.src = src;
+    this.#image.src = this.src;
   }
 
   #onload() {
@@ -82,6 +90,11 @@ export class Sprite {
       return -1;
     }
 
+    if (this.srcOld != this.src) {
+      this.srcOld = this.src;
+      this.#image.src = this.src;
+    }
+
     context.save();
     context.translate(this.x + this.#image.width / 2, this.y + this.#image.height / 2);
     context.rotate((this.angle * Math.PI) / 180);
@@ -98,6 +111,9 @@ export class TiledSprite extends Sprite {
   constructor(src = null, x, y, only = null) {
     super(src, x, y);
 
+    this.src = src;
+    this.srcOld = this.src;
+
     this.only = only;
   }
 
@@ -106,6 +122,11 @@ export class TiledSprite extends Sprite {
       return -1;
     }
 
+    if (this.srcOld != this.src) {
+      this.srcOld = this.src;
+      this.#image.src = this.src;
+    }
+
     // draw single image
     context.drawImage(this.image(), this.x, this.y);
 

src/js/scene.js

@@ -23,7 +23,9 @@ export class Scene {
         if (typeof item.draw == 'function') {
           item.draw(this.#context, layer.options.debug);
         } else {
-          console.log(`⛔ Error display '${item.constructor.name}' object.`);
+          if (item.constructor.name != 'Empty') {
+            console.log(`⛔ Error display '${item.constructor.name}' object.`);
+          }
         }
       });
     });