Spine animation is trimming

ayush705

What could be the reason my spine animation is trimming in my specified div(black bordered). Ideally it should be adaptable as per the size of my container. I am using @esotericsoftware/spine-player run time in javascript.

Spinebot

The issue of your Spine animation being trimmed within the specified div could be related to the viewport configuration of the Spine Player. The player automatically calculates the viewport based on the current animation, which might not match the size of your container. To ensure the animation fits properly, you can customize the viewport settings in the player configuration. You can specify the viewport dimensions and padding to ensure the animation is fully visible within your container. If the automatic behavior doesn't meet your needs, you can define a global viewport or specific viewports for each animation to control how they are displayed.

ayush705

Spinebot How to know the exact viewport values x, y, width, height for my animation. I have access to Spine Editor can I know the values from there and how to adjust those values in my container. let's say i want a specific width and height of the animation in my div so how should I customise the viewport values>?

Misaki

ayush705 First, please note that basic information about the viewport is explained in the following section of the documentation:
https://esotericsoftware.com/spine-player#Viewports

The debugRender property is provided to visualize the viewport, so use it to check the current boundaries.

Also, the following thread may be helpful for you:
https://esotericsoftware.com/forum/d/25600-viewport-in-spine-player

ayush705

Also does the spine-player runtine give the actual viewport for my complete animation where it would not be trimmed rather than checking on spine editor?

Davide

When you specify an animation, the spine player should show your entire animation.
How are you configuring it, and what's the sequence of actions you want your skeleton does?

Also does the spine-player runtine give the actual viewport for my complete animation where it would not be trimmed rather than checking on spine editor?

There is a private object on the player named currentViewport that contains information about the calculated viewport. You can access it by using js. Be aware that its values are available once the bounds are calculated.

If you do not need the Player UI, you can also try our brand new spine-webcomponents. It allows to display your animation with just an HTML tag.

<spine-skeleton
   atlas="ATLAS_URL"
   skeleton="SKELETON_URL"
></spine-skeleton>

You can also specify a list of animations and it will guarantee to scale the skeleton correctly in order to show all of them within its container. See the Animation Bounds paragraph to learn more about that.

<spine-skeleton
   atlas="ATLAS_URL"
   skeleton="SKELETON_URL"
   animation-bounds="walk,jump"
></spine-skeleton>

ayush705

Davide Can spine-webcomponents be used in production apps ?

Davide

ayush705

Can spine-webcomponents be used in production apps ?

Yes, like all our runtimes.

The only notice is that it's brand new, so it's not battle tested like other runtimes. But if there are problems using it, you can just open a thread here, or an issue on our github if you find a bug. We'll be happy to assist you.

It uses spine-webgl like the spine-player.

ayush705

Davide This warning is on package.

Davide

ayush705

We will soon publish a blog post about the new runtime release and then remove the notice.