Maestrosdelweb Guia Ios5

2
GUA IOS
Versin 2 / noviembre 2011
Nivel: Intermedio / Avanzado
La Gua iOS se encuentra en lnea en:
htp://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 Creatve Commons
Atribucin-NoComercial-CompartrIgual 3.0 Unported (CC BY-NC-SA 3.0)
CONTACTO
htp://www.maestrosdelweb.com/sito/correo/
REDES SOCIALES
Facebook: htp://www.facebook.com/maestrosdelweb
Twiter: htp://www.twiter.com/maestros
Sobre la gua
3
JAVIER CALA URIBE
Ingeniero de Sistemas, actualmente es desarro-
llador para iOS (Objectve-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
4
INTRODUCCIN
En la actualidad existe un fuerte inters por parte de los programadores en el desarrollo de aplicaciones
para dispositvos mviles como: iPad, iPhone e iPod Touch.
Dispositvos mviles que se hacen cada vez ms populares en el mercado de las comunicaciones, porque
proporcionan una plataforma con sistema operatvo como iOs 5.0. La adquisicin de este tpo de apara-
tos por parte de los usuarios se incrementa en la medida que encuentran en ellos nuevas aplicaciones o
servicios que satsfacen sus necesidades bsicas, profesionales, educatvas 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 objetvo de ensearte las principales caracterstcas del entorno de progra-
macin para dispositvos mviles con una serie de ejemplos y recursos que muestran la facilidad de las
herramientas de desarrollo.
Introduccin
5
NDICE
1 | Sobre la gua ..........................................................................................................2
2 | Sobre el autor .........................................................................................................3
3 | Introduccin ...........................................................................................................4
4 | Desarrollando aplicaciones para dispositvos 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 Twiter ...................................................................... 58
12 | Trabajando con el API de OpenFeint ................................................................. 67
13 | Desarrollo de vdeo juegos para dispositvos 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
captulo
1
7
CAPTULO I
DESARROLLANDO APLICACIONES PARA DISPOSITIVOS MVILES
iOS es el sistema implementado por Apple que permite ejecutar aplicaciones natvas en los dispositvos
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 mult-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

Dispositvo mvil para pruebas (opcional)
El iOS SDK contene 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: contene 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 grfcas y vinculacin con Xcode. (A partr de
Xcode 4, interface builder est incorporado en la misma interfaz que Xcode)

iOS Simulator: ejecuta las aplicaciones desarrolladas en un emulador del dispositvo.
8
CREANDO UN PROYECTO EN XCODE Y EL IOS SIMULATOR
1. Abrir Xcode e ir a File->New Project y seleccionar Single View Applicaton
9
2. Declarar una etqueta (UILabel) y una funcin (IBActon) en la clase ViewController.h
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
{
UILabel *miEtiqueta;
}
@property (nonatomic, retain) IBOutlet UILabel *miEtiqueta;
- (IBAction)cambiarEtiqueta:(id)sender;
@end
3. Defnir la funcin (IBActon) 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 etqueta (UILabel) y un botn
(UIButton) en la vista del controlador.
11
5. En la ventana Connectons Inspector arrastrar miEtqueta hasta la etqueta creada y la funcin
cambiarEtqueta 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 defnida inicialmente como Universal app.
Para encontrar ms informacin sobre el entorno de programacin del sistema iOS pueden revisar:
htp://developer.apple.com/technologies/tools/xcode.html
13
Enlace: http://j.mp/sXbaU7
Uso del navegador en un app
captulo
2
15
CAPTULO 2
USO DEL NAVEGADOR EN UN APP
Ahora, aprenderemos a utlizar la clase UIWebView
1
que nos permite mostrar contenido web embebido
en el dispositvo 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 dispositvo.
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 tpo Single View Applicaton
1 htp://j.mp/vQm9a1
16
2. En ViewController.h declarar los elementos
@interface ViewController : UIViewController <UIWebViewDelegate>
{
IBOutlet UIWebView *webView;
}
@end
3. Abrir el archivo ViewController_iPhone.xib y agregar los siguientes elementos declarados
previamente: 1 UIWebView y 3 botones
4. Seleccionar el objeto UIWebView y desde el Inspector Connectons arrastrar: delegate, goBack,
goForward, reload.
17
18
5. Volviendo a Xcode defnir 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 defnida en la funcin (void)viewDi-
dLoad. La clase UIWebView es de gran utlidad 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 defnidos en la aplicacin.
20
Enlace: http://j.mp/s2daly
Uso del correo
captulo
3
22
CAPTULO 3
USO DEL CORREO
En este captulo revisaremos un tema de gran utlidad para compartr informacin: el uso del correo a
partr de la versin 3.0 iOS, esta disponible la clase MFMailComposeViewController para enviar correos
desde el iPhone. Las versiones anteriores utlizan la aplicacin Mail que trae por defecto el dispositvo.
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 predefnido con los campos: subject, email recipients, body text y atachments, es
decir, un formulario normal de correo. Uno de los inconvenientes con esta clase es que no permite veri-
fcar si efectvamente el correo enviado lleg a su destno.
La clase se encarga de colocar los mensajes enviados en el buzn de salida de la aplicacin Mail, resul-
tando tl para el envo de correos electrnicos cuando no se cuenta con conexin a la red, pero inapro-
piado para confrmar el envo.
Para ms informacin sobre esta clase puedes consultar MFMailComposeViewController Class Refe-
rence
1
.
1 htp://j.mp/u4yrWJ
23
SENT FROM MY IOS SIMULATOR
2. Agregar el framework MessageUI:
24
3. En ViewController.h agregar los elementos:
#import <MessageUI/MessageUI.h>
#import <MessageUI/MFMailComposeViewController.h>
@interface ViewController : UIViewController
// Delegate de la clase MFMailComposeViewController
<MFMailComposeViewControllerDelegate>
{
IBOutlet UILabel *respuesta;
}
@property (nonatomic, retain) IBOutlet UILabel *respuesta;
// Verifca si esta disponible la clase MFMailComposeViewController
-(IBAction)verEditMail:(id)sender;
// Confgura vista para editar y enviar un email
-(void)confgurarMail;
// Ejecuta la App Mail del dispositivo
-(void)ejecutarMailApp;
@end
25
4. Abrir el archivo ViewController.xib en Interface Builder, agregar los elementos UIButon, UILa-
bel y relacionarlos con la App:
26
5. Defnir las siguientes funciones de ViewController.m en Xcode:
@synthesize respuesta;
- (IBAction)verEditMail:(id)sender
{
Class mailClass = (NSClassFromString(@MFMailComposeViewController));
if (mailClass != nil)
{
// Verifca que este habilitada la opcion para enviar correos en el
dispositivo
if ([mailClass canSendMail])
[self confgurarMail];
else
[self ejecutarMailApp];
}
else
[self ejecutarMailApp];
}
// Confgura vista para editar y enviar un email
- (void)confgurarMail
{
MFMailComposeViewController *mailView = [[MFMailComposeViewController alloc]
init];
mailView.mailComposeDelegate = self;
[mailView setSubject:@Mejorando la Web!];
// Destinatarios
NSArray *toRecipients = [NSArray
arrayWithObject:@cvander@maestrosdelweb.com<script type=text/javascript>
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l=document.getElementById(__cf_email__);
a=l.className;if(a){s=;r=parseInt(a.substr(0,2),16);for(j=2;a.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
/* ]]> */
</script>];
NSArray *ccRecipients = [NSArray arrayWithObjects:@info@forosdelweb.
com<script
type=text/javascript>
/* <![CDATA[ */
j;j+=2)
/* ]]> */
</script>, 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;
// Notifca 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:cvander@maestrosdelweb.com<script
type=text/javascript>
/* <![CDATA[ */
j;j+=2)
/* ]]> */
</script>?cc=info@forosdelweb.com<script type=text/javascript>
/* <![CDATA[ */
j;j+=2)
29
/* ]]> */
</script>&subject=Mejorando la Web!;
NSString *body = @&body=Un saludo a tod@s!;
NSString *email = [NSString stringWithFormat:@%@%@, recipients, body];
email = [email stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
[[UIApplication sharedApplication] openURL:[NSURL URLWithString:email]];
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
}
- (void)dealloc
{
[respuesta release];
[super dealloc];
}
6. Compilar y ejecutar:

30
Enlace: http://j.mp/uMACMe
Capturar imgenes desde la cmara
del iPhone
captulo
4
32
CAPTULO 4
CAPTURAR IMGENES DESDE LA CMARA DEL IPHONE
Utlizaremos el controlador UIImagePickerController para acceder a las imgenes guardadas en el dispo-
sitvo o capturar imgenes desde un iPhone.
ARQUITECTURA DE COCOA-TOUCH
Antes de entrar en detalle repasemos un poco la arquitectura utlizada por Cocoa-Touch
1
(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 grfco. Para el caso del iOS SDK podemos ejemplifcar la arqui-
tectura de la siguiente manera: Core Data
2
(Modelo), UIView
3
(Vista), UIViewController
4
(Controlador).
En este captulo utlizaremos el controlador UIImagePickerController, el cual se encarga de gestonar la
implementacin de imgenes o vdeo en una aplicacin. Esta clase controla la interface de usuario y
retorna el mensaje una vez terminada su utlizacin.
1 htp://developer.apple.com/technologies/iphone/cocoa-touch.html
2 htp://developer.apple.com/macosx/coredata.html
3 htp://developer.apple.com/iphone/library/documentaton/uikit/reference/UIView_Class/UIView/UIView.html
4 htp://j.mp/tkqT0S
33
UIIMAGEPICKERCONTROLLER EN ACCIN:
2. Agregar los siguientes elementos en ViewController.h:
@interface ViewController : UIViewController <UIImagePickerControllerDelegate,
UINavigationControllerDelegate>
{
UIImageView *imagenView;
UIButton *abrirGaleria;
UIButton *tomarFoto;
}
@property (nonatomic, retain) IBOutlet UIImageView *imagenView;
@property (nonatomic, retain) IBOutlet UIButton *abrirGaleria;
@property (nonatomic, retain) IBOutlet UIButton *tomarFoto;
- (IBAction)abrirGaleria:(id)sender;
- (IBAction)tomarFoto:(id)sender;
@end
34
3. Abrir el archivo ViewController.xib y agregar 1 UIImageView y 2 UIButon

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

35
5. Defnir 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];
// Defne el Delegate
picker.delegate = self;
// Establece el origen de la imagen
picker.sourceType = UIImagePickerControllerSourceTypeSavedPhotosAlbum;
// Agrega la vista del controlador a la pantalla
if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad)
{
UIPopoverController *popover = [[UIPopoverController alloc]
initWithContentViewController:picker];
36
[picker release];
[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 fnalizado
- (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

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
captulo
5
40
CAPTULO 5
USO DE VARIAS VISTAS
Revisaremos los principales mtodos utlizados para navegar dentro de una aplicacin: UINavigaton-
Controller
1
y UITabBarController
2
. Dependiendo del diseo que defnamos, se puede utlizar 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 htp://j.mp/sclxU9
2 htp://j.mp/rLY96e
41
UINavigatonController crea una jerarqua de vistas, a diferencia de UITabBarController que genera
instancias independientes de vistas. Tambin es posible implementar el controlador UINavigatonCon-
troller dentro de los elementos de un UITabBarController.
IMPLEMENTANDO UINAVIGATIONCONTROLLER Y UITABBARCONTROLLER
1. Crear un nuevo proyecto en Xcode de tpo Empty Aplicaton
2. Agregar los siguientes elementos en AppDelegate.h:
@interface AppDelegate : UIResponder <UIApplicationDelegate>
{
UIWindow *window;
UITabBarController *tabBarController;
UINavigationController *navigationController;
}
@property (strong, nonatomic) UIWindow *window;
@end
42
3. Inicializa los controladores con solo cdigo sin usar Interface Builder desde AppDelegate.m:
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:
(NSDictionary *)launchOptions
{// Inicializa los controladores
navigationController = [[UINavigationController alloc] init];
tabBarController = [[UITabBarController alloc] init];
// Inicializa la primer vista del TabBarController
UIViewController *primerViewController = [[UIViewController alloc] init];
primerViewController.view.backgroundColor = [UIColor whiteColor];
primerViewController.title = @Primero;
// Inicializa la segunda vista del TabBarController
UIViewController *segundoViewController = [[UIViewController alloc] init];
segundoViewController.view.backgroundColor = [UIColor whiteColor];
segundoViewController.title = @Segundo;
// Agrega la segunda vista al controlador UINavigationController
[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
4. Compilar y Ejecutar:

Al fnal obtendrs dos vistas desde el UITabBarController, una de ellas contene un UINavigatonContro-
ller. Tambin se pueden implementar estos controladores utlizando Xcode que de manera muy intuitva
permite arrastrar y establecer los controladores respectvos. En caso de presentar algn inconveniente
en los pasos puedes descargar y realizar el proceso de Build and Run.
DESCARGAR
htp://www.maestrosdelweb.com/images/2010/06/UINavTabApp.zip
44
Enlace: http://j.mp/t423T8
Trabajando con bases de datos SQL
Lite
captulo
6
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
SQLite
1
un pequeo, rpido y confable sistema de gestn de bases de datos que est disponible para
el iPhone.
CARACTERSTICAS DE SQLITE:

Es un motor de base de datos SQL embebido y no tene 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 datos
2
con tablas, ndices y vistas.

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

No considerar SQLite como un reemplazo para Oracle
3
, sino como un susttuto de fopen ()
4
IMPLEMENTANDO SQLITE EN UNA APLICACIN:
Para administrar los archivos creados que se utlizarn en nuestra aplicacin podemos descargar SQLite
Database Browser
5
, una aplicacin gratuita que nos brinda una interfaz grfca para crear, disear y
editar archivos de base de datos compatbles con SQLite. Empezaremos creando un proyecto en Xcode.
1 htp://sqlite.org/
2 htp://es.wikipedia.org/wiki/Base_de_datos
3 htp://es.wikipedia.org/wiki/Oracle
4 htp://www.opengroup.org/onlinepubs/009695399/functons/fopen.html
5 htp://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. Defnir un mtodo para la creacin del archivo de base de datos en la aplicacin:
- (void)createEditableCopyOfDatabaseIfNeeded
{
BOOL success;
NSFileManager *fleManager = [NSFileManager defaultManager];
NSError *error;
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,
NSUserDomainMask, YES);
NSString *documentsDirectory = [paths objectAtIndex:0];
NSString *writableDBPath = [documentsDirectory
stringByAppendingPathComponent:@myDB];
success = [fleManager fleExistsAtPath: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 = [fleManager copyItemAtPath:defaultDBPath toPath:writableDBPath
error:&error];
if (!success)
NSAssert1(0, @Failed to create writable database fle with message %@.,
[error localizedDescription]);
}
4. Defnir el mtodo para realizar las consultas en la base de datos:
-(void)executeSentence:(NSString *)sentence sentenceIsSelect:(BOOL )isSelect{
// Variables para realizar la consulta
static sqlite3 *db;
sqlite3_stmt *resultado;
const char* siguiente;
// Buscar el archivo de base de datos
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
}
else {
// Ejecuta la consulta
if ( sqlite3_prepare_v2(db,[sentence UTF8String],[sentence
length],&resultado,&siguiente) == SQLITE_OK ){
sqlite3_step(resultado);
sqlite3_fnalize(resultado);
}
}
}
// Cierra el archivo de base de datos
sqlite3_close(db);
}
5. Defnir 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: htp://www.maestrosdelweb.com/images/2010/04/myProjectSQLite.zip
51
Enlace: http://j.mp/t2lq1r
Trabajando con el API de Facebook
Connect
captulo
7
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 tenes claro porqu implementar Facebook Connect
1

quiz estas razones
2
te ayuden.
CARACTERSTICAS DE FACEBOOK CONNECT:

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

Compartr: informacin con los contactos que tambin utlicen la aplicacin.

Comprobar: la identdad real de los usuarios.

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

Facebook Feed: permite compartr fcilmente informacin con los contactos.
IMPLEMENTANDO FACEBOOK CONNECT EN UNA APLICACIN:
Damos inicio creando un nuevo proyecto en Xcode de tpo Single View Applicaton
1. Descargar el SDK de Facebook Connect desde: htp://j.mp/v1Taj3
2. Descomprimir y arrastrar el proyecto la carpeta /scr/
1 htp://developers.facebook.com/connect.php
2 htp://www.maestrosdelweb.com/editorial/aprovechando-las-ventajas-de-facebook-connect-sobre-vbulletn/
54
3. Defnir un objeto tpo Facebook en AppDelegate.h:
#import FBConnect.h
@class ViewController;
@interface AppDelegate : UIResponder <UIApplicationDelegate,FBSessionDelegate>
{ Facebook *facebook;}
@property (strong, nonatomic) UIWindow *window;
@property (strong, nonatomic) ViewController *viewController;
@property (nonatomic, retain) Facebook *facebook;
@end
4. Defnir las funciones necesarias para inicio se sesin en Facebook:
{
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;
facebook = [[Facebook alloc] initWithAppId:@YOUR_APP_ID andDelegate:self];
NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];
if ([defaults objectForKey:@FBAccessTokenKey]
&& [defaults objectForKey:@FBExpirationDateKey])
{
55
facebook.accessToken = [defaults objectForKey:@FBAccessTokenKey];
facebook.expirationDate = [defaults objectForKey:@FBExpirationDateKey];
}
if (![facebook isSessionValid])
[facebook authorize:nil];
return YES;
}
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
return [facebook handleOpenURL:url];
}
- (void)fbDidLogin
{
[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 permitr iniciar sesin en Facebook y acceder a la informacin que
necesitemos. La documentacin ofcial nos permite conocer los principales mtodos que podemos utli-
zar en la implementacin.
DOCUMENTACIN OFICIAL:
htp://wiki.developers.facebook.com/index.php/Facebook_Connect_for_iPhone
57
Enlace: http://j.mp/tmIpJh
Trabajando con el API de Twitter
captulo
8
59
CAPTULO 8
TRABAJANDO CON EL API DE TWITTER
En el captulo 7 aprenders a vincular en el proyecto la red social Twiter conocida como uno de los
medios de comunicacin ms populares, con alto alcance y muy utlizado en aplicaciones para disposi-
tvos 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 (REST
1
).
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: htp://www.maestrosdelweb.com/editorial/trabajando-con-la-api-de-twiter-desde-php/
1 htp://es.wikipedia.org/wiki/Representatonal_State_Transfer
60
INICIANDO TWITTER EN NUESTRA APLICACIN
A contnuacin implementaremos una clase que nos permita enviar y recibir informacin a Twiter
desde nuestras aplicaciones :
1. Utlizaremos las librerias Twiter+OAuth que se pueden descargar desde aqu.
2. Descomprimir y agregar la carpeta Twiter + 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 Twiter:
6. Importar las librerais en nuestro cdigo en ViewController.h
#import SA_OAuthTwitterController.h
@class SA_OAuthTwitterEngine;
@interface ViewController : UIViewController <SA_OAuthTwitterControllerDelegate>
{
SA_OAuthTwitterEngine *_engine;
}
@property (nonatomic, retain) SA_OAuthTwitterEngine *_engine;
- (IBAction)postTwitter;
- (void)sendTweet;
@end
63
7. Defnir las funciones defnidas 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 <img
src=http://www.maestrosdelweb.com/wp-includes/images/smilies/icon_smile.gif
alt=:) class=wp-smiley> ;
[_engine sendUpdate:mensaje];
UIAlertView* alertView = [[UIAlertView alloc] initWithTitle:@Posted To
Twitter
message:mensaje
delegate:self
cancelButtonTitle:@Accept
otherButtonTitles:nil];
[alertView show];
[alertView release];
64
}
#pragma mark SA_OAuthTwitterEngineDelegate
- (void) storeCachedTwitterOAuthData: (NSString *) data forUsername:
(NSString
*) username
{
[defaults setObject: data forKey: @authData];
[defaults synchronize];
UIAlertView* alert = [[UIAlertView alloc] initWithTitle:@Twitter
Authentication
message:@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 *) requestIdentifer
{
NSLog(@Request %@ succeeded, requestIdentifer);
}
- (void) requestFailed: (NSString *) requestIdentifer withError: (NSError *)
error
{
NSLog(@Request %@ failed with error: %@, requestIdentifer, error);
}
65
8. Compilamos y ejecutamos
Si ha salido todo bien, probablemente tengas experiencia con Objectve-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: htp://www.maestrosdelweb.com/images/2010/04/TwiterAPI.zip
66
Enlace: http://j.mp/ttxpJt
Trabajando con el API de OpenFeint
captulo
9
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 Twiter comunidades virtuales a las que muchos pertenecen. Actualmente,
existen para el caso especfco de los vdeo juegos en el iPhone tres comunidades que han tomado
fuerza:
1. Plus: htp://plusplus.com/
2. ScoreLoop: htp://www.scoreloop.com/
3. OpenFeint: htp://www.openfeint.com/
En este captulo, veremos como implementar OpenFeint por ser una de las ms populares entre los
usuarios y por permitr a los desarrolladores independientes acceder fcilmente a su API.
CARACTERSTICAS DE OPENFEINT

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

Ver que jugadores estn conectados en ese momento.

Tabla de clasifcacin con los mejores puntajes y logros alcanzados.

Geolocalizacin de la tabla de clasifcacin 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 utlicemos 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 Setngs y nos aseguramos de tener en Confguraton: All Conf-
guratons
70
7. Agregamos en Other Linker Flags el valor -ObjC
8. Nos aseguramos que est seleccionado Call C++ Default Ctors/Dtors in Objectve-C en la seccin
GCC 4.2 Code Generaton
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
{
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
}
self.window.rootViewController = self.viewController;
// Inicia OpenFeint
NSDictionary* settings = [NSDictionary dictionaryWithObjectsAndKeys:
[NSNumber numberWithInt:UIInterfaceOrientationPortrait],
OpenFeintSettingDashboardOrientation,
@Nombre App, OpenFeintSettingShortDisplayName,
[NSNumber numberWithBool:YES], OpenFeintSettingEnablePushNotifcations,
[NSNumber numberWithBool:NO], OpenFeintSettingDisableUserGeneratedContent,
[NSNumber numberWithBool:NO], OpenFeintSettingAlwaysAskForApprovalInDebug,
self.window, OpenFeintSettingPresentationWindow,
nil
];
[OpenFeint initializeWithProductKey:@yourProductKey
andSecret:@yourProductSecret
andDisplayName:@Nombre App
andSettings:settings
andDelegates:nil];
// Muestra Pantalla Principal de OpenFeint
[OpenFeint launchDashboard];
return YES;
}
12. Incluimos estas tres funciones de control para OpenFeint
>(void)applicationWillTerminate:(UIApplication *)application
{
// Finaliza OpenFeint
[OpenFeint shutdown];
}
(void)applicationDidBecomeActive:(UIApplication *)application
{
[OpenFeint applicationDidBecomeActive];
}
(void)applicationWillResignActive:(UIApplication *)application
73
{
[OpenFeint applicationWillResignActive];
}
13. Compilar y ejecutar

En estos momentos tenemos implementada la API de OpenFeint en nuestro proyecto. Ahora debemos
agregar dentro del cdigo fuente las funciones necesarias segn los servicios que incorporemos: Achie-
vements, Leaderboards, etc.
DOCUMENTACIN OFICIAL
htp://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 disposit-
vos mviles a travs del uso de Chipmunk y Cocos2D.
CHIPMUNK

Motor de fsica 2D Parte 1


COCOS 2D

Framework para desarrollar vdeo juegos en 2D Parte 1


Desarrollo de vdeo juegos para
dispositivos mviles
Chipmunk, motor de fsica 2D
Parte 1
captulo
10
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 sofware 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 Scot Lembcke
1
en C bajo licen-
cia MIT
2
. Dentro de sus caracterstcas estn:

Ideal para el desarrollo de videojuegos en 2D

Rpido y ligero para modelar cuerpos rgidos

Flexible sistema de deteccin de colisiones
1 htp://wiki.slembcke.net/main/published/HomePage
2 htp://es.wikipedia.org/wiki/MIT_License
78
INICIANDO LA IMPLEMENTACIN CON XCODE
A contnuacin veremos cmo crear un proyecto en Xcode que incorpore las libreras de Chipmunk.
1. Crear un proyecto nuevo en Xcode para iOS de tpo Single View Applicaton
2. Descargar las libreras de Chipmunk disponibles para descargar: htp://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
@interface EquilibrioChipmunkViewController : UIViewController
{
UIImageView *barra;
UIImageView *esfera;
}
@end
6. Defnir 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

Al fnalizar los siete pasos descritos, obtendremos una imagen como la anterior.
81
Enlace: http://j.mp/uDXahc
Chipmunk, motor de fsica 2D
Parte 2
captulo
11
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 utlizado 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 contene 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 contenen 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 permitendo la colisin entre ellos. Existen tres tpos de shapes: circular, segmentado y
poligonal.

Constraints: permiten conectar dos cuerpos de diferentes formas.

Forces: son vectores (x,y) utlizados para interactuar con los objetos creados en el entorno de
simulacin. No es recomendable modifcar directamente las propiedades de los objetos (posi-
cin, velocidad, etc), para realizar esto se deben utlizar 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 utlizaremos para iniciar e implementar Chipmunk:
#import chipmunk.h
@interface EquilibrioChipmunkViewController : UIViewController
{UIImageView *barra;
cpSpace *space;
}
- (void)confgurarChipmunk;
- (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 confgurarChipmunk];
}
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 defnidos
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. Defnir Body y Shape de un objeto dinmico circular en la funcin (void)confgurarChipmunk
- (void)confgurarChipmunk {
// Inicia el motor de fsica 2D Chipmunk
cpInitChipmunk();
// Crea un nuevo Space
space = cpSpaceNew();
// Defne 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
// 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);
}

Si hemos hecho todo bien al fnal se ver mal, la esfera caer en direccin de la gravedad defnida y no
encontrar obstculos en el espacio.
87
Enlace: http://j.mp/vmN9rh
Chipmunk, motor de fsica 2D y el
acelermetro Parte 3
captulo
12
89
CAPTULO 12
CHIPMUNK, MOTOR DE FSICA 2D Y EL ACELERMETRO PARTE 3
En este captulo fnalizaremos 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 ltmo captulo revisaremos los elementos esttcos y la implementacin del acelermetro con
nuestra aplicacin.
Para contnuar explorando sobre Chipmunk recomiendo revisar la documentacin disponible y seguir
probando el desempeo de las simulaciones en los dispositvos mviles (iPhone / iPod Touch/ iPad)
para lograr una ptma implementacin del motor de fsica 2D.
DOCUMENTACIN CHIPMUNK
htp://code.google.com/p/chipmunk-physics/
CONCEPTOS
Antes de implementar los elementos esttcos en nuestra aplicacin es importante recordar los tpos 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 ofset).

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 defnido previamente por medio de sus vrtces. En
Chipmunk no se pueden modelar polgonos Concavos, para esos casos se debe utlizar Segment.
cpPolyShapeNew(cpBody * body, int numVerts, cpVect * verts, cpVect ofset).
89
FINALIZANDO LA IMPLEMENTACIN EN XCODE
Prosigamos con el proyecto creado para estos menesteres en el captulo anterior:
1. Defnir Body y Shape de un objeto esttco lineal en la funcin (void)confgurarchipmunk
- (void)confgurarChipmunk {
// Inicia el motor de fsica 2D Chipmunk
cpInitChipmunk();
// Crea un nuevo Space
space = cpSpaceNew();
// Defne 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
cpSpaceAddShape(space, esferaShape);
// ==============================
// Implementacin Objeto Esttico
// ==============================
// Crea un Body con masa y momento INFINITY
89
barraBody = cpBodyNew(INFINITY, INFINITY);
// Establece la posicin inicial
barraBody->p = cpv(160,120);
// El Body de los objetos estticos no debe agregarse al Space
// si quieres saber que pasa, agregalo <img src=http://www.maestrosdelweb.
com
/wp-includes/images/smilies/icon_wink.gif alt=;) class=wp-smiley>
// 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; // Friccin
barraShape->data = barra; // Asocia Shape con UIImageView
barraShape->collision_type = 0;
// Se agrupa en un tipo de colisin diferente a esferaShape
cpSpaceAddShape(space, barraShape);
}
2. Agregar <UIAccelerometerDelegat> en ViewController.h
#import chipmunk.h
@interface ViewController : UIViewController <UIAccelerometerDelegate>{
UIImageView *barra;
cpSpace *space;
cpBody *barraBody;
cpShape *barraShape;
}
- (void)confgurarChipmunk;
- (void)delta:(NSTimer *)timer;
void updateShape(void *ptr, void* unused);
@end
89
3. Defnir la funcin que implementa el acelermetro:
- (void)accelerometer:(UIAccelerometer*)accelerometer didAccelerate:
(UIAcceleration*)acceleration{
// Modifca el ngulo de la Barra con relacin a la inclinacin del
dispositivo
cpBodySetAngle(barraBody, M_PI * (acceleration.x * 0.6f) );
// Notifca a Chipmunk el movimiento de un Objeto Esttico
cpSpaceRehashStatic(space);
// Actualiza el Shape de la Barra (Objeto Esttico)
[(UIView *)barraShape->data setTransform:
CGAffneTransformMakeRotation(-barraShape->body->a)];
}
4. Inicializamos el acelermetro en la funcin (void)viewDidLoad
- (void)viewDidLoad {
barra = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@barra.
png]];
[self confgurarChipmunk];
// Inicia el acelermetro
[[UIAccelerometer sharedAccelerometer] setUpdateInterval:(1.0 / 60)];
[[UIAccelerometer sharedAccelerometer] setDelegate:self];
}
89

Si hemos hecho todo bien al fnal obtendremos un objeto circular que se sostene con un madero el
cual gira con el movimiento del dispositvo. Se puede seguir probando con distntos valores de masa,
friccin, elastcidad, 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
captulo
13
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 distntas herramientas disponibles y evaluar cul de ellas se ajusta ms a nuestras necesida-
des. Varias aplicaciones actualmente son desarrolladas utlizando uno de estos componentes:

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

UIKit: htp://j.mp/uCLGnA

Core Animaton + Quartz 2D: htp://j.mp/uvEu2A
UIKit es el ms sencillo de utlizar en comparacin con OpenGL ES que requiere de un mayor tempo de
implementacin pero ofrece el mejor rendimiento. La buena notcia es que existe un framework que
simplifca esta implementacin: Cocos2D.
CONOCIENDO COCOS2D
Cocos2D es un framework para el desarrollo de juegos en 2D y aplicaciones con alto contenido interac-
tvo. Cocos2D para iPhone es basado en Cocos2D pero implementa Objetve-C como lenguaje de progra-
macin en lugar de Python. Dentro de las caracterstcas principales de este framework encontramos:

Integracin con motores de fsica: Box2D
1
, Chipmunk.

Manejo de Escenas y efectos de transiciones.

Compatbilidad con eventos Touch y el acelermetro.

Texturas PVRTC
2
de 2-bit y 4-bit, texturas RGBA
3
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, etquetas, cuerpos, etc. A su vez una escena puede contener una o ms capas.
1 htp://www.box2d.org/
2 htp://en.wikipedia.org/wiki/PVRTC
3 htp://en.wikipedia.org/wiki/RGBA
97
IMPLEMENTACIN DE COCOS2D EN UNA APLICACIN
1. Descarga las liberas de Cocos 2D para iPhone: htp://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 tpo cocos2d Applicaton

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

CCLabel: Uno de los tpos 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 utli-
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
captulo
14
100
CAPTULO 14
PARTE 2
Prosiguiendo con Cocos2D el framework basado en OpenGL ES para el desarrollo de juegos en 2D en
la plataforma de iOS, contnuaremos 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. Redefnimos la clase HelloWorld de CCLayer a CCColorLayer, para modifcar 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 Fondo
if( (self=[super initWithColor:ccc4(255,255,255,255)] )) {
CGSize winSize = [[CCDirector sharedDirector] winSize];
self.isTouchEnabled = YES;
// Crea un objeto tipo CCSprite que contiene la imagen agregada
CCSprite *player = [CCSprite spriteWithFile:@giftOne.png
rect:CGRectMake(0, 0, 186, 186)];
// Establece la posicin del objeto
player.position = ccp(player.contentSize.width/2, winSize.height/2);
// Agrega el objeto a la Capa
[self addChild:player];
}
return self;
}
102
4. Ahora agregaremos movimiento a nuestro objeto con el siguiente mtodo:
-(void)moveObject {
// Accin girar
id rotateAction = [CCRotateBy actionWithDuration:2 angle:180*2];
// Accin saltar
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 infnito 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 defnida 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
htp://www.maestrosdelweb.com/images/2010/04/myGameCocos2D.zip
104
Enlace: http://j.mp/u6PQsm
captulo
15
106
CAPTULO 15
PARTE 3
Para fnalizar con los captulos sobre Cocos2D revisaremos la librera que implementa los sonidos en
una aplicacin para el iPhone. Si bien podemos utlizar directamente el framework disponible para la
plataforma: Core Audio y OpenAL
1
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-
mtco cuando se utlizan 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: htp://www.maestrosdelweb.com/images/2010/04/soundBackground.m4a

Sound Efect: htp://www.maestrosdelweb.com/images/2010/04/soundEfect.m4a
1 htp://developer.apple.com/technologies/iphone/audio-and-video.html
107
2. Iniciar el archivo de audio agregado en el mtodo (id)init
-(id) init{
// ccc4 Estable el color de Fondo
if( (self=[super initWithColor:ccc4(255,255,255,255)] )) {
CGSize winSize = [[CCDirector sharedDirector] winSize];
// 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
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 utlidad para lograr un mejor desempeo
en nuestras aplicaciones.
Puedes descargar el proyecto para realizar el liberador procedimiento de Build and Run.
DESCARGAR EL PROYECTO
htp://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
Utliza las herramientas sociales en Internet
para crear proyectos de comunicacin inde-
pendientes.
Visita Adictos a la comunicacin
htp://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
htp://mdw.li/gkTDom
111
LOS MAESTROS DEL WEB
Una serie de perfles de personas y proyectos
que nos inspiran a permanecer en el medio,
aprender y seguir evolucionando.
Visita Los Maestros del Web
htp://j.mp/spAncK
CURSO ANDROID
Actualiza tus conocimientos con el curso
sobre Android para el desarrollo de aplica-
ciones mviles.

Visita el Curso Android
htp://mdw.li/lmlydX
112
GUA ASP.NET
ASP.NET es un modelo de desarrollo Web
unifcado creado por Microsof para el desa-
rrollo de sitos y aplicaciones web dinmicas
con un mnimo de cdigo. ASP.NET
Visita la Gua ASP.NET
htp://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 Zend
htp://mdw.li/guiazend

Maestrosdelweb Guia Ios5

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Maestrosdelweb Guia Ios5

Cargado por

Copyright:

Formatos disponibles

2

También podría gustarte