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

sefeloth

Veteran
Veteran
Joined
Oct 24, 2016
Messages
36
Reaction score
5
First Language
english
Primarily Uses
thank you very much for this! i love seeing visual effects plugins
 

youngjinna

Villager
Member
Joined
Feb 23, 2018
Messages
12
Reaction score
1
First Language
Korean
Primarily Uses
RMMV
why filter: Noise isn't auto-animated??
you wrote there it's auto-animated.
i tride, that changing parameter of Noise filter (Strength, maybe).
it doesnt' animated not at all... how do i solve this prob-- plz, help me :(
 

Espilonarge

Veteran
Veteran
Joined
Apr 24, 2016
Messages
145
Reaction score
69
First Language
English
Primarily Uses
Ok, I've tried just about every single combination I can think of but no matter what I do, I can not get any filter effects to apply to any (or all) actors/enemies in a battle. Putting "createFilter nameID filterID 4" will always result in an instant error (specifically a "length" error) and using "4000 -1" or "3999" doesn't apply any effects to the enemy (the same with "4000 1" or "4001" for actors).

On top of that, I only just found out that the plugin was updated (it can now apply filters to the parallax) but the plugin author hasn't returned to the site for the past few months now so unless someone else knows how it's done, I'm pretty much SOL.
 

Archeia

Level 99 Demi-fiend
Staff member
Developer
Joined
Mar 1, 2012
Messages
15,606
Reaction score
16,230
First Language
Filipino
Primarily Uses
RMMZ
Ok, I've tried just about every single combination I can think of but no matter what I do, I can not get any filter effects to apply to any (or all) actors/enemies in a battle. Putting "createFilter nameID filterID 4" will always result in an instant error (specifically a "length" error) and using "4000 -1" or "3999" doesn't apply any effects to the enemy (the same with "4000 1" or "4001" for actors).

On top of that, I only just found out that the plugin was updated (it can now apply filters to the parallax) but the plugin author hasn't returned to the site for the past few months now so unless someone else knows how it's done, I'm pretty much SOL.

You can post issues on their Github if you have questions for them.
 

ct_bolt

Creator
Veteran
Joined
May 3, 2012
Messages
1,172
Reaction score
720
First Language
Javascript
Primarily Uses
RMMZ
Filter Controller v2.0.9
Tsukimi (cji3bp62000)
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)
   3: tiles
   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)
   3: tiles
   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:
LDTffMB.png

Event notes:
lzkeXwX.png

 <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).
filter-list.jpg

*** 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)
Very incredible plugin! Well done. Great work!

I've been playing around with this for a while now, but I have a question...
Does anyone know how it is possible to make a filter that only effects the battle background?
 

drumblepie

Veteran
Veteran
Joined
Nov 12, 2015
Messages
33
Reaction score
4
Primarily Uses
Hey, I'm trying to use this plugin and I'm not having any success. I'm assuming the plugin requires the filter effects to somehow be saved in the project's file folders? If so, how do I do that? What folder should I save them in, and how do I get them? If it was explained above I didn't understand. (The link to PIXI seemed only to bring me to their main page.)
 

Goader

Villager
Member
Joined
Jun 18, 2015
Messages
6
Reaction score
0
First Language
English
Primarily Uses
Hello! Amazing mod, as i'm sure you've heard a lot. I've run into an issue with it however.

I've been toying around with the glow feature a lot, it works and looks great on the player character, but for the life of me, I can't get it to apply to other characters. It applies to them when I set the filter target to Map, though only when they're on top of a blank tile, as non-blank tiles block (or I suppose "absorb") the glow. When set to just tilesets, it avoids making characters on blank tiles glow, so I know it's differentiating them.

Trying to target "All characters" strangely only targets the player character, and any direct targeting doesn't work either.
 

_Shadow_

Tech Magician Level:
Moderator
Joined
Mar 2, 2014
Messages
4,088
Reaction score
2,684
First Language
Greek
Primarily Uses
RMMZ
This is fantastic! Thank you for making this. I wanted to study how to deal with the filters and you actually made a ready to use plugin. This will speed up my learning curve. Not to mention that the plugin is super helpful!
Thank you.
 

Hyouryuu-Na

Very very lazy
Veteran
Joined
Jun 15, 2017
Messages
1,105
Reaction score
2,907
First Language
Not English
Primarily Uses
RMMV
whenever I use the oldfilm filter, the screen stretches vertically. Is it supposed to be like that?
 

Gabezin

Veteran
Veteran
Joined
Sep 27, 2016
Messages
41
Reaction score
12
First Language
Spanish
Primarily Uses
Hi, I found the AdvancedBloomFilter shown in PIXI Filters demo very beautiful, but it is not in the effect's list included in the plugin.
How can I add it?
 

LawrenceindaSky

Veteran
Veteran
Joined
Apr 21, 2016
Messages
69
Reaction score
8
First Language
English
Primarily Uses
N/A
So, I'm new to this stuff for coding and all that and I'm really interested in this plugin! But one issue I'm having is on how to add filters such as that Glitch Filter in the demo you have. May I have some help with this please? It would be very helpful!
 

Galenmereth

Semi-retired
Veteran
Joined
May 15, 2013
Messages
2,249
Reaction score
2,194
First Language
English
Primarily Uses
N/A
@LawrenceindaSky I actually added this today. Just download this script file and place it in your plugins folder, add it in your Plugin Manager below "FilterController.js" and enable the effect with
Code:
createFilter YourID glitch <slices> <offset> <direction>

The possible values for the parameters are:
slices: 2 to 20 (default 10)
offset: -400 to 400 (default 100)
direction: -180 to 180 (default 0)

You can omit the parameters to have them remain at those defaults. Hope that helps :)

PS: I didn't add Plugin Command params for the red, blue and green offsets as well as fillMode, but their defaults are set in the script file with some comments.
 

LawrenceindaSky

Veteran
Veteran
Joined
Apr 21, 2016
Messages
69
Reaction score
8
First Language
English
Primarily Uses
N/A
@LawrenceindaSky I actually added this today. Just download this script file and place it in your plugins folder, add it in your Plugin Manager below "FilterController.js" and enable the effect with
Code:
createFilter YourID glitch <slices> <offset> <direction>

The possible values for the parameters are:
slices: 2 to 20 (default 10)
offset: -400 to 400 (default 100)
direction: -180 to 180 (default 0)

You can omit the parameters to have them remain at those defaults. Hope that helps :)

PS: I didn't add Plugin Command params for the red, blue and green offsets as well as fillMode, but their defaults are set in the script file with some comments.
Thank you so much! I just felt this was needed for my game since one of my main enemies is a fourth wall breaker (Hacker-Type of guy) and can break the universe. So this Filter can add more detail to it.
 

adachis

Villager
Member
Joined
May 8, 2019
Messages
6
Reaction score
8
First Language
English
Primarily Uses
RMMV
Hi! This is my first post. :) I found a bug and fixed it, so I just wanted to let people know in case they ran into it, too, and needed to fix it. I submitted it to Github already in case the plugin is still being revised. It seems like the dev hasn't been active on this thread for a bit so I'm not sure.

Problem

If you try to apply an effect to all characters and events using the target code 4 (for example: <Filter:rgbsplitter,rgbsplit,4>) your game will crash when a battle begins. (I assume it always will because I was able to replicate this in a fresh project.) This happens because, in the code, target code 4 only applies to map sprites and doesn't include any logic to apply it to the battle sprites instead. Because the code doesn't catch this, it tries to apply the effect to characters and events from the map while in battle. Because there aren't any, it crashes. I thought this was only happening because I added a custom effect but it still happens with the built-in effects. Fortunately, it's pretty easy to fix this error.

Solution
You can fix this problem really quickly with a tiny bit of conditional logic. The problem occurs in case 4 of a switch statement in the FilterController.js plug-in file. That should appear on line 1404, so if you have a code editor you can find it really quickly. If not, just search for "case 4" (no quotes) because that text never appears anywhere else in the code. Now look for this line:

targets = this._spriteset._characterSprites; // special

Highlight and paste this in over it:

if (this._spriteset._characterSprites != undefined)
{
targets = this._spriteset._characterSprites; // special
}


That will make the code check to see if the map sprite set is defined or not. When it is, the code will run as it normally does. When it isn't defined, however, no targets will get set which will prevent the code from applying the effect (meaning it just won't show up in a battle when you target 4 since that would break it).

This solution is very simple and doesn't actually solve the problem of still applying the effect in battle by default. There's definitely a way to check for all battle targets but I'm still new to the RPG Maker MV classes so it'd take me a couple of hours to sort that out and I have to get back to my actual work—plus, I don't need that to be fixed and don't see many uses cases for anyone needing it. :p After all, you can just target effects in battle separately which is, at the very least, is a better way to manage your game's computational requirements (regarding Pixi effects, anyway). I just wanted to get this out there in case someone else runs into the same problem so they can fix it, too! Even if you don't know any JavaScript this is a very easy fix to make. You just have to copy and paste. :)

Anyway, hope this helps!
 

Gabezin

Veteran
Veteran
Joined
Sep 27, 2016
Messages
41
Reaction score
12
First Language
Spanish
Primarily Uses
Hi, I found the AdvancedBloomFilter shown in PIXI Filters demo very beautiful, but it is not in the effect's list included in the plugin.
How can I add it?
Anyone know how?
 

SoSick.

Veteran
Veteran
Joined
Jun 29, 2016
Messages
224
Reaction score
192
First Language
english
Primarily Uses
RMMV
hey there!
this plugins looks cool, never messed about with PIXI etc. Is it possible to make a filter with a slight blur at the top ? very nooby question. sorry :barf:
 

KotoYama

Veteran
Veteran
Joined
Apr 20, 2019
Messages
447
Reaction score
81
First Language
Portuguese
Primarily Uses
RMMZ
Unfortunately, this plugin just doesn't work... Few people before me had the same issue.
"Cannot read property (filter name) of undefined". I also tried map notes - nothing.
Tested on versions 1.2, 1.5.1 and 1.6.1.

Any thoughts?
 

Hyouryuu-Na

Very very lazy
Veteran
Joined
Jun 15, 2017
Messages
1,105
Reaction score
2,907
First Language
Not English
Primarily Uses
RMMV
I think what browser you use matters. Whenever I use this plugin, the screen stretches on my computer. But it works perfectly fine on my newer laptop. Both the devices have firefox but I guess different versions.
 

Latest Threads

Latest Profile Posts

I officially declare today "test play day." I'm going to waste the whole day playing video games, which isn't a shock to anybody, but hopefully today I'll play my own and figure out what still needs fixin's.
Empty Bottles and Health Extenders are now a thing.
Also the Sling-Shot does damage to enemies now, but not a lot and you won't get gold from killing them that way.
ScreenShot_5_26_2022_11_36_32.png
added a Panic gauge to battle. it fills up according to your actions. each character has a different passive that activates once the gauge is full. also once full, a countdown starts and after each action taken, the gauges decreases. with each character, the decrease is different.
Genuinely considering making a thread informing people how to Google.

Forum statistics

Threads
122,171
Messages
1,146,985
Members
160,429
Latest member
evanille
Top