Mobile games

Mobile Games
Thomas Grill
mailto:thomas.grill@sbg.ac.at
12.04.2012

Human Computer Interaction & Usability Unit
Mittwoch, 18. April 12

http://icts.sbg.ac.at

● Introduction
• Games

- mobile Games

What is it?
 Type of Games


• Designing

Mobile Games

From the idea to the design
 Tools and Methods
 Mobile Game Patterns


• Game

Development

Frameworks
 Resources
 Development ...


● - Topic 1 - Topic 2 - Topic 3 - Topic 4 - Topic 5

2 / XX

● Course Outline
• Dates
• Lecture

10.00 - 12.00

19.04.2012 Games, Game Design, Tools & Methods
 26.04.2012 Tools & Methods, Game Development
 10.05.2012 Game Development: Frameworks, Platforms, etc.


• Seminar


12.00 - 13.00

Groups of 3-5 will develop a mobile game prototype


3 / XX

Mobile Games

let’s start playing ...
●

4 / XX

1

Mobile Games
•A

Mobile Game is a combination of
Game concepts and design techniques
 Computer graphics & OpenGL Basics
 Game algorithms and programming


• True

for all platforms

PC, consoles, handhelds, mobile phones
 Game concepts are applicable to all platforms
 Resources are limited for mobile devices
 Interaction capabilities are different for mobile devices


● - Mobile Games - Design - Development

5 / XX

1

Definition: Games
• Common

Games

Voluntary activity
 Spatially and temporally limited
 Voluntary but stringent rules
 Thrill, amusement and joy


• Computer


Games

Interaction
• Voluntary activity
• Game architecture

• Fun
Thrill, amusement and joy
 Game concepts and design techniques



6 / XX

1

Definition: Games
A game is structured playing, usually undertaken for enjoyment and
sometimes used as an educational tool.
Games are distinct from work, which is usually carried out for
remuneration.
Key components of games are goals, rules, challenge, and interaction.
Games generally involve mental and/or physical stimulation.


7 / XX

1

Interactive Application
• Interaction


= Communication

Bi-directional exchange of information

• Interactive

applications

Word processing
 Spread sheets
 Chats
 Games


• Interaction

Context

Real world
 Virtual, augmented
 Mobile
 Mixed

Environment
Machine Display
Component

Machine CPU
Component

Human Sensory
Component

Human Factors
Interaction Model

Human Cognitive
Component




Machine Input Device
Component

Automated/Machine System

Human Musculoskeletal
Component

Human System
D. Meister, Human Factors: Theory and Practice, 1971

8 / XX

1

Interactive Application
• Interaction


= Communication

Bi-directional exchange of information

• Interactive

applications

Word processing
 Spread sheets
 Chats
 Games


• Interaction

Context

Real world
 Virtual, augmented
 Mobile
 Mixed

Interface
Mouse, Keyboard,
Controller, Mobile
Device, ...

Computer

Human




Feedback
Audio, Video, Force
Feedback (tactile), ...

8 / XX

1

Interactive Games
• Interaction

in Games

One or more people
 are using interaction controllers (devices, joystick, keys, touch screens, etc.)
 to perform an activity
 and to receive feedback (visual, haptic, tactile, etc.)



9 / XX

1

Games Classification
• Game

Genres

Adventure
 Simulation
 RPG (Role Playing Game)
 Puzzle and Mind Games
 Racing Games
 Sports Games




Strategy Games
• Skill and action games
• Tower Defense Games



...


10 / XX

1

Game Platform
• Platforms
Arcade game
 Console game
 Handheld video game
 Massively multiplayer online game (MMOG)
 Mobile game
 Online game
 Personal computer game



11 / XX

1

Games Classification
• Mechanism

and Interface

First-Person Shooter
 Third-Person Shooter
 Jump’n’Run


• Time

Shaping

Turn-based (Final Fantasy, Heroes of Might and Magic, etc.)
 Realtime (Call of Duty, Command & Conquer, etc.)


• Online


/ Offline

Online gaming refers to playing the game over the network using a
personal computer, a game console, a PDA, or a smart phone.


12 / XX

1

Real-time in Games
•

Real-time vs. model-time
Real-time
• Time that is required for actions and events in reality
 Model-time
• Time that is administrated by software


•

Interactive real-time application
Real-time equates to model time in software
 Real-time refers to “without time lags”
• Smooth movement in games
• 25 to 60 fps
 Real-time constraint in software
• Hard vs. soft real-time
• Ensure that a system reacts to user inputs within a certain period of time
• Operational deadlines from event to system response



13 / XX

1

Real-time in Games
• Hardware

limited

Monitor frame rate
60Hz for common flat screens
 Network connectivity
 CPU power


• Game


Elements

Game state
• Oriented on monitor frame rate (60 fps)

• Individual

for different components

Physics (120 fps)
 AI (20 fps)


• Scalable

according to hardware

Poor hardware results in time lags
 Games can be seen as soft real-time systems



14 / XX

1

Game Requirements
• Interaction
User Input
 Feedback (Audiovisual, tactile, etc.)


• Functional

Features

Status administration
• Prologue, menu, game state, epilogue, etc.
 Resource management
• Graphics, models, fonts, sound effects, level data, etc.
 Persistence
• Configuration, save games, high scores, etc.



15 / XX

1

Mobile Games - Constraints
• Mobile

Devices

Operating System
 Screen Size
 CPU, GPU, Memory, etc.
 Interaction capabilities
• Touch Screen
• Acceleration sensors
• Light sensors
• restricted availability of game controllers
 Communication capabilities
• limited bandwidth
• connection losses, interrupts, ...
 Interaction Context
• Interaction in public, overcoming waiting times, communication vs.
gaming, real world vs. virtual (device) world, ...



16 / XX

Designing Mobile Games

...
●

17 / XX

2

Game Design
• Key

Components

Rules
 Challenge
 Interaction



18 / XX

2

The Storyline
• Classical

Drama Pattern

The journey of the hero in 3 acts
 Architectural pattern for the development of a play or a film
 Very constant place, time and plot
 Very restrictive pattern elements
• Introduction / Exposition
• Thrilling moment
• Uprising actions
• Climax
• Tragic moment
• Falling plot
• Last tension Catastrophe / Solution



19 / XX

2

The Storyline
• The

Journey

Act I (20-30 min)
• Creation of a character, learning to interact with the environment
• The turning point foreshadows something bad
 Act II (60 min)
• The journey begins
• A series of challenges
• Climax with a positive outcome
• The point of no return
• Bottom, where everything is lost
 Act III (20-30 min)
• Face the evil
• Last stand and victory



20 / XX

2

The Storyline
• Playful

interpretation
• Act I (Departure from the real world)
Buying the game
 Installing the game
 Creating the character


• Act

II (Playing the game)

Solving side and guild quests
 Skilling the character
 Making complex decisions during the main quest


• Act

III (Return into the real world)

Refusal
 Help
 Threshold
 Master of two worlds



21 / XX

2

Gameplay Design
• Game


Related Design

The first 30 minutes
• Tutorials: Introduction to the game controls
• Character creation: Identifying oneself with the avatar
• First quest: Introduction with the game system

• The

first 30 hours

Character development
 Investigation of the environment
 Individual and group development


• The

first 30 days

Strengthen the group structure
 Individual projects (Quests)
 Group projects (Raids)



22 / XX

2

Balancing
• Definition
Players have to perceive the game and results of his own actions as
fair
 No mechanisms to gain superior power without suffering from a
weakness.
 There is no magic formula to provide perfectly balanced gameplay
 Balancing is more an art than a technique
 Game development is in most of the cases independent from game
design
 Measuring fairness in games is difficult


• Goal


Maximize the average faireness throughout the whole systems


23 / XX

2

Balancing
• Tools


Apply design heuristics
• Interpretation by game designers may enhance the fairness
• Expert data is an objective measurement of fairness

• Apply

design metrics

Collect data directly from users
 Players are the real experts
 BUT: Be careful with interpretation of user feedback
 User feedback is subjective rating


• Gameplay

changes

Changes can screw player strategies and result in depression
 Do not provide quick fixes, slow adaption of gameplay is better





24 / XX

2

Game Graphs
• Graph

Theory

Tool to model gameplay
Formal language of game designers Similarities to other disciplines
 Navigation graphs State charts




Examples


25 / XX

2

Game Graphs
• Graph

Theory

Example: Player fights with an enemy
• W ... Player searches or waits for an enemy
• K ... Player fights with an enemy
• G ... Player wins
• V ... Player loses
 Example: Player searches for collectable resources


Mobile Computing

n enemy

waits for an enemy

enemy

r collectable resources


26 / XX

2

Game Graphs
Mobile Computing

Game quest graphs in MMORPGs
Graphs
of

• Examples

Examples of quest graphs in MMORPGs

46


27 / XX

2

Game Graphs
• Graph

Theory

Graphs are complex
 Language of game designers, comparable to UML
 Calculation of some game balance criteria
• Minimal payoff rate: -10 XP in 20 minutes → -30 XP/h
• Maximal payoff rate: 1 XP in 6 minutes → 10 XP/h
• Many more criteria
 Game designers can read the development options of the player
 Games can be modeled using graphs



28 / XX

2

Game Design Patterns
• Analogy


Software Design
• General reusable solution to a commonly occurring problem
• Strategy, structural, execution, ...

• Game

Design

Formal languages and tools
 Esoteric field of research
 Analogous to s/w design patterns
Game rule sets, game instance, game session



29 / XX

2

• Introduction
Vocabulary
• Game reviewers
• Marketing
• Genre sub groups
 Informal and genre specific languages
 Lack of phrases to define inner functionality
 Game Design Patterns
• Methodology to find patterns Catalogues for patterns




[1] Staffan Björk, Jussi Holopainen. Patterns in Game Design (Game Development Series) (Game Development Series). Charles River Media, December 2004.
Game Design Pattern Wiki: http://gdp2.tii.se


30 / XX

2

• Finding


Björk/Davidson
• Workshops
• Analysis of existing games
• Extraction of game design patterns
• Björk (2003): Game Design Patterns
• Davidson(2004): Game Design Patterns for
Mobile Games
 Barwood/Falstein
• Collection of 400 game design (patterns) rules
• Input of the game industry
• http://www.theinspiracy.com/400_project.htm
 Interaction Design Pattern Library for Games
• Patterns focusing on usability/accessibility problems
• http://www.helpyouplay.com/



31 / XX

2

Game Design Patterns -- Examples
• Predictable

Consequence

Problem
• The player has to experience a punishment as a consequence to his
own actions, not as arbitrary or random viciousness of the game.
 Solution
• Punishment strategies – like hurting the player (drain life points) upon
touching certain game objects – must be taken as a consequence to
the players actions immediately. The best way is to use metaphors
from the real world.


• Example
Lava metaphor since Super Mario
 “Explosive” or “Flammable”
marked objects



32 / XX

2

• Configurable

Game-Play Area

Problem
• Developers want to increase the fun in games to motivate players to
play longer
 Solution
• Give players the opportunity to design levels or create mods


• Example
Unreal Tournament
(powerups, weapons, spawn points)
 Command & Conquer (resources, spawn points)
 The Elder Scrolls
(characters, areas, dialogues)
 Crysis
(expansions, models, scripts)



33 / XX

2

• Game

Element Trading

Problem
• Items and elements are not reachable for everyone. Some players
don‘t want to spend so much time. As a consequence gold and item
farms are created, where player trade items for real money or other
services.
 Solution
• Everyone can get rare or unique items if there is a chance of trading




Example
• WoW
• Diablo


34 / XX

2

• Rock-Paper-Scissors

(Tri-ambiguity)

Problem
• Dominant strategies that make player decisions a trivial choice should
be avoided.
 Solution
• Introduce non-transitive relationships within a set of alternatives, as in
the game of paper-rock-scissors.
 Examples
• Character relationships in Dragon Age
• Character classes in Gothic
• Weapon ambiguity in Alice:
Madness Returns



35 / XX

2

• Inaccessible

Areas

Problem
• Some games may look very small at a first glance
 Solution
• Extend levels with hidden or secret areas or areas that are
inaccessible for certain player classes.
 Example
• Gothic II: Guild areas are only accessible for guild members
• Dragon Age I: Different initial chapter for each player class



36 / XX

2

• Privileged

Move

Problem
• Sometimes a given game entity cannot be permitted to interfere with
others, or other entities cannot be permitted to interfere with it.
 Solution
• Introducing exclusive moves and locations separates and protects
game entities. These exclusive moves and locations cannot be entered
or left without being able to perform the respective privileged move. By
introducing different, separate spaces or media, the game environment
is broken down into distinct areas, which can serve e.g. as safe zones
or safe passages.
 Examples
• Rabbids Go Home: Protected Areas
• Half-Life 2: Vehicles only enemy troops could use
• Doom: Monsters could traverse acid pools, but the
player could only at the expense of damage



37 / XX

2

• Social

Rewards

Problem
• Player motivation is low or mini games like collecting items may not
seem interesting at some points.
 Solution
• Provide social rewards and achievements especially for multiplayer
games.


• Example
Call Of Duty
 Counter Strike
 Red Dead Redemption



38 / XX

2

• Interruptibility
Problem
• Some games or levels cannot be finished at once, because completing
a level required too much time.
 Solution
• Provide options to stop and start the game involving manual saving,
quick-saving or auto-saving techniques.
 Examples
• Diablo II: The game is saved on exit
• Gothic III: The game can be saved using
hotkeys
• Alice: Madness Returns:
The game is saved automatically at
a certain level progress





39 / XX

2

• Late

Arriving Players

Problem
• Players want to join online game sessions instantaneously, but this is
not always possible.
 Solutions
• Provide metaphors to join games instantaneously.
 Examples
• Quake and Unreal Tournament (instant join)
• Counterstrike, CoD (round based)
• Duke Nukem (synchronized)



40 / XX

2

• Augmented

Reality

Problem
• Real and virtual world is usually seperated.
There is no interaction.
 Solution
• Integrate AR techniques into games


• Examples
ARQuale
http://wearables.unisa.edu.au/projects/arquake/
 ARTowerDefense
 http://cellagames.com/artd.html
 3DS AR Cards
 http://www.andriasang.com/e/blog/2011/03/10/
big_3ds_ar_cards/



41 / XX

2

• Chat

Forum

Problem
• In some games player can only communicate during active game
sessions. This can be a problem for organizing clan wars or raids.
 Solution
• Provide communication besides the game with some sort of portal or
forum
 Example
• Steam (Valve)
• Batlle.net (Blizzard)



42 / XX

2

• Team

Play

Problem
• Players want to compete with each other. Therefore, joining other
players and combining different skills would provide more strategical
options.
 Solution
• Provide options of creating and joining groups in-game like parties or
clans.
 Example
• Capture the Flag (Counter Strike)
• Team Deathmatch (Quake)
• Raids (WoW)



43 / XX

2

• Extra

Game Information

Problem
• Except for retail versions, games do not come with manuals and many
players just want to start playing without reading a manual.
 Solution
• Provide in-game tutorials or avatars that lead the player through the
first chapter of the game.
 Example
• Call of Duty: Military education as tutorial
• Dark Messiah of Might and Magic: Xana
• Command & Conquer: EVA



44 / XX

2

• Downtime
Problem
• Limited capacities (max. amount of players) or the game concept
results in waiting time causing players to leave the game.
 Solution
• Provide strategies to keep players online.
 Examples
• Counter Strike: Spectator mode
• Command & Conquer: Waiting room



45 / XX

2

• Résumé

A good game has to follow certain guidelines / rules (game
design patterns)
The pattern provides you with guidelines that have to be
interpreted. There is no strict definition of how to apply a
game design patterns.
Pattern catalogues (selection of patterns) have to be
created by multiple persons. Use creative methods like
brainstorming.


46 / XX

2

Game Design Patterns - Mobile

http://procyon.lunarpages.com/~gamed3/docs/Game_Design_Patterns_for_Mobile_Games.pdf


47 / XX

2

Game Design Patterns - Edu

http://g4li.org/wp-content/uploads/2009/12/1_Game-Design-Patterns.pdf


48 / XX

2

Creative and other methods ...
• Brainstorming


Pull out your thoughts ...

• Roomstorming


Play your ideas ...

• Creativity


Cards

http://www.amazon.com/
Creative-Whack-Pack-RogerOech/dp/0880793589

http://www.tabletopics.com/
idea_cards

... if you’re stucked

• Flowchart
• Sketching
• Prototyping
• Storyboarding
• ...


David Perry on Game Design:
A Brainstorming Toolbox Game Worlds

49 / XX

2

Game Storyboard

http://marksillustration.files.wordpress.com/2010/05/storyboard3.jpg


50 / XX

2

Game Storyboard
• Shows

a sequence of scenes of the game
• Describes actors, context, actions, interactions, ...
• Describes transitions
based on interactions
 based on dynamic contextual situations


• Steps

to a game storyboard

1.Draw with pencil and paper. Sketch. Detail design will be done later
on the computer
2.Start with designing your characters.
You need them prior to develop your story.
3.Sketch sample action frames for all major plot points. This is where
the storyboard chronicles the actual story of the game. Visually
appealing action must be sketched, but supplemental dialogue or
less intense action can be simply explained with a written sidebar.


51 / XX

2

Game Storyboard
Steps to a game storyboard
(1) Draw with pencil and paper. Sketch. Detail design will be done later
on the computer
(2) Start with designing your characters.
You need them prior to develop your story.
(3) Sketch sample action frames for all major plot points. This is where
the storyboard chronicles the actual story of the game. Visually
appealing action must be sketched, but supplemental dialogue or less
intense action can be simply explained with a written sidebar.
(4) Use the written sidebar explained in Step 4 for explanation of virtual
camera angles, special sound effects and other non-visual cues.
(5) Design rudimentary versions of key characters and scenes with a
computer graphics program to supplement your hand-drawn action
frames. Sketches are the best way to start, but you also need a brief
sample of the in-game design to complete any storyboard package.


52 / XX

2

Game Storyboard

http://www.finegamedesign.com/script/index.html


53 / XX

Sketching
• Game

u
w
e
a
s
o
s
u
w
t
c
i
m
c
d
t
o
l
w
m
D
m
a

Game Sketch Team
• Improvisation skills
• Acting skills (storming method ->
play your sketches)

Prototyping MonstroCity: from left to right,
Anders Quist, Leif Ryd, and Anders Mårtensson.
Below, a MultiMonsterMania monster.

interactions



Sketching

November + December 2008

2

f
t
t
(
c
t

10



Sketching Technology
• Paper & Pencil
• Computer programs



The game script
• Sketching characters
• Sketching the game world
• Sketching interactions

http://delivery.acm.org/10.1145/1310000/1306829/p36-agustin.pdf


54 / XX

2

Sketching


55 / XX

2

Brainstorming
• The

world

What constitutes a world? In game terms, it is the entire environment
in which players have their experiences.
 Consists of:
• terrain, rules, NPCs, flora, political and environmental systems, value
systems (money, power, trust, life and death, etc...), culture


• The

characters

character descriptions, goals, moods, hobbies, physical capabilities
and expressions, gender, etc.
 character abilities: physical abilities, magic, superhero abilities, etc.


• Character

roles

player vs. actor
 friends - enemies


• Speech


Dialogs, Buzzwords, speech patterns, interactive conversations, ...


56 / XX

2

Focusgroups in Game Design
•

Focus groups help game designers getting a better sense of how
consumers feel about various aspects of a game

•

Focus groups typically comprise 6-12 consumers from a particular group
(e.g., people who play racing games).
Several such consumers meet together to discuss topics that the game
design team is interested in, such as what features in the game are
important to the consumers and what they think of various design concepts.
Story boards that describe the game’s premise or the game’s design
mechanics sometimes accompany the discussion.

•

•
•

•
•

Focus groups can be useful for concept generation in the initial stages of a
project or for obtaining a better general understanding of a problem space
in some circumstances.
However, they are poor at providing specific, actionable data that help game
designers make their games better for several reasons.
Focus groups are also susceptible to a host of group pressures that impact
the quality of the information they yield.


57 / XX

2

Game Flowcharts
• Define

the game flow
• Simple, structured
• known tool for software engineers
• Tools
Visio
 Omnigraffle
 EDraw, Dia, ConceptDraw, SmartDraw
 Online tools (see http://www.chadcreates.com/7-flowchart-tools/)



58 / XX

2

Game Flowcharts


59 / XX

2

What makes a great game ...


60 / XX

2


Marketing
Blogs
Building Hype
Promotional
Social
Community
Publisher

Gameplay
Originality
Fun
Intuitive
Mechanic
Character
Competition


60 / XX

2


Marketing
Blogs
Building Hype
Promotional
Social
Community
Publisher

Gameplay
Originality
Fun
Intuitive
Mechanic
Character
Competition


Story
Appeal
Design
Sound
Updates
Feedback
Types of Game
Rewards

60 / XX

2

Us (ability/er experience)
• Behavioral

Psychology

How do test participants react to specific scenarios?
 How does the test person learn, act, react, make errors, etc. ?
 Behavioral psychology uses experiments with a game-like alter ego
 Consequence
• Applicable to game design


• Game

Design

Application of behavioral psychology on game design itself
 The player as central element
 Psychological view
• How are game rules treated?
• How does the player react?
• How does the player behave?



61 / XX

2

• Approach
Experiments
• Test and observe player reactions
 Documentation
• Behavioral patterns during the test
 Application
• Apply behavioral patterns to game design




Example: Player Motivation
• Motivation to continue to play the game (addiction)
• Game activity is very strongly connected to motivation
• Depends on the given game rewards


62 / XX

2

• Practical

Examples for Rewards

Jump‘n‘Run: Power-ups for defeating enemies
 FPS: New weapons, armor upgrades, new enemy types
 RPG: Gaining XP to reach new level, XP leads to new skills


• Rules

in Games

Different rule systems for rewards lead to different behavioural
patterns
 Reward strategies
• Ratio / Interval
• Fixed / Variable
• Hybrid models



63 / XX

2

• Ratio
The player receives a reward after completing a specific number of
game actions
• Super Mario: 1-UP for 100 coins
• Battlefield 2: Weapon unlock after reaching a number of kills
 Interval
• The player receives the reward after a specific time period


•
•

Quake: Weapon spawning
Super Mario Galaxy: Bonus stars during comet


64 / XX

2

• Fixed
Predefined value that has to be reached for a reward
 The player adopts to the value quickly
 Generates motivation peaks


• Variable
Variably defined value that has to be reached for a reward
 Mostly randomly generated numbers with limits
• Exact values cannot be identified by players
• Only average and limits can be determined
 Generates smoother motivation curves


•


65 / XX

2

• Fixed

Ratio
Behavioural Psychology
 The player gets the rewards after a fixed number of game actions


Mobile Computing

Behavioral pattern
Fixed Ratio
The player gets the pause
• Long motivation rewards after a fixed number of game actions
Behavioural pattern
• Short motivation peak
Long motivation pause
Short motivation peak
•

53


66 / XX

2

• Fixed

Interval
 The player gets the reward after a fixed time span


Mobile Computing

Behavioral pattern
Fixed Interval
• Already shorter motivational pause
The player gets the reward after a fixed time span
Behavioural pattern
• Relatively high motivational peak
Already shorter motivational pause
Relatively high motivational peak
•

54


67 / XX

2

• Variable

Ratio
 The player gets the reward after a variable number of game actions


Mobile Computing

Behavioral pattern
Variable Ratio
• Short motivation loss at athe end of a of gameratio
The player gets the reward after variable number high actions
Behavioural pattern
• Minimal gain after reaching the reward
Short motivation loss at the end of a high ratio
Minimal gain after reaching the reward

•

55


68 / XX

2

• Variable

Interval
 The player gets the reward after a variable time span


Mobile Computing

Behavioral Interval
Variable pattern
• Evenly distributed because game rewards are independent of game
The player gets the reward after a variable time span
Behavioural
actions pattern
Evenly
• Rewardsdistributed because game rewards are independent of game actions
can occur anytime
Rewards can occur anytime

•

56


69 / XX

2

• Special

Cases

Combination (motivation)
• Combination of more than one rule set is harder to understand for the
player
• The player does not develop a dominant strategy
 Extinction (frustration)
• The rewards stop at a certain moment
• Pigeons get something to eat every 30 minutes, then the reward stops
 Contrast (surprise)
• The quality or quantity of rewards change
• Monkeys get tastier food occasionally
 Avoidance (punishment)
• The player must do something to avoid negative actions
• Rat must press a button to avoid electroshocks


•


http://www.painstation.de/
70 / XX

2

• Résumé
Different rule sets develop different player strategies
 Always think about the game motivation during the design process
• Use design iterations
• Use experiments
• Use paper prototypes
 Use experiments to identify motivational flaws during the game
• Addiction is not only a bad thing :)


•


71 / XX

Game Development

... build it
●

72 / XX

3

Game Components
• Libraries
Package of generic code for nothing in particular
 DevIL (http://openil.sourceforge.net)
 X-platform image library
Loading, manipulating and saving images of different formats


• Framework
Package of code for a particular purpose
 Only provides foundations or structure on which a product can be
developed
 Microsoft XNA (http://msdn.microsoft.com/en-us/aa937791.aspx)
• Combination for programming interfaces
• Direct3D, XACT, XInput
 Cocos2D - OpenGL based engine in Objective C



73 / XX

3

Game Components
• Engine
Package of code designed for the development of a specific style
 Mostly built on top of a framework
 SunBurn (http://www.synapsegaming.com/products/sunburn/engine/)
• Game engine for Windows Phone 7 and XBox
• Based on XNA
 A list of game engines ....


Free / open source
■
Aleph One Away3D Allegro library Axiom Engine Build engine Box2D Cafu Engine Crystal Space Cube Cube 2: Sauerbraten Delta3D Digital Novel Markup Language Dim3
Exult Flexible Isometric Free Engine Flixel FTE QuakeWorld Game Blender Genesis Device Genesis3D GLScene HPL Engine 1 Wolfenstein 3D engine Id Tech 1 Id Tech 2 Id
Tech 3 Id Tech 4 Ioquake3 Irrlicht JMonkey Engine Jogre KiriKiri Lightweight Java Game Library Luxinia Nebula Device OGRE Ogre4j ORX Panda3D Platinum Arts Sandbox
Free 3D Game Maker PixelLight PLIB Open Wonderland Python-Ogre Pygame RealmForge Ren'Py Retribution Engine Spring StepMania Stratagus Thousand Parsec
Ultimate 3D VASSAL Engine Visualization Library Xconq
Proprietary
■
Advance Guard Game Engine Anvil Bork3D C4 Engine CPAGE Chrome Engine Coldstone CRX Creation Engine CryEngine CryEngine 2 CryEngine 3 Crystal Tools
DXFramework Dark Engine Diesel Digital Molecular Matter EGO Electron Elflight Enigma Essence Euphoria Filmation Freescape Frostbite Game Maker Gamebryo Generic
Tile Engine Genie Geo-Mod Gold Box GoldSrc Havok HeroEngine Hybrid Graphics HydroEngine HPL Engine 2 IMUSE INSANE Id Tech 5 id Tech 6 Infinity Engine Iron
Engine IW engine Jade engine Jedi Kaneva Game Platform Kinetica Kynapse LS3D engine Leadwerks Engine Lithtech LyN engine 4A Engine M.U.G.E.N MT Framework
Metismo Mscape MADE NanoFX GE NScripter NxMakaqu Odyssey Engine PathEngine Phoenix Engine (Relic) Phoenix Engine (Wolfire) PhyreEngine Python-Ogre Pie in
the Sky Q Quazal Real Virtuality Refractor Engine RelentENGINE RenderWare Revolution3D Riot Engine RAGE SAGE Scaleform Serious Engine Shark 3D Shoot the Bullet
Silent Storm engine Sith Source Southpaw SpeedTree SunBurn XNA Game Engine Titan Torque TOSHI Trinigy Truevision3D Unigine Unity Unreal Engine Vengeance
Engine Vicious Engine Virtual Theatre Visual3D Game Engine WGAF XnGine X-Ray Engine YETI engine Z-machine ZZT-oop Zero Zillions of Games


74 / XX

3

Game Components
•

Mobile Game Engines
Cocos2D
• Cocos2D is an open source engine (MIT license) available for developing on the
iPhone or Android.
• http://www.cocos2d-iphone.org/
 Corona by Ansca Mobile
• If you’re interested in developing 2D games or graphic software for multiple
platforms, Corona provides a smart choice.
• http://anscamobile.com/
 Unity for iPhone by Unity
• Unity is becoming an increasingly popular engine for both the desktop and the
iPhone.
• http://unity3d.com/
 UNREAL/UDK by Epic Games
• Epic Games has made the UDK (Unreal Developers Kit) a lot more attractive to
Indie developers.
• http://www.udk.com



75 / XX

3

Engine Components


76 / XX

3

Game Loop
• Central


game component

Time has to run continuously
• Real-time constraint

• Game

state has to be updated continuously

User input, player events
 Computer output


• Mechanisms


provider by the OS

Inaccurate for games


77 / XX

3

Game Loop
• Idea
Separation of model data and visual representation
 Update according to time, inputs and events
 Visual representation of model
• According to player’s vision


• Concept


Active rendering vs. Passive rendering
• Central vs. Decentral
• Synchronous vs. Asynchronous

• Time


measurement within game loop

Required for synchronization


78 / XX

3

Game Loop
Clock clock;
Model model;
Renderer renderer;
Long dt;
While (!endOfGame) {
clock.tick();
dt = clock.getElapsedTime();
model.update(dt);
renderer.render(model, dt);
}


79 / XX

3

Model
• Consists

of

Static elements
• Level geometry
 Dynamic elements
• Entities
• Player, NPC, enemies, moveable objects
• Depend on time, user input and events



80 / XX

3

Events
• Definition
Occur only once
 Connected to a certain game state
• Time stamp
 Known source of events
 Position updates, collisions, impact


• Question


Are user inputs events?


81 / XX

3

Updating the Model
• Options
Model + data structure
 Model + entities
 Model + entities + components


• Capsulation
Component based development
• Reusable modules or engines
• Physics, AI, Audio, Graphics
 Level of encapsulation depends on the type of game
• Do I want to develop sequels?
• Do I want to develop for a single or multiple genres?



82 / XX

3

Game Manager
• Singleton
• Controls

the flow of the game

Is responsible for switching the scenes
 Holds states
 Implements game logic




... controls the game


83 / XX

3

Sprites
•A

sprite is a two-dimensional image or animation that is
integrated into a larger scene.
can be one image
 can be a sequence of images that are animated
 are packed in Spritemaps




are held only once in memory


84 / XX

3

Physics
• Acceleration,

Velocity and Position

• Forces
• Game

Physics

Particle System
 Rigid Body Dynamics
 Flexible Body Dynamics


• Collision

Detection


85 / XX

3

Physics
• Position


[r] = m ... meters

• Velocity


v = m/s = m ⇤ s

1

Derivation of position

d
v(t) = r (t) =
⇤ r(t)
dt
0

• Acceleration
2


a = m/s = m ⇤ s

2

Derivation of velocity

d
a(t) = v (t) = v(t)
dt
0



Important: Also negative acceleration is possible


86 / XX

3

Physics
• Force


Force causes acceleration if it is applied for a certain period of time
• Results in change of velocity
• Results in change of position

• How

to apply force?

User event applies pre-defined force
 Can be event based
 Can be continous


• Forces
Can be defined as constants
 Different types of forces
 Different values for different simulation types



87 / XX

3

Physics
• Simulation
Periodic intervals caused by update cyclces
 Updates at 120Hz desireable


• Calculate

the applied force for each object at every
simulation step
Entity.update() ... calculate forces + acceleration
 Entity.move() ... calculate new velocity + position



88 / XX

3

Physics
Forces

Florian Lettner, MSc
Studiengang
Mobile Computng

florian.lettner@fh-hagenberg.at

• Static Friction (Stiction)
Static Friction (Stiction)
Only appliesto stationary objects
Only applies to stationary objects
 Proportional to bearing strength (normal force)
Proportional to bearing strength (normal force)


• µ0

... static friction coefficient
μ0 … static friction coefficient
• µ0 = 0 ... no friction
μ = 0 … no friction
0

FH = µ 0 ⇤ F N

• Normal force on a plane
Normal force on a plane

FN = m ⇤ g
•g

g … gravity (~ 9.81 m/s²)

... gravity (~ 9.81 m/s2)

FH Oberösterreich • Campus Hagenberg • Mobile Computing • Mobile Games


89 / XX

rces

florian.lettner@fh-hagenberg.a

3

Physics
mic Friction

es to moving objects
Dynamic strength
rtional• to bearing Friction (normal force)

Applies to moving objects
 Proportional to bearing strength (normal force)


FGR = µ ⇤ FN

• µ0 ... dynamic friction coefficient
dynamic friction coefficient

ally
• Basically


Dynamic friction opposes the drive force

FH < FGR drive force
mic friction opposes the


90 / XX

3

Particle Systems
• Point


mass

Mass is described by one single point (mass center)

• Involved

Forces

Acceleration
 Velocity
 Position


• Newton‘s

Laws

First law: An object continues with constant velocity unless a force
acts upon it
 Second law: A force acting on an object produces acceleration that is
proportional to the object‘s mass
 Third law: If the force exerted on one object, there is a force with
equal magnitude but opposite direction on some other that interacts
with it.



91 / XX

3

Particle Systems
• Benefits
Easy to implement Good for game FXs
 Attach a billboard on each particle
 A basic feature of a game engine


• Fundamentals
Covers only fundamentals of game physics
 Does not require rotational forces



92 / XX

3

Rigid Body Dynamics
Rigid Body Dynamics

Studiengang
Mobile Computng


• The

Rigid Body
The Rigid Body


Non-deformable body
Non-deformable body
• The distance between two points within a body is constant

• Rigid

The distance between two points within a body is constant

body motion

Kinematics motion
Rigid body
 Dynamics
Kinematics


• Degree of freedom
Dynamics
3 rotations (pitch, roll, yaw)
 3 translations (x, y, z)
Degree of freedom


3 rotations (pitch, roll, yaw)
3 translations (x, y, z)

Design - Development
● - Mobile Games - FH Oberösterreich • Campus Hagenberg • Mobile Computing • Mobile Games

93 / XX

3

Flexible Body Dynamics
• Deformable


Bodies

Applicability
• Cloths
• Flags
• Sand
• Hair
• ...

• Solution

Flexible Body Dynamics

Studiengang
Mobile Computng


Deformable Bodies (cont.)
Using springs
Spring applies returning force that is proportional to ist elongation (Hook‘s law)
Proportion is described with spring constant

FS = -k * x

– [FS] = N … spring force
– [k] = N/m … spring constant
 Particle Spring models (Spring mass model)
– [x] = m … displacement

• Particles simulate the mass and the inertia
• Springs simulate the material
• Particle has translation only

● - Mobile Games - Design - DevelopmentFH Oberösterreich • Campus Hagenberg • Mobile Computing • Mobile Games

94 / XX

3

Cocos2d-x
• Multiplatform


Library

iOS, Android, bada, win32, linux, blackberry tablet OS

• Written

in C++
• based on OpenGL
• http://www.cocos2d-x.org/


95 / XX

3

Cocos2d-x
• Multiplatform


Library

iOS, Android, bada, win32, linux, blackberry tablet OS

• Written

in C++
• based on OpenGL
• http://www.cocos2d-x.org/

If someone is more familiar with
Objective C


95 / XX

3

starting point ...
• Learning

Cocos2D: A Hands-On Guide to
Building iOS Games with Cocos2D,
Box2D, and Chipmunk
 Rod

Strougo
Ray Wenderlich
• http://www.raywenderlich.com/

http://www.pearsonhighered.com/educator/product/Learning-Cocos2D-A-HandsOn-Guide-to-Building-iOS-Games-with-Cocos2D-Box2D-andChipmunk/9780321735621.page


96 / XX

3

Sprites - Spritehelper
• Integrates

with Levelhelper
• Allows to pack sprites
• Allows to add physics properties to
sprites
• Generates

code for integration
with cocos2D
• works with physics (e.g. Box2D,
Corona2D)

Alternative: zwoptex

http://zwopple.com/zwoptex/


97 / XX

3

Level - Levelhelper
• Scene/Level/World
Allows to define worlds
 Integrates with Spritehelper
 Allows to define physics
 Supports friction
 Support parallax scrolling
 Provides animation functionality




Generates code for cocos2d(-x) with Box2D, Chipmunk,
Spacemanager, Corona


98 / XX

3

Physics - Box2d
• Box2D

is a feature rich 2D rigid body physics engine,
written in C++ by Erin Catto

• Physics


as in Levelhelper

Global physics settings
• Physics Boundaries
•

Area where the physics engine interacts

• Gravity
•



defined in x/y direction

Sprite-based physics settings
• Density. Used to compute the mass property of a body.
• Friction. Friction of the boundaries of the object.
• Restitution. Used to make objects bounce.


Example

99 / XX

3

Animations
• Keyframe


animations

Animate images based on
keyframes

Create and load Spritesheet
 Create Animation
 Create AnimateAction
 Run action ...



100/ XX

3

Animations
• Keyframe


animations

Animate images based on
keyframes

Create and load Spritesheet
 Create Animation
 Create AnimateAction
 Run action ...



// create the sprite sheet
!
!
CCSpriteSheet *danceSheet = [CCSpriteSheet spriteSheetWithFile
!
!
[self addChild:danceSheet];

!
!
// create the sprite
!
!
CCSprite *danceSprite = [CCSprite spriteWithTexture:danceSheet
!
!
[danceSheet addChild:danceSprite];

!
!
// position the sprite in the center of the screen
!
!
CGSize s = [[CCDirector sharedDirector] winSize];
!
!
danceSprite.position = ccp(s.width/2,s.height/2);

!
!
// create the animation
!
!
CCAnimation *danceAnimation = [CCAnimation animationWithName:@

!
!
int frameCount = 0;
!
!
for (int y = 0; y < 3; y++) {
!
!
!
for (int x = 0; x < 5; x++) {
!
!
!
!
CCSpriteFrame *frame = [CCSpriteFrame frameWithTextu
offset:ccp(0,0)];
!
!
!
!
[danceAnimation addFrame:frame];

!
!
!
!
frameCount++;

!
!
!
!
if (frameCount == 14)
!
!
!
!
!
break;
!
!
!
}
!
!
}

!
!
// create the action
!
!
CCAnimate *danceAction = [CCAnimate actionWithAnimation:danceA
!
!
CCRepeatForever *repeat = [CCRepeatForever actionWithAction:da

!
!
// run the action
!
!
[danceSprite runAction:repeat];

100/ XX

3

Animations
• Particle

effects

let it snow, burn, rain, ...
 Particle effect can have any
size
 a lot of parameters ...


+(void) createSunX: (float) x y: (float) y inParent:(CCNode *)parentNode inWorld:(b2World *)parentWorld
{

CGPoint location = CGPointMake(x, y);

location = [[CCDirector sharedDirector] convertToGL:location];

}

CGSize winSize = [[CCDirector sharedDirector] winSize];
CCParticleSystem *emitter;
emitter = [[CCParticleSun alloc] init];
emitter.texture = [[CCTextureCache sharedTextureCache] addImage:@"stars.png"];
emitter.position = ccp(location.x, location.y);
emitter.duration = -1;
[parentNode addChild:emitter z:1];


101/ XX

3

Particle Animations
• Particle


Designer

http://particledesigner.71squared.com/

A tool to create particle effects ...
 Can be loaded and used in cocos2D


Example

102/ XX

3

Cocos2d GameManager Example
@protocol GameManager : NSObject {
int currentLevel;
NSMutableArray *stageConfigs;
}
- (id)init;
+ (GameManager *)sharedManager;

singleton

- (void)goToLevel:(int)levelNum;
- (void)goToNextLevel;
@end
@implementation GameManager
...
- (void)goToLevel:(int)levelNum {
StageConfig *config = (StageConfig *)[stageConfigs objectAtIndex:levelNum];
GameScene *scene = [[GameScene alloc] initWithConfig:config];
[[CCDirector sharedDirector] replaceScene:scene];
[scene release];
}
...
@end


control the
workflow

set the
new scene
103/ XX

3

Cocos2D-x “Hello World”


104/ XX

3

Cocos2D References
• Ray


Wenderlich - Cocos2D Tutorials

http://www.raywenderlich.com

• Spritehelper


http://www.spritehelper.org

• Levelhelper


http://www.levelhelper.org


105/ XX

● Thanks to ...
• Florian


Lettner

FH Hagenberg - Game Design for several materials

ontent

Studiengang
Mobile Computng


• Google


for a lot of decorative material

uter Games

nition

• The

gories



c Architecture

Cocos2d community

for developing a cool open source framework for (mobile) game
development


106/ XX

* Contact
HCI & Usability Unit
ICT&S Center, University of Salzburg
Sigmund-Haffner-Gasse 18
5020 Salzburg, Austria
hci-unit@icts.sbg.ac.at

Dr. Thomas Grill
thomas.grill@sbg.ac.at

Human Computer Interaction & Usability Unit

hci-unit@icts.sbg.ac.at

Mobile games

More Related Content

What's hot

Viewers also liked

Similar to Mobile games

More from Thomas Grill

Recently uploaded

Mobile games