FR: Adding Skew capability

[rishavs]

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

[github-actions[bot]]

This issue hasn't had any recent activity lately and is being marked as stale automatically.