Jump to content

Atlas with spriteSourceSize: Input position does not update


Recommended Posts

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




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


Source code:



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?


Link to comment
Share on other sites

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;}
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...