Portal: Still Alive

This was a triumph. I'm making a note here: HUGE SUCCESS, It's hard to overstate my satisfaction. Aperture Science: We do what we must because we can for the good of all of us except for the ones who are dead, but there's no sense crying over every mistake. You just keep on trying 'till you run out of cake and the science gets done and you make a neat gun for the people who are still alive.

Ejecutar Cocos2D desde un Tab Bar UIKit

Creo que este es el quebradero de cabeza para todos los que comienzan o han comenzado a usar Cocos2D. Usualmente queremos meter en un tabbar de una app tradicional Uikit una aplicación desarrollada en Cocos2D (u otras) y lo único que podemos hacer es levantar un puño al cielo y maldecir en voz alta, eso, o gritar ¡NO SÉ QUE HACER!.

Lo sé, been there done that. Sin embargo, a medida que vas “toqueteando” la herramienta, te das cuenta de lo esencial: El Director ha de instanciarse en el AppDelegate, porque es la BASE de Cocos2D, es quién dirige y dice cuando debe ejecutarse cualquier escena de la app.

IMPORTANTE: 
En Cocos2D puedes usar cualquier UiView + TabBars + Botones etc, PERO debes hacerlo partiendo de Cocos2D como base porque la plantilla instancia todas las llamadas, clases y el Director ya se instancia dentro del AppDelegate.
Hasta ahora no he logrado hacerlo al revés, es decir, partiendo desde una aplicación UIKIT bruta y añadirle el framework de Cocos2D. Hay que hacer muchas maromas para lograrlo, añadir librerías, licencias, clases, y un largo etcétera.

 

Si este eres tú: “Dame el código y ya veré por mi cuenta como funciona”

 

 
Descarga el código aquí –> Sí, aquí

 

¡He comenzado la app en Cocos2D!

 

AppDelegate.h

¡Ok! Para comenzar no hay un .m sin un .h así que las variables y métodos accesores que vamos a emplear son los siguientes:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#import "uikit.h"
#import "General.h"
@class RootViewController;

@interface AppDelegate : NSObject{
UIWindow *window;
RootViewController *viewController;
General *general;
NSNotificationCenter *notifyCenter;
}
@property (nonatomic, retain) NSNotificationCenter *notifyCenter;
@property (nonatomic, retain) General *general;
@property (nonatomic, retain) UIWindow *window;</div>

- (void) showUIViewController:(UIViewController *) controller;
- (void) hideUIViewController:(UIViewController *) controller;
@end
  • General es la clase UIViewController, donde hemos creado el Tab Bar Controller.
  • NSNotificacionCenter es utilizada para, como su nombre lo indica, realizar notificaciones desde cualquier lugar de la app e indicarle al Director en el AppDelegate que debe ejecutar tal o cual escena de Cocos2D.
  •  RootViewController es el controlador root que Cocos2D utiliza para  manejar las rotaciones del iPhone/iPod/iPad.
  • window una UIWindow que funcionará para comunicarse con el Director y darle la información de la ventana del dispositivo.

AppDelegate.m

1.- Vale, lo primero es modificar el AppDelegate.m, colocando dentro de applicationDidFinishLaunching una notificación (la clase notifyCenter que se encargará de enviarle mensajes al AppDelegate desde otras clases cuando debe ejecutar las escenas en Cocos2D).
1
2
self.notifyCenter = [NSNotificationCenter defaultCenter];
[notifyCenter addObserver:self selector:@selector(trackNotifications:) name:nil object:nil];
1. 2.- Se instancia una variable UIWindow
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
[window setUserInteractionEnabled:YES];
[window setMultipleTouchEnabled:YES];

CCDirector *director = [CCDirector sharedDirector];
// Create an EAGLView with a RGB8 color buffer, and a depth buffer of 24-bits
EAGLView *glView = [EAGLView viewWithFrame:[window frame] kEAGLColorFormatRGBA8 depthFormat:0];
[glView setMultipleTouchEnabled:YES];

// attach the openglView to the director
[director setOpenGLView:glView];

// Enables High Res mode (Retina Display) on iPhone 4 and maintains low res on all other devices
if( ! [director enableRetinaDisplay:YES] )
CCLOG(@"Retina Display Not supported");
// make the OpenGLView a child of the main window
[window addSubview:glView];

// make main window visible
[window makeKeyAndVisible];

 2.-  Creamos una clase CCScene , en el código se llama GameScene, que no contendrá nada de código excepto por el que viene por defecto con la misma clase, solo servirá para que el Director sepa que es lo que deberá ejecutar, es como un cascarón o wrapper en Cocos2D. Luego instanciamos en el applicationDidFinishLaunching.

 

Ojo, escribo los comentarios dentro del código en inglés por comodidad y costumbre.
1
2
3
//This must be a CCScene Class, the Director will start to use Cocos2D
GameScene *gs = [GameScene node];
[[CCDirector sharedDirector] runWithScene:gs];
 3.- Al final del applicationDidFinishLaunching  hacemos llamada a un XIB que contiene el Tab Bar Controller
1
2
3
4
5
6
//uiview to be opened

General *principal;
principal = [[General alloc] initWithNibName:@"General" bundle:nil];
self.general = principal;
[principal release];

4.-  Y por último hacemos la llamada al UIview

1
[self showUIViewController:general];

 

Método de Notificación: trackNotifications

Como comenté anteriormente, se hace un método de notificación de llamadas a escenas de Cocos2D de la siguiente forma (en el mismo AppDelegate)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
- (void) trackNotifications: (NSNotification *) notification

{
id nname = [notification name];

if([nname isEqual:@"empezarPrueba"])
{
[self hideUIViewController:general];

// Obtain the shared director in order to...
CCDirector *director = [CCDirector sharedDirector];

// Sets landscape mode
[director setDeviceOrientation:kCCDeviceOrientationLandscapeLeft];

//CCDeviceOrientationPortrait
// Turn on display FPS
[director setDisplayFPS:NO];

// Turn on multiple touches
EAGLView *view = [director openGLView];
[view setMultipleTouchEnabled:YES];

// Default texture format for PNG/BMP/TIFF/JPEG/GIF images
// It can be RGBA8888, RGBA4444, RGB5_A1, RGB565
// You can change anytime.

[CCTexture2D setDefaultAlphaPixelFormat:kCCTexture2DPixelFormat_RGBA8888];
[[CCDirector sharedDirector] pushScene: [CCTransitionMoveInB transitionWithDuration:0.0f scene:[HelloWorldLayer scene]]];
}
}
 Nótese que el Director está siendo instanciado en este método, y que por defecto  se suele hacer en el  applicationDidFinishLaunching, además pueden apreciar que hay una condicional si es igual al nombre de una notificación, en este caso “empezarPrueba”  y el Director hace un pushScene de la escena HelloWorldLayer que es la escena Cocos2D que quiero se ejecute. Si quiero varias escenas, basta con hacer varios condicionales IF con los nombres de las notificaciones para cada una.
 Los métodos showUIViewController y  hideUIViewController tienen por finalidad ejecutar animaciones relacionadas a las llamadas de escenas.

 

Clase General

General es una clase UIViewController, que se crea como cualquier otra clase, simplemente vas a File –> New –> New File y seleccionamos la clase UiKit que queramos usar. En el XIB colocamos el Tab Bar Controller.

 

El contenido de General.h es el siguiente
1
2
3
4
5
6
7
8
#import "uikit.h"
@interface General : UIViewController {
IBOutlet UITabBarController *rootController;

}

@property (nonatomic, retain) IBOutlet UITabBarController *rootController;
@end
Es el código que se crea por defecto, de hecho no hay que hacer nada más en el .h ni nada más en el .m.

 

Clase  PreJuego

En PreJuego.m tenemos un método IBAction, es el que asociaremos al XIB (PreJuego.xib) para que se envíe la notificación al AppDelegate y el Director pueda ejecutar la escena en Cocos2D.
¿Por qué crear otra clase para hacer la llamada a la escena en Cocos2D?
Esto es así de enrevesado, porque los tabbar funcionan solo con los ViewControllers,  y no se puede asociar directamente del TabBar una escena cocos2D, por lo que hay que crear un UIViewController, y dentro de esta clase crear un botón (desde Utilities) , que hace el proceso de notificación de la escena Cocos2D en el AppDelegate.
Este es el código dentro de PreJuego.h
1
2
3
4
5
6
#import "uikit.h"

@interface PreJuego : UIViewController {
}
- (IBAction) empezarprueba: (id)sender;
@end
Este es el código dentro de PreJuego.m
1
2
3
- (IBAction) empezarprueba:(id)sender{
[[NSNotificationCenter defaultCenter] postNotificationName:@"empezarPrueba" object:@""];
}
Pues eso, ya puedes ejecutar escenas cocos2D desde un Tab Bar. Espero que les ayude y se haya entendido. Si existe alguna duda, pueden escribirme un comentarios abajo.
Keep it up people!
P.D = perdonen que el código no esté identado, aún no logro que este snippet de WordPress funcionen bien. Grrr!
Share

Codemotion y Taller de Cocos2D

¡Hola!

Para iniciar el post debo agradecer a todos los asistentes al taller que impartí de Cocos2D en el gran evento Codemotion, de técnicos para técnicos. A pesar del calor y del error 404 a la hora de descargar el código (no podía dejar de haber algún fail en directo :P ) creo que ha sido una increíble experiencia, y satisfizo en todos los niveles mis expectativas. Los que han asistido al taller estaban muy interesados en el tema, y creo que salieron de el aún más interesados en el framework. Espero que a pesar del corto tiempo dedicado a la charla les haya servido de algo.

Y, pues nada, estoy super agradecida por los comentarios positivos y del apoyo de todos vosotros. Por eso ¡GRACIAS!.

Ahora, les dejo la presentación PPT y el código fuente del taller en Cocos2D. Recuerden que dentro (en el código fuente) está una guía que explica paso a paso cada parte del código, e igualmente si tenéis dudas no teman en contactarme bien sea por twitter o mail: phyonline[arroba]gmail[punto]com. Intentaré resolver sus dudas en lo que pueda.

Descarga Directa Código Fuente: http://t.co/lPRNbbUF 

Enlace a Medianet: http://www.medianet.es/1499/nuestros-companeros-en-codemotion/

¡Seguimos!

Share

Nyan Cat Shoot’em

Idea que tengo para desarrollar un Shooter de Nyan Cat para iPhone, este video está un poco desactualizado (sobretodo porque el Sprite no llegaba al borde superior o inferior del iPhone, cosa que ya está resuelta, y mostraré en una entrega posterior) pero se nota lo qué se puede hacer con Cocos2D for iPhone. He utilizado para el Scrolling Parallax el tutorial de Ray Wenderlich (por si tenías dudas).

Nyan nyan nyan nyan nyan

Share

Introducción a Videojuegos 2D y Cocos2D

Hola, como había comentado anteriormente comparto las láminas de la presentación que usé para la charla, está un poco más tuneada. También comparto el código fuente de como usar sprites y animaciones, que es el inicio para usar cocos2D. Puedes leer en el archivo rtf interno del proyecto una guía completa de qué significa cada clase, objeto, referencia, etc dentro del código. De todos modos es lo que colocaré a continuación en el próximo post.

Si tienes alguna duda, puedes preguntarme con total confiaza.

Descargar Código Fuente: Aquí

 

Fotografías empleadas:
Browser Games: www.emezeta.com
PowerPoint Game: Sloked
C++ Game: AhmedOoOR Youtube perfil
Cocos2D: cocos2d.org
Terrain Parallax: iphonegametutorials.com

Bibliografía:
Oscar García Panella – Serious Games
Jesse Schell – The Art of Game Design

Video
Entrevista Ricardo Quesada por RevolucionMobi

 

Share

Charla sobre Cocos2D

En mi oficina me han propuesto dar un Kit o charla el día 26/01/2011 sobre el entorno de desarrollo Cocos2D for iPhone y cómo comenzar , para todos los desarrolladores que trabajan en Medianet  que quieran conocer sobre ella.

Sin embargo, quería aprovechar esta entrada para hacerles saber a los que pasan por aquí queriendo aprender algo en Coco2D que subiré las diapositivas, las preguntas que hagan en la charla el día 28/01/2011 y  posteriormente pretendo escribir un tutorial de iniciación del Framework con algunos tips. Se me ocurría incluso traducir algunos post de Ray Wenderlich (pidiendo permiso primero) para aquellos desarrolladores de habla hispana que les cuesta entender el inglés, pero todo con calma.

Eso. Nueva aventura.

Saludos.

Share

Instalación de Cocos2D

 

 

1.- Descargar de la página web oficial de Cocos2d la librería:  http://www.cocos2d-iphone.org/download

2.- Guardalo en el directorio que te plazca.

3.- Descomprimelo.

4.- Si lo has almacenado en el directorio raíz abre la terminal (ve a spotlight [la lupa que se encuentra en la barra de menú principal] y escribe “terminal”) y  ejecuta el siguiente comando:

 ./install-templates.sh

Pero, si lo has almacenado en cualquier otro directorio, debes navegar hasta él dentro de la consola con el comando de búsqueda “cd”, por ejemplo:

cd  Desktop/Cocos2D/cocos2d-iphone-1.1-beta

y luego debes ejecutar el comando de instalación:

sudo ./install-templates.sh

Te pedirá la contraseña de tu ordenador, e instalará todas las planitllas y librerías de Cocos2D.

4.- Abre Xcode y comprueba que esten las tres entidades de cocos2D: cocos2D, box2d y chipmunk2d. Tal como se muestra en la imagen.

Si no te aparecen, vuelve a la consola y ejecuta el siguiente comando, para forzar la reinstalación:

./install-templates.sh -f -u

Vuelve a abrir el XCode y comprueba que existan las entidades. Si es así, ¡ya puedes comenzar a utilizar Cocos2D!

 

Share