Do zero ao jogo multiplataforma com cocos2d

1.201 visualizações

Publicada em

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

Publicada em: Software
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.201
No SlideShare
0
A partir de incorporações
0
Número de incorporações
40
Ações
Compartilhamentos
0
Downloads
45
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Do zero ao jogo multiplataforma com cocos2d

  1. 1. DO ZERO AO JOGO MULTIPLATAFORMA COM COCOS 2D
  2. 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. 3. @vmattos19 vmattos vitor.mattos@caelum.com.br
  4. 4. Multiplataforma?
  5. 5. 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...
  6. 6. Começando um projeto Ctrl + C Ctrl + V
  7. 7. // 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
  8. 8. AppFiles: [ 'src/resource.js', 'src/myApp.js', 'src/BackgroundLayer.js', 'src/GameLayer.js', 'src/GameScene.js' ]
  9. 9. Cena
  10. 10. Cena var GameScene = cc.Scene.extend({ onEnter: function () { this._super(); } }); Background? Papai Smurf? Barrinha de vida, munição, etc?
  11. 11. Layers
  12. 12. Layers Coins: 19Background Game HUD
  13. 13. Layers Background Game HUD Cena
  14. 14. Layers var BackgroundLayer = cc.Layer.extend({ ctor: function () { this._super(); this.init(); }, init: function () { // Código do layer } });
  15. 15. E as imagens??
  16. 16. Sprites papa-smurf.png box.png
  17. 17. 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
  18. 18. 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);
  19. 19. Como adicionar os Layers em uma cena?
  20. 20. GameScene.js var GameScene = cc.Scene.extend({ onEnter: function () { this._super(); } }); this.addChild(new BackgroundLayer()); this.addChild(new GameLayer()); this.addChild(new HudLayer());
  21. 21. Como exibir textos?
  22. 22. 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
  23. 23. Textos
  24. 24. Qual é a ordem mesmo?
  25. 25. Sprites Scenes Personagens, Inimigos, Obstáculos, etc Fases, Menus, Tela de Game Over, etc Layers Background, HUD, Área jogável, etc
  26. 26. Que tal um pouco de animação?
  27. 27. Spritesheet
  28. 28. papa-smurf1.png papa-smurf2.png papa-smurf3.png papa-smurf4.png papa-smurf.png TexturePacker
  29. 29. TexturePacker papa-smurf.plist papa-smurf.png
  30. 30. TexturePacker
  31. 31. 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");
  32. 32. 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);
  33. 33. 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);
  34. 34. Do you even OO?
  35. 35. 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
  36. 36. Sprites = objetos // Resto do código var box = BoxSprite.create(); box.setPosition(350, 35); this.addChild(box); GameLayer.js
  37. 37. If you choke a smurf, what color does it turn?
  38. 38. Como simular física?
  39. 39. Engines suportadas
  40. 40. Física com engine Chipmunk!
  41. 41. 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
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. 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);
  47. 47. 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
  48. 48. Debug this._debugNode = cc.PhysicsDebugNode .create(this.space); this.addChild(this._debugNode, 10);
  49. 49. Debug
  50. 50. Lendo inputs do jogador
  51. 51. 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
  52. 52. Criar um sprite! With physics!
  53. 53. 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
  54. 54. Mouse? onMouseUp: function(event) { var location = event.getLocation(); this.createBall(location); } GameLayer.js
  55. 55. Touch? onTouchesEnded: function(touches, event) { if (touches.length <= 0) return; var touch = touches[0]; var location = touch.getLocation(); this.createBall(location); } GameLayer.js
  56. 56. Que jogo não tem som?
  57. 57. Audio GameLayer.js var audioEngine = cc.AudioEngine.getInstance(); GameLayer.onEnter audioEngine.playMusic(s_Music, true); GameLayer.onMouseUp / onTouchesEnded audioEngine.playEffect(s_SoundEffect);
  58. 58. Criando o jogo mobile
  59. 59. Cocos2d-x cocos2d-x/tools/project_creator/create_project.py project_creator$ python create_project.py -project NomeDoProjeto -package br.com.projeto -language javascript
  60. 60. Cocos2d-x cocos2d-x/projects/NomeDoProjeto
  61. 61. Cocos2d-x proj.ios proj.win32 Classes Resources Eclipse Xcode Visual Studio Classes C++ Nosso código fonte proj.android
  62. 62. Resources appFiles
  63. 63. Android JDK / SDK 1.6+ NDK r9d+ Eclipse com ADT
  64. 64. Obrigado!

×