Beginner Tutorials: How to build a game in Elm — Part 1

Part 1 of 12 — The Game Loop

Next: Part 2 — Add Keyboard

This is the first of 12 parts tutorial about making a game in Elm. Pure Functional Programming are a good fit for video games development, as expressed at the QuakeCon Convention by John Carmack.

Couple of disclaimers:

  1. I’m not a game developer, this was just an exercise that I wanted to do with my children to expose them to video games from a different perspective
  2. The code is not optimised for performance but it still pretty fast
This is what we are going to make in this part 1 of the tutorial

Let’s get started!

The game loop

Differently from a regular web application that sleep for most of the time and wake up only in case of some event, like an user click for example, a game is always awake.

This is done through a never ending loop, something like (in pseudo-code):

while game is running
process inputs
update game world
generate outputs

In our case, the game run in the browser so we should sync up to the browser render loop that usually repaint the screen 60 times per second.
For this, in Javascript there is request​Animation​Frame. In Elm the analogues areonAnimationFrame or onAnimationFrameDelta.

So let’s build our basic TEA (The Elm Architecture) skeleton and add the subscription to onAnimationFrameDelta.

type alias Model = { count : Float }init _ = ( { count = 0 }, Cmd.none )type Msg = Frame Floatsubscriptions _ = onAnimationFrameDelta Frameupdate _ model = ( { model | count = model.count + 1 }, Cmd.none )view model = text ("Count: " ++ String.fromFloat model.count)main : Program () Model Msg
main =
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
The Game Loop

If this code is not clear to you I would suggest to have a look at The Elm Architecture section of the official Elm guide.

In the above example we synced the Elm loop with the browser render loop. We receive the message Frame 60 times per second, we increment the counter by 1 and we display on the screen.

The canvas

To render the game on the screen we will the Canvas API through the module joakin/elm-canvas.

When using this library we need to include a Javascript file because the interactions is done with Elm through web components.

This is an example of printing some text in the canvas using this library:

viewLogo color renderable =
++ [ text
[ font 29
, fill color
, align Left
( margin, margin + 16 )
, text
[ font 8
, fill color
, align Left
( margin + 4, margin + 28 )
"n y o r o n y o r o"

And finally this is the Game Loop, canvas version:

The game loop on canvas

This is all for now, leave your feedback in the comments section below and stay tuned for the next posts!

  1. The Game Loop (this post)
  2. Add Keyboard Support
  3. Add the Pause
  4. Add Player (coming soon)
  5. Add Score (coming soon)
  6. Add Random (coming soon)
  7. Add Shots (coming soon)
  8. Detect Collisions (coming soon)
  9. Add Explosions (coming soon)
  10. Add Slow Motion (coming soon)
  11. Add Sound (coming soon)
  12. Add Menu (coming soon)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store