Search code examples
javascriptthree.jsspritescale

Best way to flip THREE.Sprite in r84?

I've upgraded my game engine from r69 to r84. Most things were fine but there are few things that are breaking, this is one of them.

Previously I was able to flip sprites by simply doing

sprite.scale.x = -1;

This doesn't seem to work anymore in r84. Not entirely sure why, can anyone provide a recommended way to achieve this now? My current idea will be to store two versions of the texture and simply switch between them, but this seems pretty inefficient and messy compared to the previous solution.

r84

Solution

  • You are using a sprite sheet and want to flip the image of an individual sprite.

    You can do that with THREE.MirroredRepeatWrapping using a pattern like so:

    // desired sprite row/column index
var iCol = 5;
var iRow = 3;
var flipSprite = true;

// texture
var loader = new THREE.TextureLoader();
var texture = loader.load( "mySpriteMap.jpg" );

// set wrapping to support flipping sprite
texture.wrapS = THREE.MirroredRepeatWrapping;

// set repeat
var nRows = 8; // sprite sheet: 8 rows x 8 cols
var nCols = 8;
texture.repeat.set( 1 / nCols, 1 / nRows );

// set offset
texture.offset.x = flipSprite ? - ( iCol + 1 ) / nCols : ( iCol / nCols ); // MirroredRepeatWrapping;
texture.offset.y = iRow / nRows;

// material
var material = new THREE.SpriteMaterial( { map: texture } );

// sprite
sprite = new THREE.Sprite( material );

    three.js r.84