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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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