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

fromSrc "aStone.png"

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

fromTile (Tile.fromPosition ( 0, 0 ))
    (Tile.tileset
        { source = "tiles.png"
        , spriteWidth = 80
        , spriteHeight = 80
        }
    )
= fromSrc "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.fromPosition ( 0, 0 ) |> Tile.movable "uniqueId") tileset
    == fromTile (Tile.fromPosition ( 0, 0 )) tileset
    |> movable "uniqueId"

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

Created an Image from a text-string and the Tileset of the font.

It only supports Ascii characters.

This package comes with a collection of Fonts that are free to use.

Created an Image from a text-string and the Tileset of the font.

It only supports Ascii characters.

The first argument is the spaceing between letters. Use negative values to place the letters nearer to echother.

This package comes with a collection of Fonts that are free to use.

Maps the message of an Image

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.

It is possible to compose an Image from a set of other images. The two Floats are relative coordinates.

( ( 100, 100 ), fromSrc "img.png" )
    == ( ( 20, 50 ), multipleImages [ ( ( 80, 50 ), fromSrc "img.png" ) ] )

Sub-images loose the ability to be movable:

multipleImages [((4,2),fromSrc "img.png" |> movable "id")]
--> multipleImages [((4,2),fromSrc "img.png")]

Instead use the following:

fromSrc "img.png"
    |> movable "id"
    == multipleImages [ ( ( 0, 0 ), fromSrc "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.