• Runtimes
  • Remove screen scaling when switching animations in Spine Web Player.

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.

    Related Discussions
    ...

    Spinebot
    I've configured the viewport, but lost the auto-adaptability of the canvas! I need to maintain the same ratio at different resolutions.

    I've configured the viewport, but lost the auto-adaptability of the canvas! I need to maintain the same ratio at different resolutions.

    To maintain the same aspect ratio at different resolutions while ensuring your canvas adapts automatically, you need to configure your viewport correctly and adjust the canvas size dynamically. Here are the steps to achieve this:

    1. Configure the Viewport:
      Set the viewport dimensions to match your background or desired aspect ratio. For example:

         x: -bgWidth / 2,
         y: 0,
         width: bgWidth,
         height: bgHeight,

      Replace bgWidth and bgHeight with the actual width and height of your background.

    2. Adjust Canvas Size Dynamically:
      Ensure that both canvas.width and canvas.height as well as canvas.style.width and canvas.style.height are set to match the viewport dimensions. This ensures that the canvas scales correctly with the viewport.

    3. Maintain Aspect Ratio:
      Use CSS to maintain the aspect ratio of the canvas. You can use a CSS aspect ratio hack to ensure the canvas scales correctly:

         .canvas-container {
             position: relative;
             width: 100%;
             padding-top: 56.25%; /* 16:9 Aspect Ratio */
         }
         .canvas-container canvas {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
         }

      Adjust the padding-top value to match your desired aspect ratio.

    4. Handle Different Screen Sizes:
      Use JavaScript to dynamically adjust the canvas size based on the window size:

         function resizeCanvas() {
             const canvas = document.getElementById('yourCanvasId');
             const aspectRatio = bgWidth / bgHeight;
             const windowAspectRatio = window.innerWidth / window.innerHeight;
      
             if (windowAspectRatio > aspectRatio) {
                 canvas.style.width = `${window.innerHeight * aspectRatio}px`;
                 canvas.style.height = `${window.innerHeight}px`;
             } else {
                 canvas.style.width = `${window.innerWidth}px`;
                 canvas.style.height = `${window.innerWidth / aspectRatio}px`;
             }
         }
      
         window.addEventListener('resize', resizeCanvas);
         resizeCanvas(); // Initial call

    By following these steps, you can ensure that your canvas maintains the same aspect ratio across different resolutions and screen sizes.

      3 gönderi How to maintain the same ratio at different resolutions? tartışmasından birleştirildi.

      There is no need to create a new discussion. Doing that makes it hard for other users to follow. I have merged your other discussion into this one.

      The skeleton is still scaled to stay within the size of the player when a viewport is set. The aspect ratio of the skeleton is kept automatically. For example, this page uses Spine web players and the page works at any size:
      https://esotericsoftware.com/blog/Spine-4.2-The-physics-revolution

      The unobfuscated code for that page:
      https://esotericsoftware.com/files/blog/4.2-released/blog.js

      If you want the player DIV to keep a particular aspect ratio on your web page, then using CSS like Spinebot showed is best.