Where's my sprite, Phaser?

[Stephen Persson]

I'd like to get the visual x/y/width/height of a sprite after scaling/skewing/rotating/anchoring it.
Can I do that with Phaser?

The case:

If you flip horizontally a sprite that has {x: 100, y: 100, width: 64, height: 64},
what will your eyes see on the screen? {x: 36, y: 100, width: 64, height: 64}. That's what I'm looking for.
However, Phaser tells you:{x: 100, y: 100, width: -64, height: 64}.

No big deal, you just do a little math to fix it, kinda like you showed there.
That is, if you only scale it.

It gets more mathematical when you also change the anchor, and turns into a geometric nightmare if you rotate it too.

Phaser is heavily based on Flixel, right?
Then my hopes are that you could do it like in Flash, where you can solve all of this by wrapping your sprite into a movieclip and getting the container's x/y/width/height.

[prateek.pradeep]

Yes, you can.

[in mono]

sprite.width will always give you the sprite's width in screen pixels. If you want to know the sprite's original dimensions, you can use sprite.width * sprite.scale.x and sprite.height * sprite.scale.y

[Stephen Persson]

Yes, you can.

I didn't find out how to skew a sprite, do you have an example?

 

sprite.width will always give you the sprite's width in screen pixels. If you want to know the sprite's original dimensions, you can use sprite.width * sprite.scale.x and sprite.height * sprite.scale.y

But negative scaling will screw it.

[wayfinder]

getBounds() is what you're looking for

[Stephen Persson]

When you rotate the sprite, getBounds()'s x/y/width/height don't change.

[Stephen Persson]

This is frustrating.

[wayfinder]

wow, rude

[ForgeableSum]

get the original image from the cache with getImage:

var image = game.cache.getImage('imageKey'); 

From there you can access all its original properties:

var height = image.height; 

Not sure if that's what you're looking for. If you apply transformations to it then yes, you'd have to do calculations to determine the width/height of what is visible on the screen. 

[Stephen Persson]

get the original image from the cache with getImage:

var image = game.cache.getImage('imageKey'); 

From there you can access all its original properties:

var height = image.height; 

Not sure if that's what you're looking for. If you apply transformations to it then yes, you'd have to do calculations to determine the width/height of what is visible on the screen.

 

 

It seems "real" was too vague. I don't want original data, I want the data from the visual result, after the changes.

I edited that word and moved my explanation to the first post.

[wayfinder]

I don't know what you did wrong the first time, but getBounds() is really really what you're looking for. Not getLocalBounds(), but getBounds():

 

/*** Returns the bounds of the Sprite as a rectangle. The bounds calculation takes the worldTransform into account.** @method getBounds* @param matrix {Matrix} the transformation matrix of the sprite* @return {Rectangle} the framing rectangle*/PIXI.Sprite.prototype.getBounds = function(matrix){    var width = this.texture.frame.width;    var height = this.texture.frame.height;    var w0 = width * (1-this.anchor.x);    var w1 = width * -this.anchor.x;    var h0 = height * (1-this.anchor.y);    var h1 = height * -this.anchor.y;    var worldTransform = matrix || this.worldTransform;    var a = worldTransform.a;    var b = worldTransform.b;    var c = worldTransform.c;    var d = worldTransform.d;    var tx = worldTransform.tx;    var ty = worldTransform.ty;    var maxX = -Infinity;    var maxY = -Infinity;    var minX = Infinity;    var minY = Infinity;    if (b === 0 && c === 0)    {        // scale may be negative!        if (a < 0) a *= -1;        if (d < 0) d *= -1;        // this means there is no rotation going on right? RIGHT?        // if thats the case then we can avoid checking the bound values! yay                 minX = a * w1 + tx;        maxX = a * w0 + tx;        minY = d * h1 + ty;        maxY = d * h0 + ty;    }    else    {        var x1 = a * w1 + c * h1 + tx;        var y1 = d * h1 + b * w1 + ty;        var x2 = a * w0 + c * h1 + tx;        var y2 = d * h1 + b * w0 + ty;        var x3 = a * w0 + c * h0 + tx;        var y3 = d * h0 + b * w0 + ty;        var x4 =  a * w1 + c * h0 + tx;        var y4 =  d * h0 + b * w1 + ty;        minX = x1 < minX ? x1 : minX;        minX = x2 < minX ? x2 : minX;        minX = x3 < minX ? x3 : minX;        minX = x4 < minX ? x4 : minX;        minY = y1 < minY ? y1 : minY;        minY = y2 < minY ? y2 : minY;        minY = y3 < minY ? y3 : minY;        minY = y4 < minY ? y4 : minY;        maxX = x1 > maxX ? x1 : maxX;        maxX = x2 > maxX ? x2 : maxX;        maxX = x3 > maxX ? x3 : maxX;        maxX = x4 > maxX ? x4 : maxX;        maxY = y1 > maxY ? y1 : maxY;        maxY = y2 > maxY ? y2 : maxY;        maxY = y3 > maxY ? y3 : maxY;        maxY = y4 > maxY ? y4 : maxY;    }    var bounds = this._bounds;    bounds.x = minX;    bounds.width = maxX - minX;    bounds.y = minY;    bounds.height = maxY - minY;    // store a reference so that if this function gets called again in the render cycle we do not have to recalculate    this._currentBounds = bounds;    return bounds;};