Particle Emitter - easy making particle effects in MV!

Discussion in 'JS Plugin Releases (RMMV)' started by cji3bp62000, Jul 15, 2018.

  1. cji3bp62000

    cji3bp62000 Tsukimi Veteran

    Messages:
    66
    Likes Received:
    178
    First Language:
    Japanese
    Primarily Uses:
    RMMV
    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/
    [​IMG]
    ** 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
    [​IMG]


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


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

    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:
    *** 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:
      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:
    (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):
    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/
     
    Last edited: Jul 29, 2018
    #1
  2. cji3bp62000

    cji3bp62000 Tsukimi Veteran

    Messages:
    66
    Likes Received:
    178
    First Language:
    Japanese
    Primarily Uses:
    RMMV
    bump to top
     
    #2
    kovak likes this.
  3. Jhin

    Jhin Veteran Veteran

    Messages:
    40
    Likes Received:
    3
    First Language:
    Spanish
    Wow, definitely, I will use this.

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

    Thanks.
     
    #3
  4. cji3bp62000

    cji3bp62000 Tsukimi Veteran

    Messages:
    66
    Likes Received:
    178
    First Language:
    Japanese
    Primarily Uses:
    RMMV
    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)
     
    #4
  5. eXalted

    eXalted Veteran Veteran

    Messages:
    30
    Likes Received:
    14
    First Language:
    English
    Primarily Uses:
    RMMV
    This is great, just 2 weeks ago when I was searching, there was nothing like this. Thank you!
     
    #5
  6. Jhin

    Jhin Veteran Veteran

    Messages:
    40
    Likes Received:
    3
    First Language:
    Spanish
    Could you post a demo?

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

    cji3bp62000 Tsukimi Veteran

    Messages:
    66
    Likes Received:
    178
    First Language:
    Japanese
    Primarily Uses:
    RMMV
    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! ><
     
    Last edited: Jul 23, 2018
    #7
  8. Jhin

    Jhin Veteran Veteran

    Messages:
    40
    Likes Received:
    3
    First Language:
    Spanish
    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?
     
    #8
    cji3bp62000 likes this.
  9. fizzly

    fizzly Veteran Veteran

    Messages:
    413
    Likes Received:
    293
    Location:
    Poland
    First Language:
    Polish
    Primarily Uses:
    N/A
    @cji3bp62000, this is purr-fect! Will use and credit for sure! :kaopride:
     
    #9
    cji3bp62000 likes this.
  10. cji3bp62000

    cji3bp62000 Tsukimi Veteran

    Messages:
    66
    Likes Received:
    178
    First Language:
    Japanese
    Primarily Uses:
    RMMV
    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!
     
    #10
    fizzly and Isabella Ava like this.
  11. Isabella Ava

    Isabella Ava Veteran Veteran

    Messages:
    635
    Likes Received:
    756
    First Language:
    English
    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! (」゚ペ)」
     
    #11
    cji3bp62000 likes this.
  12. KaYsEr

    KaYsEr Koruldia Veteran

    Messages:
    212
    Likes Received:
    447
    Location:
    London
    First Language:
    French
    Primarily Uses:
    RMMV
    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! :LZSsmile:

    (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!!)
    :LZSangel:
     
    #12
    cji3bp62000 likes this.
  13. cji3bp62000

    cji3bp62000 Tsukimi Veteran

    Messages:
    66
    Likes Received:
    178
    First Language:
    Japanese
    Primarily Uses:
    RMMV
    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?
     
    Last edited: Jul 29, 2018
    #13
    KaYsEr and Isabella Ava like this.
  14. Jhin

    Jhin Veteran Veteran

    Messages:
    40
    Likes Received:
    3
    First Language:
    Spanish
    Wow!
    thanks for the demo!!
     
    #14
  15. KaYsEr

    KaYsEr Koruldia Veteran

    Messages:
    212
    Likes Received:
    447
    Location:
    London
    First Language:
    French
    Primarily Uses:
    RMMV
    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:
    [​IMG]
    (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:
    [​IMG]
    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:
    [​IMG]
    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. :)
     
    #15
  16. Espilonarge

    Espilonarge Veteran Veteran

    Messages:
    118
    Likes Received:
    51
    Location:
    Australia
    First Language:
    English
    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.
     
    Last edited: Aug 27, 2018
    #16
  17. eXalted

    eXalted Veteran Veteran

    Messages:
    30
    Likes Received:
    14
    First Language:
    English
    Primarily Uses:
    RMMV
    I'm trying to create some particle battle effects. Is there a way for the emitter to display during battle?
     
    #17
  18. Espilonarge

    Espilonarge Veteran Veteran

    Messages:
    118
    Likes Received:
    51
    Location:
    Australia
    First Language:
    English
    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.
     
    #18
  19. KirkMarkarian

    KirkMarkarian Electronic Music Composer / Sound Designer Member

    Messages:
    12
    Likes Received:
    1
    Location:
    Tucson, AZ
    First Language:
    English
    Primarily Uses:
    RMMV
    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!
     
    #19

Share This Page