• Runtimes

  • Spine TS Custom Skin

    inglese
Related Discussions
...

Hi,
In the example dress-up, how can I save custom skin as JSON using WebGL?
Or what is the best solution to add selected skins in the existing JSON file programmatically without using Spine Editor?

  • Mario

  • Messaggio #3
  • Questo post è in inglese

The skeleton JSON format has nothing to do with WebGL. Modifying the input .json file and adding a new skin based on a programmatically created skin is possibly not the most straight forward thing to do. I'd instead advise to just store the list of skins the custom skin is made up of along side the .json file.

I also want to export user custom skin to .gif file and the skin totally depend on user needs. How can I achieve this? I thought we need a modified json file to export the gif image

  • Mario

  • Messaggio #5
  • Questo post è in inglese

You can do so in the browser, see for some pointers. Export to GIF

Thanks for your reply. The gif.js or any canvas-capture lib need animation duration. May I know how can I get or calculate the duration of each animation in the JSON file?
Edit: I knew how to get the animation duration.
FYI, the capture canvas seems not the best solution to render GIF in the browser because it depends on the time you start and stop the record, and it may not be from the start of the animation cycle. As a result, the exported GIF is not the same for each render. Sometimes there is a blink in the image; some don't.
I am still looking for the solution to use Spine cmd to export GIF animation from the file on the modified JSON file

  • Mario

  • Messaggio #7
  • Questo post è in inglese

But you are in full control of the frames you render to the GIF? You can clear all tracks in the animation statez queue the animation(s) you want to render, then render x frames untilmyou've reached the animation duration. I strongly suggest not rendering from the command line in a server setting.

The problem is canvas with intensive drawImage causes huge memory to bleed in Chrome. I use example dress-up with gif.js to render 1-second animation to GIF. The framerate is 60. The result image size is only 1.55 MB. I tested with different screen mode

  • Full-screen mode: Chrome used around ~ 500MB
  • Mobile device dev tools: 4.5GB :rofl: => if I render 2+ times, the browser will be crashed because of out of memory
  • Webview in the mobile phone (build version): same to dev tools
    So that's why I still prefer server-side render.

  • Mario

  • Messaggio #9
  • Questo post è in inglese

Dev tools capture data in the background including canvas contents. You can not profile memorynusage when dev tools are active.