To handle animations of different sizes in the Spine Web Player, you can use the viewport configuration to specify different viewports for each animation. This way, the player will automatically adjust the viewport size when switching between animations, ensuring that each animation is displayed correctly without resizing issues.

Here's how you can modify your SpinePlayer component to include viewport configurations for each animation:

<template>
  <div ref="spineContainer" class="spine"></div>
</template>

<script setup lang="ts">
import {
  SpinePlayer,
  type SpinePlayerConfig,
} from '@esotericsoftware/spine-player'

interface Props {
  jsonPath: string
  atlasPath: string
  animations: string[]
}

const props = defineProps<Props>()
const emit = defineEmits(['complete'])
const spineContainer = ref<HTMLElement | null>(null)
let player: SpinePlayer | null = null

onMounted(() => {
  if (!spineContainer.value) return
  const config: SpinePlayerConfig = {
    jsonUrl: props.jsonPath,
    atlasUrl: props.atlasPath,
    animations: props.animations,
    alpha: true,
    backgroundColor: '#00000000',
    preserveDrawingBuffer: false,
    showControls: false,
    viewport: {
      animations: {
        move: {
          width: 295,
          height: 222,
        },
        idle: {
          width: 127,
          height: 185,
        },
      },
    },
    success: (player) => {
      player.animationState?.setEmptyAnimation(0, 0)
      player.animationState?.addListener({
        complete: function (entry) {
          emit('complete', entry)
        },
      })
    },
  }

  player = new SpinePlayer(spineContainer.value, config)

  return () => {
    player?.dispose()
  }
})

function playAnimation(animationName, loop) {
  if (player) {
    player.animationState?.clearTracks()
    player.setAnimation(animationName, loop)
    player.play()
  }
}

defineExpose({
  playAnimation,
})
</script>

In your Vue page, you can then call the playAnimation function to switch between animations:

<Role
  ref="role"
  json-path="./spine/role.json"
  atlas-path="./spine/role.atlas"
  :animations="[]"
  @complete="OnRoleComplete"
/>

<script setup lang="ts">
import { ref } from 'vue'
import Role from './SpinePlayerComponent.vue'

const role = ref(null)

function OnRoleComplete(entry) {
  if (entry.animation.name === 'move') {
    role.value.playAnimation('idle', false)
  }
}

function rolePlay(animation) {
  role.value.playAnimation(animation, false)
}

rolePlay('move')
</script>

By specifying the viewport sizes for each animation in the SpinePlayer configuration, the player will automatically adjust the viewport when switching between animations, ensuring that each animation is displayed correctly without resizing issues.

zangbianxuegu

Hello
I'm not sure I've fully understood your question. Be aware that you can write using you own langauge because on the bottom right of each message a translate button will quickly translate the message.

As Nate indicated to you in this post 3 days ago, to control the player viewport, you can use the viewport configuration as explained in here.

As far as I understood, you are asking in the following paragraph:

However, the problem is that when rolePlay('idle') is started after the move is finished, because need set size first, the move will be displayed on the idle size canvas (that is, 127*185) first, and then play the idle animation, there will be a process of role reduction and then enlargement. How can I show the idle animation directly after the move animation?

If you can show the animation right after without any viewport transition. If that is the question, you can supply the following config to the player

viewport: { transitionTime: 0 },

As the documentation explains:

When the player switches between animations, it interpolates the viewports of the old and new animation for 0.2 seconds. This viewport transition time can be set via the transitionTime property.

Regarding the other two questions:

Is it right to change containers to meet this requirement?

You should change the container size. The player calculates the viewport size to contain each animation. If you want to change the viewport size, just pass the desired global viewport size or the viewport size for each specific animation, as the documentation shows.
As Nate mentioned, you could also call directly the setViewport method on the player.

How do I switch between two different sized animations?

You just call the player.setAnimation as you already do.

If this does not answer your questions, please try to exaplin better your problem ️

zangbianxuegu

If the canvas changes size, the player will invoke a resize of the webgl viewport that can cause the flashing effect you mentioned.

I just tried without resizing the container and I don't see an flashing effect.

Why do you change the container size? Please, try without changing the container size. That should solve your problem.

zangbianxuegu

If you want a fixed viewport, don't set a viewport for each animation, but set a global viewport as explained in the documentation:

zangbianxuegu

The viewport coordinates and dimensions work as in the Spine editor.

The bottom left corner of the viewport (the green rectangle) corresponds to the x, y coordinates you specify.
In this case, since you specified the viewport being in x: 0, y:0, the bottom left coordinate of the viewport is centered with the world origin. In spineboy skeleton, the world origin and the root bone are in the same coordinates, so the root bone is centered with the bottom left corner of the viewport.

Then, you specify width: 200, height: 300 and as you can see we have a rectangle with a proportion of 2/3.
10% define the red rectangle that is 10% bigger.

Once the viewport is defined, the spine player fit it horizontally or vertically in canvas. In the center of your canvas you have the coordinate (100;150) of the world origin.

The piece of code you provided above set a fixed global viewport. If you change animation, no shrink/enlargment occurs. That happens only if no global view is provided, or specific animation viewports are provided.

Even if you do not have the editor, once you know where the world origin is, than is super easy to set the desired viewport. You know that the bottom-left corner is the x,y coordinate you provide. Just proceed by incremental steps:

• Set x,y to 0,0, width/height to a reasonable size, and paddings to 0%. See where the bottom left coordinate of the rectangle that represent the viewport is placed.
• Increase the width by a certain amount. You will see the the bottom-left coordinate remain in the same place, but the rectangle is larger.
• If you want to move the rectangle, focus on the bottom-left corder. For example, move it a little left by subtracting a certain amount to the x coordinate.

Iterate over the coordinates and width/height until you find the viewport with your desired size. That will be kept consistent across all animation.

zangbianxuegu Unfortunately, Davide is currently on vacation so it will take some time for him to respond.

By the way, the code you showed us is too long and probably even contains lines that are not directly related to the problem you are experiencing, so we would appreciate it if you could show us the code with a minimum of content. Instead, if you have no problem sharing the full code, it would be faster for us to check if you could email us a minimal project file that can reproduce the problem: contact@esotericsoftware.com
Please include the URL of this forum thread in the email so we know the context. Then we can take a look at what's wrong.

zangbianxuegu Thanks for submitting your project file! I understand your problem. You want to do something like root movement. I'm sure there will be advice from another staff member later on how to achieve this, but I just want to say that the project you sent me did not match the version of the runtime with the version of the skeleton data, so I would recommend fixing that. (The project you sent us was using spine-pixi 4.2 for the runtime, but the skeleton data was exported from 4.1.16.)

The major and minor version for the Spine editor used to export JSON or binary data must always match the Spine Runtimes version. Somehow it seems to have worked this time, but there may be problems in the future, so please upgrade your editor version and export the skeleton data again.

zangbianxuegu Sorry for the mistake, indeed what you are using is spine-player!

Note that only major and minor versions need to be matched with the editor version. There is no need to have matching patch versions, so you can use the latest 4.1 runtime by writing as follows

<script src="https://unpkg.com/@esotericsoftware/spine-player@4.1.*/dist/iife/spine-player.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@esotericsoftware/spine-player@4.1.*/dist/spine-player.css">

However, if you are already using the newer runtime, it is better to upgrade the editor version than to downgrade the runtime version. If you cannot use the Spine Editor yourself, ask the person who created the animation to upgrade the Editor version and re-export the skeleton for you.

zangbianxuegu Sorry for the confusion, but the display problem itself has nothing to do with version mismatch. I'm sure another staff member can answer you about that, so please wait a while for a more detailed answer!