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
{ 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.
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)
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