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

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.

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

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.