A graphic engine for turn-based pixel games.
To get started, copy the following example:
module TilesetExample exposing (main)
import Css
import Html.Styled exposing (toUnstyled)
import PixelEngine.Graphics as Graphics exposing (Background)
import PixelEngine.Graphics.Image exposing (image)
import PixelEngine.Graphics.Tile as Tile
exposing
( Tileset
, tile
)
main =
let
tileSize : Int
tileSize =
16
windowWidth : Int
windowWidth =
16
scale : Float
scale =
2
width : Float
width =
(toFloat <| windowWidth * tileSize) * scale
tileset : Tileset
tileset =
{ source = "https://orasund.github.io/pixelengine/tileset.png"
, spriteWidth = tileSize
, spriteHeight = tileSize
}
background : Background
background =
Graphics.colorBackground (Css.rgb 20 12 28)
goblin =
tile ( 2, 8 ) |> Tile.animated 1
letter_h =
tile ( 1, 15 )
letter_i =
tile ( 2, 12 )
heart =
tile ( 4, 8 )
in
Graphics.render
{ width = width
, transitionSpeedInSec = 0.2
, scale = scale
}
[ Graphics.tiledArea
{ rows = 4
, cols = windowWidth
, tileset = tileset
, background = background
}
[ ( ( 6, 2 ), goblin )
, ( ( 7, 2 ), letter_h )
, ( ( 8, 2 ), letter_i )
, ( ( 9, 2 ), heart )
]
, Graphics.imageArea
{ height = scale * (toFloat <| tileSize * 12)
, background = background
}
[ ( ( width / 2 - 80 * scale, 0 )
, image "https://orasund.github.io/pixelengine/pixelengine-logo.png"
)
]
]
|> toUnstyledA horizontal area of the content. A area defines how the content should be displayed.
Note: An area can only contain elements that are supported by the type of that area. You can find more information about the valid elements in the curresponding modules.
An area for using tilesets. It supports one tileset at a time, that means all sprites must be of the same size and stored as a grid in one single file. This area is useful for displaying the playing field of a game.
This area has the following options:
An area containing images that can be arranged freely. This is a complete contrast to the way how tiledArea is working. usefull applications are GUIs, menus or loading screens.
This area has the following options:
Every area has a background.
An image that gets repeated.
Image "groundTile.png"A single color using the elm-css colors
Color (Css.rgb 20 12 28)
This functions displays the content of the game. It returns elm-css Html.
The main idea of this graphic engine is to arrage the content into so called Areas. These Areas are then displayed vertically on top of eachother.
The engine comes with a set of options:
width - Width of the game. Note: all spatial values are given in Pixels.
scale - This value scales up all content of the game. Default value: 1 for original sized images
transitionSpeedInSec - The speed of animations. Default value: 0 for no animations
For the start use the following settings