[Windows Phone 8.1] La nueva CommandBar

WP8.1 LogoIntroducción

En la plataforma Windows el peso principal de las aplicaciones recae en el contenido de las mismas. Para lograr este objetivo, separamos los comandos y las acciones del contenido principal. En Windows Phone hasta ahora, la forma habitual para conseguir esto era mostrando un menu de opciones era usando el ApplicationBar, barra situada en la parte inferior de la pantalla. En Windows 8 contábamos con dos tipos de app bar, uno en la parte inferior usado para agrupar las acciones de la aplicación y otro en la parte superior utilizado habitualmente para otorgart al usuario de una experiencia de navegación avanzada.

En Windows 8.1 y en Windows Phone 8.1 se introduce un nuevo concepto llamado CommandBar, una nueva forma de crear app bars compartida y sencilla.

En este artículos vamos a ver:

  • Implementar CommandBar en aplicaciones Windows y Windows Phone
  • Gestión de iconos en los AppBarButton de la CommandBar
  • MenuFlyouts desde la CommandBar

El control CommandBar

El control CommandBar esta compartido entre Windows y Windows Phone. Nos permite crear application bars con facilidad.

<Page.BottomAppBar>
    <CommandBar>
    </CommandBar>
</Page.BottomAppBar>

NOTA: En Windows Phone sustituye al control ApplicationBar. En Windows existe también el control AppBar, la diferencia recae en el tipo de contenido que puede albergar, el CommandBar solo puede contener controles ICommandBarElement.

Sólo puede contener controles que deriven de ICommandBarElement:

AppBarButton

Cuenta con tres propiedades básicas:

  • Label: Usado para el texto que aparece debajo del botón.
  • Icon: Permite definir el icono utilizado en el botón. El icono debe ser representativo de la acción que ejecuta.
  • IsCompact: Fuerza al AppBarButton a utilizar el modo compacto. En este caso, se oculta el texto del label para reducir el tamaño y márgenes del mismo.
<AppBarButton Icon="Add" Label="Add" />

En el ejemplo anterior la propiedad Icon la rellenamos con una simple cadena que especifica el identificador del icono. La propiedad Icon es de tipo IconElement. Tenemos cuatro opciones, cuatro clases que heredan de IconElement:

  • BitmapIcon: Se utiliza una imagen para definir el icono. Lo haremos utilizando la propiedad UriSource:
<AppBarButton Label="Add">
    <AppBarButton.Icon>
        <BitmapIcon UriSource="ms-appx:///Assets/Add.png" />
    </AppBarButton.Icon>
</AppBarButton>

NOTA: Podemos utilizar una Windows Store URI como ms-appx o ms-appdata.

  • FontIcon: Se utiliza una fuente específica para definir el icono.

La clase FontIcon cuenta con dos propiedades principales. Por un lado contamos con la propiedad Glyph usada para indicar el código del carácter utilizado y por otro lado FontFamily usada para indicar la fuente.

<AppBarButton Label="Mail">
    <AppBarButton.Icon>
        <FontIcon FontFamily="Segoe UI Symbol" Glyph="" />
    </AppBarButton.Icon>
</AppBarButton>
  • PathIcon: Se utiliza un Path para definir el icono. Utilizamos la propiedad Data para indicar la figura a dibujar:
<AppBarButton Label="Path">
    <AppBarButton.Icon>
        <PathIcon Data="F1 M 20,20L 24,10L 24,24L 5,24" />
    </AppBarButton.Icon>
</AppBarButton>
  • SymbolIcon: Se utiliza la fuente Segoe UI Symbol para representar al icono. Esta opción es la que se utiliza por defecto cuando pasamos una cadena en la propiedad Icon.
<AppBarButton Icon="AllApps" Label="apps" />

SymbolIcon define una propiedad Symbol para definir el icono. Symbol es una enumeración que contiene cada uno de los iconos que podemos usar:

public enum Symbol
{
    Previous = 57600,
    Next = 57601,
    ...
}

Es muy simple de usar:

<AppBarButton Label="Calendar">
    <AppBarButton.Icon>
        <SymbolIcon Symbol="Calendar" />
    </AppBarButton.Icon>
</AppBarButton>

AppBarToggleButton

Control sumamente similar al AppBarButton, con sus mismas propiedades principales, Label, Icon e IsCompact. La diferencia principal radica en que este control cuenta con dos estados: checked y un checked.

La definición es muy similar a lo anterior:

<AppBarToggleButton                     
Label="Shuffle"                  
Checked="ShuffleAppBarButton_Checked"              
Unchecked="ShuffleAppBarButton_Unchecked">
    <AppBarToggleButton.Icon>
        <SymbolIcon Symbol="Shuffle" />
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

Podemos controlar el estado:

private void ShuffleAppBarButton_Checked(object sender, RoutedEventArgs e)
{
 
}
 
private void ShuffleAppBarButton_Unchecked(object sender, RoutedEventArgs e)
{

}

AppBarSeparator

El control AppBarSeparator es muy sencillo, dibuja una línea vertical con el objetivo de separar controles del CommandBar.

<AppBarSeparator Foreground="White" />

Continuamos profundizando en el control CommandBar. Cuenta con dos propiedades principales:

  • PrimaryCommands: Colección de comandos principales de la página. En aplicaciones Windows Store se muestran automáticamente en la parte derecha del CommandBar. En aplicaciones Windows Phone se muestran como botones del CommandBar.
  • SecondaryCommands: Colección de comandos secundarios de la página. En aplicaciones Windows Store se muestran automáticamente en la derecha del CommandBar. En aplicaciones Windows Phone se muestran como elementos de menu del CommandBar.

NOTA: Si no especificamos ninguna colección en concreto, los controles se añadirán a la colección PrimaryCommands.

<Page.BottomAppBar>
        <CommandBar Background="DarkOrange">
            <AppBarButton Icon="AllApps" Label="apps" />
            <AppBarButton Icon="Emoji" Label="emotion" />
            <AppBarSeparator Foreground="White"/>
            <AppBarButton Icon="Pin" Label="pin" />
            <AppBarButton Icon="Refresh" Label="refresh"/>
            <CommandBar.SecondaryCommands>
                <AppBarButton Icon="Help" Label="help" />
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>

MenuFlyouts. Añadir menus

En ocasiones tenemos la necesidad de contar con varios botones relacionamos profundamente en su cometido. Por ejemplo, tenemos un listado de elementos y en la CommandBar queremos permitir filtrar por:

  • Puntuación
  • Descargas

¿Añadimos dos botones a la CommandBar?. Es una opción, aunque sin duda añadir un menu que aparezca al pulsar un simple botón filtrar es una opción mejor. Veamos como sería.

Añadimos un MenuFlyout a la propiedad Flyout de un botón:

<AppBarButton Icon="AllApps" Label="apps">
     <AppBarButton.Flyout>
          <MenuFlyout>
                        
          </MenuFlyout>
     </AppBarButton.Flyout>
</AppBarButton>

Por último, añadimos elementos MenuFlyoutItem al Menu:

<AppBarButton Icon="AllApps" Label="apps">
     <AppBarButton.Flyout>
          <MenuFlyout>
               <MenuFlyoutItem Text="App01"/>
               <MenuFlyoutItem Text="App02"/>
          </MenuFlyout>
      </AppBarButton.Flyout>
</AppBarButton>

Elcomportamiento de los MenuFlyOutItem es similar al de los botones teniendo capacidad de poder hacer data binding:

<AppBarButton Icon="AllApps" Label="apps">
     <AppBarButton.Flyout>
          <MenuFlyout>
               <MenuFlyoutItem Text="App01"  Command="{Binding MenuFlyoutCommand}"/>
               <MenuFlyoutItem Text="App02"/>
          </MenuFlyout>
      </AppBarButton.Flyout>
</AppBarButton>

Podéis descargar la aplicación universal de ejemplo a continuación:

Diseño

Al utilizar el mismo código en aplicaciones universales tenemos ciertas peculiaridades en el diseño y forma de interactuar con la CommandBar dependiendo de si estamos en una aplicación de teléfono o de tableta.

Al añadir AppBarButton al CommandBar por defecto se colocan en la colección de botones PrimaryCommands. En aplicaciones Windows Store los botones de la colección PrimaryCommands se situan a la derecha mientras que los botones de la SecondaryCommands se situan en la izquierda:

CommandBar en Windows Store

CommandBar en Windows Store

Mientras que en Windows Phone, el mismo código coloca los botones de la colección SecondaryCommands como elementos de menu:

CommandBar en Windows Phone

CommandBar en Windows Phone

NOTA: El icono del botón es ocultado de manera automática.

Añ añadir MenuFlyouts a un botón de la CommandBar, el aspecto en Windows Store es el siguiente:

MenuFlyOut en Windows Store

MenuFlyOut en Windows Store

En Windows Phone, tenemos esta novedad que aparece con una animación con el siguiente aspecto:

MenuFlyOut en Windows Phone

MenuFlyOut en Windows Phone

Más información

Anuncios

CELL·SDK

Perdona, has dicho ¿cells de que?

Bien, para quien no lo conozca. CELLSDK es un framework multiplataforma ( iOS, Android y Windows Phone) que permite crear aplicaciones para dispositivos móviles de manera  rápida y sobretodo utilizando el mismo código (en lenguaje C#) para las múltiples plataformas. Ha sido desarrollado por Syderis Technologies.

Bien, bien, suena interesante, pero… ¿porqué utilizar CELLSDK?

La ventaja principal es que ganamos en productividad. Ten en cuenta que utilizamos un único código para las tres plataformas. Además esto repercute directamente en los costes de desarrollo.

Entre las características más destacadas:

  • Extensa colección de controles para crear la interfaz de usuario.
  • Soporte para sensores (acelerómetro, GPS, cámara, etc).
  • Librerías de audio.
  • Motor de físicas.
  • Animaciones.
  • Publicidad (Advertising).
  • Almacenamiento (Storage API).
  • Skins para cada plataforma.

Podéis echarle un vistazo a todas las características principales en la siguiente URL.

¿Cómo lo instalamos?

Lo primero que debemos hacer es descargar CELLSDK. Para ellos nos dirigimos a la siguiente dirección:

http://www.cellsdk.com/index.php/ES/downloadprocess

Para poder descargar el software necesario debemos estar registrado. El proceso es rápido y gratuito:

Tenemos versiones para las plataformas IOS, Android y Windows Phone. Para los entornos de desarrollo en iOS y Android necesitamos tener instalado MonoTouch y MonoDroid  aunque no debemos preocuparnos ya que los instaladores de dichas versiones nos indican los pre-requisitos necesarios y nos permiten instalarlos directamente.

Hay disponibles en la web de CELLSDK tutoriales para instalar cada una de las versiones. Podéis acceder a ellas directamente a continuación:

Una vez instalado es totalmente recomendable echarle un vistazo a la zona de documentación. Hay disponibles tutoriales básicos, videotutoriales e incluso varios proyectos de ejemplos sumamente interesantes. Está bastante bien estructurado.

Tenéis disponible dicha sección en la siguiente URL.

Podéis obtener tanto los tutoriales como los ejemplos de GitHub:

Os dejo también un resúmen (Quick Tour) en video a continuación:

Más información:

CELLSDK Blog: Blog oficial de CELLSDK.

WPControla: Podcast en español dedicado al desarrollo para Windows Phone realizado por Josué Yeray y Rafa Serna. En el tercer capítulo realizan una interesante entrevista a Jorge Canton sobre CELLSDK.

Clon de Angry Birds en cocos2d utilizando chipmunk y spacemanager

Acaban de publicar en el blog de Cocos2d para iphone un más que interesante artículo que explica paso a paso con código fuente, ejemplo descargable e incluso video del resultado final de como realizar un clon del famoso “Angry Birds“. El autor es Rob de mobile bros. LLC.

El juego está creado utilizando Cocos2d ( en su versión 0.99.5), el potente motor de físicas Chipmunk y SpaceManager (en su versión 0.0.6) que es un conjunto de clases auxiliares que nos ayudará bastante a la hora de realizar ciertas tareas con Chipmunk en Cocos2d.

Entre las características mas interesantes que se tratan en el ejemplo podemos destacar:

– Explicación de como guardar estados en el juego.

– Explosiones en Chipmunk

– Implementación de físicas (impulsos, etc)

– Preparado para Retina Display.

A continuación, os dejo un video donde podéis ver el increíble resultado final.


Os recomiendo absolutamente descargaros el código fuente para al menos echarle un vistazo. Podéis hacerlo directamente desde aquí.

El artículo completo con el código fuente del ejemplo explicado paso a paso podéis lerlo en el siguiente enlace:

http://www.cocos2d-iphone.org/archives/1214

Como utilizar acelerómetros en el simulador del iPhone

En la próxima entrada del “Curso de Cocos2d” realizaremos nuestras primeras pruebas capturando eventos tanto táctiles como por parte de los acelerómetros.

Si ya has desarrollado para iphone problemente te habrás dado cuenta que una de las limitaciones del simulador es que no cuenta con simulación para el acelerómetro. La opción utilizada normalmente es compilar el proyecto y probarlo en un dispositivo real. Claro que este proceso solo lo podrás hacer siempre y cuando cuentes con una licencia de desarrollador.

Existen varias opciones para solucionar este pequeño inconveniente pero sin duda nos vamos a quedar con AccSim.

¿Por qué?

Es totalmente gratuita, fácil de utilizar y funciona perfectamente. Sencillamente se instala en un dispositivo IOS desde el cual se enviará por UPD la información necesaria del control de acelerómetros.

Es decir, instalaremos una aplicación en un dispositivo real, y utilizando dicho dispositivo (más bien el acelerómetro del mismo) simularemos los giros en el simulador. Sólo debemos añadir un par de ficheros a nuestro proyecto que no afectarán en absoluto al cómputo global del mismo.

Comencemos. Lo primero que debemos hacer es obtener AccSim. Para ello tenemos dos opciones. Por un lado podemos descargarnos el código fuente de la siguiente dirección:

http://code.google.com/p/accelerometer-simulator/wiki/Home

Tras descargar el código deberías abrirlo con Xcode, compilar (cuidado con los certificados, el archivo Info.plist, etc.) e instalar en tu dispositivo de desarrollo. Esta opción es válida si quieres probar tu proyecto con acelerómetros sin tener que instalarte constantemente la aplicación en tu dispositivo. Sin embargo, como podrás haber deducido es totalmente necesario tener licencia de desarrollo (para poder instalarte la aplicación en tu dispositivo).

La otra opción y la más recomendable por su sencillez es que descargues la aplicación de la AppStore. Puedes hacerlo en el siguiente enlace:

http://itunes.apple.com/us/app/accelerometer-simulator/id336476721?mt=8

Tras tener la aplicación instalada, ejecutela y visualizará algo similar a lo siguiente:

En este apartado de la aplicación podrá elegir el sensor del acelerómetro entre dos opciones:

Sensor. Obtiene los datos del propio acelerómetro del dispositivo.

Manual. Obtiene los datos de forma manual. Es decir, podrás poner tu mismo los valores que desees pero ten en cuenta que manualmente puedes llegar a poner valores que de por sí jamás conseguirías de forma real.

En este apartado es donde activamos la opción necesaria para que la aplicación comience a enviar la información del acelerómetro por paquetes UPD. Por defecto, se utiliza la opción Broadcast que significa que se enviarán paquetes a todos los equipos que estén en la misma red (WLan por ejemplo). Sin embargo, se permiten otras opciones  como especificar IP o puerto (normalmente no es necesario).

Para finalizar, si te descargaste la aplicación de la AppStore, descargate el código fuente desde aquí (mismo enlace a google codes que pusimos anteriormente) ya que será necesario incluir un par de ficheros en tu proyecto.

Sencillamente añade los archivos  AccelerometerSimulation.h y AccelerometerSimulation.m a tu proyecto. Sólo te quedará añadir:

#import "AccelerometerSimulation.h"

En aquellas clases donde utilices UIAccelerometer.

Tras realizar todos los pasos. Compila y ejecuta tu proyecto en el simulador. Debería de estar recibiendo paquetes del acelerómetro desde la aplicación AccSim que se está ejecutando en tu dispositivo de desarrollo.

Libros Cocos2d iPhone

Todos los que visitáis el blog sabéis que hemos comenzado un curso sobre cocos2d con el objetivo de llegar a ver todos los aspectos básicos para crear un juego 2d para el iphone (manejo de sprites, detección de colisiones, como crear menus, trabajar con audio, giroscopio, etc). Nuestro objetivo final es crear un clon del típico 1942.

El curso se irá escribiendo en mis ratos libres (por desgracia mas escasos de lo que me gustaría) por lo que podemos tardar algo de tiempo en completarlo. Seguramente vuestra mente inquieta os pida avanzar más rápido. Así que, ¿Qué mejor que con un libro?

En el mercado ya existen opciones y tambiñen se están preparando otros que están por salir. Vamos a echar un vistazo rápido sobre todas ellas.

Comenzaremos hablando de  Learn iPhone and iPad Cocos2D Game Development. Fue el primero de todos lis libros sobre cocos2d en publicarse. Su autor es Steffen Itterheim, desarrollador indie en el iphone aunque con bastantes años de experiencia en el sector.

Puedes encontrar el Blog del autor en la siguiente dirección:

http://www.learn-cocos2d.com

En su blog suele comentar entradas todas ellas relacionadas con cocos2d ya sean sobre ejemplos nuevos ó algún tipo de novedad. Totalmente recomendado.

Retomando el libro. Su coste es de 27,99$ en su versión ebook ó de 39,99$ la de papel. Ambos incluyen la posibilidad de descargar el código fuente disponible en cada unos de los capítulos. El libro consta de 16 capítulos individuales (aunque algunos bastante relacionados entre sí). Se comienza con una introducción de cocos2d (instalación, conceptos básicos, etc), continua desarrollando el primer juego donde se aprende el uso del acelerómetro. Sigue en capítulos sucesivos explicando como realizar un shooter (el típico juego de aviones) controlado por botones virtuales. Casi al final del libro se explican los motores físicos creando un juego PinBall. Y termina hablando de Game Center y otros puntos de interés.

Considero al libro muy equilibrado entre la parte teórica y la parte práctica. El código está totalmente disponible con comentarios. Por lo que podemos concluir que es un libro muy recomendado para inciarse con cocos2d.

Además para cualquier duda con respecto al libro el autor ha abierto un foro. Podéis encontrarlo en la siguiente dirección:

http://cocos2d-central.com

Pasamos a comentar la otra opción disponible en el mercado. Se titula Cocos2d for iPhone 0.99 Beginner’s Guide. Su autor es Pablo Ruiz CEO de la empresa Argentina InfinixSoft especializada en el desarrollo para dispositivos móviles. En estos instantes el libro tiene un precio de 31,64€ el pack que incluye la versión ebook y la de papel. Es una promoción por estas fechas y no durará mucho más asi que aprovecha.

El libro tiene 11 capítulos. Comienzo con una introducción al igual que el anterior (instalación de cocos, etc). Comienzo explicando como realizar un juego tipo puzzle (unir tres elementos del mismo color). Continua con un shooter (juego de naves) manejado con acelerómetros para terminar explicando físicas y realizando un juego con ellas.

En general es muy buen libro pero con altibajos. Hay capítulos en los cuales hecho de menos más explicación teórica. Ir algo más despacio con pasos intermedios aunque es una valoración personal.

También dispone de una cantidad de ejemplos cosiderable descargables desde:

https://www.packtpub.com

¿Próximamente?

En breve aparecerán más y más emocionantes libros sobre el desarrollo de videojuegos utilizando cocos2d.

El desarrollador Ray Wenderlich (os aconsejo encarecidamente visitar su blog, crea fantásticos tutoriales sobre desarrollo en IOS, cocos2d, etc) es uno de los autores del siguiente libro. Constará de 15 capítulos. De nuevo se comienza con una introducción, para continuar con aspectos básicos (animaciones, sprites, texto, etc) terminando con físicas ó integración de redes sociales (muy interesante este punto).

Podéis ver más información en la siguiente dirección:

http://cocos2dbook.com/book

AppViz, controla las descargas y ventas de la AppStore

¿Tienes aplicaciones en la AppStore y te gustaría realizar un seguimiento lo más exhaustivo posible?, ¿Número de descargas, dinero recaudado, etc?.

Quizás te interese AppViz.

AppViz es una aplicación para mac Lo que destaca de esta aplicación es la forma tan clara de mostrar los datos. De un simple vistazo en pocos minutos haremos todas las consultas que queramos.

Entre las caracterísitcas más destacadas:

– Soporta múltiples cuentas. Es decir, si vendes en la iBookStore y en la AppStore, podremos hacer el seguimiento en ambas.

– Permite importar todos los datos rápidamente desde iTunnes Connect.

– También permite importar desde ficheros descargados (.zip y .gz).

– Muestra de Rankings (por países inclusive).

– Ver todas la opiniones de forma clara  y concisa.

La aplicación no es totalmente gratuita. Su coste es de 29,95$ pero tiene una versión gratuita de 30 días que puedes descargar desde aquí. Existen otras opciones más económicas pero por su interfaz y posibilidades recomiendo encarecidamente esta aplicación.

La página web del producto es la siguiente:

http://www.ideaswarm.com/products/appviz/

Hola Mundo en cocos2d

Ya tenemos instalado Xcode junto a las plantillas de cocos2d asi que … ¿para que esperar más?. Comencemos este 2011 creando nuestro primer proyecto en cocos2d.

Abre Xcode y pulsa en File – New Project para crear un nuevo proyecto. Verás una pantalla similar a la siguiente:

Elige la primera opción “cocos2d Application” y en el momento que te pida el nombre del proyecto puedes llamarlo “HelloCocos2D“.

Te deberá aparecer una ventana como la siguiente:

Si te aparece en la parte superior derecha “Base SDK Missing” no podrás compilar pero no te preocupes no es un problema grave. Este caso puede darse según con que versiones del SDK y de cocos2d se trabaje. Por ejemplo, si usas el SDK 4 y versiones antiguas de cocos2d pensadas para el SDK 3 puede ocurrirte.

¿Cómo solucionamos esto?

La solución es fácil. En el menu de Xcode pulsa sobre “Project”. A continuación, sobre la opción “Edit Project Settings“. Verás algo similar a lo siguiente:

En la parte superior verás que una de las opciones es “Base SDK for All Configurations” y el valor que debe de tener será algo similar a “Iphone Device X.X(missing)” donde X.X es la versión. Cambia el valor de esto por una versión del SDK más actual. Cierra la ventana.Problema resuelto.

Tras solucionar el problema podrás compilar. Vamos a compilar y ejecutar el proyecto para ver el resultado en el simulador.

Para ello pulsa sobre el botón “Build and Run“.

Tras pulsar sobre dicho botón el simulador del iphone se ejecutará mostrando algo similar a lo siguiente:

Increíble, ¿no?. No hemos escrito ni una sola línea y ya tenemos un Hola Mundo. Con lo realizado hasta ahora podrás darte cuenta de la ventaja que suponen las plantillas ya que como podrás ver nos dan una base bastante buena desde la que partir.

A continuación vamos a intentar entender todo lo que trae un proyecto base (plantilla – template), su significado y funcionamiento.

A lo largo del curso iremos viendo más código y ejemplos que teoría pero en aquellos casos en los cuales  la teoría es 100% necesaria pues . . . no hay mas remedio que la veamos. Este es uno de esos casos.

¿Qué ha ocurrido al compilar y ejecutar el proyecto?

La aplicación se instala en el simulador y antes de arrancar vemos su icono en el SpringBoard del mismo. A continuación arranca y nos muestra una ventana de carga con una imágen del logo de cocos2d.

Entonces se crea un CCLabel (ya veremos que es no te preocupes por ahora) con el texto “Hello World”. Es lo único que se muestra junto a unos dígitos en la parte inferior izquierda mostrandonos en número de fps (frames por segundo) a los que corre la aplicación.

Ya sabes en esencia que hace el proyecto, veamos el código.

Si ya has trabajado con Xcode sabrás esto perfectamente pero si no es el caso, por defecto, todos los ficheros del proyecto los encuentras en un menu situado a la izquierda llamado “Groups & Files“. Es decir, algo similar a lo que puedes ver a continuación:

En la carpeta llamada “cocos2d Sources” se encuentra todo el código correspondiente al engine. No es necesario ni que te molestes en mirar que hay dentro ya que nunca será realmente necesario. Sin embargo, recuerda que el engine el open source y gratuito asi que si te ves con la curiosidad de mirarlo todo ó si necesitas cambiar algo para adaptar el engine a tus necesidades, no dudes ni un instante, hazlo.

La carpeta “Resources” es la que contendrá todos los recursos gráficos y del cualquier otro tipo que no sea código fuente.

Creo interesante resaltar que la imagen con el nombre “Default.png” en la carpeta Resources será la que se muestre a la hora de cargar la aplicación.

En la carpeta Resources también encontrarás siempre un fichero llamado Info.plist. De momento basta saber que es un archivo de configuración del proyecto y que no se modificará apenas al menos hasta la hora de la publicación del juego.

El código en si del proyecto, donde trabajarás y añadiras elementos será dentro de la carpeta llamada “Classes“.

Dentro de la carpeta hay dos clases (cada una con su archivo .h y .m). Una de ellas es HelloCocos2DAppDelegate que se encarga de configuraciones globales del juego (mostrar o no fps, si se ejecuta en horizontal o vertical, etc) y la otra HelloCocos2DScene que es la que crea el CCLabel que se muestra.

HelloCocos2DAppDelegate

Toda aplicación IOS tiene una clase  AppDelegate. Como habrás deducido esta clase es vital y se encarga de multiples funciones como capturar mensajes del sistema (por ejemplo cuando se recibe una llamada), inicializar valores globales de la aplicación, etc.

En esta clase se encuentra el método applicationDidFinishLaunching donde se suele poner el código de inicialización de cocos2d.

Veamos el código:

- (void) applicationDidFinishLaunching:(UIApplication*)application
{
 // Init the window
 window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

 // cocos2d will inherit these values
 [window setUserInteractionEnabled:YES];
 [window setMultipleTouchEnabled:YES];

 // Try to use CADisplayLink director
 // if it fails (SDK < 3.1) use the default director
 if( ! [CCDirector setDirectorType:CCDirectorTypeDisplayLink] )
 [CCDirector setDirectorType:CCDirectorTypeDefault];

 // Use RGBA_8888 buffers
 // Default is: RGB_565 buffers
 [[CCDirector sharedDirector] setPixelFormat:kPixelFormatRGBA8888];

 // Create a depth buffer of 16 bits
 // Enable it if you are going to use 3D transitions or 3d objects
//    [[CCDirector sharedDirector] setDepthBufferFormat:kDepthBuffer16];

 // Default texture format for PNG/BMP/TIFF/JPEG/GIF images
 // It can be RGBA8888, RGBA4444, RGB5_A1, RGB565
 // You can change anytime.
 [CCTexture2D setDefaultAlphaPixelFormat:kTexture2DPixelFormat_RGBA8888];

 // before creating any layer, set the landscape mode
 [[CCDirector sharedDirector] setDeviceOrientation:CCDeviceOrientationLandscapeLeft];
 [[CCDirector sharedDirector] setAnimationInterval:1.0/60];
 [[CCDirector sharedDirector] setDisplayFPS:YES];

 // create an openGL view inside a window
 [[CCDirector sharedDirector] attachInView:window];
 [window makeKeyAndVisible];

 [[CCDirector sharedDirector] runWithScene: [HelloWorld scene]];
}

Las líneas más importantes aquí serían:

[[CCDirector sharedDirector] setDeviceOrientation:CCDeviceOrientationLandscapeLeft];

[[CCDirector sharedDirector] setAnimationInterval:1.0/60];

[[CCDirector sharedDirector] setDisplayFPS:YES];

Lo primero que debemos observar es que se utiliza en todas ellas CCDirector. La clase CCDirector es la principal para el trabajo con las escenas (scenes, ya las veremos mejor más adelante). CCDirector es el encargado también de inicializar OpengGL ES.

NOTA: Habrás observado también que todas las clases pertenecientes a cocos2d comienzan por el prefijo “CC”. Es así simplemente para evitar problemas con nombres de clases, etc.

La primera de las líneas anteriores define la orientación del dispositivo. En este caso el dispositivo esta en horizontal y se usa la orientación CCDeviceOrientationLandscapeLeft.

Existen cuatro tipos diferentes de orientación:

– CCDeviceOrientationPortrait

– CCDeviceOrientationPortraitUpsideDown

– CCDeviceOrientationLandscapeLeft

– CCDeviceOrientationLandscapeRight

Ya que es cambiar un tipo por otro te recomiendo que en un instante y para que te quede más claro pruebes a cambiar en el ejemplo de HelloCocos2D cada una de ellas.

La segunda línea define cada cuanto tiempo cocos2d debe refrescar la pantalla. El límite superior son 60 frames por segundo (1.0/60).

La última de las líneas es muy útil para medir el rendimiento de nuestor juego. Nos permite habilitar o deshabilitar si mostramos los FPS.

También debemos resaltar las siguientes líneas:

// Try to use CADisplayLink director
 // if it fails (SDK < 3.1) use the default director
 if( ! [CCDirector setDirectorType:CCDirectorTypeDisplayLink] )
 [CCDirector setDirectorType:CCDirectorTypeDefault];

En cocos2d existen cuatro tipos diferentes de CCDirector:

– NSTimer Director.

– Mainloop Director.

– ThreadMainLoop Director.

– DisplayLink Director: Sólo disponible desde el SDK  3.1 ó superior. Es el usado por defecto.

Con lo visto anteriormente ya sabrás que sencillamente se pone un if para comprobar la versión del SDK en la que se ejecuta para utilizar un CCDirector u otro.

Lo último que vamos a ver en esta clase es como se lanzan las escenas, como se pausan, reanudan, etc. Vamos a ver una visión muy por encima del concepto. En futuras entradas del curso veremos como controlar todo esto mejor, pudiendo pausar el juego ó mostrar un mensaje al realizar estas acciones.

- (void)applicationWillResignActive:(UIApplication *)application{
 [[CCDirector sharedDirector] pause];
}

Este método nos lo ha puesto directamente la plantilla (insisto para que quede constancia de lo increiblemente bien que están diseñadas). Cuando el juego se para por ejemplo por que la pantalla se ha bloqueado se llama a este método. Para todo lo necesario, pone los FPS a cero y el consumo de CPU se reduce.

Por el contrario, te estarás preguntando . . . ¿Qué ocurre si el juego de reactiva? (siguiendo el ejemplo anterior, la pantalla se desbloquea). Pues que se llama al siguiente método:

 - (void)applicationDidBecomeActive:(UIApplication *)application{
 [[CCDirector sharedDirector] resume];
 }
 

HelloWorldScene

Se ha nombrado ya en un par de ocasiones las escenas (scene – CCScene) pero aún no sabes que es.

El concepto de CCScene es sencillo. No es más que un “contenedor” donde añadir elementos visuales (como los sprites a usar en el juego) basandonos en un eje de coordenadas. Un CCScene hace poco por si sólo.

Aprovechamos para introducir el concepto de CCLayer. Una escena (CCScene) puede contener tantos CCLayer como necesitemos. Para que su concepto sea fácil de entender imaginate que estas en un programa de edición fotográfica donde cada imagen puede contener multiples capas. Cada capa sería un CCLayer en esta ocasión.

El CCLayer es el encargado de capturar los eventos del acelerómetro y los toques en la pantalla.

Tanto el CCLayer como el CCScene (además de otros que usaremos en futuras entradas como CCSprite) son subclases de CCNode. Podemos decir de forma clara que todo elemento visual o que contenga un elemento visual es en el fondo un CCNode.

CCNode es una clase abstracta sin representación visual.

¿Porque derivan tantas clases de CCNode?

Fácil, la mayoría de métodos y propiedades comunes a todos los elementos visuales está definido en CCNode. Los métodos propios de cada elemento (por ejemplo como se debe o no mostrar cada uno) se definen en los hijos. De esta forma se factoriza mucho código.

Veamos el código:

// on "init" you need to initialize your instance
-(id) init
{
// always call "super" init</pre>
// Apple recommends to re-assign "self" with the "super" return value
 if( (self=[super init] )) {

 // create and initialize a Label
 CCLabel* label = [CCLabel labelWithString:@"Hello World" fontName:@"Marker Felt" fontSize:64];

 // ask director the the window size
 CGSize size = [[CCDirector sharedDirector] winSize];

 // position the label on the center of the screen
 label.position =  ccp( size.width /2 , size.height/2 );

 // add the label as a child to this Layer
 [self addChild: label];

 }
 return self;

}

El método anterior es el llamado nada mas inicializar el layer. Es en él donde se crea un CCLabel con el contenido “Hello World”. Un CCLabel no tiene mucha explicación. Equivale al Label existente en el resto de la mayoría de lenguajes de programación. Es decir, es un objeto que permite mostrar un texto.

Tras crear el CCLabel se toma el tamaño de la pantalla gracias al CCDirector (si estamos en un iphone ó ipod touch será 480 * 320 px. Si por el contrario es un ipad será de 1024 * 768 px).

A continuación, situamos al label en mitad de la pantalla. Para ello se usa un macro interno de cocos2d sencillamente usando ccp. Esto nos creará un CGPoint de una forma más rápida y directa. Veremos mas macros de cocos2d a lo largo del curso. Quedate con la idea, puedes usarlos o no, sencillamente nos facilitan las vida escribiendo menos para hacer lo mismo.

Podéis obtener el código fuente de lo visto en esta entrada realizando clic aquí.

Llegamos al final de la entrada de hoy. Como verás se ha avanzado y aprendido bastante sobre las bases de cocos2d.
La siguientes entradas serán más interesantes aún. Veremos como mostrar sprites en pantalla, como colocar un fondo para el juego (de momento estático, en futuras entradas haremos que se mueva, ideal por ejemplo para los típicos juegos de naves) y mucho más.

Descargar e instalar cocos2d

En la entrada anterior vimos como instalar el SDK del iphone junto a nuestro futuro entorno de trabajo Xcode.

El siguiente paso si queremos trabajar con cocos2d será descargarnos e instalar cocos2d.

Para descargar cocos2d deberás dirigirte a la siguiente dirección:

http://www.cocos2d-iphone.org/download

Una vez dentro de la dirección dada verás algo similar a lo siguiente:

Os recomiendo siempre usar versiones estables (a menos que encontréis algun motivo para no hacerlo).  Las versiones no estables no significa que no os vaya a funcionar, os de errores ni nada extraño. Simplemente se ha añadido funcionalidad que se está probando y no esta testeada al 100%.

Con cada nueva versión se incluye un fichero de texto con los cambios (Release Notes). Podéis mirarlo con cada nueva versión para conocer las mejoras, cambios, etc.

En el momento de escribir esta entrada la última versión estable es la 0.99.5.

Una vez descargado el fichero realizad doble clic sobre el para que el sistema comience su extracción. Se os creará una ruta similar a “cocos2d-iphone-0.99.5” renombradla a “Cocos2d” y moverla al escritorio si no estaba allí.

A continuación, vamos a proceder con la instalación de cocos2d. Para ello vamos a utilizar el Terminal. Podrás encontrarlo en tu directorio de Utilidades. Si nunca lo has utilizado podrás reconocerlo porque su icono es exactamente igual a la imágen que tienes a continuación:

Una vez abierto el terminal escribe lo siguiente:

cd desktop/Cocos2d
sudo ./install_templates.sh -f

La última línea se encargará de instalar las plantillas de cocos2d. El comando sudo ejecutará todo con privilegios de administrador por que te pedirá la contraseña del mismo.

El parámetro – f lo único que hace es obligar a sobreescribir los archivos en caso de que ya existieran.

Tras escribir ambas líneas verás que el terminal empieza a mostrar muchas líneas. No te preocupes, es lo que debe ocurrir.

Al terminar, puedes cerrar el Terminal, ya tienes cocos2d instalado junto a sus plantillas.

NOTA: Cada nueva versión de cocos2d las plantillas cambian. Recuerda repetir este proceso para las sucesivas versiones.

¿Y si quiero desintalar las plantillas de cocos2d?

Bueno, sería una verdadera lástima que no probarás a desarrollar utilizandolas siguiendo el curso porque realmente merece la pena, pero poder se puede.

Para desinstalar por completo las plantillas debes dirigirte a cada una de las siguientes rutas:

/Library/Application Support/Developer/Shared/Xcode/Project Templates/
/Library/Application Support/Developer/Shared/Xcode/File Templates/
~/Library/Application Support/Developer/Shared/Xcode/Project Templates/
~/Library/Application Support/Developer/Shared/Xcode/File Templates/

En cada una de ellas asegúrate de eliminar todos los archivos en ellas incluidas subcarpetas. Y listo!

Instalar el SDK del iPhone

Para comenzar a desarrollar para dispositivos ios necesitamos el entorno de desarrollo en el cual trabajar. Dicho entorno de desarrollo se llama Xcode.

Para poder descargarlo debemos dirigirnos a la siguiente dirección:

http://developer.apple.com/iphone/

Cuando accedas a la dirección anterior verás algo muy similar a lo siguiente:

En la parte superior derecha verás la palabra “Register“. Haz clic sobre ella para comenzar el registro. El registro es totalmente necesario para poder descargar el SDK pero es gratuito.

Tras finalizar el proceso de registro y una vez iniciada sesión con tu cuenta, pulsa sobre “Downloads” para ir a la sección de descargas. En ella verás la última versión de Xcode junto a la del SDK. En el momento de escribir este artículo era “Xcode 3.2.5 and iOS SDK 4.2“.

Comprobarás que el paquete es pesado (entorno a los 3GB) así que dependiendo de tu conexión, paciencia.

Una vez finalizado, pulsa sobre el archivo descargado (con la extensión .dmg) y verás algo como lo siguiente:

Realiza doble clic sobre el archivo con extensión .mpkg para inicializar el asistente de instalación. Verás algo similar a lo siguiente:

Con todas las opciones por defecto solo basta que vayas siguiente el asistente aceptando y continuando todos los pasos hasta terminar.

Una vez finalizado el asistente…

… !Enhorabuena ya tienes Xcode instalado y puedes comenzar a desarrollar para dispositivos IOS!

Verás que en la raíz de tu directorio se ha creado uns nueva carpeta llamada “Developer“. Dentro de ese directorio verás una carpeta llamada “Applications“. Si la abres verás algo como lo siguiente:

En este directorio tenemos Xcode como podrás observar. Te recomiendo que lo abras y lo mantengas en el dock para facilitar su rápido acceso.