Desarrollo de Videojuegos Android con Cocos2D

1

Desarrollo de Videojuegos Android con Cocos2D

Autor: Jordán Pascual Espada

Apuntes, practica Guiada.

Introducción a Cocos2D ............................................................................................................ 2

1 Nuevo Proyecto Android ........................................................................................................ 3

2 Director , vista y escena ......................................................................................................... 5

3 Representación gráfica de elementos: CCSprite y CGSize ..................................................... 8

4 Movimiento de elementos: CCMoveTo, CCCallFuncN, CCSequence .................................. 10

5 Eventos Touch: ccTouchesMoved ....................................................................................... 13

6 Colisiones: CGRect ............................................................................................................... 15

7 Animaciones: CCSpriteFrame , CCAnimation, CCAction ...................................................... 18

8 Fondo .................................................................................................................................... 23

9 Sistemas de partículas: CCParticleSystem ........................................................................... 24

10 Condición y pantalla de perder: CCLabel , replaceScene, CCDelayTime. ........................... 25

11 Condición y pantalla de ganar. ........................................................................................... 28

12 Generación de niveles ........................................................................................................ 29

13 Efectos de sonido: .............................................................................................................. 30

2

Introducción a Cocos2D

Cocos 2D es un framework muy popular en el mundo del desarrollo de videojuegos móviles,

especialmente en las plataformas iOs y Android.

El proyecto Cocos 2D está formado por un conjunto de librerías que nos facilitan la

implementación de la mayor parte de las funcionalidades básicas de un videojuego.

Bucle del Juego

Animaciones

Colisiones

Sistemas de partículas

Sonidos

Una de las principales ventajas de Cocos 2D es que utilizando resulta fácil desarrollar

videojuegos ya que oculta varios de los aspectos técnicos complejos de la plataforma.

Descarga:

http://cocos2d-x.org/projects/cocos2d-x/wiki/Download

http://cocos2d-x.org/projects/cocos2d-x/wiki/Download

3

1 Nuevo Proyecto Android

Creamos un nuevo proyecto Android “Android Application project”

Seleccionamos todos los valores por defecto.

A continuación vamos a modificar la configuración de la aplicación. Abrimos el fichero

AndroidManifest.xml, en la pestaña Manifest colocamos un nuevo Manifest Extras, de tipo

Supports Screens.

4

Pulsamos sobre el elemento Suppots Screens para configurar la adaptación de la aplicación a

las diferentes resoluciones.

Abrimos el AndroidManifest.xml en modo XML pulsando sobre la última pestaña.

Añadimos un parámetro de configuración que obligara a ejecutar la actividad en modo

portrait.

A continuación vamos a copiar la librería del framework Cocos2D en nuestra aplicación,

arrastramos el fichero cocos2d.jar a la carpeta /libs/ de nuestro proyecto.

5

2 Director , vista y escena

Lo primero que tenemos que hacer es ir a la implementación de la clase MainActivity y crear

dos variables globales.

protected CCGLSurfaceView vista;

private CCScene scene;

A continuación vamos a modificar el contenido del método onCreate:

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,

WindowManager.LayoutParams.FLAG_FULLSCREEN);

getWindow().setFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON,

WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);

vista = new CCGLSurfaceView(this);

setContentView(vista);

}

Modificamos la ventana actual para que se muestre a pantalla completa.

Creamos una vista de tipo CCGLSurfaceView y la establecemos como vista de la actividad.

Ahora vamos a sobrescribir el método onStart() de la actividad, utilizamos el elemento

CCDirector y para establecer los parámetros básicos del Juego.

public void onStart()

{

super.onStart();

// Director

CCDirector.sharedDirector().attachInView(vista);

CCDirector.sharedDirector().setDeviceOrientation(

CCDirector.kCCDeviceOrientationPortrait);

CCDirector.sharedDirector().setDisplayFPS(true);

CCDirector.sharedDirector().setAnimationInterval(1.0f / 40.0f);

}

A continuación tenemos que asociar una escena CCScene al director, la escena define y

contiene los elementos del Juego.

Pero antes de asociar la escena tenemos que definirla. Creamos la clase java CapaJuego para

implementar una escena la clase ha de heredar de alguna de las clases de tipo Layer definidas

en Cocos2D. En este caso utilizaremos la CCColorLayer.

6

El eclipse nos sugerirá que añadamos un constructor, elegimos el primero de ellos.

Ahora implementaremos un método estático en la CapaJuego que genere una escena

(CCScene) y la retorne. Creamos la escena y le asociamos una instancia de CapaJuego:

public static CCScene scene()

{

CCScene scene = CCScene.node();

CCLayer layer = new CapaJuego(ccColor4B.ccc4(255, 255, 255, 255));

scene.addChild(layer);

return scene;

}

Ahora ya podemos añadir la escena (que está completamente vacía) al CCDirector.

@Override

public void onStart()

{

super.onStart();

CCDirector.sharedDirector().attachInView(vista);

CCDirector.sharedDirector().setDeviceOrientation(

CCDirector.kCCDeviceOrientationPortrait);

CCDirector.sharedDirector().setDisplayFPS(true);

CCDirector.sharedDirector().setAnimationInterval(1.0f / 40.0f);

scene = CapaJuego.scene();

CCDirector.sharedDirector().runWithScene(scene);

}

Con el objetivo de que el ciclo de vida de la actividad principal MainActivity se vea reflejado en

el CCDirector, sobrescribimos los métodos onPause, onResume, onStop

@Override

public void onPause()

{

super.onPause();

CCDirector.sharedDirector().pause();

}

@Override

public void onResume()

{

super.onResume();

CCDirector.sharedDirector().resume();

}

@Override

7

public void onStop()

{

super.onStop();

CCDirector.sharedDirector().end();

}

8

3 Representación gráfica de elementos: CCSprite y CGSize

Actualmente la escena está vacía, pero vamos a incluir un nuevo elemento, la “bola”.

Comenzamos importando todos los recursos gráficos que nos hemos descargado en la carpeta

assets del proyecto.

Para incluir un nuevo elemento en la capa lo declaramos inicializamos en el constructor de la

capa. Cocos 2D utiliza la clase CCSprite para representar elementos en pantalla.

A continuación vamos a:

1. Crear una variable Global de tipo CCSprite para la pelota.

2. Crear una variable Global de tipo CGSize para almacenar el tamaño de la pantalla del

dispositivo (Sera útil para posicionar los elementos).

3. Inicializar CCSprite utilizando la imagen bola.png

4. Asignarle una posición a la pelota, por ejemplo el punto medio de la pantalla.

5. Añadir la pelota a la escena

private CGSize winSize;

private CCSprite pelota;

protected CapaJuego(ccColor4B color) {

super(color);

winSize = CCDirector.sharedDirector().displaySize();

pelota = CCSprite.sprite("bola.png");

pelota.setPosition(CGPoint.ccp(winSize.width / 2.0f, winSize.height / 2.0f));

addChild(pelota);

}

9

Si ejecutamos la aplicación podremos ver la escena compuesta por la capa CapaJuego y la

pelota en el punto medio.

10

4 Movimiento de elementos: CCMoveTo, CCCallFuncN, CCSequence

En primer lugar vamos a declarar dos variables globales que contendrán la velocidad de la

pelota en el eje X e Y.

private int velocidadPelotaX = 10;

private int velocidadPelotaY = -10;

Para asociarle un movimiento a la pelota tenemos que declarar una acción de tipo CCMoveTo.

Las acciones se declaran especificando:

1) El tiempo que queremos que se tarde en realizar el movimiento

2) Hacía que destino queremos que se mueva el elemento

CCMoveTo movimientoBasico = CCMoveTo.action(

1 / 40f,

CGPoint.ccp(pelota.getPosition().x + velocidadPelotaX,

pelota.getPosition().y + velocidadPelotaY));

Podemos especificar que cuando el movimiento finalice se invoque de manera automática a

una función, para especificar el siguiente movimiento, en este caso cuando el movimiento

termine se invocara la función nuevoMovimientoPelota (la implementaremos más tarde).

CCCallFuncN movimientoFinzalizado = CCCallFuncN.action(this,

"nuevoMovimientPelota");

Después tenemos que hacer una asociación entre el movimiento y la invocación de la función.

CCSequence actions = CCSequence.actions(movimientoBasico,

movimientoFinzalizado);

El último paso consiste en asociar la secuencia al elemento pelota.

pelota.runAction(actions);

El aspecto final del constructor de la capa del juego será el siguiente:


super(color);



pelota.setPosition(CGPoint.ccp(winSize.width / 2.0f,

winSize.height / 2.0f));

addChild(pelota);

CCMoveTo movimientoBasico = CCMoveTo.action(

1 / 40f,

CGPoint.ccp(pelota.getPosition().x + velocidadPelotaX,

pelota.getPosition().y + velocidadPelotaY));






}

11

Si ejecutamos la aplicación la pelota se moverá mínimamente.

Vamos a implementar el método nuevoMovimientoPelota para asociar un nuevo movimiento

a la pelota (una vez haya acabado de realizar el anterior). Repetimos el mismo patrón de

movimiento:

public void nuevoMovimientPelota(Object sender) {

float destinoPelotaX = pelota.getPosition().x + velocidadPelotaX;

float destinoPelotaY = pelota.getPosition().y + velocidadPelotaY;

CCMoveTo movimientoBasico = CCMoveTo.action(1 / 40f,

CGPoint.ccp(destinoPelotaX, destinoPelotaY));






}

Vamos a hacer que cuando la pelota se salga fuera de la pantalla “rebote”, para ello tenemos

que comprobar si la pelota está fuera de los márgenes de la pantalla y si es así invertir la

aceleración.

public void nuevoMovimientPelota(Object sender) {

// Comprobar si rebota

if ( pelota.getPosition().x <= 0 || pelota.getPosition().x >= winSize.width ){

velocidadPelotaX = velocidadPelotaX *-1;

}

if ( pelota.getPosition().y <= 0 || pelota.getPosition().y >= winSize.height ){

velocidadPelotaY = velocidadPelotaY *-1;

}



// (Paso 1) Cuando se ha movido volverlo a mover








}

Si ejecutamos ahora la aplicación la pelota rebotara por la pantalla, vamos a incluir una última

comprobación para que el destino de la pelota no pueda exceder los límites de la pantalla.

Antes de asignar posición comprobamos que las posiciones destino no están fuera de la

pantalla.



if (destinoPelotaX < 0){

destinoPelotaX = 0;

}

12

if (destinoPelotaX > winSize.width){

destinoPelotaX = winSize.width;

}

if (destinoPelotaY < 0){

destinoPelotaY = 0;

}

if (destinoPelotaY > winSize.height){

destinoPelotaY = winSize.height;

}

// (Paso 1) Cuando se ha movido volverlo a mover








}

13

5 Eventos Touch: ccTouchesMoved

Pala

A continuación vamos a repetir el procedimiento que seguimos para incluir la pelota pero esta

vez para el elemento pala.

Colocaremos la pala en la parte baja de la pantalla centrada en el eje X.


super(color);





addChild(pelota);

pala = CCSprite.sprite("barra2.png");

pala.setPosition(CGPoint.ccp(winSize.width/2.0f, 80f));

addChild(pala);

Vamos a hacer que la pala se mueva en el eje X hacia la posición del dedo del usuario, cuando

el usuario mueva el dedo la pala se moverá.

En la clase CapaJuego y sobrescribimos uno de los tres métodos que sirven para captar

eventos táctiles ccTouchesMoved.

1) Capturamos la posición del evento X del dedo del usuario, y lo comparamos con la

posición de la pala: la diferencia entre esas dos mediciones es la distancia que la

pala tiene que recorrer.

2) Para que la velocidad del movimiento sea uniforme establecemos que el tiempo

que tardara en recorrer esa distancia será la distancia / la velocidad.

3) Por el momento fijaremos la velocidad de la pala en 400.

4) Incluimos una función de CCCallFuncN aunque en este caso no la vallamos a

utilizar, cuando la pala llega a su destino no queremos que ocurra nada.

@Override

public boolean ccTouchesMoved(MotionEvent event) {

float distancia = Math.abs(pala.getPosition().x - event.getX());

CCMoveTo moverPalaHaciaPunto = CCMoveTo.action(distancia / 400,

CGPoint.ccp(event.getX(), pala.getPosition().y));


"finalMovimientoPala");

CCSequence actions = CCSequence.actions(moverPalaHaciaPunto,


pala.runAction(actions);

return true;

}

14

Para que la capa soporte eventos táctiles debemos incluir la directriz

this.setIsTouchEnabled(true); en el constructor de CapaJuego.


super(color);

this.setIsTouchEnabled(true);


// Pelota




addChild(pelota);

Si ejecutamos el proyecto y pulsamos sobre la pantalla la pala se moverá.

15

6 Colisiones: CGRect

Bloque

A continuación vamos a repetir el procedimiento que seguimos para incluir la pelota y la pala,

en esta ocasión incluiremos el elemento bloque.

// Bloque

bloque = CCSprite.sprite("cocodrilo_1.png");

bloque.setPosition(CGPoint.ccp(winSize.width/2.0f, winSize.height-20));

addChild(bloque);

Estableceremos dos tipos de colisiones

1) Si la pelota colisiona contra la pala rebotara

2) Si la pelota colisiona contra el bloque, lo destruirá.

Necesitamos un método que compruebe las colisiones entre los elementos. En la última línea

del constructor de CapaJuego declaramos que el método gameLogic (que implementaremos a

continuación) se ejecutara 40 veces por segundo.


this.schedule("gameLogic", 1/40f);

}

Implementamos el método gameLogic.

Cocos2D ofrece un mecanismo “sencillo” para comprobar colisiones entre rectángulos.

1) Definimos los rectángulos de colisión de los 3 elementos

2) Comprobamos si la pala y la pelota colisionan.

3) En caso de que colisionen invertimos la velocidad actual de la pelota en eje Y

4) Modificamos la velocidad de la pelota en el eje X en función de la parte de la pala en la

que haya impactado.

Como la diferencia absoluta es numero demasiado grande para la velocidad (la bola

iría demasiado rápido) vamos a dividir ese resultado entre dos.

5) Por ultimo le damos un pequeño empujón a la pelota para que salga de la intersección

con la pala (modificamos la posición de la pelota).

6) Eliminamos el antiguo movimiento de la pelota y forzamos a que se vuelva a mover,

ahora ya con sus nuevas aceleraciones.

3 – 5 = -2

Nueva velocidadX = -2

7 – 5 = 2

Nueva velocidadX = 2

16

public void gameLogic(float dt){

// Crear rectangulos de colision

CGRect areaPala = CGRect.make(

pala.getPosition().x - pala.getContentSize().width / 2.0f,

pala.getPosition().y - pala.getContentSize().height / 2.0f,

pala.getContentSize().width, pala.getContentSize().height);

CGRect areaPelota = CGRect.make(

pelota.getPosition().x - pelota.getContentSize().width / 2.0f,

pelota.getPosition().y - pelota.getContentSize().height / 2.0f,

pelota.getContentSize().width, pelota.getContentSize().height);

CGRect areaBloque = CGRect.make(

bloque.getPosition().x - bloque.getContentSize().width / 2.0f,

bloque.getPosition().y - bloque.getContentSize().height / 2.0f,

bloque.getContentSize().width, bloque.getContentSize().height);

if (CGRect.intersects(areaPala, areaPelota)){

velocidadPelotaX = (int) ((pelota.getPosition().x - pala.getPosition().x)/2);

velocidadPelotaY = velocidadPelotaY *-1;

// Empujon

pelota.setPosition(CGPoint.ccp(pelota.getPosition().x,

pala.getPosition().y + pala.getContentSize().height / 2

+ pelota.getContentSize().height / 2 + 1));

pelota.stopAllActions();

nuevoMovimientPelota(pelota);

}

}

Si el la pelota colisiona con el bloque eliminamos el bloque de la escena.

if (CGRect.intersects(areaPelota, areaBloque)){

removeChild(bloque, true);

}

Lista de Bloques

En lugar de un bloque vamos a hacer que la escena tenga varios, declaramos una lista de

bloques (CCSprite) como variable global.

private CCSprite bloque;

private LinkedList<CCSprite> listaBloques = new LinkedList<CCSprite>();

Creamos un método inicializarBloques al que posteriormente invocaremos desde el

constructor de la capa.

1) Este crea e inserta n bloques en la pantalla

2) Va posicionando los bloques en columnas (empezando por la parte superior), hasta

que la columna está completa.

3) Cuando la columna está completa cambia de fila

public void inicializarBloques() {

int insertados = 0;

int fila = 0;

int columna = 0;

while (insertados < 25) {

CCSprite bloque = CCSprite.sprite("cocodrilo_1.png");

float posX = (20 + bloque.getContentSize().width / 2.0f)

+ (bloque.getContentSize().width * columna);

float posY = (winSize.height - bloque.getContentSize().height / 2.0f)

- (bloque.getContentSize().height * fila);

bloque.setPosition(CGPoint.ccp(posX, posY));

17

columna++;

/* La posicionX del bloque esta fuera de la pantalla */

if (posX + bloque.getContentSize().width > winSize.width) {

columna = 0;

fila++;

} else {

listaBloques.add(bloque);

addChild(bloque);

insertados++;

}

}

}

Incluimos la llamada al método inicializarBloques en la última línea del constructor CapaJuego

this.schedule("gameLogic", 1/40f);

inicializarBloques();

}

Ahora tenemos que modificar el método updateLogic para adaptarlo a la lista de bloques.

1) Recorremos la lista de boques.

2) Creamos el rectángulo de área de colisión para cada bloque y comprobamos si

colisiona con la pelota.

3) Si existe colisión tenemos que eliminar el bloque de la lista, pero no podemos eliminar

elementos de una lista mientras la recorremos. Guardamos el bloque seleccionado en

la lista de los bloques que vamos a destruir.

4) Si hay algún bloque en la lista de bloques pendientes por destruir invertimos la

velocidad de la bola (Rebote).

5) Recorremos la lista de los bloques que hay que destruir y los sacamos de la lista

principal y de la escena.

LinkedList<CCSprite> listaBloquesParaDestruir = new LinkedList<CCSprite>();

for (CCSprite bloque : listaBloques) {

CGRect areaBloque = CGRect.make(

bloque.getPosition().x - bloque.getContentSize().width/ 2.0f,

bloque.getPosition().y - bloque.getContentSize().height/ 2.0f,

bloque.getContentSize().width,

bloque.getContentSize().height);

if (CGRect.intersects(areaPelota, areaBloque)) {

listaBloquesParaDestruir.add(bloque);


}

}

if (listaBloquesParaDestruir.size() > 0) {

for (CCSprite bloque : listaBloquesParaDestruir) {

listaBloques.remove(bloque);

}

velocidadPelotaX = velocidadPelotaX * -1;

velocidadPelotaY = velocidadPelotaY * -1;

}

}

18

7 Animaciones: CCSpriteFrame , CCAnimation, CCAction

Modificaremos el mecanismo de creación de los bloques para insertar una animación.


int insertados = 0;

int fila = 0;

int columna = 0;


CCSprite bloque = CCSprite.sprite("cocodrilo_1.png");






columna++;

// La posicionX del bloque esta fuera de la pantalla

if (posX + bloque.getContentSize().width > winSize.width) {

columna = 0;

fila++;

} else {

listaBloques.add(bloque);

addChild(bloque);

insertados++;

}

}

}

Para crear la animación vamos a:

1) Cachear el Sprite con la animación, Cocos2D utiliza unos ficheros XML

(animacioncocodrilo.plist) para definir las animaciones.

Vamos a examinar el fichero .plist para entender su estructura.

ULTIMAS LINEAS

<dict>

<key>format</key>

<integer>2</integer>

<key>realTextureFileName</key>

<string>animacioncocodrilo.png</string>

<key>size</key>

<string>{320,40}</string>

<key>smartupdate</key>

<string>$TexturePacker:SmartUpdate:0e07504f614e935fcfc28006d277442e$</string>

<key>textureFileName</key>

<string>animacioncocodrilo.png</string>

19

</dict>

DECLARACIÓN DE FRAMES <key>cocodrilo1.png</key>

<dict>

<key>frame</key>

<string>{{0,0},{40,40}}</string>

<key>offset</key>


<key>rotated</key>

<false/>

<key>sourceColorRect</key>

<string>{{0,0},{40,40}}</string>

<key>sourceSize</key>


</dict> <key>cocodrilo2.png</key>

<dict>

<key>frame</key>

<string>{{40,0},{40,40}}</string>

<key>offset</key>


<key>rotated</key>

<false/>

<key>sourceColorRect</key>

<string>{{0,0},{40,40}}</string>

<key>sourceSize</key>


</dict>

Una vez se carga este fichero tenemos toda la información de la animación en

memoria.

2) Seleccionamos los frames de la animación que nos interesan, para ello utilizamos la

clave de los frames: cocodrilo1.png, cocodrilo2.png, etc. Los introducimos en un array

de CCSpriteFrame

3) Asignar los frames a un objeto de tipo CCAnimation, y le damos un nombre, en este

caso “basica”

4) Colocamos el primero de los frames seleccionados como Sprite básico del elemento

bloque, (nos servirá para darle las dimensiones al bloque).

5) Crear una acción CCAction a partir de la animación y un boolean que determina si la

animación se ejecutara de manera continua.

6) Ordenamos al bloque que ejecute la acción que contiene la animación utilizando el

método runAction

cocodrilo2.png x=40, y=0 Alto=40 Ancho =40

Cocodrilo3.png x=80, y=0 Alto=40 Ancho =40

20

CCSpriteFrameCache.sharedSpriteFrameCache().addSpriteFrames("animacioncocodrilo.plist");

ArrayList<CCSpriteFrame> frames = new ArrayList<CCSpriteFrame>();

for(int i = 1; i<=8;++i)

{

frames.add(CCSpriteFrameCache.sharedSpriteFrameCache().spriteFrameByName("cocodrilo"+ i

+".png"));

}

CCAnimation animacionBasica = CCAnimation.animation("basica", 0.1f, frames);

CCSprite bloque = CCSprite.sprite(frames.get(5));

CCAction accionBasica = CCRepeatForever.action(CCAnimate.action(animacionBasica, true));

bloque.runAction(accionBasica);

Generación aleatoria de Bloques

Vamos a incluir un mecanismo para que los bloques sean generados de manera automática

tengan diferente aspecto gráfico.

En la carpeta de recursos gráficos tenemos las animaciones: animaciontigre y animacionpanda

con sus correspondientes ficheros de definición .plist.

Implementamos el método generaBloqueAletorio, que construye un bloque animado

utilizando uno de los tres recursos gráficos, el cocodrilo, el tigre o el panda. La selección del

recurso grafico se hace de manera aleatoria.

Creamos un array con las 3 claves {[0]cocodrilo, [1]tigre, [2]panda} y seleccionamos una de

manera automática generando un entero aleatorio comprendido entre 0 y 2.

public CCSprite generaBloqueAleatorio() {

CCSprite bloque = null;

String[] animaciones = { "cocodrilo", "tigre", "panda" };

int index = new Random().nextInt(3);

CCSpriteFrameCache.sharedSpriteFrameCache().addSpriteFrames(

"animacion" + animaciones[index] + ".plist");

ArrayList<CCSpriteFrame> frames = new ArrayList<CCSpriteFrame>();

for (int i = 1; i <= 8; ++i) {

frames.add(CCSpriteFrameCache.sharedSpriteFrameCache()

.spriteFrameByName(animaciones[index] + i + ".png"));

}

CCAnimation animacionBasica = CCAnimation.animation("basica", 0.1f,frames);

bloque = CCSprite.sprite(frames.get(0));

CCAction accionBasica = CCRepeatForever.action(CCAnimate.action(

animacionBasica, true));

bloque.runAction(accionBasica);

return bloque;

}

Modificamos la implementación inicializarBloques(), en lugar de crear el Sprite para el bloque

solicitamos un Sprite aleatorio.

22


int insertados = 0;

int fila = 0;

int columna = 0;


CCSprite bloque = generaBloqueAleatorio();






columna++;

23

8 Fondo

Incluiremos el recurso gráfico fondo.png como fondo de pantalla de la CapaJuego. El proceso

es idéntico al que seguimos para colocar la pelota y la pala.

Como el orden de agregación de los CCSprite es relevante debemos añadir el fondo el primer

lugar (para que no oculte al resto de elementos). Posicionaremos el fondo en el punto medio

de la pantalla.


super(color);


// fondo

CCSprite fondo = CCSprite.sprite("fondo.png");

fondo.setPosition(CGPoint.ccp(winSize.width/2.0f, winSize.height/2.0f));

addChild(fondo);

// Pelota




addChild(pelota);

24

9 Sistemas de partículas: CCParticleSystem

Cocos 2D incluye un sistema de soporte sencillo para definir “efectos visuales” basados en

partículas, este sistema se llama CCParticleSystem y se utiliza comúnmente para realizar

efectos especiales como: explosiones, humo, fuego, lluvia, etc.

El usuario define una serie de parámetros relevantes en las partículas, tipo de partículas,

velocidad de emisión, duración de la animación, velocidad, textura… y el más importante las

coordenadas del punto donde se producirá la emisión de partículas.

Algunos de los tipos de partículas más utilizados son: CCParticleRain, CCParticleSoke,

CCParticleMeteor, CCParticleExplosion y CCParticleGalaxy, pero hay muchos otros.

Vamos a incluir una emisión de partículas de tipo CCParticleRain cuando la pelota impacte

contra un bloque.

Localizamos la parte del método updateLogic() que elimina los bloques contra los que impacto

la pelota, a continuación incluimos la llamada al sistema de partículas, estableciendo como

punto de origen la posición de la pelota.

if (listaBloquesParaDestruir.size() > 0) {

for (CCSprite bloque : listaBloquesParaDestruir) {

listaBloques.remove(bloque);

}

velocidadPelotaX = velocidadPelotaX * -1;

velocidadPelotaY = velocidadPelotaY * -1;

/* Explosion */

CCParticleSystem emitter = CCParticleRain.node();

emitter.setEmissionRate(100.0f);

emitter.setDuration(0.01f);

emitter.setGravity(CGPoint.ccp(0,0));

emitter.setSpeed(100.0f);

emitter.setSpeedVar(70.0f);

emitter.setPosition(pelota.getPosition());

emitter.setPosVar(CGPoint.ccp(0, 0));

emitter.setTexture(

CCTextureCache.sharedTextureCache().addImage("bola.png"));

emitter.setAutoRemoveOnFinish(true);

addChild(emitter,8);

}

25

10 Condición y pantalla de perder: CCLabel , replaceScene,

CCDelayTime.

Actualmente el juego no tiene final, no se puede ganar ni perder. Vamos a incluir una

comprobación en la lógica del juego que evalué si la pelota se encuentra en una posición más

baja que la paleta (coordenada Y), en caso de que así sea, se finalizara el juego y se enviara al

usuario a una nueva pantalla (Escena) que le notifique que ha perdido.

En primer lugar vamos a definir la pantalla que aparecerá cuando el usuario pierda el juego,

creamos una nueva clase Java a la que llamaremos CapaPerder y heredara de la clase base

CCColorLayer.

public class CapaPerder extends CCColorLayer{

protected CapaPerder(ccColor4B color) {

super(color);

}

}

Al igual que hicimos en la CapaJuego en el constructor de la CapaPerder introducir aquellos elementos que se vayan a visualizar en la pantalla. En este caso queremos que tenga un fondo de color negro y un texto que le diga al usuario que ha perdido.

protected CapaPerder(ccColor4B color)

{

super(color);


CGSize winSize = CCDirector.sharedDirector().displaySize();

CCLabel texto = CCLabel.makeLabel("Has perdido", "DroidSans", 32);

texto.setColor(ccColor3B.ccWHITE);

texto.setPosition(winSize.width / 2.0f, winSize.height / 2.0f);

addChild(texto);

}

Ahora tenemos que crear el método que genera la escena a partir de la capa (de la misma manera que hicimos en CapaJuego. Creamos un método estático que inicializa un objeto CCScene (Basado en la capa) y lo retorna. public static CCScene scene()

{


CapaPerder capaPerder = new CapaPerder(ccColor4B.ccc4(0, 0, 0, 255));

scene.addChild(capaPerder);

return scene;

}

Por ultimo vamos a implementar un método JugarDeNuevo() que servirá para que el jugador pueda volver a iniciar el juego. Lo único que hace este método es volver a colocar la escena generada a partir de CapaJuego como escena principal. public void jugarDeNuevo()

{

26

CCDirector.sharedDirector().replaceScene(CapaJuego.scene());

}

Vamos a hacer que este método se invoque cuando el usuario pulse sobre la pantalla y levante el dedo.

@Override

public boolean ccTouchesEnded(MotionEvent event)

{

jugarDeNuevo();

return true;

}

Implementamos la comprobación de la posición actual de la pelota al final el método gameLogic(). Si la coordenada Y de la pelota es menor de 50 (parte baja de la pantalla) se ha perdido la partida y se establece como principal la escena generada a partir de la CapaPerder. if (pelota.getPosition().y < 50){

CCDirector.sharedDirector().replaceScene(CapaPerder.scene());

}

Vamos a modificar la velocidad inicial en el eje X de la pelota para que caiga “recta”. public class CapaJuego extends CCColorLayer {



Podemos incluir una condición en el constructor de la CapaPerder para que una acción se ejecute automáticamente transcurridos N segundos.

27

Vamos a hacer que el método JugarDeNuevo (que reinicia la partida) se ejecute cuando pasen tres segundos. protected CapaPerder(ccColor4B color)

{

super(color);



CCLabel texto = CCLabel.makeLabel("Has perdido", "DroidSans", 32);



addChild(texto);

this.runAction(CCSequence.actions(CCDelayTime.action(3.0f),

CCCallFunc.action(this, "jugarDeNuevo")));

}

28

11 Condición y pantalla de ganar. Al igual que hicimos en la CapaPerder vamos a crear una nueva capa CapaGanar, debe de ser idéntica a la anterior pero en este caso tendrá en fondo verde y la letra blanca y le dirá al usuario que ha ganado la partida. public class CapaGanar extends CCColorLayer {

protected CapaGanar(ccColor4B color) {

super(color);



CCLabel texto = CCLabel.makeLabel("Siguiente Nivel", "DroidSans", 32);



addChild(texto);

this.runAction(CCSequence.actions(CCDelayTime.action(3.0f),

CCCallFunc.action(this, "siguienteNivel")));

}

public static CCScene scene() {


CapaGanar capaSiguienteNivel =

new CapaGanar(ccColor4B.ccc4(0, 255, 0, 100));

scene.addChild(capaSiguienteNivel);

return scene;

}

public void siguienteNivel() {


}

@Override

public boolean ccTouchesEnded(MotionEvent event) {

siguienteNivel();

return true;

}

} Incluiremos un sistema muy similar al visto anteriormente que índice si el usuario ha ganado,

para ello Implementamos una comprobación al final el método gameLogic() que compruebe

que si queda algún bloque sin destruir en la lista de bloques.

if (pelota.getPosition().y < 50){

CCDirector.sharedDirector().replaceScene(CapaPerder.scene());

}

if (listaBloques.size() == 0){

CCDirector.sharedDirector().replaceScene(CapaGanar.scene());

}

}

29

12 Generación de niveles

Cuando el usuario finaliza la partida se encuentra con que aparece una pantalla que le indica

que ha superado el nivel, pero si pulsa sobre la pantalla vuelve a jugar exactamente el mismo

nivel.

Vamos a incluir un mecanismo sencillo que contabilice los niveles que el usuario logra

completar, y cada vez genere un nivel con un mayor número de bloques.

Inicialmente el nivel del juego será el nivel 1.

public class CapaJuego extends CCColorLayer {

public static int nivel = 1;



Modificamos el método inicializarBloques() para que en lugar de generar 25 bloques genere

un numero de bloques dependiente del nivel, por ejemplo 5 * nivel, que serían: 5 para el nivel

1, 10 para el nivel 2, 15 para el nivel 3, etc.


int insertados = 0;

int fila = 0;

int columna = 0;

while (insertados < 5*nivel) {

CCSprite bloque = generaBloqueAleatorio();

Modificamos el método siguienteNivel de la CapaGanar para que aumente en uno el nivel

actual del juego.

public void siguienteNivel() {

CapaJuego.nivel++;


}

30

13 Efectos de sonido:

Creamos la carpeta res/raw/ e introducimos en ella todos los efectos de sonido del juego

Creamos el método inicializarMusica() en la CapaJuego, este método iniciara la melodía de

fondo.

public static void iniciarMusica(){

/** Sonido */

Context context = CCDirector.sharedDirector().getActivity();

SoundEngine.sharedEngine().stopSound();

SoundEngine.purgeSharedEngine();

SoundEngine.sharedEngine().playSound(context, R.raw.sonidobucle, true);

}

En el constructor de la capa juego precargamos el sonido grunt (que utilizaremos

posteriormente) y posteriormente inicializamos la música del juego.


super(color);

// Tamaño de la pantalla, util para colocar objetos


/** Sonido */


SoundEngine.sharedEngine().preloadEffect(context, R.raw.grunt);

iniciarMusica();

Nos situamos en el gameLogic() y reproducimos el sonido grunt cuando la pelota impacte con un bloque.

if (CGRect.intersects(areaPelota, areaBloque)){

/** Sonido */


SoundEngine.sharedEngine().playEffect(context, R.raw.grunt);

listaBloquesParaDestruir.add(bloque);


}

Creamos un nuevo método en la CapaJuego que sirva para pausar la música, invocaremos a este método cuando el usuario se salga del juego. public static void pausarMusica(){

// Sonido

SoundEngine.sharedEngine().stopSound();

}

Completamos los métodos onPause() y onResume() de MainActivity para que paren e inicien

la música del juego.

31

@Override

public void onPause()

{

super.onPause();

CCDirector.sharedDirector().pause();

CapaJuego.pausarMusica();

}

@Override

public void onResume()

{

super.onResume();

CCDirector.sharedDirector().resume();

CapaJuego.iniciarMusica();

}

Desarrollo de Videojuegos Android con Cocos2D

Education

Transcript of Desarrollo de Videojuegos Android con Cocos2D