Maybe you’re not setting out to make the next “Angry Birds.” But there are lessons to learn from mobile game design principles– from user training and motivation strategies to fun and engaging graphics– that are valuable to a wide variety of apps. First we’ll glance at a little “theory” about what makes games fun. Then we’ll come back to our non-game apps and see how those concepts could apply. Next, we’ll dive into an introductory example using iOS 7′s new, easy-to-use SpriteKit framework to make a fun, interactive app menu. Finally, we’ll use Instruments in Xcode to check on our frame rate to make sure we’re not compromising performance.

1. YOUR APP IS
ACTUALLY A
GAME
Snow*Mobile 2014

2. YOUR APP IS
ACTUALLY A
GAME
Snow*Mobile 2014

3. SOME GUY WITH A MICROPHONE

4. SOME GUY WITH A MICROPHONE
• An iOS / Android engineer

5. SOME GUY WITH A MICROPHONE
• An iOS / Android engineer
• Only a hobbyist game developer or designer

6. WHAT ISTHIS ABOUT?

7. WHAT ISTHIS ABOUT?
• A list of important questions, with context

8. WHAT ISTHIS ABOUT?
• A list of important questions, with context
• A challenge for future apps

9. WHAT ISTHIS ABOUT?
• A list of important questions, with context
• A challenge for future apps
• An example with a top current game engine

10. FORTHE BUSINESS FOLKS

11. FORTHE BUSINESS FOLKS
• From Distimo’s Report for 2013:

12. FORTHE BUSINESS FOLKS
• From Distimo’s Report for 2013:
• “The vast majority of mobile app revenue was
generated in the Games category.”

13. FORTHE BUSINESS FOLKS
• From Distimo’s Report for 2013:
• “The vast majority of mobile app revenue was
generated in the Games category.”
• The top 10 grossing apps in the App Store were
games.

14. FORTHE BUSINESS FOLKS
• From Distimo’s Report for 2013:
• “The vast majority of mobile app revenue was
generated in the Games category.”
• The top 10 grossing apps in the App Store were
games.
• App Store: 75% of US revenue, 63% world

15. WHAT IS NOT A GAME?

16. WHAT IS NOT A GAME?
• “You win or you die.”

17. WHAT IS NOT A GAME?
• “You win or you die.”

18. WHAT IS NOT A GAME?
• “You win or you die.”

19. WHAT IS NOT A GAME?
• “You win or you die.”
• “Everything in life!” -
my mother, often as I was
growing up.

20. WHAT IS NOT A GAME?
• “You win or you die.”
• “Everything in life!” -
my mother, often as I was
growing up.
• “The only winning
move is not to play.”

21. WHAT IS NOT A GAME?
• “You win or you die.”
• “Everything in life!” -
my mother, often as I was
growing up.
• “The only winning
move is not to play.”

22. WHAT IS NOT A GAME?
• “You win or you die.”
• “Everything in life!” -
my mother, often as I was
growing up.
• “The only winning
move is not to play.”
• actually, this is a game.

23. WHAT IS A GAME?

24. WHAT IS A GAME?
• Goals, rules, challenges, and
interactions.

25. WHAT IS A GAME?
• Goals, rules, challenges, and
interactions.

26. WHAT IS A GAME?
• Goals, rules, challenges, and
interactions.

27. WHAT IS A GAME?
• Goals, rules, challenges, and
interactions.
• “A series of meaningful
choices.” - Sid Meier

28. WHAT IS A GAME?
• Goals, rules, challenges, and
interactions.
• “A series of meaningful
choices.” - Sid Meier

29. WHAT IS A GAME?
• Goals, rules, challenges, and
interactions.
• “A series of meaningful
choices.” - Sid Meier

30. WHAT IS A GAME?
• Goals, rules, challenges, and
interactions.
• “A series of meaningful
choices.” - Sid Meier
• Iconic depictions of patterns
in the world.

31. STAGES OF PATTERNHOOD

32. STAGES OF PATTERNHOOD
• NOISE

33. STAGES OF PATTERNHOOD
• NOISE

34. STAGES OF PATTERNHOOD
• NOISE

35. STAGES OF PATTERNHOOD
• NOISE
• Learning

36. STAGES OF PATTERNHOOD
• NOISE
• Learning

37. STAGES OF PATTERNHOOD
• NOISE
• Learning

38. STAGES OF PATTERNHOOD
• NOISE
• Learning
• Mastery

39. STAGES OF PATTERNHOOD
• NOISE
• Learning
• Mastery

40. STAGES OF PATTERNHOOD
• NOISE
• Learning
• Mastery

41. STAGES OF PATTERNHOOD
• NOISE
• Learning
• Mastery
• Comfort / Boredom

42. STAGES OF PATTERNHOOD
• NOISE
• Learning
• Mastery
• Comfort / Boredom

43. SPATIAL / COLOR

44. SPATIAL / COLOR
Blue always makes you win!
-or-
Always go to the left!

45. PHYSICS /TIMING

46. PHYSICS /TIMING
Button-smashing!

47. LIFE / DEATH

48. LIFE / DEATH
Infinite lives, no consequences!

49. WARFARE

50. WARFARE
Play as the “Good Guys” to win!

51. REWARDS

52. REWARDS
Awkward “Gamification"
- or -
Manipulation / Social Referencing

53. SOCIAL STATUS / ROLES

54. SOCIAL STATUS / ROLES
“Save the princess”
- or -
Reinforcing stereotypes

55. EXAMPLES OF PATTERNS
Type Example Done Irresponsibly
Spatial / Color Tetris Blue is the best!
Physics /Timing Super Mario Bros. Button-smashing!
Life / Death Chess No consequences.
Warfare Starcraft The “good guys” always
win!
Rewards Olympic Medals Manipulation, social
referencing
Social Status / Roles The Sims Save the princess,
stereotyping

56. YOUR APP:

57. YOUR APP:
• At first, it is just NOISE

58. YOUR APP:
• At first, it is just NOISE
• Use design patterns

59. YOUR APP:
• At first, it is just NOISE
• Use design patterns
• Reflect real-world patterns

60. YOUR APP:
• At first, it is just NOISE
• Use design patterns
• Reflect real-world patterns
• Introduce your new patterns

61. YOUR APP:
• At first, it is just NOISE
• Use design patterns
• Reflect real-world patterns
• Introduce your new patterns
• Avoid comfort / boredom

62. ISYOUR APPTIC-TAC-TOE?

63. ISYOUR APPTIC-TAC-TOE?

64. QUESTIONSTO ASK

65. QUESTIONSTO ASK
• What patterns does my app have?

66. QUESTIONSTO ASK
• What patterns does my app have?
• At what stage are they presented?

67. QUESTIONSTO ASK
• What patterns does my app have?
• At what stage are they presented?
• Are they presented responsibly?

68. QUESTIONSTO ASK
• What patterns does my app have?
• At what stage are they presented?
• Are they presented responsibly?
• Are there any other patterns it should have?

69. BUDDING GAME ENVIRONMENTS

70. BUDDING GAME ENVIRONMENTS
• Game Center and Google Play Game Services

71. BUDDING GAME ENVIRONMENTS
• Game Center and Google Play Game Services
• Leaderboards

72. BUDDING GAME ENVIRONMENTS
• Game Center and Google Play Game Services
• Leaderboards
• Achievements

73. BUDDING GAME ENVIRONMENTS
• Game Center and Google Play Game Services
• Leaderboards
• Achievements
• Matchmaking

74. BUDDING GAME ENVIRONMENTS
• Game Center and Google Play Game Services
• Leaderboards
• Achievements
• Matchmaking
• What should be added?

75. SPRITE KIT

76. SPRITE KIT
• Apple Framework for iOS 7+ and OS X 10.9+

77. SPRITE KIT
• Apple Framework for iOS 7+ and OS X 10.9+
• Introduced at WWDC 2013

78. SPRITE KIT
• Apple Framework for iOS 7+ and OS X 10.9+
• Introduced at WWDC 2013
• Integrated into Xcode 5

79. SPRITE KIT
• Apple Framework for iOS 7+ and OS X 10.9+
• Introduced at WWDC 2013
• Integrated into Xcode 5
• Aids 2-D animations and physics

80. SPRITE KIT
• Apple Framework for iOS 7+ and OS X 10.9+
• Introduced at WWDC 2013
• Integrated into Xcode 5
• Aids 2-D animations and physics
• Doesn’t require going into OpenGL

81. SPRITE KIT
• Apple Framework for iOS 7+ and OS X 10.9+
• Introduced at WWDC 2013
• Integrated into Xcode 5
• Aids 2-D animations and physics
• Doesn’t require going into OpenGL
• Meaning: not scary

82. WHAT IS A SPRITE?

83. WHAT IS A SPRITE?

84. WHAT IS A SPRITE?
• An image or animation integrated into a larger scene

85. WHAT IS A SPRITE?
• An image or animation integrated into a larger scene
• Characters

86. WHAT IS A SPRITE?
• An image or animation integrated into a larger scene
• Characters
• Other moving objects

87. NODES

88. NODES
• BTW, everything has an SK in front of it

89. NODES
• BTW, everything has an SK in front of it
• SKNodes have parent-child relationships

90. NODES
• BTW, everything has an SK in front of it
• SKNodes have parent-child relationships

91. THE SNOWY PLANET BATTLE MENU

92. THE SNOWY PLANET BATTLE MENU
• Snowfall in the background

93. THE SNOWY PLANET BATTLE MENU
• Snowfall in the background
• Snow buildup on the buttons

94. THE SNOWY PLANET BATTLE MENU
• Snowfall in the background
• Snow buildup on the buttons
• A floating title (with orbiting lasers)

95. THE SNOWY PLANET BATTLE MENU
• Snowfall in the background
• Snow buildup on the buttons
• A floating title (with orbiting lasers)
• Choosing an option causes lasers to fire

96. THE SNOWY PLANET BATTLE MENU
• Snowfall in the background
• Snow buildup on the buttons
• A floating title (with orbiting lasers)
• Choosing an option causes lasers to fire
• And an EXPLOSION

97. FIRSTTHINGS FIRST

98. FIRSTTHINGS FIRST
• Import SpriteKit into your Xcode project

99. FIRSTTHINGS FIRST
• Import SpriteKit into your Xcode project
• Create an SKView

100. FIRSTTHINGS FIRST
• Import SpriteKit into your Xcode project
• Create an SKView
• Have that SKView present a custom-made subclass of SKScene

101. FIRSTTHINGS FIRST
• Import SpriteKit into your Xcode project
• Create an SKView
• Have that SKView present a custom-made subclass of SKScene
• Note that SKScene extends SKNode, so it has a parent-child setup

102. SNOWFALL

103. SNOWFALL
• SKEmitterNode

104. SNOWFALL
• SKEmitterNode
• automatically creates small sprites

105. SNOWFALL
• SKEmitterNode
• automatically creates small sprites
• created and edited in Xcode 5

106. SNOWFALL
• SKEmitterNode
• automatically creates small sprites
• created and edited in Xcode 5
• Just add to a parent SKNode and it runs until you
remove it

107. SNOWFLAKE SPRITES

108. SNOWFLAKE SPRITES
• To make each snowflake:

109. SNOWFLAKE SPRITES
• To make each snowflake:
• Create a new SKSpriteNode with a horizontally-
random starting position

110. SNOWFLAKE SPRITES
• To make each snowflake:
• Create a new SKSpriteNode with a horizontally-
random starting position
• Give it a new SKPhysicsBody and let Newton take
over

111. SNOWFLAKE SPRITES
• To make each snowflake:
• Create a new SKSpriteNode with a horizontally-
random starting position
• Give it a new SKPhysicsBody and let Newton take
over
• It melts after some time or when it leaves the screen

112. THE FLOATINGTITLE

113. THE FLOATINGTITLE
• Create an SKLabelNode with text, font, etc.

114. THE FLOATINGTITLE
• Create an SKLabelNode with text, font, etc.
• Create a forever-repeating SKAction to float

115. THE FLOATINGTITLE
• Create an SKLabelNode with text, font, etc.
• Create a forever-repeating SKAction to float
• Assign it an SKPhysicsBody

116. THE FLOATINGTITLE
• Create an SKLabelNode with text, font, etc.
• Create a forever-repeating SKAction to float
• Assign it an SKPhysicsBody
• But turn off the dynamic boolean

117. ADD LASERS!

118. ADD LASERS!
• Create SKSpriteNodes

119. ADD LASERS!
• Create SKSpriteNodes
• Create + Assign flash and orbit SKActions

120. ADD LASERS!
• Create SKSpriteNodes
• Create + Assign flash and orbit SKActions
• Positions are automatically relative to their parent

121. ADD LASERS!
• Create SKSpriteNodes
• Create + Assign flash and orbit SKActions
• Positions are automatically relative to their parent
• So as the title floats, lasers move with it

122. CHOOSING A MENU OPTION

123. CHOOSING A MENU OPTION
• Add plain old UIButtons

124. CHOOSING A MENU OPTION
• Add plain old UIButtons
• Also add non-dynamic SKNodes for snow to accumulate

125. CHOOSING A MENU OPTION
• Add plain old UIButtons
• Also add non-dynamic SKNodes for snow to accumulate
• When pressed:

126. CHOOSING A MENU OPTION
• Add plain old UIButtons
• Also add non-dynamic SKNodes for snow to accumulate
• When pressed:
• Remove all SKActions from the laser nodes

127. CHOOSING A MENU OPTION
• Add plain old UIButtons
• Also add non-dynamic SKNodes for snow to accumulate
• When pressed:
• Remove all SKActions from the laser nodes
• Assign new SKAction to move to the center of pressed button

128. CHOOSING A MENU OPTION
• Add plain old UIButtons
• Also add non-dynamic SKNodes for snow to accumulate
• When pressed:
• Remove all SKActions from the laser nodes
• Assign new SKAction to move to the center of pressed button
• BUT NOW WE WANT IT TO EXPLODE

129. EXPLODETHE BUTTON

130. EXPLODETHE BUTTON
• SKActions can execute completion blocks

131. EXPLODETHE BUTTON
• SKActions can execute completion blocks
• So once lasers hit, remove button and add another
SKEmitterNode

132. EXPLODETHE BUTTON
• SKActions can execute completion blocks
• So once lasers hit, remove button and add another
SKEmitterNode
• After an action-film-worthy period of time, remove
the emitter

133. EXPLODETHE BUTTON
• SKActions can execute completion blocks
• So once lasers hit, remove button and add another
SKEmitterNode
• After an action-film-worthy period of time, remove
the emitter
• Navigate to some other screen

134. FRAME RATE

135. CHECKYOUR FRAME RATE

136. CHECKYOUR FRAME RATE
• Show on-screen using SKView’s showFPS property

137. CHECKYOUR FRAME RATE
• Show on-screen using SKView’s showFPS property
• Debug Navigator in Xcode

138. CHECKYOUR FRAME RATE
• Show on-screen using SKView’s showFPS property
• Debug Navigator in Xcode

139. CHECKYOUR FRAME RATE
• Show on-screen using SKView’s showFPS property
• Debug Navigator in Xcode
• Profile using Instruments

140. CHECKYOUR FRAME RATE
• Show on-screen using SKView’s showFPS property
• Debug Navigator in Xcode
• Profile using Instruments
• Core Animation preset will work

141. TO LEAVE WITH…

142. TO LEAVE WITH…
• There is a lot of exciting research going on around
games and learning.

143. TO LEAVE WITH…
• There is a lot of exciting research going on around
games and learning.
• There are a lot of unexplored patterns for apps

144. TO LEAVE WITH…
• There is a lot of exciting research going on around
games and learning.
• There are a lot of unexplored patterns for apps
• Introducing game dynamics and physics is easy and fun!

145. THANKYOU
• @matt_luedke
• mattluedke.com
• github.com/mluedke2/snowy-planet-battle-menu