Maestrosdelweb Guia Ios5

7/31/2019 Maestrosdelweb Guia Ios5

1/112


2/112

GUA IOS

Versin 2 / noviembre 2011

Nivel: Intermedio / Avanzado

La Gua iOS se encuentra en lnea en:

hp://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 Creave Commons

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

CONTACTO

hp://www.maestrosdelweb.com/sio/correo/

REDES SOCIALES

Facebook: hp://www.facebook.com/maestrosdelweb

Twier: hp://www.twier.com/maestros

Sobre la gua
http://www.maestrosdelweb.com/editorial/guia-desarrollo-iphone-ipad/http://www.maestrosdelweb.com/sitio/correo/http://www.facebook.com/maestrosdelwebhttp://www.twitter.com/maestroshttp://www.twitter.com/maestroshttp://www.facebook.com/maestrosdelwebhttp://www.maestrosdelweb.com/sitio/correo/http://www.maestrosdelweb.com/editorial/guia-desarrollo-iphone-ipad/


3/112

JAVIER CALA URIBE

Ingeniero de Sistemas, actualmente es desarro-

llador para iOS (Objecve-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 disee implement el ciclo de pruebas para un sistema

de administracin de recursos basado en ASP.NET.

Sobre el autor


4/112

INTRODUCCIN

En la actualidad existe un fuerte inters por parte de los programadores en el desarrollo de aplicaciones

para disposivos mviles como: iPad, iPhone e iPod Touch.

Disposivos mviles que se hacen cada vez ms populares en el mercado de las comunicaciones, porque

proporcionan una plataforma con sistema operavo como iOs 5.0. La adquisicin de este po de apara-

tos por parte de los usuarios se incrementa en la medida que encuentran en ellos nuevas aplicaciones o

servicios que sasfacen sus necesidades bsicas, profesionales, educavas 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 objevo de ensearte las principales caracterscas del entorno de progra-

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

herramientas de desarrollo.

Introduccin


5/112

NDICE

| Sobre la gua ..........................................................................................................2

| Sobre el autor .........................................................................................................3

| Introduccin ...........................................................................................................4

| Desarrollando aplicaciones para disposivos mviles .......................................... 6

| Uso del navegador en un app .............................................................................. 14

| Uso del correo ...................................................................................................... 21

| Capturar imgenes desde la cmara del iPhone .................................................. 31

| Uso de varias vistas ..............................................................................................39

| Trabajando con bases de datos SQL Lite ..............................................................45

| Trabajando con el API de Facebook Connect ....................................................52

| Trabajando con el API de Twier ......................................................................58

|Trabajando con el API de OpenFeint .................................................................67

| Desarrollo de vdeo juegos para disposivos mviles ....................................... 75

| Chipmunk, motor de sica 2D Parte 1 ...........................................................76

| Chipmunk, motor de sica 2D Parte 2 ..........................................................82

| Chipmunk, motor de sica 2D y el acelermetro Parte 3 .............................88

| Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 1 ...............95

| Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 2 ...............99 | Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 3 ............. 105


6/112

Desarrollando aplicaciones paradispositivos mviles

captulo1


7/112

CAPTULO I

DESARROLLANDO APLICACIONES PARA DISPOSITIVOS MVILES

iOS es el sistema implementado por Apple que permite ejecutar aplicaciones navas en los disposivos

mviles: iPhone, iPod Touch y iPad. La arquitectura de esta plataforma toma como base el ncleo de

Sistema Mac OS X e incorpora una nueva capa que da soporte a la interfaz mul-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

Disposivo mvil para pruebas (opcional)

El iOS SDK conene 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: conene 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 grcas y vinculacin con Xcode. (A parr de

Xcode 4, interface builder est incorporado en la misma interfaz que Xcode)

iOS Simulator: ejecuta las aplicaciones desarrolladas en un emulador del disposivo.


8/112

CREANDO UN PROYECTO EN XCODE Y EL IOS SIMULATOR

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


9/112

2. Declarar una equeta (UILabel) y una funcin (IBAcon) en la clase ViewController.h

#import

@interface ViewController : UIViewController

{

UILabel *miEtiqueta;

}

@property (nonatomic, retain) IBOutlet UILabel *miEtiqueta;

- (IBAction)cambiarEtiqueta:(id)sender;@end

3. Denir la funcin (IBAcon) en ViewController.m

@synthesize miEtiqueta;

- (IBAction)cambiarEtiqueta:(id)sender

{

miEtiqueta.text = @Bazzinga!;


10/112

}

- (void)dealloc

{

[miEtiqueta release];

[super dealloc];

}

4. Abrir con doble clic el archivo ViewController.xib, agregar una equeta (UILabel) y un botn

(UIButton) en la vista del controlador.


11/112

5. En la ventana Connecons Inspector arrastrar miEqueta hasta la equeta creada y la funcin

cambiarEqueta hasta el botn creado.


12/112

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 denida inicialmente como Universal app.

Para encontrar ms informacin sobre el entorno de programacin del sistema iOS pueden revisar

hp://developer.apple.com/technologies/tools/xcode.html
http://developer.apple.com/technologies/tools/xcode.htmlhttp://developer.apple.com/technologies/tools/xcode.html


13/112

Enlace: http://j.mp/sXbaU
http://j.mp/sXbaU7http://j.mp/sXbaU7


14/112

Uso del navegador en un app

captulo2


15/112

CAPTULO 2

USO DEL NAVEGADOR EN UN APP

Ahora, aprenderemos a ulizar la clase UIWebView1 que nos permite mostrar contenido web embebido

en el disposivo 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 disposivo

Aunque claramente la clase UIWebView esta basada en Safari, no requiere cerrar la aplicacin paramostrar 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 po Single View Applicaon

1 hp://j.mp/vQm9a1
http://j.mp/vQm9a1http://j.mp/vQm9a1


16/112

2. En ViewController.h declarar los elementos

#import


{

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 Connecons arrastrar: delegate, goBack,

goForward, reload.


17/112


18/112

5. Volviendo a Xcode denir 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/112

COMPILAR Y EJECUTAR:

Si ha salido todo bien debe cargar la pgina previamente denida en la funcin (void)viewDi-

dLoad. La clase UIWebView es de gran ulidad 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 denidos en la aplicacin.


20/112

Enlace: http://j.mp/sdaly
http://j.mp/s2dalyhttp://j.mp/s2daly


21/112

Uso del correo

captulo3


22/112

CAPTULO 3

USO DEL CORREO

En este captulo revisaremos un tema de gran ulidad para comparr informacin: el uso del correo a

parr de la versin 3.0 iOS, esta disponible la clase MFMailComposeViewController para enviar correos

desde el iPhone. Las versiones anteriores ulizan la aplicacin Mail que trae por defecto el disposivo

En este captulo veremos como implementar la clase MFMailComposeViewController.

EXPLORANDO MFMAILCOMPOSEVIEWCONTROLLER:

Esta clase brinda una interfase que permite administrar, editar y enviar correos electrnicos. Cuentacon un formulario predenido con los campos: subject, email recipients, body text y aachments, es

decir, un formulario normal de correo. Uno de los inconvenientes con esta clase es que no permite veri-

car si efecvamente el correo enviado lleg a su desno.

La clase se encarga de colocar los mensajes enviados en el buzn de salida de la aplicacin Mail, resul-

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

piado para conrmar el envo.

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

rence1.

1 hp://j.mp/u4yrWJ
http://j.mp/u4yrWJhttp://j.mp/u4yrWJ


23/112

SENT FROM MY IOS SIMULATOR


2. Agregar el framework MessageUI:


24/112

3. En ViewController.h agregar los elementos:

#import

#import

#import


// Delegate de la clase MFMailComposeViewController

{

IBOutlet UILabel *respuesta;

}

@property (nonatomic, retain) IBOutlet UILabel *respuesta;

// Verica si esta disponible la clase MFMailComposeViewController

-(IBAction)verEditMail:(id)sender;// Congura vista para editar y enviar un email

-(void)congurarMail;

// Ejecuta la App Mail del dispositivo

-(void)ejecutarMailApp;

@end


25/112

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

bel y relacionarlos con la App:


26/112

5. Denir las siguientes funciones de ViewController.m en Xcode:

@synthesize respuesta;

- (IBAction)verEditMail:(id)sender

{

Class mailClass = (NSClassFromString(@MFMailComposeViewController));

if (mailClass != nil)

{

// Verica que este habilitada la opcion para enviar correos en el

dispositivo

if ([mailClass canSendMail])

[self congurarMail];else

[self ejecutarMailApp];

}

else

[self ejecutarMailApp];

}

// Congura vista para editar y enviar un email

- (void)congurarMail

{

MFMailComposeViewController *mailView = [[MFMailComposeViewController alloc]

init];

mailView.mailComposeDelegate = self;

[mailView setSubject:@Mejorando la Web!];

// Destinatarios

NSArray *toRecipients = [NSArray

arrayWithObject:@[email protected]

/*

a=l.className;if(a){s=;r=parseInt(a.substr(0,2),16);for(j=2;a.length-

j;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/112

/* ]]> */

];

NSArray *ccRecipients = [NSArray arrayWithObjects:@info@forosdelweb.

com

/*

(function(){try{var s,a,i,j,r,c,l=document.getElementById(__cf_email__);


j;j+=2)


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

/* ]]> */

, nil];

[mailView setToRecipients:toRecipients];

[mailView setCcRecipients:ccRecipients];

// Mensaje

NSString *emailBody = @Un saludo a tod@s!;

[mailView setMessageBody:emailBody isHTML:NO];

[self presentModalViewController:mailView animated:YES];

[mailView release];

}

- (void)mailComposeController:(MFMailComposeViewController*)controller

didFinishWithResult:(MFMailComposeResult)result error:(NSError*)error

{

respuesta.hidden = NO;

// Notica al usuario los resultados del envio

switch (result){

case MFMailComposeResultCancelled:

respuesta.text = @Mensaje: cancelado;

break;

case MFMailComposeResultSaved:

respuesta.text = @Mensaje: guardado;


28/112

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]

/*

(function(){try{var s,a,i,j,r,c,l=document.getElementById(__cf_email__);


j;j+=2)




/* ]]> */

[email protected]

/*


j;j+=2)





29/112

/* ]]> */

&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/112

Enlace: http://j.mp/uMACMe
http://j.mp/uMACMehttp://j.mp/uMACMe


31/112

Capturar imgenes desde la cmaradel iPhone

captulo4


32/112

CAPTULO 4

CAPTURAR IMGENES DESDE LA CMARA DEL IPHONE

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

sivo o capturar imgenes desde un iPhone.

ARQUITECTURA DE COCOA-TOUCH

Antes de entrar en detalle repasemos un poco la arquitectura ulizada 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 grco. Para el caso del iOS SDK podemos ejemplicar la arqui-

tectura de la siguiente manera: Core Data2 (Modelo), UIView3 (Vista), UIViewController4 (Controlador).

En este captulo ulizaremos el controlador UIImagePickerController, el cual se encarga de gesonar la

implementacin de imgenes o vdeo en una aplicacin. Esta clase controla la interface de usuario y

retorna el mensaje una vez terminada su ulizacin.

1 hp://developer.apple.com/technologies/iphone/cocoa-touch.html2 hp://developer.apple.com/macosx/coredata.html3 hp://developer.apple.com/iphone/library/documentaon/uikit/reference/UIView_Class/UIView/UIView.html4 hp://j.mp/tkqT0S
http://developer.apple.com/technologies/iphone/cocoa-touch.htmlhttp://developer.apple.com/macosx/coredata.htmlhttp://developer.apple.com/iphone/library/documentation/uikit/reference/UIView_Class/UIView/UIView.htmlhttp://j.mp/tkqT0Shttp://j.mp/tkqT0Shttp://developer.apple.com/iphone/library/documentation/uikit/reference/UIView_Class/UIView/UIView.htmlhttp://developer.apple.com/macosx/coredata.htmlhttp://developer.apple.com/technologies/iphone/cocoa-touch.html


33/112

UIIMAGEPICKERCONTROLLER EN ACCIN:


2. Agregar los siguientes elementos en ViewController.h:

#import


{

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/112

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

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


35/112

5. Denir en Xcode las funciones declaradas previamente:

#import ViewController.h

@implementation ViewController

@synthesize imagenView, abrirGaleria, tomarFoto;

- (IBAction)abrirGaleria:(id)sender

{

// Inicia el Controlador

UIImagePickerController * picker = [[UIImagePickerController alloc] init];

// Dene el Delegate

picker.delegate = self;

// Establece el origen de la imagenpicker.sourceType = UIImagePickerControllerSourceTypeSavedPhotosAlbum;

// Agrega la vista del controlador a la pantalla

if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad)

{

UIPopoverController *popover = [[UIPopoverController alloc]

initWithContentViewController:picker];


36/112

[picker release];

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

inView:self.view

permittedArrowDirections:UIPopoverArrowDirectionAny

animated: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 nalizado

- (void)imagePickerController:(UIImagePickerController *)picker

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];

}


37/112


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


38/112

Enlace: http://j.mp/tOlso
http://j.mp/tOl2sohttp://j.mp/tOl2so


39/112

Uso de varias vistas

captulo5


40/112

CAPTULO 5

USO DE VARIAS VISTAS

Revisaremos los principales mtodos ulizados para navegar dentro de una aplicacin: UINavigaon

Controller1 y UITabBarController2. Dependiendo del diseo que denamos, se puede ulizar 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 hp://j.mp/sclxU92 hp://j.mp/rLY96e
http://j.mp/sclxU9http://j.mp/rLY96ehttp://j.mp/rLY96ehttp://j.mp/sclxU9


41/112

UINavigaonController crea una jerarqua de vistas, a diferencia de UITabBarController que genera

instancias independientes de vistas. Tambin es posible implementar el controlador UINavigaonCon-

troller dentro de los elementos de un UITabBarController.

IMPLEMENTANDO UINAVIGATIONCONTROLLER Y UITABBARCONTROLLER

1. Crear un nuevo proyecto en Xcode de po Empty Aplicaon

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/112

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

[navigationController pushViewController:segundoViewController animated:NO];

// Agrega las vistas creadas al controlador UITabBarController

// 1. Primer Vista = UIViewController

// 2. Segunda Vista = UINavigationController

[tabBarController setViewControllers:[NSArray

arrayWithObjects:primerViewController, navigationController, nil]

animated:YES];

// 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/112

4. Compilar y Ejecutar:

Al nal obtendrs dos vistas desde el UITabBarController, una de ellas conene un UINavigaonContro

ller. Tambin se pueden implementar estos controladores ulizando Xcode que de manera muy intuiva

permite arrastrar y establecer los controladores respecvos. En caso de presentar algn inconveniente

en los pasos puedes descargar y realizar el proceso de Build and Run.

DESCARGAR

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


44/112

Enlace: http://j.mp/tT
http://j.mp/t423T8http://j.mp/t423T8


45/112

Trabajando con bases de datos SQLLite

captulo6


46/112

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 conable sistema de gesn de bases de datos que est disponible para

el iPhone.

CARACTERSTICAS DE SQLITE:

Es un motor de base de datos SQL embebido y no ene un proceso de servidor independiente. Lee y escribe directamente en archivos de disco normal. Est contenida en un archivo de disconico y una completa base de datos2 con tablas, ndices y vistas.

Formato de archivo de base de datos mul-plataforma (32-bits y 64-bits).

No considerar SQLite como un reemplazo para Oracle3, sino como un sustuto de fopen ()4

IMPLEMENTANDO SQLITE EN UNA APLICACIN:

Para administrar los archivos creados que se ulizarn en nuestra aplicacin podemos descargar SQLite

Database Browser5, una aplicacin gratuita que nos brinda una interfaz grca para crear, disear y

editar archivos de base de datos compables con SQLite. Empezaremos creando un proyecto en Xcode

1 hp://sqlite.org/2 hp://es.wikipedia.org/wiki/Base_de_datos3 hp://es.wikipedia.org/wiki/Oracle4 hp://www.opengroup.org/onlinepubs/009695399/funcons/fopen.html5 hp://sourceforge.net/projects/sqlitebrowser/
http://sqlite.org/http://es.wikipedia.org/wiki/Base_de_datoshttp://es.wikipedia.org/wiki/Oraclehttp://www.opengroup.org/onlinepubs/009695399/functions/fopen.htmlhttp://sourceforge.net/projects/sqlitebrowser/http://sourceforge.net/projects/sqlitebrowser/http://www.opengroup.org/onlinepubs/009695399/functions/fopen.htmlhttp://es.wikipedia.org/wiki/Oraclehttp://es.wikipedia.org/wiki/Base_de_datoshttp://sqlite.org/


47/112

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/112

3. Denir un mtodo para la creacin del archivo de base de datos en la aplicacin:

- (void)createEditableCopyOfDatabaseIfNeeded

{

BOOL success;

NSFileManager *leManager = [NSFileManager defaultManager];

NSError *error;

NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,

NSUserDomainMask, YES);

NSString *documentsDirectory = [paths objectAtIndex:0];NSString *writableDBPath = [documentsDirectory

stringByAppendingPathComponent:@myDB];

success = [leManager leExistsAtPath:writableDBPath];

// Si ya existe el archivo, no lo crea -_-

if (success) return;

// Crea el archivo en el dispositivo


49/112

NSString *defaultDBPath = [[[NSBundle mainBundle] resourcePath]

stringByAppendingPathComponent:@myDB];

success = [leManager copyItemAtPath:defaultDBPath toPath:writableDBPath

error:&error];

if (!success)

NSAssert1(0, @Failed to create writable database le with message %@.,

[error localizedDescription]);

}

4. Denir 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 datos

NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,

NSUserDomainMask, YES);

NSString *documentsDirectory = [paths objectAtIndex:0];

NSString *path = [documentsDirectory stringByAppendingPathComponent:@myDB];

// Abre el archivo de base de datos

if (sqlite3_open([path UTF8String], &db) == SQLITE_OK) {

if (isSelect){

// 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/112

}

else {

// Ejecuta la consulta

if ( sqlite3_prepare_v2(db,[sentence UTF8String],[sentence

length],&resultado,&siguiente) == SQLITE_OK ){

sqlite3_step(resultado);

sqlite3_nalize(resultado);

}

}

}

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

}

5. Denir las consultas a realizar

- (void)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: hp://www.maestrosdelweb.com/images/2010/04/myProjectSQLite.zip
http://www.maestrosdelweb.com/images/2010/04/myProjectSQLite.ziphttp://www.maestrosdelweb.com/images/2010/04/myProjectSQLite.zip


51/112

Enlace: http://j.mp/tlqr
http://j.mp/t2lq1rhttp://j.mp/t2lq1r


52/112

Trabajando con el API de FacebookConnect

captulo7


53/112

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 enes claro porqu implementar Facebook Connect

quiz estas razones2 te ayuden.

CARACTERSTICAS DE FACEBOOK CONNECT:

Conectar: la cuenta e informacin de Facebook con nuestra aplicacin.

Comparr: informacin con los contactos que tambin ulicen la aplicacin. Comprobar: la idendad real de los usuarios.

Actualizacin: de la informacin de los usuarios y las direcvas de privacidad constantemente.

Facebook Feed: permite comparr fcilmente informacin con los contactos.

IMPLEMENTANDO FACEBOOK CONNECT EN UNA APLICACIN:

Damos inicio creando un nuevo proyecto en Xcode de po Single View Applicaon

1. Descargar el SDK de Facebook Connect desde: hp://j.mp/v1Taj3

2. Descomprimir y arrastrar el proyecto la carpeta /scr/

1 hp://developers.facebook.com/connect.php2 hp://www.maestrosdelweb.com/editorial/aprovechando-las-ventajas-de-facebook-connect-sobre-vbullen/
http://j.mp/v1Taj3http://www.maestrosdelweb.com/editorial/aprovechando-las-ventajas-de-facebook-connect-sobre-vbulletin/http://www.maestrosdelweb.com/editorial/aprovechando-las-ventajas-de-facebook-connect-sobre-vbulletin/http://www.maestrosdelweb.com/editorial/aprovechando-las-ventajas-de-facebook-connect-sobre-vbulletin/http://www.maestrosdelweb.com/editorial/aprovechando-las-ventajas-de-facebook-connect-sobre-vbulletin/http://j.mp/v1Taj3


54/112

3. Denir un objeto po 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. Denir las funciones necesarias para inicio se sesin en Facebook:- (BOOL)application:(UIApplication *)application



{

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 {


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/112

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

{


[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/112

6. Compliar y ejecutar:

Obtendremos una funcin que nos permir iniciar sesin en Facebook y acceder a la informacin que

necesitemos. La documentacin ocial nos permite conocer los principales mtodos que podemos uli-

zar en la implementacin.

DOCUMENTACIN OFICIAL:

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


57/112

Enlace: http://j.mp/tmIpJh
http://j.mp/tmIpJhhttp://j.mp/tmIpJh


58/112

Trabajando con el API de Twitter

captulo8


59/112

CAPTULO 8

TRABAJANDO CON EL API DE TWITTER

En el captulo 7 aprenders a vincular en el proyecto la red social Twier conocida como uno de los

medios de comunicacin ms populares, con alto alcance y muy ulizado en aplicaciones para disposi-

vos 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: hp://www.maestrosdelweb.com/editorial/trabajando-con-la-api-de-twier-desde-php/

1 hp://es.wikipedia.org/wiki/Representaonal_State_Transfer
http://www.maestrosdelweb.com/editorial/trabajando-con-la-api-de-twitter-desde-php/http://es.wikipedia.org/wiki/Representational_State_Transferhttp://es.wikipedia.org/wiki/Representational_State_Transferhttp://www.maestrosdelweb.com/editorial/trabajando-con-la-api-de-twitter-desde-php/


60/112

INICIANDO TWITTER EN NUESTRA APLICACIN

A connuacin implementaremos una clase que nos permita enviar y recibir informacin a Twier

desde nuestras aplicaciones :

1. Ulizaremos las librerias Twier+OAuth que se pueden descargar desde aqu.

2. Descomprimir y agregar la carpeta Twier + Oauth al proyecto:

3. Agregar la libreria libxml2.dylib


61/112

4. Agregar la ruta en Header Search Path


62/112

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

6. Importar las librerais en nuestro cdigo en ViewController.h

#import

#import SA_OAuthTwitterController.h

@class SA_OAuthTwitterEngine;


{SA_OAuthTwitterEngine *_engine;

}

@property (nonatomic, retain) SA_OAuthTwitterEngine *_engine;

- (IBAction)postTwitter;

- (void)sendTweet;

@end


63/112

7. Denir las funciones denidas 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

controllerToEnterCredentialsWithTwitterEngine:_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:mensaje

delegate:self

cancelButtonTitle:@Accept

otherButtonTitles:nil];

[alertView show];

[alertView release];


64/112

}

#pragma mark SA_OAuthTwitterEngineDelegate

- (void) storeCachedTwitterOAuthData: (NSString *) data forUsername:

(NSString

*) username

{


[defaults setObject: data forKey: @authData];

[defaults synchronize];

UIAlertView* alert = [[UIAlertView alloc] initWithTitle:@Twitter

Authenticationmessage:@Logged correctly. Please press again the twitter button to send

message.

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 *) requestIdentier

{

NSLog(@Request %@ succeeded, requestIdentier);

}- (void) requestFailed: (NSString *) requestIdentier withError: (NSError *)

error

{

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

}


65/112

8. Compilamos y ejecutamos

Si ha salido todo bien, probablemente tengas experiencia con Objecve-C, porque he saltado algunas

cosas para no hacerlo tan extenso. Puedes descargar el proyecto con la clase implementada para hace

Build and Run

Descargar proyecto: hp://www.maestrosdelweb.com/images/2010/04/TwierAPI.zip
http://www.maestrosdelweb.com/images/2010/04/TwitterAPI.ziphttp://www.maestrosdelweb.com/images/2010/04/TwitterAPI.zip


66/112

Enlace: http://j.mp/ttxpJt
http://j.mp/ttxpJthttp://j.mp/ttxpJt


67/112

Trabajando con el API de OpenFeint

captulo9


68/112

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 Twier comunidades virtuales a las que muchos pertenecen. Actualmente

existen para el caso especco de los vdeo juegos en el iPhone tres comunidades que han tomado

fuerza:

1. Plus: hp://plusplus.com/

2. ScoreLoop: hp://www.scoreloop.com/

3. OpenFeint: hp://www.openfeint.com/

En este captulo, veremos como implementar OpenFeint por ser una de las ms populares entre los

usuarios y por permir a los desarrolladores independientes acceder fcilmente a su API.

CARACTERSTICAS DE OPENFEINT

Contactar con otros jugadores por medio de anuncios, bolenes y foros.

Ver que jugadores estn conectados en ese momento.

Tabla de clasicacin con los mejores puntajes y logros alcanzados.

Geolocalizacin de la tabla de clasicacin integrada con GoogleMaps.

Ofrece diferentes formas de promocionar nuestras aplicaciones dentro de la comunidad.
http://plusplus.com/http://plusplus.com/http://plusplus.com/http://plusplus.com/http://plusplus.com/http://plusplus.com/


69/112

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 ulicemos 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 Sengs y nos aseguramos de tener en Conguraon: All Con-

guraons


70/112

7. Agregamos en Other Linker Flags el valor -ObjC

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

GCC 4.2 Code Generaon

9. Incluir los siguientes Frameworks al proyecto:


71/112

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



{

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

bounds]]

autorelease];

// Override point for customization after application launch.

if ([[UIDevice currentDevice] userInterfaceIdiom] ==UIUserInterfaceIdiomPhone) {


initWithNibName:@ViewController_iPhone bundle:nil] autorelease];

} else {


initWithNibName:@ViewController_iPad bundle:nil] autorelease];


72/112

}

self.window.rootViewController = self.viewController;

[self.window makeKeyAndVisible];

// Inicia OpenFeint

NSDictionary* settings = [NSDictionary dictionaryWithObjectsAndKeys:

[NSNumber numberWithInt:UIInterfaceOrientationPortrait],

OpenFeintSettingDashboardOrientation,

@Nombre App, OpenFeintSettingShortDisplayName,

[NSNumber numberWithBool:YES], OpenFeintSettingEnablePushNotications,

[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/112

{

[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

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


74/112

Enlace: http://j.mp/tdDBBM
http://j.mp/tdDBBMhttp://j.mp/tdDBBM


75/112

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

vos mviles a travs del uso de Chipmunk y Cocos2D.

CHIPMUNK

Motor de sica 2D Parte 1



COCOS 2D

Framework para desarrollar vdeo juegos en 2D Parte 1



Desarrollo de vdeo juegos paradispositivos mviles


76/112

Chipmunk, motor de fsica D Parte

captulo10


77/112

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 sica 2D sencillo de implementar y de gran ayuda a

momento de realizar simulaciones dentro de la aplicacin Chipmunk.

INTRODUCCIN A CHIPMUNK

Un motor de sica es un componente soware desarrollado principalmente para simular la mecnica

newtoniana de objetos modelados dentro de un entorno determinado. El motor considera las variablesgravedad, friccin, masa, velocidad, entre otras para simular la sica de los objetos de manera aproxi-

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

mas de parculas y detectar colisiones, que son de gran ayuda al momento de desarrollar vdeojuegos

Chipmunk es un motor de sica 2D de cdigo abierto desarrollado por Sco Lembcke1 en C bajo licen-

cia MIT2. Dentro de sus caracterscas estn:

Ideal para el desarrollo de videojuegos en 2D

Rpido y ligero para modelar cuerpos rgidos

Flexible sistema de deteccin de colisiones

1 hp://wiki.slembcke.net/main/published/HomePage2 hp://es.wikipedia.org/wiki/MIT_License
http://wiki.slembcke.net/main/published/HomePagehttp://es.wikipedia.org/wiki/MIT_Licensehttp://es.wikipedia.org/wiki/MIT_Licensehttp://wiki.slembcke.net/main/published/HomePage


78/112

INICIANDO LA IMPLEMENTACIN CON XCODE

A connuacin veremos cmo crear un proyecto en Xcode que incorpore las libreras de Chipmunk.

1. Crear un proyecto nuevo en Xcode para iOS de po Single View Applicaon

2. Descargar las libreras de Chipmunk disponibles para descargar: hp://j.mp/rvsbOB

3. Extraer los archivos y agregar el contenido de la carpeta CHIPMUNK al proyecto:
http://j.mp/rvsbOBhttp://j.mp/rvsbOB


79/112

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. Denir en la funcin (void)viewDidLoad de ViewController.m:

- (void)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/112


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


81/112

Enlace: http://j.mp/uDXahc
http://j.mp/uDXahchttp://j.mp/uDXahc


82/112

Chipmunk, motor de fsica D Parte

captulo11


83/112


84/112

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 ulizaremos para iniciar e implementar Chipmunk:

#import

#import chipmunk.h

@interface EquilibrioChipmunkViewController : UIViewController

{UIImageView *barra;UIImageView *esfera;

cpSpace *space;

}

- (void)congurarChipmunk;

- (void)delta:(NSTimer *)timer;

void updateShape(void *ptr, void* unused);

@end

2. Realizar el llamado de (void)confgurarChipmunk en la funcin (void)viewDidLoad:

- (void)viewDidLoad

{


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





[self.view addSubview:esfera];[self.view setBackgroundColor:[UIColor whiteColor]];

[self congurarChipmunk];

}

3. Implementar las tres funciones declaradas anteriormente:

- (void)delta:(NSTimer *)timer {

// Actualiza informacin del Space


85/112

cpSpaceStep(space, 1.0f/60.0f);

// Actualiza informacin de los Shapes denidos

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. Denir Body y Shape de un objeto dinmico circular en la funcin (void)confgurarChipmunk

- (void)congurarChipmunk {

// Inicia el motor de sica 2D Chipmunk

cpInitChipmunk();

// Crea un nuevo Space

space = cpSpaceNew();

// Dene 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:self

selector:@selector(delta:) userInfo:nil repeats:YES];

// Crea un Body con masa 50 y momento INFINITY

cpBody *esferaBody = cpBodyNew(50.0f, INFINITY);

// Establece posicin inicial

esferaBody->p = cpv(160, 250);


86/112

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

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

// Agrega el Shape al Space

cpSpaceAddShape(space, esferaShape);

}5. Compilar y ejecutar

Si hemos hecho todo bien al nal se ver mal, la esfera caer en direccin de la gravedad denida y no

encontrar obstculos en el espacio.


87/112

Enlace: http://j.mp/vmNrh
http://j.mp/vmN9rhhttp://j.mp/vmN9rh


88/112

Chipmunk, motor de fsica D y elacelermetro Parte

captulo12


89/112

89

CAPTULO 12

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

En este captulo nalizaremos el tema sobre el motor de sica 2D, Chipmunk. Hasta el momento hemos

visto los conceptor bsicos (Parte 1) y los elementos dinmicos presentes en las simulaciones (parte 2)

En este lmo captulo revisaremos los elementos estcos y la implementacin del acelermetro con

nuestra aplicacin.

Para connuar explorando sobre Chipmunk recomiendo revisar la documentacin disponible y seguir

probando el desempeo de las simulaciones en los disposivos mviles (iPhone / iPod Touch/ iPad)

para lograr una pma implementacin del motor de sica 2D.

DOCUMENTACIN CHIPMUNK

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

CONCEPTOS

Antes de implementar los elementos estcos en nuestra aplicacin es importante recordar los pos 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 oset).

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 denido previamente por medio de sus vrces. EnChipmunk no se pueden modelar polgonos Concavos, para esos casos se debe ulizar Segment

cpPolyShapeNew(cpBody * body, int numVerts, cpVect * verts, cpVect oset).
http://code.google.com/p/chipmunk-physics/http://code.google.com/p/chipmunk-physics/


90/112

89

FINALIZANDO LA IMPLEMENTACIN EN XCODE

Prosigamos con el proyecto creado para estos menesteres en el captulo anterior:

1. Denir Body y Shape de un objeto estco lineal en la funcin (void)congurarchipmunk

- (void)congurarChipmunk {

// Inicia el motor de sica 2D Chipmunk

cpInitChipmunk();

// Crea un nuevo Space

space = cpSpaceNew();// Dene 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:self

selector:@selector(delta:) userInfo:nil repeats:YES];

// Crea un Body con masa 50 y momento INFINITY

cpBody *esferaBody = cpBodyNew(50.0f, INFINITY);

// Establece posicin inicial

esferaBody->p = cpv(160, 250);

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

esferaShape->collision_type = 1; // Las colisiones son agrupadas por tipo// Agrega el Shape al Space

cpSpaceAddShape(space, esferaShape);

// ==============================

// Implementacin Objeto Esttico

// ==============================

// Crea un Body con masa y momento INFINITY


91/112

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

// si quieres saber que pasa, agregalo

// Crea un Shape tipo Segment asociado al Body barraBody

barraShape = cpSegmentShapeNew(barraBody, cpv(-105, -3), cpv(105, -3), 10.0);

barraShape->e = 0.7f; // Elasticidad

barraShape->u = 0.4f; // FriccinbarraShape->data = barra; // Asocia Shape con UIImageView

barraShape->collision_type = 0;

// Se agrupa en un tipo de colisin diferente a esferaShape

// Agrega el Shape al Space

cpSpaceAddShape(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)congurarChipmunk;

- (void)delta:(NSTimer *)timer;

void updateShape(void *ptr, void* unused);

@end


92/112

89

3. Denir la funcin que implementa el acelermetro:

- (void)accelerometer:(UIAccelerometer*)accelerometer didAccelerate:

(UIAcceleration*)acceleration{

// Modica el ngulo de la Barra con relacin a la inclinacin del

dispositivo

cpBodySetAngle(barraBody, M_PI * (acceleration.x * 0.6f) );

// Notica a Chipmunk el movimiento de un Objeto Esttico

cpSpaceRehashStatic(space);

// Actualiza el Shape de la Barra (Objeto Esttico)

[(UIView *)barraShape->data setTransform:CGAfneTransformMakeRotation(-barraShape->body->a)];

}

4. Inicializamos el acelermetro en la funcin (void)viewDidLoad

- (void)viewDidLoad {


barra = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@barra.

png]];





[self.view addSubview:esfera];

[self.view setBackgroundColor:[UIColor whiteColor]];

[self congurarChipmunk];

// Inicia el acelermetro[[UIAccelerometer sharedAccelerometer] setUpdateInterval:(1.0 / 60)];

[[UIAccelerometer sharedAccelerometer] setDelegate:self];

}


93/112

89


Si hemos hecho todo bien al nal obtendremos un objeto circular que se sosene con un madero el

cual gira con el movimiento del disposivo. Se puede seguir probando con disntos valores de masa,

friccin, elascidad, gravedad, entro otros para conocer un poco ms el comportamiento de los objetos

dentro del espacio creado.


94/112

89

Enlace: http://j.mp/scOdr
http://j.mp/scOdr8http://j.mp/scOdr8


95/112

CocosD, Framework para desarrollarvdeojuegos en D Parte

captulo13


96/112

CAPTULO 13

COCOS2D, FRAMEWORK PARA DESARROLLAR VDEOJUEGOS EN 2DPARTE 1

Para el desarrollo de vdeojuegos en la plataforma iPhone OS (iPhone/iPod Touch/iPad) es importante

conocer las disntas herramientas disponibles y evaluar cul de ellas se ajusta ms a nuestras necesida-

des. Varias aplicaciones actualmente son desarrolladas ulizando uno de estos componentes:

OpenGL ES: hp://www.khronos.org/opengles/

UIKit: hp://j.mp/uCLGnA

Core Animaon + Quartz 2D: hp://j.mp/uvEu2A

UIKit es el ms sencillo de ulizar en comparacin con OpenGL ES que requiere de un mayor empo de

implementacin pero ofrece el mejor rendimiento. La buena nocia es que existe un framework que

simplica esta implementacin: Cocos2D.

CONOCIENDO COCOS2D

Cocos2D es un framework para el desarrollo de juegos en 2D y aplicaciones con alto contenido interac-

vo. Cocos2D para iPhone es basado en Cocos2D pero implementa Objeve-C como lenguaje de progra-

macin en lugar de Python. Dentro de las caracterscas principales de este framework encontramos:

Integracin con motores de sica: Box2D1, Chipmunk.

Manejo de Escenas y efectos de transiciones.

Compabilidad 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 contene

uno o ms objetos: mens, botones, equetas, cuerpos, etc. A su vez una escena puede contener una o ms capas

1 hp://www.box2d.org/

2 hp://en.wikipedia.org/wiki/PVRTC

3 hp://en.wikipedia.org/wiki/RGBA
http://www.khronos.org/opengles/http://j.mp/uvEu2Ahttp://j.mp/uvEu2Ahttp://www.box2d.org/http://en.wikipedia.org/wiki/PVRTChttp://en.wikipedia.org/wiki/RGBAhttp://en.wikipedia.org/wiki/RGBAhttp://en.wikipedia.org/wiki/PVRTChttp://www.box2d.org/http://j.mp/uvEu2Ahttp://j.mp/uvEu2Ahttp://www.khronos.org/opengles/


97/112

IMPLEMENTACIN DE COCOS2D EN UNA APLICACIN

1. Descarga las liberas de Cocos 2D para iPhone: hp://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 po cocos2d Applicaon


La planlla 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 po CCLayer)HelloWorld *layer = [HelloWorld node];

CCLabel: Uno de los pos 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 uli-

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

nuestras aplicaciones.
http://code.google.com/p/cocos2d-iphone/http://code.google.com/p/cocos2d-iphone/


98/112

Enlace: http://j.mp/ttovDQ
http://j.mp/ttovDQhttp://j.mp/ttovDQ


99/112


captulo14


100/112

CAPTULO 14


Prosiguiendo con Cocos2D el framework basado en OpenGL ES para el desarrollo de juegos en 2D en

la plataforma de iOS, connuaremos 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/112

1. Redenimos la clase HelloWorld de CCLayer a CCColorLayer, para modicar 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 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;

}



102/112

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

id jumpAction = [CCJumpBy actionWithDuration:2 position:ccp(260,0) height:50

jumps:2];

// Agrupa 2 o ms acciones

id fordward = [CCSpawn actions:rotateAction, jumpAction, nil];

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

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 innito 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 denida anteriormente:

// Mtodo que implementa el evento Touch en Cocos2D

- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

[self moveObject];

}



103/112

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

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


104/112

Enlace: http://j.mp/uPQsm
http://j.mp/u6PQsmhttp://j.mp/u6PQsm


105/112


captulo15


106/112

CAPTULO 15


Para nalizar con los captulos sobre Cocos2D revisaremos la librera que implementa los sonidos en

una aplicacin para el iPhone. Si bien podemos ulizar 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-

mco cuando se ulizan auriculares, parlantes y auriculares Bluetooth. Por su parte OpenAL es idea

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: hp://www.maestrosdelweb.com/images/2010/04/soundBackground.m4a

Sound Eect: hp://www.maestrosdelweb.com/images/2010/04/soundEect.m4a

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


107/112

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];

// Crea un objeto tipo CCSprite que contiene la imagen agregada

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];

// 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];

}



108/112

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 ulidad para lograr un mejor desempeo

en nuestras aplicaciones.

Puedes descargar el proyecto para realizar el liberador procedimiento de Build and Run.

DESCARGAR EL PROYECTO

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


109/112

Enlace: http://j.mp/rxelB
http://j.mp/rxe0lBhttp://j.mp/rxe0lB


110/112

OTRAS GUAS DE MAESTROS DEL WEB

Guas online

ADICTOS A LA COMUNICACIN

Uliza las herramientas sociales en Internet

para crear proyectos de comunicacin inde-

pendientes.

Visita Adictos a la comunicacin

hp://mdw.li/guiacomunica

GUA STARTUP

Aprende las oportunidades, retos y estra-

tegias que toda persona debe conocer al

momento de emprender.

Visita la Gua Startup

hp://mdw.li/gkTDom
http://mdw.li/guiacomunicahttp://mdw.li/gkTDomhttp://mdw.li/gkTDomhttp://mdw.li/guiacomunica


111/112

LOS MAESTROS DEL WEB

Una serie de perles de personas y proyectos

que nos inspiran a permanecer en el medio,

aprender y seguir evolucionando.

Visita Los Maestros del Web

hp://j.mp/spAncK

CURSO ANDROID

Actualiza tus conocimientos con el curso

sobre Android para el desarrollo de aplica-

ciones mviles.

Visita el Curso Android

hp://mdw.li/lmlydX
http://j.mp/spAncKhttp://mdw.li/lmlydXhttp://mdw.li/lmlydXhttp://j.mp/spAncK


112/112

GUA ASP.NET

ASP.NET es un modelo de desarrollo Web

unicado creado por Microso para el desa-

rrollo de sios y aplicaciones web dinmicas

GUA ZEND

Zend Framework es un framework de

cdigo abierto para desarrollar apli-

caciones y servicios web con PHP 5

Documents

Maestrosdelweb Guia Ios5