Jump to content

Recommended Posts

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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. 

Link to post
Share on other sites

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.

Link to post
Share on other sites

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;};
Link to post
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.

Guest
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.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...