UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-03-06 18:56:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

Made span fps display configurable.

Browse Source
This commit is contained in:
Davide Tantillo 2024-09-26 17:08:31 +02:00
parent a254fabaef
commit 27edd8a284
2 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
spine-ts/spine-webgl/example/webcomponent.html
View File

@ -1847,6 +1847,9 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
///////////////////// /////////////////////
--> -->
<script>
spine.SpineWebComponentWidget.SHOW_FPS = true;
</script>
<script> <script>

24
spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
View File

@ -152,7 +152,12 @@ interface WidgetInternalProperties {
debugDragDiv: HTMLDivElement debugDragDiv: HTMLDivElement
} }
class SpineWebComponentWidget extends HTMLElement implements WidgetAttributes, WidgetOverridableMethods, WidgetInternalProperties, Partial<WidgetPublicProperties> { export class SpineWebComponentWidget extends HTMLElement implements WidgetAttributes, WidgetOverridableMethods, WidgetInternalProperties, Partial<WidgetPublicProperties> {
/**
* If true, enables a top-left span showing FPS (it has black text)
*/
public static SHOW_FPS = false;
/** /**
* The URL of the skeleton atlas file (.atlas) * The URL of the skeleton atlas file (.atlas)
@ -833,6 +838,7 @@ class SpineWebComponentOverlay extends HTMLElement {
private div: HTMLDivElement; private div: HTMLDivElement;
private canvas:HTMLCanvasElement; private canvas:HTMLCanvasElement;
private fps: HTMLSpanElement; private fps: HTMLSpanElement;
private fpsAppended = false;
public skeletonList = new Array<SpineWebComponentWidget>(); public skeletonList = new Array<SpineWebComponentWidget>();
@ -886,7 +892,6 @@ class SpineWebComponentOverlay extends HTMLElement {
this.fps.style.position = "fixed"; this.fps.style.position = "fixed";
this.fps.style.top = "0"; this.fps.style.top = "0";
this.fps.style.left = "0"; this.fps.style.left = "0";
this.root.appendChild(this.fps);
const context = new ManagedWebGLRenderingContext(this.canvas, { alpha: true }); const context = new ManagedWebGLRenderingContext(this.canvas, { alpha: true });
this.renderer = new SceneRenderer(this.canvas, context); this.renderer = new SceneRenderer(this.canvas, context);
@ -950,7 +955,20 @@ class SpineWebComponentOverlay extends HTMLElement {
} }
} }
}); });
this.fps.innerText = this.time.framesPerSecond.toFixed(2) + " fps";
// fps top-left span
if (SpineWebComponentWidget.SHOW_FPS) {
if (!this.fpsAppended) {
this.root.appendChild(this.fps);
this.fpsAppended = true;
}
this.fps.innerText = this.time.framesPerSecond.toFixed(2) + " fps";
} else {
if (this.fpsAppended) {
this.root.removeChild(this.fps);
this.fpsAppended = false;
}
}
}; };
const clear = (r: number, g: number, b: number, a: number) => { const clear = (r: number, g: number, b: number, a: number) => {