DO ZERO AO JOGO MULTIPLATAFORMA COM COCOS 2D

Vitor Mattos

Bacharelando em Cincia da Computao 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.

@vmattos19

vmattos

vitor.mattos@caelum.com.br

Multiplataforma?

Como funciona?

Cocos2d-x, Cocos2d-iphone, Cocos2d-html5, ShinyCocos...

Cocos2d-x, Cocos2d-iphone, Cocos2d-html5, ShinyCocos...

Javascript Bindings (Mozilla Spidermonkey)

Sprites, animaes, fsica, GUI, audio, etc...

Comeando um projeto

Ctrl + C

Ctrl + V

// 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

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

Cena

Cena

var GameScene = cc.Scene.extend({ onEnter: function () { this._super(); }});

Background?

Papai Smurf?

Barrinha de vida, munio, etc?

Layers

Layers

Coins: 19

Background

Game

HUD

Layers

Background

Game

HUD

Cena

Layers

var BackgroundLayer = cc.Layer.extend({ctor: function () { this._super(); this.init(); },

init: function () { // Cdigo do layer }});

E as imagens??

Sprites

papa-smurf.png

box.png

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

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

Como adicionar os Layers em uma cena?

GameScene.js

var GameScene = cc.Scene.extend({ onEnter: function () { this._super();

}});

this.addChild(new BackgroundLayer());this.addChild(new GameLayer());this.addChild(new HudLayer());

Como exibir textos?

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

Textos

Qual a ordem mesmo?

Sprites

Scenes

Personagens,Inimigos,Obstculos, etc

Fases,Menus,Tela de Game Over,etc

Layers

Background,HUD,rea jogvel,etc

Que tal um pouco de animao?

Spritesheet

papa-smurf1.png

papa-smurf2.png

papa-smurf3.png

papa-smurf4.png

papa-smurf.png

TexturePacker

TexturePacker

papa-smurf.plist

papa-smurf.png

TexturePacker

Carregando o spritesheet

var cache = cc.SpriteFrameCache.getInstance();cache.addSpriteFrames(s_Papasmurfplist, s_PapaSmurf);

var frames = [];

for (var i=0; i