Kashiro

Hello! I hope to be in the right part of the forums, and in advance, sorry for any english mistakes as it isn't my primary language.

I am developping a website for an upcoming game that uses spine animations for their characters.
The website have an entire page made for viewing these animations outside of the game and it's working nicely.

I would like to add buttons to my page, one to screenshot the current frame of the animation and save as a png, and the other one to save the entire current animation as a gif.

To put it simple, I cannot make it work. Despite the availability of the "right click> copy/save as" manages to download the current frame.

What I tried to do is mess with the canvas created by the spine-player, and use the .toDataUrl("image/png") function. It works, but it will only send me a data url of the first frame of the animation, no matter when I launch the function. This first frame is a fully black square so it is unusuable.

To make the gif download, I'd first need to make the toDataUrl() work for png, but I just cannot make it happen.

If anyone have a solution to what I'd like to realise, I'd be very grateful.

The weirdest part is once again, that I can save my current frame through a right click, but can't using a javascript function to send me a Data Url of that frame.
User avatar
Kashiro
  • Posts: 3

Nate

You need to apply an animation at a time > 0, update the skeleton world transforms, and render that.

For testing, don't use an animation where the first frame is black because then you can't tell the difference between a blank image and the actual first frame. If you misconfigure your rendering so it renders outside your buffer, you'll get a blank image.

Note we have an example that shows thumbnail generation for individual skins, which sounds similar to what you want:
https://github.com/EsotericSoftware/spine-runtimes/blob/4.0/spine-ts/spine-webgl/example/dress-up.html
User avatar
Nate

Nate
  • Posts: 11943

Kashiro

The black first frame is actually comming from the spine web player itself. It briefly appears before starting to load the current animation, so testing with another animation won't help much. I should've explained better but the data url is sending me the first frame of the canvas and not the first one of the animation.

I will look into this example later during the day, thank you.
User avatar
Kashiro
  • Posts: 3

Mario

Note that toDataURL() on a Canvas will only work if you set preserveDrawingBuffer to true when configuring the WebGL context. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext.
User avatar
Mario

Mario
  • Posts: 3089

Mario

Actually, SpinePlayer didn't allow to specify that setting, so I've just added it to SpinePlayerConfig in the 4.0, 4.1-beta, and 4.2-beta branches. I've also published new packages to NPM.

You can find a trivial example here:
https://github.com/EsotericSoftware/spine-runtimes/blob/4.0/spine-ts/spine-player/example/example.html#L55

This sets the preserveDrawingBuffer config flag to true. That way, you can simply grab the canvas contents via getDataURL() as illustrated here:
https://github.com/EsotericSoftware/spine-runtimes/blob/4.0/spine-ts/spine-player/example/example.html#L73
User avatar
Mario

Mario
  • Posts: 3089

Kashiro

The cdn I am using got updated automatically, and after seeing your example Mario, the screenshot now works perfectly as wanted!

Thank you very much.
User avatar
Kashiro
  • Posts: 3


Return to Runtimes