Tint to color filter

[dmko]

I'd like to tint a sprite to a solid color, i.e. if it's a texture just turn all the opaque pixels to that particular value (Sprite.tint to white does not do this)

From looking at http://pixijs.github.io/pixi-filters/examples/ it seems there's no built-in filter to do this. Do I need to write a new filter/shader for v4 in order to accomplish this?

Not too scared, but just wanted to make sure this particular path hasn't been beaten down already

Thanks!

[dmko]

Fwiw, haven't tried this with v4 but a quick glance of shaders seems this is pretty straightforward:

http://codepen.io/anon/pen/PzXVGp

[ivan.popelyshev]

I'll give you a shader a bit later. I had it somewhere...

[Exca]

If you need 2d canvas support also you could do that by rendering the textures to offscreen canvas like this.
 

var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var img = someImageElement;
canvas.width = img.width;
canvas.height = img.height;
context.fillStyle = "#FFFFFF"; //Replace with wanted color.
context.fillRect(0,0,img.width, img.height);
context.globalCompositeOperation = "destination-in";
context.drawImage(img, 0,0, img.width, img.height);

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

If you're using spritesheet then you could build new textures with frame definitions from that spritesheet and just have them use the canvas as basetexture.

[dmko]

Thanks y'all! Followup question, are there docs somewhere for v4 shaders? I see it's been split off into a whole new subsystem for generic webgl stuff...

[dmko]

OK cool, I got it to work... calling this "colorfill".. no doubt there's a better way of inlining the shader code, but I didn't want to worry about browser issues etc...

I used an "loose augmentation" structure so I can add more filters, and use the DefaultVert across them

usage: 

var filter = new MY_SHADERS.ColorFill(0xFF0000); //fill with any hex color

item.filters = [filter];

colorfill frag shader code:
 

var MY_SHADERS = (function(exports) {
    var ColorFill = function(hexVal) {
        var str = "";

        str += "precision mediump float;";

        str += "varying vec2 vTextureCoord;";
        str += "uniform sampler2D uSampler;";
        str += "uniform vec3 rgbColor;";


        str += "void main(void) {";

        str += "gl_FragColor = texture2D(uSampler, vTextureCoord);";
        str += "gl_FragColor.r = rgbColor.r * gl_FragColor.a;";
        str += "gl_FragColor.g = rgbColor.g * gl_FragColor.a;";
        str += "gl_FragColor.b = rgbColor.b * gl_FragColor.a;";
        str += "}";

        PIXI.Filter.call(this, MY_SHADERS.DefaultVert, str);

        if (hexVal !== undefined) {
            this.hexColor = hexVal;
        }
    }

    ColorFill.prototype = Object.create(PIXI.Filter.prototype);
    ColorFill.prototype.constructor = ColorFill;
    Object.defineProperties(ColorFill.prototype, {
        rgbColor: {
            get: function() {
                return this.uniforms.rgbColor;
            },
            set: function(value) {
                this.uniforms.rgbColor = value;
            }
        },

        hexColor: {
            get: function() {
                return PIXI.utils.rgb2hex(this.uniforms.rgbColor);
            },
            set: function(value) {
                this.uniforms.rgbColor = PIXI.utils.hex2rgb(value);
            }
        },
    });

    exports.ColorFill = ColorFill;

    return exports;

}(MY_SHADERS || {}));

Default vert shader code:
 

//taken from pixi filters repo
var MY_SHADERS = (function(exports) {
    var str = "";

    str += "attribute vec2 aVertexPosition;";
    str += "attribute vec2 aTextureCoord;";

    str += "uniform mat3 projectionMatrix;";

    str += "varying vec2 vTextureCoord;";

    str += "void main(void)";
    str += "{";
    str += "gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);";
    str += "vTextureCoord = aTextureCoord;";
    str += "}";

    exports.DefaultVert = str;

    return exports;

}(MY_SHADERS || {}));

 

Edited August 15, 2016 by dmko
couldn't read js in post