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.
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.
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);
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
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