New extension: <Skew2D>

[Carrotstudio0]

Description

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 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, and includes error handling with try-catch block.

This architecture allows seamless integration with GDevelop's event system while maintaining compatibility with PixiJS rendering engine.

---

How to use the extension

Basic Usage

Setting Skew Values

Add skew to an object by using the action Set Skew X or Set Skew Y and specifying the skew angle in degrees. Positive values skew in one direction, while negative values skew in the opposite direction.

Example: Set Skew X of Player to 15 will make the object lean 15 degrees to the right.

Reading Skew Values

Get the current skew value by using the expressions Object.SkewX() or Object.SkewY(). These expressions return the current skew value in degrees and are useful for calculations or displaying values in the UI.

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

Checking Skew Conditions

Compare skew values by using the conditions Skew X Condition or Skew Y Condition. You can check if the skew is greater than, less than, or equal to a specific value, which allows you to trigger events based on the skew state.

Example: If Player Skew X is greater than 30, then play "extreme_lean" animation.

---

Practical Use Cases

Speed and Motion Effects

Create a "leaning forward" effect when characters run by checking if the player is moving right and their velocity is greater than 200, then setting Skew X to 10.

Wind Effects

Simulate wind pushing objects by setting Skew X to a random value between -5 and 5 for all tree objects every 0.5 seconds.

Pseudo-3D Perspective

Create isometric-style graphics by setting Skew Y to -30 and Skew X to 30 for ground tiles.

Impact and Hit Reactions

When a character takes damage, set Skew X to -20, wait 0.1 seconds, then reset Skew X to 0 to create a hit reaction effect.

Reflection Effects

Create mirror reflections on water surfaces by creating a reflection sprite below the object, setting its Skew Y to -15, and reducing its opacity to 50%.

Dynamic UI Elements

Animate menu buttons by setting Skew X to 5 when the cursor hovers over the button, creating a smooth transition effect.

---

Animation Example

Create a wobble effect when an object lands by using the following sequence: when the object touches the ground, 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, and finally set Skew X to 0. This creates a satisfying "jelly" landing animation.

---

Tips and Best Practices

Use subtle skew values between 5 and 15 degrees for realistic effects. Animate skew changes with tweens for smooth transitions. Apply skew to decorative elements and backgrounds rather than critical UI components. Test different values to find the right look for your game.

Avoid skewing text objects excessively as this reduces readability. Do not apply extreme skew to UI buttons as it affects usability. Remember that skew is for visual effects only and should not be applied to collision boxes. Always reset skew to 0 after temporary effects to maintain visual clarity.

---

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

SkewExtension.zip

Extension file

Skew2D.zip

[github-actions]

👋 Hey @Carrotstudio0, thanks for your submission! Unfortunately, all submitted extensions have to meet some minimal quality standard - the extension best practices - and our system has found that your extension does not fully comply 😔. You can find all of those rules on the GDevelop wiki.

The following issues have been found by the system concerning the respect of those best practices by your extension:

  ⟶ ❌ [Dots in sentences]: Field 'description' of the function 'SkewX' misses a dot at the end of the sentence!
  ⟶ ❌ [Dots in sentences]: Field 'description' of the function 'SkewY' misses a dot at the end of the sentence!
  ⟶ ❌ [Internal name validity]: The internal name of the extension Skew 2D is invalid! It should only contain normal latin upper- and lowercase characters and numbers. The first letter must be an uppercase character.
  ⟶ ❌ [Extension name consistency]: Extension filename should be exactly the name of the extension (with .json extension). Please rename 'Skew2D.json' to 'Skew 2D.json'.

Please update your original submission post with a new zip file containing your extensions updated to follow those guidelines 🙏