Draw sprite in perspective

[deohnas]

I am trying to achieve some "top perspective" view on my game. Given a rectangular "Sprite 1" how can I draw it transformed like the one right below? 

[samme]

I know very little about this, but you may be able to

• create a BitmapData
• transform the BitmapData context
• copy the sprite texture to the BitmapData
• display the BitmapData in an Image/Sprite

[samid737]

I can imagine it involves some math if you want to project 2d top to 3d perspective view . I found this, it could help but im not sure:

https://bl.ocks.org/mbostock/10571478

As you can see a lot of math involved and probably overkill, but its something..

[ForgeableSum]

that's a tilted camera so the objects that are farther away appear smaller. 

You can accomplish this by skewing/warping the image - not supported in phaser by default, but you can modify the internal updateTransform method for display objects so the x and y axis is skewed appropriately. Or do what samme suggested and perform the transforms on a separate canvas with a bitmap data object. See this thread: 

You could also go with a more practical camera view such as isometric. In which case, you could simply rotate the image -45 degrees and reduce the height (y axis) by 50%. You end up with something like this:

[samid737]

 

@feudalwarsI think his requirement for a perspective projection requires more effort, skewing and scaling are affine transformations and can be done with the answer provided by @samme, but projection is not I believe .. Correct me if im wrong though:p..

https://en.wikipedia.org/wiki/Transformation_matrix#Perspective_projection

But switching to isometric view could be an alternative solution.