desenvolvimento de jogos android com cocos2d | mobileconf 2013

Anderson Leite - MobileConf 2013 - São Paulo

MobileConf

Desenvolvimento de jogos | AndroidA trajetória de criação de um game

1

Friday, April 5, 2013


MobileConf

2

Sobre mimAnderson 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



MobileConf

3



MobileConf

4

Market Share



MobileConf

5

Uso do smartphone



MobileConf

6

“Smartphones trazem

novos modelos pra pensar”



MobileConf

7

River RideAtari

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

Video games


http://en.wikipedia.org/wiki/Shoot_%27em_up#Scrolling_shooters

http://en.wikipedia.org/wiki/Shoot_%27em_up#Scrolling_shooters

http://en.wikipedia.org/wiki/Videogame

http://en.wikipedia.org/wiki/Videogame

http://en.wikipedia.org/wiki/Activision

http://en.wikipedia.org/wiki/Activision

http://en.wikipedia.org/wiki/Atari_2600

http://en.wikipedia.org/wiki/Atari_2600


MobileConf

8

“Desenvolver um jogo é

uma das formas mais

divertidas de programar”



MobileConf

9

1Protótipo



MobileConf

10

“Prototype it First!

Valide suas ideias e tenha

uma visão geral do que vem

pela frente”



MobileConf

11

FuncionalidadesUm 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

Protótipo do jogo



MobileConf

12

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

}

}

}

Game Loop



MobileConf

13

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

}

}

Android Activity



MobileConf

14

private void drawPlayer(Canvas canvas) {

paint.setColor(Color.GREEN);

canvas.drawCircle(100, 100, 100, paint);

}

Player



MobileConf

15

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;

}

}

Movendo o player



MobileConf

16

\

Flickering



MobileConf

17

private void drawEnemy(Canvas canvas) {

paint.setColor(Color.GRAY);

enemyRadius++;

canvas.drawCircle(100, 100, enemyRadius, paint);

}

Player



MobileConf

18

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;

}

}

Detectando colisões



MobileConf

19

ConceitosGame 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

Protótipo do jogo



MobileConf

20

“Desenvolver jogos,

essa porra é foda

para caraleo,

mas é divertida!”



MobileConf

21

2História



MobileConf

22

14 bis14 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.



MobileConf

23

Tela de abertura Tela de jogo

14 bis VS 100 meteoros



MobileConf

24

3Jogo com Cocos2D



MobileConf

25



MobileConf

26

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



MobileConf

27

Cocos2DCCScene 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



MobileConf

28

Camadas | CCLayerpublic class TitleScreen extends CCLayer {

public CCScene scene() {

CCScene scene = CCScene.node();

scene.addChild(this);

return scene;

}

}



MobileConf

29

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

}



MobileConf

30

Transição | CCDirectorpublic 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() ) );



MobileConf

31

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

}

}



MobileConf

32

Engines e Delegatespublic 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;

}}



MobileConf

33

“Utilize ENGINES para fazer a

ponte entre um objeto

do jogo e a tela principal”



MobileConf

34

Detectando Colisõespublic 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;

}



MobileConf

35

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



MobileConf

36

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

}



MobileConf

37

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



MobileConf

38

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



MobileConf

39

“Faça sempre o cache

de efeitos de sons

no seu jogo”



MobileConf

40

Cache de Sons// Cache

SoundEngine.sharedEngine().preloadEffect(

CCDirector.sharedDirector().getActivity(),

R.raw.bang);



MobileConf

41

Cocos2DCCScene 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



MobileConf

42



MobileConf

43

Livro!



MobileConf

44

Desenvolvimento deJogos para AndroidExplore 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

Meu livro!



MobileConf

45

Obrigado!Perguntas?

Entre em contato!

Twitter @anderson_leite

Blog andersonleite.com.br


desenvolvimento de jogos android com cocos2d | mobileconf 2013

Technology