mkit Posted April 24, 2015 Share Posted April 24, 2015 I am making a slider puzzle game - the type of game where there is a grid and an image is broken up into X tiles and the position of the tiles is shuffled and the user is required to rearrange the pieces back to the correct positions. Anyway I would like to use a single image rather than break the image up into separate tile images. Would appreciate advice on how you would recommend doing this. The solution I have come up with so far is as follows: In my preloader statethis.load.spritesheet('gameImages','assets/image1.jpg', 400, 400);Then in my game state var numTileSize = 100; var numRows = 4;var numColumns = 4; this.arrTileObjects = new Array(); for (var i = 0; i < numRows; i++) { for (var j = 0; j < numColumns; j++) { var tileObject = this.add.tileSprite(j * numTileSize, i * numTileSize, numTileSize, numTileSize, 'gameImages', 1); tileObject.tilePosition.x = -(j * numTileSize); tileObject.tilePosition.y = -(i * numTileSize); this.arrTileObjects.push(tileObject); } }Appreciate any feedback on this implementation and if there is an alternative implementation that would be better? Thanks in advance Link to comment Share on other sites More sharing options...
rich Posted April 24, 2015 Share Posted April 24, 2015 There are a few ways to do it, but personally I would probably use a BitmapData object per Tile and cut the image up into that. Alternatively you could use Sprite.crop to trim out the part you need. I wouldn't use a TileSprite though. Link to comment Share on other sites More sharing options...
igin Posted April 25, 2015 Share Posted April 25, 2015 You can take a look at the dynamic crop example on phaser website. Link to comment Share on other sites More sharing options...
mkit Posted April 27, 2015 Author Share Posted April 27, 2015 Thanks rich and igin - I will check out your suggestions. Link to comment Share on other sites More sharing options...
Recommended Posts