Zinggi / elm-2d-game / Game.TwoD

A set of functions used to embed a 2d game into a web page. These functions specify the size and attributes passed to the canvas element.

You need to pass along the time, size and camera, as these are needed for rendering.

suggested import:

import Game.TwoD as Game


type alias RenderConfig =
{ time : Basics.Float
, size : ( Basics.Int
, Basics.Int )
, camera : Camera 
}

This is used by all the functions below, it represents all the shared state needed to render stuff. If you don't use sprite animations you can use 0 for the time parameter.

Canvas element only

render : RenderConfig -> List Renderable -> Html x

Creates a canvas element that renders the given Renderables.

If you don't use animated sprites, you can use 0 for the time parameter.

render { time = time, size = (800, 600), camera = state.camera }
    [ Background.render
    , Player.render state.Player
    ]

renderWithOptions : List (Html.Attribute msg) -> RenderConfig -> List Renderable -> Html msg

Same as above, but you can specify additional attributes that will be passed to the canvas element. A useful trick to save some GPU processing at the cost of image quality is to use a smaller size argument and than scale the canvas with CSS. e.g.

renderWithOptions [ style [ ( "width", "800px" ), ( "height", "600px" ) ] ]
    { time = time, size = ( 400, 300 ), camera = camera }
    (World.render model.world)

Embedded in a div

renderCentered : RenderConfig -> List Renderable -> Html x

Same as render, but wrapped in a div and nicely centered on the page using flexbox

renderCenteredWithOptions : List (Html.Attribute msg) -> List (Html.Attribute msg) -> RenderConfig -> List Renderable -> Html msg

Same as above, but you can specify attributes for the container div and the canvas.

renderCenteredWithOptions
    containerAttributes
    canvasAttributes
    renderConfig
    renderables