ESCOLA UNIVERSITÀRIA D’ENGINYERIA TÈCNICA DE TELECOMUNICACIÓ LA SALLE
TREBALL FINAL DE GRAU
GRAU EN ENGINYERIA MULTIMÈDIA
iOS App: Hi ha vida més enllà de Xcode
ALUMNE PROFESSOR PONENT
Albert Alvarez Castell Guillem Villa Fernandez
ACTA DE L'EXAMEN DEL TREBALL FINAL DE GRAU
Reunit el Tribunal qualificador en el dia de la data, l'alumne
D. Albert Alvarez Castell va exposar el seu Treball de Final de Grau, el qual va tractar sobre el tema següent:
iOS App: Hi ha vida més enllà de Xcode
Acabada l'exposició i contestades per part de l'alumne les objeccions formulades pels Srs. membres del tribunal, aquest valorà l'esmentat Treball amb la qualificació de
Barcelona,
VOCAL DEL TRIBUNAL VOCAL DEL TRIBUNAL
PRESIDENT DEL TRIBUNAL
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
ABSTRACT
El projecte està dirigit a comparar dues tecnologies diferents amb les que crearem una mateixa aplicació. Així podrem extreure, analitzant diferents aspectes del desenvolupament, quina tecnologia és més adient i eficient per a realitzar un projecte segons les seves necessitats.
Com el projecte que buscàvem era una aplicació per iOS , lògicament una de les tecnologies és la nativa, per lo que hem utilitzat Objective-C amb Xcode i com a framework, Cocos2D .
Per altre banda, hem escollit el llenguatge AS3 amb Flash i Starling com a framework com a tecnologia amb la que comparar a la nativa per a dispositius amb iOS .
I
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
El proyecto está dirigido a comparar dos tecnologías diferentes con las que crearemos una misma aplicación. De ese modo podremos extraer, analizando diferentes aspectos del desarrollo, que tecnología es más adecuada y eficiente para realizar un proyecto según sus necesidades.
Como el proyecto que buscábamos era una aplicación para iOS , lógicamente una de las tecnologías es la nativa, por lo que hemos utilizado Objective-C con Xcode y como framework, Cocos2D .
Por otro lado, hemos escogido el lenguaje AS3 con Flash y Starling como framework, como tecnología con la que comparar a la nativa para dispositivos con iOS .
II
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
This project is focused on comparing two different technologies to create one application. Analyzing distinct aspects of the development process, we will be able to conclude which technology is more suitable and efficient in order to create a project according to its needs.
As the project developed is an iOS application, obviously, one of the technologies is native; therefore, we have used Objective-C with Xcode and, as framework, Cocos2D .
In addition, we have chosen language AS3, with Flash and Starling as framework, to be the technology compared to the native one, commonly used in iOS devices.
III
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
RESUM
Ja fa un parell d’anys que tinc un iPhone 3G . Abans de l’ iPhone no havia tingut mai un smartphone, per lo que el canvi va ser més que significant. Va ser un canvi d’estil de vida. M’explicaré, ja que afirmar una cosa així potser sona molt exagerat. Els conceptes bàsics que jo volia en un mòbil, com trucar o enviar sms, més o menys eren el mateix, només se’m presentava una manera diferent de fer aquestes coses, més a nivell visual que res. Però hi havia més. La manera en la que consumia continguts. Vaig passar d’utilitzar el mòbil un parell de vegades a la setmana, majoritàriament els caps de setmana per trucar als amics, a utilitzar-lo cada dia.
Amb l’ iPhone , mirava els e-mails des de el mòbil, consultava les webs principals que mirava normalment amb el mòbil; en comptes de enviar sms, enviava missatges instantanis a través de Internet; escoltava música amb l’ iPhone , mirava series a l’autobús amb el mòbil i així moltes coses més que he anat descobrint a poc a poc.
M’agrada el meu iPhone i per això m’interessa molt tot el que el rodeja. Així que, quan a la meva feina em van comentar el que em semblaria aprendre a desenvolupar aplicacions per iOS , enseguida vaig dir que sí. I gracies al Guillem, un dels meus gurus informàtics que sempre em descobreix coses noves, que em va parlar sobre l’existència del framework Starling , vaig veure clar el camí que tenia que seguir per a fer el meu projecte.
Des de fa molts anys que treballo amb Flash , per lo que el llenguatge AS3 em resulta molt més que familiar. Hem resultaria fàcil fer un aplicació amb aquesta tecnologia, però el que tenia que aprendre era a poder exportar l’aplicació en un arxiu IPA. També tindria que descobrir Objective-C, l’entorn Xcode i familiaritzar-me amb Starling . Suposava un repte molt interessant i que podria disfrutar molt amb els resultats.
IV
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
Parlant de Flash , el meu dia a dia és treballar amb ell, és la meva feina a on treballo ara i a on treballava abans, al departament de la universitat. Encara recordo la primera vegada que vaig fer alguna cosa amb Flash. Va ser en una classe de Produccions Multimèdia i des de llavors aquesta tecnologia a canviat molt. En aquells moments el llenguatge era ActionScipt 2 i enseguida em va agradar. Al acabar el curs, vaig entrar al departament i vaig seguir amb Flash . Al cap de poc temps, va aparèixer l’evolució amb ActionScript 3 , un llenguatge molt més orientat a objectes que el seu predecessor, i em van encantar les seves possibilitats.
Al departament de Multimèdia i a la universitat vaig aprendre molt i no només a nivell professional. Per això, m’agradaria donar les gracies a aquelles persones que van formar part de la meva vida allà, en especial al Guillem, una gran persona, amic, professor i jefe. Gracies a persones com ell, com el Jordi, Serto, Marc, Noel, Albert, Isaac, Pep, Gerard i molts més, no podria tindre un millor record dels meus anys a la universitat. Sempre recordaré aquella època amb nostàlgia.
També agrair a les persones que m’ajuden a millorar personal i professionalment cada dia, com el Lluís, el millor amic que sempre m’ha fet costat des de petit; la Marta, que sempre ha estat quan l’he necessitat; el Jordi, un gran amic des de fa anys; la Jana, que té una paciència infinita amb mi i és la gran amiga amb la que vaig connectar des el primer dia com si ens coneguéssim de tota la vida; el Isma i el Carlos, que sempre estan per donar-me un cop de mà i escoltar-me.
Per últim, els agraïments més sentits. A la meva família. Al meu pare, que m’ha ensenyat que amb educació i esforç pots aconseguir qualsevol cosa per gran que sigui; a la meva mare, que sempre m’ha cuidat i ha posat les meves necessitats per sobre de les seves per a que sigui feliç; al meu avi, que sempre va vetllar per a que no sortís del camí correcte; al meu germà, el millor que podria tindre i que cada dia fa que em senti
V
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell orgullós de ser el seu germà gran; i, finalment, a la meva millor amiga, la meva companya, el meu suport i el meu cor, la Idoia.
Moltes gracies a tots. Si avui soc la persona que soc, és gracies a vosaltres.
VI
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
ÍNDEX
1 INTRODUCCIÓ 1
1.1 MARC 1
1.2 ESTAT DE L’ART 3
1.3 DESCRIPCIÓ DEL PROBLEMA 12
1.4 SOLUCIÓ PROPOSADA 13
1.5 PERSPECTIVA GENERAL DEL PROJECTE 14
1.5.1 Fonaments teòrics 14
1.5.2 Fonaments pràctics 15
1.5.3 Resultats 15
1.5.4 Conclusions i línies de futur 16
2 FONAMENTS TEÒRICS 17
2.1 EL SISTEMA OPERATIU iOS I ELS DISPOSITIUS QUE EL PORTEN 17
2.1.1 El sistema operatiu iOS 17
2.1.2 Dispositius amb iOS 20
2.2 XCODE, OBJECTIVE-C I COCOS2D 22
2.2.1 Xcode 22
2.2.2 Objective-C 22
2.2.3 Què és Cocos2D? 27
2.3 FLASH, ACTIONSCRIPT 3 I STARLING 28
2.3.1 Flash 28
2.3.2 ActionScript 3 28
2.3.3 Què és Starling? 31
VII
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
2.4 MOTORS DE FÍSIQUES: BOX2D I NAPE 32
2.4.1 Box2D 32
2.4.2 Nape 33
3 FONAMENTS PRÀCTICS 34
3.1 XCODE 4.3.3 34
3.2 FLASHDEVELOP 36
3.3 APLICACIÓ DEMO AMB FÍSIQUES 38
3.3.1 Versió Objective-C, amb Cocos2D i Box2D 38
3.3.2 Versió ActionScript 3, amb Starling i Nape 40
3.4 APLICACIÓ JOC AMB ALTA CARREGA D’ELEMENTS GRÀFICS 42
3.4.1 Versió Objective-C amb Cocos2D 43
3.4.2 Versió ActionScript 3 amb Starling 45
4 RESULTATS 47
5 CONCLUSIONS I LÍNIES DE FUTUR 56
5.1 CONCLUSIONS 56
5.2 LÍNIES DE FUTUR 57
BIBLIOGRAFIA I FONTS DOCUMENTALS 58
ÍNDEX DE FIGURES 61
VIII
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
1 INTRODUCCIÓ
1.1 MARC
Les aplicacions per a dispositius mòbils és un mercat ja pràcticament consolidat, que no para d’evolucionar. Cada dia hi ha més smartphones i més gent que els utilitza, i cada dia hi ha més consum d’aplicacions per a aquests dispositius.
Podem dir que, actualment hi ha dos tecnologies diferents que dominen el terreny de les aplicacions per a dispositius mòbils, i es distingeixen pel seu sistema operatiu, iOS i Android.
iOS va ser el primer en ser popular entre la gran massa. Ja que és el sistema operatiu que venia en el primer smartphone que va revolucionar el mercat de la telefonia mòbil, el iPhone .
Figura 1 iPhone 3G de Juliol del 2008
Les aplicacions per aquest sistema operatiu estaven realitzades amb un llenguatge de programació nou basat en C, anomenat Objective-C.
1
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
Posteriorment varen sorgir alternatives que permetien als programadors desenvolupar aplicacions mitjançant altres llenguatges. Aquestes tecnologies alternatives permeten exportar les aplicacions en format IPA, la extensió de les aplicacions per dispositius amb iOS . Una d’aquestes tecnologies és Flash .
2
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
1.2 ESTAT DE L’ART
Com he comentat en apartats anteriors, al mercat po dem trobar alternatives que ens permeten crear aplicacions per iOS sense la necessitat de tindre que utilitzar Xcode ni tindre que programar-la en Objective-C.
Algunes d’aquestes tecnologies són:
Appcelerator Titanium
“Crea aplicacions natives per a iOS, Android, hibrides i aplicacions web mòbils des d’un únic SDK basat en JavaScript. El SDK de Titanium per a aplicaci ons mòbils multi plataforma et permet escollir la millor manera d’arribar als teus usuaris finals en qualsevol dispositiu.” [1]
Figura 2 Concepte en el que es basa el SDK Titanium
Característiques:
- Suporta més de 5000 APIs natives - Plataforma basada en JavaScript - Suport per iOs , Android i HTML5
Beneficis:
- Un 70% més ràpid que desenvolupant en Objective-C o Java - Plataforma única - Extensibilitat il·limitada
3
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
Appcelerator Titanium és un framework de codi obert que permet construir aplicacions d’escriptori i mòbils amb tecnologies web. La plataforma permet als desenvolupadors crear aplicacions natives per a iOS i Android només utilitzant HTML , CSS i JavaScript , és a dir, sense necessitat de conèixe r Objective-C o Java .
La utilització de llenguatges web ho fa més senzill que el desenvolupament en Objective-C o Java , els llenguatges són dinàmics i no requereixen d’ús de memòria. A més, es pot desenvolupar en qualsevol IDE web.
En el cas de la necess itat de realitzar aplicacions més sofisticades, on fossin necessaris millors gràfics i 3D, o inclús es necessites velocitat nativa, l’ús de Objective- C o Java , seria l’elecció correcta.
Algunes aplicacions realitzades són: NBC, Zipcar o Legoland California.
Figura 3 App de la cadena americana NBC
4
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
Corona “Corona és el principal framework de desenvolupament d'aplicacions mòbils.”
“Des de els jocs als llibres electrònics a aplicacions de negocis, Corona no té parangó en donar als desenvolupadors d'aplicacions mòbils la capacitat de desenvolupar contingut d'alta qualitat a velocitats rècord. Corona SDK és només el començament, la nostra vibrant comunitat, els recursos educatius i les eines complementàries de desenvolupament, fan de Corona la millor opció entre els desenvolupadors d'aplicacions mòbils.” [2]
El framework Corona disposa de APIs molt senzilles i estructurades que permeten realitzar animacions d’objectes, crear widgets o aplicar físiques només amb unes poques línies de codi. El SDK disposa d’unes 500 APIs que cobreixen funcions de hardware, UI nativa i físiques, entre d’altres.
Corona és multi plataforma i permet exportar per a iOS , Android , Kindle Fire i NOOK . Disposa d’un simulador per a veure com quedaria l’aplicació en qualsevol dels dispositius.
Es basa en els estàndards mòbils de la industria, incloent OpenGL , OpenAL , Google Maps , físiques Box2D , Facebook Connect , Game Center , compres dins d’aplicacions, etc…
Corona tria automàticament entre els elements importats, els més adequats en funció a la resolució de la pantalla i escala el contingut, depenent del tamany de la pantalla del dispositiu de l’usuari.
5
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
Aquesta tecnologia també et dóna totes les opcions per a extreure un benefici econòmic amb l’aplicació. Podem posar anuncis destacats o un sistema de compres dintre de l’aplicació.
Algunes aplicacions realitzades amb Corona són: The Lost City, Sparky the Shark o Cruze E-brochure per Chevrolet.
Figura 4 App feta amb Corona per Chevrolet
6
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
PhoneGap “PhoneGap és un framework de codi obert per a construir aplicacions mòbils multi plataforma utilitzant HTML5, JavaScript i CSS.” [3]
Figura 5 Diagrama de com funciona PhoneGap
Desenvolupar aplicacions per a cada dispositiu requereix de diferents frameworks i llenguatges. PhoneGap s’ofereix com una solució a aquest problema utilitzant tecnologies basades en estàndards web. Ja que les aplicacions construïdes amb PhoneGap són compatibles amb els estàndards, fa que aquestes seguiran funcionant encara que els navegadors s’actualitzin.
El codi de PhoneGap va ser adherit a Apache Software Foundation amb el nom de Apache Cordova i està sota la versió 2.0 de la llicencia Apache .
A l’any 2011, Adobe va adquirir l’empresa creadora del framework, Nitobi . I van permetre que els creadors es ce ntressin en el desenvolupament del projecte en totes les plataformes.
Una idea derivada d’aquest projecte és Adobe PhoneGap Build . Aquesta eina és un servei en núvol que permet construir ràpidament aplicacions i compilar -les fàcilment sense SDKs, compilad ors ni hardware. El desenvolupador només te que pujar els arxius HTML5 , CSS i JavaScript a l’eina i aquesta la compilarà.
7
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
Figura 6 Diagrama del funcionament de PhoneGap Build
Algunes aplicacions realitzades amb PhoneGap són: BBC Olympics, HealthTap o ipCam FC.
Figura 7 App realitzada amb PhoneGap per a la cadena BBC
8
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
Rhodes
Rhodes és un framework desenvolupat per Motorola per a construir aplicacions natives que poden córrer en una gran varietat de dispositius. Especialment pensat per a dispositius Motorola , també suporta altres smartphones amb tecnologies diferents, com iOS , Android , Windows Mobile , BlackBerry i Windows Phone 7 .
Rhodes utilitza un patró Model-Vista-Cotrolador, on les Vistes estan escrites en HTML/HTML5 i els Controladors estan programats en llenguatge Ruby . És de codi obert sota la llicencia del MIT .
Podem trobar Rhodes dintre de la suit RhoMobile de Motorola , que proveeix d’un entorn de desenvolupament pel framework i les altres eines que formen la suit, com RhoElements o RhoConnect .
9
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
MonoTouch MonoTouch és una tecnologia que utilitza C# i .NET per programar aplicacions per iOS .
És una eina multi plataforma que permet compartir fàcilment codi entre projectes en iOS , Android i Windows Phone 7 . Amb accés total a totes les APIs natives i un gran rendiment en el projecte compilat, també permet utilitzar elements com Delegates i Events de .NET .
Algunes aplicacions realitzades amb MonoTouch són: Rdio, Lab View by National Instruments, Clear Channel, Infinite Flight o iCircuit.
Figura 8 Infinite Flight, un simulador de vol
10
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
Flash iOS no suporta Flash , però no obstant, la plataforma Flash va treure una eina anomenada Packager for iPhone per a poder exportar aplicacions programades en AcitonScript 3 . Posteriorment amb el SDK de Flex també varem poder exportar els nostres projectes per iOS amb altres eina com FlashDevelop .
Aquesta darrera plataforma alternativa és la que hem escollit per comparar amb Xcode .
11
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
1.3 DESCRIPCIÓ DEL PROBLEMA
Com que el desenvolupament d’aplicacions per a dispositius iOS és un terreny relativament molt jove, no tothom sap ben bé que és el que s’ha de fer, el que es pot fer i com es pot realitzar una aplicació.
Molta gent pensa que una aplicació només és pot realitzar amb Xcode i que només es pot fer amb un ordinador Mac . És molt possible que als inicis del iOS aquest punt fos completament cert, però a dia d’avui ja no.
Existeixen alternatives amb les que qualsevol persona amb qualsevol ordinador, pot realitzar una aplicació per un iPhone , un iPod o un iPad .
Llavors, potser en segons quines aplicacions o jocs ens dona millor rendiment el Stage3D de Flash que el OpenGL ; o tot i donar millor rendiment una aplicació realitzada amb Objective-C, potser no ens compensa el temps i les dificultats que han invertit un equip de desenvolupadors que ja coneixien AS3 , en aprendre un llenguatge diferent i haguessin pogut fer la mateixa tasca en la meitat de temps, de haver utilitzat una tecnologia que ja els era familiar.
La pregunta és: Sempre serà millor fer una aplicació per iOS amb Xcode que amb una tecnologia alternativa?
12
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
1.4 SOLUCIÓ PROPOSADA
Per respondre a la pregunta que ens plantegem a l’apartat anterior, realitzarem algunes aplicacions i cadascuna la desenvoluparem amb les dues tecnologies, intentant que les apps resultants siguin el més idèntiques possible.
Per a que les aplicacions escollides toquin tipologies diferents, desenvoluparem una app que basi el seu funcionament en un simulador de físiques i una altre aplicació que serà un joc de naus espacials.
Per al simulador de físiques, farem una aplicació en la que veurem el comportament d’una pilota que rebota per la pantalla i amb la que l’usuari pot interactuar. A les dos versions utilitzarem llibreries externes equivalents o similars per al motor de físiques, depenent de quina ens doni el resultat més òptim.
El joc de naus serà de tipus videojoc d’Arcade , a l’estil Space Invaders . L’usuari podrà interactuar amb l’aplicació mitjançant el control de la nau, podent inclinar el dispositiu per controlar si puja o baixa i tocar la nau per a disparar cap als asteroides que vagin cap a ell.
Posteriorment analitzarem el rendiment de l’aplicació, el consum de memòria i de bateria, el temps de desenvolupament, la dificultat en la configuració i posterior programació en un entorn o un altre. Amb aquests resultats, realitzarem un estudi per a extreure quin camí ens convé més seguir a l’hora de plantejar-nos un projecte d’aquest tipus.
13
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
1.5 PERSPECTIVA GENERAL DEL PROJECTE
1.5.1 Fonaments teòrics
Definicions i explicació de les parts més importants i dels conceptes amb els que ens hem trobat durant la realització del projecte.
1.5.1.1 El sistema operatiu iOS i els dispositius que el porten
Explicació i descripció del sistema operatiu que utilitzen els dispositius portàtils i tàctils de Apple (iPod , iPhone i iPad ).
1.5.1.2 Xcode, Objective-C i Cocos2D
Parlarem de les eines oficials que ofereix Apple per a desenvolupar aplicacions per iOS .
1.5.1.3 Flash, ActionScript 3 i Starling
Explicació dels recursos utilitzats per a realitzar una aplicació per iOS , sense tindre que recórrer a les eines que té disponible Apple .
1.5.1.4 Motors de físiques: Box2D i Nape
Descripció dels motors de físiques utilitzats per a realitzar una aplicació demo de físiques.
14
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
1.5.2 Fonaments pràctics
Explicació dels passos seguits per a realitzar les aplicacions, així com l’estudi fet a partir de l’anàlisi dels valors de consum de recursos del dispositius utilitzat.
1.5.2.1 Xcode 4
Explicació del IDE utilitzat per a fer l’aplicació amb Objective-C.
1.5.2.2 FlashDevelop
Explicació del IDE utilitzat per a fer l’aplicació amb ActionScript 3 .
1.5.2.3 Aplicació demo amb físiques
Explicació i passos seguits per a fer una demo de físiques en dos tecnologies diferents, així com els resultats obtinguts en cada versió.
1.5.2.4 Aplicació joc amb alta carrega d’elements gràfics
Explicació i passos seguits per a fer un joc de naus especials en dos tecnologies diferents, així com els resultats obtinguts en cada versió.
1.5.3 Resultats
Reflexió després d’analitzar els resultats obtinguts en les diferents aplicacions.
15
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
1.5.4 Conclusions i línies de futur
1.5.4.1 Conclusions
Solució a la que hem arribat a l’acabar el projecte i propostes plantejades per a escollir el millor camí per a realitzar una aplicació per iOS .
1.5.4.2 Línies de futur
Possible ampliació del projecte de cara a comparar més tecnologies diferents i un ventall més ampli de tipologies de apps.
16
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
2 FONAMENTS TEÒRICS
2.1 EL SISTEMA OPERATIU iOS I ELS DISPOSITIUS QUE EL PORTEN
2.1.1 El sistema operatiu iOS
“iOS és la plataforma mòbil més avançada del món, constantment redefinint el que és possible en un dispositiu mòbil. Utilitzant el SDK de iOS i Xcode, és fàcil crear increïbles apps. Guardar documents i dades importants amb iCloud. Publicar revistes i diaris amb Newsstand. Integra ràpidament funcionalitats de Twitter a la teva app. Fes stream de so i vídeo d’una nova manera amb AirPlay. Amb centenars de milions de usuaris de iOS només a un toc de distancia a la App Store, les possibilitats són infinites.” [4]
iOS és un sistema operatiu mòbil de Apple . Originalment desenvolupat per al iPhone , essent utilitzat posteriorment en dispositius com el iPod Touch , iPad i el Apple TV . Apple no permet la instal·lació de iOS a hardware de tercers.
Figura 9 Comparativa de la pantalla principal de iOS5 i iOS6
17
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
La interfície d’usuari de iOS està basada en el concepte de manipulació directe, utilitzant gestos multi tàctils. Els elements de control consisteixen en sliders, interruptors i botons. La resposta de les ordres de l’usuari és immediata i ofereix una interfície fluida. La interacció amb el sistema operatiu inclou gestos com arrossegar, tocs, pessigades, els quals tenen definicions diferents depenent del context de la interfície. S’utilitzen acceleròmetres interns per fer que algunes aplicacions responguin al sacsejar el dispositiu o rotar-lo en tres dimensions.
iOS deriva de Mac OS X , que aquest a la vegada està basat en Darwin BSD , i per tant és un sistema operatiu Unix .
iOS disposa de quatre capes d’abstracció: la capa del nucli del sistema operatiu, la capa de “ Core Services ”, la capa de “ Media ” i la capa de “ Cocoa Touch ”.
Figura 10 Capes que formen iOS
18
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
Cocoa Touch
“Cocoa Touch es el framework de programació que permet la interacció de l’usuari en iOS. Utilitzant tecnologia derivada de Cocoa i el bonic escriptori de Mac, Cocoa Touch i la interfície de iOS van ser completament redissenyades per al multi tàctil. Botons, llistes de taules, transicions de planes, i gestos a l’iPhone són únic, i tot aquest poder de la UI està disponible a desenvolupadors a través del framework Cocoa Touch.”
“Construït sobre el paradigma Model-Vista-Controlador, Cocoa Touch proporciona una base sòlida per a la creació de l'estat de l’art de les aplicacions. Quan es combina amb l'eina de desenvolupament Interface Builder, és a la vegada fàcil i divertit utilitzar el drag-and-drop per dissenyar la següent gran aplicació de iOS.” [5]
Figura 11 Cocoa Touch
Cocoa Touch es una API per a la creació de programes per a l’ iPad , l’ iPhone i l’ iPod Touch , que proporciona una capa d’abstracció al sistema operatiu iOS .
Aquesta API es basa en un conjunt d’eines que estan incloses en el SDK de iOS .
19
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
2.1.2 Dispositius amb iOS
iPod Touch
A l’any 2001, Apple va llençar el que seria el reproductor de música més popular que ha existit, l’ iPod . Posteriorment i al llarg dels anys, iPod a passat a ser una línea de reproductors mp3, que està formada per diversos dispositius on cadascun intenta cobrir un target concret. El 2007 es va presentar el iPod Touch , el primer iPod amb iOS que inclou navegador web i gestor de correu i que permet connectar-se a Internet, a l’iTunes Store i l’App Store mitjançant una connexió Wi-Fi. A diferencia dels demés iPods , aquest és multi tàctil.
Figura 12 iPod Touch de 3ª generació
iPhone
Apple va presentar l’any 2007 l’ iPhone . Un smartphone amb pantalla tàctil que ha revolucionat per complert el món de la telefonia mòbil. Al igual que el iPod Touch , l’ iPhone també corre el sistema operatiu iOS i posseeix gairebé totes les funcionalitats del primer, però sumant- l’hi el concepte de telèfon mòbil. Simplificant molt, es podria dir que un iPhone és la suma d’un mòbil i un iPod Touch . Figura 13 iPhone 4
20
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell iPad
L’ iPad és la tableta que va llençar Apple a l’any 2010. Aquest dispositiu porta una adaptació de iOS que aprofita el major tamany respecte l’ iPhone i l’ iPod Touch i afavoreix les funcionalitats per a aplicacions de lectura de llibres, còmics , revistes, navegació web i gestió de correu electrònic . Igual que el iPod Touch i el iPhone també pot connectar-se a Internet a través d’una connexió Wi-Fi i, com el iPhone , alguns models preparats tenen suport per a xarxes 3G de telefonia mòbil , però aqu esta funcionalitat només està disponible per a connectar-se a Internet i no Figura 14 iPad de 3ª generació per trucar o enviar sms.
Apple TV
Apple TV es el receptor digital multimèdia d’ Apple . Principalment, està pensat per a reproduir contingut al nostre televisor des d’un ordinador a través del programa iTunes.
Figura 15 Apple TV de 2010
21
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
2.2 XCODE, OBJECTIVE-C I COCOS2D
2.2.1 Xcode
Xcode es l’entorn de desenvolupament d’ Apple . Aquest treballa conjuntament amb Interface Builder, una herència de NeXT, una eina gràfica per a la creació de interfícies d’usuari.
Xcode inclou la col·lecció de compiladors del projecte GNU, i pot compilar codi C, C++ , Objective-C, Objective-C++ , Java i AppleScript mitjançant un gran ventall de models de programació.
2.2.2 Objective-C
Objective-C es un llenguatge de programació orientat a objectes creat com un superconjunt de C per a que implementés un model d’objectes semblant al Smalltalk . Originalment va ser creat per Brad Cox i la corporació StepStone al 1980. Vuit anys després va ser adoptat com a llenguatge de programació de NEXTSTEP i al 1992 va ser alliberat sota la llicencia GPL per al compilador GCC . Actualment s’utilitza com a llenguatge principal de programació per Mac OS X , iOS i GNUstep .
Programació amb Objective-C
Com tot llenguatge orientat a objectes, Objective-C es construeix al voltant d’objectes que tenen una sèrie de dades i mètodes que treballen amb aquestes dades.
Objective-C disposa d’un tipus d’objecte per definir variables sense tenir que especificar cap classe en particular de l’objecte. Aquest tipus genèric és “id” i serveix per definir qualsevol objecte independentment de la seva classe.
22
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
id myObject; //Definició d’un objecte
El model de programació orientada a objectes de Objective-C difereix una mica respecte al de C++ . Mentre que en el primer parlem de invocar mètodes, Objective-C es basa en enviar missatges a instancies d’objectes. És a dir, nosaltres no cridem un mètode o funció, li enviem un missatge a un objecte i aquest s’encarrega de interpretar- lo. D’aquesta manera, si un objecte no respon un missatge perquè no té implementat un mètode, aquest l’ignora i retorna un punter nul i així no es produirà un error en temps d’execució. El C++ , no obstant, ens obliga a implementar tots els mètodes, ja que si fem una crida a una funció d’un objecte i aquesta no existeix, ens trobaríem amb un error durant l’execució.
Per a demanar-li a un objecte que “realitzi” una funció seguiríem aquesta estructura:
[objecte_receptor missatge:paràmetres]
Per exemple, per cridar el mètode display del objecte myRectangle o assignar-li una amplada escriuríem:
[myRectangle display];
[myRectangle setWidth:100.0];
Tenint en compte que un objecte es defineix com una instancia d’una classe, en Objective-C es defineixen els objectes mitjançant la definició de la seva classe. Es declaren les variables de instancia que formen la classe i es defineixen els mètodes que els objectes de la classe utilitzaran.
23
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
Cada nova classe que es defineix es basa en una altre classe de la que hereta els mètodes i les variables de instancia. La nova classe afegeix o modifica el que hereta, per lo que no és necessari duplicar el codi heretat.
L’herència enllaça totes les classes en un arbre jeràrquic amb una única classe arrel, que normalment és la classe NSObject .
Figura 16 Arbre jeràrquic d’algunes classes
Una definició de classe conté la informació que forma la classe:
- El nom de la classe i de la seva superclasse
- Les variables que formen la classe
- La declaració dels mètodes, els paràmetres que reben i els que retornen
- La implementació de les funcions
Un exemple de classe seria:
@interface NomClasse : NomSuperClasse { //aquí es defineixen les variables }
24
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
+mètodeA; +(tipus_paràmetre_retorn)mètodeB:(tipus_paràmetre)nom_paràmetre; -(tipus_paràmetre_retorn)instancia_mètodeA:(tipus_paràmetre)nom_paràmetre; @end
Veiem que els mètodes tenen un símbol al principi que s’utilitza per a diferenciar si les funcions són mètodes de classe (els que tenen un “+”) o mètodes de instancia (amb el símbol “-”).
A la interfície només declarem la definició de la classe, en un arxiu capçalera amb extensió .h; per lo que la implementació dels mètodes la realitzem en un altre fitxer amb l’extensió .m.
Si seguim amb l’exemple anterior, quedaria així:
@implementation NomClasse +mètodeA { //implementació de la funció }
-(tipus_paràmetre_retorn)instancia_mètodeA:(tipus_paràmetre)nom_paràmetre { //implementació de la funció } @end
Per crear una nova instancia d’una classe, per exemple de la classe Rectangle , tenim que demanar dinàmicament memòria:
25
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
id myRectangle; myRectangle = [Rectangle alloc];
Si volem crear un nou objecte i a la vegada cridar al mètode init per a que ens retorni una variable ja inicialitzada, faríem:
myRectangle = [[Rectangle alloc] init];
També podem utilitzar el nom d’una classe en comptes del “id” que em comentat anteriorment, per designar el tipus d’un objecte.
Rectangle *myRectangle;
26
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
2.2.3 Què és Cocos2D?
Existeixen diverses opcions per al desenvolupament d’aplicacions i jocs per a iOS , les més populars són UIKit i OpenGL ES . Aquesta última és la que ofereix un millor rendiment, però requereix de molt més temps de implementació. Aquí és on entra en escena Cocos2D , un framework que simplifica molt la programació amb el component OpenGL ES .
Figura 17 Logotip de Cocos2D
Com hem dit, Cocos2D és un framework per al desenvolupament de jocs i aplicacions amb un alt contingut interactiu. Cocos2D per iPhone està basat en Cocos2D , però implementa Objective-C en comptes de Python , com a llenguatge de programació.
Algunes característiques de Cocos2D són:
- Integració amb motors de física com Box2D i Chipmunk .
- Control de escenes i efectes de transicions.
- Compatibilitat amb events Touch i l’acceleròmetre.
- Textures PVRTC de 2-bit I 4-bit, textures RGBA de 16 bits I 32 bits.
- Està basat en OpenGL ES 1.1
27
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
2.3 FLASH, ACTIONSCRIPT 3 I STARLING
2.3.1 Flash
És un entorn de desenvolupament de creació i manipulació de gràfics vectorials amb possibilitats de programació en un llenguatge anomenat ActionScript . Flash és un programa d’animació que treballa sobre fotogrames i està destinat a la producció i distribució de continguts interactius per a diferents usuaris sense importar la plataforma. S’utilitza sobretot per animacions publicitàries, reproducció de vídeos i altres continguts interactius que trobem en la majoria de planes web del món.
Està actualment desenvolupat i comercialitzat per Adobe Systems Incorporated i forma part de la família Adobe Creative Suit .
2.3.2 ActionScript 3
ActionScript 3 és la darrera i més estesa versió del llenguatge de programació de la plataforma Adobe Flash . Originalment, el llenguatge ActionScript , va ser concebut de cara a que els desenvolupadors programessin d’una forma més interactiva. Això és degut a que, al ser Flash un entorn de desenvolupament destinat a crear, sobretot, animacions; aquest anava més dirigit a creatius que a programadors i van idear un llenguatge directe per a que persones amb pocs coneixements de programació, poguessin realitzar peces interactives.
El llenguatge, en la seva evolució cap a ActionScript 3 , s’ha anat convertint en un llenguatge de programació més orientat a objectes a l’ajustar-se més a l’estàndard ECMA-262.
28
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
Programació amb ActionScript 3
En ActionScript 3 , cada objecte es defineix mitjançant una classe. Les definicions de classe poden incloure variables i constants, que contenen valors de dades i mètodes, que són funcions que encapsulen el comportament associat a la classe. Els valors guardats poden ser simples, números, cadenes o booleans; o altres objectes.
Totes les classes, tan les incorporades com les definides per l’usuari, deriven de la classe Object . Però això no vol dir que sigui el tipus de dades predeterminat. Existeix el concepte de variable sense tipus. Un exemple de variable tipus Object i variable sense tipus seria:
var myObj:Object; //variable tipus Object
var myVar:*; //variable sense tipus var myVar; //variable sense tipus
En ActionScript 3 tenim el concepte de paquet. Un paquet és una col·lecció de classes que podem organitzar com carpetes, per lo que les classes estan definides dintre de paquets. Un possible exemple d’estructura de classe en AS3 seria:
package { public class NomClasse { private var variable1:Tipus_Variable; //variable privada public var variable2:Tipus_Variable; //variable publica
public function NomClasse() { //Constructor de la classe }
private function metodeA():Tipus_Variable_Retorn { //Mètode privat }
29
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
} }
Com veiem a l’exemple anterior, les variables poden ser públiques o privades. Les públiques són accessibles des de l’exterior, és a dir, una instància d’aquesta classe podria accedir directament al valor de la variable. Les variables privades, en canvi, només són accessibles per la pròpia classe, per lo que si es volgués accedir al valor d’una variable privada des de fora de la classe, s’hauria de fer a través de la implementació d’una funció “get” que retornés a la classe externa el valor de la variable esmentada.
El concepte de públic i privat també s’aplica als mètodes de la classe, per lo que el tractament que tindrem amb les funcions serà igual. Un mètode públic és accessible des de la pròpia classe i des de una instància de la classe que conté la funció. Mentre que un mètode privat només pot ser cridat dins de la seva pròpia classe.
Per crear una instància d’una classe s’ha d’utilitzar l’operador “new”. Per exemple, per crear una instància de la classe Rectangle escriuríem:
myRectangle = new Rectangle();
30
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
2.3.3 Què és Starling?
Es tracta d'un framework de 2D en ActionScript 3 desenvolupat en la part superior de l'API de Stage3D . Starling està pensat principalment per al desenvolupament de jocs, però podria ser utilitzat per a molts altres tipus de projectes. Starling permet escriure ràpidament aplicacions acceler ades per GPU sense haver de tocar les APIs de baix nivell Figura 18 Logotip de Starling Framework Stage3D .
El framework Starling està creat per Gamua , els mateixos que van desenvolupar Sparrow , una API que acosta la programació per iOS amb Objective-C als programadors de Flash , ja que utilitza una semàntica molt similar. Així que és pot dir que Starling és un port de Sparrow a Flash .
És relativament senzill treballar amb Starling , ja que segueix la majoria dels dogmes d' ActionScript i abstreu la complexitat de les APIs de baix nivell de Stage3D . En lloc de tractar amb conceptes com buffer de vèrtexs, les matrius de perspectiva o els programes de shader, podem utilitzar conceptes molt més familiars per un programador de Flash , com una Display List, un model d'events, MovieClip, Sprite o TextField.
Figura 19 Rovio va desenvolupar la versió d'Angry Birds per a Facebook amb el framework Starling
31
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
2.4 MOTORS DE FÍSIQUES: BOX2D I NAPE
2.4.1 Box2D
Box2D és una llibreria de codi lliure que implementa un motor de físiques en 2D. Aquesta llibreria originalment està programada en C++, però s’han fet ports de cara a poder ser utilitzada per altres llenguatges. Un d’aquests ports és Box2DFlashAS3 per ActionScript 3 .
Figura 20 Simulador del motor de físiques Box2D
Com que Box2D està escrita en C++, és fàcilment importable a la plataforma Xcode per a utilitzar-la en un projecte en Objective-C.
32
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
2.4.2 Nape
Nape també és un motor de físiques en 2D desenvolupat en el llenguatge de programació d’alt nivell multi plataforma Haxe, i que està disponible per a la seva utilització en projectes en ActionScript 3 a través d’unes llibreries.
Figura 21 Exemple que utilitza Nape
33
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
3 FONAMENTS PRÀCTICS
3.1 XCODE 4.3.3
El IDE utilitzat al llarg d’aquest projecte per a desenvolupar una aplicació per iOS amb l’entorn oficial d’ Apple , és la versió 4.3.3 de Xcode , el kit de desenvolupament que incorpora totes les eines necessàries per fer un programa.
Respecte a versions anteriors, cal destacar que a partir de la versió 4 de Xcode , s’han unificat funcionalitats i eines. Fins ara, la part d’edició de codi i la de creació de la interfícies d’usuari es feien en programes separats, però amb Xcode 4 van integrar Xcode i Interface Builder i, d’aquesta manera el desenvolupador pot escriure codi a la vegada que edita la interfície, tot des de la mateixa finestra. També remarcar q ue ara inclou un subversion integrat amb el que podem comparar els arxius amb versions anteriors d’aquests per a possibles correccions.
Figura 22 Pantalla inicial de Xcode 4.3.3
34
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
Figura 23 Entorn de treball de Xcode, amb la jerarquia del projecte a l’esquerra de la finestra
Figura 24 Complement de Xcode, Organizer. On trobem els projectes compilats
35
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
3.2 FLASHDEVELOP
Figura 25 Logotip del IDE FlashDevelop
L’altre entorn de desenvolupament utilitzat al llarg del projecte és FlashDevelop. El qual permet construir aplicacions en ActionScript 3 i MXML gracies al SDK gratuït de Adobe Flex . També dóna suport a la creació de projectes en ActionScript 2 , PHP , Neko i JavaScript ; i reconeix llenguatges com XML , HMTL o CSS .
Figura 26 Pantalla inicial de FlashDevelop, on escollim el tipus de projecte que es vol desenvolupar
36
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
FlashDevelop permet desenvolupar gairebé qualsevol projecte que poguéssim fer amb Adobe Flash Builder , per lo que també podem construir aplicacions per iOS i Android.
Figura 27 Entorn de desenvolupament de FlashDevelop. A la dreta de la finestra trobem la jerarquia del projecte
Figura 28 Pantalla de propietats del projecte
37
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
3.3 APLICACIÓ DEMO AMB FÍSIQUES
Per a fer les primeres proves de rendiment i desenvolupament d’una mateixa aplicació feta amb Xcode i Flash , varem començar per triar un projecte que utilitzés un motor de físiques per a veure quins resultats obteníem en una aplicació d’aquest àmbit. Per això, hem desenvolupat un simulador en el que trobem una pilota de tennis amb les condicions ideals per a que simuli el seu comportament a la realitat.
3.3.1 Versió Objective-C, amb Cocos2D i Box2D
La dificultat inicial que ens varem trobar al començar una versió amb Xcode del simulador de la pilota, va ser el descobrir i investigar el funcionament de la plataforma Xcode per a crear un projecte i compilar.
El IDE és força intuïtiu i té elements comuns d’altres entorns de desenvolupament. El llenguatge Objective-C tampoc va comportar gran dificultat si tenim present i coneixem la programació orientada a objectes i el llenguatge C i C++ .
El més complexa va ser editar les propietats del projecte ja que hi ha una gran quantitat de paràmetres que intervenen, com escollir per a quina versió de iOS serà la aplicació, orientació de l’aplicació (retrat o apaïsada), opcions de la instal·lació en els dispositius, permisos com a desenvolupador d’ Apple , etc...
38
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
Figura 29 Versió amb Xcode de la demo de físiques en un instant de temps
El que veurem ara, és el mètode que ens crea l’escena on es carrega l’aplicació:
+ ( id ) scene { CCScene *scene = [ CCScene node ]; HelloWorldLayer *layer = [ HelloWorldLayer node ]; [scene addChild :layer]; return scene; }
Com podem veure, primer de tot creem una instancia de la classe CCScene , és a dir, que creem l’escena on passarà tot. Seguidament creem la capa corresponent al contingut de l’app i vinculem aquesta última amb l’escena, situant la capa dintre de l’escena.
39
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
3.3.2 Versió ActionScript 3, amb Starling i Nape
Per a la versió creada amb el FlashDevelop no varem tindre tanta dificultat per començar a programar, ja que aquesta és una eina que ens resulta més familiar i de igual manera amb el llenguatge, ActionScript 3 .
Nape i Starling eren conceptes nous amb els que no havíem treballat abans, però per la part de Nape , no va portar massa complicacions ja que no es diferencia molt de les funcionalitats d’altres motors de físiques amb els que ja havíem treballat. Starling , en comptes, va portar una miqueta més de temps, perquè, tot i ser força senzill i compartir idees molt pròpies de l’ ActionScript 3 , altres són més noves, com la utilització del concepte de “Pantalles”, per a cada una de les “estacions” de la app.
La compilació i exportació a un arxiu IPA va ser molt fàcil. Només calia especificar correctament la ruta del SDK de Flex, editar les propietats del projecte i instanciar 2 fitxers que validaven que teníem permisos per crear una aplicació per iOS .
Figura 30 Pantalla de la demo feta amb FlashDevelop
40
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
A continuació veurem algunes línies de codi del projecte en AS3 . Concretament el mètode per crear, mitjançant Starling , la “pantalla” on està implementada la demo. Aquesta “pantalla” és la classe Screen , la qual passem al constructor de Starling juntament amb la instancia de l’escenari.
public function Main(): void { this.stage.scaleMode = StageScaleMode.NO_SCALE ; this.stage.align = StageAlign.TOP_LEFT ;
Starling .multitouchEnabled = true ;
this ._starling = new Starling (Screen , this.stage ); this ._starling.showStats = true ; this ._starling.start(); }
Figura 31 Versió amb tecnologia Flash de la demo de físiques en un instant de temps
41
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
3.4 APLICACIÓ JOC AMB ALTA CARREGA D’ELEMENTS GRÀFICS
Per a fer una prova d'una tipologia diferent i obtindre resultats d'una aplicació que requerís d'una gran potència gràfica, varem escollir realitzar un joc de naus amb diversos elements característics dels jocs i que exigissin un cert rendiment i que, d'aquesta manera poguéssim extreure un anàlisi de cara a resoldre quina tecnologia ens convé més al desenvolupar una aplicació que comparteixi aquestes característiques.
Alguns d'aquest elements gràfics són: animacions repetitives, animacions asíncrones i l'efecte Parallax .
El Parallax scrolling o Scrolling Background és una tècnica que ve del món dels videojocs. Consisteix en simular profunditat mitjançant la superposició de varies capes que es mouen a diferents velocitats. En el cas del nostre projecte, podem veure que hem aplicat aquesta tècnica amb un moviment horitzontal i continu del fons de la pantalla.
També cal destacar que, hem realitzat una petita animació que veiem present en la nau del joc en forma del foc que surt dels coets. Aquesta animació es fa a partir de tres fotogrames diferents que anem alternant de forma cíclica.
Hi han dos elements gràfics més que no responen a cap dels dos casos anteriors i que es carreguen i animen de forma independent. Aquests són: els asteroides i els dispars de la nau.
En el cas dels dispars, aquests es generen amb la interacció de l'usuari i se'ls aplica una animació per a que es moguin fins a l'altre extrem de la pantalla, a no ser que topin contra un asteroide que llavors desapareixeran tan el dispar com l'asteroide.
42
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
Per altre banda, els asteroides es carreguen de manera aleatòria a l'escenari en temps i posició i, de igual manera que e ls dispars, se'ls aplica una animació però en direcció contraria als dispars, és a dir, surten del final de la pantalla en direcció a la posició 'x' de la nau. A cada asteroide se li aplica una velocitat diferent mitjançant la duració de l'animació.
3.4.1 Versió Objective-C amb Cocos2D
Tot i la desconeixença inicial amb el llenguatge, no va ser massa complicat aprendre a col·locar elements a l’escenari, importar imatges o altres elements gràfics. Gracies al framework Cocos2D , per crear la tècnica Parallax només varen ser necessàries unes poques línies de codi, en les que creem un contenidor on col·locarem totes les capes que formen el nostre fons amb profunditat i a cada capa, li podrem passar la velocitat i la posició inicial com a paràmetres. Posteriorment, programant una funció update que es crida a cada “frame” actualitzarem la posició del nostre fons.
Figura 32 Pantalla del joc fet amb Xcode
43
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
Figura 33 Versió amb Xcode del joc en un instant de temps
Figura 34 Versió amb Xcode del joc en un altre moment de l'execució
44
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
3.4.2 Versió ActionScript 3 amb Starling
Fer un equivalent en ActionScript 3 tampoc va ser molt complicat, però és cert que no està tan optimitzat per a aquest tipus d’aplicacions com Cocos2D . Es pot produir el mateix efecte, però es necessiten més línies de codi i el funcionament és el típic que tindria qualsevol altre animació que programéssim. És a dir, mentre que en la versió en Objective-C tenim una classe per Parallax amb tots els paràmetres que necessitem, en aquesta versió tindríem que fer nosaltres una classe pròpia que faci tot això i programar tot el procés d’actualització del fons del joc.
Tot i això, utilitzar el framework Starling és bastant senzill i el que faci que puguem disfrutar de l’acceleració gràfica i renderitzar directament des de la GPU optimitzant el rendiment de la nostra aplicació, compensa alguns contratemps que ens puguem trobar al adaptar-nos a les seves referències.
Figura 35 Pantalla del joc fet amb FlashDevelop
45
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
Figura 36 Versió amb FlashDevelop del joc
Figura 37 Versió amb Flash del joc en un altre instant de temps
46
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
4 RESULTATS
Després del que hem repassat en els punts anterior i veure el resultat de les aplicacions en un dispositiu iOS , hem analitzat els resultats i extret una sèrie de conclusions força interessants.
Exceptuant el que podem extreure en el procés de desenvolupament, ja sigui per les diferències en quan a la programació o al procés d’exportar el projecte en un arxiu IPA per instal·lar-l’hi al dispositiu. La nostra impressió inicial va ser que l’aplicació resultant funcionava gairebé igual de fluida en qualsevol de les dues tecnologies en els quatre exemples desenvolupats.
No obstant, després d’estudiar una sèrie de paràmetres, hem vist que realment el rendiment no és el mateix.
Els paràmetres analitzats són el número de Fotogrames Per Segon (FPS) en els que treballava l’aplicació per a mostrar un rendiment adequat i el consum de bateria que requeria l’aplicació.
Per a realitzar aquestes proves hem utilitzat un iPad de 3ª generació (col·loquialment anomenat New iPad ), que porta el processador Apple A5X amb doble nucli a la CPU i quàdruple nucli a la GPU, així com 1 GB de memòria RAM. El nostre model en concret disposa de 16 GB de capacitat i només connexió Wi-Fi.
47
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
Analitzant els FPS en una demo de físiques
Figura 38 Captura de la demo de físiques
Per a extreure un estudi dels FPS hem estat realitzant un seguiment d’aquest valor en diferents instants de temps. Hem capturat el valor que tenia a cada minut durant els primers 5 minuts i després el valor al cap de 10 minuts d’ha ver obert l’aplicació.
48
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
APLICACIÓ DEMO DE FÍSIQUES 60,2
60
59,8
59,6
59,4
59,2
FPS (FotogramesFPS persegon) 59
58,8 1 min 2 min 3 min 4 min 5 min 10 min FLASH 60 59,9 60 60 60 59,2 XCODE 60 60 59,9 60 60 60
Figura 39 Gràfic de l'evolució dels FPS a les 2 versions durant els 10 primers minuts
Com podem veure a la gràfica i a la taula de resultats, el número de fotogrames per segon no varia gairebé gens entre la versió Flash i la versió realitzada amb Xcode . I es manté estable sense gaires variacions entre els valors obtinguts a cada fracció de temps i sempre molt a prop dels 60 fps (la velocitat en rendiment ideal).
Cal destacar que, les demos que hem construït per a veure quins resultats en trobaríem amb una aplicació en la que el seu funcionament es centra sobretot en el que t’ofereix un motor de físiques, no tenien una carrega molt elevada d’elements gràfics, per lo que també influeix en que el rendiment de les dos aplicacions diferents sigui pràcticament igual. Per això, en aquest cas en el que tinguéssim pocs elements en la pantalla, no tindríem que decantar-nos més per una tecnologia o altre en funció del rendiment que pot tindre el producte final, sinó que dependrà més d’altres factors, com el temps del que es disposa per a realitzar el producte o el llenguatge en el que ens sentim més a gust o ens resulta més familiar. Si no disposem de coneixements de Objective-C i, en canvi, tenim cert domini de ActionScript 3 , llavors seria adequat escollir la tecnologia Flash amb el framework Starling per a desenvolupar aquesta app, ja que podríem
49
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell acabar-la amb un termini de temps més ajustat i el resultat seria el mateix que si l’haguéssim fet amb el llenguatge natiu de iOS .
Analitzant el consum d’energia en una demo de físiques
Ja que volíem estudiar diversos factors que poden ser decisiu per a escollir el millor camí per a desenvolupar una aplicació per iOS , varem analitzar un que, personalment, creiem de vital importància, el consum de bateria que té el dispositiu amb la nostra aplicació oberta.
Per això, varem calcular el temps en segons que trigava el dispositiu en perdre un 1% de bateria amb l’aplicació en funcionament.
APLICACIÓ DEMO DE FÍSIQUES
450 442,6 440 430 420 410 400 390 381 380 370 360 350 Segons en consumir un 1% de bateria del dispositiu
FLASH XCODE
Figura 40 Gràfic del temps que triga l'app a consumir un 1% de bateria
Tot i que en el punt anterior, on analitzàvem el rendiment de l’aplicació en funció dels FPS i extrèiem que no era tan important escollir una tecnologia o una altre en funció del
50
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell rendiment, no veiem diferencies entre les versions de la nostra demo, després d’analitzar el consum del dispositiu ja no queda tan empatat el resultat.
La versió feta amb Flash té un consum més elevat de la bateria respecte a la versió realitzada amb Xcode .
La versió Flash amb el framework Starling ha trigat poc més de 6 minuts en reduir la bateria del dispositiu en un 1% menys del que tenia a l’obrir l’aplicació.
La versió Xcode amb Cocos2D a consumit un 1% de la bateria del iPad en gairebé 7 minuts i mig.
Per tan, també seria important tenir en compte aquests valors a l’hora de decidir quin camí seguir, ja que encara que haguem aconsellat inicialment que un programador Flash es decanti per la seva tecnologia a l’hora de construir una aplicació d’aquest tipus. També cal pensar si el benefici que tenim en quan a velocitat de desenvolupament ens compensa la “qualitat” del producte final que oferirem a l’usuari, que també passa pel consum de la nostra app.
51
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
Analitzant els FPS en un joc
Figura 41 Captura del joc en funcionament
Igual que en el primer model d’aplicació, per analitzar el rendiment del joc, hem estat observant els FPS que ens retornava el dispositiu en diferents fraccions de temps. Hem anotat el valor que tenia a cada minut durant els primers 5 minuts i per últim el valor al cap de 10 minuts d’haver obert el joc.
52
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
APLICACIÓ JOC 70
60
50
40
30
20
FPS (FotogramesFPS persegon) 10
0 1 min 2 min 3 min 4 min 5 min 10 min FLASH 27,6 46,6 31 48,4 44,6 58,5 XCODE 60 60 60 60 60 60
Figura 42 Gràfic comparatiu dels FPS durant 10 minuts de les dos versions
Després d’observar la gràfica, veiem com en aquest cas no es repeteix la situació que ens hem trobat en l’aplicació anterior. Clarament descobrim una gran diferencia entre la versió realitzada amb Xcode i la feta amb Flash . A la primera, el número de FPS és molt estable i no hi ha variància en funció del temps. A més, que aquest valor es manté alt, col·locant-se en els 60 fps desitjats. En la versió desenvolupada amb Flash , en canvi, veiem grans canvis en funció del temps, el número de fotogrames per segon fluctua molt i no és gens estable. Tot i que en alguns moments podem observar com el valor s’acosta molt als 60 fps, la mitja que hem obtingut en les 6 mostres és de 42,78 fps. Un valor lluny dels 60 fps i que ens mostra com el dispositiu té que treballar més per a aconseguir que els resultats visuals siguin semblants a la mateixa aplicació feta amb Xcode .
Ja que els resultats obtinguts amb el joc difereixen molt dels del model anterior, aquí ja cobren més importància els factors aquí estudiats per a decidir quina tecnologia escollir. Tot i que tinguéssim més domini de Flash que de Xcode , seria adequat decantar-nos per realitzar l’aplicació amb aquesta darrera tecnologia. El resultats ens
53
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell indiquen com el rendiment del joc és molt millor amb Xcode que amb Flash i, per tant, en el cas de que un usuari estigues molts minuts seguits amb l’aplicació oberta, la versió feta amb Xcode “castigaria” menys el dispositiu. I també, si volguéssim ampliar la nostra aplicació requerint de més potència, amb la versió de Xcode disposaríem d’un marge més ampli que amb la versió feta amb Flash .
Analitzant el consum d’energia en un joc
De nou, hem realitzat la mateixa prova a la nostra aplicació per apuntar el consum de bateria que provoca el tindre el nostre joc obert en el dispositiu. Hem cronometrat el temps que trigava el iPad en baixar un 1% de bateria respecte a la quantitat d’aquesta al iniciar l’aplicació.
APLICACIÓ JOC
334 332,7 332 330 328 326
324 322,4 322 320 318 316 Segons en consumir un 1% de bateria del dispositiu
FLASH XCODE
Figura 43 Gràfic comparatiu del consum del joc en funció del temps
Altra vegada, la versió feta amb Xcode té un consum de bateria més reduït que la versió feta amb la tecnologia alternativa, Flash . Però en aquest cas, la diferencia no és tan gran.
54
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
La versió del joc desenvolupada amb Xcode i amb Cocos2D ha trigat 5 minuts i mig en fer que la bateria del iPad baixes un 1%.
Mentre que la versió realitzada amb Flash i el framework Starling ha trigat 5 minuts i uns 20 segons en reduir la bateria del dispositiu.
Després d’analitzar tots aquests resultats és fàcil veure quina és la millor opció a escollir per a realitzar un joc, almenys d’aquesta tipologia on hi ha molts elements gràfics en pantalla a la vegada i força interacció de l’usuari, i la resposta és Xcode .
Tan els resultats de la prova de rendiment com els del consum d’energia afavoreixen clarament a l’aplicació desenvolupada amb el llenguatge natiu de iOS .
55
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
5 CONCLUSIONS I LÍNIES DE FUTUR
5.1 CONCLUSIONS
Tot i que el rendiment que ens ofereix una aplicació desenvolupada amb la tecnologia Starling és molt més que acceptable i no té res que envejar a una aplicació construïda amb Cocos2D , recomanaríem sempre desenvolupar qualsevol tipus d’aplicació amb el llenguatge propi de iOS amb la plataforma Xcode . Ja que d’aquesta manera ens assegurarem de la màxima compatibilitat amb els dispositius i el rendiment sempre serà l’òptim.
No obstant, si es donés el cas de que es necessita construir una aplicació amb un timming molt ajustat i els programadors encarregats d’escriure l’app els resulta més familiar el llenguatge ActionScript 3 o bé són experts en Flash , al ser Xcode i Objective- C un llenguatge poc conegut entre la gran majoria de desenvolupadors, llavors aconsellaríem realitzar l’aplicació en Flash . Però només en el cas de que es produís aquesta situació, ja que com hem remarcat anteriorment i en el punt en el que analitzàvem els resultats, el millor camí de cara a oferir un producte amb la millor qualitat en tots els aspectes és realitzant la app amb la tecnologia Xcode .
56
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
5.2 LÍNIES DE FUTUR
De cara a ampliar aquest projecte, proposaríem ampliar el número d’aplicacions de diferents tipus a desenvolupar en paral·lel amb les dues tecnologies i, fins i tot, seria més que interessant escollir una tercera alternativa amb la que comparar els resultats, d’aquesta manera potser podríem obtindre uns resultats diferents als que ens han portat a les nostres conclusions.
57
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
BIBLIOGRAFIA I FONTS DOCUMENTALS
REFERÈNCIES
[1] Web oficial del SDK Titanium http://www.appcelerator.com/platform/titanium-sdk
[Setembre 2012]
[2] Web oficial del SDK Corona http://www.coronalabs.com/products/corona-sdk/
[Setembre 2012]
[3] Web oficial de PhoneGap http://phonegap.com/about
[Setembre 2012]
[4] Apartat sobre iOS a la web de desenvolupadors d’Apple https://developer.apple.com/technologies/ios/
[Agost 2012]
[5] Apartat sobre Cocoa Touch a la web de desenvolupadors d’Apple https://developer.apple.com/technologies/ios/
[Agost 2012]
LLIBRES
CALA, Javier. iOS5 . Maestros del web: Espanya, 2011.
IMBERT, Thibault. Introducing Starling . O'Reilly: Estats Units d’Amèrica, 2012.
58
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
WEBS
Applesfera – Blog sobre Apple http://www.applesfera.com/
[Juliol 2012]
Web oficial de FlashDevelop http://www.flashdevelop.org/
[Juny 2012]
Apartat sobre Xcode a la web de desenvolupadors d’Apple https://developer.apple.com/xcode/index.php
[Setembre 2012]
Documentació de iOS a la web de desenvolupadors d’Apple http://developer.apple.com/library/IOs/#documentation/Miscellaneous/Conceptual/iPhon eOSTechOverview/Introduction/Introduction.html
[Setembre 2012]
Web oficial del AppleTV http://www.apple.com/es/appletv/what-is/
[Setembre 2012]
Especificacions del iPad a la web oficial del producte http://www.apple.com/es/ipad/specs/
[Setembre 2012]
Web oficial de iOS http://www.apple.com/es/ios/what-is/
[Maig 2012]
59
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
Documentació del framework Starling http://wiki.starling-framework.org/
[Juliol 2012]
Web oficial de Starling Framework http://gamua.com/starling/
[Juliol 2012]
One Game, Many Frameworks http://www.rengelbert.com/tutorial.php?id=161
[Agost 2012]
Web oficial de MonoTouch http://xamarin.com/monotouch
[Setembre 2012]
Documentació de Rhodes http://docs.rhomobile.com/rhostudio.tutorial
[Setembre 2012]
Documentació sobre Objective-C http://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/ObjectiveC/ Chapters/ocObjectsClasses.html#//apple_ref/doc/uid/TP30001163-CH11-SW1
[Agost 2012]
Documentació sobre ActionScript 3 http://help.adobe.com/es_ES/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf35 1e63e3d118a9b90204-7ec7.html
[Setembre 2012]
60
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
ÍNDEX DE FIGURES
Figura 1 iPhone 3G de Juliol del 2008 ...... 1
Figura 2 Concepte en el que es basa el SDK Titanium ...... 3
Figura 3 App de la cadena americana NBC ...... 4
Figura 4 App feta amb Corona per Chevrolet ...... 6
Figura 5 Diagrama de com funciona PhoneGap ...... 7
Figura 6 Diagrama del funcionament de PhoneGap Build ...... 8
Figura 7 App realitzada amb PhoneGap per a la cadena BBC ...... 8
Figura 8 Infinite Flight, un simulador de vol ...... 10
Figura 9 Comparativa de la pantalla principal de iOS5 i iOS6 ...... 17
Figura 10 Capes que formen iOS ...... 18
Figura 11 Cocoa Touch ...... 19
Figura 12 iPod Touch de 3ª generació ...... 20
Figura 13 iPhone 4 ...... 20
Figura 14 iPad de 3ª generació ...... 21
Figura 15 Apple TV de 2010 ...... 21
Figura 16 Arbre jeràrquic d’algunes classes ...... 24
Figura 17 Logotip de Cocos2D ...... 27
Figura 18 Logotip de Starling Framework ...... 31
Figura 19 Rovio va desenvolupar la versió d'Angry Birds per a Facebook amb el framework Starling ...... 31
Figura 20 Simulador del motor de físiques Box2D ...... 32
Figura 21 Exemple que utilitza Nape...... 33
61
IOS APP : HI HA VIDA MÉS ENLLÀ DE XCODE Albert Alvarez Castell
Figura 22 Pantalla inicial de Xcode 4.3.3 ...... 34
Figura 23 Entorn de treball de Xcode, amb la jerarquia del projecte a l’esquerra de la finestra ...... 35
Figura 24 Complement de Xcode, Organizer. On trobem els projectes compilats ...... 35
Figura 25 Logotip del IDE FlashDevelop ...... 36
Figura 26 Pantalla inicial de FlashDevelop, on escollim el tipus de projecte que es vol desenvolupar ...... 36
Figura 27 Entorn de desenvolupament de FlashDevelop. A la dreta de la finestra trobem la jerarquia del projecte ...... 37
Figura 28 Pantalla de propietats del projecte ...... 37
Figura 29 Versió amb Xcode de la demo de físiques en un instant de temps ...... 39
Figura 30 Pantalla de la demo feta amb FlashDevelop ...... 40
Figura 31 Versió amb tecnologia Flash de la demo de físiques en un instant de temps41
Figura 32 Pantalla del joc fet amb Xcode ...... 43
Figura 33 Versió amb Xcode del joc en un instant de temps ...... 44
Figura 34 Versió amb Xcode del joc en un altre moment de l'execució ...... 44
Figura 35 Pantalla del joc fet amb FlashDevelop ...... 45
Figura 36 Versió amb FlashDevelop del joc ...... 46
Figura 37 Versió amb Flash del joc en un altre instant de temps ...... 46
Figura 38 Captura de la demo de físiques ...... 48
Figura 39 Gràfic de l'evolució dels FPS a les 2 versions durant els 10 primers minuts . 49
Figura 40 Gràfic del temps que triga l'app a consumir un 1% de bateria ...... 50
Figura 41 Captura del joc en funcionament ...... 52
Figura 42 Gràfic comparatiu dels FPS durant 10 minuts de les dos versions ...... 53
Figura 43 Gràfic comparatiu del consum del joc en funció del temps ...... 54
62