tileSprite loaded from a spritesheet is distorted

[EvilB]

Hey there,

I ran into an issue when I tried to create a parallax effect for a side-scroller. I first got the parallax effect working by loading each image individually and adding it as a tileSprite to the game. That went well, so I thought why not create a spritesheet for the different layers , which I created using TexturePackers atlas JSON presets.

Now the issue: all layers load well when I load them like:  this.mountains = this.game.add.tileSprite(0, 0, 733, 420, 'background', 'mountains.png');
but because this does not seem to use all the data that is stored in the JSON file, the transparent pixels that were cropped off by TexturePacker, are not taken into accounting and the texture is stretched all the way to the expected dimension. To fix it I have to manually adjust the scale using tileScale after the tileSprite has been loaded, but there must be an easier way and I must be overlooking something.
So long story short, Phaser does load the correct sprites from the spritesheet, but the dimensions and positioning data seem to remain un-used.

Thanks in advance for your help!

 

[EvilB]

The simple solution to this is to not trim the sprites in TexturePacker (set "Trim mode" to "None"). I was hoping somebody would have a beter solution, because this does result in slightly bigger spritesheets, but at least by applying this way of working, I can put all my background layers into 1 sprite sheet, which saves several HTTP calls...

[drhayes]

The sixth argument to "game.add.tileSprite" is the "frame" of the image... which can be the name pulled from the atlas as packed by Texture Packer. You have to load the image as an atlas in your preload first.