Sobre la gua

GUA IOS
Versin 2 / noviembre 2011 Nivel: Intermedio / Avanzado La Gua iOS se encuentra en lnea en:
http://www.maestrosdelweb.com/editorial/guia-desarrollo-iphone-ipad/

Un proyecto de Maestros del Web

Autor: Javier Cala Uribe Edicin: Eugenia Tobar Diseo y diagramacin: Ivn E. Mendoza

Este trabajo se encuentra bajo una licencia Creative Commons

Atribucin-NoComercial-CompartirIgual 3.0 Unported (CC BY-NC-SA 3.0)

CONTACTO
http://www.maestrosdelweb.com/sitio/correo/

REDES SOCIALES
Facebook: http://www.facebook.com/maestrosdelweb Twitter: http://www.twitter.com/maestros

Sobre el autor

JAVIER CALA URIBE

Ingeniero de Sistemas, actualmente es desarrollador para iOS (Objective-C) con 2 aos de experiencia en la plataforma y ms de 4 aos como programador. Ha publicado 15 aplicaciones en la App Store de Apple y cooperado en el desarrollo de tres proyectos de aplicaciones. Contribuy al diseo, anlisis e implementacin de interfaces entre sistemas SAP Enterprise Resource Planning (ERP) y un sistema legado basado en RPG/ COBOL sobre i5/OS (iSeries IBM). Tambin dise e implement el ciclo de pruebas para un sistema de administracin de recursos basado en ASP.NET.

Introduccin

INTRODUCCIN
En la actualidad existe un fuerte inters por parte de los programadores en el desarrollo de aplicaciones para dispositivos mviles como: iPad, iPhone e iPod Touch. Dispositivos mviles que se hacen cada vez ms populares en el mercado de las comunicaciones, porque proporcionan una plataforma con sistema operativo como iOs 5.0. La adquisicin de este tipo de aparatos por parte de los usuarios se incrementa en la medida que encuentran en ellos nuevas aplicaciones o servicios que satisfacen sus necesidades bsicas, profesionales, educativas y de entretenimiento. Tienes en tu pantalla la Gua de desarrollo de aplicaciones para iOs (iPhone/ iPad / iPod Touch) de Maestros del Web diseada con el objetivo de ensearte las principales caractersticas del entorno de programacin para dispositivos mviles con una serie de ejemplos y recursos que muestran la facilidad de las herramientas de desarrollo.

NDICE
1 | Sobre la gua .......................................................................................................... 2 2 | Sobre el autor......................................................................................................... 3 3 | Introduccin ........................................................................................................... 4 4 | Desarrollando aplicaciones para dispositivos mviles .......................................... 6 5 | Uso del navegador en un app .............................................................................. 14 6 | Uso del correo ...................................................................................................... 21 7 | Capturar imgenes desde la cmara del iPhone .................................................. 31 8 | Uso de varias vistas .............................................................................................. 39 9 | Trabajando con bases de datos SQL Lite .............................................................. 45 10 | Trabajando con el API de Facebook Connect .................................................... 52 11 | Trabajando con el API de Twitter ...................................................................... 58 12 | Trabajando con el API de OpenFeint ................................................................. 67 13 | Desarrollo de vdeo juegos para dispositivos mviles....................................... 75 14 | Chipmunk, motor de fsica 2D Parte 1 ........................................................... 76 15 | Chipmunk, motor de fsica 2D Parte 2 .......................................................... 82 16 | Chipmunk, motor de fsica 2D y el acelermetro Parte 3 ............................. 88 17 | Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 1 ............... 95 18 | Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 2 ...............99 19 | Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 3 ............. 105

captulo

Desarrollando aplicaciones para dispositivos mviles

CAPTULO I

DESARROLLANDO APLICACIONES PARA DISPOSITIVOS MVILES

iOS es el sistema implementado por Apple que permite ejecutar aplicaciones nativas en los dispositivos mviles: iPhone, iPod Touch y iPad. La arquitectura de esta plataforma toma como base el ncleo del Sistema Mac OS X e incorpora una nueva capa que da soporte a la interfaz multi-touch.

Los requistos mnimos para desarrollar en esta plataforma son:

Mac OS X 10.6 (Snow Leopard) o posterior iOS SDK 5.0 o posterior Dispositivo mvil para pruebas (opcional)

El iOS SDK contiene el cdigo, la informacin y las herramientas necesarias para desarrollar, probar, ejecutar, depurar y ajustar las apps para el iOS. Dentro de este kit encontramos tres aplicaciones fundamentales:

Xcode: contiene un conjunto de herramientas para el desarrollo de las aplicaciones, permite editar, depurar y compilar el cdigo fuente. Interface Builder: permite la creacin de interfaces grficas y vinculacin con Xcode. (A partir de Xcode 4, interface builder est incorporado en la misma interfaz que Xcode) iOS Simulator: ejecuta las aplicaciones desarrolladas en un emulador del dispositivo.

CREANDO UN PROYECTO EN XCODE Y EL IOS SIMULATOR

1. Abrir Xcode e ir a File->New Project y seleccionar Single View Application

2. Declarar una etiqueta (UILabel) y una funcin (IBAction) en la clase ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController { UILabel *miEtiqueta; } @property (nonatomic, retain) IBOutlet UILabel *miEtiqueta; - (IBAction)cambiarEtiqueta:(id)sender; @end 3. Definir la funcin (IBAction) en ViewController.m @synthesize miEtiqueta; - (IBAction)cambiarEtiqueta:(id)sender { miEtiqueta.text = @Bazzinga!;

10

} - (void)dealloc { [miEtiqueta release]; [super dealloc]; } 4. Abrir con doble clic el archivo ViewController.xib, agregar una etiqueta (UILabel) y un botn

(UIButton) en la vista del controlador.

11

5. En la ventana Connections Inspector arrastrar miEtiqueta hasta la etiqueta creada y la funcin

cambiarEtiqueta hasta el botn creado.

12

6. Presionar en Xcode el botn Run

La aplicacin se ejecutar en el iOS Simulator como lo muestra la imagen anterior. Tambin se puede ejecturar la misma aplicacin para iPad por ser definida inicialmente como Universal app.

Para encontrar ms informacin sobre el entorno de programacin del sistema iOS pueden revisar: http://developer.apple.com/technologies/tools/xcode.html

13

Enlace: http://j.mp/sXbaU7

captulo

Uso del navegador en un app

15

CAPTULO 2

USO DEL NAVEGADOR EN UN APP

Ahora, aprenderemos a utilizar la clase UIWebView1 que nos permite mostrar contenido web embebido en el dispositivo mvil.

CONOCIENDO UIWEBVIEW
UIWebView despliega informacin Web embebida en nuestra aplicacin sin necesidad de salir de la misma, es decir, el usuario puede ver contenidos Web en la aplicacin sin abrir Safari en el dispositivo. Aunque claramente la clase UIWebView esta basada en Safari, no requiere cerrar la aplicacin para mostrar los contenidos. La implementacin es realmente sencilla, solo se debe crear un objeto UIWebView y cargar el contenido web. Tambin se puede agregar la opcin de avanzar o retroceder en el historial de navegacin.
UIWEBVIEW EN ACCIN
1. Crear un nuevo proyecto en Xcode de tipo Single View Application

1 http://j.mp/vQm9a1

16

2. En ViewController.h declarar los elementos #import <UIKit/UIKit.h> { } @interface ViewController : UIViewController <UIWebViewDelegate> IBOutlet UIWebView *webView; @end 3. Abrir el archivo ViewController_iPhone.xib y agregar los siguientes elementos declarados

previamente: 1 UIWebView y 3 botones

4. Seleccionar el objeto UIWebView y desde el Inspector Connections arrastrar: delegate, goBack,

goForward, reload.

17

18

5. Volviendo a Xcode definir la funcin en ViewController.m - (void)viewDidLoad { [super viewDidLoad]; NSURL *url = [NSURL URLWithString:@http://www.maestrosdelweb.com]; NSURLRequest *loadURL = [[NSURLRequest alloc] initWithURL:url]; [webView loadRequest:loadURL]; [loadURL release]; }

19

COMPILAR Y EJECUTAR:

Si ha salido todo bien debe cargar la pgina previamente definida en la funcin (void)viewDidLoad. La clase UIWebView es de gran utilidad para mantener la informacin actualizada de una aplicacin y tambin permite mayor libertad en el diseo para la presentacin de los contenidos. Igualmente se pueden cargar archivos HTML localmente, previamente definidos en la aplicacin.

20

Enlace: http://j.mp/s2daly

captulo
Uso del correo

22

CAPTULO 3

USO DEL CORREO

En este captulo revisaremos un tema de gran utilidad para compartir informacin: el uso del correo a partir de la versin 3.0 iOS, esta disponible la clase MFMailComposeViewController para enviar correos desde el iPhone. Las versiones anteriores utilizan la aplicacin Mail que trae por defecto el dispositivo. En este captulo veremos como implementar la clase MFMailComposeViewController.

EXPLORANDO MFMAILCOMPOSEVIEWCONTROLLER:
Esta clase brinda una interfase que permite administrar, editar y enviar correos electrnicos. Cuenta con un formulario predefinido con los campos: subject, email recipients, body text y attachments, es decir, un formulario normal de correo. Uno de los inconvenientes con esta clase es que no permite verificar si efectivamente el correo enviado lleg a su destino. La clase se encarga de colocar los mensajes enviados en el buzn de salida de la aplicacin Mail, resultando til para el envo de correos electrnicos cuando no se cuenta con conexin a la red, pero inapropiado para confirmar el envo. Para ms informacin sobre esta clase puedes consultar MFMailComposeViewController Class Reference1.

1 http://j.mp/u4yrWJ

23

SENT FROM MY IOS SIMULATOR

1. Crear un nuevo proyecto en Xcode de tipo Single View Application

2. Agregar el framework MessageUI:

24

3. En ViewController.h agregar los elementos: #import <UIKit/UIKit.h> #import <MessageUI/MessageUI.h> #import <MessageUI/MFMailComposeViewController.h> @interface ViewController : UIViewController // Delegate de la clase MFMailComposeViewController <MFMailComposeViewControllerDelegate> { IBOutlet UILabel *respuesta; } @property (nonatomic, retain) IBOutlet UILabel *respuesta; // Verifica si esta disponible la clase MFMailComposeViewController -(IBAction)verEditMail:(id)sender; // Configura vista para editar y enviar un email -(void)configurarMail; // Ejecuta la App Mail del dispositivo -(void)ejecutarMailApp; @end

25

4. Abrir el archivo ViewController.xib en Interface Builder, agregar los elementos UIButton, UILa-

bel y relacionarlos con la App:

26

5. Definir las siguientes funciones de ViewController.m en Xcode: @synthesize respuesta; { - (IBAction)verEditMail:(id)sender Class mailClass = (NSClassFromString(@MFMailComposeViewController)); if (mailClass != nil) {

// Verifica que este habilitada la opcion para enviar correos en el dispositivo if ([mailClass canSendMail]) [self configurarMail]; else }

[self ejecutarMailApp]; else }

[self ejecutarMailApp]; // Configura vista para editar y enviar un email - (void)configurarMail {

MFMailComposeViewController *mailView = [[MFMailComposeViewController alloc] init]; mailView.mailComposeDelegate = self; // Destinatarios

[mailView setSubject:@Mejorando la Web!]; NSArray *toRecipients = [NSArray /* <![CDATA[ */

arrayWithObject:@cvander@maestrosdelweb.com<script type=text/javascript> (function(){try{var s,a,i,j,r,c,l=document.getElementById(__cf_email__);

a=l.className;if(a){s=;r=parseInt(a.substr(0,2),16);for(j=2;a.lengthj;j+=2) {c=parseInt(a.substr(j,2),16)^r;

s+=String.fromCharCode(c);}s=document.createTextNode(s); l.parentNode.replaceChild(s,l);}}catch(e){}})();

27

/* ]]> */

</script>]; com<script

NSArray *ccRecipients = [NSArray arrayWithObjects:@info@forosdelweb. type=text/javascript> /* <![CDATA[ */ (function(){try{var s,a,i,j,r,c,l=document.getElementById(__cf_email__); a=l.className;if(a){s=;r=parseInt(a.substr(0,2),16);for(j=2;a.lengthj;j+=2) {c=parseInt(a.substr(j,2),16)^r;

s+=String.fromCharCode(c);}s=document.createTextNode(s); l.parentNode.replaceChild(s,l);}}catch(e){}})(); /* ]]> */ </script>, nil];

[mailView setToRecipients:toRecipients]; [mailView setCcRecipients:ccRecipients]; // Mensaje NSString *emailBody = @Un saludo a tod@s!;

[mailView setMessageBody:emailBody isHTML:NO]; [mailView release]; }

[self presentModalViewController:mailView animated:YES];

- (void)mailComposeController:(MFMailComposeViewController*)controller didFinishWithResult:(MFMailComposeResult)result error:(NSError*)error { respuesta.hidden = NO; switch (result) {

// Notifica al usuario los resultados del envio

case MFMailComposeResultCancelled: break;

respuesta.text = @Mensaje: cancelado; case MFMailComposeResultSaved:

respuesta.text = @Mensaje: guardado;

28

break;

case MFMailComposeResultSent: break;

respuesta.text = @Mensaje: enviado; case MFMailComposeResultFailed: break;

respuesta.text = @Mensaje: fall; default: break; } }

respuesta.text = @Mensaje: no enviado;

[self dismissModalViewControllerAnimated:YES]; // Ejecuta la App Mail del dispositivo -(void)ejecutarMailApp {

NSString *recipients = @mailto:cvander@maestrosdelweb.com<script type=text/javascript> /* <![CDATA[ */

(function(){try{var s,a,i,j,r,c,l=document.getElementById(__cf_email__); a=l.className;if(a){s=;r=parseInt(a.substr(0,2),16);for(j=2;a.lengthj;j+=2) {c=parseInt(a.substr(j,2),16)^r;

s+=String.fromCharCode(c);}s=document.createTextNode(s); l.parentNode.replaceChild(s,l);}}catch(e){}})(); /* ]]> */

</script>?cc=info@forosdelweb.com<script type=text/javascript> /* <![CDATA[ */ (function(){try{var s,a,i,j,r,c,l=document.getElementById(__cf_email__); a=l.className;if(a){s=;r=parseInt(a.substr(0,2),16);for(j=2;a.lengthj;j+=2) {c=parseInt(a.substr(j,2),16)^r;

s+=String.fromCharCode(c);}s=document.createTextNode(s); l.parentNode.replaceChild(s,l);}}catch(e){}})();

29

/* ]]> */ </script>&subject=Mejorando la Web!; NSString *body = @&body=Un saludo a tod@s!; NSString *email = [NSString stringWithFormat:@%@%@, recipients, body]; email = [email stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]; [[UIApplication sharedApplication] openURL:[NSURL URLWithString:email]]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; } - (void)dealloc { [respuesta release]; [super dealloc]; }

6. Compilar y ejecutar:

30

Enlace: http://j.mp/uMACMe

captulo

Capturar imgenes desde la cmara del iPhone

32

CAPTULO 4

CAPTURAR IMGENES DESDE LA CMARA DEL IPHONE

Utilizaremos el controlador UIImagePickerController para acceder a las imgenes guardadas en el dispositivo o capturar imgenes desde un iPhone.

ARQUITECTURA DE COCOA-TOUCH
Antes de entrar en detalle repasemos un poco la arquitectura utilizada por Cocoa-Touch1 (iOS SDK) para reconocer que elementos del framework implementaremos segn nuestras necesidades:

Esta arquitectura (Modelo-Vista-Controlador) separa los datos, interfaz de usuario y lgica de control en tres componentes como se aprecia en el grfico. Para el caso del iOS SDK podemos ejemplificar la arquitectura de la siguiente manera: Core Data2 (Modelo), UIView3 (Vista), UIViewController4 (Controlador). En este captulo utilizaremos el controlador UIImagePickerController, el cual se encarga de gestionar la implementacin de imgenes o vdeo en una aplicacin. Esta clase controla la interface de usuario y retorna el mensaje una vez terminada su utilizacin.

1 2 3 4

http://developer.apple.com/technologies/iphone/cocoa-touch.html http://developer.apple.com/macosx/coredata.html http://developer.apple.com/iphone/library/documentation/uikit/reference/UIView_Class/UIView/UIView.html http://j.mp/tkqT0S

33

UIIMAGEPICKERCONTROLLER EN ACCIN:
1. Crear un nuevo proyecto en Xcode de tipo Single View Application

2. Agregar los siguientes elementos en ViewController.h: #import <UIKit/UIKit.h> @interface ViewController : UIViewController <UIImagePickerControllerDelegate, UINavigationControllerDelegate> { UIImageView *imagenView; UIButton *abrirGaleria; UIButton *tomarFoto; } @property (nonatomic, retain) IBOutlet UIImageView *imagenView; @property (nonatomic, retain) IBOutlet UIButton *abrirGaleria; @property (nonatomic, retain) IBOutlet UIButton *tomarFoto; - (IBAction)abrirGaleria:(id)sender; - (IBAction)tomarFoto:(id)sender; @end

34

3. Abrir el archivo ViewController.xib y agregar 1 UIImageView y 2 UIButton

4. Desde el Connections Inspector enlazar los elementos creados en Xcode:

35

5. Definir en Xcode las funciones declaradas previamente: #import ViewController.h @implementation ViewController

@synthesize imagenView, abrirGaleria, tomarFoto; - (IBAction)abrirGaleria:(id)sender { // Inicia el Controlador // Define el Delegate

UIImagePickerController * picker = [[UIImagePickerController alloc] init]; picker.delegate = self;

// Establece el origen de la imagen

picker.sourceType = UIImagePickerControllerSourceTypeSavedPhotosAlbum; // Agrega la vista del controlador a la pantalla { if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad) UIPopoverController *popover = [[UIPopoverController alloc] initWithContentViewController:picker];

36

[picker release]; inView:self.view animated:YES]; } else } {

[popover presentPopoverFromRect:CGRectMake(200, 940.0, 0.0, 0.0) permittedArrowDirections:UIPopoverArrowDirectionAny

[self presentModalViewController:picker animated:YES]; - (IBAction)tomarFoto:(id)sender UIImagePickerController * picker = [[UIImagePickerController alloc] init]; picker.delegate = self; picker.sourceType = UIImagePickerControllerSourceTypeCamera; [self presentModalViewController:picker animated:YES]; } // Recibe el mensaje cuando el controlador a finalizado didFinishPickingMediaWithInfo:(NSDictionary *)info { // Quita la vista del controlador [picker dismissModalViewControllerAnimated:YES]; // Establece la imagen tomada en el objeto UIImageView imagenView.image = [info objectForKey:@UIImagePickerControllerOriginalImage]; } - (void)dealloc { [imagenView release]; [abrirGaleria release]; [tomarFoto release]; [super dealloc]; }

- (void)imagePickerController:(UIImagePickerController *)picker

37

6. Compilar y ejecutar:

Si esperas tomar fotos desde el iOS Simulator recibirs un sorprendente mensaje en la consola.

38

Enlace: http://j.mp/tOl2so

captulo

Uso de varias vistas

40

CAPTULO 5

USO DE VARIAS VISTAS

Revisaremos los principales mtodos utilizados para navegar dentro de una aplicacin: UINavigationController1 y UITabBarController2. Dependiendo del diseo que definamos, se puede utilizar cualquiera de los dos, incluso ambos en la misma aplicacin.

DIFERENCIA ENTRE UINAVIGATIONCONTROLLER Y UITABBARCONTROLLER

Una imagen dice ms que mil palabras, as que dos dicen muchsimo ms:

1 http://j.mp/sclxU9 2 http://j.mp/rLY96e

41

UINavigationController crea una jerarqua de vistas, a diferencia de UITabBarController que genera instancias independientes de vistas. Tambin es posible implementar el controlador UINavigationController dentro de los elementos de un UITabBarController.

IMPLEMENTANDO UINAVIGATIONCONTROLLER Y UITABBARCONTROLLER

1. Crear un nuevo proyecto en Xcode de tipo Empty Aplication

2. Agregar los siguientes elementos en AppDelegate.h: #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> { UIWindow *window; UITabBarController *tabBarController; UINavigationController *navigationController; } @property (strong, nonatomic) UIWindow *window; @end

42

3. Inicializa los controladores con solo cdigo sin usar Interface Builder desde AppDelegate.m: - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions: (NSDictionary *)launchOptions

{// Inicializa los controladores

navigationController = [[UINavigationController alloc] init]; tabBarController = [[UITabBarController alloc] init]; // Inicializa la primer vista del TabBarController

UIViewController *primerViewController = [[UIViewController alloc] init]; primerViewController.view.backgroundColor = [UIColor whiteColor]; primerViewController.title = @Primero; // Inicializa la segunda vista del TabBarController

UIViewController *segundoViewController = [[UIViewController alloc] init]; segundoViewController.view.backgroundColor = [UIColor whiteColor]; segundoViewController.title = @Segundo; // Agrega la segunda vista al controlador UINavigationController // Agrega las vistas creadas al controlador UITabBarController // 1. Primer Vista = UIViewController // 2. Segunda Vista = UINavigationController

[navigationController pushViewController:segundoViewController animated:NO];

[tabBarController setViewControllers:[NSArray animated:YES];

arrayWithObjects:primerViewController, navigationController, nil] // Libera memoria con los controladores ya utilizados [primerViewController release]; [segundoViewController release]; // Agrega el controlador UITabBarController a la ventana principal self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease]; self.window.rootViewController = tabBarController; [self.window makeKeyAndVisible]; // Retorna YES XD return YES; }

43

4. Compilar y Ejecutar:

Al final obtendrs dos vistas desde el UITabBarController, una de ellas contiene un UINavigationController. Tambin se pueden implementar estos controladores utilizando Xcode que de manera muy intuitiva permite arrastrar y establecer los controladores respectivos. En caso de presentar algn inconveniente en los pasos puedes descargar y realizar el proceso de Build and Run.
DESCARGAR

http://www.maestrosdelweb.com/images/2010/06/UINavTabApp.zip

44

Enlace: http://j.mp/t423T8

captulo

Trabajando con bases de datos SQL Lite

46

CAPTULO 6

TRABAJANDO CON BASES DE DATOS SQL LITE

En el desarrollo de aplicaciones para el iPhone constantemente nos encontramos con la necesidad de guardar informacin y disponer de ella ms adelante. Para dar solucin a esto podemos implementar SQLite1 un pequeo, rpido y confiable sistema de gestin de bases de datos que est disponible para el iPhone.

CARACTERSTICAS DE SQLITE:

Es un motor de base de datos SQL embebido y no tiene un proceso de servidor independiente. Lee y escribe directamente en archivos de disco normal. Est contenida en un archivo de disco nico y una completa base de datos2 con tablas, ndices y vistas. Formato de archivo de base de datos multi-plataforma (32-bits y 64-bits). No considerar SQLite como un reemplazo para Oracle3, sino como un sustituto de fopen ()4

IMPLEMENTANDO SQLITE EN UNA APLICACIN:

Para administrar los archivos creados que se utilizarn en nuestra aplicacin podemos descargar SQLite Database Browser5, una aplicacin gratuita que nos brinda una interfaz grfica para crear, disear y editar archivos de base de datos compatibles con SQLite. Empezaremos creando un proyecto en Xcode.

1 2 3 4 5

http://sqlite.org/ http://es.wikipedia.org/wiki/Base_de_datos http://es.wikipedia.org/wiki/Oracle http://www.opengroup.org/onlinepubs/009695399/functions/fopen.html http://sourceforge.net/projects/sqlitebrowser/

47

1. Crear un archivo de base de datos con las siguiente estructura

2. Agregar el archivo de base de datos y la librera libsqlite3.dylib al proyecto

48

3. Definir un mtodo para la creacin del archivo de base de datos en la aplicacin: - (void)createEditableCopyOfDatabaseIfNeeded { BOOL success; NSFileManager *fileManager = [NSFileManager defaultManager]; NSError *error; NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES); NSString *documentsDirectory = [paths objectAtIndex:0]; NSString *writableDBPath = [documentsDirectory stringByAppendingPathComponent:@myDB]; success = [fileManager fileExistsAtPath:writableDBPath]; // Si ya existe el archivo, no lo crea -_if (success) return; // Crea el archivo en el dispositivo

49

NSString *defaultDBPath = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@myDB]; success = [fileManager copyItemAtPath:defaultDBPath toPath:writableDBPath error:&error]; if (!success) NSAssert1(0, @Failed to create writable database file with message %@., [error localizedDescription]); } 4. Definir el mtodo para realizar las consultas en la base de datos: -(void)executeSentence:(NSString *)sentence sentenceIsSelect:(BOOL )isSelect{ // Variables para realizar la consulta static sqlite3 *db; sqlite3_stmt *resultado; const char* siguiente; // Buscar el archivo de base de datos NSUserDomainMask, YES);

NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSString *documentsDirectory = [paths objectAtIndex:0]; // Abre el archivo de base de datos if (isSelect){

NSString *path = [documentsDirectory stringByAppendingPathComponent:@myDB]; if (sqlite3_open([path UTF8String], &db) == SQLITE_OK) { // Ejecuta la consulta

if ( sqlite3_prepare(db,[sentence UTF8String],[sentence length],&resultado,&siguiente) == SQLITE_OK ){ // Recorre el resultado while (sqlite3_step(resultado)==SQLITE_ROW){

NSLog([NSString stringWithFormat:@ID:%@ NAME:%@ INFO:%@,

[NSString stringWithUTF8String: (char *)sqlite3_column_text(resultado, 0)], [NSString stringWithUTF8String: (char *)sqlite3_column_text(resultado, 1)], ); } } [NSString stringWithUTF8String: (char *)sqlite3_column_text(resultado, 2)] ]

50

else {

// Ejecuta la consulta

if ( sqlite3_prepare_v2(db,[sentence UTF8String],[sentence length],&resultado,&siguiente) == SQLITE_OK ){ sqlite3_step(resultado); } } } // Cierra el archivo de base de datos sqlite3_close(db); } sqlite3_finalize(resultado);

5. Definir las consultas a realizar - (void)viewDidLoad { [super viewDidLoad];

[self createEditableCopyOfDatabaseIfNeeded]; Programador );

NSString *sentencetDB = @insert into userTable values ( NULL, Javier, [self executeSentence:sentencetDB sentenceIsSelect:NO]; sentencetDB = @select * from userTable; } [self executeSentence:sentencetDB sentenceIsSelect:YES]; 6. Compilar y ejecutar:

En la consola se podrn observar los resultados de la consulta realizada. Para asegurar que todo esta bien, pudes descargar el proyecto para realizar el genial procedimiento de Build and Run. Descargar: http://www.maestrosdelweb.com/images/2010/04/myProjectSQLite.zip

51

Enlace: http://j.mp/t2lq1r

captulo

Trabajando con el API de Facebook Connect

53

CAPTULO 7

TRABAJANDO CON EL API DE FACEBOOK CONNECT

Para avanzar con el tema de vinculacin de redes sociales en este captulo veremos como implementar Facebook Connect en nuestro proyecto. Si an no tienes claro porqu implementar Facebook Connect1 quiz estas razones2 te ayuden.

CARACTERSTICAS DE FACEBOOK CONNECT:

Conectar: la cuenta e informacin de Facebook con nuestra aplicacin. Compartir: informacin con los contactos que tambin utilicen la aplicacin. Comprobar: la identidad real de los usuarios. Actualizacin: de la informacin de los usuarios y las directivas de privacidad constantemente. Facebook Feed: permite compartir fcilmente informacin con los contactos.

IMPLEMENTANDO FACEBOOK CONNECT EN UNA APLICACIN:

Damos inicio creando un nuevo proyecto en Xcode de tipo Single View Application
1. Descargar el SDK de Facebook Connect desde: http://j.mp/v1Taj3 2. Descomprimir y arrastrar el proyecto la carpeta /scr/

1 http://developers.facebook.com/connect.php 2 http://www.maestrosdelweb.com/editorial/aprovechando-las-ventajas-de-facebook-connect-sobre-vbulletin/

54

3. Definir un objeto tipo Facebook en AppDelegate.h: #import <UIKit/UIKit.h> #import FBConnect.h @class ViewController; @interface AppDelegate : UIResponder <UIApplicationDelegate,FBSessionDelegate> { Facebook *facebook;} @property (strong, nonatomic) UIWindow *window; @property (strong, nonatomic) ViewController *viewController; @property (nonatomic, retain) Facebook *facebook; @end 4. Definir las funciones necesarias para inicio se sesin en Facebook: - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions: (NSDictionary *)launchOptions {

self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];

// Override point for customization after application launch. if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone) { self.viewController = [[[ViewController alloc] } else {

initWithNibName:@ViewController_iPhone bundle:nil] autorelease]; self.viewController = [[[ViewController alloc] }

initWithNibName:@ViewController_iPad bundle:nil] autorelease]; self.window.rootViewController = self.viewController; [self.window makeKeyAndVisible]; facebook = [[Facebook alloc] initWithAppId:@YOUR_APP_ID andDelegate:self]; NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults]; if ([defaults objectForKey:@FBAccessTokenKey] && [defaults objectForKey:@FBExpirationDateKey]) {

55

facebook.accessToken = [defaults objectForKey:@FBAccessTokenKey]; facebook.expirationDate = [defaults objectForKey:@FBExpirationDateKey]; } if (![facebook isSessionValid]) [facebook authorize:nil]; return YES; } - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation { return [facebook handleOpenURL:url]; } - (void)fbDidLogin { NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults]; [defaults setObject:[facebook accessToken] forKey:@FBAccessTokenKey]; [defaults setObject:[facebook expirationDate] forKey:@FBExpirationDateKey]; [defaults synchronize]; } 5. Agregar el cdigo privado de la App en Facebook en nuestro .plist

56

6. Compliar y ejecutar:

Obtendremos una funcin que nos permitir iniciar sesin en Facebook y acceder a la informacin que necesitemos. La documentacin oficial nos permite conocer los principales mtodos que podemos utilizar en la implementacin.
DOCUMENTACIN OFICIAL:

http://wiki.developers.facebook.com/index.php/Facebook_Connect_for_iPhone

57

Enlace: http://j.mp/tmIpJh

captulo

Trabajando con el API de Twitter

59

CAPTULO 8

TRABAJANDO CON EL API DE TWITTER

En el captulo 7 aprenders a vincular en el proyecto la red social Twitter conocida como uno de los medios de comunicacin ms populares, con alto alcance y muy utilizado en aplicaciones para dispositivos mviles.

CARACTERSTICAS DE LA API DE TWITTER:

Limita por da el nmero de actualizaciones, mensajes directos y solicitudes de Follow. Se basa completamente en HTTP, por lo tanto implementa los mtodos GET y POST. Intenta conservar los principios de diseo de la Transferencia de Estado Representacional (REST1). En la documentacin se establecen los formatos disponibles para cada uno de los mtodos. Dentro de estos formatos de datos se encuentran: XML, JSON, RSS, ATOM. Una lnea de comando es todo lo que se requiere para empezar a usar la API. Ofrece un gran nmero de libreras disponibles para el lenguaje de programacin.

Revisar: http://www.maestrosdelweb.com/editorial/trabajando-con-la-api-de-twitter-desde-php/

1 http://es.wikipedia.org/wiki/Representational_State_Transfer

60

INICIANDO TWITTER EN NUESTRA APLICACIN

A continuacin implementaremos una clase que nos permita enviar y recibir informacin a Twitter desde nuestras aplicaciones :
1. Utilizaremos las librerias Twitter+OAuth que se pueden descargar desde aqu. 2. Descomprimir y agregar la carpeta Twitter + Oauth al proyecto:

3. Agregar la libreria libxml2.dylib

61

4. Agregar la ruta en Header Search Path

62

5. Crear un botn para el inicio de sesin en Twitter:

6. Importar las librerais en nuestro cdigo en ViewController.h #import <UIKit/UIKit.h> #import SA_OAuthTwitterController.h @class SA_OAuthTwitterEngine; @interface ViewController : UIViewController <SA_OAuthTwitterControllerDelegate> { SA_OAuthTwitterEngine *_engine; } @property (nonatomic, retain) SA_OAuthTwitterEngine *_engine; - (IBAction)postTwitter; - (void)sendTweet; @end

63

7. Definir las funciones definidas previamente en ViewController.m @synthesize _engine; #pragma mark Twitter { { - (IBAction)postTwitter if(!_engine) _engine = [[SA_OAuthTwitterEngine alloc] initOAuthWithDelegate:self]; _engine.consumerKey = kOAuthConsumerKey; } _engine.consumerSecret = kOAuthConsumerSecret; UIViewController *controller = [SA_OAuthTwitterController if (controller) { }

controllerToEnterCredentialsWithTwitterEngine:_engine delegate:self];

[self presentModalViewController:controller animated:YES]; else } {

[self sendTweet]; - (void)sendTweet NSString *mensaje = @Excelente la Guia para iPhone y iPad de @maestros <img alt=:) class=wp-smiley> ; [_engine sendUpdate:mensaje]; Twitter

src=http://www.maestrosdelweb.com/wp-includes/images/smilies/icon_smile.gif

UIAlertView* alertView = [[UIAlertView alloc] initWithTitle:@Posted To message:mensaje delegate:self cancelButtonTitle:@Accept otherButtonTitles:nil]; [alertView show]; [alertView release];

64

#pragma mark SA_OAuthTwitterEngineDelegate (NSString {

- (void) storeCachedTwitterOAuthData: (NSString *) data forUsername: *) username NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults]; [defaults setObject: data forKey: @authData]; [defaults synchronize]; Authentication message.

UIAlertView* alert = [[UIAlertView alloc] initWithTitle:@Twitter message:@Logged correctly. Please press again the twitter button to send delegate:self

cancelButtonTitle:@Accept otherButtonTitles:nil]; [alert show]; } { } [alert release]; - (NSString *) cachedTwitterOAuthDataForUsername: (NSString *) username return [[NSUserDefaults standardUserDefaults] objectForKey: @authData]; #pragma mark TwitterEngineDelegate { }

- (void) requestSucceeded: (NSString *) requestIdentifier NSLog(@Request %@ succeeded, requestIdentifier); - (void) requestFailed: (NSString *) requestIdentifier withError: (NSError *) error { }

NSLog(@Request %@ failed with error: %@, requestIdentifier, error);

65

8. Compilamos y ejecutamos

Si ha salido todo bien, probablemente tengas experiencia con Objective-C, porque he saltado algunas cosas para no hacerlo tan extenso. Puedes descargar el proyecto con la clase implementada para hacer Build and Run Descargar proyecto: http://www.maestrosdelweb.com/images/2010/04/TwitterAPI.zip

66

Enlace: http://j.mp/ttxpJt

captulo

Trabajando con el API de OpenFeint

68

CAPTULO 9

TRABAJANDO CON EL API DE OPENFEINT

Quienes desarrollan aplicaciones para el iPhone deben conocer la importancia de vincularlas con otros servicios como Facebook y Twitter comunidades virtuales a las que muchos pertenecen. Actualmente, existen para el caso especfico de los vdeo juegos en el iPhone tres comunidades que han tomado fuerza:
1. Plus: http://plusplus.com/ 2. ScoreLoop: http://www.scoreloop.com/ 3. OpenFeint: http://www.openfeint.com/

En este captulo, veremos como implementar OpenFeint por ser una de las ms populares entre los usuarios y por permitir a los desarrolladores independientes acceder fcilmente a su API.

CARACTERSTICAS DE OPENFEINT

Contactar con otros jugadores por medio de anuncios, boletines y foros. Ver que jugadores estn conectados en ese momento. Tabla de clasificacin con los mejores puntajes y logros alcanzados. Geolocalizacin de la tabla de clasificacin integrada con GoogleMaps. Ofrece diferentes formas de promocionar nuestras aplicaciones dentro de la comunidad.

69

IMPLEMENTANDO OPENFEINT EN UNA APLICACIN

Ahora veremos cmo implementar esta herramienta en nuestra aplicacin:
1. Lo primero que debemos hacer es registrarnos en OpenFeint. 2. Una vez registrados, podemos descargar el OpenFeint SDK en la parte superior derecha. 3. Descomprimimos y agregamos la carpeta OpenFeint a nuestro proyecto.

4. Dependiendo de la vista que utilicemos es recomendable borrar una de las siguientes carpetas de

nuestro proyecto: Resources/landscape o Resources/Portrait 5. Hacemos clic sobre nuestro proyecto en el panel Groups & Files y seleccionamos nuestro Target 6. Seleccionamos la pestaa Buil Settings y nos aseguramos de tener en Configuration: All Configurations

70

7. Agregamos en Other Linker Flags el valor -ObjC

8. Nos aseguramos que est seleccionado Call C++ Default Ctors/Dtors in Objective-C en la seccin

GCC 4.2 Code Generation 9. Incluir los siguientes Frameworks al proyecto:

71

10. Ahora podemos ingresar los datos de nuestra aplicacin en la web de OpenFeint para obtener el

ProductKey y el ProductSecret que nos da acceso a la API. 11. Agregamos el archivo de cabecera OpenFeint.h e iniciamos OpenFeint en nuestra aplicacin
#import OpenFeint.h - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions: (NSDictionary *)launchOptions {

self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];

// Override point for customization after application launch. if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone) { self.viewController = [[[ViewController alloc] } else {

initWithNibName:@ViewController_iPhone bundle:nil] autorelease]; self.viewController = [[[ViewController alloc]

initWithNibName:@ViewController_iPad bundle:nil] autorelease];

72

self.window.rootViewController = self.viewController; [self.window makeKeyAndVisible]; // Inicia OpenFeint

NSDictionary* settings = [NSDictionary dictionaryWithObjectsAndKeys: [NSNumber numberWithInt:UIInterfaceOrientationPortrait], OpenFeintSettingDashboardOrientation, @Nombre App, OpenFeintSettingShortDisplayName, [NSNumber numberWithBool:YES], OpenFeintSettingEnablePushNotifications, [NSNumber numberWithBool:NO], OpenFeintSettingDisableUserGeneratedContent, [NSNumber numberWithBool:NO], OpenFeintSettingAlwaysAskForApprovalInDebug, self.window, OpenFeintSettingPresentationWindow, nil ]; [OpenFeint initializeWithProductKey:@yourProductKey andSecret:@yourProductSecret andDisplayName:@Nombre App andSettings:settings andDelegates:nil]; // Muestra Pantalla Principal de OpenFeint [OpenFeint launchDashboard]; return YES; } 12. Incluimos estas tres funciones de control para OpenFeint >(void)applicationWillTerminate:(UIApplication *)application { // Finaliza OpenFeint [OpenFeint shutdown]; } (void)applicationDidBecomeActive:(UIApplication *)application { [OpenFeint applicationDidBecomeActive]; } (void)applicationWillResignActive:(UIApplication *)application

73

{ [OpenFeint applicationWillResignActive]; } 13. Compilar y ejecutar

En estos momentos tenemos implementada la API de OpenFeint en nuestro proyecto. Ahora debemos agregar dentro del cdigo fuente las funciones necesarias segn los servicios que incorporemos: Achievements, Leaderboards, etc.
DOCUMENTACIN OFICIAL

http://www.openfeint.com/developers/support/

74

Enlace: http://j.mp/tdDBBM

Desarrollo de vdeo juegos para dispositivos mviles

La segunda seccin de la gua estar dedicada a la creacin de vdeo juegos para dispositivos mviles a travs del uso de Chipmunk y Cocos2D.

CHIPMUNK

Motor de fsica 2D Parte 1 Motor de fsica 2D Parte 2 Motor de fsica 2D Parte 3

COCOS 2D

Framework para desarrollar vdeo juegos en 2D Parte 1 Framework para desarrollar vdeo juegos en 2D Parte 2 Framework para desarrollar vdeo juegos en 2D Parte 3

captulo

10

Chipmunk, motor de fsica 2D Parte 1

77

CAPTULO 10

CHIPMUNK, MOTOR DE FSICA 2D PARTE 1

Para los interesados en el desarrollo de vdeojuegos para iOS (iPhone, iPod Touch y iPad) y con poca experiencia en esta rea les presento un motor de fsica 2D sencillo de implementar y de gran ayuda al momento de realizar simulaciones dentro de la aplicacin Chipmunk.

INTRODUCCIN A CHIPMUNK
Un motor de fsica es un componente software desarrollado principalmente para simular la mecnica newtoniana de objetos modelados dentro de un entorno determinado. El motor considera las variables gravedad, friccin, masa, velocidad, entre otras para simular la fsica de los objetos de manera aproximada a la fsica que presentara ese objeto en el mundo real. Tambin permiten implementar los sistemas de partculas y detectar colisiones, que son de gran ayuda al momento de desarrollar vdeojuegos. Chipmunk es un motor de fsica 2D de cdigo abierto desarrollado por Scott Lembcke1 en C bajo licencia MIT2. Dentro de sus caractersticas estn:

Ideal para el desarrollo de videojuegos en 2D Rpido y ligero para modelar cuerpos rgidos Flexible sistema de deteccin de colisiones

1 http://wiki.slembcke.net/main/published/HomePage 2 http://es.wikipedia.org/wiki/MIT_License

78

INICIANDO LA IMPLEMENTACIN CON XCODE

A continuacin veremos cmo crear un proyecto en Xcode que incorpore las libreras de Chipmunk.
1. Crear un proyecto nuevo en Xcode para iOS de tipo Single View Application

2. Descargar las libreras de Chipmunk disponibles para descargar: http://j.mp/rvsbOB 3. Extraer los archivos y agregar el contenido de la carpeta CHIPMUNK al proyecto:

79

4. Agregar estas dos imgenes al proyecto. (gurdalas con botn derecho a tu ordenador)

Imagen 1: Imagen 2:
5. Declarar dos variables UIImageView en el ViewController.h #import <UIKit/UIKit.h> { @interface EquilibrioChipmunkViewController : UIViewController UIImageView *barra; }

UIImageView *esfera; @end 6. Definir en la funcin (void)viewDidLoad de ViewController.m: - (void)viewDidLoad { [super viewDidLoad]; barra = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@barra.png]]; barra.center = CGPointMake(160, 350); esfera = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@esfera.png]]; esfera.center = CGPointMake(160, 230); [self.view addSubview:barra]; [self.view addSubview:esfera]; [self.view setBackgroundColor:[UIColor whiteColor]]; }

80

7. Compilar y ejecutar

Al finalizar los siete pasos descritos, obtendremos una imagen como la anterior.

81

Enlace: http://j.mp/uDXahc

captulo

11

Chipmunk, motor de fsica 2D Parte 2

83

CAPTULO 11

CHIPMUNK, MOTOR DE FSICA 2D PARTE 2

Es momento de ver los conceptos bsicos del motor de fsica 2D y su implementacin en una aplicacin para el iPhone. En el captulo anterior solo creamos un proyecto en Xcode, agregado dos imgenes y vinculado las libreras de Chipmunk al proyecto, pero no hemos utilizado an el motor de fsica.

CONCEPTOS BSICOS
Los principales conceptos que debemos tener en cuenta para la implementacin del motor de fsica son:

Space: es la unidad de simulacin bsica que contiene todos los objetos creados, es el entorno donde interactan los objetos. En l se establecen las reglas generales que afectan a todos los objetos de la simulacin como por ejemplo: la gravedad. Body: son cuerpos rgidos que contienen las propiedades fsicas de un objeto como: masa, posicin, rotacin, velocidad, etc. No poseen forma (shape) por si mismos y por lo tanto no colisionan con otros cuerpos. Shape: son las diferentes partes de un cuerpo (body), con los shape le damos forma a los cuerpos permitiendo la colisin entre ellos. Existen tres tipos de shapes: circular, segmentado y poligonal. Constraints: permiten conectar dos cuerpos de diferentes formas. Forces: son vectores (x,y) utilizados para interactuar con los objetos creados en el entorno de simulacin. No es recomendable modificar directamente las propiedades de los objetos (posicin, velocidad, etc), para realizar esto se deben utilizar las funciones que asignan estos vectores a los objetos.

84

LA IMPLEMENTACIN EN XCODE
Tomando como base el proyecto creado en el captulo anterior, prosigamos con la implementacin de las libreras de Chipmunk:
1. Incluir en ViewController.h el archivo de cabecera chipmunk.h, un objeto de la clase cpSpace y las

tres funciones que utilizaremos para iniciar e implementar Chipmunk:

#import <UIKit/UIKit.h> #import chipmunk.h {UIImageView *barra; UIImageView *esfera; cpSpace *space; } - (void)configurarChipmunk; - (void)delta:(NSTimer *)timer; void updateShape(void *ptr, void* unused); @end 2. Realizar el llamado de (void)configurarChipmunk en la funcin (void)viewDidLoad: - (void)viewDidLoad { [super viewDidLoad]; barra = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@barra.png]]; barra.center = CGPointMake(160, 350); esfera = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@esfera.png]]; esfera.center = CGPointMake(160, 230); [self.view addSubview:barra]; [self.view addSubview:esfera]; [self.view setBackgroundColor:[UIColor whiteColor]]; [self configurarChipmunk]; } 3. Implementar las tres funciones declaradas anteriormente: - (void)delta:(NSTimer *)timer { // Actualiza informacin del Space @interface EquilibrioChipmunkViewController : UIViewController

85

cpSpaceStep(space, 1.0f/60.0f); // Actualiza informacin de los Shapes definidos cpSpaceHashEach(space->activeShapes, &updateShape, nil); } void updateShape(void *ptr, void* unused) { cpShape *shape = (cpShape*)ptr; // Validacin del Shape recibido if(shape == nil || shape->body == nil || shape->data == nil) { NSLog(@Invalido shape revisar ...); return; } // Actualiza la posicin del Shape if([(UIView *)shape->data isKindOfClass:[UIView class]]) { [(UIView *)shape->data setCenter:CGPointMake(shape->body->p.x, 480 shape->body->p.y)]; } else NSLog(@Shape actualizado fuera de la funcin : updateShape ); } 4. Definir Body y Shape de un objeto dinmico circular en la funcin (void)configurarChipmunk - (void)configurarChipmunk { cpInitChipmunk(); // Inicia el motor de fisica 2D Chipmunk // Crea un nuevo Space space = cpSpaceNew(); // Define la direccin y magnitud de la gravedad en el Space space->gravity = cpv(0, -100); // Implementa el NSTimer encargado de realizar las animaciones selector:@selector(delta:) userInfo:nil repeats:YES]; // Crea un Body con masa 50 y momento INFINITY // Establece posicin inicial cpBody *esferaBody = cpBodyNew(50.0f, INFINITY); esferaBody->p = cpv(160, 250);

[NSTimer scheduledTimerWithTimeInterval:1.0f/60.0f target:self

86

// Agrega el Body al Space

cpSpaceAddBody(space, esferaBody);

// Crea un Shape tipo Circle con radio 15 asociado al Body esferaBody cpShape *esferaShape = cpCircleShapeNew(esferaBody, 15.0f, cpvzero); esferaShape->e = 0.5f; // Elasticidad esferaShape->u = 0.8f; // Friccin

esferaShape->data = esfera; // Asocia Shape con UIImageView // Agrega el Shape al Space cpSpaceAddShape(space, esferaShape); } 5. Compilar y ejecutar

esferaShape->collision_type = 1; // Las colisiones son agrupadas por tipo

Si hemos hecho todo bien al final se ver mal, la esfera caer en direccin de la gravedad definida y no encontrar obstculos en el espacio.

87

Enlace: http://j.mp/vmN9rh

captulo

12

Chipmunk, motor de fsica 2D y el acelermetro Parte 3

89

CAPTULO 12

CHIPMUNK, MOTOR DE FSICA 2D Y EL ACELERMETRO PARTE 3

En este captulo finalizaremos el tema sobre el motor de fsica 2D, Chipmunk. Hasta el momento hemos visto los conceptor bsicos (Parte 1) y los elementos dinmicos presentes en las simulaciones (parte 2) . En este ltimo captulo revisaremos los elementos estticos y la implementacin del acelermetro con nuestra aplicacin. Para continuar explorando sobre Chipmunk recomiendo revisar la documentacin disponible y seguir probando el desempeo de las simulaciones en los dispositivos mviles (iPhone / iPod Touch/ iPad) para lograr una ptima implementacin del motor de fsica 2D.
DOCUMENTACIN CHIPMUNK

http://code.google.com/p/chipmunk-physics/

CONCEPTOS
Antes de implementar los elementos estticos en nuestra aplicacin es importante recordar los tipos de Shapes que existen en Chipmunk y aclarar uno de ellos:

Circular: Genera una circunferencia para el cuerpo rgido referenciado cpCircleShapeNew(cpBody * body, cpFloat radius, cpVect offset). Segmentado: Genera una forma lineal entre los puntos a y b. cpSegmentShapeNew(cpBody * body, cpVect a, cpVect b, cpFloat radius). Poligonal: Genera un polgono Convexo definido previamente por medio de sus vrtices. En Chipmunk no se pueden modelar polgonos Concavos, para esos casos se debe utilizar Segment. cpPolyShapeNew(cpBody * body, int numVerts, cpVect * verts, cpVect offset).

89

FINALIZANDO LA IMPLEMENTACIN EN XCODE

Prosigamos con el proyecto creado para estos menesteres en el captulo anterior:
1. Definir Body y Shape de un objeto esttico lineal en la funcin (void)configurarchipmunk - (void)configurarChipmunk { cpInitChipmunk();

// Inicia el motor de fisica 2D Chipmunk // Crea un nuevo Space space = cpSpaceNew(); // Define la direccin y magnitud de la gravedad en el Space space->gravity = cpv(0, -100); // Implementa el NSTimer encargado de realizar las animaciones selector:@selector(delta:) userInfo:nil repeats:YES]; // Crea un Body con masa 50 y momento INFINITY // Establece posicin inicial // Agrega el Body al Space cpBody *esferaBody = cpBodyNew(50.0f, INFINITY); esferaBody->p = cpv(160, 250); cpSpaceAddBody(space, esferaBody);

[NSTimer scheduledTimerWithTimeInterval:1.0f/60.0f target:self

// Crea un Shape tipo Circle con radio 15 asociado al Body esferaBody cpShape *esferaShape = cpCircleShapeNew(esferaBody, 15.0f, cpvzero); esferaShape->e = 0.5f; // Elasticidad esferaShape->u = 0.8f; // Friccin

esferaShape->data = esfera; // Asocia Shape con UIImageView // Agrega el Shape al Space

esferaShape->collision_type = 1; // Las colisiones son agrupadas por tipo cpSpaceAddShape(space, esferaShape); // ============================== // Implementacin Objeto Esttico // ============================== // Crea un Body con masa y momento INFINITY

89

barraBody = cpBodyNew(INFINITY, INFINITY); // Establece la posicin inicial barraBody->p = cpv(160,120);

// El Body de los objetos estticos no debe agregarse al Space com

// si quieres saber que pasa, agregalo <img src=http://www.maestrosdelweb. /wp-includes/images/smilies/icon_wink.gif alt=;) class=wp-smiley> // Crea un Shape tipo Segment asociado al Body barraBody barraShape->e = 0.7f; // Elasticidad barraShape->u = 0.4f; // Friccin barraShape->collision_type = 0; // Agrega el Shape al Space cpSpaceAddShape(space, barraShape); } 2. Agregar <UIAccelerometerDelegat> en ViewController.h #import <UIKit/UIKit.h> #import chipmunk.h @interface ViewController : UIViewController <UIAccelerometerDelegate>{ UIImageView *barra; UIImageView *esfera; cpSpace *space; cpBody *barraBody; cpShape *barraShape; } - (void)configurarChipmunk; - (void)delta:(NSTimer *)timer; void updateShape(void *ptr, void* unused); @end barraShape = cpSegmentShapeNew(barraBody, cpv(-105, -3), cpv(105, -3), 10.0);

barraShape->data = barra; // Asocia Shape con UIImageView // Se agrupa en un tipo de colisin diferente a esferaShape

89

3. Definir la funcin que implementa el acelermetro: - (void)accelerometer:(UIAccelerometer*)accelerometer didAccelerate: (UIAcceleration*)acceleration{ dispositivo // Modifica el ngulo de la Barra con relacin a la inclinacin del cpBodySetAngle(barraBody, M_PI * (acceleration.x * 0.6f) ); // Notifica a Chipmunk el movimiento de un Objeto Esttico cpSpaceRehashStatic(space); // Actualiza el Shape de la Barra (Objeto Esttico) [(UIView *)barraShape->data setTransform: } CGAffineTransformMakeRotation(-barraShape->body->a)];

4. Inicializamos el acelermetro en la funcin (void)viewDidLoad - (void)viewDidLoad { [super viewDidLoad]; png]]; barra = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@barra. barra.center = CGPointMake(160, 350); esfera.center = CGPointMake(160, 230); [self.view addSubview:barra]; [self.view addSubview:esfera]; [self.view setBackgroundColor:[UIColor whiteColor]]; [self configurarChipmunk]; // Inicia el acelermetro [[UIAccelerometer sharedAccelerometer] setUpdateInterval:(1.0 / 60)]; [[UIAccelerometer sharedAccelerometer] setDelegate:self]; }

esfera = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@esfera.png]];

89

5. Compilar y ejecutar

Si hemos hecho todo bien al final obtendremos un objeto circular que se sostiene con un madero el cual gira con el movimiento del dispositivo. Se puede seguir probando con distintos valores de masa, friccin, elasticidad, gravedad, entro otros para conocer un poco ms el comportamiento de los objetos dentro del espacio creado.

89

Enlace: http://j.mp/scOdr8

captulo

13

Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 1

96

CAPTULO 13

COCOS2D, FRAMEWORK PARA DESARROLLAR VDEOJUEGOS EN 2D PARTE 1

Para el desarrollo de vdeojuegos en la plataforma iPhone OS (iPhone/iPod Touch/iPad) es importante conocer las distintas herramientas disponibles y evaluar cul de ellas se ajusta ms a nuestras necesidades. Varias aplicaciones actualmente son desarrolladas utilizando uno de estos componentes:

OpenGL ES: http://www.khronos.org/opengles/ UIKit: http://j.mp/uCLGnA Core Animation + Quartz 2D: http://j.mp/uvEu2A

UIKit es el ms sencillo de utilizar en comparacin con OpenGL ES que requiere de un mayor tiempo de implementacin pero ofrece el mejor rendimiento. La buena noticia es que existe un framework que simplifica esta implementacin: Cocos2D.

CONOCIENDO COCOS2D
Cocos2D es un framework para el desarrollo de juegos en 2D y aplicaciones con alto contenido interactivo. Cocos2D para iPhone es basado en Cocos2D pero implementa Objetive-C como lenguaje de programacin en lugar de Python. Dentro de las caractersticas principales de este framework encontramos:

Integracin con motores de fsica: Box2D1, Chipmunk. Manejo de Escenas y efectos de transiciones. Compatibilidad con eventos Touch y el acelermetro. Texturas PVRTC2 de 2-bit y 4-bit, texturas RGBA3 de 16 bits y 32-bit. Basado en OpenGL ES 1.1

Dentro de Cocos2D encontramos tres conceptos principales a considerar: escenas, capas y objetos. Las escenas equivalen a los niveles o vistas implementadas en un juego. Las capas se incorporan a las escenas y pueden contener uno o ms objetos: mens, botones, etiquetas, cuerpos, etc. A su vez una escena puede contener una o ms capas.
1 http://www.box2d.org/ 2 http://en.wikipedia.org/wiki/PVRTC 3 http://en.wikipedia.org/wiki/RGBA

97

IMPLEMENTACIN DE COCOS2D EN UNA APLICACIN

1. Descarga las liberas de Cocos 2D para iPhone: http://code.google.com/p/cocos2d-iphone/ 2. Ejecutar el siguiente comando en la consola (dentro de la carpeta descargada): ./install_template.sh 3. Crear un nuevo proyecto en Xcode de tipo cocos2d Application

4. Compilar y ejecutar:

La plantilla creada nos muestra los principales elementos de una aplicacin:

CCDirector: Es el controlador principal de nuestra aplicacin. [CCDirector setDirectorType:CCDirectorTypeDefault]; CCScene: Implementa las escenas o vistas. CCScene *scene = [CCScene node]; CCLayer: Permite la creacin de capas (HelloWorld es un objeto tipo CCLayer) HelloWorld *layer = [HelloWorld node]; CCLabel: Uno de los tipos de objetos que se pueden implementar dentro de una capa CCLabel* label = [CCLabel labelWithString:@Hola Mundo fontName:@Marker Felt fontSize:64];

Tenemos implementadas las libreras de Cocos2D en nuestro proyecto de Xcode. Ahora podemos utilizar los diferentes componentes que nos brindan estas libreras y lograr una mejora en el desempeo de nuestras aplicaciones.

98

Enlace: http://j.mp/ttovDQ

captulo

14

Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 2

100

CAPTULO 14

COCOS2D, FRAMEWORK PARA DESARROLLAR VDEOJUEGOS EN 2D PARTE 2

Prosiguiendo con Cocos2D el framework basado en OpenGL ES para el desarrollo de juegos en 2D en la plataforma de iOS, continuaremos con la implementacin de objetos y animaciones en el proyecto creado anteriormente. Antes recordemos que la animacin es un proceso para generar la sensacin de movimiento de un objeto por medio de la superposicin de varias imgenes. Cada una de las imgenes que conforman una animacin se denomina fotograma o frame, para las animaciones en el iPhone con Cocos2D, dependiendo de los objetos creados, se establece un nmero predeterminado de 60 fotogramas por segundo.

IMPLEMENTACIN DE COCOS2D
Ahora vamos a proseguir con el proyecto creado en el captulo anterior. Pero antes debemos agregar esta imagen en nuestro proyecto:

101

1. Redefinimos la clase HelloWorld de CCLayer a CCColorLayer, para modificar de manera fcil el color

de fondo
#import cocos2d.h { } +(id) scene; @end 2. Agregamos el objeto CCSprite a la capa HelloWorld -(id) init{ // ccc4 Estable el color de Fondo if( (self=[super initWithColor:ccc4(255,255,255,255)] )) { CGSize winSize = [[CCDirector sharedDirector] winSize]; self.isTouchEnabled = YES; // Crea un objeto tipo CCSprite que contiene la imagen agregada CCSprite *player = [CCSprite spriteWithFile:@giftOne.png rect:CGRectMake(0, 0, 186, 186)]; // Establece la posicin del objeto player.position = ccp(player.contentSize.width/2, winSize.height/2); // Agrega el objeto a la Capa [self addChild:player]; } return self; } 3. Compilar y ejecutar: @interface HelloWorld : CCLayerColor

102

4. Ahora agregaremos movimiento a nuestro objeto con el siguiente mtodo: -(void)moveObject { // Accin girar id rotateAction = [CCRotateBy actionWithDuration:2 angle:180*2]; // Accin saltar jumps:2]; id jumpAction = [CCJumpBy actionWithDuration:2 position:ccp(260,0) height:50 // Agrupa 2 o ms acciones

id fordward = [CCSpawn actions:rotateAction, jumpAction, nil]; id backwards = [fordward reverse]; // Permite ejecutar una accin despes de otra id sequence = [CCSequence actions: fordward, backwards, nil]; // Repite una accin el nmero de veces que se requiera o // hasta el infinito y ms all con RepearForEver id repeat = [CCRepeat actionWithAction:sequence times:2]; // Ejecuta la accin sobre el objeto [player runAction:repeat]; } 5. Realizamos el llamado a la funcin definida anteriormente: // Mtodo que implementa el evento Touch en Cocos2D

// Todas las acciones permiten regresar la accin con el mtodo reverse

- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { [self moveObject]; } 6. Compilar y ejecutar:

103

Si todo ha salido bien obtendremos un objeto que gira y salta al momento de tocar la pantalla. Puedes descargar el proyecto para realizar el procedimiento Build and Run.
DESCARGAR EL PROYECTO

http://www.maestrosdelweb.com/images/2010/04/myGameCocos2D.zip

104

Enlace: http://j.mp/u6PQsm

captulo

15

Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 3

106

CAPTULO 15

COCOS2D, FRAMEWORK PARA DESARROLLAR VDEOJUEGOS EN 2D PARTE 3

Para finalizar con los captulos sobre Cocos2D revisaremos la librera que implementa los sonidos en una aplicacin para el iPhone. Si bien podemos utilizar directamente el framework disponible para la plataforma: Core Audio y OpenAL1 cocos2D nos facilita la implementacin de varios archivos de audio en nuestro proyecto.

LIBRERAS DE AUDIO DISPONIBLES

Core Audio es la librera que permite reproducir, procesar y grabar audio en nuestras aplicaciones. Adems permite reproducir simultneamente uno o ms sonidos y el direccionamiento de audio automtico cuando se utilizan auriculares, parlantes y auriculares Bluetooth. Por su parte OpenAL es ideal para reproducir sonidos en un espacio 3D.
IMPLEMENTACIN DE ARCHIVOS DE AUDIO CON COCOS2D:
1. Agregar estos dos archivos de audio a nuestro proyecto:

Sound Background: http://www.maestrosdelweb.com/images/2010/04/soundBackground.m4a Sound Effect: http://www.maestrosdelweb.com/images/2010/04/soundEffect.m4a

1 http://developer.apple.com/technologies/iphone/audio-and-video.html

107

2. Iniciar el archivo de audio agregado en el mtodo (id)init -(id) init{ // ccc4 Estable el color de Fondo

if( (self=[super initWithColor:ccc4(255,255,255,255)] )) { CGSize winSize = [[CCDirector sharedDirector] winSize]; player = [CCSprite spriteWithFile:@giftOne.png rect:CGRectMake(0, 0, 186, 186)]; // Establece la posicin del objeto // Agrega el objeto a la Capa [self addChild:player]; // Habilita el evento Touch self.isTouchEnabled = YES; // Agrega el archivo de audio soundBackground.m4a [[SimpleAudioEngine sharedEngine] } } playBackgroundMusic:@soundBackground.m4a]; return self; 3. Implementar el segundo archivo de audio, en el evento TouchBegan - (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { [self moveObject]; [[SimpleAudioEngine sharedEngine] playEffect:@soundEffect.m4a]; } 4. Compilar y ejecutar: // Crea un objeto tipo CCSprite que contiene la imagen agregada

player.position = ccp(player.contentSize.width/2, winSize.height/2);

108

En estos momentos hemos implementado los dos archivos de audio en nuestra aplicacin: el primero como msica de fondo y el segundo como efecto de sonido al momento de tocar la pantalla. Como se puede observar es un proceso realmente sencillo pero de gran utilidad para lograr un mejor desempeo en nuestras aplicaciones. Puedes descargar el proyecto para realizar el liberador procedimiento de Build and Run.
DESCARGAR EL PROYECTO

http://www.maestrosdelweb.com/images/2010/04/myGameCocos2D1.zip

109

Enlace: http://j.mp/rxe0lB

110

OTRAS GUAS DE MAESTROS DEL WEB

Guas online

ADICTOS A LA COMUNICACIN

GUA STARTUP

Utiliza las herramientas sociales en Internet para crear proyectos de comunicacin independientes. Visita Adictos a la comunicacin
http://mdw.li/guiacomunica

Aprende las oportunidades, retos y estrategias que toda persona debe conocer al momento de emprender. Visita la Gua Startup
http://mdw.li/gkTDom

111

LOS MAESTROS DEL WEB

CURSO ANDROID

Una serie de perfiles de personas y proyectos que nos inspiran a permanecer en el medio, aprender y seguir evolucionando. Visita Los Maestros del Web
http://j.mp/spAncK

Actualiza tus conocimientos con el curso sobre Android para el desarrollo de aplicaciones mviles.

Visita el Curso Android

http://mdw.li/lmlydX

112

GUA ASP.NET

GUA ZEND

ASP.NET es un modelo de desarrollo Web unificado creado por Microsoft para el desarrollo de sitios y aplicaciones web dinmicas con un mnimo de cdigo. ASP.NET Visita la Gua ASP.NET
http://mdw.li/guiaaspnet

Zend Framework es un framework de cdigo abierto para desarrollar aplicaciones y servicios web con PHP 5.

Visita la Gua Zend

http://mdw.li/guiazend