How to generate different color textures with Pixi?

[johnnycash]

I want to generate multiple textures from one base texture. The multiple textures would have different color of a specific attribute (skin, shirt, pants, hair..).

I looked at one example (https://www.goodboydigital.com/pixijs/bunnymark/), but the bunnies it uses are extracted from the image and not dynamically generated with Pixi...

So, how do I generate multiple textures with different color specific attributes with Pixi?

Example code would be greatly appreciated.

[ivan.popelyshev]

renderTexture + color swap filters. Look for renderTexture demos. Look for special filters in pixi-filters. Combine it, maybe make an atlas with different Texture's regions inside. If everything goes wrong i'll help you to fix your demo, but first try it on your own.

[johnnycash]

I've made some progress:

https://jsfiddle.net/5zxgctnm/5/

I used MultiColorReplaceFilter and added it to container.filters.

However, I haven't found a way to apply a filter to a RenderTexture.

 

[johnnycash]

Success!

I've written a function for my use case.

function multiColorReplaceSpriteCopy(renderer, sprite, replacements, epsilon) {
    let container = new PIXI.Container();
    let filter = new PIXI.filters.MultiColorReplaceFilter(replacements, epsilon);
    container.addChild(sprite);
    container.filters = [filter];
    let brt = new PIXI.BaseRenderTexture(sprite.width, sprite.height, PIXI.SCALE_MODES.LINEAR, 1);
    let rt = new PIXI.RenderTexture(brt);
    var sprite_copy = new PIXI.Sprite(rt);
    renderer.render(container, rt);
    return sprite_copy;
}

And here's the final result:

https://jsfiddle.net/msovjknx/7/

@ivan.popelyshev would appreciate Your input ?

[ivan.popelyshev]

Good, it works!

Also, there's shortcut "PIXI.RenderTexture.create" that can combine two lines into one.

[johnnycash]

Optimized function (removed new before PIXI.RenderTexture.create) :

function multiColorReplaceSpriteCopy(renderer, sprite, replacements, epsilon) {
    let container = new PIXI.Container();
    let filter = new PIXI.filters.MultiColorReplaceFilter(replacements, epsilon);
    container.addChild(sprite);
    container.filters = [filter];
    let rt = PIXI.RenderTexture.create(sprite.width, sprite.height, PIXI.SCALE_MODES.LINEAR, 1);
    var sprite_copy = new PIXI.Sprite(rt);
    renderer.render(container, rt);
    return sprite_copy;
}

 

[ivan.popelyshev]

no need for "new" there, "create" is not a constructor