Engine Integration

🎮 Cocos Creator 3.x Integration

Step 1: Export from SlotVFX

Open the Export modal in SlotVFX. You have three export modes:

• Bundle — Runtime scripts + project data + textures (everything in one ZIP)
• Runtime Only — Just the TypeScript runtime scripts (download once per project)
• Project Data Only (Unified) — Just project_data.json + textures (for iterating on effects)

The Unified Project checkbox exports all particles in a single project_data.json. You can also Export Selection — right-click entities to export only specific particles, paths, force fields, effects, images, and Spine actors.

Step 2: Particle Runtime Options

• Standard — Sprite-per-particle rendering. Full feature support. Recommended for up to ~50–100 particles.
• Batched (WIP) — GPU mesh batching for thousands of particles. Coming soon.
• Native 3D (WIP) — Extends Cocos Creator's built-in ParticleSystem. Requires 3D camera.

Step 3: Add Scripts to Cocos

Copy the exported Scripts/ folder into your Cocos Creator project's assets/ directory. The runtime includes:

• AdvancedParticleSystem.ts — Core particle renderer for Cocos
• SlotFXOrchestrator.ts — Manages all particles, paths, force fields, state machine, and VFX
• VFX modules for spritesheet playback (Energy Beam, Lightning exports)

Step 4: Load & Play

import { SlotFXOrchestrator } from './Scripts/SlotFXOrchestrator';

// In your component's onLoad:
const orchestrator = new SlotFXOrchestrator(this.node);
await orchestrator.loadProject('project_data.json', 'textures/');
orchestrator.play();

Step 5: Runtime API (Cocos)

// Trigger state machine transitions
orchestrator.trigger('win');
orchestrator.trigger('idle');

// Control individual emitters
orchestrator.setEmitterVisible('sparkle_01', false);
orchestrator.setEmissionRate('rain', 200);

// Move force fields dynamically
orchestrator.setForceFieldPosition('magnet', 400, 300);
orchestrator.setForceFieldStrength('magnet', 500);

// Play/pause/seek timeline
orchestrator.play();
orchestrator.pause();
orchestrator.resume();
orchestrator.seek(0.5); // Jump to 0.5s

// Emitter convenience wrappers
orchestrator.triggerBurst('sparkle_01', 50);
orchestrator.setEmitterTimeScale('sparkle_01', 0.5);
orchestrator.stopParticle('sparkle_01');
orchestrator.resetParticle('sparkle_01');

// Timeline control
orchestrator.setTimelineLoop(true);
orchestrator.setTimelineDuration(5.0);
const t = orchestrator.getTimelineTime();

// FX layer control (per-emitter proxy)
orchestrator.setParticleFxParam('sparkle_01', 0, 'intensity', 0.8);
orchestrator.setParticleFxEnabled('sparkle_01', 0, true);

// VFX spritesheet control
orchestrator.playVFX('energy_beam_01');
orchestrator.stopVFX('energy_beam_01');

📚 View full API Reference →

---

🕹️ PixiJS Integration

Step 1: Export for PixiJS

In the Export modal, click "PixiJS Runtime" to download the runtime scripts, or use the main export button which includes project_data.json with web-standard Y-down coordinates.

You can also use the Quick Test button in the editor to preview your effects in PixiJS without exporting — this opens a live PixiJS preview directly in the browser.

Step 2: Add the Runtime

The PixiJS runtime is a self-contained SlotFXPixiRuntime class (3000+ lines) that handles:

• Full particle emission with all SlotVFX shapes (point, circle, ring, rectangle, image mask with A→B morphing)
• Force fields (attract, repel, vortex, magnetic, kill zones)
• Path following with progress curves and wiggle
• Curl noise and turbulence for organic motion
• Sprite sheet animation and color ramp gradients
• VFX spritesheet playback (pre-rendered Energy Beam, Lightning, Image FX)
• Spine asset rendering
• State machine with trigger-based transitions
• Timeline animation and automation (LFO waves)
• Z-index sorting for Spine interleaving

Step 3: Load & Play (PixiJS)

// Initialize PixiJS app
const app = new PIXI.Application({ width: 1280, height: 720 });
document.body.appendChild(app.view);

// Create SlotVFX runtime
const sfx = new SlotFXPixiRuntime(app);

// Load exported project
const config = await fetch('project_data.json').then(r => r.json());
await sfx.load(config, 'textures/');

// Start playback
sfx.play();

Step 4: Runtime API (PixiJS)

// Trigger state machine transitions
sfx.trigger('bonus_start');
sfx.trigger('idle');

// Control emitters
sfx.setEmitterVisible('sparkle', false);
sfx.setEmissionRate('coins', 100);

// Move runtime container
sfx.container.position.set(640, 360);

// Play/pause
sfx.play();
sfx.pause();
sfx.seek(1.5);

// VFX spritesheet control
sfx.playVFX('lightning_01');
sfx.stopVFX('lightning_01');

---

🎞️ VFX Spritesheet Export

Energy Beam, Lightning, and Image FX effects are rendered as spritesheets during export. These are pre-rendered frame sequences that play back at runtime without needing GPU shaders in the game engine.

Spritesheet Settings

• FPS — Frame rate (10–120, default 30)
• Duration — Capture duration in seconds
• Frame Size — Width × Height per frame (64–1024px)
• Grid — Columns × Rows (auto-calculated or manual)

Both Cocos and PixiJS runtimes automatically load and play these spritesheets from the exported VFX/ folder.

---

🔀 State Machine Integration

The state machine is the recommended way to manage game-state-driven VFX changes without writing code for each transition.

How It Works

1. Define States — Create named states like "idle", "spin", "win", "bonus" in the States panel
2. Set Overrides — Each state overrides specific properties (particle visibility, emission rates, force field strengths, VFX parameters, image positions, etc.)
3. Add Transitions — Connect states with named triggers and blend durations
4. Trigger at Runtime — Call orchestrator.trigger('win') or sfx.trigger('win')

The state machine is exported as part of project_data.json and works identically in both Cocos and PixiJS runtimes.

---

⚡ Performance Tips

---

🐛 Troubleshooting