PixiJS Spine 动画中骨骼位置调整的正确方法

PixiJS Spine 动画中骨骼位置调整的正确方法

【免费下载链接】spine Pixi.js plugin that enables Spine support. 项目地址: https://gitcode.com/gh_mirrors/spine2/spine

在使用PixiJS结合Spine动画时，开发者经常会遇到需要动态调整骨骼位置的需求。本文将通过一个实际案例，详细介绍如何正确地在PixiJS-Spine中调整骨骼位置，特别是当动画存在缩放时需要注意的关键点。

问题背景

在开发一个基于PixiJS和Spine的动画项目时，开发者尝试让Spine角色(本例中的spineboy)的"crosshair"骨骼跟随鼠标移动，实现瞄准效果。初始代码看似逻辑正确，但实际运行时骨骼的瞄准位置出现了明显偏差。

核心问题分析

问题的根本原因在于动画缩放处理不当。原始代码中使用了PixiJS的常规缩放方式：

const scale = 2.5
spineboy.width = 470 / scale
spineboy.height = 731 / scale

这种方式虽然改变了显示大小，但没有正确处理Spine骨骼系统的内部坐标系转换。当直接修改骨骼位置时，缩放因子没有被考虑进去，导致位置计算错误。

正确解决方案

正确的做法是使用Spine骨骼系统自带的缩放属性，而不是PixiJS的显示对象缩放：

spineboy.skeleton.scaleX = 1 / 2.5
spineboy.skeleton.scaleY = 1 / 2.5

这种方式直接调整骨骼系统内部的缩放因子，确保所有骨骼变换计算都在正确的坐标系下进行。

完整实现代码

以下是修正后的完整实现代码，展示了如何正确设置Spine动画缩放并调整骨骼位置：

import "pixi-spine"
import {Application, Assets, Graphics} from "pixi.js"
import { Spine } from "pixi-spine"

const app = new Application<HTMLCanvasElement>({
  resizeTo: document.body,
  eventMode: "static"
})
document.body.appendChild(app.view)

// 资源加载
await Assets.load("spineboy-pro.atlas")
await Assets.load("spineboy-pro.png")
await Assets.load("spineboy-pro.json")

let spineboy: Spine

function createSpineboy() {
  const spineboyAsset = Assets.get("spineboy-pro.json")
  spineboy = new Spine(spineboyAsset.spineData)
  
  // 设置初始位置
  spineboy.x = 500
  spineboy.y = 500
  
  // 正确设置骨骼缩放
  const scale = 2.5
  spineboy.skeleton.scaleX = 1 / scale
  spineboy.skeleton.scaleY = 1 / scale
  
  app.stage.addChild(spineboy)
  spineboy.state.setAnimation(0, "aim", true)
}

// 鼠标移动处理
app.stage.addEventListener("globalpointermove", e => {
  const mousePos = { x: e.x, y: e.y }
  
  const root = spineboy.skeleton.findBone("root")
  const bone = spineboy.skeleton.findBone("crosshair")
  
  // 将全局坐标转换为骨骼局部坐标
  root.worldToLocal(mousePos)
  
  // 设置骨骼位置
  bone.x = mousePos.x
  bone.y = mousePos.y
})

createSpineboy()

关键知识点

1. Spine骨骼系统缩放：不同于常规显示对象的缩放，Spine骨骼系统有自己独立的缩放属性，直接影响骨骼变换计算。

2. 坐标系转换：使用worldToLocal方法将全局坐标转换为骨骼局部坐标时，缩放因子会影响转换结果。

3. 性能考虑：直接操作骨骼属性比创建新的动画状态更高效，适合需要频繁更新的交互场景。

实际应用建议

1. 对于需要动态调整骨骼位置的交互式动画，优先考虑直接修改骨骼属性而非创建新动画。

2. 当动画需要缩放时，统一使用Spine骨骼系统的缩放属性，避免混合使用不同层级的缩放。

3. 调试时可以添加辅助图形(如示例中的黄色矩形)帮助可视化坐标位置。

通过理解这些核心概念，开发者可以更自如地在PixiJS项目中实现复杂的Spine动画交互效果。

【免费下载链接】spine Pixi.js plugin that enables Spine support. 项目地址: https://gitcode.com/gh_mirrors/spine2/spine