While learning about PIXI filters trying to get the grayscale effect, in this topic (finally I get it to work), I found it was a lot easier to get it working than I thought, there are a lot of built-in filters (i.e. not need to write glsl), and you just need to attach them in the PIXI “graphics related” objects, these PIXI objects can be found as attributes of some GD classes (scene, layers, sprites, tiled sprites, etc.). So I decided to make a demo of filters with the same filters and options of the PIXI demo here: PIXI filters example (of course my GUI is basic, some static rectangles with the shape painter)
Preview (Displacement + Pixelate filters):
Well, here it is (you need a device supporting WebGL):
PIXIFilters.rar (116 KB)
You should find a platformer example (with a tiled background that achieves a parallax and infinite effects), use left-right-up to walk and jump
The important thing is the GUI that controls the filters at the right, you can turn on/off every filter with the checkbox at the right of the filter name. Under each filter you’ll find bars controlling the filters settings, drag them to modify the filters
I don’t post it in “Help for game creation” because it’s really a demo, it uses JavaScript and the code (JS and events) is a bit complex (so typical of me) but very efficient I thought. I made it in this way (structures with info about filters, filters “dictionaries”, dynamic filters and properties names, indices, etc.) to work with multiple filters dynamically. It is very easy to work with one or two filters, really: check the example given in the grayscale effect topic (link at the beginning of this message), that is a good example to help, this is not
The bad side is that I have to access an object property directly, without method: to get the PIXI objects container of a layer, there is not a method getPIXIContainer() as in scenes, I need it because the GUI layer must not be affected by the filters; other way, after the displacement, pixelate or twist filters, controlling the GUI becomes a nightmare
Let me know if something don’t work (tested in two PCs, Chrome and Firefox), if there is a bug (to open the console: Shift+Ctrl+I in Chrome, Shift+Ctrl+K in Firefox), if the *.rar file doesn’t work, you need another compression file format, or you have any question about the example itself