Elm is a purely Functional Reactive Programming language, which happens to have the best current implementation of a Time Travelling Debugger (see Bret Victor's Inventing on Principle [https://vimeo.com/36579366] from 12:25) and is ideally suited for games and UIs. We'll see how FRP, a strong yet simple(r than Haskell) type system and the interactive programming workflow make developing a small game much more pleasant compared to the mainstream game engines experience.

1. Time TravelTime Travel
for Game Developmentfor Game Development
with Elmwith Elm
byby @doppioslash@doppioslash
20th of November 2015 - Codemotion - Milan

2. +ClaudiaDoppioslash+ClaudiaDoppioslash
@doppioslash@doppioslash
blog.doppioslash.comblog.doppioslash.com
About meAbout me
Game Developer &Game Developer &
Functional ProgrammerFunctional Programmer

3. Table of ContentsTable of Contents
GameDev workflow = hell
Time Travelling Debugger?
Meet Elm
Structuring programs in Elm
Time Travelling Demo
Gotchas

4. What is the single mostWhat is the single most
soul destroying thing insoul destroying thing in
game development?game development?

5. What is the single most soulWhat is the single most soul
destroying thing in gamedestroying thing in game
development?development?
C++?C++?

7. What is the single most soulWhat is the single most soul
destroying thing in gamedestroying thing in game
development?development?
Having to redo a 10Having to redo a 10
moves combo everymoves combo every
time you check iftime you check if
the bug is gone?the bug is gone?

9. What is the single most soulWhat is the single most soul
destroying thing in gamedestroying thing in game
development?development?
Projects gettingProjects getting
canned?canned?

11. Slow Iteration timesSlow Iteration times
What is the single most soulWhat is the single most soul
destroying thing in gamedestroying thing in game
development?development?

13. Example CommonExample Common
Game DevelopmentGame Development
WorkflowWorkflow
(starring Unity)(starring Unity)

14. 1. Write some code1. Write some code
Example CommonExample Common
Game Development WorkflowGame Development Workflow

15. 2. Playtest it2. Playtest it
(in the Unity Editor)(in the Unity Editor)
Example CommonExample Common
Game Development WorkflowGame Development Workflow

18. Now to test thatNow to test that
same change onsame change on
mobile devices:mobile devices:
Example Common Game DevelopmentExample Common Game Development
Workflow (starring Unity)Workflow (starring Unity)

19. Make a change and test onMake a change and test on
DeviceDevice
1. Start build1. Start build

21. Make a change and test onMake a change and test on
DeviceDevice
3. load the ipa/apk3. load the ipa/apk
on deviceon device

22. Make a change and test onMake a change and test on
DeviceDevice
4. playtest until your4. playtest until your
code runscode runs

23. Make a change and test onMake a change and test on
DeviceDevice
5. Find new and5. Find new and
exciting bugsexciting bugs
(only on device)(only on device)

25. Slow Iteration timesSlow Iteration times
Say bye to FlowSay bye to Flow

27. Slow Iteration timesSlow Iteration times
Error prone forest ofError prone forest of
build settingsbuild settings

29. Slow Iteration timesSlow Iteration times
Deadline panic 10xDeadline panic 10x
increaseincrease
(suffering together at late hours might be team-building
but surely we don't need this :P)

31. What can fix this?What can fix this?

32. What can help?What can help?
Jenkins churning buildsJenkins churning builds
out in backgroundout in background

33. What can help?What can help?
Type system to catchType system to catch
bugs before runningbugs before running

34. What can help?What can help?
Unit testingUnit testing

35. What is the idealWhat is the ideal
workflow?workflow?

37. InventingInventing
onon
PrinciplePrinciple
As seen on :LambdaCat

39. Inventing on PrincipleInventing on Principle
Hot reloadHot reload::
reload changes to thereload changes to the
code without stoppingcode without stopping
the gamethe game

40. Inventing on PrincipleInventing on Principle
Time TravelTime Travel::
being able to scrubbeing able to scrub
to any point in theto any point in the
sessionsession

41. Inventing on PrincipleInventing on Principle
OmniscienceOmniscience::
see all the statesee all the state
in the sessionin the session

42. Is that even possible?Is that even possible?

45. Racket,VR andRacket,VR and
John CarmackJohn Carmack
(watch it)(watch it)

47. John CarmackJohn Carmack

48. John CarmackJohn Carmack LISP (Racket)LISP (Racket)

49. Which language makes itWhich language makes it
all possible RIGHT NOW?all possible RIGHT NOW?

50. ElmElm
(I'm sure no one saw this coming)(I'm sure no one saw this coming)

51. ((
Mario demo)Mario demo)
debug.elm-lang.orgdebug.elm-lang.org

52. What sort ofWhat sort of
language is Elm?language is Elm?

53. What sort of language is Elm?What sort of language is Elm?
PurelyPurely
FunctionalFunctional

54. FunctionalFunctional
ReactiveReactive
(FRP)(FRP)
What sort of language is Elm?What sort of language is Elm?

55. EagerEager
What sort of language is Elm?What sort of language is Elm?

56. Static TypeStatic Type
SystemSystem
What sort of language is Elm?What sort of language is Elm?

57. Compiles toCompiles to
Javascript,Javascript,
HTML, CSSHTML, CSS
What sort of language is Elm?What sort of language is Elm?

58. Interoperates withInteroperates with
Javascript while stillJavascript while still
being type safebeing type safe
What sort of language is Elm?What sort of language is Elm?

59. SmallSmall
What sort of language is Elm?What sort of language is Elm?

60. Invented byInvented by
Evan CzaplickiEvan Czaplicki
for his thesisfor his thesis
What sort of language is Elm?What sort of language is Elm?

61. Meant to beMeant to be
approachableapproachable
and practicaland practical
What sort of language is Elm?What sort of language is Elm?

62. Meant to be approachableMeant to be approachable
and practicaland practical
No 'scary' terms likeNo 'scary' terms like
MonadMonad

64. In Production atIn Production at

65. Elm ReactorElm Reactor
(the Time Travelling Debugger)(the Time Travelling Debugger)

66. Elm ReactorElm Reactor
Inspired byInspired by
Inventing onInventing on
PrinciplePrinciple

67. Elm ReactorElm Reactor
FundamentalsFundamentals
made in a fewmade in a few
days by Laszlodays by Laszlo

68. Elm ReactorElm Reactor
Elm's languageElm's language
design isdesign is
accidentallyaccidentally
'compatible''compatible'

69. Elm ReactorElm Reactor
You can "stepYou can "step
through" whilethrough" while
moving the mousemoving the mouse

70. How do youHow do you
structurestructure
programs inprograms in
Elm?Elm?

71. The Functional TriforceThe Functional Triforce
MaybeMaybe
UnionUnion
TypesTypes
PatternPattern
MatchingMatching

72. The Functional TriforceThe Functional Triforce
Union TypesUnion Types
define the Model:define the Model:
type Tile
= Door Size
| Column
| BackGround BackGroundTile
| Shadow ShadowTile

73. The Functional TriforceThe Functional Triforce
MaybeMaybe
gets rid of NULL errorsgets rid of NULL errors
type Maybe a
= Just a
| Nothing

74. The Functional TriforceThe Functional Triforce
Pattern MatchingPattern Matching
String.toInt : String -> Maybe Int
toMonth : String -> Maybe Int toMont
h rawString =
case String.toInt rawString of
Nothing ->
Nothing
Just n ->
if n > 0 && n <= 12 then Ju
st n else Nothing

75. Elm ArchitectureElm Architecture
Elm isElm is
opinionatedopinionated

76. Elm ArchitectureElm Architecture
Use theUse the
"" ""Elm ArchitectureElm Architecture

77. Elm ArchitectureElm Architecture
ModelModel
ViewView
UpdateUpdate

78. OverviewOverview

79. Elm ArchitectureElm Architecture
ModelModel ==
the Data Structurethe Data Structure
we pass aroundwe pass around

80. ModelModel
type alias UserInput = {}
userInput : Signal UserInput
userInput = Signal.constant {}
type alias Input =
{ timeDelta : Float
​ , userInput : UserInput
}

81. ModelModel
type alias UserInput = {}
userInput : Signal UserInput
userInput = Signal.constant {}
type alias Input =
{ timeDelta : Float
​ , userInput : UserInput
}
TypeType
signaturesignature

82. ModelModel
type alias UserInput = {}
userInput : Signal UserInput
userInput = Signal.constant {}
type alias Input =
{ timeDelta : Float
​ , userInput : UserInput
}
A recordA record
Type aliasType alias
SignalSignal

83. ModelModel
Record =Record =
set of key value pairsset of key value pairs

84. ModelModel
Type alias =Type alias =
give name to a set of fieldsgive name to a set of fields
in a recordin a record

85. ModelModel
Signal =Signal =
updates every time variableupdates every time variable
changeschanges

86. ModelModel
type alias GameState = {}
defaultGame : GameState
defaultGame = {}

87. Elm ArchitectureElm Architecture
ViewView ==
the code thatthe code that
renders from therenders from the
ModelModel

88. DisplayDisplay
display : (Int,Int) -> GameState ->
Element
display (w,h) gameState = show
gameState

89. DisplayDisplay
display : (Int,Int) -> GameState ->
Element
display (w,h) gameState = show
gameState
TypeType
signaturesignature

90. Elm ArchitectureElm Architecture
UpdateUpdate ==
the function thatthe function that
does the change ofdoes the change of
statestate

91. UpdateUpdate
stepGame : Input -> GameState ->
GameState
stepGame {timeDelta,userInput}
gameState =
gameState

92. UpdateUpdate
stepGamestepGame uses theuses the
currentcurrent InputInput
(which is(which is UserInputUserInput and aand a
timeDeltatimeDelta))
to make a newto make a new GameStateGameState

93. Elm ArchitectureElm Architecture
SignalsSignals

94. SignalsSignals
delta : Signal Float
delta = Time.fps 30
input : Signal Input
input = Signal.sampleOn delta
(Signal.map2 Input delta userInput)
sampleOnsampleOn

95. SignalsSignals
delta : Signal Float
delta = Time.fps 30
input : Signal Input
input = Signal.sampleOn delta
(Signal.map2 Input delta userInput)
map2map2

96. SignalsSignals
gameState : Signal GameState
gameState = Signal.foldp stepGame
defaultGame input

97. SignalsSignals
gameState : Signal GameState
gameState = Signal.foldp stepGame
defaultGame input foldpfoldp

98. SignalsSignals
Signal.map2 =Signal.map2 =
applies a function thatapplies a function that
takes 2 argumentstakes 2 arguments
to a signalto a signal

99. SignalsSignals
Signal.sampleOn =Signal.sampleOn =
samples from 2ndsamples from 2nd
input anytime aninput anytime an
event occurs in the 1stevent occurs in the 1st

100. SignalsSignals
Signal.foldp =Signal.foldp =
a signal dependent ona signal dependent on
the pastthe past

101. MainMain
(where you wire(where you wire
everything up)everything up)
Elm ArchitectureElm Architecture

102. MainMain
main : Signal Element
main = Signal.map2 display
Window.dimensions gameState

103. MainMain
main : Signal Element
main = Signal.map2 display
Window.dimensions gameState
Signal ofSignal of
ElementElement
valuesvalues

104. Overview (again)Overview (again)

105. What are Signals?What are Signals?

106. Stream of valuesStream of values
What are Signals?What are Signals?

107. What are Signals?What are Signals?

108. What are Signals?What are Signals?
a different way ofa different way of
thinking aboutthinking about
variablesvariables

109. What are Signals?What are Signals?
an explicit model ofan explicit model of
variable mutation invariable mutation in
timetime

110. What are Signals?What are Signals?
non-awkward way ofnon-awkward way of
structuring callbacksstructuring callbacks

112. What are Signals?What are Signals?
they are wired inthey are wired in
signal graphssignal graphs
(directed acyclic(directed acyclic
graphs)graphs)

113. What are Signals?What are Signals?

114. What kind ofWhat kind of
functions can wefunctions can we
apply on signals?apply on signals?

115. What kind of functions canWhat kind of functions can
we apply on signals?we apply on signals?
: Signal a ->
Signal a -Signal a ->> Signal aSignal a
merge

116. What kind of functions canWhat kind of functions can
we apply on signals?we apply on signals?
:: (a(a ->-> Bool)Bool) ->-> aa ->->
Signal aSignal a ->-> Signal aSignal a
filterfilter

117. What kind of functions canWhat kind of functions can
we apply on signals?we apply on signals?
:: (a(a ->-> result)result) ->-> Signal aSignal a --
>> Signal resultSignal result
mapmap
applies a function on a signalapplies a function on a signal
returns another, transformed, signalreturns another, transformed, signal

118. What kind of functions canWhat kind of functions can
we apply on signals?we apply on signals?
:: (a(a ->-> bb ->-> result)result) ->->
Signal aSignal a ->-> Signal bSignal b ->->
Signal resultSignal result
map2map2
applies a function on two signalsapplies a function on two signals

119. What kind of functions canWhat kind of functions can
we apply on signals?we apply on signals?
makes a signal that depends on themakes a signal that depends on the
past values of a signalpast values of a signal
: (a -> state -> state) -
> state -> Signal a ->
Signal state
foldp

120. What is aWhat is a foldpfoldp??

121. Fold from the pastFold from the pastFold from the pastFold from the pastFoldFold from thefrom the pastpast

123. What is a foldp?What is a foldp?
takes (a -> state -> state)foldp
a function

124. What is a foldp?What is a foldp?
... -> state -> ...
a default state

125. What is a foldp?What is a foldp?
... -> Signal a -> ...
an input signal

126. What is this foldp thing?What is this foldp thing?
... -> Signal state
returns a signal
(= next state of the program,
after applying update)

127. How Elm ReactorHow Elm Reactor
worksworks

128. Record InputsRecord Inputs
How Elm Reactor worksHow Elm Reactor works

129. ReappliesReapplies
functions tofunctions to
inputsinputs
How Elm Reactor worksHow Elm Reactor works

130. previous stateprevious state
++
previous inputsprevious inputs
==
next statenext state
How Elm Reactor worksHow Elm Reactor works

131. snapshottingsnapshotting
forfor
performanceperformance
How Elm Reactor worksHow Elm Reactor works

132. How Elm Reactor worksHow Elm Reactor works
changes to typeschanges to types
will break hotwill break hot
swappingswapping

133. also if a changealso if a change
doesn't compiledoesn't compile
How Elm Reactor worksHow Elm Reactor works

134. Why is Elm goodWhy is Elm good
for Time Travelling?for Time Travelling?

135. Why Elm Reactor worksWhy Elm Reactor works
Applying the sameApplying the same
inputs will return theinputs will return the
same outputsame output
(referential transparency)(referential transparency)

136. Why Elm Reactor worksWhy Elm Reactor works
No side effectsNo side effects ==
can replay codecan replay code

137. Why Elm Reactor worksWhy Elm Reactor works
All mutable state isAll mutable state is
stored in the foldpstored in the foldp

138. Static signalStatic signal
graphgraph
Why Elm Reactor worksWhy Elm Reactor works

139. But, can itBut, can it
scale?scale?

140. Castle of ElmCastle of Elm
But, can it scale?But, can it scale?

141. Game Jam gameGame Jam game
Castle of ElmCastle of Elm
Somewhat RoguelikeSomewhat Roguelike
In 2 daysIn 2 days
From scratchFrom scratch

142. Flexible tile systemFlexible tile system
Castle of ElmCastle of Elm
CollisionsCollisions

143. (let's break the(let's break the
collisions system)collisions system)
Castle of ElmCastle of Elm

144. GotchasGotchas

145. Out of memoryOut of memory
GotchasGotchas

146. SchroedingerSchroedinger
Hot SwappingHot Swapping
GotchasGotchas

148. But you can help!But you can help!
It's OSSIt's OSS

149. <- CODE HERE<- CODE HERE

150. Why use staticallyWhy use statically
typed pure Functionaltyped pure Functional
languages in Gamelanguages in Game
Development?Development?

151. Why it's worth to use new language researchWhy it's worth to use new language research
in Game Developmentin Game Development
No runtimeNo runtime
exceptionsexceptions

152. Why it's worth to use new language researchWhy it's worth to use new language research
in Game Developmentin Game Development
No raceNo race
conditionsconditions

153. Why it's worth to use new language researchWhy it's worth to use new language research
in Game Developmentin Game Development
Better toolsBetter tools

154. Why it's worth to use new language researchWhy it's worth to use new language research
in Game Developmentin Game Development
Less codeLess code

155. Why it's worth to use new language researchWhy it's worth to use new language research
in Game Developmentin Game Development
Ease ofEase of
parallelisationparallelisation

156. elm-lang.org/docselm-lang.org/docs
@elmlang@elmlang
#elmlang#elmlang
Where to learn Elm?Where to learn Elm?

157. #haskell.it @ freenode#haskell.it @ freenode
haskell-ita.ithaskell-ita.it
@Haskell_ITA@Haskell_ITA
Maybe join Haskell ITAMaybe join Haskell ITA

158. @lambda_cat@lambda_cat
lambdacat.comlambdacat.com
ReadRead LambdaCatLambdaCat!!