your app is actually a game @ snow*mobile 2014
DESCRIPTION
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.TRANSCRIPT
![Page 1: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/1.jpg)
YOUR APP IS ACTUALLY A
GAMESnow*Mobile 2014
![Page 2: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/2.jpg)
YOUR APP IS ACTUALLY A
GAMESnow*Mobile 2014
![Page 3: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/3.jpg)
SOME GUY WITH A MICROPHONE
![Page 4: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/4.jpg)
SOME GUY WITH A MICROPHONE
• An iOS / Android engineer
![Page 5: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/5.jpg)
SOME GUY WITH A MICROPHONE
• An iOS / Android engineer
• Only a hobbyist game developer or designer
![Page 6: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/6.jpg)
WHAT IS THIS ABOUT?
![Page 7: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/7.jpg)
WHAT IS THIS ABOUT?
• A list of important questions, with context
![Page 8: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/8.jpg)
WHAT IS THIS ABOUT?
• A list of important questions, with context
• A challenge for future apps
![Page 9: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/9.jpg)
WHAT IS THIS ABOUT?
• A list of important questions, with context
• A challenge for future apps
• An example with a top current game engine
![Page 10: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/10.jpg)
FOR THE BUSINESS FOLKS
![Page 11: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/11.jpg)
FOR THE BUSINESS FOLKS• From Distimo’s Report for 2013:
![Page 12: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/12.jpg)
FOR THE BUSINESS FOLKS• From Distimo’s Report for 2013:
• “The vast majority of mobile app revenue was generated in the Games category.”
![Page 13: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/13.jpg)
FOR THE 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.
![Page 14: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/14.jpg)
FOR THE 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
![Page 15: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/15.jpg)
WHAT IS NOT A GAME?
![Page 16: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/16.jpg)
WHAT IS NOT A GAME?• “You win or you die.”
![Page 17: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/17.jpg)
WHAT IS NOT A GAME?• “You win or you die.”
![Page 18: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/18.jpg)
WHAT IS NOT A GAME?• “You win or you die.”
![Page 19: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/19.jpg)
WHAT IS NOT A GAME?• “You win or you die.”
• “Everything in life!” - my mother, often as I was growing up.
![Page 20: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/20.jpg)
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.”
![Page 21: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/21.jpg)
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.”
![Page 22: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/22.jpg)
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.
![Page 23: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/23.jpg)
WHAT IS A GAME?
![Page 24: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/24.jpg)
WHAT IS A GAME?
• Goals, rules, challenges, and interactions.
![Page 25: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/25.jpg)
WHAT IS A GAME?
• Goals, rules, challenges, and interactions.
![Page 26: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/26.jpg)
WHAT IS A GAME?
• Goals, rules, challenges, and interactions.
![Page 27: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/27.jpg)
WHAT IS A GAME?
• Goals, rules, challenges, and interactions.
• “A series of meaningful choices.” - Sid Meier
![Page 28: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/28.jpg)
WHAT IS A GAME?
• Goals, rules, challenges, and interactions.
• “A series of meaningful choices.” - Sid Meier
![Page 29: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/29.jpg)
WHAT IS A GAME?
• Goals, rules, challenges, and interactions.
• “A series of meaningful choices.” - Sid Meier
![Page 30: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/30.jpg)
WHAT IS A GAME?
• Goals, rules, challenges, and interactions.
• “A series of meaningful choices.” - Sid Meier
• Iconic depictions of patterns in the world.
![Page 31: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/31.jpg)
STAGES OF PATTERNHOOD
![Page 32: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/32.jpg)
STAGES OF PATTERNHOOD
• NOISE
![Page 33: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/33.jpg)
STAGES OF PATTERNHOOD
• NOISE
![Page 34: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/34.jpg)
STAGES OF PATTERNHOOD
• NOISE
![Page 35: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/35.jpg)
STAGES OF PATTERNHOOD
• NOISE
• Learning
![Page 36: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/36.jpg)
STAGES OF PATTERNHOOD
• NOISE
• Learning
![Page 37: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/37.jpg)
STAGES OF PATTERNHOOD
• NOISE
• Learning
![Page 38: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/38.jpg)
STAGES OF PATTERNHOOD
• NOISE
• Learning
• Mastery
![Page 39: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/39.jpg)
STAGES OF PATTERNHOOD
• NOISE
• Learning
• Mastery
![Page 40: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/40.jpg)
STAGES OF PATTERNHOOD
• NOISE
• Learning
• Mastery
![Page 41: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/41.jpg)
STAGES OF PATTERNHOOD
• NOISE
• Learning
• Mastery
• Comfort / Boredom
![Page 42: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/42.jpg)
STAGES OF PATTERNHOOD
• NOISE
• Learning
• Mastery
• Comfort / Boredom
![Page 43: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/43.jpg)
SPATIAL / COLOR
![Page 44: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/44.jpg)
SPATIAL / COLORBlue always makes you win!
-or- Always go to the left!
![Page 45: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/45.jpg)
PHYSICS / TIMING
![Page 46: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/46.jpg)
PHYSICS / TIMINGButton-smashing!
![Page 47: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/47.jpg)
LIFE / DEATH
![Page 48: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/48.jpg)
LIFE / DEATH
Infinite lives, no consequences!
![Page 49: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/49.jpg)
WARFARE
![Page 50: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/50.jpg)
WARFARE
Play as the “Good Guys” to win!
![Page 51: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/51.jpg)
REWARDS
![Page 52: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/52.jpg)
REWARDSAwkward “Gamification"
- or - Manipulation / Social Referencing
![Page 53: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/53.jpg)
SOCIAL STATUS / ROLES
![Page 54: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/54.jpg)
SOCIAL STATUS / ROLES“Save the princess”
- or - Reinforcing stereotypes
![Page 55: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/55.jpg)
EXAMPLES OF PATTERNSType 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
![Page 56: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/56.jpg)
YOUR APP:
![Page 57: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/57.jpg)
YOUR APP:• At first, it is just NOISE
![Page 58: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/58.jpg)
YOUR APP:• At first, it is just NOISE
• Use design patterns
![Page 59: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/59.jpg)
YOUR APP:• At first, it is just NOISE
• Use design patterns
• Reflect real-world patterns
![Page 60: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/60.jpg)
YOUR APP:• At first, it is just NOISE
• Use design patterns
• Reflect real-world patterns
• Introduce your new patterns
![Page 61: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/61.jpg)
YOUR APP:• At first, it is just NOISE
• Use design patterns
• Reflect real-world patterns
• Introduce your new patterns
• Avoid comfort / boredom
![Page 62: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/62.jpg)
IS YOUR APP TIC-TAC-TOE?
![Page 63: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/63.jpg)
IS YOUR APP TIC-TAC-TOE?
![Page 64: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/64.jpg)
QUESTIONS TO ASK
![Page 65: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/65.jpg)
QUESTIONS TO ASK
• What patterns does my app have?
![Page 66: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/66.jpg)
QUESTIONS TO ASK
• What patterns does my app have?
• At what stage are they presented?
![Page 67: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/67.jpg)
QUESTIONS TO ASK
• What patterns does my app have?
• At what stage are they presented?
• Are they presented responsibly?
![Page 68: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/68.jpg)
QUESTIONS TO 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?
![Page 69: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/69.jpg)
BUDDING GAME ENVIRONMENTS
![Page 70: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/70.jpg)
BUDDING GAME ENVIRONMENTS
• Game Center and Google Play Game Services
![Page 71: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/71.jpg)
BUDDING GAME ENVIRONMENTS
• Game Center and Google Play Game Services
• Leaderboards
![Page 72: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/72.jpg)
BUDDING GAME ENVIRONMENTS
• Game Center and Google Play Game Services
• Leaderboards
• Achievements
![Page 73: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/73.jpg)
BUDDING GAME ENVIRONMENTS
• Game Center and Google Play Game Services
• Leaderboards
• Achievements
• Matchmaking
![Page 74: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/74.jpg)
BUDDING GAME ENVIRONMENTS
• Game Center and Google Play Game Services
• Leaderboards
• Achievements
• Matchmaking
• What should be added?
![Page 75: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/75.jpg)
SPRITE KIT
![Page 76: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/76.jpg)
SPRITE KIT• Apple Framework for iOS 7+ and OS X 10.9+
![Page 77: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/77.jpg)
SPRITE KIT• Apple Framework for iOS 7+ and OS X 10.9+
• Introduced at WWDC 2013
![Page 78: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/78.jpg)
SPRITE KIT• Apple Framework for iOS 7+ and OS X 10.9+
• Introduced at WWDC 2013
• Integrated into Xcode 5
![Page 79: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/79.jpg)
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
![Page 80: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/80.jpg)
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
![Page 81: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/81.jpg)
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
![Page 82: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/82.jpg)
WHAT IS A SPRITE?
![Page 83: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/83.jpg)
WHAT IS A SPRITE?
![Page 84: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/84.jpg)
WHAT IS A SPRITE?
• An image or animation integrated into a larger scene
![Page 85: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/85.jpg)
WHAT IS A SPRITE?
• An image or animation integrated into a larger scene
• Characters
![Page 86: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/86.jpg)
WHAT IS A SPRITE?
• An image or animation integrated into a larger scene
• Characters
• Other moving objects
![Page 87: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/87.jpg)
NODES
![Page 88: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/88.jpg)
NODES
• BTW, everything has an SK in front of it
![Page 89: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/89.jpg)
NODES
• BTW, everything has an SK in front of it
• SKNodes have parent-child relationships
![Page 90: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/90.jpg)
NODES
• BTW, everything has an SK in front of it
• SKNodes have parent-child relationships
![Page 91: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/91.jpg)
THE SNOWY PLANET BATTLE MENU
![Page 92: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/92.jpg)
THE SNOWY PLANET BATTLE MENU
• Snowfall in the background
![Page 93: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/93.jpg)
THE SNOWY PLANET BATTLE MENU
• Snowfall in the background
• Snow buildup on the buttons
![Page 94: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/94.jpg)
THE SNOWY PLANET BATTLE MENU
• Snowfall in the background
• Snow buildup on the buttons
• A floating title (with orbiting lasers)
![Page 95: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/95.jpg)
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
![Page 96: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/96.jpg)
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
![Page 97: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/97.jpg)
FIRST THINGS FIRST
![Page 98: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/98.jpg)
FIRST THINGS FIRST
• Import SpriteKit into your Xcode project
![Page 99: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/99.jpg)
FIRST THINGS FIRST
• Import SpriteKit into your Xcode project
• Create an SKView
![Page 100: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/100.jpg)
FIRST THINGS FIRST
• Import SpriteKit into your Xcode project
• Create an SKView
• Have that SKView present a custom-made subclass of SKScene
![Page 101: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/101.jpg)
FIRST THINGS 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
![Page 102: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/102.jpg)
SNOWFALL
![Page 103: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/103.jpg)
SNOWFALL
• SKEmitterNode
![Page 104: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/104.jpg)
SNOWFALL
• SKEmitterNode
• automatically creates small sprites
![Page 105: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/105.jpg)
SNOWFALL
• SKEmitterNode
• automatically creates small sprites
• created and edited in Xcode 5
![Page 106: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/106.jpg)
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
![Page 107: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/107.jpg)
SNOWFLAKE SPRITES
![Page 108: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/108.jpg)
SNOWFLAKE SPRITES
• To make each snowflake:
![Page 109: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/109.jpg)
SNOWFLAKE SPRITES
• To make each snowflake:
• Create a new SKSpriteNode with a horizontally-random starting position
![Page 110: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/110.jpg)
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
![Page 111: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/111.jpg)
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
![Page 112: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/112.jpg)
THE FLOATING TITLE
![Page 113: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/113.jpg)
THE FLOATING TITLE
• Create an SKLabelNode with text, font, etc.
![Page 114: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/114.jpg)
THE FLOATING TITLE
• Create an SKLabelNode with text, font, etc.
• Create a forever-repeating SKAction to float
![Page 115: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/115.jpg)
THE FLOATING TITLE
• Create an SKLabelNode with text, font, etc.
• Create a forever-repeating SKAction to float
• Assign it an SKPhysicsBody
![Page 116: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/116.jpg)
THE FLOATING TITLE
• Create an SKLabelNode with text, font, etc.
• Create a forever-repeating SKAction to float
• Assign it an SKPhysicsBody
• But turn off the dynamic boolean
![Page 117: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/117.jpg)
ADD LASERS!
![Page 118: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/118.jpg)
ADD LASERS!
• Create SKSpriteNodes
![Page 119: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/119.jpg)
ADD LASERS!
• Create SKSpriteNodes
• Create + Assign flash and orbit SKActions
![Page 120: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/120.jpg)
ADD LASERS!
• Create SKSpriteNodes
• Create + Assign flash and orbit SKActions
• Positions are automatically relative to their parent
![Page 121: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/121.jpg)
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
![Page 122: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/122.jpg)
CHOOSING A MENU OPTION
![Page 123: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/123.jpg)
CHOOSING A MENU OPTION• Add plain old UIButtons
![Page 124: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/124.jpg)
CHOOSING A MENU OPTION• Add plain old UIButtons
• Also add non-dynamic SKNodes for snow to accumulate
![Page 125: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/125.jpg)
CHOOSING A MENU OPTION• Add plain old UIButtons
• Also add non-dynamic SKNodes for snow to accumulate
• When pressed:
![Page 126: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/126.jpg)
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
![Page 127: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/127.jpg)
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
![Page 128: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/128.jpg)
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
![Page 129: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/129.jpg)
EXPLODE THE BUTTON
![Page 130: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/130.jpg)
EXPLODE THE BUTTON• SKActions can execute completion blocks
![Page 131: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/131.jpg)
EXPLODE THE BUTTON• SKActions can execute completion blocks
• So once lasers hit, remove button and add another SKEmitterNode
![Page 132: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/132.jpg)
EXPLODE THE 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
![Page 133: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/133.jpg)
EXPLODE THE 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
![Page 134: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/134.jpg)
FRAME RATE
![Page 135: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/135.jpg)
CHECK YOUR FRAME RATE
![Page 136: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/136.jpg)
CHECK YOUR FRAME RATE
• Show on-screen using SKView’s showFPS property
![Page 137: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/137.jpg)
CHECK YOUR FRAME RATE
• Show on-screen using SKView’s showFPS property
• Debug Navigator in Xcode
![Page 138: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/138.jpg)
CHECK YOUR FRAME RATE
• Show on-screen using SKView’s showFPS property
• Debug Navigator in Xcode
![Page 139: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/139.jpg)
CHECK YOUR FRAME RATE
• Show on-screen using SKView’s showFPS property
• Debug Navigator in Xcode
• Profile using Instruments
![Page 140: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/140.jpg)
CHECK YOUR FRAME RATE
• Show on-screen using SKView’s showFPS property
• Debug Navigator in Xcode
• Profile using Instruments
• Core Animation preset will work
![Page 141: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/141.jpg)
TO LEAVE WITH…
![Page 142: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/142.jpg)
TO LEAVE WITH…
• There is a lot of exciting research going on around games and learning.
![Page 143: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/143.jpg)
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
![Page 144: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/144.jpg)
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!
![Page 145: Your App Is Actually A Game @ Snow*Mobile 2014](https://reader038.vdocuments.mx/reader038/viewer/2022110306/554bd610b4c905ac708b4f34/html5/thumbnails/145.jpg)
THANK YOU
• @matt_luedke
• mattluedke.com
• github.com/mluedke2/snowy-planet-battle-menu