rollup config

package.json

@@ -1,8 +1,10 @@
 {
   "private": true,
+  "type": "module",
   "version": "beeeeeeta",
   "scripts": {
-    "build": "rm -rf ./dist/ && rollup src/js/main.js --file dist/engine-$(npm pkg get version | tr -d '\"').js --format es",
+    "build": "rollup --config rollup.config.js",
+    "watch": "ROLLUP_WATCH=true rollup --config rollup.config.js --watch",
     "prettier-check": "prettier --check .",
     "prettier-write": "prettier --write .",
     "editorconfig-check": "ec -exclude 'node_modules' .",

rollup.config.js

@@ -0,0 +1,9 @@
+import pkg from './package.json' assert { type: 'json' };
+
+export default {
+  input: 'src/main.js',
+  output: {
+    file: `dist/engine-${pkg.version}.js`,
+    format: 'es',
+  },
+};

src/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/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);
@@ -95,9 +108,14 @@ export class Sprite {
 }
 
 export class TiledSprite extends Sprite {
+  #image;
+
   constructor(src = null, x, y, only = null) {
     super(src, x, y);
 
+    this.src = src;
+    this.srcOld = this.src;
+
     this.only = only;
   }
 
@@ -106,6 +124,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/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.`);
+          }
         }
       });
     });