Ember

A 2D particle system for Roblox GUIs. Makes it easy to add particle effects to your interfaces.

What it does

Ember lets you use Roblox's ParticleEmitter on 2D GUIs instead of just 3D parts. You can emit particles at specific screen positions or randomly within GUI frames.

Installation

Add to your wally.toml:

[dependencies]
ember = "eoeyy/ember@1.0.2"

Basic Example

local Ember = require(Packages.ember)

-- Create a regular ParticleEmitter
local emitter = Instance.new("ParticleEmitter")
emitter.Texture = "rbxasset://textures/particles/sparkles_main.dds"
emitter.Lifetime = NumberRange.new(1, 3)
emitter.Rate = 50
emitter.Speed = NumberRange.new(3, 5)

-- Wrap it with Ember
local emitter2D = Ember.new(emitter)

-- Emit particles at specific positions
emitter2D:EmitAtPosition(20, UDim2.fromScale(0.5, 0.5)) -- Center of screen

-- Emit particles randomly within a frame
emitter2D:EmitInParent(15, myFrame)

-- Auto emit (continuous)
emitter.Enabled = true

-- Clear all particles
emitter2D:Clear()

Size Modes

Ember supports different particle sizing modes:

• ScreenScale: Size relative to screen dimensions (default)
• ParentScale: Size relative to parent container
• Pixels: Direct pixel size
• Rem: Responsive rem-based sizing

emitter2D.SizeMode = "ParentScale"

React Support

If you're using React Lua, Ember has built-in hooks with automatic parenting:

local EmberReact = require(Ember.React)

local function MyComponent()
    local frameRef = React.useRef()
    local emitter = React.useMemo(function()
        local e = Instance.new("ParticleEmitter")
        e.Texture = "rbxasset://textures/particles/sparkles_main.dds"
        e.Speed = NumberRange.new(3, 5)
        return e
    end, {})
    
    -- Particles automatically parent to frameRef
    local controls = EmberReact.useParticles(emitter, {
        parentRef = frameRef,
        sizeMode = "ParentScale"
    })
    
    return React.createElement("Frame", {
        ref = frameRef,
    }, {
        Button = React.createElement("TextButton", {
            Text = "Click for particles!",
            [React.Event.Activated] = function()
                controls.emitAtPosition(10)
            end,
        })
    })
end