New extension: <Skew2D> #1962
Description
Description
Skew Extension for GDevelop
Description
This extension adds skew and shear transformation capabilities to 2D objects in GDevelop. You can distort objects by slanting them along the X or Y axis, which transforms rectangles into parallelograms. This is useful for creating visual effects like perspective distortion, speed motion, wind effects, or artistic stylization in your games.
The extension automatically converts between radians used internally by PixiJS and degrees for easier use by developers. This makes it simple to apply skew transformations to any game object without worrying about complex math.
How to Use
You can set the skew value of any object using the Set Skew X or Set Skew Y actions. Simply choose your object and enter the angle in degrees. Positive values tilt the object in one direction while negative values tilt it the opposite way.
To read the current skew value of an object, use the SkewX or SkewY expressions in your events. These return the current skew angle in degrees which you can use in calculations or display in text objects.
You can also compare skew values using conditions. Check if an object's skew is greater than, less than, or equal to a specific value to trigger different events in your game.
Practical Examples
For speed effects, you can make a character lean forward when running fast. Check if the player velocity is high and set a small skew value to create a sense of momentum.
To simulate wind, randomly change the skew of trees or grass objects every few moments. This creates a natural swaying motion that makes your environment feel alive.
You can create pseudo 3D perspective by applying skew to ground tiles or platforms. This is commonly used in isometric style games to give depth without using actual 3D graphics.
For impact reactions, temporarily skew an object when it gets hit then quickly reset it back to normal. This creates a satisfying visual feedback that makes collisions feel more impactful.
Create reflections on water by duplicating an object, placing it below, applying opposite skew, and reducing opacity. This simple technique adds professional polish to your games.
Best Practices
Keep skew values subtle, usually between 5 and 15 degrees, for realistic effects. Extreme skew angles can look distorted and unnatural unless that is the artistic style you want.
Use skew mainly on decorative elements and backgrounds. Avoid skewing important UI elements like buttons or text as it can reduce readability and usability.
Remember that skew only affects visual appearance. It does not change collision boxes or hitboxes, so use it purely for visual effects.
Always reset skew back to zero after temporary effects to keep your objects looking clean and intentional.
How to use the extension
use Functions:
SkewX (Expression)
Returns the current horizontal skew value in degrees.
Type: Number
Description: "Get the horizontal X skew value (in degrees)."
SkewY (Expression)
Returns the current vertical skew value in degrees.
Type: Number
Description: "Get the vertical Y skew value (in degrees)."
SetSkewX (Action)
Sets the horizontal skew value.
Parameters: Skew angle in degrees
Description: "Set the horizontal X skew value (in degrees)."
SetSkewY (Action)
Sets the vertical skew value.
Parameters: Skew angle in degrees
Description: "Set the vertical Y skew value (in degrees)."
SkewXCondition (Condition)
Checks if skew X matches a specific value.
Parameters: Comparison operator and value
Description: "Compare the horizontal X skew value."
SkewYCondition (Condition)
Checks if skew Y matches a specific value.
Parameters: Comparison operator and value
Description: "Compare the vertical Y skew value."
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.