Images
Use images in your user interface to make them more visually appealing and to convey information to the player. Images can be used for backgrounds, icons, buttons, and more.
Inserting an Image into the UI
Use the Image element to insert an image into your user interface.
Image(@myImage.png)
The @myImage.png is an Asset specifier that points to an image file.
Intrinsic size
If you do not specify a specific width or height for your image, it will be drawn at its intrinsic size. The intrinsic size of an image depends on two things - the dimensions of the image file, and its pixel density.
By default, an image has a pixel density of 1x, meaning that one pixel in the image corresponds to one pixel on the screen.
So a 100x100 image will be drawn as 100px square on the screen.
Pixel density
If your image filename ends with a density specifier, e.g. @2x or @0.5x,
then this changes the intrinsic size of the image.
For example, if we have an image called myImage@2x.png, then its density is 2x.
If the dimensions of myImage@2x.png are 100x100,
then the intrinsic size of the image is 50px square due to the 2x density.
The extra information in the image is used to render the subpixels, making it look sharper on high-density displays
like Retina displays or 4K monitors.
Image(@myImage@2x.png)
At the moment, only the @2x and @0.5x density specifiers are supported.
Any other density specifiers will be ignored, and the image will be treated as if it has a 1x density.
Pixel art
If your game uses pixel art, you may want to set sharp=true
to keep the image pixelated when it gets scaled up or down.
You can do this either directly on the Image element itself,
or you can set it globally in your easel.toml configuration file.
See [ui] configuration.