Atlas with spriteSourceSize: Input position does not update

[Abaddon]

When using Atlas with spriteSourceSize, sprites are pushed to their position, but input.pixelpick is still looking at their original position (0,0).

 

Example:

 

http://www.ugnis.com/Heroes-of-the-Past/public/ (clicking on buildings should invoke destroy())

 

Source code:

 

https://github.com/UgnisMasiulik/Heroes-of-the-Past

Building = function(castle, building){    this.sprite = game.add.sprite(0, 0, castle.race+'Atlas');    this.sprite.frameName = castle.race+building+'.png';    this.sprite.scale.setTo(scaleX, scaleY);    this.sprite.inputEnabled = true;    this.sprite.input.pixelPerfectClick = true;    this.sprite.events.onInputDown.add(this.clicked, this);}

I know that I could avoid using spriteSourceSize but maybe someone knows how to fix this?

 

[rich]

Which source file exactly is your code in? I just ran the following to test scaled texture atlases with pixel perfect clicks and it works fine here. Drop this into the Phaser Examples 'input' folder so you can run it. Not sure that it's related though, as I'm not sure what your use of spriteSourceSize is for exactly.

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });function preload() {    game.load.atlas('atlas', 'assets/pics/texturepacker_test.png', 'assets/pics/texturepacker_test.json');}var chick;var car;var mech;var cop;var text;function create() {    game.stage.backgroundColor = '#404040';    //  This demonstrates pixel perfect click detection even if using sprites in a texture atlas.    chick = game.add.sprite(64, 64, 'atlas');    chick.frameName = 'budbrain_chick.png';    chick.inputEnabled = true;    chick.input.pixelPerfectClick = true;    chick.events.onInputDown.add(clicked, this);    chick.scale.set(2);    cop = game.add.sprite(650, 32, 'atlas');    cop.frameName = 'ladycop.png';    cop.inputEnabled = true;    cop.input.pixelPerfectClick = true;    cop.events.onInputDown.add(clicked, this);    cop.scale.set(1, 2.5);    car = game.add.sprite(100, 400, 'atlas');    car.frameName = 'supercars_parsec.png';    car.inputEnabled = true;    car.input.pixelPerfectClick = true;    car.events.onInputDown.add(clicked, this);    car.scale.set(0.5);    mech = game.add.sprite(240, 100, 'atlas');    mech.frameName = 'titan_mech.png';    mech.inputEnabled = true;    mech.input.pixelPerfectClick = true;    mech.events.onInputDown.add(clicked, this);    mech.scale.set(1.5, 1);    text = game.add.text(16, 16, 'Click a sprite', { fill: '#ffffff' });}function clicked(sprite) {    text.text = 'You clicked ' + sprite.frameName;}

[Abaddon]

The problem is:

this.sprite = game.add.sprite(0, 0, 'FortressAtlas'); // <-- {"x":0, "y":0,}this.sprite.frameName = 'Fortress1.png';              // <-- spriteSourceSize = {"x":579, "y":101,} <-- comes from texture packer json

Sprite is displayed correctly at("x":579, "y":101,), but input still acts as if sprite was at (0,0).

 

This gives a desired effect, but then I have to somehow know x,y as I can't take them from texture packer json:

this.sprite = game.add.sprite(579, 101, 'FortressAtlas'); // <-- {"x":579, "y":101,}this.sprite.frameName = 'Fortress1.png';                  // <-- spriteSourceSize = {"x":0, "y":0,}

spriteSourceSize is a very useful tool for artists but it makes input unusable, Not using spriteSourceSize  would make me hardcode x and y of every sprite into the code. 

[rich]

That's a really unique and unusual use of a texture atlas! Not what they are meant for at all

 

spriteSourceSize is the coordinate of the single image, within the texture atlas dimensions, that Phaser should use to cut it out from (along with the source width and height). The resulting Sprite is only the size of the cut frame. The coordinates in the atlas file are nothing to do with display coordinates, which is why the Sprite isn't displayed there, they're purely to do with how a framework should cut the image out of the atlas and present it.

 

However you can do this:

this.sprite = game.add.sprite(0, 0, 'FortressAtlas', 'Fortress1.png');this.sprite.x = this.sprite.animations.currentFrame.x;this.sprite.y = this.sprite.animations.currentFrame.y;

And it will work