New extension: <Skew2D>

[Carrotstudio0]

Description

This extension provides skew/shear transformation capabilities for 2D objects in GDevelop. It allows you to distort objects by slanting them along the X or Y axis, transforming rectangles into parallelograms. This creates visual effects like perspective distortion, speed motion, wind effects, or artistic stylization.

The extension converts between radians (used internally by PixiJS) and degrees (for easier developer use), making it simple to apply skew transformations to any game object.

---

Extension Components

Functions:

1. SkewX (Expression)

   • Returns the current horizontal skew value in degrees
   • Type: Number
   • Description: "Get the horizontal X skew value (in degrees)"

2. SkewY (Expression)

   • Returns the current vertical skew value in degrees
   • Type: Number
   • Description: "Get the vertical Y skew value (in degrees)"

3. SetSkewX (Action)

   • Sets the horizontal skew value
   • Parameters: Skew angle in degrees
   • Description: "Set the horizontal X skew value (in degrees)"

4. SetSkewY (Action)

   • Sets the vertical skew value
   • Parameters: Skew angle in degrees
   • Description: "Set the vertical Y skew value (in degrees)"

5. SkewXCondition (Condition)

   • Checks if skew X matches a specific value
   • Parameters: Comparison operator and value
   • Description: "Compare the horizontal X skew value"

6. SkewYCondition (Condition)

   • Checks if skew Y matches a specific value
   • Parameters: Comparison operator and value
   • Description: "Compare the vertical Y skew value"

---

Technical Implementation

The code snippet shows the SkewX expression function which:

• Retrieves the renderer object from the game object
• Checks if the renderer exists and has skew properties
• Converts the skew value from radians (PixiJS format) to degrees using gdjs.toDegrees()
• Returns 0 if the object doesn't support skew
• Includes error handling with try-catch block

How to use the extension

Basic Usage

Setting Skew Values

Add skew to an object:

• Use the action Set Skew X or Set Skew Y
• Specify the skew angle in degrees
• Positive values skew in one direction, negative in the opposite

Example:

Action: Set Skew X of Player to 15
Result: Object leans 15 degrees to the right

Reading Skew Values

Get current skew:

• Use expressions Object.SkewX() or Object.SkewY()
• Returns the current skew value in degrees
• Useful for calculations or UI displays

Example:

Set text of SkewDisplay to "Current skew: " + Player.SkewX()

Checking Skew Conditions

Compare skew values:

• Use conditions Skew X Condition or Skew Y Condition
• Check if skew is greater than, less than, or equal to a value
• Trigger events based on skew state

Example:

Condition: Player Skew X > 30
Action: Play "extreme_lean" animation

---

Practical Use Cases

1. Speed/Motion Effect

Create a "leaning forward" effect when characters run:

Condition: Player is moving right AND velocity > 200
Action: Set Skew X to 10

2. Wind Effect

Simulate wind pushing objects:

Event: Every 0.5 seconds
Action: Set Skew X to Random(-5, 5) for all trees

3. Pseudo-3D Perspective

Create isometric-style graphics:

Action: Set Skew Y to -30 for ground tiles
Action: Set Skew X to 30 for ground tiles

4. Impact/Hit Reaction

When character takes damage:

Condition: Player collides with Enemy
Actions:
  - Set Skew X to -20
  - Wait 0.1 seconds
  - Set Skew X to 0

5. Reflection Effect

Mirror objects on water surfaces:

Action: Create reflection sprite below object
Action: Set Skew Y of reflection to -15
Action: Set opacity to 50%

6. Dynamic UI Elements

Animate menu buttons:

Condition: Cursor hovers over button
Action: Set Skew X to 5 (smooth transition)

---

Tips & Best Practices

DO:

• Use subtle skew values (5-15°) for realistic effects
• Animate skew changes with tweens for smooth transitions
• Apply to decorative elements and backgrounds
• Test different values to find the right look

DON'T:

• Skew text objects excessively (reduces readability)
• Apply extreme skew to UI buttons (affects usability)
• Use skew on collision boxes (use for visuals only)
• Forget to reset skew to 0 after temporary effects

---

Animation Example

Wobble effect when object lands:

Condition: Object touches ground
Actions:
  - Set Skew X to 15
  - Wait 0.1 seconds
  - Set Skew X to -10
  - Wait 0.1 seconds
  - Set Skew X to 5
  - Wait 0.1 seconds
  - Set Skew X to 0

This creates a satisfying "jelly" landing animation!

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.

Example file

skew.zip

Extension file

Skew2D.zip

[github-actions]

👋 Hey @Carrotstudio0, thanks for your submission! We are sorry, but the filename of the extension has unrecognized characters. Since filenames with non latin characters ("ASCII") can cause issues, our system won't allow file names with other characters than latin upper- and lowercase characters or numbers. Additionally, the first character must be an uppercase character. Please update your original submission post with a new zip file containing your extension with another file name following those guidelines 🙏