UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-21 01:36:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts][player] Add support for preserving drawing buffer contents, updated example accordingly to show screenshotting.

Browse Source
This commit is contained in:
Mario Zechner 2022-05-25 12:26:04 +02:00
parent 6fc6e090ae
commit d12d59b593
2 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
spine-ts/spine-player/example/example.html
View File

@ -22,7 +22,9 @@
<button id="walk">Walk</button> <button id="walk">Walk</button>
<button id="jump">Jump</button> <button id="jump">Jump</button>
<button id="roar">Roar</button> <button id="roar">Roar</button>
<button id="screenshot">Screenshot</button>
</div> </div>
<img id="screenshot-image" src="" style="width: 400px;">
</body> </body>
<script> <script>
// Creates a new spine player. The debugRender option enables // Creates a new spine player. The debugRender option enables
@ -50,6 +52,7 @@
premultipliedAlpha: true, premultipliedAlpha: true,
backgroundColor: "#00000000", backgroundColor: "#00000000",
alpha: true, alpha: true,
preserveDrawingBuffer: true,
defaultMix: 1, defaultMix: 1,
controlBones: ["root"], controlBones: ["root"],
success: (player) => { success: (player) => {
@ -66,6 +69,9 @@
document.getElementById("roar").addEventListener("click", event => { document.getElementById("roar").addEventListener("click", event => {
jsControlledPlayer.setAnimation("roar", true); // set the jump animation to loop jsControlledPlayer.setAnimation("roar", true); // set the jump animation to loop
}); });
document.getElementById("screenshot").addEventListener("click", event => {
document.getElementById("screenshot-image").src = player.canvas.toDataURL();
});
} }
}); });
</script> </script>

6
spine-ts/spine-player/src/Player.ts
View File

@ -114,6 +114,9 @@ export interface SpinePlayerConfig {
backgroundColor alpha is < ff. Default: false */ backgroundColor alpha is < ff. Default: false */
alpha: boolean alpha: boolean
/* Optional: Whether to preserve the drawing buffer. This is needed if you want to take a screenshot via canvas.getDataURL(), Default: false */
preserveDrawingBuffer: boolean
/* Optional: The canvas background color, given in the format #rrggbb or #rrggbbaa. Default: #000000ff (black) or when /* Optional: The canvas background color, given in the format #rrggbb or #rrggbbaa. Default: #000000ff (black) or when
alpha is true #00000000 (transparent) */ alpha is true #00000000 (transparent) */
backgroundColor: string backgroundColor: string
@ -282,6 +285,7 @@ export class SpinePlayer implements Disposable {
if (!config.fullScreenBackgroundColor) config.fullScreenBackgroundColor = config.backgroundColor; if (!config.fullScreenBackgroundColor) config.fullScreenBackgroundColor = config.backgroundColor;
if (config.backgroundImage && !config.backgroundImage.url) config.backgroundImage = null; if (config.backgroundImage && !config.backgroundImage.url) config.backgroundImage = null;
if (config.premultipliedAlpha === void 0) config.premultipliedAlpha = true; if (config.premultipliedAlpha === void 0) config.premultipliedAlpha = true;
if (config.preserveDrawingBuffer === void 0) config.preserveDrawingBuffer = false;
if (config.mipmaps === void 0) config.mipmaps = true; if (config.mipmaps === void 0) config.mipmaps = true;
if (!config.debug) config.debug = {} as any; if (!config.debug) config.debug = {} as any;
if (config.animations && config.animation && config.animations.indexOf(config.animation) < 0) if (config.animations && config.animation && config.animations.indexOf(config.animation) < 0)
@ -309,7 +313,7 @@ export class SpinePlayer implements Disposable {
try { try {
// Setup the OpenGL context. // Setup the OpenGL context.
this.canvas = findWithClass(dom, "spine-player-canvas") as HTMLCanvasElement; this.canvas = findWithClass(dom, "spine-player-canvas") as HTMLCanvasElement;
this.context = new ManagedWebGLRenderingContext(this.canvas, { alpha: config.alpha }); this.context = new ManagedWebGLRenderingContext(this.canvas, { alpha: config.alpha, preserveDrawingBuffer: config.preserveDrawingBuffer });
// Setup the scene renderer and loading screen. // Setup the scene renderer and loading screen.
this.sceneRenderer = new SceneRenderer(this.canvas, this.context, true); this.sceneRenderer = new SceneRenderer(this.canvas, this.context, true);