Jump to content

Color blending sprites


Recommended Posts

Hi all


First of all, I wanted to thank/congratulate the creators of pixi.js; it is a great library! However I'm trying to achieve a relatively simple effect, but can't seem to figure out how. I've been playing around and looking through documentation, and it seems there is no way to blend color with a texture? I've tried masking, but as the description says this only appears to use the shape, not the color, of the mask.

Is there a way to do this in pixi? If so, how?


I'm using the autoDetectRenderer, as I want to support webGL and canvas devices. Obvisouly this would be easily doable with access to OpenGL, but I'd like a versatile solution that supports canvas as well. Even flash has this capability, I couldn't imagine it not being possible with HTML5/Canvas. Why leave this feature it out of such a great rendering engine? Or am I missing something?


If you're unsure of what I'm trying to achieve, for example: I could have a single white sprite texture loaded in once, and blend the color of each sprite object to have different colors of the same image. This comes in very handy for particles and other effects, while greatly reducing assets.


Thanks in advance! :D

Link to comment
Share on other sites

  • 3 weeks later...


If you were referring to this : http://codepen.io/adobe/full/nmfic


The browsers are getting ready and the overall support of the canvas blending spec is not too bad, see http://caniuse.com/canvas-blending.


I have no idea whether it's on the roadmap or not nonetheless

I was only really looking at simple tinting, but that's even better! Good to know it's around.


Hey guys - the new version of pixi sitting on the dev branch now supports blendModes and tinting for both canvas and webGL Sprites :)

Just pulled the new version down. Awesome work Mat!  :D Exactly what I was hoping for. However you handled it is more compatible than the Canvas blend modes as well; it works in older browser versions that the above example doesn't. Thanks a lot!

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