This module contains functions for creating images.
These Images can then be used for the imageArea
function from the
PixelEngine.Graphics.Data.Area.ContentElement msg
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.
fromSrc : String -> Image msg
The basic image constructor. The string contains the url to the image
fromSrc "aStone.png"
fromTile : PixelEngine.Tile.Tile msg -> PixelEngine.Tile.Tileset -> Image msg
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.
fromText : String -> PixelEngine.Tile.Tileset -> Image msg
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.
fromTextWithSpacing : Basics.Float -> String -> PixelEngine.Tile.Tileset -> Image msg
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.
map : (a -> b) -> Image a -> Image b
Maps the message of an Image
movable : String -> Image msg -> Image msg
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.
jumping : Image msg -> Image msg
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.
multipleImages : List ( ( Basics.Float, Basics.Float ), Image msg ) -> Image msg
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"
clickable : msg -> Image msg -> Image msg
Makes an Image
clickable
Use this to create the onClick
event from Html.Events.
monochrome : Color -> Image msg -> Image msg
Adds a background color.
** This makes the the Image non-transparent **
This can be used to simulate monochrome sprites or to implement team colors.
withAttributes : List (Html.Attribute msg) -> Image msg -> Image msg
Adds custom attributes.
Use the Html.Attributes.