maestros del web - guía- ios5
Post on 13-Oct-2015
21 Views
Preview:
TRANSCRIPT
-
2GUA IOS
Versin 2 / noviembre 2011
Nivel: Intermedio / Avanzado
La Gua iOS se encuentra en lnea en: http://www.maestrosdelweb.com/editorial/guia-desarrollo-iphone-ipad/
Un proyecto de Maestros del Web
Autor: Javier Cala Uribe Edicin: Eugenia Tobar Diseo y diagramacin: Ivn E. Mendoza
Este trabajo se encuentra bajo una licencia Creative Commons
Atribucin-NoComercial-CompartirIgual 3.0 Unported (CC BY-NC-SA 3.0)
CONTACTO
http://www.maestrosdelweb.com/sitio/correo/
REDES SOCIALES
Facebook: http://www.facebook.com/maestrosdelweb
Twitter: http://www.twitter.com/maestros
Sobre la gua
-
3JAVIER CALA URIBE
Ingeniero de Sistemas, actualmente es desarro-
llador para iOS (Objective-C) con 2 aos de expe-
riencia en la plataforma y ms de 4 aos como
programador. Ha publicado 15 aplicaciones en la
App Store de Apple y cooperado en el desarro-
llo de tres proyectos de aplicaciones. Contribuy
al diseo, anlisis e implementacin de interfa-
ces entre sistemas SAP Enterprise Resource Plan-
ning (ERP) y un sistema legado basado en RPG/
COBOL sobre i5/OS (iSeries IBM). Tambin dise
e implement el ciclo de pruebas para un sistema
de administracin de recursos basado en ASP.NET.
Sobre el autor
-
4INTRODUCCIN
En la actualidad existe un fuerte inters por parte de los programadores en el desarrollo de aplicaciones
para dispositivos mviles como: iPad, iPhone e iPod Touch.
Dispositivos mviles que se hacen cada vez ms populares en el mercado de las comunicaciones, porque
proporcionan una plataforma con sistema operativo como iOs 5.0. La adquisicin de este tipo de apara-
tos por parte de los usuarios se incrementa en la medida que encuentran en ellos nuevas aplicaciones o
servicios que satisfacen sus necesidades bsicas, profesionales, educativas y de entretenimiento.
Tienes en tu pantalla la Gua de desarrollo de aplicaciones para iOs (iPhone/ iPad / iPod Touch) de Maes-
tros del Web diseada con el objetivo de ensearte las principales caractersticas del entorno de progra-
macin para dispositivos mviles con una serie de ejemplos y recursos que muestran la facilidad de las
herramientas de desarrollo.
Introduccin
-
5NDICE
1 | Sobre la gua ..........................................................................................................2
2 | Sobre el autor .........................................................................................................3
3 | Introduccin ...........................................................................................................4
4 | Desarrollando aplicaciones para dispositivos mviles .......................................... 6
5 | Uso del navegador en un app .............................................................................. 14
6 | Uso del correo ...................................................................................................... 21
7 | Capturar imgenes desde la cmara del iPhone .................................................. 31
8 | Uso de varias vistas ..............................................................................................39
9 | Trabajando con bases de datos SQL Lite .............................................................. 45
10 | Trabajando con el API de Facebook Connect .................................................... 52
11 | Trabajando con el API de Twitter ...................................................................... 58
12 | Trabajando con el API de OpenFeint ................................................................. 67
13 | Desarrollo de vdeo juegos para dispositivos mviles ....................................... 75
14 | Chipmunk, motor de fsica 2D Parte 1 ........................................................... 76
15 | Chipmunk, motor de fsica 2D Parte 2 ..........................................................82
16 | Chipmunk, motor de fsica 2D y el acelermetro Parte 3 .............................88
17 | Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 1 ...............95
18 | Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 2 ...............99
19 | Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 3 ............. 105
-
Desarrollando aplicaciones para dispositivos mviles
captulo1
-
7CAPTULO I
DESARROLLANDO APLICACIONES PARA DISPOSITIVOS MVILES
iOS es el sistema implementado por Apple que permite ejecutar aplicaciones nativas en los dispositivos
mviles: iPhone, iPod Touch y iPad. La arquitectura de esta plataforma toma como base el ncleo del
Sistema Mac OS X e incorpora una nueva capa que da soporte a la interfaz multi-touch.
Los requistos mnimos para desarrollar en esta plataforma son:
Mac OS X 10.6 (Snow Leopard) o posterior iOS SDK 5.0 o posterior Dispositivo mvil para pruebas (opcional)
El iOS SDK contiene el cdigo, la informacin y las herramientas necesarias para desarrollar, probar,
ejecutar, depurar y ajustar las apps para el iOS. Dentro de este kit encontramos tres aplicaciones funda-
mentales:
Xcode: contiene un conjunto de herramientas para el desarrollo de las aplicaciones, permite editar, depurar y compilar el cdigo fuente.
Interface Builder: permite la creacin de interfaces grficas y vinculacin con Xcode. (A partir de Xcode 4, interface builder est incorporado en la misma interfaz que Xcode)
iOS Simulator: ejecuta las aplicaciones desarrolladas en un emulador del dispositivo.
-
8CREANDO UN PROYECTO EN XCODE Y EL IOS SIMULATOR
1. Abrir Xcode e ir a File->New Project y seleccionar Single View Application
-
92. Declarar una etiqueta (UILabel) y una funcin (IBAction) en la clase ViewController.h
#import @interface ViewController : UIViewController{UILabel *miEtiqueta;}@property (nonatomic, retain) IBOutlet UILabel *miEtiqueta;- (IBAction)cambiarEtiqueta:(id)sender;@end
3. Definir la funcin (IBAction) en ViewController.m
@synthesize miEtiqueta;- (IBAction)cambiarEtiqueta:(id)sender{miEtiqueta.text = @Bazzinga!;
-
10
}- (void)dealloc{[miEtiqueta release];[super dealloc];}
4. Abrir con doble clic el archivo ViewController.xib, agregar una etiqueta (UILabel) y un botn (UIButton) en la vista del controlador.
-
11
5. En la ventana Connections Inspector arrastrar miEtiqueta hasta la etiqueta creada y la funcin
cambiarEtiqueta hasta el botn creado.
-
12
6. Presionar en Xcode el botn Run
La aplicacin se ejecutar en el iOS Simulator como lo muestra la imagen anterior. Tambin se puede ejecturar la misma aplicacin para iPad por ser definida inicialmente como Universal app.
Para encontrar ms informacin sobre el entorno de programacin del sistema iOS pueden revisar:
http://developer.apple.com/technologies/tools/xcode.html
-
13
Enlace: http://j.mp/sXbaU7
-
Uso del navegador en un app
captulo2
-
15
CAPTULO 2
USO DEL NAVEGADOR EN UN APP
Ahora, aprenderemos a utilizar la clase UIWebView1 que nos permite mostrar contenido web embebido
en el dispositivo mvil.
CONOCIENDO UIWEBVIEW
UIWebView despliega informacin Web embebida en nuestra aplicacin sin necesidad de salir de la misma, es decir, el usuario puede ver contenidos Web en la aplicacin sin abrir Safari en el dispositivo.
Aunque claramente la clase UIWebView esta basada en Safari, no requiere cerrar la aplicacin para
mostrar los contenidos. La implementacin es realmente sencilla, solo se debe crear un objeto UIWe-
bView y cargar el contenido web. Tambin se puede agregar la opcin de avanzar o retroceder en el
historial de navegacin.
UIWEBVIEW EN ACCIN
1. Crear un nuevo proyecto en Xcode de tipo Single View Application
1 http://j.mp/vQm9a1
-
16
2. En ViewController.h declarar los elementos#import @interface ViewController : UIViewController {IBOutlet UIWebView *webView;}@end
3. Abrir el archivo ViewController_iPhone.xib y agregar los siguientes elementos declarados
previamente: 1 UIWebView y 3 botones
4. Seleccionar el objeto UIWebView y desde el Inspector Connections arrastrar: delegate, goBack,
goForward, reload.
-
17
-
18
5. Volviendo a Xcode definir la funcin en ViewController.m- (void)viewDidLoad{[super viewDidLoad];NSURL *url = [NSURL URLWithString:@http://www.maestrosdelweb.com];NSURLRequest *loadURL = [[NSURLRequest alloc] initWithURL:url];[webView loadRequest:loadURL];[loadURL release];}
-
19
COMPILAR Y EJECUTAR:
Si ha salido todo bien debe cargar la pgina previamente definida en la funcin (void)viewDi-dLoad. La clase UIWebView es de gran utilidad para mantener la informacin actualizada de una aplicacin y tambin permite mayor libertad en el diseo para la presentacin de los contenidos. Igual-
mente se pueden cargar archivos HTML localmente, previamente definidos en la aplicacin.
-
20
Enlace: http://j.mp/s2daly
-
Uso del correo
captulo3
-
22
CAPTULO 3
USO DEL CORREO
En este captulo revisaremos un tema de gran utilidad para compartir informacin: el uso del correo a
partir de la versin 3.0 iOS, esta disponible la clase MFMailComposeViewController para enviar correos
desde el iPhone. Las versiones anteriores utilizan la aplicacin Mail que trae por defecto el dispositivo.
En este captulo veremos como implementar la clase MFMailComposeViewController.
EXPLORANDO MFMAILCOMPOSEVIEWCONTROLLER:
Esta clase brinda una interfase que permite administrar, editar y enviar correos electrnicos. Cuenta
con un formulario predefinido con los campos: subject, email recipients, body text y attachments, es
decir, un formulario normal de correo. Uno de los inconvenientes con esta clase es que no permite veri-
ficar si efectivamente el correo enviado lleg a su destino.
La clase se encarga de colocar los mensajes enviados en el buzn de salida de la aplicacin Mail, resul-
tando til para el envo de correos electrnicos cuando no se cuenta con conexin a la red, pero inapro-
piado para confirmar el envo.
Para ms informacin sobre esta clase puedes consultar MFMailComposeViewController Class Refe-
rence1.
1 http://j.mp/u4yrWJ
-
23
SENT FROM MY IOS SIMULATOR
1. Crear un nuevo proyecto en Xcode de tipo Single View Application
2. Agregar el framework MessageUI:
-
24
3. En ViewController.h agregar los elementos:#import #import #import @interface ViewController : UIViewController// Delegate de la clase MFMailComposeViewController
{IBOutlet UILabel *respuesta;}@property (nonatomic, retain) IBOutlet UILabel *respuesta;// Verifica si esta disponible la clase MFMailComposeViewController
-(IBAction)verEditMail:(id)sender;// Configura vista para editar y enviar un email
-(void)configurarMail;// Ejecuta la App Mail del dispositivo-(void)ejecutarMailApp;@end
-
25
4. Abrir el archivo ViewController.xib en Interface Builder, agregar los elementos UIButton, UILa-bel y relacionarlos con la App:
-
26
5. Definir las siguientes funciones de ViewController.m en Xcode:@synthesize respuesta;- (IBAction)verEditMail:(id)sender{Class mailClass = (NSClassFromString(@MFMailComposeViewController));if (mailClass != nil){// Verifica que este habilitada la opcion para enviar correos en el
dispositivoif ([mailClass canSendMail])[self configurarMail];else[self ejecutarMailApp];}else[self ejecutarMailApp];}// Configura vista para editar y enviar un email
- (void)configurarMail{MFMailComposeViewController *mailView = [[MFMailComposeViewController alloc]init];mailView.mailComposeDelegate = self;[mailView setSubject:@Mejorando la Web!];// DestinatariosNSArray *toRecipients = [NSArrayarrayWithObject:@cvander@maestrosdelweb.com/*
-
27
/* ]]> */];NSArray *ccRecipients = [NSArray arrayWithObjects:@info@forosdelweb.com/* */, nil];[mailView setToRecipients:toRecipients];[mailView setCcRecipients:ccRecipients];// MensajeNSString *emailBody = @Un saludo a tod@s!;[mailView setMessageBody:emailBody isHTML:NO];[self presentModalViewController:mailView animated:YES];[mailView release];}- (void)mailComposeController:(MFMailComposeViewController*)controllerdidFinishWithResult:(MFMailComposeResult)result error:(NSError*)error{respuesta.hidden = NO;// Notifica al usuario los resultados del envio
switch (result){case MFMailComposeResultCancelled:respuesta.text = @Mensaje: cancelado;break;case MFMailComposeResultSaved:respuesta.text = @Mensaje: guardado;
-
28
break;case MFMailComposeResultSent:respuesta.text = @Mensaje: enviado;break;case MFMailComposeResultFailed:respuesta.text = @Mensaje: fall;break;default:respuesta.text = @Mensaje: no enviado;break;}[self dismissModalViewControllerAnimated:YES];}// Ejecuta la App Mail del dispositivo-(void)ejecutarMailApp{NSString *recipients = @mailto:cvander@maestrosdelweb.com/* */?cc=info@forosdelweb.com/*
-
29
/* ]]> */&subject=Mejorando la Web!;NSString *body = @&body=Un saludo a tod@s!;NSString *email = [NSString stringWithFormat:@%@%@, recipients, body];email = [email stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];[[UIApplication sharedApplication] openURL:[NSURL URLWithString:email]];}- (void)didReceiveMemoryWarning{[super didReceiveMemoryWarning];}- (void)dealloc{[respuesta release];[super dealloc];}
6. Compilar y ejecutar:
-
30
Enlace: http://j.mp/uMACMe
-
Capturar imgenes desde la cmara del iPhone
captulo4
-
32
CAPTULO 4
CAPTURAR IMGENES DESDE LA CMARA DEL IPHONE
Utilizaremos el controlador UIImagePickerController para acceder a las imgenes guardadas en el dispo-
sitivo o capturar imgenes desde un iPhone.
ARQUITECTURA DE COCOA-TOUCH
Antes de entrar en detalle repasemos un poco la arquitectura utilizada por Cocoa-Touch1 (iOS SDK) para
reconocer que elementos del framework implementaremos segn nuestras necesidades:
Esta arquitectura (Modelo-Vista-Controlador) separa los datos, interfaz de usuario y lgica de control en
tres componentes como se aprecia en el grfico. Para el caso del iOS SDK podemos ejemplificar la arqui-
tectura de la siguiente manera: Core Data2 (Modelo), UIView3 (Vista), UIViewController4 (Controlador).
En este captulo utilizaremos el controlador UIImagePickerController, el cual se encarga de gestionar la
implementacin de imgenes o vdeo en una aplicacin. Esta clase controla la interface de usuario y
retorna el mensaje una vez terminada su utilizacin.
1 http://developer.apple.com/technologies/iphone/cocoa-touch.html2 http://developer.apple.com/macosx/coredata.html3 http://developer.apple.com/iphone/library/documentation/uikit/reference/UIView_Class/UIView/UIView.html4 http://j.mp/tkqT0S
-
33
UIIMAGEPICKERCONTROLLER EN ACCIN:
1. Crear un nuevo proyecto en Xcode de tipo Single View Application
2. Agregar los siguientes elementos en ViewController.h:#import @interface ViewController : UIViewController {UIImageView *imagenView;UIButton *abrirGaleria;UIButton *tomarFoto;}@property (nonatomic, retain) IBOutlet UIImageView *imagenView;@property (nonatomic, retain) IBOutlet UIButton *abrirGaleria;@property (nonatomic, retain) IBOutlet UIButton *tomarFoto;- (IBAction)abrirGaleria:(id)sender;- (IBAction)tomarFoto:(id)sender;@end
-
34
3. Abrir el archivo ViewController.xib y agregar 1 UIImageView y 2 UIButton
4. Desde el Connections Inspector enlazar los elementos creados en Xcode:
-
35
5. Definir en Xcode las funciones declaradas previamente:
#import ViewController.h@implementation ViewController@synthesize imagenView, abrirGaleria, tomarFoto;- (IBAction)abrirGaleria:(id)sender{// Inicia el ControladorUIImagePickerController * picker = [[UIImagePickerController alloc] init];// Define el Delegate
picker.delegate = self;// Establece el origen de la imagenpicker.sourceType = UIImagePickerControllerSourceTypeSavedPhotosAlbum;// Agrega la vista del controlador a la pantallaif ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad){UIPopoverController *popover = [[UIPopoverController alloc]initWithContentViewController:picker];
-
36
[picker release];[popover presentPopoverFromRect:CGRectMake(200, 940.0, 0.0, 0.0)inView:self.viewpermittedArrowDirections:UIPopoverArrowDirectionAnyanimated:YES];}else[self presentModalViewController:picker animated:YES];}- (IBAction)tomarFoto:(id)sender{UIImagePickerController * picker = [[UIImagePickerController alloc] init];picker.delegate = self;picker.sourceType = UIImagePickerControllerSourceTypeCamera;[self presentModalViewController:picker animated:YES];}// Recibe el mensaje cuando el controlador a finalizado
- (void)imagePickerController:(UIImagePickerController *)pickerdidFinishPickingMediaWithInfo:(NSDictionary *)info{// Quita la vista del controlador[picker dismissModalViewControllerAnimated:YES];// Establece la imagen tomada en el objeto UIImageViewimagenView.image = [info objectForKey:@UIImagePickerControllerOriginalImage];}- (void)dealloc{[imagenView release];[abrirGaleria release];[tomarFoto release];[super dealloc];}
-
37
6. Compilar y ejecutar:
Si esperas tomar fotos desde el iOS Simulator recibirs un sorprendente mensaje en la consola.
-
38
Enlace: http://j.mp/tOl2so
-
Uso de varias vistas
captulo5
-
40
CAPTULO 5
USO DE VARIAS VISTAS
Revisaremos los principales mtodos utilizados para navegar dentro de una aplicacin: UINavigation-
Controller1 y UITabBarController2. Dependiendo del diseo que definamos, se puede utilizar cualquiera de los dos, incluso ambos en la misma aplicacin.
DIFERENCIA ENTRE UINAVIGATIONCONTROLLER Y UITABBARCONTROLLER
Una imagen dice ms que mil palabras, as que dos dicen muchsimo ms:
1 http://j.mp/sclxU92 http://j.mp/rLY96e
-
41
UINavigationController crea una jerarqua de vistas, a diferencia de UITabBarController que genera
instancias independientes de vistas. Tambin es posible implementar el controlador UINavigationCon-
troller dentro de los elementos de un UITabBarController.
IMPLEMENTANDO UINAVIGATIONCONTROLLER Y UITABBARCONTROLLER
1. Crear un nuevo proyecto en Xcode de tipo Empty Aplication
2. Agregar los siguientes elementos en AppDelegate.h:
#import @interface AppDelegate : UIResponder {UIWindow *window;UITabBarController *tabBarController;UINavigationController *navigationController;}@property (strong, nonatomic) UIWindow *window;@end
-
42
3. Inicializa los controladores con solo cdigo sin usar Interface Builder desde AppDelegate.m:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{// Inicializa los controladoresnavigationController = [[UINavigationController alloc] init];tabBarController = [[UITabBarController alloc] init];// Inicializa la primer vista del TabBarControllerUIViewController *primerViewController = [[UIViewController alloc] init];primerViewController.view.backgroundColor = [UIColor whiteColor];primerViewController.title = @Primero;// Inicializa la segunda vista del TabBarControllerUIViewController *segundoViewController = [[UIViewController alloc] init];segundoViewController.view.backgroundColor = [UIColor whiteColor];segundoViewController.title = @Segundo;// Agrega la segunda vista al controlador UINavigationController[navigationController pushViewController:segundoViewController animated:NO];// Agrega las vistas creadas al controlador UITabBarController// 1. Primer Vista = UIViewController// 2. Segunda Vista = UINavigationController[tabBarController setViewControllers:[NSArrayarrayWithObjects:primerViewController, navigationController, nil] animated:YES];// Libera memoria con los controladores ya utilizados[primerViewController release];[segundoViewController release];// Agrega el controlador UITabBarController a la ventana principalself.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]autorelease];self.window.rootViewController = tabBarController;[self.window makeKeyAndVisible]; // Retorna YES XDreturn YES;}
-
43
4. Compilar y Ejecutar:
Al final obtendrs dos vistas desde el UITabBarController, una de ellas contiene un UINavigationContro-
ller. Tambin se pueden implementar estos controladores utilizando Xcode que de manera muy intuitiva
permite arrastrar y establecer los controladores respectivos. En caso de presentar algn inconveniente
en los pasos puedes descargar y realizar el proceso de Build and Run.
DESCARGAR
http://www.maestrosdelweb.com/images/2010/06/UINavTabApp.zip
-
44
Enlace: http://j.mp/t423T8
-
Trabajando con bases de datos SQL Lite
captulo6
-
46
CAPTULO 6
TRABAJANDO CON BASES DE DATOS SQL LITE
En el desarrollo de aplicaciones para el iPhone constantemente nos encontramos con la necesidad de
guardar informacin y disponer de ella ms adelante. Para dar solucin a esto podemos implementar
SQLite1 un pequeo, rpido y confiable sistema de gestin de bases de datos que est disponible para
el iPhone.
CARACTERSTICAS DE SQLITE:
Es un motor de base de datos SQL embebido y no tiene un proceso de servidor independiente. Lee y escribe directamente en archivos de disco normal. Est contenida en un archivo de disco
nico y una completa base de datos2 con tablas, ndices y vistas.
Formato de archivo de base de datos multi-plataforma (32-bits y 64-bits). No considerar SQLite como un reemplazo para Oracle3, sino como un sustituto de fopen ()4
IMPLEMENTANDO SQLITE EN UNA APLICACIN:
Para administrar los archivos creados que se utilizarn en nuestra aplicacin podemos descargar SQLite
Database Browser5, una aplicacin gratuita que nos brinda una interfaz grfica para crear, disear y
editar archivos de base de datos compatibles con SQLite. Empezaremos creando un proyecto en Xcode.
1 http://sqlite.org/2 http://es.wikipedia.org/wiki/Base_de_datos3 http://es.wikipedia.org/wiki/Oracle4 http://www.opengroup.org/onlinepubs/009695399/functions/fopen.html5 http://sourceforge.net/projects/sqlitebrowser/
-
47
1. Crear un archivo de base de datos con las siguiente estructura
2. Agregar el archivo de base de datos y la librera libsqlite3.dylib al proyecto
-
48
3. Definir un mtodo para la creacin del archivo de base de datos en la aplicacin:
- (void)createEditableCopyOfDatabaseIfNeeded{BOOL success;NSFileManager *fileManager = [NSFileManager defaultManager];NSError *error;NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask, YES);NSString *documentsDirectory = [paths objectAtIndex:0];NSString *writableDBPath = [documentsDirectorystringByAppendingPathComponent:@myDB];success = [fileManager fileExistsAtPath:writableDBPath];
// Si ya existe el archivo, no lo crea -_-if (success) return;// Crea el archivo en el dispositivo
-
49
NSString *defaultDBPath = [[[NSBundle mainBundle] resourcePath]stringByAppendingPathComponent:@myDB];success = [fileManager copyItemAtPath:defaultDBPath toPath:writableDBPath
error:&error];if (!success)NSAssert1(0, @Failed to create writable database file with message %@.,[error localizedDescription]);}
4. Definir el mtodo para realizar las consultas en la base de datos:
-(void)executeSentence:(NSString *)sentence sentenceIsSelect:(BOOL )isSelect{// Variables para realizar la consultastatic sqlite3 *db;sqlite3_stmt *resultado;
const char* siguiente;// Buscar el archivo de base de datosNSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask, YES);NSString *documentsDirectory = [paths objectAtIndex:0];NSString *path = [documentsDirectory stringByAppendingPathComponent:@myDB];// Abre el archivo de base de datosif (sqlite3_open([path UTF8String], &db) == SQLITE_OK) {if (isSelect){// Ejecuta la consultaif ( sqlite3_prepare(db,[sentence UTF8String],[sentencelength],&resultado,&siguiente) == SQLITE_OK ){
// Recorre el resultadowhile (sqlite3_step(resultado)==SQLITE_ROW){NSLog([NSString stringWithFormat:@ID:%@ NAME:%@ INFO:%@,[NSString stringWithUTF8String: (char *)sqlite3_column_text(resultado, 0)],[NSString stringWithUTF8String: (char *)sqlite3_column_text(resultado, 1)],[NSString stringWithUTF8String: (char *)sqlite3_column_text(resultado, 2)] ]);}}
-
50
}else {// Ejecuta la consultaif ( sqlite3_prepare_v2(db,[sentence UTF8String],[sentencelength],&resultado,&siguiente) == SQLITE_OK ){
sqlite3_step(resultado);
sqlite3_finalize(resultado);
}}}// Cierra el archivo de base de datossqlite3_close(db);
}5. Definir las consultas a realizar
- (void)viewDidLoad{[super viewDidLoad];[self createEditableCopyOfDatabaseIfNeeded];NSString *sentencetDB = @insert into userTable values ( NULL, Javier,Programador );[self executeSentence:sentencetDB sentenceIsSelect:NO];sentencetDB = @select * from userTable;[self executeSentence:sentencetDB sentenceIsSelect:YES];}
6. Compilar y ejecutar:
En la consola se podrn observar los resultados de la consulta realizada. Para asegurar que todo esta
bien, pudes descargar el proyecto para realizar el genial procedimiento de Build and Run.
Descargar: http://www.maestrosdelweb.com/images/2010/04/myProjectSQLite.zip
-
51
Enlace: http://j.mp/t2lq1r
-
Trabajando con el API de Facebook Connect
captulo7
-
53
CAPTULO 7
TRABAJANDO CON EL API DE FACEBOOK CONNECT
Para avanzar con el tema de vinculacin de redes sociales en este captulo veremos como implementar
Facebook Connect en nuestro proyecto. Si an no tienes claro porqu implementar Facebook Connect1 quiz estas razones2 te ayuden.
CARACTERSTICAS DE FACEBOOK CONNECT:
Conectar: la cuenta e informacin de Facebook con nuestra aplicacin. Compartir: informacin con los contactos que tambin utilicen la aplicacin. Comprobar: la identidad real de los usuarios. Actualizacin: de la informacin de los usuarios y las directivas de privacidad constantemente. Facebook Feed: permite compartir fcilmente informacin con los contactos.
IMPLEMENTANDO FACEBOOK CONNECT EN UNA APLICACIN:
Damos inicio creando un nuevo proyecto en Xcode de tipo Single View Application
1. Descargar el SDK de Facebook Connect desde: http://j.mp/v1Taj32. Descomprimir y arrastrar el proyecto la carpeta /scr/
1 http://developers.facebook.com/connect.php2 http://www.maestrosdelweb.com/editorial/aprovechando-las-ventajas-de-facebook-connect-sobre-vbulletin/
-
54
3. Definir un objeto tipo Facebook en AppDelegate.h:
#import #import FBConnect.h@class ViewController;@interface AppDelegate : UIResponder { Facebook *facebook;}@property (strong, nonatomic) UIWindow *window;@property (strong, nonatomic) ViewController *viewController;@property (nonatomic, retain) Facebook *facebook;@end
4. Definir las funciones necesarias para inicio se sesin en Facebook:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]autorelease];// Override point for customization after application launch.if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone) {self.viewController = [[[ViewController alloc]initWithNibName:@ViewController_iPhone bundle:nil] autorelease];} else {self.viewController = [[[ViewController alloc]initWithNibName:@ViewController_iPad bundle:nil] autorelease];}self.window.rootViewController = self.viewController;[self.window makeKeyAndVisible];facebook = [[Facebook alloc] initWithAppId:@YOUR_APP_ID andDelegate:self];NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];if ([defaults objectForKey:@FBAccessTokenKey]&& [defaults objectForKey:@FBExpirationDateKey]){
-
55
facebook.accessToken = [defaults objectForKey:@FBAccessTokenKey];facebook.expirationDate = [defaults objectForKey:@FBExpirationDateKey];}if (![facebook isSessionValid])[facebook authorize:nil];return YES;}- (BOOL)application:(UIApplication *)application openURL:(NSURL *)urlsourceApplication:(NSString *)sourceApplication annotation:(id)annotation{return [facebook handleOpenURL:url];}- (void)fbDidLogin{NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];[defaults setObject:[facebook accessToken] forKey:@FBAccessTokenKey];[defaults setObject:[facebook expirationDate] forKey:@FBExpirationDateKey];[defaults synchronize];}
5. Agregar el cdigo privado de la App en Facebook en nuestro .plist
-
56
6. Compliar y ejecutar:
Obtendremos una funcin que nos permitir iniciar sesin en Facebook y acceder a la informacin que
necesitemos. La documentacin oficial nos permite conocer los principales mtodos que podemos utili-
zar en la implementacin.
DOCUMENTACIN OFICIAL:
http://wiki.developers.facebook.com/index.php/Facebook_Connect_for_iPhone
-
57
Enlace: http://j.mp/tmIpJh
-
Trabajando con el API de Twitter
captulo8
-
59
CAPTULO 8
TRABAJANDO CON EL API DE TWITTER
En el captulo 7 aprenders a vincular en el proyecto la red social Twitter conocida como uno de los
medios de comunicacin ms populares, con alto alcance y muy utilizado en aplicaciones para disposi-
tivos mviles.
CARACTERSTICAS DE LA API DE TWITTER:
Limita por da el nmero de actualizaciones, mensajes directos y solicitudes de Follow. Se basa completamente en HTTP, por lo tanto implementa los mtodos GET y POST. Intenta conservar los principios de diseo de la Transferencia de Estado Representacional (REST1).
En la documentacin se establecen los formatos disponibles para cada uno de los mtodos.
Dentro de estos formatos de datos se encuentran: XML, JSON, RSS, ATOM.
Una lnea de comando es todo lo que se requiere para empezar a usar la API. Ofrece un gran nmero de libreras disponibles para el lenguaje de programacin.
Revisar: http://www.maestrosdelweb.com/editorial/trabajando-con-la-api-de-twitter-desde-php/
1 http://es.wikipedia.org/wiki/Representational_State_Transfer
-
60
INICIANDO TWITTER EN NUESTRA APLICACIN
A continuacin implementaremos una clase que nos permita enviar y recibir informacin a Twitter
desde nuestras aplicaciones :
1. Utilizaremos las librerias Twitter+OAuth que se pueden descargar desde aqu.
2. Descomprimir y agregar la carpeta Twitter + Oauth al proyecto:
3. Agregar la libreria libxml2.dylib
-
61
4. Agregar la ruta en Header Search Path
-
62
5. Crear un botn para el inicio de sesin en Twitter:
6. Importar las librerais en nuestro cdigo en ViewController.h
#import #import SA_OAuthTwitterController.h@class SA_OAuthTwitterEngine;@interface ViewController : UIViewController {SA_OAuthTwitterEngine *_engine;}@property (nonatomic, retain) SA_OAuthTwitterEngine *_engine;- (IBAction)postTwitter;- (void)sendTweet;@end
-
63
7. Definir las funciones definidas previamente en ViewController.m
@synthesize _engine;#pragma mark Twitter- (IBAction)postTwitter{if(!_engine){_engine = [[SA_OAuthTwitterEngine alloc] initOAuthWithDelegate:self];_engine.consumerKey = kOAuthConsumerKey;_engine.consumerSecret = kOAuthConsumerSecret;}UIViewController *controller = [SA_OAuthTwitterControllercontrollerToEnterCredentialsWithTwitterEngine:_engine delegate:self];if (controller){[self presentModalViewController:controller animated:YES];}else[self sendTweet];}- (void)sendTweet{NSString *mensaje = @Excelente la Guia para iPhone y iPad de @maestros ;[_engine sendUpdate:mensaje];UIAlertView* alertView = [[UIAlertView alloc] initWithTitle:@Posted To Twittermessage:mensajedelegate:selfcancelButtonTitle:@AcceptotherButtonTitles:nil];[alertView show];[alertView release];
-
64
}#pragma mark SA_OAuthTwitterEngineDelegate- (void) storeCachedTwitterOAuthData: (NSString *) data forUsername: (NSString*) username{NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];[defaults setObject: data forKey: @authData];[defaults synchronize];UIAlertView* alert = [[UIAlertView alloc] initWithTitle:@Twitter Authenticationmessage:@Logged correctly. Please press again the twitter button to sendmessage.delegate:selfcancelButtonTitle:@AcceptotherButtonTitles:nil];[alert show];[alert release];}- (NSString *) cachedTwitterOAuthDataForUsername: (NSString *) username{return [[NSUserDefaults standardUserDefaults] objectForKey: @authData];}#pragma mark TwitterEngineDelegate- (void) requestSucceeded: (NSString *) requestIdentifier{NSLog(@Request %@ succeeded, requestIdentifier);}- (void) requestFailed: (NSString *) requestIdentifier withError: (NSError *)error{NSLog(@Request %@ failed with error: %@, requestIdentifier, error);}
-
65
8. Compilamos y ejecutamos
Si ha salido todo bien, probablemente tengas experiencia con Objective-C, porque he saltado algunas
cosas para no hacerlo tan extenso. Puedes descargar el proyecto con la clase implementada para hacer
Build and Run
Descargar proyecto: http://www.maestrosdelweb.com/images/2010/04/TwitterAPI.zip
-
66
Enlace: http://j.mp/ttxpJt
-
Trabajando con el API de OpenFeint
captulo9
-
68
CAPTULO 9
TRABAJANDO CON EL API DE OPENFEINT
Quienes desarrollan aplicaciones para el iPhone deben conocer la importancia de vincularlas con otros
servicios como Facebook y Twitter comunidades virtuales a las que muchos pertenecen. Actualmente,
existen para el caso especfico de los vdeo juegos en el iPhone tres comunidades que han tomado
fuerza:
1. Plus: http://plusplus.com/2. ScoreLoop: http://www.scoreloop.com/3. OpenFeint: http://www.openfeint.com/
En este captulo, veremos como implementar OpenFeint por ser una de las ms populares entre los
usuarios y por permitir a los desarrolladores independientes acceder fcilmente a su API.
CARACTERSTICAS DE OPENFEINT
Contactar con otros jugadores por medio de anuncios, boletines y foros. Ver que jugadores estn conectados en ese momento. Tabla de clasificacin con los mejores puntajes y logros alcanzados. Geolocalizacin de la tabla de clasificacin integrada con GoogleMaps. Ofrece diferentes formas de promocionar nuestras aplicaciones dentro de la comunidad.
-
69
IMPLEMENTANDO OPENFEINT EN UNA APLICACIN
Ahora veremos cmo implementar esta herramienta en nuestra aplicacin:
1. Lo primero que debemos hacer es registrarnos en OpenFeint.
2. Una vez registrados, podemos descargar el OpenFeint SDK en la parte superior derecha.
3. Descomprimimos y agregamos la carpeta OpenFeint a nuestro proyecto.
4. Dependiendo de la vista que utilicemos es recomendable borrar una de las siguientes carpetas de
nuestro proyecto: Resources/landscape o Resources/Portrait
5. Hacemos clic sobre nuestro proyecto en el panel Groups & Files y seleccionamos nuestro Target
6. Seleccionamos la pestaa Buil Settings y nos aseguramos de tener en Configuration: All Confi-
gurations
-
70
7. Agregamos en Other Linker Flags el valor -ObjC
8. Nos aseguramos que est seleccionado Call C++ Default Ctors/Dtors in Objective-C en la seccin
GCC 4.2 Code Generation
9. Incluir los siguientes Frameworks al proyecto:
-
71
10. Ahora podemos ingresar los datos de nuestra aplicacin en la web de OpenFeint para obtener el
ProductKey y el ProductSecret que nos da acceso a la API.
11. Agregamos el archivo de cabecera OpenFeint.h e iniciamos OpenFeint en nuestra aplicacin
#import OpenFeint.h- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]autorelease];// Override point for customization after application launch.if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone) {self.viewController = [[[ViewController alloc]initWithNibName:@ViewController_iPhone bundle:nil] autorelease];} else {self.viewController = [[[ViewController alloc]initWithNibName:@ViewController_iPad bundle:nil] autorelease];
-
72
}self.window.rootViewController = self.viewController;[self.window makeKeyAndVisible];// Inicia OpenFeintNSDictionary* settings = [NSDictionary dictionaryWithObjectsAndKeys:[NSNumber numberWithInt:UIInterfaceOrientationPortrait],OpenFeintSettingDashboardOrientation,@Nombre App, OpenFeintSettingShortDisplayName,[NSNumber numberWithBool:YES], OpenFeintSettingEnablePushNotifications,[NSNumber numberWithBool:NO], OpenFeintSettingDisableUserGeneratedContent,[NSNumber numberWithBool:NO], OpenFeintSettingAlwaysAskForApprovalInDebug,self.window, OpenFeintSettingPresentationWindow,nil];[OpenFeint initializeWithProductKey:@yourProductKeyandSecret:@yourProductSecretandDisplayName:@Nombre AppandSettings:settingsandDelegates:nil];// Muestra Pantalla Principal de OpenFeint[OpenFeint launchDashboard];return YES;}
12. Incluimos estas tres funciones de control para OpenFeint
>(void)applicationWillTerminate:(UIApplication *)application{// Finaliza OpenFeint[OpenFeint shutdown];}(void)applicationDidBecomeActive:(UIApplication *)application{[OpenFeint applicationDidBecomeActive];}(void)applicationWillResignActive:(UIApplication *)application
-
73
{[OpenFeint applicationWillResignActive];}
13. Compilar y ejecutar
En estos momentos tenemos implementada la API de OpenFeint en nuestro proyecto. Ahora debemos agregar dentro del cdigo fuente las funciones necesarias segn los servicios que incorporemos: Achie-vements, Leaderboards, etc.
DOCUMENTACIN OFICIAL
http://www.openfeint.com/developers/support/
-
74
Enlace: http://j.mp/tdDBBM
-
La segunda seccin de la gua estar dedicada a la creacin de vdeo juegos para dispositi-
vos mviles a travs del uso de Chipmunk y Cocos2D.
CHIPMUNK
Motor de fsica 2D Parte 1 Motor de fsica 2D Parte 2 Motor de fsica 2D Parte 3
COCOS 2D
Framework para desarrollar vdeo juegos en 2D Parte 1 Framework para desarrollar vdeo juegos en 2D Parte 2 Framework para desarrollar vdeo juegos en 2D Parte 3
Desarrollo de vdeo juegos para dispositivos mviles
-
Chipmunk, motor de fsica 2D Parte 1
captulo10
-
77
CAPTULO 10
CHIPMUNK, MOTOR DE FSICA 2D PARTE 1
Para los interesados en el desarrollo de vdeojuegos para iOS (iPhone, iPod Touch y iPad) y con poca
experiencia en esta rea les presento un motor de fsica 2D sencillo de implementar y de gran ayuda al
momento de realizar simulaciones dentro de la aplicacin Chipmunk.
INTRODUCCIN A CHIPMUNK
Un motor de fsica es un componente software desarrollado principalmente para simular la mecnica
newtoniana de objetos modelados dentro de un entorno determinado. El motor considera las variables
gravedad, friccin, masa, velocidad, entre otras para simular la fsica de los objetos de manera aproxi-
mada a la fsica que presentara ese objeto en el mundo real. Tambin permiten implementar los siste-
mas de partculas y detectar colisiones, que son de gran ayuda al momento de desarrollar vdeojuegos.
Chipmunk es un motor de fsica 2D de cdigo abierto desarrollado por Scott Lembcke1 en C bajo licen-
cia MIT2. Dentro de sus caractersticas estn:
Ideal para el desarrollo de videojuegos en 2D Rpido y ligero para modelar cuerpos rgidos Flexible sistema de deteccin de colisiones
1 http://wiki.slembcke.net/main/published/HomePage2 http://es.wikipedia.org/wiki/MIT_License
-
78
INICIANDO LA IMPLEMENTACIN CON XCODE
A continuacin veremos cmo crear un proyecto en Xcode que incorpore las libreras de Chipmunk.
1. Crear un proyecto nuevo en Xcode para iOS de tipo Single View Application
2. Descargar las libreras de Chipmunk disponibles para descargar: http://j.mp/rvsbOB
3. Extraer los archivos y agregar el contenido de la carpeta CHIPMUNK al proyecto:
-
79
4. Agregar estas dos imgenes al proyecto. (gurdalas con botn derecho a tu ordenador)
Imagen 1:
Imagen 2:
5. Declarar dos variables UIImageView en el ViewController.h#import @interface EquilibrioChipmunkViewController : UIViewController{UIImageView *barra;UIImageView *esfera;}@end
6. Definir en la funcin (void)viewDidLoad de ViewController.m:- (void)viewDidLoad{[super viewDidLoad];barra = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@barra.png]];barra.center = CGPointMake(160, 350);esfera = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@esfera.png]];esfera.center = CGPointMake(160, 230);[self.view addSubview:barra];[self.view addSubview:esfera];[self.view setBackgroundColor:[UIColor whiteColor]];}
-
80
7. Compilar y ejecutar
Al finalizar los siete pasos descritos, obtendremos una imagen como la anterior.
-
81
Enlace: http://j.mp/uDXahc
-
Chipmunk, motor de fsica 2D Parte 2
captulo11
-
83
CAPTULO 11
CHIPMUNK, MOTOR DE FSICA 2D PARTE 2
Es momento de ver los conceptos bsicos del motor de fsica 2D y su implementacin en una aplicacin
para el iPhone. En el captulo anterior solo creamos un proyecto en Xcode, agregado dos imgenes y
vinculado las libreras de Chipmunk al proyecto, pero no hemos utilizado an el motor de fsica.
CONCEPTOS BSICOS
Los principales conceptos que debemos tener en cuenta para la implementacin del motor de fsica
son:
Space: es la unidad de simulacin bsica que contiene todos los objetos creados, es el entorno donde interactan los objetos. En l se establecen las reglas generales que afectan a
todos los objetos de la simulacin como por ejemplo: la gravedad.
Body: son cuerpos rgidos que contienen las propiedades fsicas de un objeto como: masa, posicin, rotacin, velocidad, etc. No poseen forma (shape) por si mismos y por lo tanto no coli-
sionan con otros cuerpos.
Shape: son las diferentes partes de un cuerpo (body), con los shape le damos forma a los cuerpos permitiendo la colisin entre ellos. Existen tres tipos de shapes: circular, segmentado y
poligonal.
Constraints: permiten conectar dos cuerpos de diferentes formas. Forces: son vectores (x,y) utilizados para interactuar con los objetos creados en el entorno de
simulacin. No es recomendable modificar directamente las propiedades de los objetos (posi-
cin, velocidad, etc), para realizar esto se deben utilizar las funciones que asignan estos vectores
a los objetos.
-
84
LA IMPLEMENTACIN EN XCODE
Tomando como base el proyecto creado en el captulo anterior, prosigamos con la implementacin de
las libreras de Chipmunk:
1. Incluir en ViewController.h el archivo de cabecera chipmunk.h, un objeto de la clase cpSpace y las
tres funciones que utilizaremos para iniciar e implementar Chipmunk:
#import #import chipmunk.h@interface EquilibrioChipmunkViewController : UIViewController{UIImageView *barra;UIImageView *esfera;cpSpace *space;}- (void)configurarChipmunk;- (void)delta:(NSTimer *)timer;void updateShape(void *ptr, void* unused);@end
2. Realizar el llamado de (void)configurarChipmunk en la funcin (void)viewDidLoad:- (void)viewDidLoad{[super viewDidLoad];barra = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@barra.png]];barra.center = CGPointMake(160, 350);esfera = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@esfera.png]];esfera.center = CGPointMake(160, 230);[self.view addSubview:barra];[self.view addSubview:esfera];[self.view setBackgroundColor:[UIColor whiteColor]];[self configurarChipmunk];}
3. Implementar las tres funciones declaradas anteriormente:
- (void)delta:(NSTimer *)timer {// Actualiza informacin del Space
-
85
cpSpaceStep(space, 1.0f/60.0f);// Actualiza informacin de los Shapes definidos
cpSpaceHashEach(space->activeShapes, &updateShape, nil);}void updateShape(void *ptr, void* unused) {cpShape *shape = (cpShape*)ptr;// Validacin del Shape recibidoif(shape == nil || shape->body == nil || shape->data == nil) {NSLog(@Invalido shape revisar ...);return;}// Actualiza la posicin del Shapeif([(UIView *)shape->data isKindOfClass:[UIView class]]) {[(UIView *)shape->data setCenter:CGPointMake(shape->body->p.x, 480 -shape->body->p.y)];}elseNSLog(@Shape actualizado fuera de la funcin : updateShape );}
4. Definir Body y Shape de un objeto dinmico circular en la funcin (void)configurarChipmunk- (void)configurarChipmunk {// Inicia el motor de fisica 2D Chipmunk
cpInitChipmunk();// Crea un nuevo Spacespace = cpSpaceNew();// Define la direccin y magnitud de la gravedad en el Space
space->gravity = cpv(0, -100);// Implementa el NSTimer encargado de realizar las animaciones[NSTimer scheduledTimerWithTimeInterval:1.0f/60.0f target:selfselector:@selector(delta:) userInfo:nil repeats:YES];// Crea un Body con masa 50 y momento INFINITYcpBody *esferaBody = cpBodyNew(50.0f, INFINITY);// Establece posicin inicialesferaBody->p = cpv(160, 250);
-
86
// Agrega el Body al SpacecpSpaceAddBody(space, esferaBody);// Crea un Shape tipo Circle con radio 15 asociado al Body esferaBodycpShape *esferaShape = cpCircleShapeNew(esferaBody, 15.0f, cpvzero);esferaShape->e = 0.5f; // ElasticidadesferaShape->u = 0.8f; // FriccinesferaShape->data = esfera; // Asocia Shape con UIImageViewesferaShape->collision_type = 1; // Las colisiones son agrupadas por tipo// Agrega el Shape al SpacecpSpaceAddShape(space, esferaShape);}
5. Compilar y ejecutar
Si hemos hecho todo bien al final se ver mal, la esfera caer en direccin de la gravedad definida y no
encontrar obstculos en el espacio.
-
87
Enlace: http://j.mp/vmN9rh
-
Chipmunk, motor de fsica 2D y el acelermetro Parte 3
captulo12
-
89
CAPTULO 12
CHIPMUNK, MOTOR DE FSICA 2D Y EL ACELERMETRO PARTE 3
En este captulo finalizaremos el tema sobre el motor de fsica 2D, Chipmunk. Hasta el momento hemos
visto los conceptor bsicos (Parte 1) y los elementos dinmicos presentes en las simulaciones (parte 2) .
En este ltimo captulo revisaremos los elementos estticos y la implementacin del acelermetro con
nuestra aplicacin.
Para continuar explorando sobre Chipmunk recomiendo revisar la documentacin disponible y seguir
probando el desempeo de las simulaciones en los dispositivos mviles (iPhone / iPod Touch/ iPad)
para lograr una ptima implementacin del motor de fsica 2D.
DOCUMENTACIN CHIPMUNK
http://code.google.com/p/chipmunk-physics/
CONCEPTOS
Antes de implementar los elementos estticos en nuestra aplicacin es importante recordar los tipos de
Shapes que existen en Chipmunk y aclarar uno de ellos:
Circular: Genera una circunferencia para el cuerpo rgido referenciado cpCircleShapeNew(cpBody * body, cpFloat radius, cpVect offset).
Segmentado: Genera una forma lineal entre los puntos a y b. cpSegmentShapeNew(cpBody * body, cpVect a, cpVect b, cpFloat radius).
Poligonal: Genera un polgono Convexo definido previamente por medio de sus vrtices. En Chipmunk no se pueden modelar polgonos Concavos, para esos casos se debe utilizar Segment.
cpPolyShapeNew(cpBody * body, int numVerts, cpVect * verts, cpVect offset).
-
89
FINALIZANDO LA IMPLEMENTACIN EN XCODE
Prosigamos con el proyecto creado para estos menesteres en el captulo anterior:
1. Definir Body y Shape de un objeto esttico lineal en la funcin (void)configurarchipmunk
- (void)configurarChipmunk {// Inicia el motor de fisica 2D Chipmunk
cpInitChipmunk();// Crea un nuevo Spacespace = cpSpaceNew();// Define la direccin y magnitud de la gravedad en el Space
space->gravity = cpv(0, -100);// Implementa el NSTimer encargado de realizar las animaciones[NSTimer scheduledTimerWithTimeInterval:1.0f/60.0f target:selfselector:@selector(delta:) userInfo:nil repeats:YES];// Crea un Body con masa 50 y momento INFINITYcpBody *esferaBody = cpBodyNew(50.0f, INFINITY);// Establece posicin inicialesferaBody->p = cpv(160, 250);// Agrega el Body al SpacecpSpaceAddBody(space, esferaBody);// Crea un Shape tipo Circle con radio 15 asociado al Body esferaBodycpShape *esferaShape = cpCircleShapeNew(esferaBody, 15.0f, cpvzero);esferaShape->e = 0.5f; // ElasticidadesferaShape->u = 0.8f; // FriccinesferaShape->data = esfera; // Asocia Shape con UIImageViewesferaShape->collision_type = 1; // Las colisiones son agrupadas por tipo// Agrega el Shape al SpacecpSpaceAddShape(space, esferaShape);// ==============================// Implementacin Objeto Esttico// ==============================// Crea un Body con masa y momento INFINITY
-
89
barraBody = cpBodyNew(INFINITY, INFINITY);// Establece la posicin inicialbarraBody->p = cpv(160,120);// El Body de los objetos estticos no debe agregarse al Space// si quieres saber que pasa, agregalo // Crea un Shape tipo Segment asociado al Body barraBodybarraShape = cpSegmentShapeNew(barraBody, cpv(-105, -3), cpv(105, -3), 10.0);
barraShape->e = 0.7f; // ElasticidadbarraShape->u = 0.4f; // FriccinbarraShape->data = barra; // Asocia Shape con UIImageViewbarraShape->collision_type = 0; // Se agrupa en un tipo de colisin diferente a esferaShape// Agrega el Shape al SpacecpSpaceAddShape(space, barraShape);}
2. Agregar en ViewController.h
#import #import chipmunk.h@interface ViewController : UIViewController {UIImageView *barra;UIImageView *esfera;cpSpace *space;cpBody *barraBody;cpShape *barraShape;}- (void)configurarChipmunk;- (void)delta:(NSTimer *)timer;void updateShape(void *ptr, void* unused);@end
-
89
3. Definir la funcin que implementa el acelermetro:
- (void)accelerometer:(UIAccelerometer*)accelerometer didAccelerate:(UIAcceleration*)acceleration{// Modifica el ngulo de la Barra con relacin a la inclinacin del
dispositivocpBodySetAngle(barraBody, M_PI * (acceleration.x * 0.6f) );// Notifica a Chipmunk el movimiento de un Objeto Esttico
cpSpaceRehashStatic(space);// Actualiza el Shape de la Barra (Objeto Esttico)[(UIView *)barraShape->data setTransform:CGAffineTransformMakeRotation(-barraShape->body->a)];
}
4. Inicializamos el acelermetro en la funcin (void)viewDidLoad
- (void)viewDidLoad {[super viewDidLoad];barra = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@barra.png]];barra.center = CGPointMake(160, 350);
esfera = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@esfera.png]];esfera.center = CGPointMake(160, 230);[self.view addSubview:barra];[self.view addSubview:esfera];[self.view setBackgroundColor:[UIColor whiteColor]];[self configurarChipmunk];// Inicia el acelermetro[[UIAccelerometer sharedAccelerometer] setUpdateInterval:(1.0 / 60)];[[UIAccelerometer sharedAccelerometer] setDelegate:self];}
-
89
5. Compilar y ejecutar
Si hemos hecho todo bien al final obtendremos un objeto circular que se sostiene con un madero el
cual gira con el movimiento del dispositivo. Se puede seguir probando con distintos valores de masa,
friccin, elasticidad, gravedad, entro otros para conocer un poco ms el comportamiento de los objetos
dentro del espacio creado.
-
89
Enlace: http://j.mp/scOdr8
-
Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 1
captulo13
-
96
CAPTULO 13
COCOS2D, FRAMEWORK PARA DESARROLLAR VDEOJUEGOS EN 2D PARTE 1
Para el desarrollo de vdeojuegos en la plataforma iPhone OS (iPhone/iPod Touch/iPad) es importante
conocer las distintas herramientas disponibles y evaluar cul de ellas se ajusta ms a nuestras necesida-
des. Varias aplicaciones actualmente son desarrolladas utilizando uno de estos componentes:
OpenGL ES: http://www.khronos.org/opengles/ UIKit: http://j.mp/uCLGnA Core Animation + Quartz 2D: http://j.mp/uvEu2A
UIKit es el ms sencillo de utilizar en comparacin con OpenGL ES que requiere de un mayor tiempo de
implementacin pero ofrece el mejor rendimiento. La buena noticia es que existe un framework que
simplifica esta implementacin: Cocos2D.
CONOCIENDO COCOS2D
Cocos2D es un framework para el desarrollo de juegos en 2D y aplicaciones con alto contenido interac-
tivo. Cocos2D para iPhone es basado en Cocos2D pero implementa Objetive-C como lenguaje de progra-
macin en lugar de Python. Dentro de las caractersticas principales de este framework encontramos:
Integracin con motores de fsica: Box2D1, Chipmunk. Manejo de Escenas y efectos de transiciones. Compatibilidad con eventos Touch y el acelermetro. Texturas PVRTC2 de 2-bit y 4-bit, texturas RGBA3 de 16 bits y 32-bit. Basado en OpenGL ES 1.1
Dentro de Cocos2D encontramos tres conceptos principales a considerar: escenas, capas y objetos. Las escenas
equivalen a los niveles o vistas implementadas en un juego. Las capas se incorporan a las escenas y pueden contener
uno o ms objetos: mens, botones, etiquetas, cuerpos, etc. A su vez una escena puede contener una o ms capas.
1 http://www.box2d.org/2 http://en.wikipedia.org/wiki/PVRTC3 http://en.wikipedia.org/wiki/RGBA
-
97
IMPLEMENTACIN DE COCOS2D EN UNA APLICACIN
1. Descarga las liberas de Cocos 2D para iPhone: http://code.google.com/p/cocos2d-iphone/
2. Ejecutar el siguiente comando en la consola (dentro de la carpeta descargada): ./install_template.sh
3. Crear un nuevo proyecto en Xcode de tipo cocos2d Application
4. Compilar y ejecutar:
La plantilla creada nos muestra los principales elementos de una aplicacin:
CCDirector: Es el controlador principal de nuestra aplicacin. [CCDirector setDirectorType:CCDirectorTypeDefault]; CCScene: Implementa las escenas o vistas. CCScene *scene = [CCScene node]; CCLayer: Permite la creacin de capas (HelloWorld es un objeto tipo CCLayer)
HelloWorld *layer = [HelloWorld node];
CCLabel: Uno de los tipos de objetos que se pueden implementar dentro de una capa CCLabel* label = [CCLabel labelWithString:@Hola Mundo fontName:@Marker Felt font-
Size:64];
Tenemos implementadas las libreras de Cocos2D en nuestro proyecto de Xcode. Ahora podemos utili-
zar los diferentes componentes que nos brindan estas libreras y lograr una mejora en el desempeo de
nuestras aplicaciones.
-
98
Enlace: http://j.mp/ttovDQ
-
Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 2
captulo14
-
100
CAPTULO 14
COCOS2D, FRAMEWORK PARA DESARROLLAR VDEOJUEGOS EN 2D PARTE 2
Prosiguiendo con Cocos2D el framework basado en OpenGL ES para el desarrollo de juegos en 2D en
la plataforma de iOS, continuaremos con la implementacin de objetos y animaciones en el proyecto
creado anteriormente.
Antes recordemos que la animacin es un proceso para generar la sensacin de movimiento de un
objeto por medio de la superposicin de varias imgenes. Cada una de las imgenes que conforman
una animacin se denomina fotograma o frame, para las animaciones en el iPhone con Cocos2D, depen-
diendo de los objetos creados, se establece un nmero predeterminado de 60 fotogramas por segundo.
IMPLEMENTACIN DE COCOS2D
Ahora vamos a proseguir con el proyecto creado en el captulo anterior. Pero antes debemos agregar
esta imagen en nuestro proyecto:
-
101
1. Redefinimos la clase HelloWorld de CCLayer a CCColorLayer, para modificar de manera fcil el color
de fondo
#import cocos2d.h@interface HelloWorld : CCLayerColor{}+(id) scene;@end
2. Agregamos el objeto CCSprite a la capa HelloWorld
-(id) init{// ccc4 Estable el color de Fondoif( (self=[super initWithColor:ccc4(255,255,255,255)] )) {CGSize winSize = [[CCDirector sharedDirector] winSize];self.isTouchEnabled = YES;// Crea un objeto tipo CCSprite que contiene la imagen agregadaCCSprite *player = [CCSprite spriteWithFile:@giftOne.pngrect:CGRectMake(0, 0, 186, 186)];// Establece la posicin del objetoplayer.position = ccp(player.contentSize.width/2, winSize.height/2);// Agrega el objeto a la Capa[self addChild:player];}return self;}
3. Compilar y ejecutar:
-
102
4. Ahora agregaremos movimiento a nuestro objeto con el siguiente mtodo:
-(void)moveObject {// Accin girarid rotateAction = [CCRotateBy actionWithDuration:2 angle:180*2];// Accin saltarid jumpAction = [CCJumpBy actionWithDuration:2 position:ccp(260,0) height:50jumps:2];// Agrupa 2 o ms accionesid fordward = [CCSpawn actions:rotateAction, jumpAction, nil];// Todas las acciones permiten regresar la accin con el mtodo reverseid backwards = [fordward reverse];// Permite ejecutar una accin despes de otraid sequence = [CCSequence actions: fordward, backwards, nil];// Repite una accin el nmero de veces que se requiera o// hasta el infinito y ms all con RepearForEver
id repeat = [CCRepeat actionWithAction:sequence times:2];// Ejecuta la accin sobre el objeto[player runAction:repeat];}
5. Realizamos el llamado a la funcin definida anteriormente:
// Mtodo que implementa el evento Touch en Cocos2D- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {[self moveObject];}
6. Compilar y ejecutar:
-
103
Si todo ha salido bien obtendremos un objeto que gira y salta al momento de tocar la pantalla. Puedes
descargar el proyecto para realizar el procedimiento Build and Run.
DESCARGAR EL PROYECTO
http://www.maestrosdelweb.com/images/2010/04/myGameCocos2D.zip
-
104
Enlace: http://j.mp/u6PQsm
-
Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 3
captulo15
-
106
CAPTULO 15
COCOS2D, FRAMEWORK PARA DESARROLLAR VDEOJUEGOS EN 2D PARTE 3
Para finalizar con los captulos sobre Cocos2D revisaremos la librera que implementa los sonidos en
una aplicacin para el iPhone. Si bien podemos utilizar directamente el framework disponible para la
plataforma: Core Audio y OpenAL1 cocos2D nos facilita la implementacin de varios archivos de audio
en nuestro proyecto.
LIBRERAS DE AUDIO DISPONIBLES
Core Audio es la librera que permite reproducir, procesar y grabar audio en nuestras aplicaciones.
Adems permite reproducir simultneamente uno o ms sonidos y el direccionamiento de audio auto-
mtico cuando se utilizan auriculares, parlantes y auriculares Bluetooth. Por su parte OpenAL es ideal
para reproducir sonidos en un espacio 3D.
IMPLEMENTACIN DE ARCHIVOS DE AUDIO CON COCOS2D:
1. Agregar estos dos archivos de audio a nuestro proyecto:
Sound Background: http://www.maestrosdelweb.com/images/2010/04/soundBackground.m4a Sound Effect: http://www.maestrosdelweb.com/images/2010/04/soundEffect.m4a
1 http://developer.apple.com/technologies/iphone/audio-and-video.html
-
107
2. Iniciar el archivo de audio agregado en el mtodo (id)init
-(id) init{// ccc4 Estable el color de Fondoif( (self=[super initWithColor:ccc4(255,255,255,255)] )) {CGSize winSize = [[CCDirector sharedDirector] winSize];// Crea un objeto tipo CCSprite que contiene la imagen agregada
player = [CCSprite spriteWithFile:@giftOne.pngrect:CGRectMake(0, 0, 186, 186)];
// Establece la posicin del objetoplayer.position = ccp(player.contentSize.width/2, winSize.height/2);// Agrega el objeto a la Capa[self addChild:player];// Habilita el evento Touchself.isTouchEnabled = YES;// Agrega el archivo de audio soundBackground.m4a[[SimpleAudioEngine sharedEngine]playBackgroundMusic:@soundBackground.m4a];}return self;}
3. Implementar el segundo archivo de audio, en el evento TouchBegan
- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{[self moveObject];[[SimpleAudioEngine sharedEngine] playEffect:@soundEffect.m4a];}
4. Compilar y ejecutar:
-
108
En estos momentos hemos implementado los dos archivos de audio en nuestra aplicacin: el primero
como msica de fondo y el segundo como efecto de sonido al momento de tocar la pantalla. Como se
puede observar es un proceso realmente sencillo pero de gran utilidad para lograr un mejor desempeo
en nuestras aplicaciones.
Puedes descargar el proyecto para realizar el liberador procedimiento de Build and Run.
DESCARGAR EL PROYECTO
http://www.maestrosdelweb.com/images/2010/04/myGameCocos2D1.zip
-
109
Enlace: http://j.mp/rxe0lB
-
110
OTRAS GUAS DE MAESTROS DEL WEB
Guas online
ADICTOS A LA COMUNICACIN
Utiliza las herramientas sociales en Internet
para crear proyectos de comunicacin inde-
pendientes.
Visita Adictos a la comunicacinhttp://mdw.li/guiacomunica
GUA STARTUP
Aprende las oportunidades, retos y estra-
tegias que toda persona debe conocer al
momento de emprender.
Visita la Gua Startuphttp://mdw.li/gkTDom
-
111
LOS MAESTROS DEL WEB
Una serie de perfiles de personas y proyectos
que nos inspiran a permanecer en el medio,
aprender y seguir evolucionando.
Visita Los Maestros del Webhttp://j.mp/spAncK
CURSO ANDROID
Actualiza tus conocimientos con el curso sobre Android para el desarrollo de aplica-
ciones mviles.
Visita el Curso Androidhttp://mdw.li/lmlydX
-
112
GUA ASP.NET
ASP.NET es un modelo de desarrollo Web
unificado creado por Microsoft para el desa-
rrollo de sitios y aplicaciones web dinmicas
con un mnimo de cdigo. ASP.NET
Visita la Gua ASP.NEThttp://mdw.li/guiaaspnet
GUA ZEND
Zend Framework es un framework de
cdigo abierto para desarrollar apli-
caciones y servicios web con PHP 5.
Visita la Gua Zendhttp://mdw.li/guiazend
Sobre la guaSobre el autorIntroduccinDesarrollando aplicaciones para dispositivos mvilesUso del navegador en un appUso del correoCapturar imgenes desde la cmara del iPhoneUso de varias vistasTrabajando con bases de datos SQL LiteTrabajando con el API de Facebook ConnectTrabajando con el API de TwitterTrabajando con el API de OpenFeintDesarrollo de vdeo juegos para dispositivos mvilesChipmunk, motor de fsica 2D Parte 1Chipmunk, motor de fsica 2D Parte 2Chipmunk, motor de fsica 2D y el acelermetro Parte 3Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 1Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 2Cocos2D, Framework para desarrollar vdeojuegos en 2D Parte 3
top related