[Demo][JavaScript] PIXI Filters

GDevelop general
1

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) :smiley:

Preview (Displacement + Pixelate filters):

Filters.png
Filters.png1246Ă—936 100 KB

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 :slight_smile:
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 :sunglasses:
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 :neutral_face:
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 :smiling_imp:

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 :wink:

1 Like
2

That’s definitely something awseome you’ve done here!
You should considerate put a link to this thread on the wiki (on the advanced tutorials section, even if it is not a tutorial there are a lot of things to learn in it).

You could also create a pull request to add it as an example (in the Javascript folder) :smiley:

Well done! That’s the kind of things that encourages me to develop GD! :slight_smile:

3

I think it should be added to GD proper.

4

It could indeed. But in any case it’s cool, after all this time having users asking for being able to add JS to their games, to finally see some really nice improvements made with it :slight_smile:

I guess that the best way to show that some features could be added to GD is to do prototype of them with JS events code using PIXI.js :smiley:

5

I requested it as a feature here:

:slight_smile:
its awesome you did it via java script.

If gdevelop had a proper support for shaders (as assets) - like multimedia fusion and construct2 do, I think that it will motivate the community to make and share filters.
Having more filters will empower gdevelop to make more visually impressive games! :mrgreen:

So i really hope to see it added to the trello board, along with some documentation on writing filters/shaders.
Some community shared shaders could even make their way to gdevelop’s git trunk

6

Any plans on adding this to the Roadmap on trello? Support for webGL filters.

InsertCoin25

7

Added it here: trello.com/c/pRmsGtQH/28-suppor … rs-shaders

To make sure it’s not buried and forgotten. :slight_smile:

8

Talking about demos, I will share today or tomorrow (maybe I’ll clean it up a bit) a demo with HTML5 particles (using an external library made for PIXI: https://github.com/CloudKidStudio/PixiParticles).
Making the library to work with GD was really straightforward, zero effort! :mrgreen:

9

Awesome! Look forward to see it!

10

Cleaning, I’ve been a little “busy”… Don’t trust my notion of time :laughing:

11

Ok, here it’s :slight_smile:
[url][Demo] [JavaScript] PIXI Particles]