Skip to content

Commit 2393521

Browse files
sammesamme
committed
4.1.0
1 parent 010472f commit 2393521

4 files changed

Lines changed: 125 additions & 31 deletions

File tree

‎dist/phaser-plugin-debug-game-scale.esm.js‎

Lines changed: 61 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -75,12 +75,34 @@ const { POST_RENDER } = Phaser.Core.Events;
7575
const { ENTER_FULLSCREEN, FULLSCREEN_FAILED, FULLSCREEN_UNSUPPORTED, LEAVE_FULLSCREEN, ORIENTATION_CHANGE, RESIZE } = Phaser.Scale.Events;
7676

7777
class DebugGameScalePlugin extends Phaser.Plugins.BasePlugin {
78+
constructor(pluginManager) {
79+
super(pluginManager);
80+
81+
this.x = null;
82+
this.y = null;
83+
this.width = 512;
84+
this.height = 128;
85+
this.font = '12px system-ui, sans-serif';
86+
this.lineHeight = 16;
87+
this.color = 'white';
88+
this.shadowBlur = 0;
89+
this.shadowOffsetX = 1;
90+
this.shadowOffsetY = 1;
91+
this.shadowColor = 'black';
92+
}
93+
7894
init (data) {
7995
if (!this.game.renderer.gameCanvas) {
8096
throw new Error('CANVAS renderer only')
8197
}
8298

8399
console.info('device.fullscreen.available', this.game.device.fullscreen.available);
100+
101+
for (const dataKey in data) {
102+
if (this.hasOwnProperty(dataKey)) {
103+
this[dataKey] = data[dataKey];
104+
}
105+
}
84106
}
85107

86108
start () {
@@ -123,17 +145,20 @@ class DebugGameScalePlugin extends Phaser.Plugins.BasePlugin {
123145
const { scale } = this.game;
124146
const { devicePixelRatio, screen, visualViewport } = window;
125147
const { gameContext: c } = this.game.renderer;
148+
const { activePointer } = this.game.input;
126149
const cx = 0.5 * scale.width;
127150
const cy = 0.5 * scale.height;
128-
const w = 512;
129-
const h = 128;
130-
let x = ~~Math.max(0, cx - 0.5 * w);
131-
let y = ~~Math.max(0, cy - 0.5 * h);
132-
const dy = 15;
151+
const w = this.width;
152+
const h = this.height;
153+
const x = this.x ?? ~~Math.max(0, cx - 0.5 * w);
154+
let y = this.y ?? ~~Math.max(0, cy - 0.5 * h);
155+
const dy = this.lineHeight;
133156
const sx = 1 / scale.displayScale.x;
134157
const sy = 1 / scale.displayScale.y;
135158

136-
c.strokeStyle = 'white';
159+
c.save();
160+
161+
c.strokeStyle = this.color;
137162
c.beginPath();
138163
c.moveTo(0, 0);
139164
c.lineTo(scale.width, scale.height);
@@ -142,28 +167,50 @@ class DebugGameScalePlugin extends Phaser.Plugins.BasePlugin {
142167
c.moveTo(0, scale.height);
143168
c.lineTo(scale.width, 0);
144169
c.stroke();
145-
c.fillStyle = 'rgba(0,0,0,0.8)';
146-
c.fillRect(x, y, w, h);
147-
c.fillStyle = 'white';
148-
c.font = 'caption';
149170

150-
x += 8;
171+
strokeCircle(c, cx, cy, 0.5 * scale.width);
172+
strokeCircle(c, cx, cy, 0.5 * scale.height);
173+
174+
c.fillStyle = this.color;
175+
c.font = this.font;
176+
c.textBaseline = 'top';
177+
c.shadowBlur = this.shadowBlur;
178+
c.shadowOffsetX = this.shadowOffsetX;
179+
c.shadowOffsetY = this.shadowOffsetY;
180+
c.shadowColor = this.shadowColor;
151181

152-
c.fillText(`${scale.width}×${scale.height} @ ${xyToString(sx, sy, 3)} mode=${aspectModeToString(scale.scaleMode)} zoom=${scale.zoom}`, x, (y += dy));
182+
c.fillText(`${scale.width}×${scale.height} @ ${xyToString(sx, sy, 3)} mode=${aspectModeToString(scale.scaleMode)} zoom=${scale.zoom}`, x, y);
153183
c.fillText(`game: ${sizeToString(scale.gameSize)}`, x, (y += dy));
154184
c.fillText(`display: ${sizeToString(scale.displaySize)}`, x, (y += dy));
155-
c.fillText(`parent: ${sizeToString(scale.parentSize)} ${scale.parent}`, x, (y += dy));
185+
c.fillText(`parent: ${sizeToString(scale.parentSize)} ${scale.parent} isWindow=${scale.parentIsWindow}`, x, (y += dy));
156186
c.fillText(`canvas: ${rectToString(scale.canvasBounds)}`, x, (y += dy));
157187
c.fillText(`orientation: ${scale.orientation}`, x, (y += dy));
188+
158189
if (screen) {
159190
c.fillText(`screen: ${screen.width}×${screen.height} [${(screen.width / screen.height).toFixed(3)}] DPR=${devicePixelRatio}`, x, (y += dy));
160191
}
192+
161193
if (visualViewport) {
162194
const { offsetLeft, offsetTop, width, height, scale } = visualViewport;
163195

164-
c.fillText(`visualViewport: offsetLeft=${offsetLeft} offsetTop=${offsetTop} width=${width}, height=${height} scale=${scale}`, x, (y += dy));
196+
c.fillText(`viewport: oLeft=${offsetLeft} oTop=${offsetTop} width=${width}, height=${height} scale=${scale}`, x, (y += dy));
165197
}
198+
199+
if (activePointer.active) {
200+
const {x, y} = activePointer;
201+
202+
c.fillRect(x - 2, y - 2, 4, 4);
203+
c.fillText(vectorToString(activePointer, 3), x, y);
204+
}
205+
206+
c.restore();
166207
}
167208
}
168209

210+
function strokeCircle (c, x, y, r) {
211+
c.beginPath();
212+
c.arc(x, y, r, 0, 2 * Math.PI);
213+
c.stroke();
214+
}
215+
169216
export { DebugGameScalePlugin as default };

‎dist/phaser-plugin-debug-game-scale.umd.js‎

Lines changed: 61 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -81,12 +81,34 @@
8181
const { ENTER_FULLSCREEN, FULLSCREEN_FAILED, FULLSCREEN_UNSUPPORTED, LEAVE_FULLSCREEN, ORIENTATION_CHANGE, RESIZE } = Phaser.Scale.Events;
8282

8383
class DebugGameScalePlugin extends Phaser.Plugins.BasePlugin {
84+
constructor(pluginManager) {
85+
super(pluginManager);
86+
87+
this.x = null;
88+
this.y = null;
89+
this.width = 512;
90+
this.height = 128;
91+
this.font = '12px system-ui, sans-serif';
92+
this.lineHeight = 16;
93+
this.color = 'white';
94+
this.shadowBlur = 0;
95+
this.shadowOffsetX = 1;
96+
this.shadowOffsetY = 1;
97+
this.shadowColor = 'black';
98+
}
99+
84100
init (data) {
85101
if (!this.game.renderer.gameCanvas) {
86102
throw new Error('CANVAS renderer only')
87103
}
88104

89105
console.info('device.fullscreen.available', this.game.device.fullscreen.available);
106+
107+
for (const dataKey in data) {
108+
if (this.hasOwnProperty(dataKey)) {
109+
this[dataKey] = data[dataKey];
110+
}
111+
}
90112
}
91113

92114
start () {
@@ -129,17 +151,20 @@
129151
const { scale } = this.game;
130152
const { devicePixelRatio, screen, visualViewport } = window;
131153
const { gameContext: c } = this.game.renderer;
154+
const { activePointer } = this.game.input;
132155
const cx = 0.5 * scale.width;
133156
const cy = 0.5 * scale.height;
134-
const w = 512;
135-
const h = 128;
136-
let x = ~~Math.max(0, cx - 0.5 * w);
137-
let y = ~~Math.max(0, cy - 0.5 * h);
138-
const dy = 15;
157+
const w = this.width;
158+
const h = this.height;
159+
const x = this.x ?? ~~Math.max(0, cx - 0.5 * w);
160+
let y = this.y ?? ~~Math.max(0, cy - 0.5 * h);
161+
const dy = this.lineHeight;
139162
const sx = 1 / scale.displayScale.x;
140163
const sy = 1 / scale.displayScale.y;
141164

142-
c.strokeStyle = 'white';
165+
c.save();
166+
167+
c.strokeStyle = this.color;
143168
c.beginPath();
144169
c.moveTo(0, 0);
145170
c.lineTo(scale.width, scale.height);
@@ -148,30 +173,52 @@
148173
c.moveTo(0, scale.height);
149174
c.lineTo(scale.width, 0);
150175
c.stroke();
151-
c.fillStyle = 'rgba(0,0,0,0.8)';
152-
c.fillRect(x, y, w, h);
153-
c.fillStyle = 'white';
154-
c.font = 'caption';
155176

156-
x += 8;
177+
strokeCircle(c, cx, cy, 0.5 * scale.width);
178+
strokeCircle(c, cx, cy, 0.5 * scale.height);
179+
180+
c.fillStyle = this.color;
181+
c.font = this.font;
182+
c.textBaseline = 'top';
183+
c.shadowBlur = this.shadowBlur;
184+
c.shadowOffsetX = this.shadowOffsetX;
185+
c.shadowOffsetY = this.shadowOffsetY;
186+
c.shadowColor = this.shadowColor;
157187

158-
c.fillText(`${scale.width}×${scale.height} @ ${xyToString(sx, sy, 3)} mode=${aspectModeToString(scale.scaleMode)} zoom=${scale.zoom}`, x, (y += dy));
188+
c.fillText(`${scale.width}×${scale.height} @ ${xyToString(sx, sy, 3)} mode=${aspectModeToString(scale.scaleMode)} zoom=${scale.zoom}`, x, y);
159189
c.fillText(`game: ${sizeToString(scale.gameSize)}`, x, (y += dy));
160190
c.fillText(`display: ${sizeToString(scale.displaySize)}`, x, (y += dy));
161-
c.fillText(`parent: ${sizeToString(scale.parentSize)} ${scale.parent}`, x, (y += dy));
191+
c.fillText(`parent: ${sizeToString(scale.parentSize)} ${scale.parent} isWindow=${scale.parentIsWindow}`, x, (y += dy));
162192
c.fillText(`canvas: ${rectToString(scale.canvasBounds)}`, x, (y += dy));
163193
c.fillText(`orientation: ${scale.orientation}`, x, (y += dy));
194+
164195
if (screen) {
165196
c.fillText(`screen: ${screen.width}×${screen.height} [${(screen.width / screen.height).toFixed(3)}] DPR=${devicePixelRatio}`, x, (y += dy));
166197
}
198+
167199
if (visualViewport) {
168200
const { offsetLeft, offsetTop, width, height, scale } = visualViewport;
169201

170-
c.fillText(`visualViewport: offsetLeft=${offsetLeft} offsetTop=${offsetTop} width=${width}, height=${height} scale=${scale}`, x, (y += dy));
202+
c.fillText(`viewport: oLeft=${offsetLeft} oTop=${offsetTop} width=${width}, height=${height} scale=${scale}`, x, (y += dy));
171203
}
204+
205+
if (activePointer.active) {
206+
const {x, y} = activePointer;
207+
208+
c.fillRect(x - 2, y - 2, 4, 4);
209+
c.fillText(vectorToString(activePointer, 3), x, y);
210+
}
211+
212+
c.restore();
172213
}
173214
}
174215

216+
function strokeCircle (c, x, y, r) {
217+
c.beginPath();
218+
c.arc(x, y, r, 0, 2 * Math.PI);
219+
c.stroke();
220+
}
221+
175222
return DebugGameScalePlugin;
176223

177224
}));

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "phaser-plugin-debug-game-scale",
33
"description": "Shows Phaser 3 Scale Manager state",
4-
"version": "4.0.0",
4+
"version": "4.1.0",
55
"main": "dist/phaser-plugin-debug-game-scale.umd.js",
66
"module": "dist/phaser-plugin-debug-game-scale.esm.js",
77
"browser": "dist/phaser-plugin-debug-game-scale.umd.js",

0 commit comments

Comments
 (0)