Orasund / pixelengine / PixelEngine.Image

This module contains functions for creating images. These Images can then be used for the imageArea function from the

Image


type alias Image msg =
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

Configurate

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.