544 lines
20 KiB
TypeScript
544 lines
20 KiB
TypeScript
import { defineStore } from 'pinia'
|
|
import { EmitterConfig, defaultConfig, ensureEmitterConfig, ParticleState, type SceneCollider } from '../core/particleEmitter'
|
|
import type { SpineSceneObject } from '../spine/spineTypes'
|
|
import { releaseSpineAsset, retainSpineAsset } from '../spine/spineAssetRegistry'
|
|
import { cloneEditorValue } from '../editor/editorClone'
|
|
import { defaultSpineExportSettings, type SpineExportSettings } from '../export/spineExportSettings'
|
|
import { loopSegmentTiming } from '../core/loopSegmentTiming'
|
|
import { lastFrameOfDuration, normalizePlaybackRange, resizePlaybackRange } from '../timeline/playbackRange'
|
|
|
|
export interface ParticleSystem {
|
|
id: number
|
|
visible: boolean
|
|
/** 导出时所属的动画名称。 */
|
|
animation: string
|
|
config: EmitterConfig
|
|
/** 录制到的帧序列(每帧 = 该帧活动粒子快照) */
|
|
frames?: ParticleState[][]
|
|
}
|
|
|
|
export interface CollisionBody extends SceneCollider {
|
|
name: string
|
|
visible: boolean
|
|
followPath: boolean
|
|
followPathId: number
|
|
followDuration: number
|
|
followPathRotation: boolean
|
|
followCurveMode: '跟随导出' | '线性' | '贝塞尔'
|
|
followCurve: Array<{ x: number; y: number; inX?: number; inY?: number; outX?: number; outY?: number }>
|
|
}
|
|
|
|
export interface ScenePath {
|
|
id: number
|
|
name: string
|
|
visible: boolean
|
|
enabled: boolean
|
|
x: number
|
|
y: number
|
|
rotation: number
|
|
scaleX: number
|
|
scaleY: number
|
|
closed: boolean
|
|
color: string
|
|
preset: '' | 'circle' | 'square' | 'polygon' | 'star'
|
|
points: Array<{ x: number; y: number; inX: number; inY: number; outX: number; outY: number }>
|
|
}
|
|
|
|
export type SceneObjectType = 'particle' | 'collision' | 'path' | 'spine'
|
|
|
|
export interface EditorState {
|
|
viewScale: number
|
|
viewX: number
|
|
viewY: number
|
|
}
|
|
|
|
/** 系统设置(可通过右上角设置面板调整) */
|
|
export interface SettingsState {
|
|
/** 参数面板是否显示在页面右侧；关闭时显示在左侧。 */
|
|
parameterPanelOnRight: boolean
|
|
/** 是否启用刻度(主开关;启用=显示坐标轴+刻度线+数值,可调整字号/粗细) */
|
|
tickEnabled: boolean
|
|
/** 坐标轴刻度文字大小(px),默认 12 */
|
|
axisFontSize: number
|
|
/** 刻度线粗细(px) */
|
|
tickWidth: number
|
|
/** 是否显示坐标轴刻度数值 */
|
|
showAxisLabels: boolean
|
|
/** 坐标轴数值颜色(#rrggbb) */
|
|
axisColor: string
|
|
/** 最大撤回操作数。 */
|
|
undoLimit: number
|
|
/** 背景图世界坐标与透明度。 */
|
|
backgroundX: number
|
|
backgroundY: number
|
|
backgroundOpacity: number
|
|
backgroundImageName: string
|
|
backgroundImageData: string
|
|
showEmitter: boolean
|
|
showBones: boolean
|
|
/** 骨骼调试点的屏幕固定尺寸倍率。 */
|
|
bonePointDrawSize: number
|
|
/** 骨骼局部方向轴的屏幕固定尺寸倍率。 */
|
|
boneAxisDrawSize: number
|
|
showSkinMesh: boolean
|
|
showGrid: boolean
|
|
/** Spine JSON 导出的全局参数。 */
|
|
exportSettings: SpineExportSettings
|
|
}
|
|
|
|
export interface TimelineState {
|
|
/** 播放模式 */
|
|
playing: boolean
|
|
/** 循环 */
|
|
loop: boolean
|
|
/** 当前帧 */
|
|
frame: number
|
|
/** 总帧数 */
|
|
totalFrames: number
|
|
/** 自定义播放范围，首尾帧均包含。 */
|
|
playbackStart: number
|
|
playbackEnd: number
|
|
/** 帧率 */
|
|
fps: number
|
|
/** 是否已录制 */
|
|
recorded: boolean
|
|
/** 当前选中的所属动画。 */
|
|
animation: string
|
|
/** 项目中可供粒子系统归属的动画列表，至少保留一个。 */
|
|
animations: string[]
|
|
}
|
|
|
|
let seq = 1
|
|
let colliderSeq = 1
|
|
let pathSeq = 1
|
|
let spineSeq = 1
|
|
|
|
function copyName(name: string, names: string[]) {
|
|
const existing = new Set(names)
|
|
const base = `${name} Copy`
|
|
if (!existing.has(base)) return base
|
|
let index = 2
|
|
while (existing.has(`${base} ${index}`)) index++
|
|
return `${base} ${index}`
|
|
}
|
|
|
|
export const useParticleStore = defineStore('particle', {
|
|
state: () => ({
|
|
editor: { viewScale: 1.0, viewX: 0, viewY: 0 } as EditorState,
|
|
systems: [] as ParticleSystem[],
|
|
colliders: [] as CollisionBody[],
|
|
paths: [] as ScenePath[],
|
|
spines: [] as SpineSceneObject[],
|
|
activeId: 0,
|
|
activeObjectType: 'particle' as SceneObjectType,
|
|
activeObjectId: 0,
|
|
// 与 Spine 编辑器默认时间基准对齐：1 秒 = 30 帧。
|
|
timeline: { playing: true, loop: true, frame: 0, totalFrames: 60, playbackStart: 0, playbackEnd: 59, fps: 30, recorded: false, animation: 'animation', animations: ['animation'] } as TimelineState,
|
|
settings: {
|
|
parameterPanelOnRight: true,
|
|
tickEnabled: false,
|
|
axisFontSize: 12,
|
|
tickWidth: 1,
|
|
showAxisLabels: true,
|
|
axisColor: '#7a86ad',
|
|
undoLimit: 20,
|
|
backgroundX: 0,
|
|
backgroundY: 0,
|
|
backgroundOpacity: 1,
|
|
backgroundImageName: '',
|
|
backgroundImageData: '',
|
|
showEmitter: true,
|
|
showBones: false,
|
|
bonePointDrawSize: 1,
|
|
boneAxisDrawSize: 2,
|
|
showSkinMesh: false,
|
|
showGrid: true,
|
|
exportSettings: defaultSpineExportSettings(),
|
|
} as SettingsState,
|
|
}),
|
|
getters: {
|
|
activeSystemCount: (s) => s.systems.length,
|
|
},
|
|
actions: {
|
|
syncSceneSequences() {
|
|
seq = Math.max(seq, ...this.systems.map((item) => item.id + 1), 1)
|
|
colliderSeq = Math.max(colliderSeq, ...this.colliders.map((item) => item.id + 1), 1)
|
|
pathSeq = Math.max(pathSeq, ...this.paths.map((item) => item.id + 1), 1)
|
|
spineSeq = Math.max(spineSeq, ...this.spines.map((item) => item.id + 1), 1)
|
|
},
|
|
addSystem(initial?: Partial<{ config: Partial<EmitterConfig> }>) {
|
|
const cfg = defaultConfig()
|
|
if (initial?.config) Object.assign(cfg, initial.config)
|
|
// 自动生成不重复名字:若"ParticleSystemN"已存在,取已有数字最大值+1
|
|
const existing = new Set(this.systems.map((s) => s.config.name))
|
|
if (existing.has(cfg.name)) {
|
|
let maxN = 0
|
|
for (const s of this.systems) {
|
|
const m = /^ParticleSystem(\d+)$/.exec(s.config.name)
|
|
if (m) maxN = Math.max(maxN, parseInt(m[1], 10))
|
|
}
|
|
cfg.name = `ParticleSystem${maxN + 1}`
|
|
let i = 2
|
|
while (existing.has(cfg.name)) { cfg.name = `ParticleSystem${maxN + i}`; i++ }
|
|
}
|
|
const animation = this.timeline.animations.includes(this.timeline.animation)
|
|
? this.timeline.animation
|
|
: this.timeline.animations[0] || 'animation'
|
|
const sys: ParticleSystem = { id: seq++, visible: true, animation, config: cfg }
|
|
this.systems.push(sys)
|
|
this.activeId = sys.id
|
|
this.activeObjectType = 'particle'
|
|
this.activeObjectId = sys.id
|
|
return sys
|
|
},
|
|
removeSystem(id: number) {
|
|
const i = this.systems.findIndex((s) => s.id === id)
|
|
if (i >= 0) this.systems.splice(i, 1)
|
|
if (this.activeId === id) this.activeId = this.systems[0]?.id ?? 0
|
|
const activeSystem = this.systems.find((system) => system.id === this.activeId)
|
|
if (activeSystem) this.timeline.animation = activeSystem.animation
|
|
if (this.activeObjectType === 'particle' && this.activeObjectId === id) {
|
|
const next = this.systems[0]
|
|
this.activeObjectId = next?.id ?? 0
|
|
}
|
|
},
|
|
selectSystem(id: number) {
|
|
this.activeId = id
|
|
this.activeObjectType = 'particle'
|
|
this.activeObjectId = id
|
|
const system = this.systems.find((item) => item.id === id)
|
|
if (system) this.timeline.animation = system.animation
|
|
},
|
|
setSystemAnimation(id: number, animation: string) {
|
|
if (!this.timeline.animations.includes(animation)) return
|
|
const system = this.systems.find((item) => item.id === id)
|
|
if (!system) return
|
|
system.animation = animation
|
|
this.timeline.animation = animation
|
|
},
|
|
addAnimation() {
|
|
const existing = new Set(this.timeline.animations)
|
|
let index = 2
|
|
let name = `animation${index}`
|
|
while (existing.has(name)) name = `animation${++index}`
|
|
this.timeline.animations.push(name)
|
|
this.timeline.animation = name
|
|
const system = this.systems.find((item) => item.id === this.activeId)
|
|
if (system) system.animation = name
|
|
return name
|
|
},
|
|
renameAnimation(previousName: string, nextName: string) {
|
|
const name = nextName.trim()
|
|
const index = this.timeline.animations.indexOf(previousName)
|
|
if (index < 0 || !name || (name !== previousName && this.timeline.animations.includes(name))) return false
|
|
this.timeline.animations[index] = name
|
|
for (const system of this.systems) if (system.animation === previousName) system.animation = name
|
|
if (this.timeline.animation === previousName) this.timeline.animation = name
|
|
return true
|
|
},
|
|
removeAnimation(name: string) {
|
|
if (this.timeline.animations.length <= 1) return false
|
|
const index = this.timeline.animations.indexOf(name)
|
|
if (index < 0) return false
|
|
this.timeline.animations.splice(index, 1)
|
|
const fallback = this.timeline.animations[Math.min(index, this.timeline.animations.length - 1)]
|
|
for (const system of this.systems) if (system.animation === name) system.animation = fallback
|
|
if (this.timeline.animation === name) this.timeline.animation = fallback
|
|
return true
|
|
},
|
|
addCollider() {
|
|
const id = colliderSeq++
|
|
const collider: CollisionBody = {
|
|
id,
|
|
name: `Collider${id}`,
|
|
visible: true,
|
|
shape: 'circle',
|
|
enabled: true,
|
|
x: 0,
|
|
y: 0,
|
|
rotation: 0,
|
|
scaleX: 1,
|
|
scaleY: 1,
|
|
radius: 50,
|
|
radiusX: 70,
|
|
radiusY: 45,
|
|
width: 120,
|
|
height: 80,
|
|
sides: 6,
|
|
response: 'physics',
|
|
elasticity: 0.8,
|
|
friction: 0.3,
|
|
followPath: false,
|
|
followPathId: 0,
|
|
followDuration: 2,
|
|
followPathRotation: false,
|
|
followCurveMode: '跟随导出',
|
|
followCurve: [{ x: 0, y: 0 }, { x: 1, y: 1 }],
|
|
}
|
|
this.colliders.push(collider)
|
|
this.activeObjectType = 'collision'
|
|
this.activeObjectId = collider.id
|
|
return collider
|
|
},
|
|
addPath() {
|
|
const id = pathSeq++
|
|
const path: ScenePath = {
|
|
id,
|
|
name: `Path${id}`,
|
|
visible: true,
|
|
enabled: true,
|
|
x: 0,
|
|
y: 0,
|
|
rotation: 0,
|
|
scaleX: 1,
|
|
scaleY: 1,
|
|
closed: false,
|
|
color: '#ff933e',
|
|
preset: '',
|
|
points: [],
|
|
}
|
|
this.paths.push(path)
|
|
this.activeObjectType = 'path'
|
|
this.activeObjectId = path.id
|
|
return path
|
|
},
|
|
addSpine() {
|
|
const id = spineSeq++
|
|
const spine: SpineSceneObject = {
|
|
id,
|
|
name: `SpineSkeleton${id}`,
|
|
enabled: true,
|
|
visible: true,
|
|
x: 0,
|
|
y: 0,
|
|
rotation: 0,
|
|
scaleX: 1,
|
|
scaleY: 1,
|
|
timeOffset: 0,
|
|
skeletonFileName: '',
|
|
atlasFileName: '',
|
|
textureFileNames: [],
|
|
dataVersion: '',
|
|
sourceBundle: null,
|
|
selectedAnimation: '',
|
|
selectedBone: '',
|
|
selectedSlot: '',
|
|
animations: [],
|
|
bones: [],
|
|
slots: [],
|
|
assetVersion: 0,
|
|
status: 'empty',
|
|
error: '',
|
|
}
|
|
this.spines.push(spine)
|
|
this.activeObjectType = 'spine'
|
|
this.activeObjectId = spine.id
|
|
return spine
|
|
},
|
|
duplicateSelectedObject() {
|
|
const id = this.activeObjectId
|
|
if (!id) return null
|
|
|
|
if (this.activeObjectType === 'particle') {
|
|
const source = this.systems.find((item) => item.id === id)
|
|
if (!source) return null
|
|
const copy = cloneEditorValue(source)
|
|
copy.id = seq++
|
|
copy.config.name = copyName(source.config.name, this.systems.map((item) => item.config.name))
|
|
// 录制帧属于运行时缓存，副本由相同配置重新独立生成。
|
|
copy.frames = undefined
|
|
this.systems.push(copy)
|
|
this.activeId = copy.id
|
|
this.activeObjectId = copy.id
|
|
this.timeline.animation = copy.animation
|
|
return copy
|
|
}
|
|
|
|
if (this.activeObjectType === 'collision') {
|
|
const source = this.colliders.find((item) => item.id === id)
|
|
if (!source) return null
|
|
const copy = cloneEditorValue(source)
|
|
copy.id = colliderSeq++
|
|
copy.name = copyName(source.name, this.colliders.map((item) => item.name))
|
|
this.colliders.push(copy)
|
|
this.activeObjectId = copy.id
|
|
return copy
|
|
}
|
|
|
|
if (this.activeObjectType === 'path') {
|
|
const source = this.paths.find((item) => item.id === id)
|
|
if (!source) return null
|
|
const copy = cloneEditorValue(source)
|
|
copy.id = pathSeq++
|
|
copy.name = copyName(source.name, this.paths.map((item) => item.name))
|
|
this.paths.push(copy)
|
|
this.activeObjectId = copy.id
|
|
return copy
|
|
}
|
|
|
|
const source = this.spines.find((item) => item.id === id)
|
|
if (!source) return null
|
|
const copy = cloneEditorValue(source)
|
|
copy.id = spineSeq++
|
|
copy.name = copyName(source.name, this.spines.map((item) => item.name))
|
|
// 骨骼选择是层级树的临时操作状态，不在两个对象之间复用。
|
|
copy.selectedBone = ''
|
|
copy.selectedSlot = ''
|
|
retainSpineAsset(source.id, copy.id)
|
|
this.spines.push(copy)
|
|
this.activeObjectId = copy.id
|
|
return copy
|
|
},
|
|
selectSceneObject(type: SceneObjectType, id: number) {
|
|
this.activeObjectType = type
|
|
this.activeObjectId = id
|
|
if (type === 'particle') {
|
|
this.activeId = id
|
|
const system = this.systems.find((item) => item.id === id)
|
|
if (system) this.timeline.animation = system.animation
|
|
}
|
|
},
|
|
removeCollider(id: number) {
|
|
const index = this.colliders.findIndex((item) => item.id === id)
|
|
if (index >= 0) this.colliders.splice(index, 1)
|
|
for (const system of this.systems) {
|
|
const config = ensureEmitterConfig(system.config as any)
|
|
config.collisionColliderIds = config.collisionColliderIds.filter((colliderId) => colliderId !== id)
|
|
}
|
|
if (this.activeObjectType === 'collision' && this.activeObjectId === id) {
|
|
const fallback = this.systems[0]
|
|
this.activeObjectType = fallback ? 'particle' : 'collision'
|
|
this.activeObjectId = fallback?.id ?? this.colliders[0]?.id ?? 0
|
|
}
|
|
},
|
|
removePath(id: number) {
|
|
const index = this.paths.findIndex((item) => item.id === id)
|
|
if (index >= 0) this.paths.splice(index, 1)
|
|
if (this.activeObjectType === 'path' && this.activeObjectId === id) {
|
|
const fallback = this.systems[0]
|
|
this.activeObjectType = fallback ? 'particle' : 'path'
|
|
this.activeObjectId = fallback?.id ?? this.paths[0]?.id ?? 0
|
|
}
|
|
},
|
|
removeSpine(id: number) {
|
|
releaseSpineAsset(id)
|
|
const index = this.spines.findIndex((item) => item.id === id)
|
|
if (index >= 0) this.spines.splice(index, 1)
|
|
if (this.activeObjectType === 'spine' && this.activeObjectId === id) {
|
|
const particle = this.systems[0]
|
|
const collider = this.colliders[0]
|
|
const path = this.paths[0]
|
|
const spine = this.spines[0]
|
|
if (particle) {
|
|
this.activeObjectType = 'particle'
|
|
this.activeObjectId = particle.id
|
|
this.activeId = particle.id
|
|
} else if (collider) {
|
|
this.activeObjectType = 'collision'
|
|
this.activeObjectId = collider.id
|
|
} else if (path) {
|
|
this.activeObjectType = 'path'
|
|
this.activeObjectId = path.id
|
|
} else {
|
|
this.activeObjectType = 'spine'
|
|
this.activeObjectId = spine?.id ?? 0
|
|
}
|
|
}
|
|
this.recalcTotalFrames()
|
|
},
|
|
play() {
|
|
const range = normalizePlaybackRange(this.timeline.playbackStart, this.timeline.playbackEnd, this.timeline.totalFrames)
|
|
if (this.timeline.frame < range.start || this.timeline.frame >= range.end) this.timeline.frame = range.start
|
|
this.timeline.playing = true
|
|
},
|
|
pause() { this.timeline.playing = false },
|
|
togglePlay() {
|
|
if (this.timeline.playing) this.pause()
|
|
else this.play()
|
|
},
|
|
toStart() { this.timeline.frame = this.timeline.playbackStart },
|
|
previousFrame() {
|
|
this.timeline.playing = false
|
|
this.timeline.frame = Math.max(this.timeline.playbackStart, this.timeline.frame - 1)
|
|
},
|
|
nextFrame() {
|
|
this.timeline.playing = false
|
|
this.timeline.frame = Math.min(this.timeline.playbackEnd, this.timeline.frame + 1)
|
|
},
|
|
toEnd() {
|
|
this.timeline.playing = false
|
|
this.timeline.frame = this.timeline.playbackEnd
|
|
},
|
|
toggleLoop() { this.timeline.loop = !this.timeline.loop },
|
|
setFrame(f: number) {
|
|
this.timeline.frame = Math.max(0, Math.min(f, this.timeline.totalFrames - 1))
|
|
},
|
|
setPlaybackStart(value: number) {
|
|
const range = normalizePlaybackRange(value, this.timeline.playbackEnd, this.timeline.totalFrames)
|
|
this.timeline.playbackStart = range.start
|
|
this.timeline.playbackEnd = range.end
|
|
if (this.timeline.frame < range.start) this.timeline.frame = range.start
|
|
},
|
|
setPlaybackEnd(value: number) {
|
|
const range = normalizePlaybackRange(this.timeline.playbackStart, value, this.timeline.totalFrames)
|
|
this.timeline.playbackStart = range.start
|
|
this.timeline.playbackEnd = range.end
|
|
if (this.timeline.frame > range.end) this.timeline.frame = range.end
|
|
},
|
|
/** 依据所有粒子系统的"最晚消失时间"重算总帧数。
|
|
* 固定生命周期使用 lifeMin；随机生命周期使用上下限中的较大值。
|
|
* 单系统总时长 = delay + 持续模式 duration（爆发为 0）+ 最大粒子生命，
|
|
* 多系统取最大;转帧 = ceil(sec * fps)。 */
|
|
recalcTotalFrames() {
|
|
const fps = this.timeline.fps || 30
|
|
let maxSec = 0
|
|
for (const sys of this.systems) {
|
|
const c = sys.config
|
|
const lifeMin = Math.max(0, Number(c.lifeMin) || 0)
|
|
const lifeMax = Math.max(0, Number(c.lifeMax) || 0)
|
|
const particleLife = c.lifeMode === 'fixed'
|
|
? lifeMin
|
|
: Math.max(lifeMin, lifeMax)
|
|
const emissionDuration = c.mode === 'stream'
|
|
? c.streamBehavior === 'loop'
|
|
? Math.max(1 / fps, Math.ceil(Math.max(1, Number(c.loopDurationFrames) || 1)) / fps)
|
|
: Math.max(1 / fps, Number(c.duration) || 0)
|
|
: 0
|
|
let end = Math.max(0, Number(c.delay) || 0) + emissionDuration + particleLife
|
|
if (c.mode === 'stream' && c.streamBehavior === 'loop') {
|
|
end = Math.max(0, Number(c.delay) || 0) + loopSegmentTiming(c, fps).total / fps
|
|
}
|
|
if (end > maxSec) maxSec = end
|
|
}
|
|
for (const spine of this.spines) {
|
|
const animation = spine.animations.find((item) => item.name === spine.selectedAnimation)
|
|
if (!animation) continue
|
|
const end = Math.max(0, Number(spine.timeOffset) || 0) + Math.max(0, animation.duration || 0)
|
|
if (end > maxSec) maxSec = end
|
|
}
|
|
for (const collider of this.colliders) {
|
|
if (!collider.followPath || !collider.followPathId) continue
|
|
const end = Math.max(0, Number(collider.followDuration) || 0)
|
|
if (end > maxSec) maxSec = end
|
|
}
|
|
// totalFrames 表示快照数量；0 秒和末端点都可选，因此比末端帧编号多 1。
|
|
// 末帧编号按“时长覆盖到的最后一个整数帧”计算，不能直接用 ceil：
|
|
// Spine 的小数舍入会让 80 帧的时长变成 80.01 帧，从而凭空多出第 81 帧，
|
|
// 回放时表现为末帧之后多停一帧。
|
|
const previousFrames = this.timeline.totalFrames
|
|
const frames = Math.max(2, lastFrameOfDuration(maxSec, fps) + 1)
|
|
this.timeline.totalFrames = frames
|
|
const range = resizePlaybackRange(
|
|
{ start: this.timeline.playbackStart, end: this.timeline.playbackEnd },
|
|
previousFrames,
|
|
frames,
|
|
)
|
|
this.timeline.playbackStart = range.start
|
|
this.timeline.playbackEnd = range.end
|
|
// clamp 当前帧
|
|
if (this.timeline.frame >= frames) this.timeline.frame = frames - 1
|
|
return frames
|
|
},
|
|
},
|
|
})
|