Yeomai/SpineParticlesWeb
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改预设，力场形状显示开关

Browse Source
This commit is contained in:
tianmo committed 2026-09-22 16:58:44 +08:00
1 parent 5f3a4a33fe
commit 4f2c980bac
9 files changed
+581 -18
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/Preset/index.json
+6 -2
View File
@@ -1,7 +1,7 @@
[
{
"name": "方块粒子",
"file": "方块粒子.json"
"name": "多力场",
"file": "多力场.json"
},
{
"name": "雷电序列帧",
@@ -11,6 +11,10 @@
"name": "粒子扫过",
"file": "粒子扫过.json"
},
{
"name": "长条方块",
"file": "长条方块.json"
},
{
"name": "spine",
"file": "spine.json"
public/Preset/多力场.json
+530
View File
@@ -0,0 +1,530 @@
{
"format": "SpineParticle.EditorConfig",
"version": 1,
"savedAt": "2026-09-22T08:54:10.890Z",
"editor": {
"viewScale": 0.8928571428571433,
"viewX": 27.26238807717155,
"viewY": -5.489695295473268
},
"settings": {
"backgroundX": 0,
"backgroundY": 0,
"backgroundOpacity": 1,
"backgroundImageName": "",
"backgroundImageData": "",
"showGrid": true,
"exportSettings": {
"imagesPath": "./images/",
"spineVersion": "4.2",
"keyframeCurve": "bezier",
"fps": 30,
"omitFps": false,
"integerFrameAlignment": true,
"bonePool": true,
"excludeEmptyAnimations": false,
"fileName": "SpineParticle.json"
}
},
"timeline": {
"fps": 30,
"loop": true,
"playbackStart": 0,
"playbackEnd": 90,
"animations": [
"animation"
]
},
"selection": {
"type": "particle",
"id": 1
},
"scene": {
"systems": [
{
"id": 1,
"visible": true,
"animation": "animation",
"config": {
"imageResources": [
{
"id": 1,
"textureName": "star",
"textureFolder": "",
"previewUrl": "/images/star.png",
"imageMode": "fixed",
"sequencePlayback": "loop-forward",
"sequenceFps": 30,
"sequenceFrames": [],
"weight": 100,
"locked": false,
"scale": 1,
"anchorX": 0.5,
"anchorY": 0.5,
"colorMode": "random",
"colorStart": "#ffffff",
"colorEnd": "#ff4d4d",
"colorGradient": [
{
"position": 0,
"color": "#ffffff"
},
{
"position": 1,
"color": "#ff4d4d"
},
{
"position": 0.5,
"color": "#00e1ff"
},
{
"position": 0.25,
"color": "#ffae00"
},
{
"position": 0.75,
"color": "#c800ff"
}
],
"blend": "add",
"independentAlpha": "off",
"alpha": 1,
"alphaCurveMode": "跟随导出",
"alphaCurve": [
{
"x": 0,
"y": 0
},
{
"x": 0.1,
"y": 1
},
{
"x": 0.9,
"y": 1
},
{
"x": 1,
"y": 0
}
]
}
],
"imageWeightVersion": 1,
"name": "lizi",
"mode": "burst",
"rate": 5,
"streamBehavior": "loop",
"loopDurationFrames": 120,
"generateLoopStartAnimation": false,
"loopStartUseCustomDuration": false,
"loopStartDurationFrames": 30,
"generateLoopEndAnimation": false,
"loopEndUseCustomDuration": false,
"loopEndDurationFrames": 30,
"burstCount": 50,
"burstLoop": false,
"delay": 0,
"duration": 1,
"shape": "circle",
"showShape": false,
"shapeRangeVersion": 1,
"innerRadius": 150,
"outerRadius": 150,
"innerRectW": 0,
"innerRectH": 0,
"outerRectW": 60,
"outerRectH": 40,
"spawnPathId": 0,
"spawnPathDistribution": "fixed",
"radius": 30,
"rectW": 60,
"rectH": 40,
"centerX": 0,
"centerY": 0,
"rootRotation": 0,
"rootScaleX": 1,
"rootScaleY": 1,
"emissionAngleMode": "radial",
"direction": -90,
"spread": 0,
"coneDirection": 90,
"coneAngle": 60,
"lifeMin": 3,
"lifeMax": 3,
"lifeMode": "fixed",
"lifeCurve": [
{
"x": 0,
"y": 0
},
{
"x": 1,
"y": 1
}
],
"speedMin": 0,
"speedMax": 0,
"speedMode": "fixed",
"speedCurve": [
{
"x": 0,
"y": 0
},
{
"x": 1,
"y": 1
}
],
"scaleMin": 0.2,
"scaleMax": 0.6,
"scaleMode": "random",
"scaleAxisMode": "uniform",
"scaleYMin": 0.3,
"scaleYMax": 0.8,
"scaleCurve": [
{
"x": 0,
"y": 0
},
{
"x": 1,
"y": 1
}
],
"scaleYCurve": [
{
"x": 0,
"y": 0
},
{
"x": 1,
"y": 1
}
],
"scaleEndRatio": 0.3,
"initialRotationMode": "random",
"initialRotationMin": 0,
"initialRotationMax": 360,
"initialRotationCurve": [
{
"x": 0,
"y": 0
},
{
"x": 1,
"y": 1
}
],
"alpha": 1,
"alphaEnd": 0,
"rotationSpeedMin": 360,
"rotationSpeedMax": 720,
"speedOverLifeEnabled": false,
"speedOverLifeMode": "fixed",
"speedOverLifeMin": 1,
"speedOverLifeMax": 1,
"speedOverLifeCurve": [
{
"x": 0,
"y": 1
},
{
"x": 1,
"y": 1
}
],
"scaleOverLifeEnabled": false,
"scaleOverLifeMode": "curve",
"scaleOverLifeAxisMode": "uniform",
"scaleOverLifeMin": 0,
"scaleOverLifeMax": 1,
"scaleYOverLifeMin": 0,
"scaleYOverLifeMax": 1,
"scaleOverLifeCurve": [
{
"x": 0,
"y": 1
},
{
"x": 1,
"y": 1
}
],
"scaleYOverLifeCurve": [
{
"x": 0,
"y": 1
},
{
"x": 1,
"y": 1
}
],
"rotationOverLifeEnabled": true,
"rotationOverLifeMode": "random",
"rotationOverLifeCurve": [
{
"x": 0,
"y": 0
},
{
"x": 1,
"y": 1
}
],
"gravity": 980,
"gravityMode": "fixed",
"gravityMin": 980,
"gravityMax": 980,
"gravityDirection": -90,
"gravityCurve": [
{
"x": 0,
"y": 1
},
{
"x": 1,
"y": 1
}
],
"damping": 0.6,
"seed": 457291,
"colorStart": "#ffffff",
"colorEnd": "#ff4d4d",
"colorOverLife": false,
"blend": "add",
"alphaMode": "curve",
"curveMode": "线性",
"alphaCurve": [
{
"x": 0,
"y": 0
},
{
"x": 0.1,
"y": 1
},
{
"x": 0.91,
"y": 1
},
{
"x": 1,
"y": 0
}
],
"textureName": "star",
"textureFolder": "",
"alphaScale": 1,
"anchorX": 0.5,
"anchorY": 0.5,
"independentAlpha": "off",
"offsetX": 0,
"offsetY": 0,
"noise": true,
"noiseAmt": 10,
"noiseRange": 100,
"noiseSpeed": 1,
"useGravity": false,
"wind": false,
"windX": 0,
"windY": 0,
"windMode": "fixed",
"windMin": 100,
"windMax": 100,
"windDirection": 0,
"windCurve": [
{
"x": 0,
"y": 1
},
{
"x": 1,
"y": 1
}
],
"forceField": true,
"forceStrength": 20,
"forceRadius": 300,
"forceCenterX": 0,
"forceCenterY": 0,
"forceFalloff": "constant",
"vortex": true,
"vortexStrength": 10,
"vortexRadius": 300,
"vortexCenterX": 0,
"vortexCenterY": 0,
"vortexFalloff": "constant",
"attraction": false,
"attractionCenterX": 200,
"attractionCenterY": 0,
"attractionRadius": 20,
"attractionDuration": 0.5,
"attractionDelay": 0.1,
"attractionDelayMode": "particle",
"attractionPath": "curve",
"trail": true,
"trailConfigVersion": 3,
"trailResources": [
{
"id": 1,
"textureName": "trail",
"previewUrl": "/images/trail.png",
"weight": 100,
"locked": false,
"rotation": 0,
"colorMode": "particle",
"color": "#ffffff",
"colorGradient": [
{
"position": 0,
"color": "#ffffff"
},
{
"position": 1,
"color": "#ffffff"
}
],
"blend": "normal",
"alphaMode": "particle",
"alpha": 1,
"alphaCurve": [
{
"x": 0,
"y": 1
},
{
"x": 1,
"y": 1
}
],
"boneCount": 2,
"trailRatio": 100,
"lengthMode": "fixed",
"length": 100,
"lengthMin": 100,
"lengthMax": 100,
"widthSizeMode": "fixed",
"width": 10,
"widthMin": 100,
"widthMax": 100,
"widthMode": "particle",
"lifeLengthEnabled": false,
"lifeLengthCurve": [
{
"x": 0,
"y": 1
},
{
"x": 1,
"y": 1
}
],
"shapeEnabled": false,
"shapeCurve": [
{
"x": 0,
"y": 1
},
{
"x": 1,
"y": 1
}
]
}
],
"trailResourceVersion": 6,
"trailTextureName": "trail",
"trailPreviewUrl": "/images/trail.png",
"trailColorMode": "particle",
"trailColor": "#ffffff",
"trailColorGradient": [
{
"position": 0,
"color": "#ffffff"
},
{
"position": 1,
"color": "#ffffff"
}
],
"trailAlphaMode": "particle",
"trailAlpha": 1,
"trailAlphaCurve": [
{
"x": 0,
"y": 1
},
{
"x": 1,
"y": 1
}
],
"trailBoneCount": 3,
"trailLength": 100,
"trailWidth": 100,
"trailWidthMode": "particle",
"trailLifeLengthEnabled": false,
"trailLifeLengthCurve": [
{
"x": 0,
"y": 1
},
{
"x": 1,
"y": 1
}
],
"trailShapeEnabled": false,
"trailShapeCurve": [
{
"x": 0,
"y": 1
},
{
"x": 1,
"y": 1
}
],
"trailGridRows": 2,
"trailGridCols": 2,
"collision": false,
"collisionColliderIds": [],
"pathFollow": false,
"emitterFollow": false,
"emitterFollowMode": "none",
"emitterFollowPathId": 0,
"emitterFollowSpineId": 0,
"emitterFollowBoneName": "",
"emitterFollowBoneOffsetX": 0,
"emitterFollowBoneOffsetY": 0,
"emitterFollowBoneRotation": 0,
"emitterFollowBoneScaleX": 1,
"emitterFollowBoneScaleY": 1,
"emitterAngleMode": "fixed",
"emitterFollowCurve": [
{
"x": 0,
"y": 0
},
{
"x": 1,
"y": 1
}
],
"emitterFollowDuration": 2,
"emitterFollowSpace": "world",
"emitterFollowDirection": "forward",
"emitterFollowOffset": 0,
"showForceFieldShape": false,
"showVortexShape": false,
"showAttractionShape": true
}
}
],
"colliders": [],
"paths": [],
"spines": []
}
}
public/Preset/粒子扫过.json
+14 -4
View File
@@ -1,11 +1,11 @@
{
"format": "SpineParticle.EditorConfig",
"version": 1,
"savedAt": "2026-09-14T09:25:05.330Z",
"savedAt": "2026-09-22T08:56:24.085Z",
"editor": {
"viewScale": 0.4038832279793692,
"viewX": 12.678891156789803,
"viewY": -24.27929100039178
"viewX": 2.0968599067898026,
"viewY": 31.98633399960822
},
"settings": {
"backgroundX": 0,
@@ -501,7 +501,17 @@
"emitterFollowDuration": 1,
"emitterFollowSpace": "world",
"emitterFollowDirection": "forward",
"emitterFollowOffset": 0
"emitterFollowOffset": 0,
"showShape": false,
"showForceFieldShape": true,
"vortex": false,
"vortexStrength": 10,
"vortexRadius": 100,
"vortexCenterX": 0,
"vortexCenterY": 0,
"vortexFalloff": "linear",
"showVortexShape": true,
"showAttractionShape": true
}
}
],
public/Preset/方块粒子.json → public/Preset/长条方块.json
+16 -6
View File
@@ -1,11 +1,11 @@
{
"format": "SpineParticle.EditorConfig",
"version": 1,
"savedAt": "2026-09-19T10:10:58.215Z",
"savedAt": "2026-09-22T08:55:50.419Z",
"editor": {
"viewScale": 0.892857142857143,
"viewX": -108.5419187636735,
"viewY": -9.030568128049083
"viewX": 11.598706236326507,
"viewY": 20.938181871950917
},
"settings": {
"backgroundX": 0,
@@ -105,7 +105,7 @@
"imageWeightVersion": 1,
"name": "ParticleSystem1",
"mode": "stream",
"rate": 20,
"rate": 40,
"streamBehavior": "loop",
"loopDurationFrames": 60,
"generateLoopStartAnimation": true,
@@ -124,7 +124,7 @@
"outerRadius": 20,
"innerRectW": 0,
"innerRectH": 0,
"outerRectW": 200,
"outerRectW": 800,
"outerRectH": 36,
"spawnPathId": 0,
"spawnPathDistribution": "fixed",
@@ -505,7 +505,17 @@
"emitterFollowDuration": 2,
"emitterFollowSpace": "world",
"emitterFollowDirection": "forward",
"emitterFollowOffset": 0
"emitterFollowOffset": 0,
"showShape": false,
"showForceFieldShape": true,
"vortex": false,
"vortexStrength": 10,
"vortexRadius": 100,
"vortexCenterX": 0,
"vortexCenterY": 0,
"vortexFalloff": "linear",
"showVortexShape": true,
"showAttractionShape": true
}
}
],
src/core/particleConfig.ts
+3
View File
@@ -154,12 +154,14 @@ export function defaultConfig(): EmitterConfig {
forceCenterX: 0,
forceCenterY: 0,
forceFalloff: 'linear',
showForceFieldShape: true,
vortex: false,
vortexStrength: 10,
vortexRadius: 100,
vortexCenterX: 0,
vortexCenterY: 0,
vortexFalloff: 'linear',
showVortexShape: true,
attraction: false,
attractionCenterX: 200,
attractionCenterY: 0,
@@ -168,6 +170,7 @@ export function defaultConfig(): EmitterConfig {
attractionDelay: 0.1,
attractionDelayMode: 'particle',
attractionPath: 'curve',
showAttractionShape: true,
trail: false,
trailConfigVersion: 3,
trailResources: [{
src/core/particleTypes.ts
+3
View File
@@ -291,6 +291,7 @@ export interface EmitterConfig {
forceCenterX: number
forceCenterY: number
forceFalloff: FieldFalloff
showForceFieldShape: boolean
/** 开启漩涡力；正强度逆时针，负强度顺时针。 */
vortex: boolean
vortexStrength: number
@@ -298,6 +299,7 @@ export interface EmitterConfig {
vortexCenterX: number
vortexCenterY: number
vortexFalloff: FieldFalloff
showVortexShape: boolean
/** 开启吸附：粒子在延迟后从当前位置移动到全局吸附点，到达范围后死亡 */
attraction: boolean
attractionCenterX: number
@@ -307,6 +309,7 @@ export interface EmitterConfig {
attractionDelay: number
attractionDelayMode: 'global' | 'particle'
attractionPath: 'linear' | 'curve'
showAttractionShape: boolean
/** 开启拖尾 */
trail: boolean
trailConfigVersion: number
src/views/particle-panel/ParticleModifiersSection.vue
+3
View File
@@ -80,6 +80,7 @@
</select>
</label>
<div class="modifier-hint">正数吸向中心 · 负数向外排斥 · 可在画布内拖动力场圆</div>
<label class="switch-row"><input type="checkbox" v-model="sys.config.showForceFieldShape" /><span class="switch-ui"></span><span>显示形状</span></label>
</div>
</div>
<div class="modifier-item">
@@ -100,6 +101,7 @@
</select>
</label>
<div class="modifier-hint">正数逆时针 · 负数顺时针</div>
<label class="switch-row"><input type="checkbox" v-model="sys.config.showVortexShape" /><span class="switch-ui"></span><span>显示形状</span></label>
</div>
</div>
<div class="modifier-item">
@@ -126,6 +128,7 @@
</select>
</label>
<div class="modifier-hint">延迟后从当前位置开始吸附 · 到达红色范围即死亡 · 可在画布内拖动吸附圆</div>
<label class="switch-row"><input type="checkbox" v-model="sys.config.showAttractionShape" /><span class="switch-ui"></span><span>显示形状</span></label>
</div>
</div>
<div class="modifier-item">
src/views/particle-panel/useParticlePanel.ts
+3 -3
View File
@@ -325,10 +325,10 @@ const MODULE_RESET_KEYS: Record<Exclude<ResetModule, 'export'>, string[]> = {
'noise', 'noiseAmt', 'noiseRange', 'noiseSpeed',
'useGravity', 'gravity', 'gravityMode', 'gravityMin', 'gravityMax', 'gravityDirection', 'gravityCurve',
'wind', 'windX', 'windY', 'windMode', 'windMin', 'windMax', 'windDirection', 'windCurve',
'forceField', 'forceStrength', 'forceRadius', 'forceCenterX', 'forceCenterY', 'forceFalloff',
'vortex', 'vortexStrength', 'vortexRadius', 'vortexCenterX', 'vortexCenterY', 'vortexFalloff',
'forceField', 'forceStrength', 'forceRadius', 'forceCenterX', 'forceCenterY', 'forceFalloff', 'showForceFieldShape',
'vortex', 'vortexStrength', 'vortexRadius', 'vortexCenterX', 'vortexCenterY', 'vortexFalloff', 'showVortexShape',
'attraction', 'attractionCenterX', 'attractionCenterY', 'attractionRadius',
'attractionDuration', 'attractionDelay', 'attractionDelayMode', 'attractionPath',
'attractionDuration', 'attractionDelay', 'attractionDelayMode', 'attractionPath', 'showAttractionShape',
'trail', 'trailConfigVersion', 'trailResources', 'trailResourceVersion',
'trailTexture', 'trailTextureName', 'trailPreviewUrl', 'trailColorMode', 'trailColor',
'trailColorGradient', 'trailAlphaMode', 'trailAlpha', 'trailAlphaCurve',
src/views/stage/emitterGuides.ts
+3 -3
View File
@@ -116,7 +116,7 @@ export function drawForceField(store: EditorStore, forceFieldGfx: Graphics | nul
const sys = store.systems.find((item) => item.id === store.activeId)
if (sys?.visible === false) return
const cfg = sys?.config
if (!cfg?.forceField || cfg.forceRadius <= 0) return
if (!cfg?.forceField || !cfg.showForceFieldShape || cfg.forceRadius <= 0) return
const x = cfg.forceCenterX
const y = -cfg.forceCenterY
const color = cfg.forceStrength >= 0 ? 0x58c7ff : 0xff6b7a
@@ -140,7 +140,7 @@ export function drawVortex(store: EditorStore, vortexGfx: Graphics | null) {
const sys = store.systems.find((item) => item.id === store.activeId)
if (sys?.visible === false) return
const cfg = sys?.config
if (!cfg?.vortex || cfg.vortexRadius <= 0) return
if (!cfg?.vortex || !cfg.showVortexShape || cfg.vortexRadius <= 0) return
const x = cfg.vortexCenterX
const y = -cfg.vortexCenterY
const color = cfg.vortexStrength >= 0 ? 0xb97cff : 0xffa24c
@@ -168,7 +168,7 @@ export function drawAttraction(store: EditorStore, attractionGfx: Graphics | nul
const sys = store.systems.find((item) => item.id === store.activeId)
if (sys?.visible === false) return
const cfg = sys?.config
if (!cfg?.attraction) return
if (!cfg?.attraction || !cfg.showAttractionShape) return
const x = cfg.attractionCenterX
const y = -cfg.attractionCenterY
const radius = Math.max(0, cfg.attractionRadius)