PixiJS Integration Guide

1 Export Your Project

In the SlotVFX editor, open the Export menu and choose PixiJS Bundle. This generates a ZIP containing everything you need.

project_name/
├── project_data.json        # Unified effect data
├── Particles/               # Particle textures (.png)
│   └── *.png
├── VFX/                     # VFX spritesheets
│   └── *_sheet.png
├── Scripts/
│   └── SlotFXPixiRuntime.js # Runtime engine
├── index.html               # Ready-to-run example
└── README.txt               # Quick reference

2 Add to Your Project

Copy the exported files into your project. Include SlotFXPixiRuntime.js as a script tag or import it as a module.

<!-- Include PixiJS (v7 or v8) -->
<script src="https://pixijs.download/v7.4.2/pixi.min.js"></script>

<!-- Include SlotVFX Runtime -->
<script src="Scripts/SlotFXPixiRuntime.js"></script>

Or if using a bundler (Webpack, Vite, etc.):

import { SlotFXPixiRuntime } from './Scripts/SlotFXPixiRuntime.js';

3 Initialize and Play

Create a PixiJS Application, load the project data, and start playback.

// Create PixiJS app
const app = new PIXI.Application({
    width: 800,
    height: 600,
    backgroundColor: 0x000000,
    antialias: true
});
document.body.appendChild(app.view);

// Load and play
const data = await fetch('project_data.json').then(r => r.json());
const runtime = new SlotFXPixiRuntime(app);
await runtime.load(data, 'Particles');
runtime.play();

4 Runtime Controls

The runtime exposes a full API for controlling playback, emitters, force fields, and more.

// Basic playback
runtime.play();
runtime.stop();
runtime.pause();           // Pause (keeps state)
runtime.resume();          // Resume from pause
runtime.seek(1.5);         // Jump to 1.5 seconds

// Speed and position
runtime.setTimeScale(0.5); // Half speed (slow-mo)
runtime.setPosition(400, 300); // Center the effect

// Timeline control
runtime.setTimelineLoop(true);      // Loop forever
runtime.setTimelineDuration(5.0);   // Override duration
runtime.getTimelineTime();          // Current time

5 Emitter Control

Access individual emitters by name or ID for fine-grained control.

// Get emitter by name
const emitter = runtime.getEmitter('Sparkles');

// Trigger a particle burst
runtime.triggerBurst('Sparkles', 50);

// Show/hide emitters
runtime.setEmitterVisible('Sparkles', false);

// Override emission rate
runtime.setEmitterEmissionRate('Sparkles', 200);

// Direct emitter access
emitter.burst(20);
emitter.reset();

6 State Machine

If your project defines states (idle, win, bonus, etc.), control them with triggers.

// Trigger transitions
runtime.trigger('start_bonus');    // idle → bonus
runtime.trigger('end_bonus');      // bonus → idle

// Force-set a state
runtime.setState('big_win_state_id');

// Query state
runtime.getCurrentState();         // state ID
runtime.getCurrentStateName();     // "Bonus Mode"
runtime.getAvailableTriggers();    // ['end_bonus']

7 VFX Spritesheets

Energy Beam and Lightning effects are exported as spritesheets and played automatically by the runtime.

// Access VFX players
for (const [id, player] of runtime.vfxPlayers) {
    player.play();
    player.stop();
    player.reset();
}