How to properly flip tiles for sprite sheet animations

Let’s say I’ve got a sprite sheet / strip on one .png and load it as a tile into my game.
The character in the file is headed to the right. I want to flip the tile to the left so I only rely on one png-file, even when the character runs left.

Office_Man_Run
(sample: Office Man Character by Jimmy D. Journey)

I tried this code snippet which wouldn’t work

var tileSource_flipped = Res.office_man_character.toTile(); //tile source
tileSource_flipped.flipX(); // this should work, shouldn't it?
var tileArray2d = tileSource_flipped.grid(12);
var tiles = new Array<h2d.Tile>();
tiles.push( tileArray2d[0][0] ); // (code snippet here without for-loop)
tiles.push( tileArray2d[1][0] );
tiles.push( tileArray2d[2][0] );
tiles.push( tileArray2d[3][0] );
tiles.push( tileArray2d[4][0] );
tiles.push( tileArray2d[5][0] );
var walking_anim_backwards = new Anim(tiles, 5);

So isn’t tileSource_flipped.flipX() the solution here or did I use it in a wrong way?

Thank you. :slight_smile:

I think grid() lose flipping so try flipX after grid

Hi! I was still thinking I could do the flipping once for the whole sprite sheet, but it didn’t work. So like you said, you cannot combo flip and grid, the output tiles of grid (/gridFlatten) actually need to be flipped each for its own. :slight_smile:

var tileSource_flipped = Res.office_man_character.toTile(); //tile source
var tileArray2d = tileSource_flipped.grid(12);
var tiles = new Array<h2d.Tile>();
tiles.push( tileArray2d[0][0] ); // (code snippet here without for-loop)
tiles.push( tileArray2d[1][0] );
tiles.push( tileArray2d[2][0] );
tiles.push( tileArray2d[3][0] );
tiles.push( tileArray2d[4][0] );
tiles.push( tileArray2d[5][0] );
// solution here could be:
for(t in tiles){
            t.flipX(); // or use: xFlip = true;
        }
//
var walking_anim_backwards = new Anim(tiles, 5);

Someone just hint me you would actually just use:

yourAnim.scaleX = -1; which is pretty simple actually

(so for this code it’d be: walking_anim_backwards.scaleX = -1;
so… no for-loop needed, still it points out that you get individual tiles from gridding a tile.)