To fit the Spine canvas exactly in your parent container while maintaining aspect ratio, you need to configure the viewport in your SpinePlayer configuration.
Based on your requirements (360 × 640px container, no clipping/cropping, maintain aspect ratio), here's the recommended approach:
new spine.SpinePlayer("player-container", {
skeleton: "path/to/skeleton.json",
atlas: "path/to/atlas.atlas",
viewport: {
// Let the player automatically calculate bounds for the animation
// This ensures the entire skeleton is visible
padLeft: "0%",
padRight: "0%",
padTop: "0%",
padBottom: "0%"
},
// Additional configuration as needed
});
How it works:
The SpinePlayer automatically fits the skeleton animation within the container element. When an animation is set, it calculates the bounding box and embeds the viewport in the available space while retaining the viewport's aspect ratio.
By setting all padding values to "0%", you remove the default 10% padding on each side, allowing the skeleton to fill the container as much as possible while still maintaining its aspect ratio.
Key points:
- The player will automatically scale the skeleton to fit within your 360 × 640px container
- The aspect ratio is always preserved - the skeleton won't be distorted
- The entire skeleton will be visible (no clipping/cropping)
- There may be empty space on either the sides or top/bottom depending on the skeleton's aspect ratio vs your container's aspect ratio
If you need more control over specific animations, you can also define animation-specific viewports:
viewport: {
padLeft: "0%",
padRight: "0%",
padTop: "0%",
padBottom: "0%",
animations: {
"walk": {
padTop: "5%" // Custom padding for specific animation
}
}
}
This gives you the exact behavior you're looking for - the skeleton fits perfectly in your parent container with maintained aspect ratio and no cropping.
