Clothing Color Remapping

by roomyrooms

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.2/pixi.min.js"></script>
<script src="https://filters.pixijs.download/v4.1.4/pixi-filters.js"></script>
<script type="x-data-url" id="tree-url">
  data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAQCAIAAAB2sTYeAAAAjUlEQVRoge3TQQ6CMBgF4WlVbqZ388oQW7ZGAzTElW++dNHQv6SbKZ0H1KNVBmb+8G6jdmhn1/jd+xMmmOC2vdk5vb5ghgXmjc3+6eDYwU8utBNv//F8pyxv7/p45tfHihTMABTNABTNABTNABTNABTNABTNABTNABTNABTNABTNABTNABTNABTNABRtBQz3Y8qKVMTcAAAAAElFTkSuQmCC
</script><script type="x-data-url" id="egg-url">
 ...

JavaScript

var treeUrl = document.getElementById('tree-url').textContent;
var treeImg = document.getElementById('tree-preview');
var cloakUrl = document.getElementById('cloak-url').textContent;
var cloakImg = document.getElementById('cloak-preview');
var eggUrl = document.getElementById('egg-url').textContent;
var eggImg = document.getElementById('egg-preview');

cloakImg.src = cloakUrl;
eggImg.src = eggUrl;
treeImg.src = treeUrl;

var stage = new PIXI.Container();
var renderer = PIXI.autoDetectRenderer(512, 512);
renderer.roundPixels = true;
PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;

var treeBaseTexture = new PIXI.BaseTexture(cloakImg);
var treeTexture = new PIXI.Texture(treeBaseTexture);
var treeSprite = new PIXI.Sprite(treeTexture);
var eggBaseTexture = new PIXI.BaseTexture(eggImg);
var eggTexture = new PIXI.Texture(eggBaseTexture);
var eggSprite = new PIXI.Sprite(eggTexture);

var recolorBase = new PIXI.BaseTexture(treeImg);
var recolorTexture = new PIXI.Texture(recolorBase);

var baseTexture = new PIXI.Texture(PIXI.Texture.WHITE);
var baseSprite = new PIXI.Sprite(baseTexture);
var bgSprite = new PIXI.Sprite(baseTexture);

treeSprite.width = 46
treeSprite.height = 66

baseSprite.width = 128
baseSprite.height = 128

bgSprite.width = 512
bgSprite.height = 512
bgSprite.tint = 0x444499

// ADDITIVE blend mode for pretty intersecting lights

// move a little bit one light on right to check proper lights intersect
baseSprite.x = 20
baseSprite.y = 20
treeSprite.x = 20
treeSprite.y = 48
eggSprite.x = 30
eggSprite.y = 10
eggSprite.scale = {x: 2, y: 2}

// tada magic - apply our lightmap to our tiledmap
baseSprite.filters = [];
treeSprite.filters = [new PIXI.filters.ColorMapFilter(recolorTexture, true, 0.75)];
eggSprite.filters = [new PIXI.filters.ColorMapFilter(recolorTexture, true, 0.75)];
stage.addChild(bgSprite);
stage.addChild(eggSprite);
//stage.addChild(baseSprite);
stage.addChild(treeSprite);

document.body.appendChild(renderer.view);

// rendering...