This module contains functions for creating tiles.
Tiles are used for the tiledArea
function from the main module.
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
.
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
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 )
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.
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:
source
- The adress to the filespriteWidth
- The size of a single sprite in the Tileset
(in pixels)spriteHeight
- The height of a single sprite (also in pixels)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"
}