Filters - GLSL Shaders

[Xilef]

Scene_Map, Scene_Menu, Scene_Battle and global screen-space GLSL Filters.
Includes 13 inbuilt filters!

Version 1.24
!!! Requires WebGL

[[[Download Plugin Filter.js]]]
Save to your project js/plugins folder.

"prepare" immediately overrides any instance with the same name.
"execute" immediately overrides the current execution.
"complete" waits until the current execution is finished and prevents further "execute" or "complete" commands.

Plugin Command:

Filter prepare pixelate filter_a { "size":{ "x":4, "y":4 } }   # Prepare pixelate filter called "filter_a" with size 4, 4

Filter execute filter_a                                        # Display "filter_a"

Filter complete filter_a                                       # Remove "filter_a"

  

Filter prepare pixelate filter_b { "size":{ "x":0, "y":0 } }   # Prepare pixelate filter called "filter_b" with size 0, 0

Filter execute filter_b { "size":{ "x":4, "y":4 } } 120        # Transition size of "filter_b" to 4, 4 over 120 frames

Filter execute filter_b { "size":{ "x":8, "y":8 } }            # Transition size of "filter_b" to 8, 8 instantly

Filter complete filter_b { "size":{ "x":0, "y":0 } } 60        # Transition size of "filter_b" to 0, 0 over 60 frames, then remove

Scripting API:

Filter.add( "custom_filter", CustomFilterClass ); // See PIXI.AbstractFilter for custom filter examples

var instance = Filter.prepare( "custom_filter", { key : value } );

instance.execute( { key : value }, 60 );

instance.complete( { key : value }, 60 );

instance.prepare( "custom_filter", { key : value } );

Inbuilt Filters:

• color_matrix { "matrix":[1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] }
• gray { "gray":1 }
• pixelate { "size":{ "x":10, "y":10 } }
• blur_x { "blur":2 }
• blur_y { "blur":2 }
• blur { "blur":2, "blurX":2, "blurY":2 }
• invert { "invert":1 }
• sepia { "sepia":1 }
• twist { "offset":{ "x":0.5, "y":0.5 }, "radius":0.5, "angle":5 }
• color_step { "step":5 }
• dot_screen { "scale":1, "angle":5 }
• cross_hatch { "blur":2 }
• rgb_split { "red":{ "x":20, "y":20 }, "green":{ "x":-20, "y":20 }, "blue":{ "x":20, "y":-20 } }

Known issues:

• Filters require WebGL. This cannot be avoided.

Change log:

• Version 1.24:
  • Global filter (effects entire game) added as Plugin option.
• Version 1.23:
• • Filter Option is now saved in configuration manager.
• Version 1.22:
• • Rearranged source code.
  • Added global Options filter (configurable in Plugin parameters).
• Version 1.21:
• • Added uTime shader uniform for tracking filter life time.
  • Added support for additional uniform types.
  • Fixed Menu background bitmaps reverting/changing to black in some scenes.
  • Fixed actors not appearing with side-view battle system.
  • Battle animations are now affected by Filters.
• Version 1.2:
• • Added menu filter (configurable in Plugin parameters).
  • Added additional scripting APIs for filters via JS.
  • JS filters are not stored with the save game.
  • Refactored the save system.
  • Renamed internal object to hide Filter JS APIs.
• Version 1.11:
• • Filters in battles now only apply to backgrounds, actors and enemies.
  • Fixed skipping variables in execute breaking transition for complete.
• Version 1.1:
• • Fixed save/load only storing prepared variables.
• Version 1.0:
• • Initial version.

Spoiler: Screenshots

Example (Add Filter effect to map transfer):

 

[Ellie]

Fantastic, I've been waiting for something like this ever since I heard we'd have full access to everything in MV. Can't wait to see what comes of this.

 

[Xilef]

I've been doing experiments, testing things out, and there's some problems to solve with my current implementation.

One of them is that I've been trying to reuse instances of filters to prevent having too many objects hanging around. Seems like a good optimisation, but it means that you can't layer the same filter twice with different settings (they will share the settings) and default settings will always be whatever was previously set (so can't revert to default filters easily).

With that knowledge, I'll have to re-write so new instances are created each time you add a filter. Not a big deal, but it's significant enough to warrant a re-write.

I think using JSON as argument parameters is a good idea, there are some problems that need to be solved there (MV splits commands by space, so JSON structures need to be rebuilt, which is easy up until there are fringe cases like { "object" : "string here } "} where the space after the closing brace within the string ruins everything. If there was a regex solution to this I'd be happy, but I suck with regex so can't come up with a solution right now (if anyone here is good with regex, please help!).

JSON arguments is something that would be beneficial for other plugins, not just this one, so I think it's worth developing an over-engineered solution and publishing it as an MV plugin development snippet. A plugin that lets you directly modify JS objects via plugin commands is a possible use-case here.

How long filters live for is another thing to consider. I will probably mimic the menu setting for other filters so a global map filter can be applied, which gets modified by events (so enter new map -> default filters added -> events used to remove default filter, add new filters). But how do we modify a currently active filter? Perhaps support naming filter instances so commands can reference them? Maybe have the event use custom Javascript for creating new filters? Custom JS is probably the best option.

As a learning experience, I think I've got a lot of information about what can be done with MV and how much needs to be done to make it usable.


Any thoughts/suggestions/ideas from anyone would be very nice.

 

[Xilef]

Update: This is nearing a version 1.0 release.

1.0 will be restricted to filters on Scene_Map (including transitions). The biggest thing is finalising the API.

The API is basically prepare, execute, complete instances of Filters;
Filter prepare pixelate my_filter {"size":0} - Prepare a pixelate filter called "my_filter" with a "size" property which is initialised to zero
Filter execute my_filter {"size":10} 60 - interpolate the "size" property of "my_filter" to 10 across 60 frames
Filter complete my_filter {"size":0} 60 - interpolate the "size" property of "my_filter" to 0 across 60 frames after the current execute command finishes, finalising and destroying "my_filter" on completion

The prepare is used to define what variables you are going to need, so you can do things like;
Filter prepare blur my_blur {"blur":10} - Prepare a blur filter with a "blur" property initialised to 10
Filter execute my_blur - Instantly apply the my_blur filter
Filter execute my_blur {"blur":20} 120 - Increase the "blur" property to 20 across 120 frames
Filter complete my_blur - Instantly finalise and destroy the blur filter

So you can't reference a variable that isn't defined by the prepare command;
Filter prepare blur my_blur
Filter execute my_blur {"blur":10} - ERROR! Haven't prepared blur property (no default set)

This is a short-coming that is necessary for simplifying the code (which already needs a small refactor due to my initial attempts to avoid the declaration on prepare requirement).

Filters also persist across instances of the game, so the player can save the game fine and the filters won't turn off when they load their file.


So once I refactor the prepare, execute, complete and update methods I'll release a version 1.0 - it's a small refactor so not a big deal.

 

[Xilef]

Version 1.0 finished.

Here's an imgur album filled with screenshots; http://imgur.com/a/8fyDQ

See first post for information + download.
arpgmaker.com/viewtopic.php?p=930983

I decided to make the Filters carry into Scene_Battle and the re-factoring actually fixed the need to declare variables in the prepare statement.

EDIT: Version 1.1 quick addition.
1.1 fixes an issue where saving a file will only write the prepared variables. The saved keys list is now also updated for executions (changes will be saved).

I plan to expand the scripting API too so all this shit can be achieved via Javascript and not just the command system. The goal would be to make filter instances actual JS instances so you'd do something like this;

var my_filter = Filters.prepare( "blur", { blur : 0 } ); // Creates and adds to filter list

my_filter.execute( { blur : 4 }, 60 ); // Execute

my_filter.complete( { blur : 0 }, 60 ); // Completes and removes from filter list

my_filter.prepare( "blur", { blur : 0 } ); // Adds to filter list

The problem to solve here is saving/loading. It's all very well saving a JS filter, but when it's loaded where does the reference come from? For this reason I will probably disable saving for JS filters.

In the next version I aim to have Menu Background filters back again (applied in Plugin settings, configurable in JS - I don't want a new command for this). Then I'll be looking at Map transfers (I am thinking of doing something like RMXP's map transfer animation thing) and then Battle transfers (applied in Plugin settings, configurable in JS).

After that, targeting event sprites and battle sprites would be next, then after that ambient filter effects (construct key-frames with JSON, apply over time? Still not sure here).

So there's a lot to come in the future with this.

EDIT 2: Version 1.11 has some bug fixes related to complete transition. The battle scene has also been tweaked so the animations and damage text are no longer affected by the filters.

I've started on "FilterPack 1". I aim to have around 8 or 10 filters, depends on the inspiration I get. So far I have "brush" (new version of my blobs shader), "outline" (new version of my sobel edge detect filter) and "bloom" (which is a 2-pass filter for blooming up the whites, makes a great HDR effect when exiting buildings!).

Previews;
http://i.imgur.com/4wB4gkS.jpg
http://i.imgur.com/JrUndIU.jpg
http://i.imgur.com/C1kNDcr.jpg

 

[Xilef]

Updated with version 1.2 which has some big changes;

• Added menu filter (configurable in Plugin parameters).
• Added additional scripting APIs for filters via JS.
• JS filters are not stored with the save game.
• Refactored the save system.
• Renamed internal object to hide Filter JS APIs.

With Javascript filters it is up to the programmer to manage the life-time of a JS filter; when you lose the reference it will stick around forever so you need to call .complete() on your object. Instances can be recycled with the .prepare() method, so if you really need to you can keep a filter alive for a long amount of time and recycle it for different effects.

The menu filter parameters are basically the Prepare, Execute, Complete JSON objects in that order. They can be skipped, but it's not recommended.
The default blur tries to mimic the blur of vanilla RMMV, but it is slightly off.

There is also a timing system which is how long it takes to transition the menu filter. The complete transition is half the time, so a 30 frame menu opening is a 15 frame menu closing. This is different to vanilla which instantly blurs the background with no transitioning.

First post has been updated.

EDIT: Version 1.21 added with some big bug fixes (side-view works now, menu backgrounds aren't broken everywhere) and support for animated filters.

EDIT2: I had a lovely suggestion for the next version to support player setting a constant Filter via the Options menu, which is a pretty good idea. I'll have it configurable by the Plugin, so it can be disabled, a default filter can be set and a list of filters + their settings to appear in the options menu configured. It will be interesting having things like string data, numbers and vectors configurable by the player, but that's the plan anyway.

EDIT3: I've set up a very basic version of the options menu (filters aren't configurable, you choose between some preset options right now). First post updated for 1.22. The next version will fix a known issue with the filter orders for the global filter and set the "Ok" button to configure the current filter.

EDIT4: Hotfix to enable saving filter options across sessions.
EDIT5: Game-wide filter configurable now (effects everything).

 

[Milennin]

Any chance for a sample game download? I've copied over the sample plugin commands in an event, but nothing happens. I have WebGL.

 

[Xilef]

This Plugin is no longer compatible with the recent versions of MV. It needs to be remade - and is now low-down in my priority list due to the MV community not being very receptive to these kind of Plugins.

At the moment I am working on a Pixel-Movement Plugin, which will be the basis for a 3D map Plugin, at which point I'd then go ahead and remake this Plugin as there's pretty much zero reason to not do screen-space shaders once you've done 3D map rendering in WebGL.

 

[Milennin]

Ah, that explains it. Thanks for the quick reply.

 

[RuneX75]

Are you planing on updating this to work with the latest version of MV? I am asking because I want the blur for a few scenes in my game.

(I know a lot of time and effort goes into making plugins. [I feel a lot of people fail to realize that])

 

[Xilef]

Are you planing on updating this to work with the latest version of MV? I am asking because I want the blur for a few scenes in my game.

(I know a lot of time and effort goes into making plugins. [I feel a lot of people fail to realize that])

I did make a new system that doesn't rely on MV to work - however I haven't had time to actually make it into a proper Plugin. A version of this is used in TheUnProPro's Gameboy pack (I had created the Plugin to demonstrate how filters can make a monochrome game with palette changing capabilities).

I put about 40 minutes of time and effort into creating the new system, but you are right - it would take a few days with testing to make it more general purpose and usable with other types of Filters.