Topics List
Design Elements

Rotated Images
Dynamic Visuals with Rotated Images

Rotated images in app development refer to graphic elements that are displayed at an angle or orientation different from their default position. This capability allows for creative and dynamic visual presentations, adding depth and interest to the user interface. By using rotated images, developers can create more visually appealing apps that stand out and engage users. The rotation feature can be applied to various elements such as icons, logos, or decorative elements, giving designers more flexibility in crafting the app´s look and feel.
In the example below, you´ll notice three rotated images and a soccer ball. We´ve enabled physics and assigned physical properties to all the images. As the app launches, the ball falls and bounces off the objects, triggering a sound with each bounce. This is achieved with just a single line of code.



You can download the project from the following link:

Class_Rar_0__30.rar

Rotated Image´s Properties


During design mode, you can assign the following properties and events to a Rotated Image:



  • name: The name of the rotated image.

  • Position and Size

    • x: The x-coordinate of the rotated image.

    • y: The y-coordinate of the rotated image.

    • const_width: The constant width of the rotated image.

    • const_height: The constant height of the rotated image.

    • toBack: Set to true to move the image to the back.

    • toFront: Set to true to move the image to the front.

    • const_anchorX: The constant anchor point on the x-axis.

    • const_anchorY: The constant anchor point on the y-axis.

    • const_xScale: The constant scale factor on the x-axis.

    • const_yScale: The constant scale factor on the y-axis.

    • rotation: The rotation angle of the image.

  • Display Mode

    • alpha: The transparency of the image.

    • blendMode: The blend mode of the image (normal, add, multiply, screen).

  • Mask and Touch

    • isHitTestMasked: Set to true to enable hit testing with the mask.

    • isHitTestable: Set to false to disable hit testing.

    • isVisible: Set to true to make the image visible.

    • mask_PIC: The mask image for masking the rotated image.

    • maskRotation: The rotation angle of the mask.

    • maskScaleX: The scale factor of the mask on the x-axis.

    • maskScaleY: The scale factor of the mask on the y-axis.

  • Physics

    • bodyType: The type of physics body (static, dynamic, kinematic).

    • isSensor: Set to true to make the image a sensor.

    • gravityScale: The gravity scale of the image.

    • density: The density of the image.

    • friction: The friction of the image.

    • bounce: The bounce factor of the image.

    • radius: The radius of the image for collision calculations.

    • newOutline: The new outline of the image for physics calculations.

    • initial_push_x: The initial push force on the x-axis.

    • initial_push_y: The initial push force on the y-axis.

    • initial_push_dx: The initial push force change on the x-axis.

    • initial_push_dy: The initial push force change on the y-axis.

  • Functions

    • began_touch: The function to execute when touch begins on the image.

    • moved_touch: The function to execute when touch moves on the image.

    • ended_touch: The function to execute when touch ends on the image.

    • swipe: The function to execute when swipe gesture is detected on the image.

    • tap: The function to execute when tap gesture is detected on the image.

    • IDE_x: The x-coordinate of the image in the IDE.

    • IDE_y: The y-coordinate of the image in the IDE.

    • origDimensions: The original dimensions of the image.