Context

Right now, there is way to skew display objects in Excalibur.
Taking the css 2d transforms as reference, the most used transforms for Display objects seem to be

• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()

Other game/graphics engines like Pixijs also have this capability in the Transform component
https://pixijs.download/v4.8.9/docs/PIXI.Transform.html

In this FR, I propose adding skew capability to Exclailbur. That will allow us to create objects like this one - where we can create a fake perspective effect.

Proposal

API:
Overall, the idea would be follow the current rotate implementation as closely as possible.
Since, Excalibur doesn't have a perspective method as well (like in css), it will not be possible to just take x-axis & y-axis skew radians as input to create the shape that I have posited above, I will instead propose skew taking in 4 inputs -

skew (top-left: number, top-right: number, bottom-right: number, bottom-left: number)
where the inputs are angles.

We should also add the equivalent actions for skewTo and skewBy

Files touched:
Code

• src/engine/Math/matrix.ts
• src/engine/EntityComponentSystem/Components/TransformComponent.ts
• src/spec/TransformComponentSpec.ts
• src/spec/util/Mocks.ts
• [New] src/engine/Actions/Action/ScewTo.ts
• src/engine/Collision/BoundingBox.ts
• src/engine/Math/vector.ts
• src/engine/Graphics/Context/ExcaliburGraphicsContextWebGL.ts
• src/engine/Graphics/Context/ExcaliburGraphicsContext2DCanvas.ts
• src/engine/Graphics/Context/ExcaliburGraphicsContext.ts
• src/engine/Graphics/Font.ts
• src/engine/Graphics/Text.ts