Desenvolvimento de Jogos Android com Cocos2D | MobileConf 2013
-
Upload
andersonleite -
Category
Technology
-
view
24.593 -
download
0
description
Transcript of 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
Anderson Leite - MobileConf 2013 - São Paulo
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
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
3
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
4
Market Share
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
5
Uso do smartphone
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
5
Uso do smartphone
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
5
Uso do smartphone
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
5
Uso do smartphone
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
5
Uso do smartphone
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
5
Uso do smartphone
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
6
“Smartphones trazem
novos modelos pra pensar”
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
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
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
8
“Desenvolver um jogo é
uma das formas mais
divertidas de programar”
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
9
1Protótipo
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
10
“Prototype it First!
Valide suas ideias e tenha
uma visão geral do que vem
pela frente”
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
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
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
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
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
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
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
14
private void drawPlayer(Canvas canvas) {
paint.setColor(Color.GREEN);
canvas.drawCircle(100, 100, 100, paint);
}
Player
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
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
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
16
\
Flickering
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
17
private void drawEnemy(Canvas canvas) {
paint.setColor(Color.GRAY);
enemyRadius++;
canvas.drawCircle(100, 100, enemyRadius, paint);
}
Player
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
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
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
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
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
20
“Desenvolver jogos,
essa porra é foda
para caraleo,
mas é divertida!”
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
21
2História
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
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.
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
23
Tela de abertura Tela de jogo
14 bis VS 100 meteoros
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
24
3Jogo com Cocos2D
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
25
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
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
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
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
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
28
Camadas | CCLayerpublic class TitleScreen extends CCLayer {
public CCScene scene() {
CCScene scene = CCScene.node();
scene.addChild(this);
return scene;
}
}
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
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);
}
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
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() ) );
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
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 ));
}
}
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
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;
}}
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
33
“Utilize ENGINES para fazer a
ponte entre um objeto
do jogo e a tela principal”
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
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;
}
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
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");
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
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));
}
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
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));
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
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);
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
39
“Faça sempre o cache
de efeitos de sons
no seu jogo”
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
40
Cache de Sons// Cache
SoundEngine.sharedEngine().preloadEffect(
CCDirector.sharedDirector().getActivity(),
R.raw.bang);
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
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
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
42
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
43
Livro!
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
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!
Friday, April 5, 2013
Anderson Leite - MobileConf 2013 - São Paulo
MobileConf
45
Obrigado!Perguntas?
Entre em contato!
Twitter @anderson_leite
Blog andersonleite.com.br
Friday, April 5, 2013