Use Texture Packer and PIXI

Javascript ES6

2018

Step 1 prepare assets from FluffyStuff

I use photoshop batch feature to resize and rename. (note that Texture Packer can rescale assets)

Step 2 drag & drop to Texture Packer

Texture packer

Texture packer

  1. choose your engine (here Pixi) or create your own format
  2. choose your output location and file name
  3. click publish

this will generate the texture atlas

and the a description file (here a json)

Note that Texture Packer has a lot of feature like : trim transparent pixel, optimize the texture, reduce size using optimized packing algorithm, merge identical sprites etc. features are listed here

but in my simple case the free basic features are just good :)

Step 3 some code to generate tiles at run time

class MahjongTile extends Sprite
{
    constructor(pL , pC, pLayer, pIdx)
    {
        ... some init code here...

        // slighty offseted domino
        let domino = new Sprite(Datas.atlas["tile1"].texture) // the white part
        domino.x = 3;
        domino.y = 3;
        domino.tint = 0xcd6133; // now tinted with "chilean fire" color
        this.addChild(domino);

        // we add the black tile
        this.addChild(new Sprite(Datas.atlas["tile2"].texture));

        // finally symbol
        this.symbol = new Sprite(Datas.atlas["tile"+type].texture);
        this.symbol.x += this.width / 2;
        this.symbol.y += this.height / 2;
        this.symbol.anchor =  new Point(.5,.5); // center
        this.symbol.scale =  new Point(2/3,2/3); // and scale the texture
        this.addChild(this.symbol);
    }

    ... more code ...

    set isFree(value)
    {
        if(value == this.isFree)
        {
            this.tint = 0xEFEFEF;
            return;
        }else{
            this.symbol.tint = (this.isFree) ? 0x808080 : 0xFFFFFF; // apply some grey tint on locked tiles
            this.symbol = Datas.atlas["tile" + this.type].texture;
        }

        this._isFree = value;
    }

    ... more code ...

And voilà :)