阶段11开发
This commit is contained in:
tianmo committed
1 parent
8e9b83f95b
commit
8802bbe25e
21 files changed
+5285
-81
No files matched your search
@@ -0,0 +1,445 @@
|
||||
import type { EmitterConfig, ParticleImageResource, ParticleState, TrailImageResource } from '../core/particleEmitter'
|
||||
import type { ParticleSystem, TimelineState } from '../store/particleStore'
|
||||
import type { SpineExportSettings } from './spineExportSettings'
|
||||
import type { SpineExportResult, SpineExportWarning, SpineJsonDocument, SpineJsonMap } from './spineJsonTypes'
|
||||
import { reduceBezierSamples, reduceNumericSamples, roundSpine, unwrapDegrees, type NumericSample } from './spineKeyframeReducer'
|
||||
import { buildWeightedTrailMesh } from './spineMeshBuilder'
|
||||
|
||||
type Track = { key: string; name: string; states: Array<ParticleState | null> }
|
||||
type ExportInput = { systems: ParticleSystem[]; timeline: TimelineState; settings: SpineExportSettings }
|
||||
|
||||
const BLENDS = { normal: 'normal', add: 'additive', multiply: 'multiply', screen: 'screen' } as const
|
||||
const PARTICLE_POSITION_TOLERANCE = 0.1
|
||||
const TRAIL_POSITION_TOLERANCE = 0.1
|
||||
const ROTATION_TOLERANCE = 0.01
|
||||
const SCALE_TOLERANCE = 0.01
|
||||
|
||||
function safeName(value: string, fallback: string) {
|
||||
const name = String(value || '').trim().replace(/[\\/:*?"<>|\s]+/g, '_').replace(/^_+|_+$/g, '')
|
||||
return name || fallback
|
||||
}
|
||||
|
||||
function uniqueName(base: string, used: Set<string>) {
|
||||
let value = base
|
||||
let index = 2
|
||||
while (used.has(value)) value = `${base}_${index++}`
|
||||
used.add(value)
|
||||
return value
|
||||
}
|
||||
|
||||
function stripExtension(value: string) { return value.replace(/\.[^./\\]+$/, '') }
|
||||
function normalizePath(folder: string, file: string) {
|
||||
return stripExtension([folder, file].filter(Boolean).join('/').replace(/\\/g, '/').replace(/\/{2,}/g, '/').replace(/^\.\//, ''))
|
||||
}
|
||||
function textureSize(texture: any) {
|
||||
const width = Number(texture?.orig?.width ?? texture?.width) || 0
|
||||
const height = Number(texture?.orig?.height ?? texture?.height) || 0
|
||||
return { width, height }
|
||||
}
|
||||
function byte(value: number) { return Math.round(Math.max(0, Math.min(1, value)) * 255).toString(16).padStart(2, '0') }
|
||||
function rgbaValues(value: number, alpha: number) {
|
||||
return [((value >> 16) & 255) / 255, ((value >> 8) & 255) / 255, (value & 255) / 255, Math.max(0, Math.min(1, alpha))]
|
||||
}
|
||||
function time(frame: number, fps: number) { return roundSpine(frame / fps) }
|
||||
|
||||
function particleDurationFrames(system: ParticleSystem, fps: number) {
|
||||
const c = system.config
|
||||
const life = c.lifeMode === 'fixed' ? Math.max(0, Number(c.lifeMin) || 0) : Math.max(0, Number(c.lifeMin) || 0, Number(c.lifeMax) || 0)
|
||||
const delay = Math.max(0, Number(c.delay) || 0)
|
||||
let end: number
|
||||
if (c.mode !== 'stream') end = delay + life
|
||||
else if (c.streamBehavior !== 'loop') end = delay + Math.max(1 / fps, Number(c.duration) || 0) + life
|
||||
else {
|
||||
const loop = Math.max(1, Math.ceil(Number(c.loopDurationFrames) || 1)) / fps
|
||||
if (c.generateLoopEndAnimation) end = delay + life + 1 / fps
|
||||
else if (c.generateLoopStartAnimation) end = delay + loop * Math.max(1, Math.ceil(life / loop))
|
||||
else end = delay + loop
|
||||
}
|
||||
return Math.max(1, Math.ceil(end * fps) + 1)
|
||||
}
|
||||
|
||||
function stateIdentity(state: ParticleState, bonePool: boolean) {
|
||||
return bonePool ? state.boneName : `${state.spawnId ?? 'legacy'}_${state.boneName}`
|
||||
}
|
||||
|
||||
function collectTracks(frames: ParticleState[][], bonePool: boolean, usedNames: Set<string>) {
|
||||
const keys = new Set<string>()
|
||||
for (const frame of frames) for (const state of frame) keys.add(stateIdentity(state, bonePool))
|
||||
return [...keys].sort().map((key, index): Track => ({
|
||||
key,
|
||||
name: uniqueName(`_particle_${String(index).padStart(3, '0')}`, usedNames),
|
||||
states: frames.map((frame) => frame.find((state) => stateIdentity(state, bonePool) === key) || null),
|
||||
}))
|
||||
}
|
||||
|
||||
function sourceStateAt(track: Track, targetFrame: number, sourceFps: number, targetFps: number) {
|
||||
const source = targetFrame * sourceFps / targetFps
|
||||
const aIndex = Math.min(track.states.length - 1, Math.max(0, Math.floor(source)))
|
||||
const bIndex = Math.min(track.states.length - 1, aIndex + 1)
|
||||
const a = track.states[aIndex]
|
||||
const b = track.states[bIndex]
|
||||
if (!a || !b || stateIdentity(a, true) !== stateIdentity(b, true) || a.spawnId !== b.spawnId) return a
|
||||
const amount = source - aIndex
|
||||
if (amount <= 1e-6) return a
|
||||
const lerp = (x: number | undefined, y: number | undefined) => (x ?? 0) + ((y ?? x ?? 0) - (x ?? 0)) * amount
|
||||
const trailState = a.trailState && b.trailState && a.trailState.resourceId === b.trailState.resourceId
|
||||
? {
|
||||
...a.trailState,
|
||||
width: lerp(a.trailState.width, b.trailState.width),
|
||||
alpha: lerp(a.trailState.alpha, b.trailState.alpha),
|
||||
bones: a.trailState.bones.map((bone, index) => {
|
||||
const next = b.trailState!.bones[index] || bone
|
||||
return { ...bone, worldX: lerp(bone.worldX ?? bone.x, next.worldX ?? next.x), worldY: lerp(bone.worldY ?? bone.y, next.worldY ?? next.y), worldRotation: lerp(bone.worldRotation ?? -bone.rotation, next.worldRotation ?? -next.rotation) }
|
||||
}),
|
||||
}
|
||||
: a.trailState
|
||||
return {
|
||||
...a,
|
||||
worldX: lerp(a.worldX, b.worldX), worldY: lerp(a.worldY, b.worldY), worldRotation: lerp(a.worldRotation, b.worldRotation),
|
||||
worldScaleX: lerp(a.worldScaleX, b.worldScaleX), worldScaleY: lerp(a.worldScaleY, b.worldScaleY),
|
||||
alpha: lerp(a.alpha, b.alpha),
|
||||
trailState,
|
||||
}
|
||||
}
|
||||
|
||||
type TimelineCurveMode = 'linear' | 'bezier'
|
||||
|
||||
function resolvedTimelineCurve(mode: '跟随导出' | '线性' | '贝塞尔' | undefined, settings: SpineExportSettings): TimelineCurveMode {
|
||||
if (!mode || mode === '跟随导出') return settings.keyframeCurve
|
||||
return mode === '贝塞尔' ? 'bezier' : 'linear'
|
||||
}
|
||||
|
||||
function numericTimeline(samples: NumericSample[], fps: number, names: string[], tolerances: number[], settings: SpineExportSettings, forcedFrames: Set<number> = new Set(), curveMode: TimelineCurveMode = settings.keyframeCurve) {
|
||||
if (!samples.length) return []
|
||||
const fitted = curveMode === 'bezier'
|
||||
? reduceBezierSamples(samples, tolerances, forcedFrames)
|
||||
: { samples: reduceNumericSamples(samples, tolerances, forcedFrames), controls: [] }
|
||||
const keys = fitted.samples.map((sample) => {
|
||||
const key: SpineJsonMap = { time: time(sample.frame, fps) }
|
||||
names.forEach((name, index) => { key[name] = roundSpine(sample.values[index]) })
|
||||
return key
|
||||
})
|
||||
for (let index = 0; index < fitted.controls.length; index++) {
|
||||
const startTime = Number(keys[index].time) || 0
|
||||
const endTime = Number(keys[index + 1].time) || 0
|
||||
const curve: number[] = []
|
||||
for (let dimension = 0; dimension < names.length; dimension++) {
|
||||
const controls = fitted.controls[index].values[dimension]
|
||||
curve.push(roundSpine(startTime + (endTime - startTime) / 3), roundSpine(controls[0]), roundSpine(startTime + (endTime - startTime) * 2 / 3), roundSpine(controls[1]))
|
||||
}
|
||||
keys[index].curve = curve
|
||||
}
|
||||
return keys
|
||||
}
|
||||
|
||||
function stateBoundaryFrames(states: Array<ParticleState | null>) {
|
||||
const forced = new Set<number>()
|
||||
for (let frame = 0; frame < states.length; frame++) {
|
||||
const current = states[frame]
|
||||
const previous = frame ? states[frame - 1] : null
|
||||
const changedParticle = !!current && !!previous && current.spawnId !== previous.spawnId
|
||||
if ((!!current !== !!previous) || changedParticle) {
|
||||
if (frame > 0 && previous) forced.add(frame - 1)
|
||||
if (current) forced.add(frame)
|
||||
}
|
||||
}
|
||||
return forced
|
||||
}
|
||||
|
||||
function optionalStateBoundaryFrames<T>(states: Array<T | undefined>) {
|
||||
const forced = new Set<number>()
|
||||
for (let frame = 0; frame < states.length; frame++) {
|
||||
const current = states[frame], previous = frame ? states[frame - 1] : undefined
|
||||
if (!!current !== !!previous) {
|
||||
if (frame > 0 && previous) forced.add(frame - 1)
|
||||
if (current) forced.add(frame)
|
||||
}
|
||||
}
|
||||
return forced
|
||||
}
|
||||
|
||||
function trailShapeAt(resource: TrailImageResource, t: number) {
|
||||
if (!resource.shapeEnabled || !resource.shapeCurve?.length) return 1
|
||||
const points = [...resource.shapeCurve].sort((a, b) => a.x - b.x)
|
||||
if (t <= points[0].x) return Math.max(0, points[0].y)
|
||||
for (let index = 1; index < points.length; index++) {
|
||||
const a = points[index - 1], b = points[index]
|
||||
if (t <= b.x) {
|
||||
const amount = (t - a.x) / Math.max(0.000001, b.x - a.x)
|
||||
return Math.max(0, a.y + (b.y - a.y) * amount)
|
||||
}
|
||||
}
|
||||
return Math.max(0, points[points.length - 1].y)
|
||||
}
|
||||
|
||||
function discreteTimeline<T>(values: T[], fps: number, make: (value: T, frame: number) => SpineJsonMap) {
|
||||
const keys: SpineJsonMap[] = []
|
||||
let previous: T | symbol = Symbol()
|
||||
values.forEach((value, frame) => { if (value !== previous) { keys.push(make(value, frame)); previous = value } })
|
||||
return keys
|
||||
}
|
||||
|
||||
function resourceAttachment(resource: ParticleImageResource, frameIndex: number, warnings: SpineExportWarning[]) {
|
||||
const frame = resource.imageMode === 'sequence' ? resource.sequenceFrames[frameIndex] : undefined
|
||||
const file = frame?.name || resource.textureName || `image_${resource.id}`
|
||||
const texture = frame?.texture || resource.texture
|
||||
const size = textureSize(texture)
|
||||
if (!size.width || !size.height) warnings.push({ code: 'missing-image', message: `图片“${file}”缺失或尺寸不可读，已保留路径。` })
|
||||
const width = size.width || 1, height = size.height || 1
|
||||
return {
|
||||
path: normalizePath(resource.textureFolder, file),
|
||||
x: roundSpine((0.5 - resource.anchorX) * width),
|
||||
y: roundSpine((resource.anchorY - 0.5) * height),
|
||||
width: roundSpine(width), height: roundSpine(height),
|
||||
}
|
||||
}
|
||||
|
||||
function rgbaTimeline(colors: number[][], attachments: Array<string | null>, fps: number, settings: SpineExportSettings, curveMode: TimelineCurveMode = settings.keyframeCurve) {
|
||||
if (!colors.length) return []
|
||||
const forcedFrames = new Set<number>()
|
||||
for (let frame = 1; frame < attachments.length; frame++) {
|
||||
const current = attachments[frame]
|
||||
const previous = attachments[frame - 1]
|
||||
// 序列帧图片名变化不影响同一插槽上的 RGBA 插值；仅在显隐或资源卡片切换时锁定边界。
|
||||
const currentFamily = current?.replace(/_\d+$/, '') ?? null
|
||||
const previousFamily = previous?.replace(/_\d+$/, '') ?? null
|
||||
if (currentFamily !== previousFamily) {
|
||||
forcedFrames.add(frame)
|
||||
forcedFrames.add(frame - 1)
|
||||
}
|
||||
}
|
||||
// 透明度使用未量化的浮点值参与精简，线性渐变能直接收敛到首尾关键帧；
|
||||
// RGB 保持单通道 1/255，透明度使用 0.01 的视觉容差。
|
||||
const samples: NumericSample[] = colors.map((values, frame) => ({ frame, values }))
|
||||
const rgbTolerance = 1 / 255
|
||||
const fitted = curveMode === 'bezier'
|
||||
? reduceBezierSamples(samples, [rgbTolerance, rgbTolerance, rgbTolerance, 0.01], forcedFrames)
|
||||
: { samples: reduceNumericSamples(samples, [rgbTolerance, rgbTolerance, rgbTolerance, 0.01], forcedFrames), controls: [] }
|
||||
const keys = fitted.samples.map((sample) => ({ time: time(sample.frame, fps), color: `${byte(sample.values[0])}${byte(sample.values[1])}${byte(sample.values[2])}${byte(sample.values[3])}` } as SpineJsonMap))
|
||||
if (fitted.controls.length) {
|
||||
for (let index = 0; index < fitted.controls.length; index++) {
|
||||
const t0 = time(fitted.samples[index].frame, fps), t1 = time(fitted.samples[index + 1].frame, fps)
|
||||
const curve: number[] = []
|
||||
for (let channel = 0; channel < 4; channel++) {
|
||||
const controls = fitted.controls[index].values[channel]
|
||||
curve.push(roundSpine(t0 + (t1 - t0) / 3), roundSpine(controls[0]), roundSpine(t0 + (t1 - t0) * 2 / 3), roundSpine(controls[1]))
|
||||
}
|
||||
keys[index].curve = curve
|
||||
}
|
||||
}
|
||||
return keys
|
||||
}
|
||||
|
||||
function addSlotAnimation(animation: SpineJsonMap, slotName: string, attachments: Array<string | null>, colors: number[][], fps: number, settings: SpineExportSettings, curveMode: TimelineCurveMode = settings.keyframeCurve) {
|
||||
const slot = animation.slots[slotName] ||= {}
|
||||
const attachment = discreteTimeline(attachments, fps, (name, frame) => name == null ? { time: time(frame, fps) } : { time: time(frame, fps), name })
|
||||
if (attachment.length) slot.attachment = attachment
|
||||
const rgba = rgbaTimeline(colors, attachments, fps, settings, curveMode)
|
||||
if (rgba.length) slot.rgba = rgba
|
||||
}
|
||||
|
||||
export function buildSpineJson(input: ExportInput): SpineExportResult {
|
||||
const settings = input.settings
|
||||
const sourceFps = Math.max(1, Number(input.timeline.fps) || 30)
|
||||
const targetFps = Math.max(1, Math.round(settings.fps || 30))
|
||||
// 关闭整数帧对齐时保留编辑器原始采样时刻，仅修改 Spine 的 FPS 元数据。
|
||||
const fps = settings.integerFrameAlignment ? targetFps : sourceFps
|
||||
const warnings: SpineExportWarning[] = []
|
||||
const visibleSystems = input.systems.filter((system) => system.visible !== false)
|
||||
const document: SpineJsonDocument = {
|
||||
skeleton: { hash: '', spine: '4.2', x: 0, y: 0, width: 0, height: 0, images: settings.imagesPath || './images/' },
|
||||
bones: [{ name: 'root' }], slots: [], skins: [{ name: 'default', attachments: {} }], animations: {},
|
||||
}
|
||||
if (!settings.omitFps) document.skeleton.fps = targetFps
|
||||
const skin = document.skins[0].attachments as SpineJsonMap
|
||||
const usedNames = new Set<string>(['root'])
|
||||
const animationNames = [...new Set([...(input.timeline.animations.length ? input.timeline.animations : ['animation']), ...visibleSystems.map((system) => system.animation || 'animation')])]
|
||||
const animationSystems = new Map<string, Array<{ system: ParticleSystem; tracks: Track[]; targetFrames: number }>>()
|
||||
|
||||
for (const system of visibleSystems) {
|
||||
const sourceCount = Math.min(system.frames?.length || 0, particleDurationFrames(system, sourceFps))
|
||||
const frames = (system.frames || []).slice(0, sourceCount)
|
||||
if (!frames.length) warnings.push({ code: 'empty-cache', message: `“${system.config.name}”没有可用帧缓存。` })
|
||||
const prefix = uniqueName(safeName(system.config.name, `system_${system.id}`), usedNames)
|
||||
document.bones.push({ name: prefix, parent: 'root' })
|
||||
const tracks = collectTracks(frames, settings.bonePool, usedNames)
|
||||
const duration = Math.max(0, (sourceCount - 1) / sourceFps)
|
||||
const targetFrames = Math.max(1, Math.ceil(duration * fps) + 1)
|
||||
const group = animationSystems.get(system.animation) || []
|
||||
group.push({ system, tracks, targetFrames })
|
||||
animationSystems.set(system.animation, group)
|
||||
|
||||
for (const track of tracks) {
|
||||
document.bones.push({ name: track.name, parent: prefix })
|
||||
const usedImageBlends = new Set(system.config.imageResources.map((item) => item.blend))
|
||||
for (const blend of usedImageBlends) {
|
||||
const slotName = `${track.name}_image_${blend}`
|
||||
document.slots.push({ name: slotName, bone: track.name, color: 'ffffff00', blend: BLENDS[blend] })
|
||||
const slotSkin = skin[slotName] ||= {}
|
||||
for (const resource of system.config.imageResources.filter((item) => item.blend === blend)) {
|
||||
const count = resource.imageMode === 'sequence' ? Math.max(1, resource.sequenceFrames.length) : 1
|
||||
for (let frame = 0; frame < count; frame++) slotSkin[`image_${resource.id}_${frame}`] = resourceAttachment(resource, frame, warnings)
|
||||
}
|
||||
}
|
||||
if (system.config.trail) {
|
||||
for (const resource of system.config.trailResources) {
|
||||
if (!track.states.some((state) => state?.trailState?.resourceId === resource.id)) continue
|
||||
const count = Math.max(2, Math.min(16, Math.round(resource.boneCount || 3)))
|
||||
const trailNames: string[] = []
|
||||
for (let i = 0; i < count; i++) {
|
||||
const name = `${track.name}_trail_${resource.id}_${i}`
|
||||
trailNames.push(name)
|
||||
document.bones.push({
|
||||
name,
|
||||
parent: prefix,
|
||||
})
|
||||
}
|
||||
const slotName = `${track.name}_trail_${resource.id}`
|
||||
document.slots.push({ name: slotName, bone: trailNames[0], color: 'ffffff00', blend: BLENDS[resource.blend] })
|
||||
const indices = trailNames.map((name) => document.bones.findIndex((bone) => bone.name === name))
|
||||
const path = normalizePath('', resource.textureName || `trail_${resource.id}`)
|
||||
;(skin[slotName] ||= {})[`trail_${resource.id}`] = buildWeightedTrailMesh(system.config, resource, indices, path)
|
||||
if (!resource.texture) warnings.push({ code: 'missing-image', message: `拖尾图片“${resource.textureName || resource.id}”缺失，已保留路径。` })
|
||||
}
|
||||
}
|
||||
// Spine 按 slots 数组顺序绘制。保持每个粒子的拖尾在图片下方。
|
||||
const imagePrefix = `${track.name}_image_`
|
||||
const trailPrefix = `${track.name}_trail_`
|
||||
const ownSlots = document.slots.filter((slot) => String(slot.name).startsWith(imagePrefix) || String(slot.name).startsWith(trailPrefix))
|
||||
if (ownSlots.length) {
|
||||
document.slots = document.slots.filter((slot) => !ownSlots.includes(slot))
|
||||
document.slots.push(...ownSlots.filter((slot) => String(slot.name).startsWith(trailPrefix)), ...ownSlots.filter((slot) => String(slot.name).startsWith(imagePrefix)))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (const animationName of animationNames) {
|
||||
const entries = animationSystems.get(animationName) || []
|
||||
const animation: SpineJsonMap = { bones: {}, slots: {} }
|
||||
let hasContent = false
|
||||
for (const { system, tracks, targetFrames } of entries) {
|
||||
for (const track of tracks) {
|
||||
const states = Array.from({ length: targetFrames }, (_, frame) => sourceStateAt(track, frame, sourceFps, fps))
|
||||
const active = states.map((state) => !!state?.active)
|
||||
const positions: NumericSample[] = [], rotations: number[] = [], scales: NumericSample[] = []
|
||||
states.forEach((state, frame) => {
|
||||
if (!state?.active) return
|
||||
positions.push({ frame, values: [state.worldX ?? state.x, state.worldY ?? state.y] })
|
||||
rotations.push(state.worldRotation ?? state.rotation)
|
||||
scales.push({ frame, values: [state.worldScaleX ?? state.scaleX, state.worldScaleY ?? state.scaleY] })
|
||||
})
|
||||
const rotationValues = unwrapDegrees(rotations)
|
||||
const rotationSamples: NumericSample[] = positions.map((sample, index) => ({ frame: sample.frame, values: [rotationValues[index] ?? 0] }))
|
||||
const motionBoundaries = stateBoundaryFrames(states)
|
||||
const boneTimeline: SpineJsonMap = {}
|
||||
const translate = numericTimeline(positions, fps, ['x', 'y'], [PARTICLE_POSITION_TOLERANCE, PARTICLE_POSITION_TOLERANCE], settings, motionBoundaries)
|
||||
const rotate = numericTimeline(rotationSamples, fps, ['value'], [ROTATION_TOLERANCE], settings, motionBoundaries)
|
||||
const scale = numericTimeline(scales, fps, ['x', 'y'], [SCALE_TOLERANCE, SCALE_TOLERANCE], settings, motionBoundaries)
|
||||
if (translate.length) boneTimeline.translate = translate
|
||||
if (rotate.length) boneTimeline.rotate = rotate
|
||||
if (scale.length) boneTimeline.scale = scale
|
||||
if (Object.keys(boneTimeline).length) { animation.bones[track.name] = boneTimeline; hasContent = true }
|
||||
|
||||
const usedBlends = new Set(system.config.imageResources.map((item) => item.blend))
|
||||
for (const blend of usedBlends) {
|
||||
const attachments: Array<string | null> = [], colors: number[][] = []
|
||||
let lastColor = 0xffffff
|
||||
for (let frame = 0; frame < targetFrames; frame++) {
|
||||
const state = states[frame]
|
||||
const resource = state ? system.config.imageResources.find((item) => item.id === state.resourceId) : undefined
|
||||
const visible = !!state && active[frame] && state.imageVisible !== false && resource?.blend === blend
|
||||
if (state && resource?.blend === blend) lastColor = state.colorHex
|
||||
attachments.push(visible ? `image_${resource!.id}_${state!.imageFrameIndex ?? 0}` : null)
|
||||
colors.push(rgbaValues(lastColor, visible ? state!.alpha : 0))
|
||||
}
|
||||
const blendResources = system.config.imageResources.filter((item) => item.blend === blend)
|
||||
const requestedModes = blendResources
|
||||
.filter((item) => item.independentAlpha === 'curve')
|
||||
.map((item) => resolvedTimelineCurve(item.alphaCurveMode, settings))
|
||||
const rgbaCurveMode = requestedModes.length
|
||||
? (requestedModes.includes('bezier') ? 'bezier' : 'linear')
|
||||
: resolvedTimelineCurve(system.config.alphaMode === 'curve' ? system.config.curveMode : undefined, settings)
|
||||
addSlotAnimation(animation, `${track.name}_image_${blend}`, attachments, colors, fps, settings, rgbaCurveMode)
|
||||
if (attachments.some(Boolean)) hasContent = true
|
||||
}
|
||||
|
||||
if (system.config.trail) for (const resource of system.config.trailResources) {
|
||||
const count = Math.max(2, Math.min(16, Math.round(resource.boneCount || 3)))
|
||||
const trailStates = states.map((state) => state?.trailState?.resourceId === resource.id ? state.trailState : undefined)
|
||||
const firstTrailState = trailStates.find((trail) => !!trail)
|
||||
if (!firstTrailState) continue
|
||||
const trailBoundaries = optionalStateBoundaryFrames(trailStates)
|
||||
const referenceWidth = resource.widthSizeMode === 'random'
|
||||
? Math.max(1, Number(resource.widthMin) || 0, Number(resource.widthMax) || 0)
|
||||
: Math.max(0.001, Number(resource.width) || 100)
|
||||
// 加权 Mesh 的骨骼和附件属于永久对象池，不能随粒子死亡而增删。
|
||||
// 出生前使用首次有效姿态，死亡后保持最近姿态；整组骨骼同帧缩放控制显隐。
|
||||
let heldTrailState = firstTrailState
|
||||
const rigStates = trailStates.map((trail) => {
|
||||
if (trail) heldTrailState = trail
|
||||
return heldTrailState
|
||||
})
|
||||
for (let boneIndex = 0; boneIndex < count; boneIndex++) {
|
||||
const samplesTranslate: NumericSample[] = [], samplesRotate: NumericSample[] = [], samplesScale: NumericSample[] = []
|
||||
const boneBoundaries = new Set(trailBoundaries)
|
||||
const shapeScale = trailShapeAt(resource, boneIndex / Math.max(1, count - 1))
|
||||
rigStates.forEach((trail, frame) => {
|
||||
const bone = trail?.bones[Math.min(trail.bones.length - 1, boneIndex)]
|
||||
if (!bone) return
|
||||
const world = { x: bone.worldX ?? bone.x, y: bone.worldY ?? bone.y, rotation: bone.worldRotation ?? -bone.rotation }
|
||||
// 所有拖尾骨骼均直接挂在粒子系统骨骼下，动画写入独立世界姿态，
|
||||
// 避免骨骼链带来的旋转、缩放和位置累计误差。
|
||||
samplesTranslate.push({ frame, values: [world.x, world.y] })
|
||||
samplesRotate.push({ frame, values: [world.rotation] })
|
||||
samplesScale.push({
|
||||
frame,
|
||||
// 假死只修改插槽透明度；骨骼缩放始终保留，用于宽度和形状曲线。
|
||||
values: [1, Math.max(0, trail.width / referenceWidth) * shapeScale],
|
||||
})
|
||||
})
|
||||
const name = `${track.name}_trail_${resource.id}_${boneIndex}`
|
||||
const timeline: SpineJsonMap = {}
|
||||
const translate = numericTimeline(samplesTranslate, fps, ['x', 'y'], [TRAIL_POSITION_TOLERANCE, TRAIL_POSITION_TOLERANCE], settings, boneBoundaries)
|
||||
const rotate = numericTimeline(samplesRotate, fps, ['value'], [ROTATION_TOLERANCE], settings, boneBoundaries)
|
||||
const scale = numericTimeline(samplesScale, fps, ['x', 'y'], [SCALE_TOLERANCE, SCALE_TOLERANCE], settings, boneBoundaries)
|
||||
if (translate.length) timeline.translate = translate
|
||||
if (rotate.length) timeline.rotate = rotate
|
||||
if (scale.length) timeline.scale = scale
|
||||
if (Object.keys(timeline).length) animation.bones[name] = timeline
|
||||
}
|
||||
// Mesh 始终绑定在插槽上，不再用 null 附件模拟死亡，避免拓扑在时间轴上消失/重建。
|
||||
const attachments = trailStates.map(() => `trail_${resource.id}`)
|
||||
let lastTrailColor = firstTrailState.colorHex
|
||||
const colors = trailStates.map((trail) => {
|
||||
if (trail) {
|
||||
lastTrailColor = trail.colorHex
|
||||
}
|
||||
// 整组拖尾骨骼同生同死，因此可由唯一插槽统一透明假死。
|
||||
return rgbaValues(lastTrailColor, trail ? trail.alpha : 0)
|
||||
})
|
||||
addSlotAnimation(animation, `${track.name}_trail_${resource.id}`, attachments, colors, fps, settings)
|
||||
hasContent = true
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasContent || !settings.excludeEmptyAnimations) document.animations[animationName] = animation
|
||||
}
|
||||
|
||||
if (!Object.keys(document.animations).length && !settings.excludeEmptyAnimations) document.animations.animation = { bones: {}, slots: {} }
|
||||
const text = JSON.stringify(document, null, 2)
|
||||
return { json: document, text, warnings, particleSystemCount: visibleSystems.length, animationCount: Object.keys(document.animations).length, boneCount: document.bones.length }
|
||||
}
|
||||
|
||||
export function downloadSpineJson(result: SpineExportResult, fileName: string) {
|
||||
const blob = new Blob([result.text], { type: 'application/json;charset=utf-8' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const anchor = document.createElement('a')
|
||||
anchor.href = url
|
||||
anchor.download = /\.json$/i.test(fileName) ? fileName : `${fileName || 'SpineParticle'}.json`
|
||||
anchor.style.display = 'none'
|
||||
document.body.appendChild(anchor)
|
||||
anchor.click()
|
||||
anchor.remove()
|
||||
// 给浏览器足够时间接管 Blob，避免立即释放导致下载被静默取消。
|
||||
setTimeout(() => URL.revokeObjectURL(url), 1000)
|
||||
}
|
||||
Reference in new issue
Block a user