react-simple-game-engine 0.2.32 → 0.2.33
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.
package/lib/classes/scaler.d.ts
CHANGED
@@ -5,11 +5,20 @@ export declare class Scaler {
|
|
5
5
|
private readonly _canvasSize;
|
6
6
|
private _layoutMode;
|
7
7
|
private _value;
|
8
|
+
private _scaledSize;
|
9
|
+
private _zoneDelta;
|
10
|
+
private _zoneDeltaHalf;
|
8
11
|
constructor(_screenSize: Size, _canvasSize: Size, _layoutMode: LayoutMode);
|
9
12
|
get value(): number;
|
10
13
|
get layoutMode(): LayoutMode;
|
11
14
|
get canvasSize(): Size;
|
12
15
|
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);
|
21
|
+
set value(_value: number);
|
13
22
|
set screenSize(_screenSize: Size);
|
14
23
|
set canvasSize(_canvasSize: Size);
|
15
24
|
set layoutMode(_layoutMode: LayoutMode);
|
@@ -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;
|
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;CAef"}
|
package/lib/classes/scaler.js
CHANGED
@@ -11,6 +11,13 @@ var Scaler = /** @class */ (function () {
|
|
11
11
|
get: function () {
|
12
12
|
return this._value;
|
13
13
|
},
|
14
|
+
set: function (_value) {
|
15
|
+
this._value = _value;
|
16
|
+
this.scaledSize = {
|
17
|
+
width: this._canvasSize.width * _value,
|
18
|
+
height: this._canvasSize.height * _value,
|
19
|
+
};
|
20
|
+
},
|
14
21
|
enumerable: false,
|
15
22
|
configurable: true
|
16
23
|
});
|
@@ -53,24 +60,59 @@ var Scaler = /** @class */ (function () {
|
|
53
60
|
enumerable: false,
|
54
61
|
configurable: true
|
55
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
|
+
enumerable: false,
|
75
|
+
configurable: true
|
76
|
+
});
|
77
|
+
Object.defineProperty(Scaler.prototype, "zoneDelta", {
|
78
|
+
get: function () {
|
79
|
+
return this._zoneDelta;
|
80
|
+
},
|
81
|
+
set: function (_zoneDelta) {
|
82
|
+
this._zoneDelta = _zoneDelta;
|
83
|
+
this._zoneDeltaHalf = {
|
84
|
+
width: _zoneDelta.width / 2,
|
85
|
+
height: _zoneDelta.height / 2,
|
86
|
+
};
|
87
|
+
},
|
88
|
+
enumerable: false,
|
89
|
+
configurable: true
|
90
|
+
});
|
91
|
+
Object.defineProperty(Scaler.prototype, "zoneDeltaHalf", {
|
92
|
+
get: function () {
|
93
|
+
return this._zoneDeltaHalf;
|
94
|
+
},
|
95
|
+
enumerable: false,
|
96
|
+
configurable: true
|
97
|
+
});
|
56
98
|
Scaler.prototype.screenUnitToCanvasUnit = function (px) {
|
57
99
|
return px / this._value;
|
58
100
|
};
|
59
101
|
Scaler.prototype.update = function () {
|
60
102
|
if (this._layoutMode === LayoutMode.LANDSCAPE) {
|
61
103
|
if (this._screenSize.width >= this._screenSize.height) {
|
62
|
-
this.
|
104
|
+
this.value = this._screenSize.width / this._canvasSize.width;
|
63
105
|
}
|
64
106
|
else {
|
65
|
-
this.
|
107
|
+
this.value = this._screenSize.height / this._canvasSize.height;
|
66
108
|
}
|
67
109
|
}
|
68
110
|
else {
|
69
111
|
if (this._screenSize.height >= this._screenSize.width) {
|
70
|
-
this.
|
112
|
+
this.value = this._screenSize.width / this._canvasSize.width;
|
71
113
|
}
|
72
114
|
else {
|
73
|
-
this.
|
115
|
+
this.value = this._screenSize.height / this._canvasSize.height;
|
74
116
|
}
|
75
117
|
}
|
76
118
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../../src/ui-components/control.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAGzC,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAErE,oBAAY,YAAY,GAAG;IACzB,KAAK,EAAE,KAAK,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,KAAK,SAAS,CAAC;IACzC,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,MAAM,EACN,GAAG,EACH,IAAS,EACT,KAAK,EACL,MAAW,EACX,KAAK,GACN,EAAE,YAAY,
|
1
|
+
{"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../../src/ui-components/control.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAGzC,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAErE,oBAAY,YAAY,GAAG;IACzB,KAAK,EAAE,KAAK,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,KAAK,SAAS,CAAC;IACzC,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,MAAM,EACN,GAAG,EACH,IAAS,EACT,KAAK,EACL,MAAW,EACX,KAAK,GACN,EAAE,YAAY,eA6Dd"}
|
@@ -16,27 +16,25 @@ import { Joystick } from "./react-joystick-component";
|
|
16
16
|
export function Control(_a) {
|
17
17
|
var scene = _a.scene, render = _a.render, top = _a.top, _b = _a.left, left = _b === void 0 ? 50 : _b, right = _a.right, _c = _a.bottom, bottom = _c === void 0 ? 50 : _c, props = _a.props;
|
18
18
|
var el = useMemo(function () {
|
19
|
-
var
|
20
|
-
var verDeltaScale = (screenSize.height - canvasSize.height) / 2;
|
21
|
-
var horDeltaScale = (screenSize.width - canvasSize.width) / 2;
|
19
|
+
var zoneDeltaHalf = Renderer.scaler.zoneDeltaHalf;
|
22
20
|
var positionLeft = left != null
|
23
21
|
? {
|
24
|
-
left: left +
|
22
|
+
left: left + zoneDeltaHalf.width,
|
25
23
|
}
|
26
24
|
: undefined;
|
27
25
|
var positionRight = right != null
|
28
26
|
? {
|
29
|
-
right: right +
|
27
|
+
right: right + -zoneDeltaHalf.width,
|
30
28
|
}
|
31
29
|
: undefined;
|
32
30
|
var positionTop = top != null
|
33
31
|
? {
|
34
|
-
top:
|
32
|
+
top: zoneDeltaHalf.height,
|
35
33
|
}
|
36
34
|
: undefined;
|
37
35
|
var positionBottom = bottom != null
|
38
36
|
? {
|
39
|
-
bottom: bottom +
|
37
|
+
bottom: bottom + -zoneDeltaHalf.height,
|
40
38
|
}
|
41
39
|
: undefined;
|
42
40
|
return (_jsx("div", __assign({ style: __assign(__assign(__assign(__assign({ position: "absolute" }, positionLeft), positionRight), positionTop), positionBottom) }, { children: _jsx(Joystick, __assign({ size: 100, baseColor: "#2D2D2D", stickColor: "##303134", throttle: 500 }, props)) })));
|
@@ -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.
|
29
|
+
refScaler.current.screenSize = {
|
30
30
|
width: screenSize.width,
|
31
31
|
height: screenSize.height,
|
32
32
|
};
|