A image is a very general object: as we will see later, even tiles are essentially images. The following functions are intended to be modular.

A example of a image could be:

image "img.png" |> movable "uniqueName"

The basic image constructor. the string contains the url to the image

image "https://orasund.github.io/pixelengine/pixelengine-logo.png"

Makes a image transition between positions. This is useful for images that will change their position during the game.

Note: The string should be unique, if not the transition might fail every now and then.

Note: The string will be a id Attribute in a html node, so be careful not to use names that might be already taken.

Tiles are essentially also images, therefore this constructor transforms a tile and a tileset into an image.

fromTile (tile (0,0))
    (tileset {source:"https://orasund.github.io/pixelengine/pixelengine-logo.png",width:80,height:80})
==
image "https://orasund.github.io/pixelengine/pixelengine-logo.png"

Note: fromTile displays only the width and height of the image, that where given. This means setting width and height to 0 would not display the image at all.

fromTile (tile (0,0) |> movable "uniqueId")
==
fromTile (tile (0,0)) |> movable "uniqueId"

Note: If you want to animate an image use this function instead

it is possible to compose an image from a set of other images. the two Floats are realtive coordinates so

((100,100),image "img.png")
=
((20,50), multipleimages [((80,50),image "img.png")])

sub-images loose the ability to be movable:

multipleimages [((x,y),image "img.png" |> movable "id")]
=
multipleimages [((x,y),image "img.png")]

instead use the following:

image "img.png" |> movable "id"
=
multipleimages [((0,0),image "img.png")] |> movable "id"

Adds custom attributes. use the elm-css Attributes.

The motivation for this function was so that one can create onClick events.