Images are essential visual elements in app development, used for displaying graphics, icons, photos, and other visual content. They enhance the user interface, making it more engaging and informative. In app development, images can be resized, rotated, and positioned to create the desired layout and design. They can also be used to convey information, provide instructions, or simply add aesthetic value to the app. With images, developers can create visually appealing apps that are both functional and attractive.
In the example below, we´ve configured eight soccer balls using images, along with a toy´s head. We´ve also set images for the container walls, and enabled physics for the activity. All images are configured with physics, and we´re utilizing a collision system to define interactions between objects.
You can download the project from the following link:
Class_Rar_0__31.rar
Image´s Properties
During design mode, you can assign the following properties and events to an Image:
- name: The name of the image.
- filename: The filename of the image.
- Position and Size
- x: The x-coordinate of the image.
- y: The y-coordinate of the image.
- width: The width of the image.
- height: The height of the image.
- toBack: Set to true to move the image to the back.
- toFront: Set to true to move the image to the front.
- anchorX: The anchor point on the x-axis.
- anchorY: The anchor point on the y-axis.
- xScale: The scale factor on the x-axis.
- yScale: The scale factor on the y-axis.
- const_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 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.
- Animation
- spriteCols: The number of columns in the sprite sheet.
- spriteRows: The number of rows in the sprite sheet.
- spriteTime: The time interval between sprite frame changes.
- spriteFrames: The total number of frames in the sprite sheet.
- spriteStart: The starting frame of the animation.
- spriteCount: The number of frames to animate.
- spriteLoopCount: The number of times to loop the animation (0 for infinite).
- spriteLoopDirection: The direction of the animation loop (forward, bounce).
- spriteStartonLoad: Set to true to start the animation automatically on load.
- 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.
- animationBegan: The function to execute when animation begins on the image.
- animationEnded: The function to execute when animation ends on the image.
- animationBounce: The function to execute when animation bounces on the image.
- animationLoop: The function to execute when animation loops on the image.
- animationNext: The function to execute when animation moves to the next frame on the image.
- origDimensions: The original dimensions of the image.
|