react-simple-game-engine 0.2.35 → 0.2.37

package/lib/classes/scaler.d.ts

@@ -1,27 +1,25 @@
 import { LayoutMode } from "../export-enums";
 import { Size } from "../export-types";
 export declare class Scaler {
-    private readonly _screenSize;
+    private readonly _screenSizeUI;
     private readonly _canvasSize;
     private _layoutMode;
     private _value;
-    private _scaledSize;
-    private _zoneDelta;
-    private _zoneDeltaHalf;
-    constructor(_screenSize: Size, _canvasSize: Size, _layoutMode: LayoutMode);
+    private _screenSize;
+    constructor(_screenSizeUI: Size, _canvasSize: Size, _layoutMode: LayoutMode);
     get value(): number;
     get layoutMode(): LayoutMode;
     get canvasSize(): Size;
     get screenSize(): Size;
-    get scaledSize(): Size;
-    get zoneDelta(): Size;
-    get zoneDeltaHalf(): Size;
-    set zoneDelta(_zoneDelta: Size);
-    set scaledSize(_scaledSize: Size);
+    get screenSizeUI(): Size;
     set value(_value: number);
-    set screenSize(_screenSize: Size);
+    set screenSizeUI(_screenSizeUI: Size);
     set canvasSize(_canvasSize: Size);
     set layoutMode(_layoutMode: LayoutMode);
+    get viewport(): {
+        width: number;
+        height: number;
+    };
     screenUnitToCanvasUnit(px: number): number;
     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;IAMf,OAAO,CAAC,QAAQ,CAAC,WAAW;IAC5B,OAAO,CAAC,QAAQ,CAAC,WAAW;IAC5B,OAAO,CAAC,WAAW;IAPrB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,WAAW,CAAO;IAC1B,OAAO,CAAC,UAAU,CAAO;IACzB,OAAO,CAAC,cAAc,CAAO;gBAEV,WAAW,EAAE,IAAI,EACjB,WAAW,EAAE,IAAI,EAC1B,WAAW,EAAE,UAAU;IAKjC,IAAI,KAAK,IA4CS,MAAM,CA1CvB;IAED,IAAI,UAAU,IAiEc,UAAU,CA/DrC;IAED,IAAI,UAAU,IAwDc,IAAI,CAtD/B;IAED,IAAI,UAAU,IA+Cc,IAAI,CA7C/B;IAED,IAAI,UAAU,IAoBc,IAAI,CAlB/B;IAED,IAAI,SAAS,IAQa,IAAI,CAN7B;IAED,IAAI,aAAa,SAEhB;IAED,IAAI,SAAS,CAAC,UAAU,EAAE,IAAI,EAM7B;IAED,IAAI,UAAU,CAAC,WAAW,EAAE,IAAI,EAM/B;IAED,IAAI,KAAK,CAAC,MAAM,EAAE,MAAM,EAMvB;IASD,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,sBAAsB,CAAC,EAAE,EAAE,MAAM;IAIjC,OAAO,CAAC,MAAM;CAOf"}
+{"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;IAIf,OAAO,CAAC,QAAQ,CAAC,aAAa;IAC9B,OAAO,CAAC,QAAQ,CAAC,WAAW;IAC5B,OAAO,CAAC,WAAW;IALrB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,WAAW,CAAO;gBAEP,aAAa,EAAE,IAAI,EACnB,WAAW,EAAE,IAAI,EAC1B,WAAW,EAAE,UAAU;IAKjC,IAAI,KAAK,IAoBS,MAAM,CAlBvB;IAED,IAAI,UAAU,IAkCc,UAAU,CAhCrC;IAED,IAAI,UAAU,IAyBc,IAAI,CAvB/B;IAED,IAAI,UAAU,SAEb;IAED,IAAI,YAAY,IAYgB,IAAI,CAVnC;IAED,IAAI,KAAK,CAAC,MAAM,EAAE,MAAM,EAMvB;IAED,IAAI,YAAY,CAAC,aAAa,EAAE,IAAI,EAGnC;IAED,IAAI,UAAU,CAAC,WAAW,EAAE,IAAI,EAG/B;IAED,IAAI,UAAU,CAAC,WAAW,EAAE,UAAU,EAGrC;IAED,IAAI,QAAQ;;;MAaX;IAED,sBAAsB,CAAC,EAAE,EAAE,MAAM;IAIjC,OAAO,CAAC,MAAM;CAiBf"}

package/lib/classes/scaler.js

@@ -1,8 +1,8 @@
 import { LayoutMode } from "../export-enums";
 import { copyProperties } from "../utils";
 var Scaler = /** @class */ (function () {
-    function Scaler(_screenSize, _canvasSize, _layoutMode) {
-        this._screenSize = _screenSize;
+    function Scaler(_screenSizeUI, _canvasSize, _layoutMode) {
+        this._screenSizeUI = _screenSizeUI;
         this._canvasSize = _canvasSize;
         this._layoutMode = _layoutMode;
         this.update();
@@ -13,9 +13,9 @@ var Scaler = /** @class */ (function () {
         },
         set: function (_value) {
             this._value = _value;
-            this.scaledSize = {
-                width: this._canvasSize.width * _value,
-                height: this._canvasSize.height * _value,
+            this._screenSize = {
+                width: this.screenUnitToCanvasUnit(this._screenSizeUI.width),
+                height: this.screenUnitToCanvasUnit(this._screenSizeUI.height),
             };
         },
         enumerable: false,
@@ -47,50 +47,36 @@ var Scaler = /** @class */ (function () {
         get: function () {
             return this._screenSize;
         },
-        // private get scaledSize() {
-        //   return {
-        //     width: this._canvasSize.width * this._value,
-        //     height: this._canvasSize.height * this._value,
-        //   };
-        // }
-        set: function (_screenSize) {
-            copyProperties(this._screenSize, _screenSize);
-            this.update();
-        },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Scaler.prototype, "scaledSize", {
+    Object.defineProperty(Scaler.prototype, "screenSizeUI", {
         get: function () {
-            return this._scaledSize;
-        },
-        set: function (_scaledSize) {
-            this._scaledSize = _scaledSize;
-            this.zoneDelta = {
-                width: this._screenSize.width - _scaledSize.width,
-                height: this._screenSize.height - _scaledSize.height,
-            };
+            return this._screenSizeUI;
         },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Scaler.prototype, "zoneDelta", {
-        get: function () {
-            return this._zoneDelta;
-        },
-        set: function (_zoneDelta) {
-            this._zoneDelta = _zoneDelta;
-            this._zoneDeltaHalf = {
-                width: _zoneDelta.width / 2,
-                height: _zoneDelta.height / 2,
-            };
+        set: function (_screenSizeUI) {
+            copyProperties(this._screenSizeUI, _screenSizeUI);
+            this.update();
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Scaler.prototype, "zoneDeltaHalf", {
+    Object.defineProperty(Scaler.prototype, "viewport", {
         get: function () {
-            return this._zoneDeltaHalf;
+            var _viewport = { width: 1, height: 1 };
+            if (this._canvasSize.height > this._screenSize.height) {
+                _viewport.height = this._screenSize.height;
+            }
+            else {
+                _viewport.height = this._canvasSize.height;
+            }
+            if (this._canvasSize.width > this._screenSize.width) {
+                _viewport.width = this._screenSize.width;
+            }
+            else {
+                _viewport.width = this._canvasSize.width;
+            }
+            return _viewport;
         },
         enumerable: false,
         configurable: true
@@ -100,10 +86,22 @@ var Scaler = /** @class */ (function () {
     };
     Scaler.prototype.update = function () {
         if (this._layoutMode === LayoutMode.LANDSCAPE) {
-            this.value = this._screenSize.width / this._canvasSize.width;
+            var predictScale = this._screenSizeUI.width / this._canvasSize.width;
+            if (predictScale * this._canvasSize.height >= this._screenSizeUI.height) {
+                this.value = predictScale;
+            }
+            else {
+                this.value = this._screenSizeUI.height / this._canvasSize.height;
+            }
         }
         else {
-            this.value = this._screenSize.height / this._canvasSize.height;
+            var predictScale = this._screenSizeUI.height / this._canvasSize.height;
+            if (predictScale * this._canvasSize.width >= this._screenSizeUI.width) {
+                this.value = predictScale;
+            }
+            else {
+                this.value = this._screenSizeUI.width / this._canvasSize.width;
+            }
         }
     };
     return Scaler;

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

@@ -26,7 +26,7 @@ export function SceneRunner(_a) {
     var refScaler = useRef(new Scaler(screenSize, { width: width, height: height }, layoutMode));
     var _c = useState(false), isBootDone = _c[0], setBootDone = _c[1];
     useMemo(function () {
-        refScaler.current.screenSize = {
+        refScaler.current.screenSizeUI = {
             width: screenSize.width,
             height: screenSize.height,
         };

package/package.json

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