maestros del web - guía- ios5

2GUA 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 la gua

3JAVIER CALA URIBE

Ingeniero de Sistemas, actualmente es desarro-

llador para iOS (Objective-C) con 2 aos de expe-

riencia en la plataforma y ms de 4 aos como

programador. Ha publicado 15 aplicaciones en la

App Store de Apple y cooperado en el desarro-

llo de tres proyectos de aplicaciones. Contribuy

al diseo, anlisis e implementacin de interfa-

ces entre sistemas SAP Enterprise Resource Plan-

ning (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.

Sobre el autor

4INTRODUCCIN

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 apara-

tos 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 Maes-

tros del Web diseada con el objetivo de ensearte las principales caractersticas del entorno de progra-

macin para dispositivos mviles con una serie de ejemplos y recursos que muestran la facilidad de las

herramientas de desarrollo.

Introduccin

5NDICE

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

Desarrollando aplicaciones para dispositivos mviles

captulo1

7CAPTULO 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 funda-

mentales:

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.

8CREANDO UN PROYECTO EN XCODE Y EL IOS SIMULATOR

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

92. Declarar una etiqueta (UILabel) y una funcin (IBAction) en la clase ViewController.h

#import @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

Uso del navegador en un app

captulo2

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 UIWe-

bView 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 @interface ViewController : UIViewController {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.

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)viewDi-dLoad. 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. Igual-

mente se pueden cargar archivos HTML localmente, previamente definidos en la aplicacin.

20

Enlace: http://j.mp/s2daly

Uso del correo

captulo3

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 veri-

ficar 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, resul-

tando til para el envo de correos electrnicos cuando no se cuenta con conexin a la red, pero inapro-

piado para confirmar el envo.

Para ms informacin sobre esta clase puedes consultar MFMailComposeViewController Class Refe-

rence1.

1 http://j.mp/u4yrWJ

23

SENT FROM MY IOS SIMULATOR


2. Agregar el framework MessageUI:

24

3. En ViewController.h agregar los elementos:#import #import #import @interface ViewController : UIViewController// Delegate de la clase MFMailComposeViewController

{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

dispositivoif ([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;[mailView setSubject:@Mejorando la Web!];// DestinatariosNSArray *toRecipients = [NSArrayarrayWithObject:@[email protected]/*

27

/* ]]> */];NSArray *ccRecipients = [NSArray arrayWithObjects:@[email protected]/* */, nil];[mailView setToRecipients:toRecipients];[mailView setCcRecipients:ccRecipients];// MensajeNSString *emailBody = @Un saludo a tod@s!;[mailView setMessageBody:emailBody isHTML:NO];[self presentModalViewController:mailView animated:YES];[mailView release];}- (void)mailComposeController:(MFMailComposeViewController*)controllerdidFinishWithResult:(MFMailComposeResult)result error:(NSError*)error{respuesta.hidden = NO;// Notifica al usuario los resultados del envio

switch (result){case MFMailComposeResultCancelled:respuesta.text = @Mensaje: cancelado;break;case MFMailComposeResultSaved:respuesta.text = @Mensaje: guardado;

28

break;case MFMailComposeResultSent:respuesta.text = @Mensaje: enviado;break;case MFMailComposeResultFailed:respuesta.text = @Mensaje: fall;break;default:respuesta.text = @Mensaje: no enviado;break;}[self dismissModalViewControllerAnimated:YES];}// Ejecuta la App Mail del dispositivo-(void)ejecutarMailApp{NSString *recipients = @mailto:[email protected]/* */[email protected]/*

29

/* ]]> */&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

Capturar imgenes desde la cmara del iPhone

captulo4

32

CAPTULO 4

CAPTURAR IMGENES DESDE LA CMARA DEL IPHONE

Utilizaremos el controlador UIImagePickerController para acceder a las imgenes guardadas en el dispo-

sitivo 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 arqui-

tectura 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 http://developer.apple.com/technologies/iphone/cocoa-touch.html2 http://developer.apple.com/macosx/coredata.html3 http://developer.apple.com/iphone/library/documentation/uikit/reference/UIView_Class/UIView/UIView.html4 http://j.mp/tkqT0S

33

UIIMAGEPICKERCONTROLLER EN ACCIN:


2. Agregar los siguientes elementos en ViewController.h:#import @interface ViewController : UIViewController {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 ControladorUIImagePickerController * picker = [[UIImagePickerController alloc] init];// Define el Delegate

picker.delegate = self;// Establece el origen de la imagenpicker.sourceType = UIImagePickerControllerSourceTypeSavedPhotosAlbum;// Agrega la vista del controlador a la pantallaif ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad){UIPopoverController *popover = [[UIPopoverController alloc]initWithContentViewController:picker];

36

[picker release];[popover presentPopoverFromRect:CGRectMake(200, 940.0, 0.0, 0.0)inView:self.viewpermittedArrowDirections:UIPopoverArrowDirectionAnyanimated:YES];}else[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

- (void)imagePickerController:(UIImagePickerController *)pickerdidFinishPickingMediaWithInfo:(NSDictionary *)info{// Quita la vista del controlador[picker dismissModalViewControllerAnimated:YES];// Establece la imagen tomada en el objeto UIImageViewimagenView.image = [info objectForKey:@UIImagePickerControllerOriginalImage];}- (void)dealloc{[imagenView release];[abrirGaleria release];[tomarFoto release];[super dealloc];}

37


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

38

Enlace: http://j.mp/tOl2so

Uso de varias vistas

captulo5

40

CAPTULO 5

USO DE VARIAS VISTAS

Revisaremos los principales mtodos utilizados para navegar dentro de una aplicacin: UINavigation-

Controller1 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/sclxU92 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 UINavigationCon-

troller 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 @interface AppDelegate : UIResponder {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 controladoresnavigationController = [[UINavigationController alloc] init];tabBarController = [[UITabBarController alloc] init];// Inicializa la primer vista del TabBarControllerUIViewController *primerViewController = [[UIViewController alloc] init];primerViewController.view.backgroundColor = [UIColor whiteColor];primerViewController.title = @Primero;// Inicializa la segunda vista del TabBarControllerUIViewController *segundoViewController = [[UIViewController alloc] init];segundoViewController.view.backgroundColor = [UIColor whiteColor];segundoViewController.title = @Segundo;// Agrega la segunda vista al controlador UINavigationController[navigationController pushViewController:segundoViewController animated:NO];// Agrega las vistas creadas al controlador UITabBarController// 1. Primer Vista = UIViewController// 2. Segunda Vista = UINavigationController[tabBarController setViewControllers:[NSArrayarrayWithObjects:primerViewController, navigationController, nil] animated:YES];// Libera memoria con los controladores ya utilizados[primerViewController release];[segundoViewController release];// Agrega el controlador UITabBarController a la ventana principalself.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]autorelease];self.window.rootViewController = tabBarController;[self.window makeKeyAndVisible]; // Retorna YES XDreturn YES;}

43

4. Compilar y Ejecutar:

Al final obtendrs dos vistas desde el UITabBarController, una de ellas contiene un UINavigationContro-

ller. 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

Trabajando con bases de datos SQL Lite

captulo6

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 http://sqlite.org/2 http://es.wikipedia.org/wiki/Base_de_datos3 http://es.wikipedia.org/wiki/Oracle4 http://www.opengroup.org/onlinepubs/009695399/functions/fopen.html5 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 = [documentsDirectorystringByAppendingPathComponent:@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 consultastatic sqlite3 *db;sqlite3_stmt *resultado;

const char* siguiente;// Buscar el archivo de base de datosNSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask, YES);NSString *documentsDirectory = [paths objectAtIndex:0];NSString *path = [documentsDirectory stringByAppendingPathComponent:@myDB];// Abre el archivo de base de datosif (sqlite3_open([path UTF8String], &db) == SQLITE_OK) {if (isSelect){// Ejecuta la consultaif ( sqlite3_prepare(db,[sentence UTF8String],[sentencelength],&resultado,&siguiente) == SQLITE_OK ){

// Recorre el resultadowhile (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 consultaif ( sqlite3_prepare_v2(db,[sentence UTF8String],[sentencelength],&resultado,&siguiente) == SQLITE_OK ){

sqlite3_step(resultado);

sqlite3_finalize(resultado);

}}}// Cierra el archivo de base de datossqlite3_close(db);

}5. Definir las consultas a realizar

- (void)viewDidLoad{[super viewDidLoad];[self createEditableCopyOfDatabaseIfNeeded];NSString *sentencetDB = @insert into userTable values ( NULL, Javier,Programador );[self executeSentence:sentencetDB sentenceIsSelect:NO];sentencetDB = @select * from userTable;[self executeSentence:sentencetDB sentenceIsSelect:YES];}


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

Trabajando con el API de Facebook Connect

captulo7

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/v1Taj32. Descomprimir y arrastrar el proyecto la carpeta /scr/

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

54

3. Definir un objeto tipo Facebook en AppDelegate.h:

#import #import FBConnect.h@class ViewController;@interface AppDelegate : UIResponder { 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]initWithNibName:@ViewController_iPhone bundle:nil] autorelease];} else {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 *)urlsourceApplication:(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 utili-

zar en la implementacin.

DOCUMENTACIN OFICIAL:

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

57

Enlace: http://j.mp/tmIpJh

Trabajando con el API de Twitter

captulo8

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 disposi-

tivos 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 #import SA_OAuthTwitterController.h@class SA_OAuthTwitterEngine;@interface ViewController : UIViewController {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_OAuthTwitterControllercontrollerToEnterCredentialsWithTwitterEngine:_engine delegate:self];if (controller){[self presentModalViewController:controller animated:YES];}else[self sendTweet];}- (void)sendTweet{NSString *mensaje = @Excelente la Guia para iPhone y iPad de @maestros ;[_engine sendUpdate:mensaje];UIAlertView* alertView = [[UIAlertView alloc] initWithTitle:@Posted To Twittermessage:mensajedelegate:selfcancelButtonTitle:@AcceptotherButtonTitles:nil];[alertView show];[alertView release];

64

}#pragma mark SA_OAuthTwitterEngineDelegate- (void) storeCachedTwitterOAuthData: (NSString *) data forUsername: (NSString*) username{NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];[defaults setObject: data forKey: @authData];[defaults synchronize];UIAlertView* alert = [[UIAlertView alloc] initWithTitle:@Twitter Authenticationmessage:@Logged correctly. Please press again the twitter button to sendmessage.delegate:selfcancelButtonTitle:@AcceptotherButtonTitles: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

Trabajando con el API de OpenFeint

captulo9

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 Confi-

gurations

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]initWithNibName:@ViewController_iPhone bundle:nil] autorelease];} else {self.viewController = [[[ViewController alloc]initWithNibName:@ViewController_iPad bundle:nil] autorelease];

72

}self.window.rootViewController = self.viewController;[self.window makeKeyAndVisible];// Inicia OpenFeintNSDictionary* 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:@yourProductKeyandSecret:@yourProductSecretandDisplayName:@Nombre AppandSettings:settingsandDelegates: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: Achie-vements, Leaderboards, etc.

DOCUMENTACIN OFICIAL

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

74

Enlace: http://j.mp/tdDBBM

La segunda seccin de la gua estar dedicada a la creacin de vdeo juegos para dispositi-

vos 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

Desarrollo de vdeo juegos para dispositivos mviles

Chipmunk, motor de fsica 2D Parte 1

captulo10

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 aproxi-

mada a la fsica que presentara ese objeto en el mundo real. Tambin permiten implementar los siste-

mas 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 licen-

cia 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/HomePage2 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 @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


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

81

Enlace: http://j.mp/uDXahc

Chipmunk, motor de fsica 2D Parte 2

captulo11

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 coli-

sionan 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 (posi-

cin, 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 #import chipmunk.h@interface EquilibrioChipmunkViewController : UIViewController{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

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 recibidoif(shape == nil || shape->body == nil || shape->data == nil) {NSLog(@Invalido shape revisar ...);return;}// Actualiza la posicin del Shapeif([(UIView *)shape->data isKindOfClass:[UIView class]]) {[(UIView *)shape->data setCenter:CGPointMake(shape->body->p.x, 480 -shape->body->p.y)];}elseNSLog(@Shape actualizado fuera de la funcin : updateShape );}

4. Definir Body y Shape de un objeto dinmico circular en la funcin (void)configurarChipmunk- (void)configurarChipmunk {// Inicia el motor de fisica 2D Chipmunk

cpInitChipmunk();// Crea un nuevo Spacespace = 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[NSTimer scheduledTimerWithTimeInterval:1.0f/60.0f target:selfselector:@selector(delta:) userInfo:nil repeats:YES];// Crea un Body con masa 50 y momento INFINITYcpBody *esferaBody = cpBodyNew(50.0f, INFINITY);// Establece posicin inicialesferaBody->p = cpv(160, 250);

86

// Agrega el Body al SpacecpSpaceAddBody(space, esferaBody);// Crea un Shape tipo Circle con radio 15 asociado al Body esferaBodycpShape *esferaShape = cpCircleShapeNew(esferaBody, 15.0f, cpvzero);esferaShape->e = 0.5f; // ElasticidadesferaShape->u = 0.8f; // FriccinesferaShape->data = esfera; // Asocia Shape con UIImageViewesferaShape->collision_type = 1; // Las colisiones son agrupadas por tipo// Agrega el Shape al SpacecpSpaceAddShape(space, esferaShape);}


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

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

captulo12

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 {// Inicia el motor de fisica 2D Chipmunk

cpInitChipmunk();// Crea un nuevo Spacespace = 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[NSTimer scheduledTimerWithTimeInterval:1.0f/60.0f target:selfselector:@selector(delta:) userInfo:nil repeats:YES];// Crea un Body con masa 50 y momento INFINITYcpBody *esferaBody = cpBodyNew(50.0f, INFINITY);// Establece posicin inicialesferaBody->p = cpv(160, 250);// Agrega el Body al SpacecpSpaceAddBody(space, esferaBody);// Crea un Shape tipo Circle con radio 15 asociado al Body esferaBodycpShape *esferaShape = cpCircleShapeNew(esferaBody, 15.0f, cpvzero);esferaShape->e = 0.5f; // ElasticidadesferaShape->u = 0.8f; // FriccinesferaShape->data = esfera; // Asocia Shape con UIImageViewesferaShape->collision_type = 1; // Las colisiones son agrupadas por tipo// Agrega el Shape al SpacecpSpaceAddShape(space, esferaShape);// ==============================// Implementacin Objeto Esttico// ==============================// Crea un Body con masa y momento INFINITY

89

barraBody = cpBodyNew(INFINITY, INFINITY);// Establece la posicin inicialbarraBody->p = cpv(160,120);// El Body de los objetos estticos no debe agregarse al Space// si quieres saber que pasa, agregalo // Crea un Shape tipo Segment asociado al Body barraBodybarraShape = cpSegmentShapeNew(barraBody, cpv(-105, -3), cpv(105, -3), 10.0);

barraShape->e = 0.7f; // ElasticidadbarraShape->u = 0.4f; // FriccinbarraShape->data = barra; // Asocia Shape con UIImageViewbarraShape->collision_type = 0; // Se agrupa en un tipo de colisin diferente a esferaShape// Agrega el Shape al SpacecpSpaceAddShape(space, barraShape);}

2. Agregar en ViewController.h

#import #import chipmunk.h@interface ViewController : UIViewController {UIImageView *barra;UIImageView *esfera;cpSpace *space;cpBody *barraBody;cpShape *barraShape;}- (void)configurarChipmunk;- (void)delta:(NSTimer *)timer;void updateShape(void *ptr, void* unused);@end

89

3. Definir la funcin que implementa el acelermetro:

- (void)accelerometer:(UIAccelerometer*)accelerometer didAccelerate:(UIAcceleration*)acceleration{// Modifica el ngulo de la Barra con relacin a la inclinacin del

dispositivocpBodySetAngle(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];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];// Inicia el acelermetro[[UIAccelerometer sharedAccelerometer] setUpdateInterval:(1.0 / 60)];[[UIAccelerometer sharedAccelerometer] setDelegate:self];}

89


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

Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 1

captulo13

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 necesida-

des. 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 interac-

tivo. Cocos2D para iPhone es basado en Cocos2D pero implementa Objetive-C como lenguaje de progra-

macin 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/PVRTC3 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


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 font-

Size:64];

Tenemos implementadas las libreras de Cocos2D en nuestro proyecto de Xcode. Ahora podemos utili-

zar los diferentes componentes que nos brindan estas libreras y lograr una mejora en el desempeo de

nuestras aplicaciones.

98

Enlace: http://j.mp/ttovDQ


captulo14

100

CAPTULO 14


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, depen-

diendo 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@interface HelloWorld : CCLayerColor{}+(id) scene;@end

2. Agregamos el objeto CCSprite a la capa HelloWorld

-(id) init{// ccc4 Estable el color de Fondoif( (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 agregadaCCSprite *player = [CCSprite spriteWithFile:@giftOne.pngrect:CGRectMake(0, 0, 186, 186)];// Establece la posicin del objetoplayer.position = ccp(player.contentSize.width/2, winSize.height/2);// Agrega el objeto a la Capa[self addChild:player];}return self;}


102

4. Ahora agregaremos movimiento a nuestro objeto con el siguiente mtodo:

-(void)moveObject {// Accin girarid rotateAction = [CCRotateBy actionWithDuration:2 angle:180*2];// Accin saltarid jumpAction = [CCJumpBy actionWithDuration:2 position:ccp(260,0) height:50jumps:2];// Agrupa 2 o ms accionesid fordward = [CCSpawn actions:rotateAction, jumpAction, nil];// Todas las acciones permiten regresar la accin con el mtodo reverseid backwards = [fordward reverse];// Permite ejecutar una accin despes de otraid 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- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {[self moveObject];}


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


captulo15

106

CAPTULO 15


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 auto-

mtico 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 Fondoif( (self=[super initWithColor:ccc4(255,255,255,255)] )) {CGSize winSize = [[CCDirector sharedDirector] winSize];// Crea un objeto tipo CCSprite que contiene la imagen agregada

player = [CCSprite spriteWithFile:@giftOne.pngrect:CGRectMake(0, 0, 186, 186)];

// Establece la posicin del objetoplayer.position = ccp(player.contentSize.width/2, winSize.height/2);// Agrega el objeto a la Capa[self addChild:player];// Habilita el evento Touchself.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];}


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

Utiliza las herramientas sociales en Internet

para crear proyectos de comunicacin inde-

pendientes.

Visita Adictos a la comunicacinhttp://mdw.li/guiacomunica

GUA STARTUP

Aprende las oportunidades, retos y estra-

tegias que toda persona debe conocer al

momento de emprender.

Visita la Gua Startuphttp://mdw.li/gkTDom

111

LOS MAESTROS DEL WEB

Una serie de perfiles de personas y proyectos

que nos inspiran a permanecer en el medio,

aprender y seguir evolucionando.

Visita Los Maestros del Webhttp://j.mp/spAncK

CURSO ANDROID

Actualiza tus conocimientos con el curso sobre Android para el desarrollo de aplica-

ciones mviles.

Visita el Curso Androidhttp://mdw.li/lmlydX

112

GUA ASP.NET

ASP.NET es un modelo de desarrollo Web

unificado creado por Microsoft para el desa-

rrollo de sitios y aplicaciones web dinmicas

con un mnimo de cdigo. ASP.NET

Visita la Gua ASP.NEThttp://mdw.li/guiaaspnet

GUA ZEND

Zend Framework es un framework de

cdigo abierto para desarrollar apli-

caciones y servicios web con PHP 5.

Visita la Gua Zendhttp://mdw.li/guiazend

Sobre la guaSobre el autorIntroduccinDesarrollando aplicaciones para dispositivos mvilesUso del navegador en un appUso del correoCapturar imgenes desde la cmara del iPhoneUso de varias vistasTrabajando con bases de datos SQL LiteTrabajando con el API de Facebook ConnectTrabajando con el API de TwitterTrabajando con el API de OpenFeintDesarrollo de vdeo juegos para dispositivos mvilesChipmunk, motor de fsica 2D Parte 1Chipmunk, motor de fsica 2D Parte 2Chipmunk, motor de fsica 2D y el acelermetro Parte 3Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 1Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 2Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 3

maestros del web - guía- ios5

Documents