Orasund / pixelengine / PixelEngine

This module takes care of the Graphics.

You will want to add PixelEngine.Graphics.Image or PixelEngine.Graphics.Tile to actually draw something.

Area

The main idea of this graphic engine is to arrange the content into horizontal stripes, so called areas.


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

A typical game

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:

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:

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

PixelEngine


type alias PixelEngine flag model msg =
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?

Controls

The graphic engine provides a touch-controller for mobile devices.


type Input
    = InputLeft
    | InputRight
    | InputUp
    | InputDown
    | InputA
    | InputB
    | InputX
    | InputY

all possible Inputs.

defaultInputs : String -> Maybe Input

The default layout:

Background


type alias Background =
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)

Advanced

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.

provides a fully wired program that takes care of everything.