Desenvolvimento de Jogos Android com Cocos2D | MobileConf 2013

27,569 views
27,619 views

Published on

Desenvolvimento de jogos android com cocos2d

Published in: Technology
0 Comments
17 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
27,569
On SlideShare
0
From Embeds
0
Number of Embeds
4,671
Actions
Shares
0
Downloads
525
Comments
0
Likes
17
Embeds 0
No embeds

No notes for slide

Desenvolvimento de Jogos Android com Cocos2D | MobileConf 2013

  1. 1. Mobile Conf Desenvolvimento de jogos | Android A trajetória de criação de um game Anderson Leite - MobileConf 2013 - São Paulo 1Friday, April 5, 2013
  2. 2. Mobile Conf Sobre mim Anderson Leite Trabalho em uma agência digital chamada R/GA, sou desenvolvedor web e gosto de coisas como Ruby, Rails, Frontend, Android e design. Entre em contato! Twitter @anderson_leite Web andersonleite.com.br Anderson Leite - MobileConf 2013 - São Paulo 2Friday, April 5, 2013
  3. 3. Mobile Conf Anderson Leite - MobileConf 2013 - São Paulo 3Friday, April 5, 2013
  4. 4. Mobile Conf Market Share Anderson Leite - MobileConf 2013 - São Paulo 4Friday, April 5, 2013
  5. 5. Mobile Conf Uso do smartphone Anderson Leite - MobileConf 2013 - São Paulo 5Friday, April 5, 2013
  6. 6. Mobile Conf Uso do smartphone Anderson Leite - MobileConf 2013 - São Paulo 5Friday, April 5, 2013
  7. 7. Mobile Conf Uso do smartphone Anderson Leite - MobileConf 2013 - São Paulo 5Friday, April 5, 2013
  8. 8. Mobile Conf Uso do smartphone Anderson Leite - MobileConf 2013 - São Paulo 5Friday, April 5, 2013
  9. 9. Mobile Conf Uso do smartphone Anderson Leite - MobileConf 2013 - São Paulo 5Friday, April 5, 2013
  10. 10. Mobile Conf Uso do smartphone Anderson Leite - MobileConf 2013 - São Paulo 5Friday, April 5, 2013
  11. 11. Mobile Conf “Smartphones trazem novos modelos pra pensar” Anderson Leite - MobileConf 2013 - São Paulo 6Friday, April 5, 2013
  12. 12. Mobile Conf Video games River Ride Atari River Raid e um jogo do tipo scrolling shooter videogame e foi criado em 1982 pela Activision para o Atari 2600. O jogador controla uma nave de baixo para cima que sobrevoa um rio e ganha pontos por atirar em naves inimigas, helicópteros, e balões. Fabricante Atari Data 1982 Anderson Leite - MobileConf 2013 - São Paulo 7Friday, April 5, 2013
  13. 13. Mobile Conf “Desenvolver um jogo é uma das formas mais divertidas de programar” Anderson Leite - MobileConf 2013 - São Paulo 8Friday, April 5, 2013
  14. 14. Mobile Conf 1 Protótipo Anderson Leite - MobileConf 2013 - São Paulo 9Friday, April 5, 2013
  15. 15. Mobile Conf “Prototype it First! Valide suas ideias e tenha uma visão geral do que vem pela frente” Anderson Leite - MobileConf 2013 - São Paulo 10Friday, April 5, 2013
  16. 16. Mobile Conf Protótipo do jogo Funcionalidades Um player que será representado por uma circunferência verde, posteriormente, a nave Mover o player de acordo com o toque na tela Um inimigo que será representado por uma circunferência que aumentará com o passar do tempo. Um placar que será atualizado de acordo com o tempo Game Over quando o inimigo encostar no player Restart e exit como opções Anderson Leite - MobileConf 2013 - São Paulo 11Friday, April 5, 2013
  17. 17. Mobile Conf Game Loop public class Impossible extends SurfaceView implements Runnable { public Impossible(Context context) { super(context); } @Override public void run() { while(running) { System.out.println("LÓGICA DO JOGO"); } } } Anderson Leite - MobileConf 2013 - São Paulo 12Friday, April 5, 2013
  18. 18. Mobile Conf Android Activity public class Game extends Activity { Impossible view; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Lógica do jogo view = new Impossible(this); // Configura view setContentView(view); } } Anderson Leite - MobileConf 2013 - São Paulo 13Friday, April 5, 2013
  19. 19. Mobile Conf Player private void drawPlayer(Canvas canvas) { paint.setColor(Color.GREEN); canvas.drawCircle(100, 100, 100, paint); } Anderson Leite - MobileConf 2013 - São Paulo 14Friday, April 5, 2013
  20. 20. Mobile Conf Movendo o player public class Game extends Activity implements OnTouchListener { protected void onCreate(Bundle savedInstanceState) { // Touch Listener view.setOnTouchListener(this); } @Override public boolean onTouch(View v, MotionEvent event) { view.moveDown(10); return true; } } Anderson Leite - MobileConf 2013 - São Paulo 15Friday, April 5, 2013
  21. 21. Mobile Conf Flickering Anderson Leite - MobileConf 2013 - São Paulo 16Friday, April 5, 2013
  22. 22. Mobile Conf Player private void drawEnemy(Canvas canvas) { paint.setColor(Color.GRAY); enemyRadius++; canvas.drawCircle(100, 100, enemyRadius, paint); } Anderson Leite - MobileConf 2013 - São Paulo 17Friday, April 5, 2013
  23. 23. Mobile Conf Detectando colisões private void checkCollision(Canvas canvas) { // calcula a hipotenusa distance = Math.pow(playerY - enemyY, 2) + Math.pow(playerX - enemyX, 2); distance = Math.sqrt(distance); // verifica distancia entre os raios if (distance <= playerRadius + enemyRadius) { gameover = true; } } Anderson Leite - MobileConf 2013 - São Paulo 18Friday, April 5, 2013
  24. 24. Mobile Conf Protótipo do jogo Conceitos Game Loop rodando várias vezes por segundo Desenhar objetos na tela Detectar colisões entre objetos Atualizar placar e efeitos quando colisão for detectada Anderson Leite - MobileConf 2013 - São Paulo 19Friday, April 5, 2013
  25. 25. Mobile Conf “Desenvolver jogos, essa porra é foda para caraleo, mas é divertida!” Anderson Leite - MobileConf 2013 - São Paulo 20Friday, April 5, 2013
  26. 26. Mobile Conf 2 História Anderson Leite - MobileConf 2013 - São Paulo 21Friday, April 5, 2013
  27. 27. Mobile Conf 14 bis 14 bis O 14-bis era constituído por um aeroplano unido ao balão 14, que fora utilizado em vôos feitos por Santos Dumont em meados de 1906. Anderson Leite - MobileConf 2013 - São Paulo 22Friday, April 5, 2013
  28. 28. Mobile Conf 14 bis VS 100 meteoros Tela de abertura Tela de jogo Anderson Leite - MobileConf 2013 - São Paulo 23Friday, April 5, 2013
  29. 29. Mobile Conf 3 Jogo com Cocos2D Anderson Leite - MobileConf 2013 - São Paulo 24Friday, April 5, 2013
  30. 30. Mobile Conf Anderson Leite - MobileConf 2013 - São Paulo 25Friday, April 5, 2013
  31. 31. Mobile Conf Usar um framework? Não se preocupar com a posição exata em pixels dos objetos Utilizar comportamentos já implementados para Sprites Eliminar da lógica a questão da limpeza de tela Conseguir efeitos interessantes já implementados pelo Cocos2D Sons e efeitos de formamais fácil Anderson Leite - MobileConf 2013 - São Paulo 26Friday, April 5, 2013
  32. 32. Mobile Conf Cocos2D CCScene Cenas do jogo CCLayer Camadas do jogo CCSprite Imagens do jogo Schedule | Unschedule Agendamento de game loop CCScaleBy | CCFadeOut Efeitos e Animações SoundEngine Sons e Música Anderson Leite - MobileConf 2013 - São Paulo 27Friday, April 5, 2013
  33. 33. Mobile Conf Camadas | CCLayer public class TitleScreen extends CCLayer { public CCScene scene() { CCScene scene = CCScene.node(); scene.addChild(this); return scene; } } Anderson Leite - MobileConf 2013 - São Paulo 28Friday, April 5, 2013
  34. 34. Mobile Conf Imagens | CCSprite public class ScreenBackground extends CCSprite { public ScreenBackground(String image) { super(image); } } public TitleScreen() { CCSprite title = CCSprite.sprite(Assets.logo); title.setPosition(CGPoint.ccp( screenWidth() /2 , screenHeight() - 130 ))); this.addChild(title); } Anderson Leite - MobileConf 2013 - São Paulo 29Friday, April 5, 2013
  35. 35. Mobile Conf Transição | CCDirector public class GameScene extends CCLayer { public static CCScene createGame() { CCScene scene = CCScene.node(); GameScene layer = new GameScene(); scene.addChild(layer); return scene; } } CCDirector.sharedDirector().replaceScene( CCFadeTransition.transition( 1.0f, GameScene.createGame() ) ); Anderson Leite - MobileConf 2013 - São Paulo 30Friday, April 5, 2013
  36. 36. Mobile Conf Imagens | CCSprite public class Meteor extends CCSprite{ public Meteor(String image) { super(image); x = new Random().nextInt(Math.round(screenWidth())); y = screenHeight(); this.schedule("update"); } public void update(float dt) { y -= 1; this.setPosition(screenResolution( x, y )); } } Anderson Leite - MobileConf 2013 - São Paulo 31Friday, April 5, 2013
  37. 37. Mobile Conf Engines e Delegates public class MeteorsEngine extends CCLayer { private MeteorsEngineDelegate delegate; public MeteorsEngine() { this.schedule("meteorsEngine", 1.0f / 10f); } public void meteorsEngine(float dt) { if(new Random().nextInt(30) == 0){ this.getDelegate().createMeteor( new Meteor(Assets.meteor).generate(), 1,1); } } public void setDelegate(MeteorsEngineDelegate delegate) { this.delegate = delegate; }} Anderson Leite - MobileConf 2013 - São Paulo 32Friday, April 5, 2013
  38. 38. Mobile Conf “Utilize ENGINES para fazer a ponte entre um objeto do jogo e a tela principal” Anderson Leite - MobileConf 2013 - São Paulo 33Friday, April 5, 2013
  39. 39. Mobile Conf Detectando Colisões public CGRect getBoarders(CCSprite object){ CGRect rect = object.getBoundingBox(); CGPoint GLpoint = rect.origin; CGRect GLrect = CGRect.make(GLpoint.x, GLpoint.y, rect.size.width, rect.size.height); return GLrect; } Anderson Leite - MobileConf 2013 - São Paulo 34Friday, April 5, 2013
  40. 40. Mobile Conf Detectando Colisões // Meteoros e tiros hitTest = this.checkRadiusHitsOfArray(this.meteorsArray, this.shootsArray, false, this, "meteoroHit"); // Avião e meteoros hitTest = this.checkRadiusHitsOfArray(this.meteorsArray, this.playersArray, false, this, "playerHit"); Anderson Leite - MobileConf 2013 - São Paulo 35Friday, April 5, 2013
  41. 41. Mobile Conf Detectando Colisões // Check Hit! if (CGRect.intersects(rect1, rect2)) { System.out.println("Colision Detected: " + hit); method = GameScene.class.getMethod(hit, CCSprite.class, CCSprite.class); method.invoke(gameScene, array1.get(i), array2.get(j)); } Anderson Leite - MobileConf 2013 - São Paulo 36Friday, April 5, 2013
  42. 42. Mobile Conf Efeitos e Animações // Remove from Game Array this.delegate.removeMeteor(this); // Stop Shoot this.unschedule("update"); // Pop Actions float dt = 0.2f; CCScaleBy a1 = CCScaleBy.action(dt, 0.5f); CCFadeOut a2 = CCFadeOut.action(dt); CCSpawn s1 = CCSpawn.actions(a1, a2); // Call RemoveMe CCCallFunc c1 = CCCallFunc.action(this, "removeMe"); // Run actions! this.runAction(CCSequence.actions(s1, c1)); Anderson Leite - MobileConf 2013 - São Paulo 37Friday, April 5, 2013
  43. 43. Mobile Conf Sons e música // Música SoundEngine.sharedEngine().playSound( CCDirector.sharedDirector().getActivity(), R.raw.music); // Efeitos de Som SoundEngine.sharedEngine().playEffect( CCDirector.sharedDirector().getActivity(), R.raw.bang); Anderson Leite - MobileConf 2013 - São Paulo 38Friday, April 5, 2013
  44. 44. Mobile Conf “Faça sempre o cache de efeitos de sons no seu jogo” Anderson Leite - MobileConf 2013 - São Paulo 39Friday, April 5, 2013
  45. 45. Mobile Conf Cache de Sons // Cache SoundEngine.sharedEngine().preloadEffect( CCDirector.sharedDirector().getActivity(), R.raw.bang); Anderson Leite - MobileConf 2013 - São Paulo 40Friday, April 5, 2013
  46. 46. Mobile Conf Cocos2D CCScene Cenas do jogo CCLayer Camadas do jogo CCSprite Imagens do jogo Schedule | Unschedule Agendamento de game loop CCScaleBy | CCFadeOut Efeitos e Animações SoundEngine Sons e Música Anderson Leite - MobileConf 2013 - São Paulo 41Friday, April 5, 2013
  47. 47. Mobile Conf Anderson Leite - MobileConf 2013 - São Paulo 42Friday, April 5, 2013
  48. 48. Mobile Conf Livro! Anderson Leite - MobileConf 2013 - São Paulo 43Friday, April 5, 2013
  49. 49. Mobile Conf Meu livro! Desenvolvimento de Jogos para Android Explore sua imaginação com o framework Cocos2D Construa um jogo do  início ao fim, sem esquecer a importância do enredo, distribuição, arte e como prender a atenção do jogador. Lógica, matemática e física são apresentados sem traumas. Também conheceremos muitos dos  benefícios do framework Cocos2D, utilizado na versão definitiva do nosso game. casadocodigo.com.br Desconto de 10% CUPON: MOBILECONF Anderson Leite - MobileConf 2013 - São Paulo 44Friday, April 5, 2013
  50. 50. Mobile Conf Obrigado! Perguntas? Entre em contato! Twitter @anderson_leite Blog andersonleite.com.br Anderson Leite - MobileConf 2013 - São Paulo 45Friday, April 5, 2013

×