Jump to content

Make sprite seem disabled


Recommended Posts


I'm trying to make a sprite for a button look disabled using filters. What I was originally thinking was something like the GrayFilter in this example http://www.goodboydigital.com/pixijs/examples/15/indexAll.html set to 0.9 or so, but it seems to have been removed. Is there a good way to do this? I tried the PIXI.filters.ColorMatrixFilter.greyscale(alpha) but I'd like to still have some faded colour in the image.

Link to comment
Share on other sites

You could do it with a custom shader. Something like this.

GrayFilter = function()
	var fragment = 'precision mediump float;\
varying vec2 vTextureCoord;\
uniform sampler2D uSampler;\
uniform float amount;\
void main(void){\
vec4 color = texture2D(uSampler, vTextureCoord);\
vec3 gray = color.r*.21 + color.g*.72 + color.b*.07\
gl_FragColor = mix(color.rgb, gray, amount);\
	PIXI.Filter.call(this, null, fragment);
GrayFilter.prototype = Object.create(PIXI.Filter.prototype);
GrayFilter.prototype.constructor = ColorFill;
Object.defineProperties(ColorFill.prototype, {
        amount: {
            get: function() {
                return this.uniforms.amount;
            set: function(value) {
                this.uniforms.amount = value;

The multipliers in the grayscale calculation are same as what are used in Gimp. You can change those depending on if you want average grayscale, luminosity or something else.

If you need 2d canvas support also then the shader solution is not viable.

For 2d support I do offscreen rendering of the whole spritesheet and just duplicate identical textures with different basetexture tinted in other canvas. Here's a simple example of that.

var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var img = someImageElement;
canvas.width = img.width;
canvas.height = img.height;

context.clearRect(0,0,img.width, img.height);
context.drawImage(img, 0,0, img.width, img.height);
var imageData = context.getImageData(0,0, img.width, img.height);
var bytes = imageData.data;
for( var i = 0; i < bytes.length/4; i++)
  var index = i*4;
  var gray = bytes[index] * .3 + bytes[index+1] * .59 + bytes[index+2]*.11;
  bytes[index+1] = gray;
  bytes[index+2] = gray;
context.putImageData(imageData, 0,0);

var baseTexture = new BaseTexture(canvas);
var texture = new Texture(baseTexture);
var sprite = new Sprite(texture);

Please note that the 2d solution should be calculated only once, so animating something from color to gray can be done with crossfade or something similar.

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