PixelEngine.Graphics

A graphic engine for turn-based pixel games.

To get started, copy the following project

import Css exposing (px)
import Html.Styled exposing (toUnstyled)
import PixelEngine.Graphics as Graphics exposing (Background(..), Tileset)


main =
    let
        tileSize : Int
        tileSize =
            16


        windowSize : Int
        windowSize =
            16


        scale : Int
        scale =
            2


        width : Css.Px
        width =
            px <| toFloat <| (windowSize * tileSize * scale)


        tileset : Tileset
        tileset =
            { source = "tileset.png", width = 16, height = 16 }


        goblin =
            Graphics.animatedTile ( 2, 8 ) 1


        letter_h =
            Graphics.tile ( 1, 15 )


        letter_i =
            Graphics.tile ( 2, 12 )


        heart =
            Graphics.tile ( 4, 8 )
    in
    Graphics.render
        { scale = scale, width = width }
        [ Graphics.tiledArea
            { height = windowSize, tileset = tileset, background = Color (Css.rgb 20 12 28) }
            [ ( ( 6, 7 ), goblin )
            , ( ( 7, 7 ), letter_h )
            , ( ( 8, 7 ), letter_i )
            , ( ( 9, 7 ), heart )
            ]
        ]
        |> toUnstyled

Definition

type alias Tileset =

{ source : String

, width : Int

, height : Int

}

A tileset. It contains the link to the image as well as the size of a tile.

{source: "tileset.png",width: 16, height 16}

type Background

= Color Color

| Image String

Possible backgrounds for an area.

Color - a single color, use the elm-css colors

Color (Css.rgb 20 12 28)

Image - a image that gets tiled.

Image "groundTile.png"

type alias Config compatible =

{ scale : Int

, width : LengthOrAuto compatible

}

Configurations of the engine.

scale - Upscales all images (use scale = 1 for no scaleing).
width - Width of the window. Use elm-css lengths.

{scale = 1,width = px 800}

Basic Functions

render : Config compatible -> List Area -> Html msg

Renders the content. Use the elm-css Html in combination with this function.

Tile

type Tile

A single tile of a tileset

animatedMovableTile : ( Int, Int ) -> Int -> String -> Tile

A animated movable tile. This means it will transition if the location gets chanced.

Note: the id should be a unique string, if not the transition might fail every now and then.

animatedTile : ( Int, Int ) -> Int -> Tile

An animated 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.)

animatedTile (0,0) 0 == tile (0,0)

movableTile : ( Int, Int ) -> String -> Tile

A movable tile. This means it will transition if the location gets chanced.

Note: the id should be a unique string, if not the transition might fail every now and then.

tile : ( Int, Int ) -> Tile

A basic tile. The first tile in a tileset is obtailed by

tile (0,0)

Area

type Area

An area of the window. Elements in the area must be of the same type. So for a tiled area contains only tiles of the same tileset.

tiledArea :

{ height : Int

, tileset : Tileset

, background : Background

}

-> List ( ( Int, Int ), Tile )

-> Area

Creates a tiled area. Elements in this area are positioned on a grid. The content consists of

(Int,Int) - position (x,y) in the area
Tile - a tile in the tileset

Modules