This module takes care of the Graphics.
You will want to add PixelEngine.Graphics.Image or PixelEngine.Graphics.Tile to actually draw something.
The main idea of this graphic engine is to arrange the content into horizontal stripes, so called areas.
Graphics.Data.Area.Area msg
A horizontal area of the content.
A Area
defines how the content should be displayed.
Note: An area can only contain elements of the same type. So either you have tiles or images.
tiledArea : { rows : Basics.Int, tileset : Tileset, background : Background } -> List ( ( Basics.Int, Basics.Int ), Tile msg ) -> Area msg
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.
Checkout PixelEngine.Graphics.Tile for more information.
This area has the following options:
rows
- The amount of rows of the grid. This value defines the height of the Area
.tileset
- The tileset that will be used for all elements in the Area
.background
- The background of the Area
.imageArea : { height : Basics.Float, background : Background } -> List ( ( Basics.Float, Basics.Float ), Image msg ) -> Area msg
An area containing images that can be arranged freely.
This is a complete contrast to the way how tiledArea
is working.
Useful applications are GUIs, menus or loading screens.
Checkout PixelEngine.Graphics.Image for more information.
This area has the following options:
height
- The height or the Area
in pixels.background
- The background of the Area
.heightOf : List (Area msg) -> Basics.Float
Returns the height of a list of Areas
This can be used to return the height of a tiledArea
.
For a imageArea
this function is trivial.
mapArea : (a -> b) -> Area a -> Area b
Maps the message of an Area
Platform.Program flag (Model model msg) (Msg msg)
An alias for a PixelEngine program.
Your main
function will have this type.
toHtml : { width : Basics.Float, options : Maybe (Options msg) } -> List (Area msg) -> Html msg
Displays content of the game.
game : { init : flags -> ( model, Platform.Cmd.Cmd msg ), update : msg -> model -> ( model, Platform.Cmd.Cmd msg ), subscriptions : model -> Platform.Sub.Sub msg, view : model -> { title : String, options : Maybe (Options msg), body : List (Area msg) }, controls : Input -> Maybe msg, width : Basics.Float } -> Platform.Program flags (Model model msg) (Msg msg)
A pre-wired PixelEngine frame.
Use it just like document
from elm/browser.
gameWithNoControls : { init : flags -> ( model, Platform.Cmd.Cmd msg ), update : msg -> model -> ( model, Platform.Cmd.Cmd msg ), subscriptions : model -> Platform.Sub.Sub msg, width : Basics.Float, view : model -> { title : String, options : Maybe (Options msg), body : List (Area msg) } } -> Platform.Program flags (Model model msg) (Msg msg)
A game with no controls.
Use it just like document
from elm/browser.
gameWithCustomControls : { init : flags -> ( model, Platform.Cmd.Cmd msg ), update : msg -> model -> ( model, Platform.Cmd.Cmd msg ), subscriptions : model -> Platform.Sub.Sub msg, width : Basics.Float, view : model -> { title : String, options : Maybe (Options msg), body : List (Area msg) }, controls : ( String -> Maybe Input, Input -> Maybe msg ) } -> Platform.Program flags (Model model msg) (Msg msg)
A game using custom controls.
The default controls should be enough to start, but maybe you want to write a spelling game, or its necessary that very specific keys are used?
The graphic engine provides a touch-controller for mobile devices.
all possible Inputs.
defaultInputs : String -> Maybe Input
The default layout:
InputLeft
InputUp
InputRight
InputDown
InputA
InputB
InputX
InputY
Graphics.Data.Background
Every area has a background.
imageBackground : { source : String, width : Basics.Float, height : Basics.Float } -> Background
An image that gets repeated.
Image "groundTile.png"
colorBackground : Color -> Background
A single color background. It uses avh4/elm-color.
colorBackground (Color.rgb255 20 12 28)
basicControls : (Input -> Maybe msg) -> Platform.Sub.Sub (Maybe msg)
Subscribes to a keypress and sends the corresponding msg. This Function uses the default key layout.
customControls : (String -> Maybe Input) -> (Input -> Maybe msg) -> Platform.Sub.Sub (Maybe msg)
Subscribes to a keypress using custom key layouts.
It uses key values for the String. You can use this website to find out the key value.
withMobileSupport : { windowSize : { width : Basics.Float, height : Basics.Float }, controls : Input -> Maybe msg } -> Options msg -> Options msg
Adds mobile support to the options. It needs the window size.