react-simple-game-engine 0.2.15 → 0.2.17

package/lib/classes/p5.d.ts

@@ -7,10 +7,6 @@ export declare class P5 extends p5 {
     scaler: Scaler;
     running: boolean;
     constructor(sketch: (p5: P5) => void, scaler: Scaler);
-    get gameWidth(): number;
-    get gameHeight(): number;
-    get gameMouseX(): number;
-    get gameMouseY(): number;
     get isForeground(): boolean;
     choose<I = any>(collection: Collection<I>): I;
 }

package/lib/classes/p5.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"p5.d.ts","sourceRoot":"","sources":["../../src/classes/p5.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,CAAC;AACpB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,aAAK,eAAe,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AACtC,aAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAEvB,oBAAY,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;AAEnE,qBAAa,EAAG,SAAQ,EAAE;IAGqB,MAAM,EAAE,MAAM;IAF3D,OAAO,UAAQ;gBAEH,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,IAAI,EAAS,MAAM,EAAE,MAAM;IAK3D,IAAI,SAAS,WAEZ;IAED,IAAI,UAAU,WAEb;IAED,IAAI,UAAU,WAEb;IAED,IAAI,UAAU,WAEb;IAED,IAAI,YAAY,YAEf;IAED,MAAM,CAAC,CAAC,GAAG,GAAG,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC;CA+B9C"}
+{"version":3,"file":"p5.d.ts","sourceRoot":"","sources":["../../src/classes/p5.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,CAAC;AACpB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,aAAK,eAAe,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AACtC,aAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAEvB,oBAAY,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;AAEnE,qBAAa,EAAG,SAAQ,EAAE;IAGqB,MAAM,EAAE,MAAM;IAF3D,OAAO,UAAQ;gBAEH,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,IAAI,EAAS,MAAM,EAAE,MAAM;IAK3D,IAAI,YAAY,YAEf;IAED,MAAM,CAAC,CAAC,GAAG,GAAG,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC;CA+B9C"}

package/lib/classes/p5.js

@@ -23,34 +23,6 @@ var P5 = /** @class */ (function (_super) {
         window.Renderer = _this;
         return _this;
     }
-    Object.defineProperty(P5.prototype, "gameWidth", {
-        get: function () {
-            return this.scaler.gameSize.width;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(P5.prototype, "gameHeight", {
-        get: function () {
-            return this.scaler.gameSize.height;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(P5.prototype, "gameMouseX", {
-        get: function () {
-            return (this.mouseX - this.scaler.deltaOfScaleForUI.x) / this.scaler.value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(P5.prototype, "gameMouseY", {
-        get: function () {
-            return (this.mouseY - this.scaler.deltaOfScaleForUI.y) / this.scaler.value;
-        },
-        enumerable: false,
-        configurable: true
-    });
     Object.defineProperty(P5.prototype, "isForeground", {
         get: function () {
             return window.document.visibilityState === "visible";

package/lib/classes/particle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"particle.d.ts","sourceRoot":"","sources":["../../src/classes/particle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,CAAC;AACpB,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,oBAAY,qBAAqB,GAAG;IAClC,GAAG,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,qBAAa,QACX,SAAQ,EAAE,CAAC,MACX,YAAW,UAAU,CAAC,qBAAqB,CAAC;IAE5C,OAAO,CAAC,GAAG,CAAsC;IACjD,OAAO,CAAC,GAAG,CAAsC;IACjD,OAAO,CAAC,KAAK,CAAa;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,KAAK,CAAmB;IAC/B,IAAI,EAAE,MAAM,CAAK;IACjB,cAAc,EAAE,MAAM,CAAiB;IAE9C,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,SAAS,CAAa;IAE9B,IAAI,QAAQ,CAAC,QAAQ,EAAE,MAAM,EAG5B;IAED,IAAI,QAAQ,IALW,MAAM,CAO5B;IAED,OAAO,CAAC,EAAE,GAAG,EAAE,GAAG,MAAM,EAAE,EAAE,qBAAqB;IAOjD,UAAU,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM;IAI3B,MAAM;IAIN,MAAM;IAQN,IAAI;IAuCJ,MAAM,CAAC,CAAC,EAAE,KAAK;CAGhB"}
+{"version":3,"file":"particle.d.ts","sourceRoot":"","sources":["../../src/classes/particle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,CAAC;AACpB,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,oBAAY,qBAAqB,GAAG;IAClC,GAAG,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,qBAAa,QACX,SAAQ,EAAE,CAAC,MACX,YAAW,UAAU,CAAC,qBAAqB,CAAC;IAE5C,OAAO,CAAC,GAAG,CAAsC;IACjD,OAAO,CAAC,GAAG,CAAsC;IACjD,OAAO,CAAC,KAAK,CAAa;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,KAAK,CAAmB;IAC/B,IAAI,EAAE,MAAM,CAAK;IACjB,cAAc,EAAE,MAAM,CAAiB;IAE9C,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,SAAS,CAAa;IAE9B,IAAI,QAAQ,CAAC,QAAQ,EAAE,MAAM,EAG5B;IAED,IAAI,QAAQ,IALW,MAAM,CAO5B;IAED,OAAO,CAAC,EAAE,GAAG,EAAE,GAAG,MAAM,EAAE,EAAE,qBAAqB;IAOjD,UAAU,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM;IAI3B,MAAM;IAIN,MAAM;IAQN,IAAI;IAoCJ,MAAM,CAAC,CAAC,EAAE,KAAK;CAGhB"}

package/lib/classes/particle.js

@@ -81,10 +81,9 @@ var Particle = /** @class */ (function (_super) {
     };
     Particle.prototype.draw = function () {
         Renderer.push();
-        Renderer.noStroke();
-        var deltaOfScale = Renderer.scaler.deltaOfScale;
-        Renderer.translate(this.x - this.camera.x + deltaOfScale.x, this.y - this.camera.y + deltaOfScale.y);
+        Renderer.translate(this.x - this.camera.x, this.y - this.camera.y);
         Renderer.rotate(this.angle);
+        Renderer.noStroke();
         var color = __spreadArray([], this.color, true);
         var alpha = Renderer.map(this.lifetimeRemain, 0, this.lifetime, 0, 255);
         color[3] = alpha;

package/lib/classes/scaler.d.ts

@@ -1,29 +1,15 @@
 import { LayoutMode } from "../export-enums";
 import { Size } from "../export-types";
 export declare class Scaler {
+    private readonly _windowSize;
     private readonly _canvasSize;
-    private readonly _gameSize;
     private _layoutMode;
     private _value;
-    private _deltaOfScale;
-    private _deltaOfScaleForUI;
-    constructor(_canvasSize: Size, _gameSize: Size, _layoutMode: LayoutMode);
-    get deltaOfScaleForUI(): {
-        x: number;
-        y: number;
-    };
-    get deltaOfScale(): {
-        x: number;
-        y: number;
-    };
+    constructor(_windowSize: Size, _canvasSize: Size, _layoutMode: LayoutMode);
     get value(): number;
-    get gameSize(): Size;
-    get canvasSize(): Size;
     get layoutMode(): LayoutMode;
     private get scaledSize();
-    private updateDeltaOfScale;
-    private updateDeltaOfScaleForUI;
-    set gameSize(_gameSize: Size);
+    set windowSize(_windowSize: Size);
     set canvasSize(_canvasSize: Size);
     set layoutMode(_layoutMode: LayoutMode);
     private update;

package/lib/classes/scaler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scaler.d.ts","sourceRoot":"","sources":["../../src/classes/scaler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAGvC,qBAAa,MAAM;IAKf,OAAO,CAAC,QAAQ,CAAC,WAAW;IAC5B,OAAO,CAAC,QAAQ,CAAC,SAAS;IAC1B,OAAO,CAAC,WAAW;IANrB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,aAAa,CAA2B;IAChD,OAAO,CAAC,kBAAkB,CAA2B;gBAElC,WAAW,EAAE,IAAI,EACjB,SAAS,EAAE,IAAI,EACxB,WAAW,EAAE,UAAU;IAKjC,IAAI,iBAAiB;;;MAEpB;IAED,IAAI,YAAY;;;MAEf;IAED,IAAI,KAAK,WAER;IAED,IAAI,QAAQ,IAuCY,IAAI,CArC3B;IAED,IAAI,UAAU,IAwCc,IAAI,CAtC/B;IAED,IAAI,UAAU,IAyCc,UAAU,CAvCrC;IAED,OAAO,KAAK,UAAU,GAKrB;IAED,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,uBAAuB;IAU/B,IAAI,QAAQ,CAAC,SAAS,EAAE,IAAI,EAG3B;IAED,IAAI,UAAU,CAAC,WAAW,EAAE,IAAI,EAG/B;IAED,IAAI,UAAU,CAAC,WAAW,EAAE,UAAU,EAGrC;IAED,OAAO,CAAC,MAAM;CAkBf"}
+{"version":3,"file":"scaler.d.ts","sourceRoot":"","sources":["../../src/classes/scaler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAGvC,qBAAa,MAAM;IAGf,OAAO,CAAC,QAAQ,CAAC,WAAW;IAC5B,OAAO,CAAC,QAAQ,CAAC,WAAW;IAC5B,OAAO,CAAC,WAAW;IAJrB,OAAO,CAAC,MAAM,CAAS;gBAEJ,WAAW,EAAE,IAAI,EACjB,WAAW,EAAE,IAAI,EAC1B,WAAW,EAAE,UAAU;IAKjC,IAAI,KAAK,WAER;IAED,IAAI,UAAU,IAqBc,UAAU,CAnBrC;IAED,OAAO,KAAK,UAAU,GAKrB;IAED,IAAI,UAAU,CAAC,WAAW,EAAE,IAAI,EAG/B;IAED,IAAI,UAAU,CAAC,WAAW,EAAE,IAAI,EAG/B;IAED,IAAI,UAAU,CAAC,WAAW,EAAE,UAAU,EAGrC;IAED,OAAO,CAAC,MAAM;CAef"}

package/lib/classes/scaler.js

@@ -1,26 +1,12 @@
 import { LayoutMode } from "../export-enums";
 import { copyProperties } from "../utils";
 var Scaler = /** @class */ (function () {
-    function Scaler(_canvasSize, _gameSize, _layoutMode) {
+    function Scaler(_windowSize, _canvasSize, _layoutMode) {
+        this._windowSize = _windowSize;
         this._canvasSize = _canvasSize;
-        this._gameSize = _gameSize;
         this._layoutMode = _layoutMode;
         this.update();
     }
-    Object.defineProperty(Scaler.prototype, "deltaOfScaleForUI", {
-        get: function () {
-            return this._deltaOfScaleForUI;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Scaler.prototype, "deltaOfScale", {
-        get: function () {
-            return this._deltaOfScale;
-        },
-        enumerable: false,
-        configurable: true
-    });
     Object.defineProperty(Scaler.prototype, "value", {
         get: function () {
             return this._value;
@@ -28,86 +14,60 @@ var Scaler = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Scaler.prototype, "gameSize", {
+    Object.defineProperty(Scaler.prototype, "layoutMode", {
         get: function () {
-            return this._gameSize;
+            return this._layoutMode;
         },
-        set: function (_gameSize) {
-            copyProperties(this._gameSize, _gameSize);
+        set: function (_layoutMode) {
+            this._layoutMode = _layoutMode;
             this.update();
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Scaler.prototype, "canvasSize", {
+    Object.defineProperty(Scaler.prototype, "scaledSize", {
         get: function () {
-            return this._canvasSize;
-        },
-        set: function (_canvasSize) {
-            copyProperties(this._canvasSize, _canvasSize);
-            this.update();
+            return {
+                width: this._canvasSize.width * this._value,
+                height: this._canvasSize.height * this._value,
+            };
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Scaler.prototype, "layoutMode", {
-        get: function () {
-            return this._layoutMode;
-        },
-        set: function (_layoutMode) {
-            this._layoutMode = _layoutMode;
+    Object.defineProperty(Scaler.prototype, "windowSize", {
+        set: function (_windowSize) {
+            copyProperties(this._windowSize, _windowSize);
             this.update();
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Scaler.prototype, "scaledSize", {
-        get: function () {
-            return {
-                width: this._gameSize.width * this._value,
-                height: this._gameSize.height * this._value,
-            };
+    Object.defineProperty(Scaler.prototype, "canvasSize", {
+        set: function (_canvasSize) {
+            copyProperties(this._canvasSize, _canvasSize);
+            this.update();
         },
         enumerable: false,
         configurable: true
     });
-    Scaler.prototype.updateDeltaOfScale = function () {
-        var _scaleSize = this.scaledSize;
-        var deltaW = Math.abs(this._canvasSize.width - _scaleSize.width);
-        var deltaH = Math.abs(this._canvasSize.height - _scaleSize.height);
-        this._deltaOfScale = {
-            x: deltaW / this._value / 2,
-            y: deltaH / this._value / 2,
-        };
-    };
-    Scaler.prototype.updateDeltaOfScaleForUI = function () {
-        var _scaleSize = this.scaledSize;
-        var deltaW = Math.abs(this._canvasSize.width - _scaleSize.width);
-        var deltaH = Math.abs(this._canvasSize.height - _scaleSize.height);
-        this._deltaOfScaleForUI = {
-            x: deltaW / 2,
-            y: deltaH / 2,
-        };
-    };
     Scaler.prototype.update = function () {
         if (this._layoutMode === LayoutMode.LANDSCAPE) {
-            if (this._canvasSize.width >= this._canvasSize.height) {
-                this._value = this._canvasSize.width / this._gameSize.width;
+            if (this._windowSize.width >= this._windowSize.height) {
+                this._value = this._windowSize.width / this._canvasSize.width;
             }
             else {
-                this._value = this._canvasSize.height / this._gameSize.height;
+                this._value = this._windowSize.height / this._canvasSize.height;
             }
         }
         else {
-            if (this._canvasSize.height >= this._canvasSize.width) {
-                this._value = this._canvasSize.width / this._gameSize.width;
+            if (this._windowSize.height >= this._windowSize.width) {
+                this._value = this._windowSize.width / this._canvasSize.width;
             }
             else {
-                this._value = this._canvasSize.height / this._gameSize.height;
+                this._value = this._windowSize.height / this._canvasSize.height;
             }
         }
-        this.updateDeltaOfScale();
-        this.updateDeltaOfScaleForUI();
     };
     return Scaler;
 }());

package/lib/classes/sprites/sprite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sprite.d.ts","sourceRoot":"","sources":["../../../src/classes/sprites/sprite.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,oBAAY,UAAU,GAAG,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC;AAE3D,oBAAY,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI;IAC1D,MAAM,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC;IACrB,SAAS,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;CAChD,CAAC;AAEF,8BAAsB,MAAM,CAAC,UAAU,SAAS,UAAU;IACjD,MAAM,EAAE,UAAU,CAAC;IAC1B,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,OAAO,CAAS;IAExB,OAAO,CAAC,UAAU,CAAoC;IAEtD,IAAI,SAAS,CAAC,GAAG,EAAE,eAAe,CAAC,IAAI,CAAC,EAGvC;IAED,IAAI,SAAS,IAAI,eAAe,CAAC,IAAI,CAAC,CAErC;IAED,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,EAKxB;IAED,IAAI,MAAM,IAPS,MAAM,CASxB;IAED,IAAI,KAAK,WAER;IAED,IAAI,MAAM,WAET;IAED,IAAI;IAeJ,QAAQ,CAAC,MAAM,IAAI,IAAI;IAEvB,OAAO,CAAC,MAAM,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC;CAexC"}
+{"version":3,"file":"sprite.d.ts","sourceRoot":"","sources":["../../../src/classes/sprites/sprite.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,oBAAY,UAAU,GAAG,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC;AAE3D,oBAAY,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI;IAC1D,MAAM,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC;IACrB,SAAS,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;CAChD,CAAC;AAEF,8BAAsB,MAAM,CAAC,UAAU,SAAS,UAAU;IACjD,MAAM,EAAE,UAAU,CAAC;IAC1B,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,OAAO,CAAS;IAExB,OAAO,CAAC,UAAU,CAAoC;IAEtD,IAAI,SAAS,CAAC,GAAG,EAAE,eAAe,CAAC,IAAI,CAAC,EAGvC;IAED,IAAI,SAAS,IAAI,eAAe,CAAC,IAAI,CAAC,CAErC;IAED,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,EAKxB;IAED,IAAI,MAAM,IAPS,MAAM,CASxB;IAED,IAAI,KAAK,WAER;IAED,IAAI,MAAM,WAET;IAED,IAAI;IAcJ,QAAQ,CAAC,MAAM,IAAI,IAAI;IAEvB,OAAO,CAAC,MAAM,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC;CAexC"}

package/lib/classes/sprites/sprite.js

@@ -43,10 +43,9 @@ var Sprite = /** @class */ (function () {
     Sprite.prototype.draw = function () {
         var _a = this.entity, body = _a.body, position = _a.position, camera = _a.camera;
         Renderer.push();
-        Renderer.noStroke();
-        var deltaOfScale = Renderer.scaler.deltaOfScale;
-        Renderer.translate(position.x - camera.x + deltaOfScale.x, position.y - camera.y + deltaOfScale.y);
+        Renderer.translate(position.x - camera.x, position.y - camera.y);
         Renderer.rotate(body.angle);
+        Renderer.noStroke();
         this.onDraw();
         Renderer.pop();
     };

package/lib/ui-components/scaler-container.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+declare type ScalerContainerProps = {
+    width: number;
+    height: number;
+    value: number;
+    children: ReactNode;
+};
+export declare function ScalerContainer({ width, height, value, children, }: ScalerContainerProps): JSX.Element;
+export {};
+//# sourceMappingURL=scaler-container.d.ts.map

package/lib/ui-components/scaler-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scaler-container.d.ts","sourceRoot":"","sources":["../../src/ui-components/scaler-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,aAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,MAAM,EACN,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,eA0BtB"}

package/lib/ui-components/scaler-container.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ScalerContainer(_a) {
+    var width = _a.width, height = _a.height, value = _a.value, children = _a.children;
+    return (_jsx("div", __assign({ style: {
+            width: "100%",
+            height: "100%",
+            position: "relative",
+            top: 0,
+            left: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+        } }, { children: _jsx("div", __assign({ style: {
+                width: width,
+                height: height,
+                transform: "scale(".concat(value, ")"),
+                transformOrigin: "left top",
+            } }, { children: children })) })));
+}

package/lib/ui-components/scene-runner.d.ts

@@ -8,10 +8,11 @@ export declare type SceneRunnerPublicProps = {
     assetsDelay?: number;
     assetsFailBehavior?: AssetsFailBehavior;
     layoutMode?: LayoutMode;
+    voidSpace?: ReactNode;
 };
 declare type SceneRunnerProps = SceneRunnerPublicProps & {
     current: Scene;
 };
-export declare function SceneRunner({ width, height, current, layoutMode, assetsDelay, assetsFailBehavior, assetsLoader: AssetsLoader, }: SceneRunnerProps): JSX.Element;
+export declare function SceneRunner({ width, height, current, layoutMode, voidSpace, assetsDelay, assetsFailBehavior, assetsLoader: AssetsLoader, }: SceneRunnerProps): JSX.Element;
 export {};
 //# sourceMappingURL=scene-runner.d.ts.map

package/lib/ui-components/scene-runner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scene-runner.d.ts","sourceRoot":"","sources":["../../src/ui-components/scene-runner.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EAEb,SAAS,EAKV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAK7D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG7C,oBAAY,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF,aAAK,gBAAgB,GAAG,sBAAsB,GAAG;IAC/C,OAAO,EAAE,KAAK,CAAC;CAChB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAiC,EAEjC,WAAW,EACX,kBAAkB,EAClB,YAAY,EAAE,YAAY,GAC3B,EAAE,gBAAgB,eA2IlB"}
+{"version":3,"file":"scene-runner.d.ts","sourceRoot":"","sources":["../../src/ui-components/scene-runner.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EAEb,SAAS,EAKV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAK7D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI7C,oBAAY,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,aAAK,gBAAgB,GAAG,sBAAsB,GAAG;IAC/C,OAAO,EAAE,KAAK,CAAC;CAChB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAiC,EAEjC,SAAS,EACT,WAAW,EACX,kBAAkB,EAClB,YAAY,EAAE,YAAY,GAC3B,EAAE,gBAAgB,eAmJlB"}

package/lib/ui-components/scene-runner.js

@@ -14,25 +14,26 @@ import { useEffect, useMemo, useRef, useState, } from "react";
 import { Sketch } from "./sketch";
 import { useWindowSize } from "../utils";
 import { LayoutMode } from "../export-enums";
+import { ScalerContainer } from "./scaler-container";
 import { Scaler } from "../classes/scaler";
 export function SceneRunner(_a) {
     var width = _a.width, height = _a.height, current = _a.current, _b = _a.layoutMode, layoutMode = _b === void 0 ? LayoutMode.LANDSCAPE : _b, 
     //
-    assetsDelay = _a.assetsDelay, assetsFailBehavior = _a.assetsFailBehavior, AssetsLoader = _a.assetsLoader;
+    voidSpace = _a.voidSpace, assetsDelay = _a.assetsDelay, assetsFailBehavior = _a.assetsFailBehavior, AssetsLoader = _a.assetsLoader;
     var windowSize = useWindowSize();
     var refScaler = useRef(new Scaler(windowSize, { width: width, height: height }, layoutMode));
     var _c = useState(false), isBootDone = _c[0], setBootDone = _c[1];
     useMemo(function () {
-        if (window.Renderer) {
-            window.Renderer.resizeCanvas(windowSize.width, windowSize.height);
-        }
         refScaler.current.canvasSize = {
             width: windowSize.width,
             height: windowSize.height,
         };
     }, [windowSize]);
     useMemo(function () {
-        refScaler.current.gameSize = {
+        if (window.Renderer) {
+            window.Renderer.resizeCanvas(width, height);
+        }
+        refScaler.current.canvasSize = {
             width: width,
             height: height,
         };
@@ -70,31 +71,35 @@ export function SceneRunner(_a) {
             msUserSelect: "none",
             userSelect: "none",
             textSizeAdjust: "none",
-        } }, { children: [current.loadedAssets && (_jsx(Sketch, { onSetup: setup, onDraw: draw, scaler: refScaler.current })), _jsx("div", __assign({ style: {
+        } }, { children: [_jsx("div", __assign({ style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: "100%",
+                    zIndex: -1,
+                    backgroundColor: "rgb(41,41,41)",
+                } }, { children: voidSpace })), _jsx(ScalerContainer, __assign({ value: refScaler.current.value, width: width, height: height }, { children: current.loadedAssets && (
+                // canvas
+                _jsx(Sketch, { onSetup: setup, onDraw: draw, scaler: refScaler.current })) })), _jsx("div", __assign({ style: {
                     position: "absolute",
                     top: 0,
                     left: 0,
                     width: "100%",
                     height: "100%",
                     zIndex: 2,
-                } }, { children: _jsx("div", __assign({ style: __assign({ width: width, height: height, transform: "scale(".concat(refScaler.current.value, ")"), transformOrigin: "left top", position: "relative" }, (function () {
-                        var deltaOfScaleForUI = refScaler.current.deltaOfScaleForUI;
-                        return { left: deltaOfScaleForUI.x, top: deltaOfScaleForUI.y };
-                    })()) }, { children: !current.loadedAssets ? (_jsx(_Fragment, { children: current.renderAssetsFail
-                            ? (function () {
-                                var rendered = current.renderAssetsFail();
-                                if (Array.isArray(rendered)) {
-                                    return (_jsx("div", __assign({ style: {
-                                            backgroundColor: "#f28181a1",
-                                            minHeight: 100,
-                                            padding: 10,
-                                            color: "#000",
-                                        } }, { children: rendered.map(function (item, i) { return (_jsxs("p", { children: ["- ", item.type, ": ", item.detail] }, i)); }) })));
-                                }
-                                return rendered;
-                            })()
-                            : assetsLoader })) : (_jsx(_Fragment, { children: isBootDone ? (_jsx("div", __assign({ style: {
-                                width: "100%",
-                                height: "100%",
-                            } }, { children: _jsx(current.UI, __assign({ scene: current }, current.UIProps)) }))) : (_jsx("div", {})) })) })) }))] })));
+                } }, { children: !current.loadedAssets ? (_jsx(_Fragment, { children: current.renderAssetsFail
+                        ? (function () {
+                            var rendered = current.renderAssetsFail();
+                            if (Array.isArray(rendered)) {
+                                return (_jsx("div", __assign({ style: {
+                                        backgroundColor: "#f28181a1",
+                                        minHeight: 100,
+                                        padding: 10,
+                                        color: "#000",
+                                    } }, { children: rendered.map(function (item, i) { return (_jsxs("p", { children: ["- ", item.type, ": ", item.detail] }, i)); }) })));
+                            }
+                            return rendered;
+                        })()
+                        : assetsLoader })) : (_jsx(_Fragment, { children: isBootDone ? (_jsx(ScalerContainer, __assign({ value: refScaler.current.value, height: height, width: width }, { children: _jsx(current.UI, __assign({ scene: current }, current.UIProps)) }))) : (_jsx("div", {})) })) }))] })));
 }

package/lib/ui-components/sketch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sketch.d.ts","sourceRoot":"","sources":["../../src/ui-components/sketch.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,aAAK,WAAW,GAAG;IACjB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,MAAM,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,WAAW,eA0CzE"}
+{"version":3,"file":"sketch.d.ts","sourceRoot":"","sources":["../../src/ui-components/sketch.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,aAAK,WAAW,GAAG;IACjB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,MAAM,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,WAAW,eA+CzE"}

package/lib/ui-components/sketch.js

@@ -21,7 +21,6 @@ export function Sketch(_a) {
                 onSetup(camera);
             };
             s.draw = function () {
-                s.scale(scaler.value);
                 s.imageMode(s.CENTER);
                 s.rectMode(s.CENTER);
                 onDraw();
@@ -33,5 +32,8 @@ export function Sketch(_a) {
         };
         // eslint-disable-next-line
     }, []);
-    return (_jsx("div", { style: { height: scaler.canvasSize.height }, ref: refContainer }));
+    return (_jsx("div", { style: {
+            height: scaler.canvasSize.height,
+            width: scaler.canvasSize.width,
+        }, ref: refContainer }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-game-engine",
-  "version": "0.2.15",
+  "version": "0.2.17",
   "description": "",
   "main": "lib/index.js",
   "types": "lib",