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