Skew 2D #1949
Description
Changes
New Features Added (Skew 2D Extension)
A complete set of functions has been added, allowing users to control horizontal (X) and vertical (Y) skew of objects using degrees as the unit:
- Actions: Setting Skew Values
Set Skew X (SetSkewX):
Allows you to set the horizontal skew (X) of an object in degrees.
Technical note: The entered value is converted from degrees to radians (gdjs.toRad(value)) before being applied to rendererObject.skew.x (required by PixiJS).
Set Skew Y (SetSkewY):
Allows you to set the vertical skew (Y) of an object in degrees.
Technical note: The entered value is converted from degrees to radians (gdjs.toRad(value)) before being applied to rendererObject.skew.y.
- Conditions: Comparing Skew Values
Skew X (SkewXCondition):
Allows comparing the current horizontal skew X of an object (measured in degrees) with a specified value using comparison operators (=, >, <).
Technical note: The current value is first converted from radians to degrees (gdjs.toDegrees(rendererObject.skew.x)) to be compared with the user's degree-based value.
Skew Y (SkewYCondition):
Allows comparing the current vertical skew Y of an object (measured in degrees) with a specified value using a comparison operator.
- Expressions: Retrieving Skew Values
Skew X (SkewX):
An expression that returns the current horizontal skew X of the object (returned in degrees).
Technical note: The value of rendererObject.skew.x is converted from radians to degrees (gdjs.toDegrees(...)) before being returned.
Skew Y (SkewY):
An expression that returns the current vertical skew Y of the object (returned in degrees).
How to use the new features
The new features focus on Skew effects for objects, allowing you to create pseudo-3D depth, UI distortions, and dynamic visual effects like squash and stretch. You can use Actions to set skew, Conditions to check skew, and Expressions to get skew values.
- Actions: Changing Skew Values
Actions let you directly set the skew of an object in degrees.
Set Skew X: Sets the horizontal skew (X) of an object.
Example: Set the X skew of Player to 15 → Applies a 15° horizontal skew to make the base of the Player wider.
Set Skew Y: Sets the vertical skew (Y) of an object.
Example: Set the Y skew of Button_Icon to -10 → Applies a -10° vertical skew to a button icon for a quick squash effect.
Dynamic Example: Simple Shake Effect on X-axis
At the beginning of the scene, set a scene variable: Do = 5 to the scene variable "SkewDirection".
Every 0.05 seconds, apply:
Set the X skew of Object to Object.SkewX() + SkewDirection
Do = SkewDirection * -1 to the scene variable "SkewDirection"
This creates a left-right shake effect using skew.
- Conditions: Checking Skew Values
Conditions allow branching based on the current skew of an object.
Skew X: Checks the horizontal skew.
Example: If the X skew of Player is > 30 → Can trigger an effect if the object is heavily distorted.
Skew Y: Checks the vertical skew.
Example: If the Y skew of Object is = 0 → Detects if the object has returned to its normal shape.
Example: Detecting Neutral Skew
If the Y skew of an object equals 0, you can stop a timer controlling the skew effect:
Stop the timer "Skew_Effect_Timer"
- Expressions: Getting Skew Values
Expressions allow retrieving the current skew value in degrees to use in calculations or variables.
Object.SkewX() → Returns the current horizontal skew.
Example: Do = Object.SkewX() to the object variable "Last_Skew_X" → Stores the X skew for later reference.
Object.SkewY() → Returns the current vertical skew.
Example: Set the opacity of Object to 255 - abs(Object.SkewY() * 5) → Links opacity to Y skew; more skew results in lower opacity
Checklist
- I've followed all of the best practices.
- I confirm that this extension can be integrated to this GitHub repository, distributed and MIT licensed.
- I am aware that the extension may be updated by anyone, and do not need my explicit consent to do so.