A Image is actually a very general type: As we will see later, even tiles are essentially images. The following functions are intended to be modular.

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

image "aStone.png"

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

image "enemy.png" |> movable "name"

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.

Pauses a the transition of a movable image.

Only use in combination with movable:

image "teleportingEnemy.png" |> movable "name" |> jumping

Use this function if a tile has the movable-property, but you would like to remove it without causing any unwanted side effects.

Tiles are essentially also images, therefore this constructor transforms a Tile and a Tileset into an Image.

fromTile (tile ( 0, 0 ))
    (tileset
        { source = "tiles.png"
        , width = 80
        , height = 80
        }
    )
    == image "tiles.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.

((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"

Makes an Image clickable

Use this to create the onClick event from Html.Events.

Adds a background color.

** This makes the the Image non-transparent **

This can be used to simulate monochrome sprites or to implement team colors.

Adds custom attributes.

Use the Html.Attributes.

[DEPRECATED]

Use clickable instead.