只是我想用独立项目 Cocos 的虚拟列表要付费没有 Vue的组建库多首页列表渲染我也擅长。。COCOS 的视频控制器没有播放暂停进度条还有音频播放器。然后 Cocos 的打包为外部 APP 视频不能全屏。但是如果用 Vue 写项目它又没有碰撞图层分层编辑器。一时拿不定主意到底用哪种计解决方案首页列表我主要是想做一款多人游戏联机就是刚才那个项目播放 spine 动画然后仿7850APP然后在地图、城市列表搭配短视频多功能就是游戏。加短视频相结合用户可以发布短视频。方案一Vue PIXI.js Tiled推荐优势✅ Vue 负责 UI首页列表、视频、音频完全掌控✅ PIXI.js 游戏渲染Spine 动画、碰撞、地图✅ Tiled 地图编辑器免费、图形化、多图层✅ Vue Tiled 可视化配置地图、碰撞、对象✅ 打包 APP 可用 Capacitor/Vite PWA适合2D 游戏、多图层地图、短视频社交方案二Vue Phaser Tiled优势✅ Phaser 内置碰撞系统、物理引擎✅ Phaser 有社区编辑器Phaser Editor✅ Tiled 地图编辑器✅ Vue 负责 UI 层适合需要复杂物理效果的游戏方案三Vue Cocos混合优势✅ Cocos 处理游戏部分场景、碰撞、物理✅ Vue 处理 UI 部分列表、视频、音频✅ Cocos WebView 嵌入 Vue 页面适合需要原生 APP 性能的游戏# Vue3 播放 Spine 3.8 动画实战指南## 前言最近在开发一个游戏项目需要在 Vue3 中播放 Spine 动画。在搜索了大量资料后发现网上的教程要么版本不对要么写法有问题。经过反复尝试终于成功跑通了特此记录。## 核心技术栈版本重要Vue 3.xSpine 动画版本3.8.75pixi-spinepixi-spine/all-3.84.0.6pixi.js7.4.3Vite5.xTypeScript5.x**版本匹配原则**Spine 编辑器导出的版本必须与运行时版本匹配。如果使用 Spine 3.8.75 导出的动画必须使用 3.8 版本的 pixi-spine 运行时。## 项目初始化bashnpm create vitelatest spine-game -- --template vue-tscd spine-gamenpm installnpm install pixi.js7.4.3 pixi-spine/all-3.84.0.6## 核心代码实现### SpineWebPlayer.vue 组件vuetemplatedivclassspine-container:stylecontainerStylerefcontainerRef/div/templatescript setup langtsimport { ref, onMounted, onUnmounted, watch, computed } from vueimport * as PIXI from pixi.jsimport { Spine } from pixi-spine/all-3.8// Props 定义const props defineProps{position: { x: number; y: number }direction: stringisMoving: boolean}()const containerRef refHTMLDivElement | null(null)let app: PIXI.Application | null nulllet spineAnimation: Spine | null nulllet animations: string[] []const containerStyle computed(() ({position: fixed as const,left: ${props.position.x}px,top: ${props.position.y}px,pointerEvents: none as const}))// 加载 Spine 动画const loadSpine async () {if (!containerRef.value) return// 创建 PIXI 应用app new PIXI.Application({width: 200,height: 250,backgroundAlpha: 0, // 透明背景antialias: true})containerRef.value.appendChild(app.view as unknown as Node)try {// 关键使用 PIXI.Assets.load 加载 JSONpixi-spine 自动处理 atlas 和 pngconst resources await PIXI.Assets.loadany(/spine/your-animation.json)// 获取可用动画列表if (resources.spineData?.animations) {animations resources.spineData.animations.map((a: any) a.name)console.log(Available animations:, animations)}// 创建 Spine 动画实例spineAnimation new Spine(resources.spineData)// 设置位置和缩放spineAnimation.x 100spineAnimation.y 250spineAnimation.scale.set(0.5)// 添加到舞台app.stage.addChild(spineAnimation)// 播放待机动画const idleAnim animations.includes(idle) ? idle : animations[0]spineAnimation.state.setAnimation(0, idleAnim, true)console.log(Spine loaded successfully!)} catch (error) {console.error(Failed to load Spine:, error)}}// 监听移动状态切换动画watch(() props.isMoving, (isMoving) {if (!spineAnimation) returnconst animName isMoving ? walk : idleif (animations.includes(animName)) {spineAnimation.state.setAnimation(0, animName, true)}})// 监听方向改变翻转watch(() props.direction, (direction) {if (!spineAnimation) returnspineAnimation.scale.x direction.includes(left) ? -0.5 : 0.5})onMounted(() {loadSpine()})onUnmounted(() {spineAnimation?.destroy()app?.destroy()})/scriptstyle scoped.spine-container {width: 200px;height: 250px;}/style## 资源文件放置将 Spine 导出的文件放到 public 目录下public/└── 冰晶魔法少女/├── m_searcy.json # 骨骼数据├── m_searcy.atlas # 纹理图集配置├── m_searcy.png # 纹理图集1└── m_searcy2.png # 纹理图集2如有## 关键要点总结### 1. 版本匹配是核心| Spine 编辑器版本 | pixi-spine 版本 | pixi.js 版本 ||-----------------|-----------------|--------------|| 3.8.x | pixi-spine/all-3.84.0.6 | 7.x || 4.x | pixi-spine/all-4.x | 7.x |### 2. 正确加载方式❌ **错误方式**typescript// 手动解析 atlas 和 jsonconst atlas new TextureAtlas(atlasText, textureLoader)const skeletonJson new SkeletonJson(attachmentLoader)✅ **正确方式**typescript// 使用 PIXI.Assets.load 一键加载const resources await PIXI.Assets.loadany(/path/to/animation.json)const spine new Spine(resources.spineData)### 3. 动画切换typescript// 切换到行走动画循环spine.state.setAnimation(0, walk, true)// 添加动画到队列spine.state.addAnimation(0, attack, false, 0)// 清空所有动画spine.state.setEmptyAnimation(0, 0)### 4. 方向控制typescript// 向左翻转spine.scale.x -Math.abs(spine.scale.x)// 向右spine.scale.x Math.abs(spine.scale.x)## 常见问题### Q1: 动画显示为空白或报错 Unsupported skeleton data**原因**Spine 版本与运行时版本不匹配**解决**确保使用 Spine 3.8.75 导出或安装对应的 4.x 版本 pixi-spine### Q2: 贴图显示不全**原因**atlas 引用的 png 文件未完整加载**解决**确保所有 .png 文件都在同一目录且文件名与 atlas 中一致### Q3: 动画切换时卡顿**解决**使用混合时间过渡typescriptspine.state.setAnimation(0, run, true)spine.state.addAnimation(0, walk, true, 0.3) // 0.3秒过渡## 完整项目结构spine-game/├── public/│ └── 冰晶魔法少女/│ ├── m_searcy.json│ ├── m_searcy.atlas│ └── *.png├── src/│ ├── components/│ │ ├── SpineWebPlayer.vue│ │ ├── GameScene.vue│ │ └── VirtualJoystick.vue│ ├── composables/│ │ └── useGameControls.ts│ ├── App.vue│ └── main.ts├── package.json└── vite.config.ts## 结语Vue3 播放 Spine 动画的关键在于**版本匹配 正确的加载方式**。建议使用官方推荐的 PIXI.Assets.load() 方法它会自动处理 JSON、atlas 和 PNG 的关联比手动解析更稳定可靠。如果你的项目使用其他框架如 React核心逻辑是相同的只需将 Vue 的生命周期替换为对应框架的写法即可。---**参考资料**- [在 Web 中使用 Spine 动画](https://juejin.cn/post/7402229249677508658)- [pixi-spine GitHub](https://github.com/pixijs-userland/spine)- [Spine Runtimes](https://zh.esotericsoftware.com/spine-runtimes) 只是我想用独立项目 Cocos 的虚拟列表要付费，没有 Vue的组建库多首页列表渲染我也擅长。。COCOS 的视频控制器没有播放暂停进度条，还有音频播放器。然后 Cocos 的打包为外部 APP 视频
只是我想用独立项目 Cocos 的虚拟列表要付费没有 Vue的组建库多首页列表渲染我也擅长。。COCOS 的视频控制器没有播放暂停进度条还有音频播放器。然后 Cocos 的打包为外部 APP 视频不能全屏。但是如果用 Vue 写项目它又没有碰撞图层分层编辑器。一时拿不定主意到底用哪种计解决方案首页列表我主要是想做一款多人游戏联机就是刚才那个项目播放 spine 动画然后仿7850APP然后在地图、城市列表搭配短视频多功能就是游戏。加短视频相结合用户可以发布短视频。方案一Vue PIXI.js Tiled推荐优势✅ Vue 负责 UI首页列表、视频、音频完全掌控✅ PIXI.js 游戏渲染Spine 动画、碰撞、地图✅ Tiled 地图编辑器免费、图形化、多图层✅ Vue Tiled 可视化配置地图、碰撞、对象✅ 打包 APP 可用 Capacitor/Vite PWA适合2D 游戏、多图层地图、短视频社交方案二Vue Phaser Tiled优势✅ Phaser 内置碰撞系统、物理引擎✅ Phaser 有社区编辑器Phaser Editor✅ Tiled 地图编辑器✅ Vue 负责 UI 层适合需要复杂物理效果的游戏方案三Vue Cocos混合优势✅ Cocos 处理游戏部分场景、碰撞、物理✅ Vue 处理 UI 部分列表、视频、音频✅ Cocos WebView 嵌入 Vue 页面适合需要原生 APP 性能的游戏# Vue3 播放 Spine 3.8 动画实战指南## 前言最近在开发一个游戏项目需要在 Vue3 中播放 Spine 动画。在搜索了大量资料后发现网上的教程要么版本不对要么写法有问题。经过反复尝试终于成功跑通了特此记录。## 核心技术栈版本重要Vue 3.xSpine 动画版本3.8.75pixi-spinepixi-spine/all-3.84.0.6pixi.js7.4.3Vite5.xTypeScript5.x**版本匹配原则**Spine 编辑器导出的版本必须与运行时版本匹配。如果使用 Spine 3.8.75 导出的动画必须使用 3.8 版本的 pixi-spine 运行时。## 项目初始化bashnpm create vitelatest spine-game -- --template vue-tscd spine-gamenpm installnpm install pixi.js7.4.3 pixi-spine/all-3.84.0.6## 核心代码实现### SpineWebPlayer.vue 组件vuetemplatedivclassspine-container:stylecontainerStylerefcontainerRef/div/templatescript setup langtsimport { ref, onMounted, onUnmounted, watch, computed } from vueimport * as PIXI from pixi.jsimport { Spine } from pixi-spine/all-3.8// Props 定义const props defineProps{position: { x: number; y: number }direction: stringisMoving: boolean}()const containerRef refHTMLDivElement | null(null)let app: PIXI.Application | null nulllet spineAnimation: Spine | null nulllet animations: string[] []const containerStyle computed(() ({position: fixed as const,left: ${props.position.x}px,top: ${props.position.y}px,pointerEvents: none as const}))// 加载 Spine 动画const loadSpine async () {if (!containerRef.value) return// 创建 PIXI 应用app new PIXI.Application({width: 200,height: 250,backgroundAlpha: 0, // 透明背景antialias: true})containerRef.value.appendChild(app.view as unknown as Node)try {// 关键使用 PIXI.Assets.load 加载 JSONpixi-spine 自动处理 atlas 和 pngconst resources await PIXI.Assets.loadany(/spine/your-animation.json)// 获取可用动画列表if (resources.spineData?.animations) {animations resources.spineData.animations.map((a: any) a.name)console.log(Available animations:, animations)}// 创建 Spine 动画实例spineAnimation new Spine(resources.spineData)// 设置位置和缩放spineAnimation.x 100spineAnimation.y 250spineAnimation.scale.set(0.5)// 添加到舞台app.stage.addChild(spineAnimation)// 播放待机动画const idleAnim animations.includes(idle) ? idle : animations[0]spineAnimation.state.setAnimation(0, idleAnim, true)console.log(Spine loaded successfully!)} catch (error) {console.error(Failed to load Spine:, error)}}// 监听移动状态切换动画watch(() props.isMoving, (isMoving) {if (!spineAnimation) returnconst animName isMoving ? walk : idleif (animations.includes(animName)) {spineAnimation.state.setAnimation(0, animName, true)}})// 监听方向改变翻转watch(() props.direction, (direction) {if (!spineAnimation) returnspineAnimation.scale.x direction.includes(left) ? -0.5 : 0.5})onMounted(() {loadSpine()})onUnmounted(() {spineAnimation?.destroy()app?.destroy()})/scriptstyle scoped.spine-container {width: 200px;height: 250px;}/style## 资源文件放置将 Spine 导出的文件放到 public 目录下public/└── 冰晶魔法少女/├── m_searcy.json # 骨骼数据├── m_searcy.atlas # 纹理图集配置├── m_searcy.png # 纹理图集1└── m_searcy2.png # 纹理图集2如有## 关键要点总结### 1. 版本匹配是核心| Spine 编辑器版本 | pixi-spine 版本 | pixi.js 版本 ||-----------------|-----------------|--------------|| 3.8.x | pixi-spine/all-3.84.0.6 | 7.x || 4.x | pixi-spine/all-4.x | 7.x |### 2. 正确加载方式❌ **错误方式**typescript// 手动解析 atlas 和 jsonconst atlas new TextureAtlas(atlasText, textureLoader)const skeletonJson new SkeletonJson(attachmentLoader)✅ **正确方式**typescript// 使用 PIXI.Assets.load 一键加载const resources await PIXI.Assets.loadany(/path/to/animation.json)const spine new Spine(resources.spineData)### 3. 动画切换typescript// 切换到行走动画循环spine.state.setAnimation(0, walk, true)// 添加动画到队列spine.state.addAnimation(0, attack, false, 0)// 清空所有动画spine.state.setEmptyAnimation(0, 0)### 4. 方向控制typescript// 向左翻转spine.scale.x -Math.abs(spine.scale.x)// 向右spine.scale.x Math.abs(spine.scale.x)## 常见问题### Q1: 动画显示为空白或报错 Unsupported skeleton data**原因**Spine 版本与运行时版本不匹配**解决**确保使用 Spine 3.8.75 导出或安装对应的 4.x 版本 pixi-spine### Q2: 贴图显示不全**原因**atlas 引用的 png 文件未完整加载**解决**确保所有 .png 文件都在同一目录且文件名与 atlas 中一致### Q3: 动画切换时卡顿**解决**使用混合时间过渡typescriptspine.state.setAnimation(0, run, true)spine.state.addAnimation(0, walk, true, 0.3) // 0.3秒过渡## 完整项目结构spine-game/├── public/│ └── 冰晶魔法少女/│ ├── m_searcy.json│ ├── m_searcy.atlas│ └── *.png├── src/│ ├── components/│ │ ├── SpineWebPlayer.vue│ │ ├── GameScene.vue│ │ └── VirtualJoystick.vue│ ├── composables/│ │ └── useGameControls.ts│ ├── App.vue│ └── main.ts├── package.json└── vite.config.ts## 结语Vue3 播放 Spine 动画的关键在于**版本匹配 正确的加载方式**。建议使用官方推荐的 PIXI.Assets.load() 方法它会自动处理 JSON、atlas 和 PNG 的关联比手动解析更稳定可靠。如果你的项目使用其他框架如 React核心逻辑是相同的只需将 Vue 的生命周期替换为对应框架的写法即可。---**参考资料**- [在 Web 中使用 Spine 动画](https://juejin.cn/post/7402229249677508658)- [pixi-spine GitHub](https://github.com/pixijs-userland/spine)- [Spine Runtimes](https://zh.esotericsoftware.com/spine-runtimes)