react-simple-game-engine 0.2.36 → 0.2.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/lib/classes/scaler.d.ts +9 -11
  2. package/lib/classes/scaler.d.ts.map +1 -1
  3. package/lib/classes/scaler.js +31 -45
  4. package/lib/ui-components/control.js +1 -1
  5. package/lib/ui-components/scene-runner.js +1 -1
  6. package/package.json +1 -1
package/lib/classes/scaler.d.ts CHANGED
@@ -1,27 +1,25 @@
1
1
  import { LayoutMode } from "../export-enums";
2
2
  import { Size } from "../export-types";
3
3
  export declare class Scaler {
4
- private readonly _screenSize;
4
+ private readonly _screenSizeUI;
5
5
  private readonly _canvasSize;
6
6
  private _layoutMode;
7
7
  private _value;
8
- private _scaledSize;
9
- private _zoneDelta;
10
- private _zoneDeltaHalf;
11
- constructor(_screenSize: Size, _canvasSize: Size, _layoutMode: LayoutMode);
8
+ private _screenSize;
9
+ constructor(_screenSizeUI: Size, _canvasSize: Size, _layoutMode: LayoutMode);
12
10
  get value(): number;
13
11
  get layoutMode(): LayoutMode;
14
12
  get canvasSize(): Size;
15
13
  get screenSize(): Size;
16
- get scaledSize(): Size;
17
- get zoneDelta(): Size;
18
- get zoneDeltaHalf(): Size;
19
- set zoneDelta(_zoneDelta: Size);
20
- set scaledSize(_scaledSize: Size);
14
+ get screenSizeUI(): Size;
21
15
  set value(_value: number);
22
- set screenSize(_screenSize: Size);
16
+ set screenSizeUI(_screenSizeUI: Size);
23
17
  set canvasSize(_canvasSize: Size);
24
18
  set layoutMode(_layoutMode: LayoutMode);
19
+ get viewport(): {
20
+ width: number;
21
+ height: number;
22
+ };
25
23
  screenUnitToCanvasUnit(px: number): number;
26
24
  private update;
27
25
  }
package/lib/classes/scaler.d.ts.map CHANGED
@@ -1 +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;CAiBf"}
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;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 CHANGED
@@ -1,8 +1,8 @@
1
1
  import { LayoutMode } from "../export-enums";
2
2
  import { copyProperties } from "../utils";
3
3
  var Scaler = /** @class */ (function () {
4
- function Scaler(_screenSize, _canvasSize, _layoutMode) {
5
- this._screenSize = _screenSize;
4
+ function Scaler(_screenSizeUI, _canvasSize, _layoutMode) {
5
+ this._screenSizeUI = _screenSizeUI;
6
6
  this._canvasSize = _canvasSize;
7
7
  this._layoutMode = _layoutMode;
8
8
  this.update();
@@ -13,9 +13,9 @@ var Scaler = /** @class */ (function () {
13
13
  },
14
14
  set: function (_value) {
15
15
  this._value = _value;
16
- this.scaledSize = {
17
- width: this._canvasSize.width * _value,
18
- height: this._canvasSize.height * _value,
16
+ this._screenSize = {
17
+ width: this.screenUnitToCanvasUnit(this._screenSizeUI.width),
18
+ height: this.screenUnitToCanvasUnit(this._screenSizeUI.height),
19
19
  };
20
20
  },
21
21
  enumerable: false,
@@ -47,50 +47,36 @@ var Scaler = /** @class */ (function () {
47
47
  get: function () {
48
48
  return this._screenSize;
49
49
  },
50
- // private get scaledSize() {
51
- // return {
52
- // width: this._canvasSize.width * this._value,
53
- // height: this._canvasSize.height * this._value,
54
- // };
55
- // }
56
- set: function (_screenSize) {
57
- copyProperties(this._screenSize, _screenSize);
58
- this.update();
59
- },
60
- enumerable: false,
61
- configurable: true
62
- });
63
- Object.defineProperty(Scaler.prototype, "scaledSize", {
64
- get: function () {
65
- return this._scaledSize;
66
- },
67
- set: function (_scaledSize) {
68
- this._scaledSize = _scaledSize;
69
- this.zoneDelta = {
70
- width: this._screenSize.width - _scaledSize.width,
71
- height: this._screenSize.height - _scaledSize.height,
72
- };
73
- },
74
50
  enumerable: false,
75
51
  configurable: true
76
52
  });
77
- Object.defineProperty(Scaler.prototype, "zoneDelta", {
53
+ Object.defineProperty(Scaler.prototype, "screenSizeUI", {
78
54
  get: function () {
79
- return this._zoneDelta;
55
+ return this._screenSizeUI;
80
56
  },
81
- set: function (_zoneDelta) {
82
- this._zoneDelta = _zoneDelta;
83
- this._zoneDeltaHalf = {
84
- width: _zoneDelta.width / 2,
85
- height: _zoneDelta.height / 2,
86
- };
57
+ set: function (_screenSizeUI) {
58
+ copyProperties(this._screenSizeUI, _screenSizeUI);
59
+ this.update();
87
60
  },
88
61
  enumerable: false,
89
62
  configurable: true
90
63
  });
91
- Object.defineProperty(Scaler.prototype, "zoneDeltaHalf", {
64
+ Object.defineProperty(Scaler.prototype, "viewport", {
92
65
  get: function () {
93
- return this._zoneDeltaHalf;
66
+ var _viewport = { width: 1, height: 1 };
67
+ if (this._canvasSize.height > this._screenSize.height) {
68
+ _viewport.height = this._screenSize.height;
69
+ }
70
+ else {
71
+ _viewport.height = this._canvasSize.height;
72
+ }
73
+ if (this._canvasSize.width > this._screenSize.width) {
74
+ _viewport.width = this._screenSize.width;
75
+ }
76
+ else {
77
+ _viewport.width = this._canvasSize.width;
78
+ }
79
+ return _viewport;
94
80
  },
95
81
  enumerable: false,
96
82
  configurable: true
@@ -100,21 +86,21 @@ var Scaler = /** @class */ (function () {
100
86
  };
101
87
  Scaler.prototype.update = function () {
102
88
  if (this._layoutMode === LayoutMode.LANDSCAPE) {
103
- var predictScale = this._screenSize.width / this._canvasSize.width;
104
- if (predictScale * this._canvasSize.height >= this._screenSize.height) {
89
+ var predictScale = this._screenSizeUI.width / this._canvasSize.width;
90
+ if (predictScale * this._canvasSize.height >= this._screenSizeUI.height) {
105
91
  this.value = predictScale;
106
92
  }
107
93
  else {
108
- this.value = this._screenSize.height / this._canvasSize.height;
94
+ this.value = this._screenSizeUI.height / this._canvasSize.height;
109
95
  }
110
96
  }
111
97
  else {
112
- var predictScale = this._screenSize.height / this._canvasSize.height;
113
- if (predictScale * this._canvasSize.width >= this._screenSize.width) {
98
+ var predictScale = this._screenSizeUI.height / this._canvasSize.height;
99
+ if (predictScale * this._canvasSize.width >= this._screenSizeUI.width) {
114
100
  this.value = predictScale;
115
101
  }
116
102
  else {
117
- this.value = this._screenSize.width / this._canvasSize.width;
103
+ this.value = this._screenSizeUI.width / this._canvasSize.width;
118
104
  }
119
105
  }
120
106
  };
package/lib/ui-components/control.js CHANGED
@@ -22,7 +22,7 @@ export function Control(_a) {
22
22
  top: top,
23
23
  bottom: bottom,
24
24
  right: right,
25
- } }, { children: _jsx(Joystick, __assign({ size: 60, baseColor: "#2D2D2D", stickColor: "##303134", throttle: 500 }, props)) })));
25
+ } }, { children: _jsx(Joystick, __assign({ size: 60, baseColor: "#2D2D2D", stickColor: "#303134", throttle: 500 }, props)) })));
26
26
  }, [props]);
27
27
  return (_jsx(Watcher, __assign({ initialValues: {
28
28
  isShow: true,
package/lib/ui-components/scene-runner.js CHANGED
@@ -26,7 +26,7 @@ export function SceneRunner(_a) {
26
26
  var refScaler = useRef(new Scaler(screenSize, { width: width, height: height }, layoutMode));
27
27
  var _c = useState(false), isBootDone = _c[0], setBootDone = _c[1];
28
28
  useMemo(function () {
29
- refScaler.current.screenSize = {
29
+ refScaler.current.screenSizeUI = {
30
30
  width: screenSize.width,
31
31
  height: screenSize.height,
32
32
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-simple-game-engine",
3
- "version": "0.2.36",
3
+ "version": "0.2.38",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib",