Rotating an image, THEN resize

[ForgeableSum]

Has anyone had any luck rotating an image, then resizing with the resize being applied to the newly rotated image? Let me explain what I mean. In photoshop, if you rotate an image first, then resize, the results are different than if you were to resize first, then rotate. Like so:

http://i.imgur.com/6JIFxSl.png

 

In Phaser, I have only had luck sizing down first, then rotating. No matter what I seem to do, I can't seem to rotate first then resize.

function create() {// ROTATE FIRSTvar spriteB = game.add.sprite(400, 200, 'phaser');spriteB.rotation = .78; // or .angle = 45;spriteB.scale.set(1,.5);// SCALE FIRSTvar spriteC = game.add.sprite(500, 200, 'phaser');spriteC.scale.set(1,.5);spriteC.rotation = .78; // or .angle = 45;}

The results are always the same. The image appears as though it was sized down first, no matter which order you apply the rotation/scaling. This effect even happens of bitmaps (which aren't even 

 

This single issue has halted development of my game for a few days. I'm at a crossroads because I don't know if I need to apply transformations to images before putting them in the game (which would create a lot of work and tons of complications further down the line). My preference is to be able to apply the transformations in game, but I simply can't get rotate first to work.  

 

Any help would greatly be appreciated. I did open an issue on git hub, which Rich replied to, but stopped responding.  

[fariazz]

Did you try using BitmapData objects? http://phaser.io/docs/2.3/Phaser.BitmapData.html

 

I haven't used them myself but it seems you can specify a transformation matrix in there, what you are doing is basically a combination of scaling, rotatino and skewing. Normal Sprites don't do skewing in Phaser or Pixi (at least according to this http://www.html5gamedevs.com/topic/2664-is-it-posible-to-skew-image-in-phaser/ and from what I could find in the source code). So I guess you'd have to do some math to get these values and apply them to your BitmapData object.

 

Again I haven't done this. Hope it helps and if you manage to do it it'd be great to see how it worked!

[ForgeableSum]

I have tried bitmap data and couldn't get it to work. I'm sure if I used the copy method, I could get it to work since that essentially takes a picture of what's on the canvas. But bitmap isn't an option for me as it's too resource-intensive (there are quite a lot of images that need the transformation simultaneously). 

[CtlAltDel]

Phaser/Pixi always applies rotation and scaling in a fixed order during rendering. So what you are trying to achieve is not possible currently.

[ZoomBox]

Have you tried what Rich said ?

 

 

What you could try is to use cacheAsBitmao, so scale it, cache it, then rotate as that will then be working from a new texture.

It makes sense.

 

 

A quick fix would be:

When it's time to scale your image, store the current rotation in a var, rotate the sprite to 0 (so it's like it never rotated), scale it and then rotate it back to its previous rotation (the var you stored).

[ZoomBox]

I tried my "quick fix" and it seems to work great actually:

http://phaser.io/sandbox/xMIfVKhr/play

[ForgeableSum]

ZoomBox, I did try the cachAsBitmap Rich recommended. It didn't seem to work (as noted in the git hub issue). 

 

I think you misunderstand what I'm trying to do. In your example, you're trying to prevent Phaser from taking the rotation into consideration when scaling. But my intention is for Phaser to take the rotation into consideration when scaling (so the end result is a skew). 

[ZoomBox]

Yep, I misunderstood, my bad.