Jump to content

Phaser Filter ColorMatrixFilter problem with Haxe


Recommended Posts

Hello everyone, this is my very first post !
I am a french game developper student, and i like phaser and pixi it's very easy to develop with them.
I try to use the ColorMatrixFilter of Pixi with Phaser to use the hueRotate on phaser's Groups. (I develop in Haxe with FlashDev by the way).
I saw this thread : 
wich should answer my problem. But it's no use, here is what i have :


at the beginning of the code (haxe is typed language wich export in javascript or other languages, but if you could help me in JS that should be enough)
import phaser.core.Filter;
private var hueFilter : Filter; //no problem for the moment ^^''
in the preload :
game.load.script('ColorMatrixFilter', 'lib/pixi/filters/color/ColorMatrixFilter.js');   //--this give me an error : require is not defined

in the create :
hueFilter = untyped new PIXI.ColorMatrixFilter();   //--> this won't build flashDev tells me : Class not found PIXI
and when i do this :
untyped console.log(PIXI);  //--> PIXI do exist! but there is no ColorMatrixFilter in it !
untyped console.log(PIXI.ColorMatrixFilter);  //--> return undefined



For the "require problem" i tried to use RequireJS 

in the index.html  : <script src="lib/requireJS.js"></script>
but it throws new error : Uncaught Error: Module name "../../core" has not been loaded yet for context: _. Use require([])

I believe i don't have to modify the ColorMatrixFilter.js to make it work so i don't know what to try next.




I even try to use another filter (HueRotate.js) that i have found here :

https://searchcode.com/codesearch/view/89062497/  //build with no error ! but completly erase my images and fill all the canvas with the same color... to sum up i can't make it work...


It's very frustrating because when my project only used pixi it was very easy :

filter = new ColorMatrixFilter();
container.filters = [filter];
filter.hue( value , false);

Can someone please help me, it has been one week since i have this problem.

what do i miss ?



Link to comment
Share on other sites

Haxe! I've been meaning to get into Haxe more.


But I think it's hurting you right now more than it's helping. Do you have to write your project in Haxe? What about getting it working in JS on a simple web page in a text editor and then porting it to Haxe?


If you're using a pre-built phaser.js (or phaser.min.js) it doesn't have the PIXI filters built-in; you'll have to include them yourself. Again, getting it working with <script> tags first is probably simpler then getting the Haxe toolchain to find where you've put the libraries.

Link to comment
Share on other sites

  • 4 weeks later...



Did you ever figure this out? I'm not using Haxe, but I can't get it to work either.

From what I found, this should theoretically turn my sprite white. Nothing happens, though. I am preloading the ColorMatrixFilter.js file and get no errors.

var sprite = game.add.sprite(100, 100, 'ball');var colorMatrix = new PIXI.ColorMatrixFilter();colorMatrix.matrix = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1];sprite.filters = [colorMatrix];
Link to comment
Share on other sites

  • 1 month later...

Ok, so like i said this was my first post...and as I did not know how this work I have been checking "notification" and "message" at the top of the site... and I didn't see your messages until this morning....(this is so stupid)

But ! hey ! the problem still remains ! 

First, thank you very much for your answer.

I would like to know how exactly do you include your lib : ColorMatrixFilter I still got the "require problem"  I tried this :

in the html :

<script src="lib\pixi\filters\color\ColorMatrixFilter.js"></script>

or/and  in the preload :

game.load.script('ColorMatrixFilter', 'lib/pixi/filters/color/ColorMatrixFilter.js');

I allways get the require problem, do i miss something here?


I even tried to include the complete pixi lib with phaser...but then I found out that I get problems depending on the first lib I load in the html :

<script src="lib/phaser.min.js"></script>
<script src="lib\pixi.js"></script>


<script src="lib\pixi.js"></script>
<script src="lib/phaser.min.js"></script>

anyways i don't really want to do it this way, there has to be a way to make this ColorMatriFilter work with haxe...

I also tried to use the "untyped" keyword that makes Haxe knows this is javascript... but still... "require problem"...


Can you tell me how do you include your lib please?

PS : I like JS but I prefere typed languages that's why I am trying Haxe for this site.

Link to comment
Share on other sites

just making another report of my tests :

This time I tried using the filter just like the test because i can't remember what happened when i first try : 


so I download the HueRotate.js  here :


I did exactly like the exemple : 

in the preload

game.load.script('HueRotate', 'lib/HueRotate.js');

in the create :

filter = game.add.filter('HueRotate');				
hueContainer.filters = [filter];

Then when I am in Phaser.CANVAS , nothing change, I don't know how to use it... how and what value can I change in filter?

And in Phaser.Auto, all my sprites desapear and when moving my cursor/ camera sometime i get a full blue color on my screen...

I would really prefer using the pixi lib for that...


Link to comment
Share on other sites

The game has to be set to Phaser.WEBGL in order for filters to work. I would share the code I used, but I scrapped it because filters were of no use to me since my game must run on Canvas. Note that Canvas has better browser support than WebGL: http://caniuse.com/#feat=canvas vs. http://caniuse.com/#feat=webgl. You might be better off just applying your filters in Photoshop like I wound up doing.

Your require problem is likely because you are using \ instead of / in some cases or the file is not at the specified location.

Link to comment
Share on other sites

I really wish this wasn't the case, but as someone pointed out to me in another post:


filters : Array.<Filter>

Sets the filters for the displayObject. IMPORTANT: This is a webGL only feature and will be ignored by the Canvas renderer.

Pretty cool portfolio! Whatever you were going to use filters for I really don't think you need them. There's plenty of eye candy already! :)

What were you going to use them for, though? There might be a tricky way to accomplish what you were looking to do without filters.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...