Unknown scaling issue in Web Player

digimbyte · 27 апр 2023

I am not a Spine animator, so I am unsure of the actual cause.
However, I did buy Spine Pro to try and fix any issues if its an export setting or otherwise.

view from editor:
Editor Preview: VIDEO

Web Preview: VIDEO

Player Code:

            animationPlayer = new spine.SpinePlayer("animation", {
                jsonUrl: "test/skeleton.json",
                atlasUrl: "test/Moon.atlas",
                showControls: false,
                alpha: true,
                backgroundColor: "#00000000", 
                animation: "Idle",
                defaultMix: 0,
                loop: false, 
                viewport: {
                    width: 300,
                    height: 500
                }
            });

CSS:

element.style {
    display: block;
    width: 100%;
    height: 100%;
}
canvas[Attributes Style] {
    aspect-ratio: auto 500 / 250;
}
canvas {
    overflow-clip-margin: content-box;
    overflow: clip;
}

Nate · 27 апр 2023

You forgot to describe the problem. Is it that the animation plays so small in the web player?

The player scales automatically based on the bounds of the skeleton throughout the animation. Your explosion is very large, so the player finds a very large maximal size and zooms out so it fits.

You can specify a viewport instead:
https://esotericsoftware.com/spine-player#Viewports
You'll want to set the x, y, width, and height values to a rectangle in the skeleton's world space that is the size you want the viewport. To determine that you can use Spine's ruler (ctrl+shift+R) or you can create a new bone and drag it around while looking at the world translation values.

You shouldn't need to buy Spine to debug this problem. Please email us for a refund if you really don't need your Spine license: contact@esotericsoftware.com

digimbyte · 27 апр 2023

what good is it to debug if I can't fix and export?
the animation preview appears to have a bounding canvas unless there is something missing
is there any information I can pass on to the animator or have someone else look at it?
This is after the original animator said they fixed the issue

Nate · 27 апр 2023

Sorry, I don't understand your post. I never mentioned debugging. I don't know what you mean by "bounding canvas". This is not an issue with the animation and not something the animator can fix. It is a problem with configuration of the player. You don't like the default automatic viewport, so you need to specify your own viewport.

I gave you the correct answer, so you can pass that on to the animator to have them specify the bounds. Your developer needs to adjust the bounds of the player. They could do so by finding reasonable bounds in Spine or by just trying out bounds until it looks like they want.