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.
️
