Sign in to follow this  
johnnycash

How to generate different color textures with Pixi?

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 👍

Share this post


Link to post
Share on other sites

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;
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.