To remove the scaling when switching animations in the Spine Web Player, you need to specify a fixed viewport size for your animations. This can be done by setting the viewport
property in the SpinePlayer configuration. Here is an example of how you can achieve this:
<script>
new spine.SpinePlayer("player-container", {
jsonUrl: "path/to/your/skeleton.json",
atlasUrl: "path/to/your/atlas.atlas",
animation: "yourAnimation",
viewport: {
x: -100, // Set the x position of the viewport
y: -100, // Set the y position of the viewport
width: 200, // Set the width of the viewport
height: 200 // Set the height of the viewport
},
debugRender: true // Optional: Show the viewport bounds for debugging
});
</script>
In this example, the viewport
property is used to set a fixed size for the viewport. Adjust the x
, y
, width
, and height
values to fit your specific needs. This will ensure that the viewport remains consistent across different animations, preventing any unwanted scaling.
For more details, you can refer to the Spine Web Player documentation on viewports.