Upload
matt-luedke
View
572
Download
1
Embed Size (px)
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.
Citation preview
YOUR APP IS ACTUALLY A
GAMESnow*Mobile 2014
YOUR APP IS ACTUALLY A
GAMESnow*Mobile 2014
SOME GUY WITH A MICROPHONE
SOME GUY WITH A MICROPHONE
• An iOS / Android engineer
SOME GUY WITH A MICROPHONE
• An iOS / Android engineer
• Only a hobbyist game developer or designer
WHAT IS THIS ABOUT?
WHAT IS THIS ABOUT?
• A list of important questions, with context
WHAT IS THIS ABOUT?
• A list of important questions, with context
• A challenge for future apps
WHAT IS THIS ABOUT?
• A list of important questions, with context
• A challenge for future apps
• An example with a top current game engine
FOR THE BUSINESS FOLKS
FOR THE BUSINESS FOLKS• From Distimo’s Report for 2013:
FOR THE BUSINESS FOLKS• From Distimo’s Report for 2013:
• “The vast majority of mobile app revenue was generated in the Games category.”
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.
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
WHAT IS NOT A GAME?
WHAT IS NOT A GAME?• “You win or you die.”
WHAT IS NOT A GAME?• “You win or you die.”
WHAT IS NOT A GAME?• “You win or you die.”
WHAT IS NOT A GAME?• “You win or you die.”
• “Everything in life!” - my mother, often as I was growing up.
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.”
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.”
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.
WHAT IS A GAME?
WHAT IS A GAME?
• Goals, rules, challenges, and interactions.
WHAT IS A GAME?
• Goals, rules, challenges, and interactions.
WHAT IS A GAME?
• Goals, rules, challenges, and interactions.
WHAT IS A GAME?
• Goals, rules, challenges, and interactions.
• “A series of meaningful choices.” - Sid Meier
WHAT IS A GAME?
• Goals, rules, challenges, and interactions.
• “A series of meaningful choices.” - Sid Meier
WHAT IS A GAME?
• Goals, rules, challenges, and interactions.
• “A series of meaningful choices.” - Sid Meier
WHAT IS A GAME?
• Goals, rules, challenges, and interactions.
• “A series of meaningful choices.” - Sid Meier
• Iconic depictions of patterns in the world.
STAGES OF PATTERNHOOD
STAGES OF PATTERNHOOD
• NOISE
STAGES OF PATTERNHOOD
• NOISE
STAGES OF PATTERNHOOD
• NOISE
STAGES OF PATTERNHOOD
• NOISE
• Learning
STAGES OF PATTERNHOOD
• NOISE
• Learning
STAGES OF PATTERNHOOD
• NOISE
• Learning
STAGES OF PATTERNHOOD
• NOISE
• Learning
• Mastery
STAGES OF PATTERNHOOD
• NOISE
• Learning
• Mastery
STAGES OF PATTERNHOOD
• NOISE
• Learning
• Mastery
STAGES OF PATTERNHOOD
• NOISE
• Learning
• Mastery
• Comfort / Boredom
STAGES OF PATTERNHOOD
• NOISE
• Learning
• Mastery
• Comfort / Boredom
SPATIAL / COLOR
SPATIAL / COLORBlue always makes you win!
-or- Always go to the left!
PHYSICS / TIMING
PHYSICS / TIMINGButton-smashing!
LIFE / DEATH
LIFE / DEATH
Infinite lives, no consequences!
WARFARE
WARFARE
Play as the “Good Guys” to win!
REWARDS
REWARDSAwkward “Gamification"
- or - Manipulation / Social Referencing
SOCIAL STATUS / ROLES
SOCIAL STATUS / ROLES“Save the princess”
- or - Reinforcing stereotypes
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
YOUR APP:
YOUR APP:• At first, it is just NOISE
YOUR APP:• At first, it is just NOISE
• Use design patterns
YOUR APP:• At first, it is just NOISE
• Use design patterns
• Reflect real-world patterns
YOUR APP:• At first, it is just NOISE
• Use design patterns
• Reflect real-world patterns
• Introduce your new patterns
YOUR APP:• At first, it is just NOISE
• Use design patterns
• Reflect real-world patterns
• Introduce your new patterns
• Avoid comfort / boredom
IS YOUR APP TIC-TAC-TOE?
IS YOUR APP TIC-TAC-TOE?
QUESTIONS TO ASK
QUESTIONS TO ASK
• What patterns does my app have?
QUESTIONS TO ASK
• What patterns does my app have?
• At what stage are they presented?
QUESTIONS TO ASK
• What patterns does my app have?
• At what stage are they presented?
• Are they presented responsibly?
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?
BUDDING GAME ENVIRONMENTS
BUDDING GAME ENVIRONMENTS
• Game Center and Google Play Game Services
BUDDING GAME ENVIRONMENTS
• Game Center and Google Play Game Services
• Leaderboards
BUDDING GAME ENVIRONMENTS
• Game Center and Google Play Game Services
• Leaderboards
• Achievements
BUDDING GAME ENVIRONMENTS
• Game Center and Google Play Game Services
• Leaderboards
• Achievements
• Matchmaking
BUDDING GAME ENVIRONMENTS
• Game Center and Google Play Game Services
• Leaderboards
• Achievements
• Matchmaking
• What should be added?
SPRITE KIT
SPRITE KIT• Apple Framework for iOS 7+ and OS X 10.9+
SPRITE KIT• Apple Framework for iOS 7+ and OS X 10.9+
• Introduced at WWDC 2013
SPRITE KIT• Apple Framework for iOS 7+ and OS X 10.9+
• Introduced at WWDC 2013
• Integrated into Xcode 5
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
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
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
WHAT IS A SPRITE?
WHAT IS A SPRITE?
WHAT IS A SPRITE?
• An image or animation integrated into a larger scene
WHAT IS A SPRITE?
• An image or animation integrated into a larger scene
• Characters
WHAT IS A SPRITE?
• An image or animation integrated into a larger scene
• Characters
• Other moving objects
NODES
NODES
• BTW, everything has an SK in front of it
NODES
• BTW, everything has an SK in front of it
• SKNodes have parent-child relationships
NODES
• BTW, everything has an SK in front of it
• SKNodes have parent-child relationships
THE SNOWY PLANET BATTLE MENU
THE SNOWY PLANET BATTLE MENU
• Snowfall in the background
THE SNOWY PLANET BATTLE MENU
• Snowfall in the background
• Snow buildup on the buttons
THE SNOWY PLANET BATTLE MENU
• Snowfall in the background
• Snow buildup on the buttons
• A floating title (with orbiting lasers)
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
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
FIRST THINGS FIRST
FIRST THINGS FIRST
• Import SpriteKit into your Xcode project
FIRST THINGS FIRST
• Import SpriteKit into your Xcode project
• Create an SKView
FIRST THINGS FIRST
• Import SpriteKit into your Xcode project
• Create an SKView
• Have that SKView present a custom-made subclass of SKScene
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
SNOWFALL
SNOWFALL
• SKEmitterNode
SNOWFALL
• SKEmitterNode
• automatically creates small sprites
SNOWFALL
• SKEmitterNode
• automatically creates small sprites
• created and edited in Xcode 5
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
SNOWFLAKE SPRITES
SNOWFLAKE SPRITES
• To make each snowflake:
SNOWFLAKE SPRITES
• To make each snowflake:
• Create a new SKSpriteNode with a horizontally-random starting position
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
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
THE FLOATING TITLE
THE FLOATING TITLE
• Create an SKLabelNode with text, font, etc.
THE FLOATING TITLE
• Create an SKLabelNode with text, font, etc.
• Create a forever-repeating SKAction to float
THE FLOATING TITLE
• Create an SKLabelNode with text, font, etc.
• Create a forever-repeating SKAction to float
• Assign it an SKPhysicsBody
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
ADD LASERS!
ADD LASERS!
• Create SKSpriteNodes
ADD LASERS!
• Create SKSpriteNodes
• Create + Assign flash and orbit SKActions
ADD LASERS!
• Create SKSpriteNodes
• Create + Assign flash and orbit SKActions
• Positions are automatically relative to their parent
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
CHOOSING A MENU OPTION
CHOOSING A MENU OPTION• Add plain old UIButtons
CHOOSING A MENU OPTION• Add plain old UIButtons
• Also add non-dynamic SKNodes for snow to accumulate
CHOOSING A MENU OPTION• Add plain old UIButtons
• Also add non-dynamic SKNodes for snow to accumulate
• When pressed:
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
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
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
EXPLODE THE BUTTON
EXPLODE THE BUTTON• SKActions can execute completion blocks
EXPLODE THE BUTTON• SKActions can execute completion blocks
• So once lasers hit, remove button and add another SKEmitterNode
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
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
FRAME RATE
CHECK YOUR FRAME RATE
CHECK YOUR FRAME RATE
• Show on-screen using SKView’s showFPS property
CHECK YOUR FRAME RATE
• Show on-screen using SKView’s showFPS property
• Debug Navigator in Xcode
CHECK YOUR FRAME RATE
• Show on-screen using SKView’s showFPS property
• Debug Navigator in Xcode
CHECK YOUR FRAME RATE
• Show on-screen using SKView’s showFPS property
• Debug Navigator in Xcode
• Profile using Instruments
CHECK YOUR FRAME RATE
• Show on-screen using SKView’s showFPS property
• Debug Navigator in Xcode
• Profile using Instruments
• Core Animation preset will work
TO LEAVE WITH…
TO LEAVE WITH…
• There is a lot of exciting research going on around games and learning.
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
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!
THANK YOU
• @matt_luedke
• mattluedke.com
• github.com/mluedke2/snowy-planet-battle-menu