Skip to content

Commit 80314b6

Browse files
committed
Hello
0 parents  commit 80314b6

31 files changed

+3908
-0
lines changed

.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.DS_Store
2+
node_modules
3+
public

.hintrc

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"extends": ["development"],
3+
"hints": {
4+
"meta-viewport": "off"
5+
}
6+
}

README.md

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
![Preview](preview.png)
2+
3+
Phaser Display List Watcher Plugin
4+
==================================
5+
6+
Shows the scene display lists.
7+
8+
Display
9+
-------
10+
11+
± type name (x, y) depth (children)
12+
13+
`+` is visible; `-` is invisible.
14+
15+
`x`, `y`, and `depth` are rounded to the nearest 0.1.
16+
17+
Keyboard Controls
18+
-----------------
19+
20+
| Key Combination | Action |
21+
|------------------------------------------|-------------------------|
22+
| <kbd>shift</kbd> + <kbd>left</kbd>, <kbd>right</kbd>, <kbd>up</kbd>, <kbd>down</kbd> | Scroll the display |
23+
| <kbd>shift</kbd> + <kbd>Z</kbd> | Toggle display on/off |
24+
| <kbd>shift</kbd> + <kbd>X</kbd> | Show display |
25+
| <kbd>shift</kbd> + <kbd>C</kbd> | Hide display |
26+
| <kbd>shift</kbd> + <kbd>V</kbd> | Reset scroll |
27+
28+
Multiple Scenes
29+
---------------
30+
31+
Scene displays are stacked left to right. Use the keyboard controls to scroll.
32+
33+
The plugin doesn't render in hidden scenes. If you have stopped scenes that you never need to use again, you could remove them to make space.
34+
35+
The plugin renders with the scene it belongs to, so content in scenes on top may cover content in scenes below.
36+
37+
Install
38+
-------
39+
40+
### Quick Load
41+
42+
- [Quick load example](https://phaser.io/sandbox/W8VM9ZYG)
43+
44+
```js
45+
// In preload():
46+
this.load.scenePlugin('DisplayListWatcher', 'https://cdn.jsdelivr.net/npm/[email protected]')
47+
```
48+
49+
### Module
50+
51+
```js
52+
import DisplayListWatcher from 'phaser-plugin-display-list-watcher'
53+
54+
new Phaser.Game({
55+
plugins: {
56+
scene: [
57+
{
58+
key: 'DisplayListWatcher',
59+
plugin: DisplayListWatcher,
60+
start: true
61+
}
62+
]
63+
}
64+
})
65+
```
66+
67+
### UMD / script tag
68+
69+
- [Script tag example](https://codepen.io/samme/pen/EaYmBwp)
70+
71+
```html
72+
<!-- after phaser.js -->
73+
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
74+
```
75+
76+
```js
77+
/* global DisplayListWatcher */
78+
79+
new Phaser.Game({
80+
plugins: {
81+
scene: [
82+
{
83+
key: 'DisplayListWatcher',
84+
plugin: DisplayListWatcher,
85+
start: true
86+
}
87+
]
88+
}
89+
})
90+
```

biome.json

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
3+
"vcs": {
4+
"enabled": false,
5+
"clientKind": "git",
6+
"useIgnoreFile": false
7+
},
8+
"files": {
9+
"ignoreUnknown": false,
10+
"ignore": []
11+
},
12+
"formatter": {
13+
"enabled": true,
14+
"indentStyle": "space",
15+
"indentWidth": 2
16+
},
17+
"organizeImports": {
18+
"enabled": true
19+
},
20+
"linter": {
21+
"enabled": true,
22+
"rules": {
23+
"recommended": true,
24+
"correctness": {
25+
"noUndeclaredVariables": "error"
26+
},
27+
"style": {
28+
"noParameterAssign": "off"
29+
}
30+
}
31+
},
32+
"javascript": {
33+
"formatter": {
34+
"quoteStyle": "single",
35+
"semicolons": "asNeeded",
36+
"trailingCommas": "none"
37+
}
38+
}
39+
}

dist/display-list-watcher.es.js

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
import Phaser from "phaser";
2+
const proggyCleanInv = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQ4AAABKCAMAAAB90UpZAAABEVBMVEUAAADUUP1/f398e3x+fn58fHx8fH3///97e3t6e3t5eXl3d3d2dXV2dXZzc3NzdHNxcnFxcXFvb29sbGxtbW1qamprampoaGhmZWVlZmVjY2JjY2NgX2BgYGBeXV5dXl1aWlpYWFdYV1dVVFVUVFVSUVJSUlJPT05PTk9MTEtMTExISUlISUhGRkZGRkVDQ0NCQ0M/QD9AP0A9PD06OTo6Ojk2Njc2Nzc0NDQ0MzMwMDEwMDAuLi0tLS4rKysqKisnKCcnJyckJSQlJSUiIiIfHx8gHx8cHB0ZGRkaGhoXGBcXFxcUFRUVFRQTEhISEhMQEBAODg4ODQ4MCwsMDAwKCQoKCgoICAgGBgYGBQYFBATgX/oDAAADz0lEQVR4AeyVB1LEMAxFRRW9d+5/T8gfj/chNOuEXvRIpEiORfa72QdRFEVRbEx0Jx+zU8JkBbN8VVadf7McMpkzOlmGdCwzafJXZgfkaBOAjbkc6P8X5BhMEpg5s0Pmr8iR7R1BDjTCUcAp+R8piqIoNkGxkqPYepZjRfGJcpQcJUfJUXKUHCVHsb2NoNjZ7Y/uMnJ66JHLN9fbzGSQ60lnweaT/4BI3kXrjrd6TUTCOv2juxP46lns7Qc5eDcrZ92hzZzpfqdy4NLNKBSLcvhrOeh6HsXYeQEHB3LZ58XBTlwiB1KOPxlInESoyja3cGVqsADrLJXj8DDIMRGKYs3wY0Q6aZbLYe65HKhgno4OA84K/iKby9GxNaCDj2aHe7ZYsHgpcDNBW0Sc7zTs6mtWSpbM59GQk1PW84EcSI4XSy7HmtnsmRxh90FxgCTkEMvkODtP5fiQrVQWI+toG2+ljPJXCJPOR0ZjLi6CHBPpQYuiyUErG6pEOWRYhfKzAKNcDgx9j7qzVQujOVxe2Tfi9sO4vkFQ3N4iKO7uERQPj6PVzAx3JY8PL06ZJ/bMArl2GIaiHjyL+FBm7isz739HZYiuNB67gaIfhpToxJJ1Hb4mjr//KnCQ2VMZDZxbIcnIoj9F7f/YN8Ch9VfwU9jGx20g4MgSbaO5pIK4OeDbPQMrSU+kjpBE66hsVxptcExMWsbkABMW41qkywJZm7hSNSkONRTqeysBMVQoxzE1bUxan/RWlOAgleKwHFAcykLrUo1iX94DtThmZkMBhr/hZTioxWFcEhyqaNXzGEcbzTI3LziGDhb1SbwzihaDKsCBN1SHY2FRgiWTShM+rGJF63HECVlM+n0C/EatSUGEWTImy9rScmcDItWH8umU38pqNxcEpG+AY229bv+M6wPhoE8BsLHZWPhto5Gt+9FspDPcnfdv9H+ZEKCXkNna1nPTXJBF3h3JqAtYxhAJYnyUxDi6YrOz2xYHBcGsLujUui8cCHsOfePY2y/AYZYkrIhR4XEAQIjjyRweR1XIaaMe1cFhPQ7RsBj37I4A7oY2FuRJmz5b9Q/Ie8ZxdOzmryCLAyT5inqXmjEX7sQ4VL5KzdlnKXJy2q53GKEV9w5ZcNnDuJyIZdpAOM7OW+aOlIgvvaRzqF2Po66hP7WoLi5bjiwApReJrETNmHm0+t7RHsfVVf91B4ovS5AWIUDbALq+aVGV9t4YmEa6az++CQCGgQAGht2nd1f+QLwKhG67CETzgmjdEO0HovNCdN+InhfR9yNKGVEpiGpD1PskGtJlPAcJ+yNWAAAAAElFTkSuQmCC";
3+
const textureKey = "proggy_clean_inv";
4+
const GetObjectDescription = (obj, depth) => {
5+
const { type } = obj;
6+
let output;
7+
let count = null;
8+
if (type === "Blitter") {
9+
count = obj.children.list.length;
10+
} else if (type === "ParticleEmitter") {
11+
count = obj.getParticleCount();
12+
} else if (obj.list) {
13+
count = obj.list.length;
14+
}
15+
const countStr = count === null ? "" : `(${count})`;
16+
if (type === "DisplayList") {
17+
output = `${obj.type} ${obj.name} ${countStr}`;
18+
} else {
19+
const posStr = `(${obj.x.toFixed(1)}, ${obj.y.toFixed(1)})`;
20+
const visible = obj.visible ? "+" : "-";
21+
const indent = " ".repeat(2 * depth);
22+
output = `${indent}${visible} ${obj.type} ${obj.name} ${posStr} ${obj.depth} ${countStr}`;
23+
}
24+
return output;
25+
};
26+
const WalkDisplayListObj = (obj, output = [], depth = 0) => {
27+
output.push(GetObjectDescription(obj, depth));
28+
if (obj.list) {
29+
depth += 1;
30+
for (const child of obj.list) {
31+
WalkDisplayListObj(child, output, depth);
32+
}
33+
}
34+
return output;
35+
};
36+
class DisplayListWatcher extends Phaser.Plugins.ScenePlugin {
37+
boot() {
38+
this.systems.textures.addBase64(textureKey, proggyCleanInv);
39+
if (this.systems.settings.key === "__SYSTEM") {
40+
return;
41+
}
42+
const events = this.systems.events;
43+
events.on("start", this.start, this);
44+
events.on("shutdown", this.stop, this);
45+
events.on("update", this.update, this);
46+
events.on("render", this.render, this);
47+
events.on("destroy", this.destroy, this);
48+
}
49+
start() {
50+
const { keyboard } = this.systems.input;
51+
const { width, height } = this.systems.scale;
52+
this.camera = new Phaser.Cameras.Scene2D.Camera(
53+
0,
54+
0,
55+
width,
56+
height
57+
).setBounds(0, 0, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY);
58+
this.controls = new Phaser.Cameras.Controls.FixedKeyControl({
59+
camera: this.camera,
60+
up: keyboard.addKey("UP"),
61+
down: keyboard.addKey("DOWN"),
62+
left: keyboard.addKey("LEFT"),
63+
right: keyboard.addKey("RIGHT"),
64+
speed: 1
65+
});
66+
this.shiftKey = keyboard.addKey("SHIFT");
67+
this.zKey = keyboard.addKey("Z");
68+
this.xKey = keyboard.addKey("X");
69+
this.cKey = keyboard.addKey("C");
70+
this.vKey = keyboard.addKey("V");
71+
this.zKey.on("down", (key, event) => {
72+
if (event.shiftKey) {
73+
this.toggle();
74+
}
75+
});
76+
this.xKey.on("down", (key, event) => {
77+
if (event.shiftKey) {
78+
this.show();
79+
}
80+
});
81+
this.cKey.on("down", (key, event) => {
82+
if (event.shiftKey) {
83+
this.hide();
84+
}
85+
});
86+
this.vKey.on("down", (key, event) => {
87+
if (event.shiftKey) {
88+
this.resetCamera();
89+
}
90+
});
91+
this.text = this.systems.make.bitmapText({ font: "__FONT" }, false);
92+
this.renderText = this.systems.renderer.type === Phaser.WEBGL ? this.text.renderWebGL : this.text.renderCanvas;
93+
}
94+
stop() {
95+
if (this.text) {
96+
this.text.destroy();
97+
this.text = null;
98+
}
99+
}
100+
update(time, delta) {
101+
if (this.shiftKey.isDown) {
102+
this.controls.update(delta);
103+
}
104+
}
105+
render() {
106+
if (!this.text.visible) {
107+
return;
108+
}
109+
const maxLines = 100;
110+
const { displayList, renderer, scenePlugin, settings } = this.systems;
111+
const x = 256 * scenePlugin.getIndex(this.scene);
112+
const y = 0;
113+
const output = WalkDisplayListObj(
114+
{
115+
name: settings.key,
116+
type: "DisplayList",
117+
list: displayList.list
118+
},
119+
[],
120+
0
121+
);
122+
const fullLength = output.length;
123+
if (fullLength > maxLines) {
124+
output.length = maxLines;
125+
output.push(`[ ... ${fullLength - maxLines} more ]`);
126+
}
127+
this.text.setPosition(x, y).setText(output);
128+
this.camera.preRender();
129+
this.renderText(renderer, this.text, this.camera);
130+
}
131+
sceneDestroy() {
132+
this.stop();
133+
}
134+
hide() {
135+
this.text.visible = false;
136+
}
137+
show() {
138+
this.text.visible = true;
139+
}
140+
toggle() {
141+
this.text.visible = !this.text.visible;
142+
}
143+
resetCamera() {
144+
this.camera.setScroll(0, 0);
145+
}
146+
}
147+
export {
148+
DisplayListWatcher as default
149+
};

0 commit comments

Comments
 (0)