domingo, 7 de agosto de 2011

Tutorial Cocos2D: Juego completo (parte 1)

El ansiado tutorial está llegando a su fin, para no demorarlo ni crear una entrada tan larga, voy a dividir el tutorial en varias partes (creo que 3 o 4). Esta primera parte estará compuesta por la clase "Mazo" la cual os enseñará como crear animaciones con sprites.

Para empezar una clase, debemos tener claro como estructurarla y que función debe desempeñar. Esta clase que he diseñado, lo único que hace es crear un mazo. Un mazo no es otra cosa que un Sprite animado, por lo que es lógico que deba heredar de la clase CCSprite. Para ello debemos indicarlo en el @interface


#import 
#import "cocos2d.h"

@interface Mazo : CCSprite //Aquí nuestro mazo, hereda las propiedades de un sprite
{}

+(id) animacion; //Con este procedimiento, creamos un mazo (en lugar de init), que tendrá la propiedad "autorelease"
@end

Animación Mazo


#import "Mazo.h"

@implementation Mazo

+(id) animacion
{
 return [[[self alloc] init] autorelease];
}

-(void) creaAnimacion{

    NSMutableArray *arrayAnimacion = [NSMutableArray array];
    for(int i = 1; i <= 9; ++i) {
        [arrayAnimacion addObject:
         [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:
          [NSString stringWithFormat:@"Mazo00%d.png", i]]];
    }
    for(int i = 10; i <= 20; ++i) {
        [arrayAnimacion addObject:
         [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:
          [NSString stringWithFormat:@"Mazo0%d.png", i]]];
    }

    CCAnimation *animacion = [CCAnimation animationWithFrames:arrayAnimacion delay:1.0f/60.0f];
    CCAnimate *accionAnimacion = [CCAnimate actionWithAnimation:animacion restoreOriginalFrame:NO];
    CCSequence *secuencia = [CCSequence actions:accionAnimacion, [CCCallFunc actionWithTarget:self selector:@selector(elimina)],nil];    
    [self runAction:secuencia];
}

-(void) elimina{
    [self removeFromParentAndCleanup:YES];
}


// on "init" you need to initialize your instance
-(id) init
{
 if( (self=[super init])) {
        [self setDisplayFrame:[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"Mazo001.png"]];
        [self creaAnimacion];
 }
 return self;
}

-(void) dealloc{
    [super dealloc];
}

@end
Como véis, el Mazo se crea con "Autorelease" lo cual hace que no tengamos que preocuparnos de desalojar la memoria que ocupa. Teóricamente él sólo se "destruirá" después de completar la animación, gracias a esta línea:
CCSequence *secuencia = [CCSequence actions:accionAnimacion, [CCCallFunc actionWithTarget:self selector:@selector(elimina)],nil];
[self runAction:secuencia];
Y será eliminado porque ningún puntero está apuntando a esa dirección de memoria. Para que la clase al cargar las imágenes no de error, antes debemos de "cachear" las imágenes en la clase padre (esta clase padre será donde se desarolle todo el juego, y la mostraré en la tercera parte del tutorial):
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:[[NSBundle mainBundle] pathForResource:@"Mazo" ofType:@"plist"]];
    graficosMazo = [CCSpriteBatchNode batchNodeWithFile:[[NSBundle mainBundle] pathForResource:@"Mazo" ofType:@"png"]];
    [self addChild: graficosMazo];
Debemos hacerlo en el metodo init, para así asegurarnos de que la carga de las imagenes (cacheo) se hace una vez por inicio de nivel. Continuar leyendo la segunda parte del Tutorial Cocos2D

7 comentarios:

  1. Hola,

    Es de agradecer el tutorial que tas currao.

    Para empezar soy muy novato con el tema de juegos. Si se utilizar el interface builder y escribir el código en el xcode.

    Una preguntita? Para empezar a crear este juego, cual tengo que abrir de cocos2d porque hay 4 opciones diferentes. O tengo que abrir cualquier otro de application.

    Gracias,

    Saludos.

    ResponderEliminar
  2. deja te doy una ayudada a lo que he entendido yo, creas un nuevo proyecto partiendo de cocos2d Application -> enseguida creas una nueva clase, te posicionas en la carpeta "classes" de tu proyecto (en Xcode, no en finder) das click derecho y "Add" -> "New File" en la ventana que te aparecerá seleccionas "cocos2d x.xxxx" (en mi caso es User Templates -> "cocos2d 0.99.5" y en subclase "Sub Class" seleccionas "CCSprite" la nombras Mazo y listo, comienzas a escribir el código, primero en Mazo.h y después en Mazo.m, un saludo, espero haberte ayudado y espero Daniel nos ayude si es que lo hice mal :P

    ResponderEliminar
  3. Exacto. Como bien dice Óscar esos son los pasos a seguir. De todas formas, si tienes algún problema siguiendo el tutorial, puedes bajar todo el código fuente junto con el proyecto desde el apartado correspondiente en el menú lateral del blog. Saludos

    PD: estoy acabando el siguiente juego, un nivel mas avanzado que el primer tutorial, para mas pistas leed la ultima entrada.

    ResponderEliminar
  4. Hola.
    Te agradezco mucho por el tutorial, ya que soy nuevo en esto y me esta sirviendo de mucho.
    Solo que una parte no me salió y al intentar bajar el código fuente no pude, ya que como todos sabemos megaupload fue cerrado y no paso a amolar a todos
    Si podrías subir el archivo a mediafire o a la web que tu prefieras, me ayudarías mucho.
    Gracias y sigue con los tutoriales.

    ResponderEliminar
  5. y como se corre? (ya que yo tengo en mi proyecto un hola mundo que no se como diablos quitar) deberias poner mas detalle desde el inicio, ya que cualquier configuracion para el proyecto de cocos2d por defecto ya trae codigo, y eso nos dificulta seguir el hilo, saludos!

    ResponderEliminar
  6. He tenido poco tiempo y he tenido el blog un poco dejado, pronto volveré a subir el código fuente en otro servidor.

    Powerhdeleon, para quitar el hola mundo debes ir a el -(id) init de la clase helloWorld. Allí verás que se crea una etiqueta y se añade como hijo (child) de la escena. Puedes borrar todo el contenido del init, y dejarlo con sólo esta estructura:

    -(id) init{
    if (self=[super init]){
    }
    return self;
    }

    ResponderEliminar
  7. Hola, antes que nada muy buen aporte con el tutorial y he intentado descargar el archivo Animación Mazo pero no carga nada, sera que puedas subirlo otra ves el archivo y también en las otras partes del tutorial, me urge un poco ya que ando en un proyecto y esto me ayudaría mucho, gracias ...

    ResponderEliminar