Orasund / pixelengine / PixelEngine.Tile

This module contains functions for creating tiles. Tiles are used for the tiledArea function from the main module.

Tile


type alias Tile msg =
PixelEngine.Graphics.Data.Tile.Tile msg

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"

fromPosition : ( Basics.Int, Basics.Int ) -> Tile msg

The basic Tile constructor.

The first argument is the position of the sprite in the tileset.

As an example

tile ( 3, 2 )

is the 3 row in the second column of the Tileset.

a tileset

fromText : ( Basics.Int, Basics.Int ) -> String -> List (Tile msg)

Created a List of Tiles from a String and a Offset.

It only supports ASCII characters.

The Offset (Int,Int should point to the sprite repesenting the space-character.

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

multipleTiles : List (Tile msg) -> Tile msg

Allows multiple Tiles on top of each other.

Sub-tiles loose the ability to be movable:

multipleTiles [fromPosition (0,0) |> movable "id"]
--> fromPosition (0,0)

Instead use

multipleTiles [fromPosition (0,0) ] |> movable "id"
    --> fromPosition (0,0) |> movable "id"

map : (a -> b) -> Tile a -> Tile b

Maps the message of a Tile

Configurate

movable : String -> Tile msg -> Tile msg

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

tile ( 0, 0 ) |> movable "name"

Note: Once a Tile has this property, it can NOT be removed during the game.

Note: The string should be unique,. If not then 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.

jumping : Tile msg -> Tile msg

Pauses the transition of a movable tile.

Only use in combination with movable:

tile ( 0, 0 ) |> movable "name" |> jumping

Use this function if a Tile has the movable-property and you would like to remove it temporarily without causing any unwanted side effects.

animated : Basics.Int -> Tile msg -> Tile msg

Adds animations to a Tile. The sprites of the animation must be arranged horizontally in the Tileset.

The first argument give the amount of 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 )

animation

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

clickable : msg -> Tile msg -> Tile msg

Makes an Tile clickable

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

monochrome : Color -> Tile msg -> Tile msg

Adds a background color.

** This makes the the Tile non-transparent **

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

withAttributes : List (Html.Attribute msg) -> Tile msg -> Tile msg

Adds custom attributes.

use the Html.Attributes.

Tileset


type alias Tileset =
PixelEngine.Graphics.Data.Tile.Tileset

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

tileset : { source : String, spriteWidth : Basics.Int, spriteHeight : Basics.Int } -> Tileset

The Tileset constructor has the following parameters:

For the following defines the Tileset used in the examples of this module.

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