Image

Display photos, pictures, logos and textures in any size and position on the page. The image can be a .png, .jpg,
.tga, .svg, or .bmp file that you select from the Resource Folder’/’images’ folder.

 

Altering properties of the image enable precise control over its presentation allowing for different device resolution and orientation. E.g. aligning photos ensures that a region of interest is kept centered and logos can be set up to always fit in the available space. Images sized 1000px and under are ideal – the larger your image size, the slower your app will run.

If an image dimension is larger then 2000px, it will be proportionally scaled down to have a max dimensionof 2000px.


Re-sizing Images

A background image that is a photo or a texture is best set to ‘Fill’. It will then fill the space that you set the
bounding box to. If there is an area of interest in the photo that needs to be centered across different devices,
the alignment sliders can be easily adjusted.

A logo image is best set to ‘Fit’. This ensures it will remain proportionally sized across devices.

A block/band of color/texture works best in stretch mode. https://help.umajin.com/overview/re-sizing-overview/
Setting size to millimeters rather than percentage will set an image to be the same millimeter size across all
devices.


Properties for Image Component

NameWhen components are placed on a page they appear highlighted blue in the scene tree and can be renamed
by double clicking in this panel and typing the new name. Components can also be set to be
visible/invisible on the page, using the ‘eye’ icon on this panel.
Position and SizeSets position and size. As long as measurements are maintained as percentages it deals automatically
with dynamic layout and resizing for different devices and orientations. You can use millimeters to
control aspects of size like width or height in order to create an image the size of which will be
maintained across devices.

Appearance

ImageAny image/graphic can be selected from the Image folder. You can insert new images/graphics as .png
or.jpg files into the Image folder using copy and paste. Note: to see the new image/s you have added,
you will need to press the Refresh key bottom left of the Image folder button.(double arrows)
Crop modesStretch, Fit and Fill. These modes can be used to advantage when inserting different types of images and
when you are dealing with dynamic layout and resizing for different devices and orientations.

  • Fill mode: most useful with photos because size ratios are retained within the bounds of the
    bounding box.
  • Fit mode: useful with logos, especially circular logos, where the edges of the logo can be sized
    to fit the bounding box. Fit retains the whole image.
  • Stretch mode: most useful with blocks of color. It stretches the color/image to fill the whole
    space. Not such a good idea with photos/logos!!
Align X and YThese work for Fit and Fill crop modes and let you specify the alignment or region of interest for a
picture. This is important because the shape and size of the image component can change depending on the
size and orientation of the device.
Async LoadThis delays loading of the image at runtime – good for big images which are slower to load.
OpacitySet how opaque the image will display on a scale of 0 to 100, with 0 being transparent.
Resize to ContentIn Fill mode if the Resize to Content property is checked the image will collapse when there is no image
available but in Fit mode checking the Resize to Content checkbox causes the image height to change as
necessary to display the whole image. When the box is checked the image height will alter but will
always maintain the width to height ratio of the original image.

Accessibility

Alt textAlternative text to aid accessibility on the web.

Events that can Trigger an Action on the Image Component

On PressAction occurs when component is pressedOn DownAction occurs when the image component is held down.On UpAction occurs when the image component is released.

On PressAction occurs when component is pressed
On DownAction occurs when the image component is held down.
On UpAction occurs when the image component is released.