- Изменено
(Spine Web Player) download current frame/whole animation
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.
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
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.
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.
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
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.