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
- choose your engine (here Pixi) or create your own format
- choose your output location and file name
- 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Ă :)