Phaser Filter ColorMatrixFilter problem with Haxe

[ugoRosini]

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 : 
http://www.html5gamedevs.com/topic/5339-is-the-pixi-displacement-filter-available-in-phaser/
 
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 ?

 

Thanks

[drhayes]

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.

[kleepklep]

Hi,

 

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];

[kleepklep]

Discovered the problem. I have my game set to Phaser.CANVAS. It appears that none of the filters work in this mode.

[ugoRosini]

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>

or

<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.

[ugoRosini]

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 : 

http://phaser.io/examples/v2/filters/blur

so I download the HueRotate.js  here :

https://github.com/photonstorm/phaser/blob/master/filters/HueRotate.js

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...

 

[kleepklep]

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.

[ugoRosini]

Well, i want my website to use the canvas too, so i guess i'll just stop searching here.

Thank you very much for your help.

if you're curious here's the website (it's my portfolio actually) :

http://ugorosini.com/

[kleepklep]

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

http://phaser.io/docs/2.4.4/Phaser.Sprite.html#filters

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.