Game development in Elm: From Zero to Gamejam

Games are fun to play and fun to make! Elm is a great way to get started building games. We’ll take a whistlestop tour of 2d-game math, visuals, dealing with time, common data modeling solutions, and more. You will be equipped with the knowledge to participate in a game jam and turn your ideas into a playable game.

Transcript

1. GAMEDEV IN ELM FROM ZERO TO GAMEJAM
2. DREAMS
3. LAST YEAR
8. WHAT CHANGED?
9. I JOINED A GAMEJAM
10. WHAT IS A GAMEJAM?
11. WHY GAMEJAMS?
12. THEY END
13. FOCUS
14. ⏰"⏰
15. CLOSURE
16. COMMUNITY
17. WHERE DO I START?
18. The unexamined life is not worth living — Socrates
19. WHAT DO YOU WANT OUT OF IT?
20. SHIP A COMPLETED ARTIFACT
21. LEARN FUNDAMENTALS
22. LEARN NEW TECHNIQUES
23. LIFE BALANCE
24. FIND JAMS ON ITCH.IO
25. #mytholojam
26. LET'S GET STARTED!
27. RUTHLESSLY SMALL SCOPE
28. NOW CUT SOME MORE
29. WHAT IS THE CORE MECHANIC?
30. SAFE TEA Puzzle game where user attempts to find the optimal tower placement to prevent the pirate(s) from arriving at their goal.
31. PATH TO SUCCESS 1. Place tower 2. Pirates move towards goal 3. Towers shoot pirate 4. Win if pirate is hit 5. Lose if pirate arrives at destination
32. OBVIOUS THINGS WE CAN CUT > Multiple tower types > Multiple levels > Tower upgrades > Waves of pirates
33. LESS OBVIOUS THINGS WE CAN CUT > Pirate AI > Cannonball collision detection > Multiple towers, multiple pirates
34. IT'S OK TO HARD-CODE AND BRUTE-FORCE
35. "TECHNICALLY PLAYABLE"
36. BIG FAN OF ITERATIVE APPROACH
37. GAME LOOPS
39. USE Msg TO DRIVE YOUR LOOP type Msg = UserInitiatedDiceRoll | RandomDiceRollComplete Int | UserEndedTurn
40. DRIVEN BY THE USER
41. type Msg = SelectDeck Card.Deck | StartPlaying GameState | PlayCard Int Card | SelectCard Int | PlayCardToSlot Int Card GameSlot | EndTurn
42. REAL TIME
43. DRIVEN BY THE CLOCK
44. subscriptions : Model -> Sub Msg subscriptions model = Browser.Events.onAnimationFrameDelta Tick
45. SAFE TEA type Msg = Tick Float | MouseMove Mouse.Position | PlaceTower | StartPlacement
46. DOWN THE RIVER type Msg = Tick Float | Move Game.YDirection | NewSection Section | StartGame
47. GRAPHICS
48. EASY TO WASTE TIME
49. PLACEHOLDERS
52. I'M NOT AN ILLUSTRATOR
53. kenney.nl
55. TILESETS
58. CHOOSE A TECH
59. > HTML
60. > HTML > SVG
61. > HTML > SVG > WebGL
62. > HTML > SVG > WebGL > Canvas
63. > HTML > SVG > WebGL > Canvas
64. view : Model -> Html Msg
65. MODEL { pirate = (10, 50) }
66. QUADRANTS
69. (10, -50) ?
70. PANNING
72. ZOOMING
75. VIEW POSITIONS AND SIZES ARE RELATIVE
76. THE COMPILER CAN HELP US BUT WE NEED TO COMMUNICATE
77. TYPE SAFETY AROUND DISTANCES module Measurement exposing (Feet, Pixels, PixelsPerFoot) type Feet = Feet Int type Pixels = Pixels Int type PixelsPerFoot = PixelsPerFoot Int
78. TYPE SAFETY AROUND COORDINATES module Coordinate exposing (World, Screen) type World = World Point type Screen = Screen Point
80. VIEWPORTS
82. module Cordinate exposing (World, Screen, Viewport) -- OTHER CODE type alias Viewport = { position : World , width : Pixels , height : Pixels , zoom : PixelsPerFoot }
83. toScreen : Viewport -> World -> Screen
84. MODEL { pirate = World (10, 50) , viewport = ... }
85. DECOUPLE YOUR GAME STATE FROM HOW IT WILL BE RENDERED
86. DECOUPLE YOUR GAME SPEED FROM THE PAINT RATE
87. 30FPS -> 60 FPS
88. DISCRETE VS CONTINUOUS
89. ANIMATION FRAME IS NOT CONSISTENT
90. SUBSCRIBE TO DELTAS subscriptions : Model -> Sub Msg subscriptions model = Browser.Events.onAnimationFrameDelta Tick
91. SCALE BY THE DELTA
92. I'M STUCK!
93. COMMON SOLUTIONS > Google > #gamedev on Slack > Your gamejam community
94. When you’re stuck on a programming problem, the best way to get unstuck is often to try to express the problem in a different medium.
95. VERBAL
96. VISUAL
97. EXAMPLE - TILE MAPS
98. STORING ONE LONG LIST AND A WIDTH
100. WHAT IS THE POSITION OF TILE 5?
101. DIVISION AND REMAINDER
104. EXPLORATORY DRAWING
106. BRUTE FORCING
107. case region map (TileNumber tileNumber) of NorthWestCorner -> ... NorthEastCorner -> ... SouthWestCorner -> ... SouthEastCorner -> ... NorthEdge -> ... WestEdge -> ... EastEdge -> ... SouthEdge -> ... Middle -> ...
109. JOIN A GAMEJAM!
110. > JoelQ/safe-tea > JoelQ/down-the-river > joshuaclayton/ship-it > JoelQ/muses
111. JOËL QUENNEVILLE Web developer at thoughtbot > GitHub - JoelQ > Twitter - @joelquen > Slack - @joelq