Este documento fornece instruções sobre como desenvolver um jogo multiplataforma 2D usando a biblioteca Cocos2D. Explica como criar cenas, layers, sprites, animações, adicionar física e áudio e lidar com inputs do usuário para criar um jogo funcional para dispositivos móveis usando Cocos2D.

1. DO ZERO AO JOGO
MULTIPLATAFORMA
COM
COCOS 2D

2. Vitor Mattos
Bacharelando em Ciência da
Computação pela UERJ, trabalha
como instrutor e desenvolvedor na
Caelum, desenvolvendo sistemas
com Ruby e Java. Atualmente
trabalha com desenvolvimento front-
end, com foco em web mobile.

3. @vmattos19
vmattos
vitor.mattos@caelum.com.br

4. Multiplataforma?

6. Como funciona?
Cocos2d-x, Cocos2d-iphone,
Cocos2d-html5, ShinyCocos...
Cocos2d-x, Cocos2d-iphone,
Cocos2d-html5, ShinyCocos...
Javascript Bindings
(Mozilla Spidermonkey)
Sprites, animações, física, GUI,
audio, etc...

8. Começando um projeto
Ctrl + C
Ctrl + V

9. // Boilerplate code
var c = {
COCOS2D_DEBUG:2,
Box2d: false,
Chipmunk: false,
ShowFPS: true,
LoadExtension: false,
FrameRate: 60,
RenderMode: 0,
Tag: 'gameCanvas',
EngineDir: '../cocos2d/',
AppFiles: [
'src/resource.js',
'src/myApp.js'
]
};
// Mais boilerplate code
cocos2d.js

10. AppFiles: [
'src/resource.js',
'src/myApp.js',
'src/BackgroundLayer.js',
'src/GameLayer.js',
'src/GameScene.js'
]

11. Cena

12. Cena
var GameScene = cc.Scene.extend({
onEnter: function () {
this._super();
}
});
Background?
Papai Smurf?
Barrinha de vida, munição, etc?

13. Layers

14. Layers
Coins: 19Background
Game
HUD

15. Layers
Background
Game
HUD
Cena

16. Layers
var BackgroundLayer = cc.Layer.extend({
ctor: function () {
this._super();
this.init();
},
init: function () {
// Código do layer
}
});

17. E as imagens??

18. Sprites
papa-smurf.png box.png

19. Sprites
var s_PapaSmurf = "papa-smurf.png";
var s_Background = "background.png";
var s_HUD = "HUD.png";
var s_Box = "box.png";
var g_resources = [
s_PapaSmurf,
s_Background,
s_HUD,
s_Box
];
resource.js

20. Sprites
var background = cc.Sprite.create(s_Background);
this.addChild(background);
BackgroundLayer.init
var director = cc.Director.getInstance();
var winSize = director.getWinSize();
background.setPosition(winSize.width / 2,
winSize.height / 2);

21. Como adicionar os Layers
em uma cena?

22. GameScene.js
var GameScene = cc.Scene.extend({
onEnter: function () {
this._super();
}
});
this.addChild(new BackgroundLayer());
this.addChild(new GameLayer());
this.addChild(new HudLayer());

23. Como exibir textos?

24. Textos
var label = cc.LabelTTF
.create("Coins: 19", "Arial", 32);
label.setColor(cc.c3b(255,255,255));
label.setPosition(740, 410);
this.addChild(label);
RGB
HudLayer.js

25. Textos

26. Qual é a ordem
mesmo?

27. Sprites
Scenes
Personagens,
Inimigos,
Obstáculos,
etc
Fases,
Menus,
Tela de Game Over,
etc
Layers
Background,
HUD,
Área jogável,
etc

28. Que tal um pouco de
animação?

29. Spritesheet

30. papa-smurf1.png
papa-smurf2.png
papa-smurf3.png
papa-smurf4.png
papa-smurf.png
TexturePacker

31. TexturePacker
papa-smurf.plist
papa-smurf.png

32. TexturePacker

33. Carregando o spritesheet
var cache = cc.SpriteFrameCache.getInstance();
cache.addSpriteFrames(s_Papasmurfplist, s_PapaSmurf);
var frames = [];
for (var i=0; i <= 3; i++) {
var str = "papa-smurf" + i + ".png";
var frame = cache.getSpriteFrame(str);
frames.push(frame);
}
var papaSmurf = cc.Sprite.createWithSpriteFrameName("papa-
smurf0.png");

34. Animando o objeto
var animation = cc.Animation.create(frames, 0.2);
var animate = cc.Animate.create(animation);
var runningAction = cc.RepeatForever.create(animate);
papaSmurf.runAction(runningAction);

35. Animando o objeto
var moveRight = cc.MoveTo.create(4.5, cc.p(240, 65));
var turnLeft = cc.FlipX.create(true);
var moveLeft = cc.MoveTo.create(4.5, cc.p(100, 65));
var turnRight = cc.FlipX.create(false);
var walkingSequence = cc.Sequence.create(moveRight, turnLeft,
moveLeft, turnRight);
var walkingAction = cc.RepeatForever.create(walkingSequence);
papaSmurf.runAction(walkingAction);

36. Do you even
OO?

37. Sprites = objetos
var BoxSprite = cc.Sprite.extend({
texture: 's_Box',
closed: true,
points: 100,
openBox: function() {
// lógica para recompensar o jogador
}
});
BoxSprite.create = function() {
var texture = cc.TextureCache.getInstance().addImage(s_Box);
var box = new BoxSprite();
box.initWithTexture(texture);
return box;
}
BoxSprite.js

38. Sprites = objetos
// Resto do código
var box = BoxSprite.create();
box.setPosition(350, 35);
this.addChild(box);
GameLayer.js

39. If you choke a smurf,
what color does it
turn?

40. Como simular
física?

41. Engines suportadas

42. Física com engine
Chipmunk!

43. Criando o objeto space
var GameScene = cc.Scene.extend({
space: null,
initPhysics: function() {
this.space = new cp.Space();
this.space.gravity = cp.v(0, -350);
},
onEnter: function() {
// Inicialização dos layers
}
}
GameScene.js

44. Criando o objeto space
var GameScene = cc.Scene.extend({
space: null,
initPhysics: function() {
// Criação do space
},
onEnter: function() {
this._super();
this.initPhysics();
this.addChild(new BackgroundLayer());
this.addChild(new GameLayer(this.space));
this.addChild(new HudLayer());
}
}
GameScene.js

45. Criando o objeto space
var GameScene = cc.Scene.extend({
space: null,
initPhysics: function() {
// Criação do space
},
onEnter: function() {
// Resto da function onEnter
this.scheduleUpdate();
},
update: function(dt) {
this.space.step(dt);
}
}
GameScene.js

46. Criando o objeto space
var GameLayer = cc.Layer.extend({
ctor: function(space) {
this._super();
this.init();
},
init: function() {
// Resto do método init
}
}
GameLayer.js

47. Corpo com Sprite
var papaSmurf = cc.Sprite
.createWithSpriteFrameName("papa-smurf0.png");
var papaSmurf = cc.PhysicsSprite
.createWithSpriteFrameName("papa-smurf0.png");
O sprite está pronto!
Mas ainda falta o corpo

48. Corpo com Sprite
var corpo = this.space.addBody(new cp.Body(10,
cp.momentForBox(10 60, 90)));
var forma = this.space.addShape(new
cp.BoxShape(corpo, 60, 90));
forma.setElasticity(0.6);
forma.setFriction(1);
corpo.setPos(cc.p(160, 62));
papaSmurf.setBody(corpo);

49. Criando um corpo no espaço
var winSize = cc.Director.getInstance().getWinSize();
var staticBody = this.space.staticBody;
var height = 30;
var chao = new cp.SegmentShape(staticBody,
cp.v(0, height),
cp.v(winSize.width, height), 0);
chao.setElasticity(1);
chao.setFriction(1);
this.space.addStaticShape(chao);
GameScene.initPhysics

50. Debug
this._debugNode = cc.PhysicsDebugNode
.create(this.space);
this.addChild(this._debugNode, 10);

51. Debug

52. Lendo inputs do
jogador

53. Mouse ou touch?
var GameLayer = cc.Layer.extend({
ctor: function(space) {
this._super();
if( 'touches' in sys.capabilities ) {
this.setTouchEnabled(true);
}
if( 'mouse' in sys.capabilities ) {
this.setMouseEnabled(true);
}
// Resto do código
});
GameLayer.js

54. Criar um sprite!
With physics!

55. PhysicsSprite!
createBall: function(location) {
var bola = cc.PhysicsSprite.create(s_Ball);
this.addChild(bola);
var corpo = this.space.addBody(new cp.Body(1,
cp.momentForCircle(20, 0, 26, cp.v(0,0))));
var forma = this.space.addShape(
new cp.CircleShape(corpo, 26, cp.v(0,0)));
forma.setElasticity(0.8);
forma.setFriction(1);
corpo.setPos(location);
bola.setBody(corpo);
bola.setScale(0.8);
}
GameLayer.js

56. Mouse?
onMouseUp: function(event) {
var location = event.getLocation();
this.createBall(location);
}
GameLayer.js

57. Touch?
onTouchesEnded: function(touches, event) {
if (touches.length <= 0)
return;
var touch = touches[0];
var location = touch.getLocation();
this.createBall(location);
}
GameLayer.js

58. Que jogo não tem
som?

59. Audio
GameLayer.js
var audioEngine = cc.AudioEngine.getInstance();
GameLayer.onEnter
audioEngine.playMusic(s_Music, true);
GameLayer.onMouseUp / onTouchesEnded
audioEngine.playEffect(s_SoundEffect);

60. Criando o jogo
mobile

61. Cocos2d-x
cocos2d-x/tools/project_creator/create_project.py
project_creator$ python create_project.py -project
NomeDoProjeto -package br.com.projeto -language javascript

62. Cocos2d-x
cocos2d-x/projects/NomeDoProjeto

63. Cocos2d-x
proj.ios
proj.win32
Classes
Resources
Eclipse
Xcode
Visual Studio
Classes C++
Nosso código
fonte
proj.android

64. Resources
appFiles

65. Android
JDK / SDK 1.6+
NDK r9d+
Eclipse com ADT

66. Obrigado!