Do zero ao jogo multiplataforma com cocos2d
Upcoming SlideShare
Loading in...5
×
 

Do zero ao jogo multiplataforma com cocos2d

on

  • 352 views

Palestra sobre Cocos2d-html na Mobileconf RJ 2014, apresentada por Vitor Mattos

Palestra sobre Cocos2d-html na Mobileconf RJ 2014, apresentada por Vitor Mattos

Statistics

Views

Total Views
352
Views on SlideShare
319
Embed Views
33

Actions

Likes
0
Downloads
18
Comments
0

2 Embeds 33

http://www.slideee.com 17
https://twitter.com 16

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Do zero ao jogo multiplataforma com cocos2d Do zero ao jogo multiplataforma com cocos2d Presentation Transcript

  • DO ZERO AO JOGO MULTIPLATAFORMA COM COCOS 2D
  • 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.
  • @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, animações, física, GUI, audio, etc...
  • Começando 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, munição, etc?
  • Layers
  • Layers Coins: 19Background Game HUD
  • Layers Background Game HUD Cena
  • Layers var BackgroundLayer = cc.Layer.extend({ ctor: function () { this._super(); this.init(); }, init: function () { // Código 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, Obstáculos, etc Fases, Menus, Tela de Game Over, etc Layers Background, HUD, Área jogável, etc
  • Que tal um pouco de animação?
  • 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 <= 3; i++) { var str = "papa-smurf" + i + ".png"; var frame = cache.getSpriteFrame(str); frames.push(frame); } var papaSmurf = cc.Sprite.createWithSpriteFrameName("papa- smurf0.png");
  • 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);
  • 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);
  • Do you even OO?
  • 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
  • Sprites = objetos // Resto do código var box = BoxSprite.create(); box.setPosition(350, 35); this.addChild(box); GameLayer.js
  • If you choke a smurf, what color does it turn?
  • Como simular física?
  • Engines suportadas
  • Física com engine Chipmunk!
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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);
  • 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
  • Debug this._debugNode = cc.PhysicsDebugNode .create(this.space); this.addChild(this._debugNode, 10);
  • Debug
  • Lendo inputs do jogador
  • 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
  • Criar um sprite! With physics!
  • 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
  • Mouse? onMouseUp: function(event) { var location = event.getLocation(); this.createBall(location); } GameLayer.js
  • Touch? onTouchesEnded: function(touches, event) { if (touches.length <= 0) return; var touch = touches[0]; var location = touch.getLocation(); this.createBall(location); } GameLayer.js
  • Que jogo não tem som?
  • Audio GameLayer.js var audioEngine = cc.AudioEngine.getInstance(); GameLayer.onEnter audioEngine.playMusic(s_Music, true); GameLayer.onMouseUp / onTouchesEnded audioEngine.playEffect(s_SoundEffect);
  • Criando o jogo mobile
  • Cocos2d-x cocos2d-x/tools/project_creator/create_project.py project_creator$ python create_project.py -project NomeDoProjeto -package br.com.projeto -language javascript
  • Cocos2d-x cocos2d-x/projects/NomeDoProjeto
  • Cocos2d-x proj.ios proj.win32 Classes Resources Eclipse Xcode Visual Studio Classes C++ Nosso código fonte proj.android
  • Resources appFiles
  • Android JDK / SDK 1.6+ NDK r9d+ Eclipse com ADT
  • Obrigado!