UIEmitter Module - UI Particles [Version 2: recoded update]

[Rylvns (Rylen)]

Hello Developers.

I’ve made a new impactful module to make your UI designs come to life - introducing UIEmitter!

UIEmitter Module - UI Particles [Version 2: recoded update]

UIEmitter v2-ab What’s New Fully rewritten for performance and flexibility. Properties are now like ParticleEmitter. Support for NumberSequence & ColorSequence. Pass randomized values directly as properties. Unified Emit() function - no server/client split. More features and cleaner API. Feature Breakdown Random Number Ranges You can pass a {Min, Max} table to get a random number between the two, each time the particle is emitted.Size = {8, 24}, -- Emits with a random size between 8 and 24…

With UIEmitter you could:

• Create celebratory confetti explosions for victories and milestones or even purchases.
• Shower players with stars or sparkles when they level up or achieve a goal.
• Mimic fire, smoke, rain, or magical auras within UI components.
• Add gentle animations or moving patterns behind menus and screens.
• Use shimmering effects or subtle trails to highlight important information.
• Create subtle particle bursts on button clicks or hovers.

---

Heres some previews of some confetti I made from the module.

---

How to use
Setup:

local UIEmitter = require(game.ReplicatedStorage:FindFirstChild("UIEmitter")) -- get & require the module
local Emitter = UIEmitter.New() -- create a new screen gui dedicated to these emits

Example usage:

Emitter:Emit({
	Size = Vector2.new(10, 10),
	Position = Vector2.new(0, 0),
	Acceleration = Vector2.new(0, 0),
	Gravity = Vector2.new(0, 0),
	FrictionCoefficient = 1,
	LifeTime = 4,
	Properties = {},
	FadeIn = {
		Duration = 1,
		EasingStyle = Enum.EasingStyle.Linear,
		EasingDirection = Enum.EasingDirection.InOut,
		TweenProperties = {},
	},
	FadeOut = {
		Duration = 1,
		EasingStyle = Enum.EasingStyle.Linear,
		EasingDirection = Enum.EasingDirection.InOut,
		TweenProperties = {},
	},
	Texture = "",
});

---

---

Would you use this?

• Definitely!
• Yes, when I get the chance to.
• I’m not sure.
• Probably not.
• No, sorry.

What do you think about UIEmitter?

• Love it! Super easy to use and looks great.
• Seems promising, but I’d like to see more features.
• Fun to experiment with, not sure if it’s essential for my projects.
• I wish it integrated better with my existing UI workflow.
• Too complex for my needs.
• I’ve encountered some bugs/performance issues.
• Not worth the effort compared to other solutions.

[SavAlt17 (sav_YT)]

make a github repository about this, it would be way easier to give feedback!

edit: are you going to try and multi-thread this code for performance?

[JunisL0L (clown_junis)]

This is byfar one of the most unique modules out there I am 100% going to use this in the evorooms development!

[OVERKILLCREATIONS]

Is it possible for the module to create an outline effect similar to what’s shown here?

Show off your UI designs

Style: SciFi Program Used: Roblox, paint.net , Gimp Here’s a few prototype SciFi UIs I have been working on: Since I am not an artist I use paint.net and Roblox to design UIs, occasionally I use gimp. I’m a huge fan of glowy UIs with little eye candy / animated bits. Still Images Video:

[Rylvns (Rylen)]

Those effects are for buttons, not for particles. Although I don’t know what you’re trying to show me since there’s multiple effects in that message.
Can you be more specific?
Thanks.

[Rylvns (Rylen)]

New version: Version 1-cb

Added

• UIEmitterModule.From(<GuiObject>)
  This can be used on the server, and client. It’s used for gui objects like SurfaceGui and BillboardGui.
• Some code optimization.

GitHub Repository
Roblox Marketplace

I’m getting an error when I try to distribute the module on marketplace. So I’m not sure if you can even get it. This is why I created the GitHub Repository.

If you want anything else to be added please tell me. I can’t read your mind.

[Rylvns (Rylen)]

New version: Version 1-ea

---

Changelog
Added:

• Emit presets.
  I’ve added a default preset called “Confetti”.
  More default presets will be added in future versions.
• Performance upgrades.

Fixed:

• FadeIn & FadeOut tweens not playing.
• Memory leaks.

---

How to use
Setup:

Look inside the default Confetti preset module for an example of how to make your own preset.

Usage:

Emitter:EmitPreset(Preset, Configs)

Example usage:

Emitter:EmitPreset("Confetti", {
	Size = Vector2.new(3, 5),
	Position = Vector2.new(100, 200),
	ShootToPosition = Vector2.new(100, 100),
	AccelerationFraction = 10,
	Gravity = Vector2.new(0, 0),
	FrictionCoefficient = 1.02,
	LifeTime = 1.3,
});

---

Get Version 1-ea
Roblox Creator Store
GitHub Repository

[imloadingdot2 (agoraphobe)]

Community: “wE wAnt pArtIcLe rEnDeRiNg iN vIeWpOrT fRaMeS ”
This dude:

But fr this module is real cool, good work man

[IrisYouLuck]

You mind showing the confetti example???

Is there a WIKI or documentation for this? How about more effects or showcase how effects can be created and utilized?

[Rylvns (Rylen)]

@IrisYouLuck

Is there a WIKI or documentation for this?

I gave you the emit code example. That’s all you should need.

@IrisYouLuck

How about more effects or showcase how effects can be created and utilized?

I created the confetti preset, if you’re a scripter you would know what to do by learning how I did my preset.

[oke_dokie]

Awesome module, lots can be built from this.

Ended up modifying the module slightly so Screen GUIs do get cleaned up after all particles are destroyed.

Would be neat to see a couple different presets, do you have this in source control anywhere? (git link dead)

[Rylvns (Rylen)]

@oke_dokie

do you have this in source control anywhere?

no i dont :<, my git got suspended

@oke_dokie

Ended up modifying the module slightly so Screen GUIs do get cleaned up after all particles are destroyed.

ill add like a :Destroy() thing for the next version that would be good probably

@oke_dokie

Awesome module, lots can be built from this.

i agree, thanks

[Rylvns (Rylen)]

UIEmitter v2-ab

---

What’s New

• Fully rewritten for performance and flexibility.
• Properties are now like ParticleEmitter.
• Support for NumberSequence & ColorSequence.
• Pass randomized values directly as properties.
• Unified Emit() function - no server/client split.
• More features and cleaner API.

Feature Breakdown

• Random Number Ranges
  You can pass a {Min, Max} table to get a random number between the two, each time the particle is emitted.

  Size = {8, 24}, -- Emits with a random size between 8 and 24
  LifeTime = {1, 3}, -- Particle lives between 1 and 3 seconds
  

• Random Vector2 Ranges
  For properties such as Velocity, Direction, or Gravity, you can use a nested table to define randomized ranges. Format it as { {MinX, MaxX}, {MinY, MaxY} }.
  If either the X or Y entry isn’t a table, it will be treated as a fixed value.

  Velocity = { {5, 20}, 40 }, -- X will be randomized between 5 and 20; Y stays fixed at 40
  Direction = { {-1, 1}, {-1, 1} }, -- X and Y are both random between -1 and 1
  

• NumberSequence Support
  You can pass a NumberSequence, optionally using the .Envelope property for randomization:

  Transparency = NumberSequence.new{
      NumberSequenceKeypoint.new(0, 0, 0.1),
      NumberSequenceKeypoint.new(1, 1, 0.1),
  }
  

  Same goes for ColorSequence’s.

Code Examples

Emit

UIEmitter:Emit(Amount_of_particles, {
	Texture = "",
	Velocity = {{-8, 8}, {6, 12}},
	Direction = {{-1, 1}, -1},
	Gravity = Vector2.new(0, 20),
	Drag = 0,
	LifeTime = 1,
	ZIndex = 100,
	Size = NumberSequence.new{NumberSequenceKeypoint.new(0, 50, 0), NumberSequenceKeypoint.new(1, 50, 40)},
	Squash = 1,
	Color = ColorSequence.new{ColorSequenceKeypoint.new(0, Color3.new(0.4, 0.4, 0.4)), ColorSequenceKeypoint.new(1, Color3.new(1, 1, 1))},
	Transparency = 0,
	Rotation = 0,
	RotationSpeed = 0,
	Properties = {
		Position = UDim2.fromOffset(Camera.ViewportSize.X/2, Camera.ViewportSize.Y/2),
	},
}, Parent)

Presets

local Preset = UIEmitter:GetPreset("your_preset")

Preset:Emit( --[[ Custom args for your preset ]] )

---

UIEmitter Version 2 - Creator Store

What should come next?

• Particle collisions with collision groups
• Particle methods, example: “.OnUpdate:Connect()”
• Optimization using a single heartbeat connection
• Max particles limit config
• Particle emission rate config
• Spritesheet texture animation support

[Lord_BradyRocks]

Is there an editable testing place, link… like at the top of the post?..

[Rylvns (Rylen)]

no sorry, how would u even intend for it to work…

[Lord_BradyRocks]

what? u just publish a place that has an example, that is editable…

[Rylvns (Rylen)]

oh i thought you meant like an editable example where you edit configs and everything

i dont see the need for this since the “test” preset is an example all you do is emit it with its configs

local er = require(game.ReplicatedStorage["UIEmitter Version 2-ab"])

local ss = workspace.CurrentCamera.ViewportSize
local cs = ss/2

local testtimetick = os.time();

while task.wait(1) do
	er:GetPreset("test"):Emit({Amount = 50, pos = UDim2.fromOffset(cs.X, cs.Y), Parent = script.Parent});
	if os.time()-testtimetick >= 10 then
		break;
	end;
end;

put under a screen gui

[Lord_BradyRocks]

umm,

when I run the above ( beside changing the first line to …

local er = require(game.ReplicatedStorage["UIEmitter"])

I get the error

 03:05:23.453  Players.Lord_BradyRocks.PlayerGui.LocalScript:12: attempt to call missing method 'GetPreset' of table  -  Client - LocalScript:12
  03:05:23.453  Stack Begin  -  Studio
  03:05:23.453  Script 'Players.Lord_BradyRocks.PlayerGui.LocalScript', Line 12  -  Studio - LocalScript:12
  03:05:23.453  Stack End  -  Studio

on line of the code

er:GetPreset("test"):Emit({Amount = 50, pos = UDim2.fromOffset(cs.X, cs.Y), Parent = script.Parent});

[Rylvns (Rylen)]

You’re still using version 1 of UIEmitter.
Version 2 is a completely new asset in the creator store which you will have to add to your inventory.

[Lord_BradyRocks]

I got the model right before I tried it from the creator store.