A tile defines a sprite in a tileset. The following functions are intended to be modular.

A example for a tile could be:

tile (1,2) |> animated 1 |> movable "uniqueName"

The basic tile constructor. The two arguments is the position of the sprite in the tileset.

As an example

tile (4,2)

is the 4 row in the second column of the tileset.

Makes a Tile transition between positions. This is useful for sprites 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.

Adds animations to a tile. The sprites of the animation must be arranged horizontally in the tileset.

• steps - Steps of the animation (one less then the number of sprites.)

The following code specifies a tile with 3+1 frames

tile (0,0) |> animated 3

Note: Setting the steps to 0 describes a tile with no animation.

tile (0,0) |> animated 0 == tile (0,0)

Note: Negaive steps are not supported, in this case no animation will be played.

Adds custom attributes. use the elm-css Attributes.

returns a Msg when it has been clicked.

withAttributes [Events.onClick msg]
=
withAttributes [ onClick msg]

Adds a background color.

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

withAttributes [css [Css.backgroundColor <| Css.rgb 255 0 0]]
=
withAttributes [ backgroundColor <| Css.rgb 255 0 0]

A Tileset contains the actuall image that a tile can reference.

The tileset constructor has the following parameters:

• source - The adress to the file
• spriteWidth - The size of a single sprite in the tileset (in pixels)
• spriteHeight - The height of a single sprite (also in pixels)

For example the following defines the tileset that is used in the example.

{width: 16, height 16,source: "https://orasund.github.io/pixelengine/tileset.png"}