Particle Emitter Element
Particle Emitter Elements let you spawn dynamic, GPU-accelerated particle effects, like fire, smoke, sparkles, or rain directly in your UI Editor layouts.
When to Use a Particle Emitter Element
- Ambient Effects
Add drifting smoke, falling leaves, or drifting dust to set mood. - Feedback & Flourish
Play a burst of sparkles or confetti on button clicks, level-up, or form submits. - Loading & Progress
Show swirling particles while content loads or during transitions. - Attention & Guidance
Gently draw the eye to important UI sections (e.g. glowing ember around a “Start” button).
Particle Emitter Element Properties
| Property | Type | Details |
|---|---|---|
| Name | text | Name of the element. Make sure the name of the element is unique if the element needs to be accessible from code (Enterprise Plan only). |
| Config | File picker | Emit configuration file path for the element. Use the Pixi Particles Editor to create particle emitter configuration files. |
| Textures | File Picker list | Textures (also known as sprites or images) that your Particle Emitter will use for the effect. |
| Mode | Dropdown | The particle texture mode, which determines what order the textures are used in the particle effect. |
| Framerate | fps | The speed that the animation will play at. Higher is faster, lower is slower. |
| Anchor | .% | Used to position the anchor point of the element (x: 0, y: 0 = top/left, x: 1, y: 1 = bottom/right) |
| Parent Align | .% | Position of the element relative to its parent’s position. (x: 0, y: 0 = top/left, x: 1, y: 1 = bottom/right) |
| Parent Size | .% | Use to resize the element relative to its parent's size (x: 1, y: 1 = match parent size, x: 0.5, y: 0.5 = half of parent size, x: 0, y: 0 = disables parent relative sizing). |
| Content size | .% | Use to set the element's size automatically based on its content. (x: 1, y: 1 = match parent size, x: 1, y: 1 = matches the size of the provided sprite, x: 2, y: 2 = doubles the size of the provided sprite). |
| Size | px | Explicitly set pixel size (logical screen units). |
| Offset | px | Additional pixel offset from the element's position. |
Transform Properties
Transform properties affect the Element, as well as any child elements nested within the Element.
| Property | Type | Notes |
|---|---|---|
| Pivot | .% | Pivot point for any transformations applied to the element. (x: 0, y: 0 = top/left, x: 0.5, y: 0.5 = center, x: 1, y: 1 = bottom/right). |
| Angle | Degrees | Rotate the element around its Pivot point. |
| Skew | Degrees | Skew along X/Y axes around the Pivot point. |
| Scale | .% | Percentage scale of the element. Setting this value to x: 2, y: 2 scales the element twice as large. |
| Alpha | .% | Transparency applied to the element. The default value 1 displays the element fully opaque, while 0.5 would make the element semi-transparent. Setting the value to 0 makes the element completely disappear. |
Modifiers
Modifiers are vital to creating different visual states for your elements in the UI Editor. They allow you to set up visual state changes and transitions using various properties such as size, position, alpha, etc.
Emits
Emits are useful for stopping and starting your Particle Emitters. They are typically used to create an "on" and "off" state for the Particle Emitter, which can be used by Events to stop or start particle effects.
| Property | Type | Notes |
|---|---|---|
| State | text | The name of the Emit state. This is used to access the Emit from Events. |
| Emit | checkbox | Enable or disable the particle emitter. |
| Delay | seconds | The delay in seconds before the emitter is played. |
Sounds
Sounds are very similar to Modifiers, but instead of creating visual effects, they create sound effects which can be triggered using Events.
Triggers
Triggers allow you to add interactivity to your QSApp by enabling the ability to trigger modifiers and events when the trigger is activated. You can add triggers for actions like clicking, hovering, and dragging elements.