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

Part 1 of 12 — The Game Loop

Lucamug
Lucamug
Jun 8, 2019 · 3 min read

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

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

while game is running
process inputs
update game world
generate outputs
loop

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 =
Browser.element
{ 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

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 =
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)

More From Medium

More from Lucamug

Related reads

Also tagged Videogames

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade