Image Transform Controls

Phaser 3
1

I am trying to implement the following control scheme on images within my game:

Peek 2020-04-18 17-00

This was taken from http://fabricjs.com/ (when you click on an element you get the transform controls show, and the image can be dragged, scaled and rotated)

I found this old example https://codepen.io/jdnichollsc/details/KgdRvV however it looks incomplete as scaling isn’t working.

I am at a bit of a loss on how to achieve the control within the gif in Phaser. Is there any complete examples of this working or pointers on the steps and maths involved?

2

Hey @boomboom, I looked at the Code pen link, I made some edits to make the image scale when dragging the respective edge squares. I wrote the basic logic for scaling the image, it still needs some visual polish though. See if it helps.

3

And the code pen uses Phaser version 2, I would suggest using version 3 if you are going to start the project new.

4

Does anyone have an example/Code pen in version 3?