SpineParticlesWeb/Document/重构设计.md

Spine 粒子编辑器 · 骨骼对象池架构(重构设计 v1)

基于我们多轮确认的设计意图整理。目标:一个"用参数创建粒子系统"的编辑器, 粒子本质是挂在动态骨骼下的图片,最终可导出 Spine 骨骼 json。

与旧实现的根本区别:不再"加载外部 Spine 骨骼、让粒子跟随某根骨骼",而是反过来—— 编辑器自建骨架(仅 root 根骨骼),粒子生成骨骼并挂在 root 下。

---

一、核心概念(最终确认)

1. 自建最小骨架:编辑器打开时,自建一棵只含一根 root 根骨骼的骨架。
   • 不加载任何外部 .json/.atlas/.png(禁止 sample.json 作模板、禁止"加载示例骨骼"入口)。
2. 骨骼对象池:按粒子发射数量,在 root 下动态生成对应数量的骨骼。
   • 一个粒子 = 一根骨骼。
3. 粒子图片挂到骨骼:每个粒子的图片(贴图光斑)作为 child 挂载到对应该粒子的骨骼下面。
   • 骨骼决定粒子的 位置 / 旋转 / 缩放;粒子图片跟随骨骼运动(这正是 Spine 动画的结构)。
4. 参数驱动一切:粒子系统的创建与所有参数(发射/数量/形状/方向/速度/生命/缩放/透明度/旋转/颜色/混合/重力等)完全由编辑器参数面板决定。
5. 最终产出:导出的 json 描述这些在 root 下动态生成、随动画变化的骨骼(即 Spine 骨骼动画 json)。

---

二、数据流(预览阶段)

参数面板(store)  →  每帧生成/更新 骨骼池
                         │
  粒子数量 N  ⇒  在 root 下创建 N 根骨骼(Bone i)
                         │
  每根骨骼设置  pos/rot/scale = 对应粒子的状态
                         │
  该粒子图片(Sprite) 作为 child 挂到该骨骼 → 骨骼带着图片动

• 单根 root 骨骼:静止于原点(0,0),承载所有生成的子骨骼。
• 生成的骨骼名:如 p_0, p_1, ...(与粒子一一对应),挂在 root 下。

---

三、渲染实现要点

• 画布用 Pixi 的 Spine(官方 spine-pixi)挂载骨架;但不渲染 Spines 附件的贴图(附件我们不用)。
• 为每根粒子骨骼添加一个 Sprite(粒子贴图)作为其 child(Pixi Bone 可通过 Spine 组件的 slot/骨骼挂载子对象)。
  • 替代方案:不真正用 Spine 渲染骨骼,而是自己维护一根"逻辑骨骼"+一个 Sprite——每帧从参数计算粒子状态,直接移动 Sprite,同时记录这根"逻辑骨骼"便于导出。这是更可控的实现(避免 Spine 运行时挂载复杂)。

我建议用方案 B(逻辑骨骼 + Sprite):预览时用 Sprite 显示粒子,同时维护"每颗粒子对应一根逻辑骨骼"的数据结构(名字/父级=root/位置/旋转/缩放随时间序列),既满足预览又为导出 json 提供干净的数据。避免陷入 Spine 附件的复杂挂载。若你要严格用 Spine 的 Bone 对象,我再切方案 A。

---

四、参数面板(保留现有字段,去掉"加载骨骼/跟随骨骼"相关)

保留并完善:

• 系统:名称
• 发射:持续/爆发、粒子数量/速率、发射形状(点/圆/矩形/锥体)
• 方向:角度、扩散
• 粒子属性:速度/生命/缩放/透明度/旋转(各 min→max)
• 外观:颜色(起始/结束/寿命渐变)、混合模式、粒子贴图(内置选择/上传)
• 物理:重力

移除/调整:

• 跟随骨骼开关、骨骼下拉(不再"跟随某骨骼",而是 root 下生成)
• 加载示例骨骼 按钮(不要再有)

---

五、导出(后续阶段,先做预览)

• 把每根粒子逻辑骨骼的位置/旋转/缩放随时间的序列 dump 成 Spine 骨骼时间轴 json。
• 骨架 = 1 个 root + N 根生成的子骨骼。

---

六、待你确认的实现方式(仅一点)

预览阶段粒子的"骨骼"用哪种实现:

方案	说明	取舍
B(推荐)	自维护"逻辑骨骼"数据 + Sprite 显示粒子;导出时从逻辑骨骼 dump json	实现简单可控、与导出天然对齐
A	用 spine-pixi 的 Bone 对象,粒子 Sprite 真实挂到 Bone 下	更贴近 Spine,但挂载/渲染复杂

我倾向 B。请确认选 A 还是 B(或让我默认按 B 开始)。