Make sprite seem disabled

[plushy]

Hi,

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.

[Exca]

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]=gray;
  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);
stage.addChild(sprite);

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.