JS Library Showcase

aaa


const overlay = new spine.SpineCanvasOverlay();
overlay.addSkeleton(
    {
        atlasPath: "assets/spineboy-pma.atlas",
        skeletonPath: "assets/spineboy-pro.skel",
        animation: 'walk',
    },
    document.getElementById(`section1-element`),
);

Mode origin uses the HTML element top-left corner as origin for the skeleton.
You are responsible to scale the skeleton using this mode.
Move the origin by a percentage of the div width and height by using xAxis and yAxis respectively.


overlay.addSkeleton(
    {
        atlasPath: "assets/spineboy-pma.atlas",
        skeletonPath: "assets/spineboy-pro.skel",
        animation: 'run',
        scale: .25,
    },
    {
        element: document.getElementById(`section2-element`),
        mode: 'origin',
        xAxis: .5,
        yAxis: 1,
    },
);

Use offsetX and offsetY to move you skeleton left or right by the pixel amount you specify. This works for both mode origin and inside.


overlay.addSkeleton(
    {
        atlasPath: "assets/spineboy-pma.atlas",
        skeletonPath: "assets/spineboy-pro.skel",
        animation: 'run',
    },
    {
        element: document.getElementById(`section3-element`),
        mode: 'inside', // default
        offsetX: 100,
        offsetY: 50,
    },
);

You can easily access the Skeleton and the AnimationState of your character, and use them as if you were using spine-webgl.
If you change animation, you can ask to scale the skeleton based on the new animation.


// access the skeleton and the state asynchronously
const { skeleton, state } = await overlay.addSkeleton(
    {
        atlasPath: "assets/raptor-pma.atlas",
        skeletonPath: "assets/raptor-pro.skel",
        animation: 'walk',
    },
    document.getElementById(`section4-element`)
);

let isRoaring = false;
setInterval(() => {
    const newAnimation = isRoaring ? "walk" : "roar";
    state.setAnimation(0, newAnimation, true);
    overlay.recalculateBounds(skeleton); // scale the skeleton based on the new animation
    isRoaring = !isRoaring;
}, 4000);

You can also set a custom bounds to center a specific element or area of you animation in the div.

TODO

Moving the div will move the skeleton origin.
Resizing the div will resize the skeleton in inside mode, but not in origin mode.


overlay.addSkeleton(
    {
        atlasPath: "assets/cloud-pot-pma.atlas",
        skeletonPath: "assets/cloud-pot.skel",
        animation: 'playing-in-the-rain',
    },
    document.getElementById(`section6-element`)
);

You can view the skeleton world origin (green), the root bone position (red), and the bounds rectangle and center (blue) by setting debug to true.


overlay.addSkeleton(
    {
        atlasPath: "assets/owl-pma.atlas",
        skeletonPath: "assets/owl-pro.skel",
        animation: 'idle',
    },
    {
        element: document.getElementById(`section7-element`),
        debug: true,
    }
);

As a bonus item, you can move you skeleton around just by setting the draggable property to true.


overlay.addSkeleton(
    {
        atlasPath: "assets/celestial-circus-pma.atlas",
        skeletonPath: "assets/celestial-circus-pro.skel",
        animation: 'wings-and-feet',
    },
    {
        element: document.getElementById(`section8-element`),
        draggable: true,
    }
);