Particle Emitter - easy making particle effects in MV!

ParticleEmitter.js v0.1.2
Tsukimi​

Last updated: 2018/07/29: add demo sample project


Introduction
PIXI has particles inside but hard to use in RMMV interface.
This plugin provide a simple interface to make particle systems.

Features
- Simple Creating and setting parameters of PIXI.particles.Emitter.


Screenshots

Demo
download my demo project from here!


How to Use

Preparation:

(below are the steps in the video)
1. first,
make your desire particle emitter in the under website, and download the config file(.json).
https://pixijs.io/pixi-particles-editor/

** First scroll down and set Rederer to Canvas2D to see correct visual effects !!
This site use wrong method in WebGL mode. It will auto turn to WebGL mode if your game uses WebGL.


2. create a folder named "particles" inside data/ and put config file inside it



3. create a folder named "particles" inside img/ and put particle image file inside it



4. open plugin manager, turn plugin on and write names of config file (in data/particles/) into it.


The preparation is done.
With only one command(createPEmitter), you can make the emitter show up in the game!


■■■ Create/Adjust emitter by plugin command:

Spoiler: plugin command

*** You can brief all "PEmitter" to "PE" for short ***

　createPEmitter {id} {config} {eventId} {imageNames ...}
　　create a particle emitter.
　　id: id of this controller. choose a name you like!
　　config: config name download from the website (.json no need)
　　eventId: the event which this emitter chase
　　　　　　　-1：player、0：this event、1~：event#
　　　　　　　x：no event, on screen；screen：on screen (only on current map)
　　imageNames: image name inside img/particles/.

　　　ex: createPEmitter star#1 starEmitter x star1 star2
　　　Create an emitter named star#1, config is starEmitter.json,
　　　position based on screen. Images are star1.png & star2.png.


　pausePEmitter {id}
　　pause emitting.

　resumePEmitter {id}
　　resume emitting.

　stopPEmitter {id}
　　stop emitter and delete after all particle i dead.

　deletePEmitter {id}
　　delete emitter and all particles immediately.


　setPEmitterPos {id} {x} {y}
　　set emitter (relative) position to (x,y).
　　Besides numbers, you can also set these to x & y:

Spoiler

　　x: Don't change from current parameter value　　　　　ex：x
　　v<Number>: value of Game Variable<Number>　　　 ex：v15
　　r<#1>~<#2>: Random value between #1 and #2.　　　ex：r30~45
　　　　　　　　 #1 and #2 can also be variables.

　　　ex: setPEmitterPos star#1 10 x
　　　　set emitter star#1's x coordinate to 10. (y doesn't change)

　movePEmitterPos {id} {x} {y} {duration} (easingFunction)
　　move emitter (relative) position to (x,y) by {duration} frame.
　　input→x: don't move
　　easingFunction: move easing functions at https://easings.net/
　　will be 'linear' if not specified

　　　ex: movePEmitterPos star#1 -10 20 60 easeOutBounce
　　　　　move emitter star#1 to (-10,20) in 60 frames, with
　　　　　bouncing animation.


　setPEmitterZ {id} {z}
　　set emitter Z layer.
　　z layer：
　　　0 : lower tile
　　　1 : lower character
　　　3 : character
　　　4 : upper tile
　　　5 : upper character
　　　6 : shadow of airship
　　　7 : Balloon
　　　8 : animation
　　　9 : map destination (white rectangle)

　　　ex: setPEmitterZ star#1 5
　　　　set emitter star#1 z-layer to upper character.


　setPEmitterAsLocal {id} {true/false}
　　create particle to event relative position
　　instead of to the map.
　　（if true, event move right -> all particle move right）


　setPEmitterStaticToPlayer {id} {true/false}
　　should emitter set to player(-1) remain exist
　　after map transition.(true -> exist)
　　*Only effect on emitter set to player.


Advanced moving：

Spoiler: advanced moving

（Q：Queue、R：Routine）

　movePEmitterPosQ {id} {x} {y} {duration} (easingFunction)
　　Add move command to move queue. Will start next move
　　after last move is finish.

　　　ex: movePEmitterPosQ star#1 0 20 60 easeOutBounce
　　　　 movePEmitterPosQ star#1 20 x 30 easeInBounce
　　　　Move to (0,20) in 60f then move to (20,20) in 30f.


　movePEmitterPosQR {id} {x} {y} {duration} (easingFunction)
　　Add move command to routine move queue.
　　will repeat moving command in routine move queue.

　　ex: movePEmitterPosQR star#1 -20 20 30
　　　 movePEmitterPosQR star#1 20 20 30
　　　 movePEmitterPosQR star#1 20 -20 30
　　　 movePEmitterPosQR star#1 -20 -20 30

　　　　(-20,20)→(20,20)→(20,-20)→(-20,-20)→(-20,20)→…


　clearPEmitterPosQ {id}
　　clear move queue.

　clearPEmitterPosQR {id}
　　clear routine move queue.

■■■ Create/Adjust emitter by Map/Event tags(notes):

Spoiler: tags

Map：
<PEmitter:id,config,imageNames,...>
　Same as createPEmitter.
　However, eventId will be set to screen.

　　ex：<PEmitter:star#1,starEmitter,star1,star2>

<SetPEmitterPos:id,x,y>
　Same as setPEmitterPos.

<SetPEmitterZ:id,z>
　Same as setPEmitterZ.

<MovePEmitterPosQR:id,x,y,duration,easingFunc>
　Same as movePEmitterPosQR.


event：
<PEmitter:id,config,imageNames,...>
　Same as createPEmitter.
　However, eventId will be set to this event.

　　ex：<PEmitter:star#1,starEmitter,star1,star2>

<SetPEmitterPos:id,x,y>
　Same as setPEmitterPos.

<SetPEmitterZ:id,z>
　Same as setPEmitterZ.

<SetPEmitterAsLocal:id>
　Same as setPEmitterPosAsLocal.

<MovePEmitterPosQR:id,x,y,duration,easingFunc>
　Same as movePEmitterPosQR.

Script Download
You can download(press ctrl+s) the script from here, or from my Github.

FAQ
Q: Error "Cannot set property x of null" show up.
A: please check all names of config-files you use is filled into the plugin parameter "configName".

Q:
A:

Terms of use
Free to use in non-commercial/commercial games. Credits no need. (but I will be happy if you would write in your game!)


Credit and Thanks
- Author: Tsukimi (in this forum: cji3bp62000)


Author's Notes
Library/source used:
- PIXI-particles from:
https://github.com/pixijs/pixi-particles
- Easing function from:
http://gsgd.co.uk/sandbox/jquery/easing/

 

bump to top

 

Wow, definitely, I will use this.

BTW, could you post some example? I'm not able to make a proper fire...

Thanks.

 

Thanks for being interested in this plugin!

There are some example in the site, just click "load" and load default emitters,Just choose flame.
The fire in the video is an adjustment of it.
(blend mode-> add, & lower the emit speed, make the scale smaller)

 

This is great, just 2 weeks ago when I was searching, there was nothing like this. Thank you!

 

Could you post a demo?

In my plugin the particles doesn't work in the way they're supposed to.

 

Thanks for being interested in the plugin! I will be glad if you use it ><

As you wish!

A bit hard to watch, but is the demo from making emitters from the site, importing plugins, to plugin command typing.
I'm not very sure why the problem occurred in your RMMV. If there are still problems to create particle emitters after watching the video, please don't hesitate to ask! ><

 

Woah, thanks for the video.

I tried it another time with my working project and doesn't work as intended.

I can see some particles but the emitter position is not right and the particles doesn't do what they do in the website.

Also, I try the same combination in a blank project to check if I get an issue with one of the several plugins I have... But it doesn't work.

Could you provide me with a true demo project? I don't mind if is 300mb.

Can be a MV version issue?

Thanks for your support and work.

PD: would you be interested commisioning me a script?

 

@cji3bp62000, this is purr-fect! Will use and credit for sure!

 

Sorry, I've been busy these days, forgot to watch the thread.
I can make a complete demo project at this Sunday; by the way, I'm using MV 1.6.1 to test, but all versions above 1.5.0 is capable, I think.

What does "commisioning me a script" mean? (sorry I'm not good at English)
If it's a private thing to ask, please DirectMessage me. (or if it is just a public issue, posting here is OK)

Thank you!
I'm glad that someone like this plugin. Please make beautiful effects by this plugin!

 

Hi @cji3bp62000 , i wonder how to move the Particle relative to map but instead of relative to its current position?
* For example i want to make the particle move around these coordinates of the map ([0,100],[100,100],[100,200],[0,200])
* Can you make it so i can run those commands with Script call instead? :=| it will be more convenient that way
Thank you! (」ﾟヘﾟ)」

 

This is an interesting approach; even if I already have a working particle plugin it can still be useful for specific cases (or more complex behaviors) so I’ll give it a try when the occasion comes. The way you do "footsteps FXs" might be more efficient than my actual (battle anim) method for example, from what I see in your video the FXs can even be behind GFX too, great.

Thank you!

(Easy to setup/convenient picture-mask plugin would still be one of the most useful thing when it comes to graphic tricks ^__^ in case you don’t know what to do next in terms of amazing plugins eheh!!)

 

I had put an demo, you can download from above.(ctrl+F search demo)

Sorrrry for the late reply! I've no time these days ><

move relative to map? I will guess you want to move all particles at the same time ...?
A least solution is to set Aslocal as true, and move event instead of move the emitter ...

to move by script, you can use:
$gameMap.movePEmitterPosQR("emitterId", [x, y, dur, "easingFnctionName"]);
you would have to set "easingFnctionName" to "linear" if you want normal move.
ex:
$gameMap.movePEmitterPosQR("temp", [48, 0, 30, "easingInBounce"]);
$gameMap.movePEmitterPosQR("temp", [0, -48, 30, "easingOutBounce"]);

other movePos function have similar function names, such as movePEmitterPos and movePEmitterPosQ.

By the way, are you master2015hp in the other forum?
I'm surprised that someone would come to that forum, that really encouraged me><
thankyou for always be interested in my plugins!

** edit: $game -> $gameMap

I have to say, the reason why I made this plugin,
is because I saw the beautiful particle FXs in your demo you presented in the pixi-filter thread. (the fire & dust effects is too amazing...)
I wanted those effects in my game too >< This plugin is almost on your idea, thank you!

I'm interested in picture-mask plugin (from the name of it) you mentioned, but what effect should it present?

 

Wow!
thanks for the demo!!

 

I'm glad I can be helpful and make you create amazing things.

And sorry for the delayed answer, I wanted to make a proper one.

Well that’s the beauty of such a plugin, you’re not limited to just a single effect and it’s extremely powerful and efficient while easy and light to implement.


The idea is to have one plugin command to specify a black and white mask (.PNG file) fixed on the map at some X and Y position (+ Z layer priority ^u^), and another command to specify the behavior of another “texture PNG file” that will always be limited to the boundaries of the previously specified mask. They work as some kind of couple.


Then, as a behavior for this texture file, we would have plugin commands such as simple scrolling (negative/positive X and Y numbers to control the speed), opacity, or even rotation why not.

The most important thing is to have simple scrolling possibilities; this is the main feature that can allow you to create crazy stuff already, check the following example I made to illustrate that thing.


First you specify your mask with a plugin command, here this blurry star, it’s blurry on purpose so we can see the grayscale acting as a soft transition with the rainbow pattern texture I’ll specify next:

(black acts as transparency but we could use real alpha instead?)


The command would look like this for example:

MASK ID : file_name (here “starmask”) : X : Y : Z (here I’ll put Z pretty high so the star will be on top of characters, and yeah maybe you could add some bonus stuff like a zoom size so we could use small pictures as mask and save memory, or a rotation of the mask why not…)


And then we need the other command for the pattern texture behavior:

MASK ID (need to match the name you put in the mask one) : file_name (here “rainbowpattern”) : X scrollspeed : Y scrollspeed : opacity (and same, maybe bonus stuff like rotation, an option to specify the blending mode would help a lot with light-based effects too.)


The result on map would look like in this simulation, sorry for the bad GIF quality:

Here we have the pattern scrolling quite fast on the X axis only (and of course the pattern must tile) and… Yeah that’s it. Ugly example I know, it’s on purpose so the use is more obvious.

Now imagine the same thing for a waterfall, particles are great but for that kind of heavy effect this method is better, you can even make partial fog/smoke on a map and so much more!
I hope this will help you have the best idea of what this plugin could look like and how useful it can be.

 

I'm just curious, is there some way to have a particle emitter move in a less "linear" way?

What I mean by this, I'm trying to get an emitter to move in a "circular" motion rather than just a "straight" line. Even when using "EaseInCirc" and "EaseOutCirc" they still follow a linear path to their location rather than calculate using sine and cosine factors when moving.

I'm not talking about the particles config but rather the emitter itself when it's "moved" around the events or map/screen location.

 

I'm trying to create some particle battle effects. Is there a way for the emitter to display during battle?

 

Just a heads up regarding two things I've noticed.

1) There is currently no way to increase or decrease the X/Y "movement shift" displacement while setting a "setPEmitterStaticToPlayer" command to "false" so if you're using zoom effects or using plugins such as BBlizzard's Ultra Mode 7 plugin or Galv's Layer Graphics plugin, you can't "adjust" the shift of the particles position being displayed on screen when moving around a map.

To give you an example about what I mean regarding X/Y movement shifting, when using Galv's Layer Graphics plugin, if you set a layers X/Y Shift to "-30 -30", it would make the particles move on screen by around 2 pixels when moving from tile-to-tile and if you use "30 30" instead, they would shift almost double the rate when moving from tile-to-tile (using -32 -32 would essentially "lock" the layer to the screen, much like when setting a "createPEmitter" command to use "X" for the "eventId"). To give another example, if you use a value such as "-16 -32", it would make the layer shift at "half" horizontally when moving around the map while it locks the layer from shifting vertically.

Please note, my project is converted from VXAce so I use values such as "32 32" and "-32 -32" so when it comes to MV, using "48 48" and "-48 -48" instead should work within MV's perimeters.

2) It doesn't seem possible to currently display particles above Pictures. I'm not sure if this is simply because the plugin doesn't have the ability to do this or if MV is actually preventing this due to the way Z-Levels are handled.

 

Anybody know how to set this to the main character as they walk? If so, could I get an "idiots guide" of of how to do it - where to put it, simpleton instructions on what needs to go where and what is what?

I was able to arrange the effect as a .json file, and I can get it to show up on the map in the upper left hand corner if I attach the code to the map. I'd like to attach it to the main character and have it follow the main character as they move, kinda like it follows the dog in the example. The windows don't look the same, and I'm not that creative to figure out where it would go on the main character.

Any help would be greatly appreciated!