Jump to content

How to generate different color textures with Pixi?


johnnycash
 Share

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.

Link to comment
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 👍

Link to comment
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;
}

 

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...