Mobile Games - Usc

quidnuncoceanΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 10 μήνες)

170 εμφανίσεις

Mobile Games
Mike Sheehan
How do they work?
iOS Games
2
How do they work?

3 L’s
iOS Games
Load
Logic/
Loop
Live
3
cocos2d
cocos2d for iPhone is a framework for building 2D games,
demos, and other graphical/interactive applications
It will help us Load assets (graphics, sounds, etc.), set up
gameplay Logic (the update Loop), and handle user
interactions (touches) while the game is Live.
http://www.cocos2d-iphone.org/about
Aside: While this is for Objective-C, cocos2d is originally for Python
4
cocos2d – Getting it
HERE:
http://www.cocos2d-iphone.org/download

Download the stable version, OS X should un-archive it
“That’s a lot of stuff!” – Don’t worry, we’ll be using a little bit

- Open the README and follow the instructions for

install-templates.sh

(default: navigate to Downloads)


- Now we can start our own game!
If you open the cocos2d iOS Xcode project, you can see
demos

- Don’t start a project from here because there’s a ton of

unnecessary files & code
5
cocos2d – Using it
Start a new basic cocos2d project - Name it TestGame

- Run it ->
Hello World
should appear

- The number in the corner = Frames Per Second
Behind the scenes:
- The base unit of cocos2d is the
CCNode
- The root node is the app itself
- To make a game you add scenes,
layers, sprites, etc. (eg: CCSprite)
- Hello World is a text label
(CCLabelTTF)

Y o u ’ l l g e t t h e n a m e s s o o n
6
cocos2d – Using it
Let’s add a graphic – remember to use png:

- Find your favorite color ninja (not black)

- Add to the resources folder (copy in!)
In the init method, add:
// Gets size of screen in a struct
CGSize winSize = [[CCDirector sharedDirector] winSize];
// Creates a sprite with the file (use your own), and now you have it as a variable (pointer)
CCSprite *player = [CCSprite spriteWithFile:@"Player.png"];
// different positionings: an (x, y) point struct is created

//player.position = ccp(winSize.width/2, winSize.height/2); //play w/this
//player.position = ccp(player.contentSize.width/2, winSize.height/2);
// add the sprite to the layer (becomes a child)
[self addChild:player];


W e a d d e d a n e w n o d e t o t h e t r e e
7
cocos2d – Components
Let’s think more about the graph, scenes, layers, sprites, labels, etc.
Scene: A screen in the game, an independent piece
- Only one is
active at a time
- Is basically a
container for layers
Layer: Contains other nodes and has logic, like Photoshop layers
- D
efine appearance
and behavior
- Parent of labels, sprites,
layers, etc.
- Handle events/input
- Size of the screen
8
cocos2d – Components
Sprite: A graphic in the game
Label: Text, used to display information
All of these things are CCNodes:
Anything thats gets drawn or
contains things that get drawn


- They can do things…

9
cocos2d – Doing things
If the graph is the body, then the CCDirector is the brain
- The CCDirector is a shared (singleton) object.
- You will not work with it much directly, but it does a lot for
you, such as moving parts around
- It handles switching scenes and pausing/resuming
- Hidden in its depths, it’s in charge of performing actions and
updates
Action: Orders given to a CCNode

A l l y o u n e e d t o k n o w i s t h a t t h i n g s h a p p e n
10
This is how we control what things happen
Thanks Sanjay!
cocos2d – Doing things
11
The update loop
// schedule the update for a node, update will be called every frame
-(id) init {

[self scheduleUpdate];
// could add this to our layer
}
//
update your node here, r
eceives delta time as an argument

-(void) update:(ccTime)deltaTime {

rotation_ = value * deltaTime;
//rotates
}
What are we going to do?
- Move things
- Check conditions
We’ll come back to this soon
12
Interaction - Touches
Touches are how you’ll do the majority of your input. Depending on your game and how you
use data, you might only use menus, which handle touches for you. If you want to have more
interaction, such as dragging a sprite around the screen, you will have to write touch
handlers.
We will use Targeted Touch Delegates
@protocol CCTargetedTouchDelegate <NSObject>
- (BOOL)ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event;
@optional // touch updates:
- (void)ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event;
- (void)ccTouchEnded:(UITouch *)touch withEvent:(UIEvent *)event;
- (void)ccTouchCancelled:(UITouch *)touch withEvent:(UIEvent *)
event;
@end
To enable in our layer:

-(void) registerWithTouchDispatcher {

[[CCTouchDispatcher sharedDispatcher] addTargetedDelegate:self

priority:0 swallowsTouches:YES];
}
13
Interaction - Touches
Needless to say, touches can be overwhelming. We will only be using simple taps for the
time being.
How
CCTargetTouchDelegate
works:
-
ccTouchBegan
will be invoked whenever a finger touches the screen
- You write code to check if the touch is valid and return YES, else NO
// You want the user to touch a sprite

- (BOOL)
containsTouchLocation
:(
UITouch
*)touch {

if (![sprite visible]) return NO;

return
CGRectContainsPoint
(
sprite.rect
, [self

convertTouchToNodeSpaceAR:touch
]);
}
// The Touch method
- (BOOL)
ccTouchBegan
:(
UITouch
*)touch
withEvent
:(
UIEvent
*)event {

if ( ![self
containsTouchLocation:touch
] ) return NO;

return YES;
}
- Valid touches will be subsequently passed on to the Moved, Ended, and Cancelled events
14
TestGame
– sprite
//
HelloWorldLayer.h

// When you import this file, you import all the cocos2d classes
#import "cocos2d.h"
//
HelloWorldLayer

@interface
HelloWorldLayer
:
CCLayer

{

CCSprite
*sprite;
}
// returns a
CCScene
that contains the
HelloWorldLayer
as the only child
+(
CCScene
*) scene;
@end
15
TestGame - init
// init method in
HelloWorldLayer.m

-(id) init {
// always call "super" init
// Apple recommends to re-assign "self" with the "super" return value
if( (self=[super init])) {
// Enable touches

self.isTouchEnabled
= YES;


// create and initialize a Label

CCLabelTTF
*label = [
CCLabelTTF

labelWithString:@"Hello
World"

fontName:@"Marker
Felt" fontSize:64];
// ask director the the window size

CGSize
size = [[
CCDirector

sharedDirector
]
winSize
];
// position the label on the center of the screen

label.position
=
ccp
(
size.width
/2 , size.height/2 );


// add the label as a child to this Layer
[self
addChild
: label];
sprite = [
CCSprite

spriteWithFile:@"ninja_penguin.png
"];

sprite.position
= ccp(sprite.contentSize.width/2, size.height/2);
[self
addChild:sprite
];
[self
scheduleUpdate
];
}
return self;
}
16
TestGame - touches
// Add these method in
HelloWorldLayer.m

- (void)
registerWithTouchDispatcher
{
[[
CCTouchDispatcher

sharedDispatcher
]
addTargetedDelegate:self
priority:0

swallowsTouches:YES
];
}
- (BOOL)
ccTouchBegan:(UITouch
*)touch
withEvent:(UIEvent
*)event {

CGRect

spriteRect
=
CGRectMake(sprite.position.x
- (sprite.contentSize.width/2),

sprite.position.y
- (sprite.contentSize.height/2),

sprite.contentSize.width
,
sprite.contentSize.height
);
if (
CGRectContainsPoint(spriteRect
, [[
CCDirector

sharedDirector
]

convertToGL:[touch

locationInView:[touch
view]]])) {
return YES;
} else {
return NO;
}
}
- (void)
ccTouchMoved:(UITouch
*)touch
withEvent:(UIEvent
*)event {

sprite.position
= [[
CCDirector

sharedDirector
]

convertToGL:[touch

locationInView:[touch
view]]];
}
- (void)
update:(ccTime
) delta {

sprite.rotation
+= 20*delta;
}

17
Sources
http://www.cocos2d-iphone.org

- Ricardo Quesada
http://www.raywenderlich.com
- Ray Wenderlich
18