このサイトを正しく表示するには、最新のブラウザを使用し、Javascriptを有効化してください。

Use few animations from one JSON on the web-page CANVAS

Antonovanimation

Hello Houston we have a problem. And need advice.
On this page we intend to post a few animations from Spine + HTML5 Canvas method

How we can do it?
Can we use additional

canvas = document.getElementById("canvas");

from

function init ()

For example

canvas = document.getElementById("canvas");
canvas = document.getElementById("canvas_2");

Or maybe we must have different Skeleton for each animation? And add to var section

var skelName = "Skel_1";
var animName = "Anim_1";
var skelName = "Skel_2";
var animName = "Anim_2";

Mario

Don't use a separate canvas per skeleton. Instead, render your entire scene and all skeletons to a single big canvas. You can check out our example for spine-ts Canvas here to see how to load and render a single skeleton: spine-runtimes/index.html at 3.7

Antonovanimation

Thank you Bad, but compose all animation in one timline need a lot of time. I mean additional work to synchronization all local animations for good loop in one timeline

For the future. Probably the solution will be to use pixi-spine (http://www.pixijs.com/). Quick library with good perfomance

Mario

There's no need to compose all animations into a single timeline. You can render multiple animations to the same canvas, in different locations, at different scales. As you said, PixiJS might be a good solution for your use case, as it covers a lot of the mundane plumbing needed when working with Canvas or WebGL.