UIParticles // A plugin and module for all your UI particle needs!

Resources Community Resources
, , , ,
#1

t
t1500Ɨ200 29.6 KB

What is this?

UIParticles is a simple yet effective plugin/module designed for creating and displaying UI particles. It is light, simple to set up and easily customizable.

Functionality

  • Flipbook support!
  • Copies almost all properties from the default Roblox ParticleEmitter!
  • Preview UI particles before coding them in your game!
  • Ability to automatically update the module to the last version with the plugin updates!
  • Wide customizability!
  • Easy to understand API!

Installation

Install the free Plugin from the Roblox Marketplace to get started!

Plugin details

Preview button

This button opens up a new tab that allows you preview your UI Particle Presets. To use this, simply select an existing UI Particle Preset and it will automatically show up in the window. You can click on the Particle Preview Screen to manually emit particles. You may edit the properties of the particleā€™s attributes while previewing it.

Screenshot_1379

Note that the properties inside this tab are only used for previewing and do not edit the actual particle!

Create New Config button

This button creates a new UI Particle Preset using the default config. You must first select an object to parent the preset to!

Insert Module button

This button inserts the UIParticleEmitter module into your currently selected instance (or ReplicatedStorage if nothing is selected) that you can use for coding. To see how to code with this module, please view the Coding section.

Screenshot_1383

Update Modules button

This button allows you to automatically update any outdated UIParticleEmitter module in your current place.
Please note that the plugin has to be manually updated first, signified by a yellow text at the bottom of the plugin stating that thereā€™s a new update available.
This button only shows up if your UIParticleModule is outdated.

Getting Started
  1. First, select an Instance where you want to keep all of your presets. I recommend having a folder named ā€œUIParticlePresetsā€ in ReplicatedStorage for organization.

Screenshot_1382

Screenshot_1381

  1. Create a new UI Particle Preset using the Create New Config button on the plugin. The new config should be automatically selected upon creation.
  2. Open the Preview tab of the plugin and, if not already selected, select the newly created UI Particle Preset. You may now edit the preset to your liking!
    If youā€™re not planning to use Flipbooks, delete the Flipbook Configuration folder found inside of the Preset folder and use the Image property inside of the Preset instead.
All Editable Properties

If you set a property to a NumberRange, then the particle will randomize that property in the set interval.

  • Acceleration : Vector2 (in pixels) - this Vector2 is added to the Velocity every second.
  • AffectedByParentTransparency : bool - decides if the particle parentā€™s BackgroundTransparency property also applies to the particles inside of it. For example, if you have a BackgroundTransparency of 0.5, then 0.5 will be added to the particleā€™s current transparency
  • Color : Color3 or ColorSequence - color of the particle
  • Enabled : bool - decides if the particle emitter will emit particles based on the Rate
  • Image : number or string - sets the image of the particle
  • Lifetime : number or NumberRange - sets for how long particles will remain on the screen after emitting
  • LockedToParent : bool - decides if the particle will be locked to the parent or not. Works the same way as Robloxā€™s ParticleEmitter LockedToPart property
  • Parent : Instance - sets the parent of the particle. Required in order to display a particle!
  • Rate : number - how many particles every second will be emitted, if Enabled is true
  • ResamplerMode : "Default" or "Pixelated" - sets the ResampleMode of the particle
  • Rotation : number or NumberRange - describes the rotation of the particle upon emitting
  • RotationSpeed : number or NumberRange - how much rotation gets added every second to the particle.
  • Size : number or NumberSequence (in pixels) - describes how large the particle is on the screen.
  • SizeIsInPixels: bool - determines if the particle will use Scale or Offset for sizing the particle
  • SizeDominantAxis: X or Y - sets the SizeConstraint of the particle (AKA what Axis will take priority over the other while using Scale sizing)
  • SizeMultiplier : number or NumberRange - how much to multiply the Size by
  • Speed : number or NumberRange - how much to multiply the Velocity by
  • SpreadAngle : number or NumberRange - how much spread is applied to the particleā€™s Velocity
  • StartPosition : UDim2 - selects a certain point of the parent to use, instead of being randomized.
  • Transparency : number or NumberSequence - transparency of the particle
  • Velocity : Vector2 (in pixels) - describes where the particle will go upon being emitted.
  • ZIndex : number - ZIndex to use for the particle (for overlapping UI elements).
Default Config

Inside of the module script you insert with the plugin, you can find a DefaultConfig Configuration folder. You can change the default attributes of it, but I donā€™t recommend deleting any of them as it may break the module completely.
This config folder also carries over when you update your module.

Flipbook Properties
  • FPS : number - framerate of the flipbook
  • Image : number - ID of the flipbook image
  • Size : Vector2 (in pixels) - Size of the original image. Recommended to leave as-is, unless you know the specific size of the flipbook image and itā€™s not displaying properly.
  • Speed : number - speed of flipbook playback
  • Tiles : number - how many tiles total there are in the flipbookā€™s image
Coding Guide

Coding with the module is fairly easy.

  1. First, you must insert the UIParticleEmitter module using the Insert Module plugin button. You can put it anywhere, but I recommend putting it into a folder named Modules inside ReplicatedStorage.

  2. Now, create a LocalScript inside of a Frame, as the module can only be used on client. We must require the script before we do anything:

-- Your module path may not match!
local UIParticleEmitter = require(game.ReplicatedStorage.Modules.UIParticleEmitter)
  1. Now that weā€™ve gotten all the functions of the module script, lets create a new UI Particle Emitter!
-- Change PresetConfig to the preset you want to use.
-- You can use a table of properties instead of a configuration folder if you want!
local PresetConfig = game.ReplicatedStorage.UIParticlePresets.Preset
local NewEmitter = UIParticleEmitter.new(PresetConfig)
  1. We created a new particle emitter! Now letā€™s start rendering it.
NewEmitter.Parent = script.Parent -- Can set it to any frame!
NewEmitter.Enabled = true -- Starts emitting the particle
  1. Congrats! You just made your first UI particle emitter! You can edit basically any of the properties in the script. If you want to learn more about all the different properties and functions you can utilize, please view the API and All Editable Features tabs!
Final Script 
-- Your module path may not match!
local UIParticleEmitter = require(game.ReplicatedStorage.Modules.UIParticleEmitter)

-- Change PresetConfig to the preset you want to use.
-- You can use a table of properties instead of a configuration folder if you want!
local PresetConfig = game.ReplicatedStorage.UIParticlePresets.Preset
local NewEmitter = UIParticleEmitter.new(PresetConfig)

NewEmitter.Parent = script.Parent -- Can set it to any frame!
NewEmitter.Enabled = true -- Starts emitting the particles
API

UIParticleEmitter

  • UIParticleEmitter.new() ā€“ creates a blank UIParticleEmitter using the Default values.

    • Returns: Instance UIParticleEmitter

  • UIParticleEmitter.new(Configuration) - creates a UIParticleEmitter using the Configuration folder provided.

    • Returns: Instance UIParticleEmitter

  • UIParticleEmitter.new(table) - creates a UIParticleEmitter using the table as the configuration.

    • Returns: Instance UIParticleEmitter

  • UIParticleEmitter.SetUI(Instance) - When any particle has LockedToParent property set to false, the particle will be inserted into this UI. Only really usable if you need to change the DisplayOrder.

  • UIParticleEmitter:Enable() - enables the particles. Can also be achieved by setting the Enabled property to true.

  • UIParticleEmitter:Emit(Number) - emit a number of particles. If argument is not provided, emits a single particle.

  • UIParticleEmitter:Clear() - remove all currently emitted particles. Does not prevent future ones.

  • UIParticleEmitter:GetUpdaters() - returns a dictionary of Updater module name - Updater module function

    • Returns: Dictionary Modules

You may also check out/download the template place here, with some example usages included.

P.S.

This is my first plugin, and this is my first time posting anything on the DevForum. I hope it serves you well in making games!
If you have any suggestions, questions, complaints or anything of that sort, please do leave a comment! I will be reading and responding!
Thank you!

24 Likes
#2

Works awesome! Thank you. Preview mode have another like <3

2 Likes
#3

Thank you for the feedback, glad you like it! <3

3 Likes
#4

Can the particle scale with the parentā€™s size?

2 Likes
#5

Iā€™ll work on it, thanks for the idea!

1 Like
#6

Maybe can you put to import already existing particles (ParticleEffect) to become a preset

Also maybe add the option to add new presets

2 Likes
#7

also very good plugin thank you so much it was so useful

1 Like
#8

Noted, will be added for the next update probably, thank you!! <3

1 Like
#9

Genuinely one of the most helpful plugins/modules Iā€™ve stumbled across. Thank you!
A few questions, how does it perform on larger servers? How well does it run for a long amount of time? and how many particles can exist at once with good performance? Iā€™m planning to use it for a game but want to make sure itā€™s stable! Thanks again!

#10

Glad to hear you like it!

  1. Regarding large servers, this shouldnā€™t affect them at all. This module is only designed to be ran on client, so if you wanted to emit particles from server, you can set up a RemoteEvent, fire it from the server and then listen to it on the client.
  2. Any and all connections for each particle are removed once the particle is cleared (either manually or via LifeTime attribute), so there arenā€™t any long-lasting effects.
  3. Although I tried to make it as optimized as I could, I donā€™t recommend going over 30-50 particles at once. Since Roblox doesnā€™t have a built-in UI particle emitter, we have to update the UI particles on the screen every frame, which can affect performance if thereā€™s a lot of those.
1 Like
#11

You should really put videos of the examples you are showing in the template place.

Your post is underselling how cool the plugin actually is!

Great job, I will use it for sure!

1 Like
#12

Sounds great, Thank you for answering my questions, will 100% be using!

1 Like
#13

Hello again,

Iā€™ve been using the plugin a lot in the last few days!

It is really fun and easy to work with to create great results!

I just got 2 suggestions to make it even better imo :

  1. When selecting a child Flipbook, it should continue showing the Parent Config, so you can test modifications in the Flipbook without back and forth

  2. Right now in the plugin, everything is pixel-based. Often it is fine, but yesterday I was trying to put an effect behind a button. Either, it was way too big on mobile, or it couldnā€™t be seen at all behind the button. So I did a code to take a default resolution (1080p in my case) for the look you want and then convert it for other resolutions. So it would be nice to have a bool value that would do that directly in the plugin.

I donā€™t know if if Iā€™m being clear so here the code I used, that will explain better what I meant :

Code 
local UIEmitter = require(game.ReplicatedStorage.Modules:WaitForChild("UIParticleEmitter"))

local Preset = game.ReplicatedStorage.PresetUIParticles.Powers.Rikiki.Rikiki_Glow

-- Define the base screen resolution for reference
local baseScreenHeight = 1080

-- Get the screen height
local screenHeight = workspace.CurrentCamera.ViewportSize.Y

-- Calculate the screen size ratio relative to 1080p
local screenRatio = screenHeight / baseScreenHeight

-- Initialize the UIEmitter
local Sparks = UIEmitter.new(Preset)
Sparks.Parent = script.Parent

-- Adjust SizeMultiplier
if typeof(Sparks.SizeMultiplier) == "NumberRange" then
	local sizeMultiplier = Sparks.SizeMultiplier
	Sparks.SizeMultiplier = NumberRange.new(
		sizeMultiplier.Min * screenRatio,
		sizeMultiplier.Max * screenRatio
	)
else
	warn("Sparks.SizeMultiplier is not a NumberRange")
end

-- Adjust Acceleration
if typeof(Sparks.Acceleration) == "Vector2" then
	local acceleration = Sparks.Acceleration
	Sparks.Acceleration = Vector2.new(
		acceleration.X * screenRatio,
		acceleration.Y * screenRatio
	)
else
	warn("Sparks.Acceleration is not a Vector2")
end

Sparks.Enabled = true

Thank you again for this awesome plugin!

1 Like
#14

Hello, thank you for the feedback!!

I just published V1.2 addressing these issues!

  • When editing a Flipbook of a config, it will still show the particles in the preview tab as you edit it.
  • Added 2 new properties to configs: SizeIsInPixels and SizeDominantAxis!
    • SizeIsInPixels allows you to toggle between using Scale and Offset for sizing the particles
    • SizeDominantAxis determines what Axis takes priority when using Scale (AKA the SizeConstraint property of a GUI Object)
  • Added a button to automatically convert a ParticleEmitter into a Config usable by the plugin!

P.S. There may be issues with the new SizeIsInPixels feature as I havenā€™t been able to test much, but if you find anything, please let me know!! Iā€™ll try my best to fix it!
Tysm for the feedback and I hope this update helps you!

#15

Wow, thank you for this quick and awesome update adding my suggestions!
The convert works super great too.

I only got one problem when I updated to 1.2, it seems to have broken my cursor effect.

Before:

You can see that my cursor is replaced with stars following my movement

After:

I just have my normal cursor and I get this error:
Infinite yield possible on ā€˜Players.winpol.PlayerGui:WaitForChild(ā€œUIParticleEmittersā€)ā€™

And if I create the UIParticleEmitters ScreenGui and donā€™t let the module do it like in the previous versiom, only an invisible frame is added in it.

I have reverted my module to the previous version for now and I will try again in the next version :slight_smile:

Thank you,
winpol

#16

Amazing work on this plugin! I was looking to see if something like this existed and Iā€™m glad I found it here.

Are there any plans for a feature that would determine where the particle emits from?

Thereā€™s quite a bit of VFX particles that rely on emitting from an attachment in the 3D space. It would be nice to see something like that mimicked with this plugin. Perhaps it could emit from the anchor point of the parent or from the center like the ā€œLock to centerā€ option in the previewer.

#17

Hi,
You mentioned that you should not do more then 20 or 30 at a time, does that mean, like in the demo place, where there is the flame cursor, you should not run that and keep it running , while there are other effects on the UI? ā€¦ do flip books cause issues?

#18

Hey,

I just wanna point out that this plugin looks amazing! But there is one problem. When I go to open the plugin link, it just redirects me to a 404 not found pageā€¦ Is this only on my side? Anyways, thanks for making this awesome plugin!

EDIT: Nevermind! I found a way to get the module via the test game. Thanks still :smile: