Pixi Filter Controller - fancy screen effects by pixi (MZ version released!)

Tsukimi-neko

Tsukimi
Veteran
Joined
Oct 25, 2017
Messages
101
Reaction score
269
First Language
Japanese
Primarily Uses
RMMV
Filter Controller v2.0.9
Tsukimi (cji3bp62000)
banner.png
 
For anyone who is interested in this plugin but using RPG Maker MZ,
there is a MZ version right
HERE!

last updated: 2018/03/13
minor update: update embedded PIXI.filters to v2.6.0
no any change on functionality.
old updates:
2018/03/13
Added displacement filter.
To use Displacement filter, one has to put the displacement image named 'DisplacementMap' under img/pictures/.
(If you want to use other names, you can change the default name from plugin's parameter)
Also, the image should be power-of-2 (such as 256x256, 512x512).

please also take a look at the filter-list, displacement filter's parameter is also in it.
2018/02/10
Fix character id shift bug (when using target: 4xxx) again.
if you face this bug, please download the plugin again.
2018/02/09
add motion blur filter, glow filter
2018/02/02
fix specific-character target index shift bug (ex. 4001 effects event#2 which should be #1)
2018/01/30
・add new target Object (target->specified char/pic only)
  filter-target: what will be included in the effect.
   0: screen(map+pictures)
   1: whole-screen(including message window)
   2: map(tiles+characters), 21: map+parallax
   3: tiles, 31: tiles+parallax, 32: parallax
   4: all characers
   4000+id: specific character (id: -1->game Player, 0->this event, 1~->event#id)
   5: all pictures
   5000+id: specific picture (id: picture id(1~99))

example:
 createFilter eff#1 twist 3999
  ->the twist effect will only effects game player
 createFilter eff#1 twist 5001
  ->the twist effect will only effects picture #1

・add six new filter Controller(godray-np, adjustment, crt, pixelate, reflection-m, reflection-w
for the details, see the filter-list image(already updated)

・fix godray-filter iOS bug(temporarily. wait for pixi official update)
 about the bug, see here: https://github.com/pixijs/pixi-filters/pull/140

Introduction
PIXI has lots of filters and still adding them in progress, so I create such a plugin to use them in MV.
You can create and move these filters with only one plugin command.

*** Notice !!! ***
this is an webGL depending effect. If your RMMV version is below 1.5.0,
"and" your game will release on website(html)/smartphone, this effect may not work.
1.5.0 or upper version allows WebGL rendering for website/smartphone.
(OK for desktop application, even with version below 1.5.0)


Features
- Simple Creating and setting parameters of PIXI.filters.
- (require javascript skills) Easy adding your own customized Filter Controller with less than 20 lines of code,
most of witch are just copy & paste.


Screenshots


Demo
PIXI provides a good demo of PIXI.filters here.
You can preview what filter can you use. (though not all filters are implemented in Filter Controller)


How to Use
- Open your project, add and turn this script on in plugin manager.

*** Create/Move filter by plugin command:
ignore all the <>.

 createFilter <id> <filterType> <filter-target> (<character>)
  create filter.

  id: id of this controller. choose a name you like!
  filtertype: please look at the list of filter name.
  filter-target: what will be included in the effect.
   0: screen(map+pictures)
   1: whole-screen(including message window)
   2: map(tiles+characters), 21: map+parallax
   3: tiles, 31: tiles+parallax, 32: parallax
   4: all characers
   4000+id: specific character (id: -1->game Player, 0->this event, 1~->event#id)
   5: all pictures
   5000+id: specific picture (id: picture id(1~99))
  character: optional parameter. If set, make filter Location depend on character,
       and will erase filter when leaving current map.
   ~-1: game Player (inBattle: enemy id)
    0: this event   (inBattle: current actor)
    0~: event ID  (inBattle: party member id)
    screen: screen. (mostly used for restricting filter to current map only)

  example:
   createFilter tw#1 twist 0
   createFilter GLOW godray 2 screen



 eraseFilter <id>
  erase the filter of controller name <id> immediately.


 setFilter <id> <filter parameters ...>
  set the filter<id> to the <parameters>.
  please take a look at filter parameter list.

  Take twist as example.
  assume I created a twist filter named tw#1.
  twist has 4 parameters: x,y,radius,angle;
  so write:
   setFilter tw#1 0 0 96 4

  Besides numbers, you can also set:
  x: Don't change from current parameter value
  v<Number>: value of Game Variable<Number>
  r<#1>~<#2>: Random value between #1 and #2.
         #1 and #2 can also be variables.
  example:
   setFilter tw#1 v1 v2 rv3~50 x
    x->var#1, y->var#2, radius->rand(var#3, 50), angle->no change


 moveFilter <id> <filter parameters ...> <duration>
  move filter<id> to <parameters> within <duration>.

  example:
   moveFilter tw#1 x x 96 4 60


 moveFilterQ <id> <filter parameters ...> <duration>
  push the movement to Queue. will execute next move after the last move is end.

  example:
   moveFilterQ tw#1 0 0 96 4 60
   moveFilterQ tw#1 x x x x 120
   moveFilterQ tw#1 x x 0 0 60

    (2nd command: no param changing -> wait 120f between moves)


 eraseFilterAfterMove <id>
  erase Filter itself after move and moveQueue are end.


 setFilterSpeed <id> <speed>
  some filter has auto-animation(such as godray). Set the animation speed.
   default value: godray, shockwave : 0.01
          oldfilm, noise   : 1

*** Create/Set filter by Map/Event tags(notes):
put the below commands to Map/Event notes:
Map notes:

Event notes:

 <Filter:[id],[filterType],[filter-target]>
  Basically same as createfilter.
  Creating filter when entering map.
  will automaticlly set character to the eventID(event tag) / screen(map tag).

  example:
   <Filter:GODRAY#1,godray,0>


 <SetFilter:[id],[filter parameters ...]>
  Basically same as setfilter.
  Set the parameter created by <Filter:...>.

  example:
   <Filter:GODRAY#1,godray,0>
   <SetFilter:GODRAY#1,-30,0.5,2.5,1>



 <SetFilterSpeed:[id],[speed]>
  Basically same as setfilterSpeed.
  Set the parameter created by <Filter:...>.

  example:
   <Filter:GODRAY#1,godray,0>
   <SetFilterSpeed:GODRAY#1,0.03>

*** Filter-List (and default parameters)
Download the below image would be convenient when adjusting filter effects.

※ In order to use Displacement filter, one has to put the displacement image named 'DisplacementMap' under img/pictures/.
Also, the image should be power-of-2 (such as 256x256, 512x512).

*** Make your own Filter Controller (need javascript skills)
If you see the filters documentation, you can notice that the parameters are slightly
different from the parameters here
.
Yes, I simplified the input parameter, for user convenience.

Take RGBSplitFilter as example.
in the Real RGBSplitFilter, there is each RGB channel shift(x,y) parameters, which have totally 3*2 = 6 parameters.
However I have just radius and angle here. Maybe not enough for somebody.

So, lets create new Filter Controller "rgbsplit2"!
You will need at least 3 things:
1. tie up "rgbsplit2" with PIXI.filters.RGBSplitFilter
2. your own custom parameter
3. the update function to assign your custom parameter to the real PIXI.filters.RGBSplitFilter object
Code:
var newFilterName = "rgbsplit2";
Filter_Controller.filterNameMap[newFilterName]        = PIXI.filters.RGBSplitFilter;
Filter_Controller.defaultFilterParam[newFilterName]   = [1,-1,-1,0,0,1];

Filter_Controller.updateFilterHandler[newFilterName]  = function(filter, param) {
    // filter: the PIXI.filters.RGBSplitFilter object
    // param: your own parameters
        filter.red   = [param[0], param[1]];
        filter.green = [param[2], param[3]];
        filter.blue  = [param[4], param[5]];
};

use
1. Filter_Controller.filterNameMap
2. Filter_Controller.defaultFilterParam
3. Filter_Controller.updateFilterHandler

to set them.

and... Done! You can copy the above code, put in a txt file and rename it to ***.js,
and activate it in your project. If you type in the below plugin command, you will see it works.
createFilter rgb2#1 rgbsplit2 0
setFilter rgb2#1 v1 v2 0 0 0 0
moveFilterQ rgb2#1 10 10 5 5 3 3 60


For the parameters of PIXI.filters.RGBSplitFilter or other filters, please look at PIXI's documentation.
Links are at the bottom of this post.
※The name of Filter Controller has to be in lower case("rgbsplit2" in example),
you can't use 'RGBSplit2' as a name.


If there is a parameter that you only want to set at the beginning and only once, use:
Code:
Filter_Controller.filterSpecialInit["rgbsplit2"] = function(filter) {
    // do something to filter ...
}
Filter_Controller.filterSpecialInit
to initialize it.


here is another example: (non-parallel GodRay)
Code:
Filter_Controller.filterNameMap["godray2"]        = PIXI.filters.GodrayFilter;
Filter_Controller.defaultFilterParam["godray2"]   = [408,312,30,0.5,2.5,1.0];
// parameters of godray2: x, y, [the rest is same as parameters of godray]

Filter_Controller.updateFilterHandler["godray2"]  = function(filter, param) {
    // location setting, because non-parallel GODRAY needs an origin
    var loc = this.getCharLoc();
    filter.center = [ (loc[0] + param[0]), (loc[1] + param[1]) ];

    // other parameter setting
    filter.angle = param[2];
    filter.gain = param[3];
    filter.lacunarity = param[4];
    filter.strength = param[5];

    // time setting
    filter.time = this._time;

};

Filter_Controller.filterSpecialInit["godray2"] = function(filter) {
    filter.parallel = false;
}

you can also copy the above script and test it in your project.
・The this.getCharLoc() returns screen location [x,y] of the current filter's character. if no character, will return [0,0].
・The this._time is the time for auto-animated filters.


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

FAQ
Q: The plugin works, but some of the filters seem not to have effect. (such as Twist Filter, Bulge-Pinch Filter ...)
A: Some of the filters have a default strength or radius of 0; so it is still working, but you can't visually see it.
Please use setFilter to change it's strength or radius to a positive number.


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!)
Do not reproduce or redistribute this script alone(without any game data).

Credit and Thanks
- Tsukimi (in this forum: cji3bp62000)
- Lots of Thanks to @Sigureya (しぐれん), giving me coding guidance


Author's Notes
current version of PIXI.filters Built in the plugin: v2.5.0
2018/01/24 released. (version numbering 2 because I released version 1 in another forum)

PIXI filters Documentation:
pix.js Built-in Filters
PIXI Independent Filters
PIXI Independent Filters source code(GitHub)
 
Last edited:

Tsukimi-neko

Tsukimi
Veteran
Joined
Oct 25, 2017
Messages
101
Reaction score
269
First Language
Japanese
Primarily Uses
RMMV
I got this error, it happen before loading into the game
I'm so sorry! It's fine in my environment so I just thought it's OK.
I've just tried to fix the bug, can you re-download the script and test again?
 

Nicke

Fortune seeker
Veteran
Joined
Apr 4, 2012
Messages
549
Reaction score
551
First Language
Swedish
Primarily Uses
RMMV
I love it! Now I can use more filters for my game. Here is a video if you wanna see what I did:

By the way, in order to run the plugin I had to add the following code to the Game Event function:
Code:
if (this.event().metaArray === undefined) return;
Anyways, good work :)
 

Tsukimi-neko

Tsukimi
Veteran
Joined
Oct 25, 2017
Messages
101
Reaction score
269
First Language
Japanese
Primarily Uses
RMMV
By the way, in order to run the plugin I had to add the following code to the Game Event function:
Code:
if (this.event().metaArray === undefined) return;
Anyways, good work :)
Wow! You saved me and my plugin , many many thanks! (though I still don't know why there is such a bug ...)
I added the line and re-updated the script. Maybe this will fix the bug >>Isabella Ava met.
Hope the plugin's function is Okay for you.

And...
This is the moooost beautiful RPG Maker game I have ever seen!
The UI, the action, the lighting and the tricks ... Everything has joined together and become a master piece. I can't look at my game's screen anymore ...
 
Last edited:

Isabella Ava

Veteran
Veteran
Joined
Sep 13, 2016
Messages
635
Reaction score
756
First Language
English
Thank you for fixed it that quickly @cji3bp62000
Now i can run the game normally, i just wonder why twist filter seems not to work?
(it also didn't work for me with japanese version of this plugin)
Godray work normally but twist didn't show up
 

Tsukimi-neko

Tsukimi
Veteran
Joined
Oct 25, 2017
Messages
101
Reaction score
269
First Language
Japanese
Primarily Uses
RMMV
Thank you for fixed it that quickly @cji3bp62000
Now i can run the game normally, i just wonder why twist filter seems not to work?
(it also didn't work for me with japanese version of this plugin)
Godray work normally but twist didn't show up
That's great news! Glad it works.

About the twist filter problem, if you see the default parameter of twist filter, the default radius of twist filter is 0;
so you must use setFilter to see the effect show-up after creating the filter.
I think I should add this to Q&A, since it's really miss-leading.
 

Isabella Ava

Veteran
Veteran
Joined
Sep 13, 2016
Messages
635
Reaction score
756
First Language
English
Oh it's my bad, i didn't notice about that. Thanks @cji3bp62000
I wonder is there anyway to make the twist effect appear at center of an event on map instead of x,y position?
setFilter eff 0 0 400 60
 

Tsukimi-neko

Tsukimi
Veteran
Joined
Oct 25, 2017
Messages
101
Reaction score
269
First Language
Japanese
Primarily Uses
RMMV
I wonder is there anyway to make the twist effect appear at center of an event on map instead of x,y position?
Well... since normal character sprite size of RPG Maker MV is 48*48, I can set (x,y) to (0,-24) to show the twist effect at the center of character...(the anchor of character sprite is at [0.5,1])
Do you mean this?
for larger character sprites, set to (0, -height/2) will also set to center.
 

Isabella Ava

Veteran
Veteran
Joined
Sep 13, 2016
Messages
635
Reaction score
756
First Language
English
@cji3bp62000 Oh, it was because that i used Mapzoom plugin so the filter misplaced
is there anyway to set x, y in refer to event x,y screen position? like
$gameMap.event(this._eventId).screenX()

By the way can you explain me some more about custom filter?
For example for nonparallel Godray
Filter_Controller.filterNameMap["godray2"] = PIXI.filters.GodrayFilter;
Filter_Controller.defaultFilterParam["godray2"] = [408,312,30,0.5,2.5,1.0];
// parameters of godray2: x, y, [the rest is same as parameters of godray]

Filter_Controller.updateFilterHandler["godray2"] = function(filter, param) {
// location setting, because non-parallel GODRAY needs an origin
var loc = this.getCharLoc();
filter.center = [ (loc[0] + param[0]), (loc[1] + param[1]) ];

// other parameter setting
filter.angle = param[2];
filter.gain = param[3];
filter.lacunarity = param[4];
filter.strength = param[5];

// time setting
filter.time = this._time;

};

Filter_Controller.filterSpecialInit["godray2"] = function(filter) {
filter.parallel = false;
}
for this one, how should i setFilter?
i mean when i input params for setFilter, should i follow the order we declared in the Plugin or in the order from http://pixijs.io/pixi-filters/tools/demo/ site?

setFilter godray2 [centerx centery ?] gain lacunaity angle [parallel ?] [time ?]
setFilter godray2 [time ?] gain lacunaity [parallel ?] angle [centerx centery ?]

those declared as default (parallel), do we need to input it in Plugincommand?
 
Last edited:

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,623
Reaction score
1,431
First Language
French
Primarily Uses
RMMV
good jobs, especially for people don't know how js and pixi work.
I like the structure and the idea.
 

Tsukimi-neko

Tsukimi
Veteran
Joined
Oct 25, 2017
Messages
101
Reaction score
269
First Language
Japanese
Primarily Uses
RMMV
>>Isabella Ava
in version 2, you can use game variables in setFilter/moveFilter by v<Number>; such as
setFilter eff v1 v2 400 60
-> set x to variable#1; y to variable#2
so first set variable#1/2 to event screenX/Y, and multiply it by your zoom scale may do this work; though maybe a lot of calculations.

(by the way, you can use random too; please see setFilter explaination)

about godray2:
numbers of default parameters is numbers you need to input when setFilter/moveFilter. these are parameters that can be set/move.
the example godray2 is [408, 312, 30, 0.5, 2.5, 1.0] -> 6 default parameters, front two are (x,y) and later four is same as godray,
so one has to input 6 numbers when using setFilter.
->
[408, 312, 30, 0.5, 2.5, 1.0] <- createFilter eff godray2 2
[
408, 0, 30, 0.5, 2.5, 0.5] <- setFilter eff 408 0 x x x 0.5
setFilter and moveFilter are acually doing this.
These parameters has no meaning unless you actually assign them to the filter object in update function handler.
if you check the update function handler of godray2,
you can see the input argument "param" array goes from 0~5, which is just the 6 parameters you're manipulating with.

>>Jonforum
Thank you!
I don't want to write lots of scripts in games, so just created the plugin.
It's a hard work for me, but worth:)
 

Isabella Ava

Veteran
Veteran
Joined
Sep 13, 2016
Messages
635
Reaction score
756
First Language
English
Awesome, i got it finally thank to @cji3bp62000
i have another question that in the case of ColorReplace filter
do i need quotes around of color value?
Filter_Controller.defaultFilterParam["colorreplace"] = ["0xff00" ...

and when i set Filter do i need to include quotes or not?
setFilter cr "0xff00" ...
or just setFilter cr 0xff00 is ok?
 

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,623
Reaction score
1,431
First Language
French
Primarily Uses
RMMV
Awesome, i got it finally thank to @cji3bp62000
i have another question that in the case of ColorReplace filter
do i need quotes around of color value?
Filter_Controller.defaultFilterParam["colorreplace"] = ["0xff00" ...

and when i set Filter do i need to include quotes or not?
setFilter cr "0xff00" ...
or just setFilter cr 0xff00 is ok?
you can set only 0xff00
or use string '0xff00 '
or '#ff00 ' logically if it autoConvert, try it
https://www.google.ca/search?q=hex+color

you can made you own converter like this if not .
ex: make a random color, but you can replace 0X by '#'+
PHP:
 function hexColors() { return ('0x' + Math.floor(Math.random() * 16777215).toString(16) || 0xffffff) };
but filter with pixi not autoConvert, so you need use 0X, and not # like hex from CSS

'#' = 0x
the 0x is there to say that the following is in hexadecimal
 
Last edited:

Isabella Ava

Veteran
Veteran
Joined
Sep 13, 2016
Messages
635
Reaction score
756
First Language
English
Hey i just noticed that in @cji3bp62000 code has this line:
filter.strength = param[5];

but on the Filters Demo site, in Godray's parameters, there is not "Strength" parameter.

So... why is that? where was that "Strength" parameter from?

Oh and @cji3bp62000 set y to -height/2 (or height/2) didn't center filter on target but seem like to add screen height to y:
 
Last edited:

Tsukimi-neko

Tsukimi
Veteran
Joined
Oct 25, 2017
Messages
101
Reaction score
269
First Language
Japanese
Primarily Uses
RMMV
Awesome, i got it finally thank to @cji3bp62000
i have another question that in the case of ColorReplace filter
do i need quotes around of color value?
Filter_Controller.defaultFilterParam["colorreplace"] = ["0xff00" ...

and when i set Filter do i need to include quotes or not?
setFilter cr "0xff00" ...
or just setFilter cr 0xff00 is ok?
You can use Filter_Controller.defaultFilterParam["colorreplace"] = [0xff00, ...
and setFilter cr 0xff00 ...
I think.
I have no knowledge about colors and hex. Many thanks to >>Jonforum answering!


but on the Filters Demo site, in Godray's parameters, there is not "Strength" parameter.
I customized Godray filter and add the new parameter because I need the strength feature. (though it's not really strength, more like alpha or opacity; It's a naming miss...)
if you turn strength slowly to 0, the godray will slowly disapears.

I needed a fade-in/fade-out effect on GodRay, but seems like there is no such a feature in the default GodrayFilter, so I customized it.
 
Last edited:

Isabella Ava

Veteran
Veteran
Joined
Sep 13, 2016
Messages
635
Reaction score
756
First Language
English
thanks @cji3bp62000 Oh so that's why.
The strength parameter actually is a great idea because it makes beautiful fade in/out effect.
I take a look in your plugin code but i have no idea where did you do that :p
is there an easy way to add that opacity feature to customized filters?

Thank @Jonforum for your information about color convert
 

Tsukimi-neko

Tsukimi
Veteran
Joined
Oct 25, 2017
Messages
101
Reaction score
269
First Language
Japanese
Primarily Uses
RMMV
Yes or no. It's hard for me because I don't know how to download un-minimized code of PIXI.Filters from npm, so it's hell like this:

set y to -height/2 (or height/2) didn't center filter on target but seem like to add screen height to y:
Forget what I said (´;ω;`)
Just use -24 as well.

Are you saying this?
I used the below command to do this, maybe you can test:
createFilter g godray2 2 0
setFilter g 0 0 x x x x
setFilterSpeed g 0.01
 
Last edited:

microck

Veteran
Veteran
Joined
Jul 23, 2016
Messages
45
Reaction score
11
Primarily Uses
Wow ! I can see great Filters on the PIXI website such as:
DisplacementFilter
CRTFilter
DropShadwoFilter
GlitchFilter
PixelateFilter
ReflectionFilter
SimpleLightmapFilter
Unfortunately I haven't any javascript skill for adding those filters.
Anyway, thanks for this plugin ! :)
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Latest Threads

Latest Posts

Latest Profile Posts

The Ace attorney series are so great games... But at the same time such a travesty.
Made a video showcasing a plugin (by Lanza) that adds 5 more weather effects to our MV games. :LZYsmile: Namely:
Ash-dust,
bloodrain,
Cherry Blossom Petals,
Hail,
and bubbles.

I just like this website:
lol

Forum statistics

Threads
103,238
Messages
998,283
Members
134,727
Latest member
Tonypro18204
Top