Documento - Departament d`Enginyeria Informàtica i Matemàtiques

Documento - Departament d`Enginyeria Informàtica i Matemàtiques

Departament d’Enginyeria Informàtica i Matemàtiques
Desarrollo de un juego de rol para Iphone
TITULACIÓN: Ingeniería Técnica en Informática de Sistemas - ETIS
AUTOR: Adnan Bašić Plevljaković
DIRECTOR: Carlos Molina Clemente
FECHA: Septiembre 2012.
2
Prefacio
Actualmente la gran mayoría de personas posee un Smartphone. Estos teléfonos
móviles no tienen ni punto de comparación con los que había antes.
La gente no los usa solo para llamar o enviar mensajes SMS, sino que se han
convertido en casi un ordenador de bolsillo. Disponen de múltiples funciones y
aplicaciones.
Hoy en día, ¿quién no ha jugado o no tiene algún juego en su Smartphone?
Muchas compañías han visto este auge de los Smartphone y han decidido sacar sus
aplicaciones para estos dispositivos móviles. Estas aplicaciones son muy variadas, desde
videojuegos, redes sociales, aplicaciones fotográficas, compras on-line, y un largo etcétera.
Visto el auge que tiene la creación de aplicaciones para Smartphone, decidí de crear
una para mi proyecto final de carrera, se trata de una aplicación para iPhone.
Esta aplicación en realidad es un videojuego, cuyo género es el rol. Este tipo de
videojuegos tratan principalmente de explicar una historia en la cual tú eres el protagonista
de ella, y en la que tienes que luchar contra enemigos de todo tipo, superar adversidades,
razonar para lograr el objetivo, etc.
En este videojuego, controlaremos a un personaje, el cual tendrá que hacer frente a
una amenaza que asola al mundo. Tendrá que ir hablando con la gente que se vaya
encontrando por el camino para que le guíen y le ayuden. Además en su aventura, nuestro
protagonista tendrá que hacer frente a unos enemigos que le irán apareciendo. La misión de
nuestro protagonista no será otra, que la de vencer al grupo de enemigos que amenazan al
mundo de su destrucción.
3
4
ÍNDICE GENERAL
1
Objetivos del proyecto………………………………………………11
1.1. Los Sistemas Operativos para móviles…………………………………………11
1.1.1. iOS de Apple……………………………………………………………….12
1.1.2. Windows Phone 7………………………………………………………….13
1.1.2.1.
Desarrollo de Software para Windows Phone 7:…………………13
1.1.3. Android…………………………………………………………………….14
2
Especificaciones del videojuego………………………………………15
2.1. Género……………………………………………………………………………15
2.2. Objetivo del videojuego…………………………………………………………15
2.3. Sistema de batalla………………………………………………………………..15
3
Diseño de la aplicación………………………………………………17
3.1. Pantalla inicial…………………………………………………………………...17
3.2. Menú principal…………………………………………………………………..17
3.3. El juego…………………………………………………………………………...17
3.4. Escenarios de batalla…………………………………………………………….18
3.5. Pantalla de finalización del juego………………………………………………19
3.6. Pantalla de “Game Over”……………………………………………………….19
3.7. Pantalla de instrucciones………………………………………………………..20
3.8. Pantalla de configuración del sonido…………………………………………...20
3.9. Pantalla de créditos……………………………………………………………...21
4
Desarrollo - Creación del videojuego………………………………...21
4.1. Selección de las imágenes………………………………………………………..21
4.2. Selección de los sonidos y canciones……………………………………………22
4.3. Creación del escenario……………………………………………………..……22
4.3.1. Creación de patrones……………………………………………………...22
4.3.2. Creación del conjunto de patrones y de las capas ……………………….23
5
4.4. Creación del menú principal……………………………………………………24
4.5. Creación del menú de opciones…………………………………………………25
4.6. Creación de la pantalla de instrucciones……………………………………….25
4.7. Creación de la pantalla de créditos……………………………………………..27
4.8. Inserción del escenario a la aplicación…………………………………………27
4.9. Posicionamiento del personaje en el escenario ………………………………..27
4.10.
Testeo del movimiento del personaje mediante
eventos touch y control de la cámara…………………………………....28
4.11.
Testeo del movimiento del personaje mediante acelerómetro………...28
4.12.
Inserción el menú del juego……………………………………………...29
4.12.1. Inserción del menú de estado del personaje……………………………...29
4.12.2. Inserción del menú de opciones de sonido y del acelerómetro…………..30
4.12.3. Inserción de las opciones para salir del juego……………………………31
4.13.
Testeo del movimiento del personaje mediante joystick……………….32
4.14.
Control de colisiones ……………………………………………………..32
4.15.
Cambio de localización del personaje…………………………………...33
4.16.
Inserción de NPCs en el escenario y preparación de los textos
de los NPCs……………………………………………………………….35
4.17.
Hablar con los NPCs……………………………………………………...36
4.18.
Creación de los atributos de todos los personajes………………………37
4.19.
Creación de las animaciones de batalla…………………………………37
4.19.1. Pasos previos ……………………………………………………………...37
4.19.2. Inserción de las imágenes animadas……………………………………...38
4.19.3. Secuencias de batalla……………………………………………………...39
4.19.3.1. Secuencia de ataque físico ……………………………………......39
4.19.3.2. Secuencia de ataque mágico………………………………………39
4.19.3.3. Secuencia de cura del personaje………………………………….40
4.19.3.4. Secuencia de derrota………………………………………………40
4.20.
Creación de las batallas…………………………………………………..41
4.20.1. Actualización de la vida y “Psy” de los personajes……………………....41
4.20.2. Formas para salir del combate……………………………………………41
4.21.
Creación de la pantalla de Game Over……………………………….…42
4.22.
Creación de la pantalla de Fin del juego………………………………..42
6
5
Decisiones de diseño…………………………………………………..43
5.1. Limitaciones para crear el escenario…………………………………………...43
5.2. Menú principal…………………………………………………………………..43
5.3. Juego……………………………………………………………………………..44
6
Planificación temporal. ………………………………………………47
7
Conclusiones y mejoras ………………………………………………49
8
Recursos utilizados……………………………………………………51
8.1. Xcode…………………………………………………………………………......51
8.1.1. Historia………………………………………………………………….…51
8.2. Cocos2d…………………………………………………………………………..52
8.2.1. Implementación de Cocos2D en una aplicación…………………………52
8.3. Tiled Map Editor………………………………………………………………...54
8.3.1. Características……………………………………………………………..54
8.3.2. Mapas ortogonales e isométricos…………………………………………55
8.3.3. Tamaño de los tiles y mapas totalmente personalizable…………………56
8.3.4. Color clave y tilesets……………………………………………………….56
8.3.5. Capas de objetos…………………………………………………………...57
8.3.6. El formato TMX…………………………………………………………...58
8.4. VisualBoy Advance……………………………………………………………...58
8.5. Photoshop………………………………………………………………………...58
8.6. Zwoptex…………………………………………………………………………..59
8.7. Audacity………………………………………………………………………….59
9
Referencias……………………………………………………………61
7
8
ÍNDICE FIGURAS
Figura 3.1. Pantalla inicial………………………………………………………………...17
Figura 3.2. Menú principal………………………………………………………………..17
Figura 3.3. Inicio del juego……………………………………………………………….18
Figura 3.4. Escenario de batalla…………………………………………………………..18
Figura 3.5. Fin del juego………………………………………………………………….19
Figura 3.6. Game Over……………………………………………………………………19
Figura 3.7. Instrucciones del juego……………………………………………………….20
Figuro 3.8. Opciones de sonido…………………………………………………………...20
Figura 3.9. Créditos……………………………………………………………………….21
Figura 4.6.a.Instrucciones para mover al personaje………………………………………26
Figura 4.6.b. Instrucciones para hablar con la gente……………………………………...26
Figura 4.6.c. Instrucciones para luchar en batalla………………………………………...26
Figura 4.12. Opciones del menú del juego………………………………………………..29
Figura 4.12.1. Menú estado del personaje………………………………………………..30
Figura 4.12.2 Comparativa de los menús de opciones……………………………………30
Figura 4.12.3.a. Opción para salir del juego sin guardar…………………………………31
Figura 4.12.3.b. Opción para salir del juego guardando es estado de la partida…………31
Figura 4.14. Capa Misc…………………………………………………………………...33
Figura 4.15.a. Vale………………………………………………………………………..33
Figura 4.15.b. Pradera de Ancara…………………………………………………………33
Figura 4.15.c. Kalay………………………………………………………………………34
Figura 4.15.d. Puerto de Tolbi……………………………………………………………34
Figura 4.15.e. Bosque prohibido………………………………………………………….34
Figura 4.15.f. ¿?1………………………………………………………………………….34
Figura 4.15.g. ¿?2…………………………………………………………………………35
Figura 4.15.h. ¿?3…………………………………………………………………………35
Figura 4.17. Ejemplo de diálogo con un NPC…………………………………………….36
9
Figura 6. Planificación temporal - Diagrama de Gantt…………………………………...47
Figura 8.2.1.a. Cocos2d - Nuevo proyecto…………...…………………………………..53
Figura 8.2.1.b. Simulador iOS……………………………………………………………53
Figura 8.3.2. Tiled Map Editor – Vista ortogonal………………………………………..55
Figura 8.3.3. Tiled Map Editor – Nuevo mapa…………………………………………...56
Figura 8.3.4. Tiled Map Editor – Nuevo conjunto de patrones…………………………..56
Figura 8.3.5.a. Tiled Map Editor – Propiedades del objeto………………………………57
Figura 8.3.5.b. Tiled Map Editor – Propiedades del patrón………………………………58
Figura 8.6. Zwoptex……………………………………………………………………....59
Figura 8.7. Audacity………………………………………………………………………60
10
1
Objetivos del proyecto
Dado que actualmente el mundo de los Smartphones está en auge, muchas compañías
están invirtiendo sus esfuerzos en crear aplicaciones para estos teléfonos móviles.
Hasta no hace mucho tiempo, las empresas que se dedican a la creación de
videojuegos, lanzaban sus productos para las consolas. En un tiempo reducido de tiempo,
los Smartphones se han ido haciendo hueco en este mundo.
La creación de este proyecto ha sido bastante fortuita, su creación ha sido posible
debido a la idea de crear una aplicación para un Smartphone y que desde siempre me han
fascinado los juegos de rol.
Uno de mis juegos de rol favoritos fue “Golden Sun”, juego realizado por la
compañía Camelot y que fue diseñado para la GameBoy Advance de Nintendo.
Este juego tenía muchos componentes que le hacían único e interesante, tenía un
enorme mapeado, un sistema de batalla por turnos y con, a veces complicados,
rompecabezas.
Mi propósito en este proyecto, ha sido realizar una muy humilde continuación de este
juego para iPhone. El videojuego lo he realizado mediante Xcode con el soporte las
librerías que ofrece cocos2d. Además se han utilizado otros programas para realizar los
escenarios del juego, retoque de imágenes, retoque de efectos de sonido, creación de
animaciones, etc.
1.1
Los Sistemas Operativos para móviles.
Un sistema Operativo para móvil está pensado para controlar un dispositivo portátil
(en nuestro caso concreto un “SmartPhone”).
Con respecto a su funcionamiento, es muy similar al de cualquier otro sistema
operativo de equipos de sobremesa (Windows, Mac OS… etc.). Sin embargo, un sistema
operativo para móvil tiene un diseño más sencillo y especialmente pensado para que el
usuario interactúe con él mediante pantalla táctil, voz, teclado virtual… etc.
Otro aspecto importante es la comunicación. Un S.O. móvil esta específicamente
diseñado para conectar los dispositivos a redes inalámbricas, redes móviles (ya sean redes
GSM, GPRS, UMTS…ect.) y, por supuesto, conectar dispositivos entre sí utilizando, por
ejemplo, la tecnología bluetooth.
11
Otro de los aspectos a tener en cuenta cuando hablamos de sistemas operativos
móviles es el hecho de que utilizan formatos específicos para archivos multimedia
especialmente optimizados para su uso en dispositivos móviles (principalmente porque los
formatos que se usan en equipos de sobremesa suelen consumir demasiados recursos).
1.1.1 iOS de Apple.
iOS es un sistema operativo desarrollado por la compañía Apple Inc. Para los
dispositivos móviles iPod touch, iPhone e iPad. Está basado en una variante del Mach
kernel de Mac OS X.
La jerarquía de capas del iOS es la siguiente:
1. Cocoa Touch.
2. Medios de comunicación.
3. Servicios principales
4. Núcleo del sistema operativo.
Capa Cocoa Touch:
Cocoa Touch es una API (Interfaz de Programación de la Aplicación) para la
creación de programas para el iPad, iPhone e iPod Touch.
Se basa en el set de herramientas que proporciona el API de Cocoa para crear
programas sobre la plataforma Mac OS X.
El SDK de iOS nos proporciona herramientas para desarrollar aplicaciones basadas
en la capa Cocoa Touch.
SDK de iOS:
El SDK (Kit de Desarrollo de Software) de iOS fue creado con el objetivo de
permitir a terceros programar aplicaciones nativas para dicho sistema operativo.
Uno de los puntos a tener en cuenta es el hecho de que necesitamos tener instalado el
Mac OS X para poder utilizar dicho SDK.
Ya que el iPhone está basado en Mac OS X, el entorno de desarrollo es asimismo el
Xcode y el lenguaje de programación principal es el Objective C. Además, el iOS SDK nos
proporciona un simulador, que nos permite testear las aplicaciones antes de instalarlas en el
12
móvil. El único inconveniente es el hecho de emular el acelerómetro, por lo tanto si
tenemos la intención de utilizar el acelerómetro en nuestra aplicación no tendremos más
remedio que testearlo en el móvil.
1.1.2 Windows Phone 7.
Es un sistema operativo móvil desarrollado por Microsoft, como sucesor de la
plataforma Windows Mobile. Está pensado para el mercado de consumo casual en lugar
del mercado empresarial por lo que carece de muchas funcionalidades que proporciona la
versión anterior.
Microsoft ha decidido no hacer compatible Windows Phone 7 con Windows
Mobile por lo que las aplicaciones existentes no funcionan en Windows Phone 7, haciendo
necesario desarrollar nuevas aplicaciones.
1.1.2.1 Desarrollo de Software para Windows Phone 7:
Tenemos dos implementaciones posibles a la hora de desarrollar aplicaciones para
este sistema operativo:
- Microsoft Silverlight:
Esta implementación permite el desarrollo de aplicaciones basadas en XAML (En
Español, Lenguaje Extensible de Formato para Aplicaciones).
Incluye el entorno de trabajo Microsoft .NET Compact Framework (basado en la
arquitectura del popular entorno .NET Framework).
Silverlight también incluye una colección de clases llamada BCL (En Español,
Libreria de Clases Base) que soportan lectura y escritura de ficheros, manipulación
de XML y manejo de gráficos.
- Microsoft XNA (Xbox New Architecture):
El XNA Framework es una implementación nativa de .NET Compact Framework
que incluye un amplio conjunto de bibliotecas de clases, específicos para el desarrollo de
juegos, por ejemplo para el manejo de dispositivos de entrada, tratamiento de sonidos y
13
videos, carga de modelos y texturas, uso de ficheros de forma transparente a la plataforma
en la que se ejecute, desarrollo de juegos online, etc…
Permite desarrollar juegos para Windows Phone OS 7.0 CTP, Xbox 360, Zune HD y
Windows 7.
Una de los contras más significativos del Windows Phone 7 es la carencia de
Multitarea.
Entre el iOS, Android y Windows Phone 7, este último es el único que carece de
dicha funcionalidad. Por otra parte, también hay que destacar que esta carencia hace que el
sistema operativo sea mucho más rápido que, por ejemplo, Android.
1.1.3 Android.
Android es un sistema operativo basado en Linux diseñado originalmente para
dispositivos móviles, tales como los comúnmente conocidos “smartphones”, pero que
posteriormente se expandió su desarrollo para soportar otros dispositivos tales como
tablets, reproductores MP3, netbooks, etc.
Este sistema operativo móvil tiene una gran comunidad de desarrolladores
programando aplicaciones para extender la funcionalidad de los dispositivos que lo
soportan.
El lenguaje de programación en el que está basado el SDK de Android es Java,
aunque también se pueden utilizar lenguajes como Javascript, C#, Boo o incluso Phyton
dentro de otras aplicaciones como, por ejemplo, Unity 3d (ya que a la hora de compilar el
propio Unity 3d hace las conversiones pertinentes para crear un archivo con el mismo
formato y extensión que si lo hubiéramos compilado directamente como proyecto de
Android en Java).
La estructura del sistema operativo Android se compone de aplicaciones que se
ejecutan en un “framework” Java de aplicaciones orientadas a objetos sobre el núcleo de
las bibliotecas de Java en una máquina virtual Dalvik con compilación en tiempo de
ejecución.
14
2
Especificaciones del videojuego
2.1
Género
Se trata de un videojuego que entraría a la clasificación de videojuego de Rol.
Este tipo de videojuegos su mayor importancia recae en que tiene una historia de
fondo, con una serie de personajes controlables que recorren el escenario del juego
hablando con la gente, luchando contra enemigos.
En referente a las luchas, en este género, existen de varios tipos, en tiempo real, por
turnos, etc.
Cada personaje cuenta con una serie de atributos: vida, magia, fuerza de ataque,
fuerza mágica, defensa, etc.
2.2
Objetivo del videojuego
En este videojuego, el objetivo que se quiere lograr te lo irán contando las personas
con las que nuestro personaje se vaya encontrando por el escenario.
Pero para resumirlo, se trata de que nuestro personaje a que primeramente encuentre
la localización de una serie de enemigos a los que ha de derrotar haciendo uso de sus
poderes y habilidades para salir vencedor de las luchas. En este juego van a existir 3 clases
de enemigos: los enemigos ordinarios, los “minijefes”, y el jefe final. La condición para
lograr llegar a luchar contra el jefe final, es que previamente nuestro personaje tiene que
derrotar a los “minijefes” que hay en el escenario. Una vez haya conseguido eliminar al
jefe final, nuestro personaje se deberá de dirigir hacia un barco, a este barco no podrá
acceder hasta que no derrote al jefe final, así de lo indicará el capitán del barco. Finalmente
cuando lo logre y coloque el personaje delante del timón del barco, el juego habrá
finalizado. Haciéndose la suposición que nuestro personaje se dirige rumbo a nuevas
aventuras.
2.3
Sistema de batalla
Para el sistema de batalla se ha optado por un sistema por turnos de 1 vs 1, tal y
como se puede observar en la figura 3.4.
15
Este tipo de sistema de batalla, todos los personajes restarán preparados para atacar
hasta que el usuario no pulse el botón de atacar, o bien realice algún tipo de hechizo
mágico. Como que se trata de un sistema por turnos se ha optado a que nuestro personaje
siempre será el primero en atacar, y finalmente cuando éste haya terminado, dará paso al
enemigo.
16
3
Diseño de la aplicación
3.1
Pantalla inicial
Será la primera imagen que aparezca al abrir la aplicación.
Figura 3.1. Pantalla inicial
3.2
Menú principal
Consta de la imagen de fondo y un menú con una serie de botones situados a la parte
izquierda en forma de columna.
Figura 3.2. Menú principal
3.3
El juego
Consta de un escenario con variedad de localizaciones, en las que el personaje podrá
hablar con la gente que se encuentre, luchar contra enemigos, etc. Según en qué
localización nos encontremos, aparecerá un “pop-up” en la parte superior, tal y como
podemos observar en la figura 3.3, asimismo en la misma posición aparecerán otros
mensajes cuando el protagonista se acerque a la gente que se vaya encontrando. En la parte
17
inferior también aparecerá un botón de lucha siempre que nos encontremos a un enemigo
y el protagonista se le acerque. Hay también un joystick en la parte inferior izquierda para
mover el protagonista a cualquier dirección, y un botón desplegable en la parte inferior
derecha.
Figura 3.3. Inicio del juego
3.4
Escenarios de batalla
En la parte superior se encuentran los iconos, el nombre y sus atributos tanto de
nuestro personaje, situado a la parte derecha, como del enemigo. En la parte central se
encuentra una imagen de fondo y las animaciones de nuestro personaje y del enemigo.
Finalmente en la parte inferior se encuentra un botón de atacar, un botón desplegable para
realizar hechizos y/o un botón para huir de la batalla.
Figura 3.4. Escenario de batalla
18
3.5
Pantalla de finalización del juego
Esta pantalla será la que se mostrará al finalizar el juego. Consta de una imagen de
fondo y un botón para regresar al menú inicial.
Figura 3.5. Fin del juego
3.6
Pantalla de “Game Over”
Esta pantalla aparecerá siempre que nuestro personaje sea vencido en batalla, consta
de una imagen de fondo y un botón para regresar al menú principal.
Figura 3.6. Game Over
19
3.7
Pantalla de instrucciones
Consta de una imagen de fondo, un menú desplegable situado a la parte izquierda y
un botón para regresar al menú principal.
Figura 3.7. Instrucciones del juego
3.8
Pantalla de configuración del sonido
Consta de una imagen de fondo, en el centro se encuentran 2 botones y 2 barras
reguladoras para controlar tanto el volumen de la música como del sonido al pulsar los
botones, y finalmente en la parte inferior izquierda hay un botón para regresar al menú
principal.
Figuro 3.8. Opciones de sonido
20
3.9
Pantalla de créditos
Costra de una imagen de fondo, un texto y un botón en la parte inferior izquierda
para regresar al menú principal.
Figura 3.9. Créditos
4
Desarrollo - Creación del videojuego
A continuación se detallan todas las etapas que se han ideo haciendo para elaborar
este videojuego. Se tiene que tener en cuenta que en muchas ocasiones se ha dado el case
de volver en una / varias etapas que ya se había hecho, para rehacer y/o ajustar algún
detalle.
4.1
Selección de las imágenes
Para la creación de un videojuego, primeramente es necesario tener un concepto de
cómo va ser el videojuego, que personajes va a tener, los escenarios, etc.
En este caso, todos estos pasos los obviamos, ya que gracias a esta página web:
http://www.goldensun-syndicate.net/sprites/ , adquirí la gran mayoría de material gráfico.
En esta página encontré todo solo iconos necesarios para los diálogos, los personajes
del juego, la gran mayoría de objetos para crear los escenarios, etc.
A pesar del enorme material que encontré en esta página aún había partes del
escenario que me faltaban, partes como, la hierba del escenario, las montañas, el agua, etc.
21
Para ello decidí de utilizar el emulador “VisualBoy Advance”. Se trata de un
emulador de la videoconsola GameBoy Advance de Nintendo, con el cual fui extrayendo
partes del escenario del videojuego original, mediante ficheros .png.
4.2
Selección de los sonidos y canciones
En referente a la música que iba a escoger para el juego, también opté de utilizar la
música origina del videojuego, pero esta vez el material ya lo tenía, debido a que tengo la
banda sonora en formato CD.
En lo referente a los sonidos del juego, es decir, cuando se pulsa un botón para
confirmar alguna acción, o bien si se quiere volver a atrás, etc., no los tenía.
Para ello utilicé otra vez el emulador anteriormente mencionado, pero esta vez
combinado con el programa Audacity, se trata de un programa para la grabación de audio,
asimismo como su edición.
Con la combinación de estos 2 programas, finalmente conseguí todos los sonidos que
creí convenientes para el videojuego.
4.3
Creación del escenario
Para la preparación del escenario, fueron necesarios varios pasos previos.
El escenario del videojuego está creado mediante el programa Tiled Map Editor, el
cual es compatible con la librería cocos2d.
Para la creación de escenarios en este programa, se requieren conjuntos de patrones.
Estos patrones decidí hacerlos de 32 x 32 píxeles, tal y como consta en las Decisiones de
diseño.
4.3.1 Creación de patrones
Debido a que no tenía ningún conjunto de patrones, opté de utilizar el programa
Photoshop, para crearlos.
22
Primeramente, escogí el material que creí suficiente para realizar el juego.
Seguidamente, en un archivo en blanco fui colocando cada una de las imágenes, teniendo
siempre en cuenta el tamaño que tenían los patrones.
Hubo muchos casos en los que tuve que editar las imágenes, debido al problema
mencionado.
4.3.2 Creación del conjunto de patrones y de las capas
En Tile Map Editor, para crear los escenarios, es necesaria como mínimos una capa y
un patrón.
Para crear el escenario fueron necesarios 5 conjuntos de patrones.
Para crear el escenario fueron necesarias 6 capas:

Background, en esta capa, es la capa base, donde se fue colocando la hierba,
el agua, las montañas, etc.

Foreground, todo lo referente a casas, puentes, muros, estatuas, se colocó en
esta capa.

Trees, tal y como lo indica el nombre de la capa, en ésta de colocaron todos
los árboles del escenario

Character, en esta capa solamente se colocó el punto en el cual, el
protagonista del videojuego de colocaría al iniciar una nueva partida.

NPCs, es la capa donde se encuentran todos los personajes que aparecen en el
escenario.

Misc, esta es la capa más especial. Se trata de una capa que se utilizará para
controlar las diversas situaciones que ocurrirán cuando la aplicación se
ejecute, tales como:
o Colisiones
o Hablar con los personajes
o Luchar contra los enemigos
o Cambiar la música en el momento que el personaje cambie de
localización
23
o Etc.
Cada capa, excepto la capa “Character”, le corresponde un conjunto de patrones con
el mismo nombre, más que nada para simplificarlo.
4.4
Creación del menú principal
Hasta esta etapa en el proceso de la aplicación no se había tocado nada de código.
A partir de aquí, todo el código que se utilizará estará escrito en el lenguaje
Objective-C, que es una variante del lenguaje C.
Para crear el menú principal, se tendrán que crean 2 nuevos ficheros, un fichero
llamado MenuLayer.m y otro fichero MenuLayer.h.
E l fichero .h, tiene el mismo comportamiento que en el lenguaje C.
El fichero .m, lo más destacable son las funciones scene y init.
La función scene será la encargada de implementar la escena o vista del menú
principal.
La función init, es una función básica, que se llamará siempre al inicio de la
ejecución del archivo.
En esta función cargaremos la imagen de fondo e incluiremos un menú con botones.
Véase figura 3.2.
En un principio estos botones no tendrán ninguna función, pero a medida que
vayamos creando las nuevas pantallas, éstos nos servirán para cambiar de esa pantalla
mediante la llamada a la función correspondiente.
Una vez realizado el punto 4.5, en la función init, llamamos la función para que la
música del menú arranque. Esta función solo se llamará solamente en el caso de que no
haya ninguna canción en marcha.
24
4.5
Creación del menú de opciones
Los ficheros que conforman el menú de opciones son los ficheros OptionsLayer.m y
OptionsLayer.h.
Estos 2 ficheros serán los que crearán el fondo y los botones que se ven en la figura
3.8.
Este menú lo pretende es ajusta el volumen de la música y de la pulsación de
botones, cosa que aún no está implementada.
Por eso se crean 2 nuevos ficheros, MusicLayer.m y MusicLayer.h, que serán los
encargados de cargar todas las canciones y sonidos que van a sonar en la aplicación.
En el fichero MusicLayer.m se crean para cada una de las canciones y sonidos, una
función. Con eso lo que se consigue es que se globaliza en un solo fichero todas las
canciones y sonidos, y que cualquier fichero que las/los requiera, no tiene nada más que
llamar la función correspondiente a esta/este.
En el caso del sonido, este se llamará a todas y cada una de las funciones que se
llamen cuando de pulse un botón.
Los botones de “Música” y “Sonido”, su función será la de silenciar completamente
el tono o devolverlo al tono que estaba anteriormente.
Tanto la música como el sonido, disponen de una barra deslizante, mediante la cual
se puede regular el tono.
La función del botón “Atrás”, es como su nombre indica, volver al menú principal.
4.6
Creación de la pantalla de instrucciones
Como se puede comprobar en la figura 3.7, el texto que aparece en la parte izquierda
de la pantalla, son en realidad elementos del menú.
Cuando se pulse uno de los elemento, pongamos por ejemplo, el elemento
“Movimiento”, la pantalla pasará a ser la siguiente:
25
Figura 4.6.a.Instrucciones para mover al personaje
En el caso de pulsar “Hablar será esta otra:
Figura 4.6.b. Instrucciones para hablar con la gente
Y Finalmente si se pulsa “Luchar” será esta:
Figura 4.6.c. Instrucciones para luchar en batalla
Para regresar de nuevo a la pantalla que corresponde a la figura 3.7, solo se tendrá
que pulsar donde pone “ok”, en la parte inferior de la pantalla.
Como en el caso del menú de opciones, el botón “Atrás”, te hace volver al menú
principal.
26
4.7
Creación de la pantalla de créditos
Como se puede comprobar en la figura 3.9, solo consta de una imagen de fonda, un
texto y el ya conocido botón “Atrás”.
4.8
Inserción del escenario a la aplicación
A partir de esta etapa llega el momento de añadir el escenario creado en el programa
Tiled Map Editor a cocos2d.
Los ficheros encargados de este escenario serán GameLayer.m y GameLayer.h.
Para cargar el escenario, es suficiente de agregar estas líneas dentro de la función
init:
self.Map = [CCTMXTiledMap tiledMapWithTMXFile:@"FinalMap.tmx"];
self.BgLayer = [_Map layerNamed:@"Background"];
self.FgLayer = [_Map layerNamed:@"Foreground"];
self.TreesLayer = [_Map layerNamed:@"Trees"];
self.NPCsLayer = [_Map layerNamed:@"NPCs"];
self.MiscLayer = [_Map layerNamed:@"Misc"];
_MiscLayer.visible = NO;
[self addChild:_Map z:-1];
En la penúltima línea, haremos que cuando el escenario se muestre por pantalla, la
capa “Misc” que creamos, esté oculta, ya que no nos interesa que se vea.
La última línea de código, sirve para añadir el escenario y hacer que sea la capa más
inferior que se muestre por pantalla.
Todos los elementos que se vayan añadiendo, siempre estarán por encima del
escenario.
4.9
Posicionamiento del personaje en el escenario
Para colocar a nuestro personaje en el escenario y posicionarlo, haremos uso de la
capa “Character”. Veámoslo en el código:
CCTMXObjectGroup *Chars = [_Map objectGroupNamed:@"Character"];
NSMutableDictionary *GameStart = [Chars objectNamed:@"Start"];
int x = [[GameStart valueForKey:@"x"] intValue];
int y = [[GameStart valueForKey:@"y"] intValue];
self.Character = [CCSprite spriteWithFile:@"Isaac_S.png"];
_Character.position = ccp(x,y);
[self addChild:_Character z:50];
27
4.10 Testeo del movimiento del personaje mediante eventos touch y control de la
cámara
En un principio, el movimiento del personaje se movía por el escenario mediante los
eventos touch, es decir, el personaje se movía a la dirección donde se había pulsado en
pantalla con el dedo.
Este tipo de movimiento tenía un inconveniente, que solo se movía un espacio de un
patrón (32 x 32 píxeles) en dirección al lugar de toque de pantalla.
A pesar de realizar pruebas para solventar este problema, y haber realizado el
movimiento del personaje con animaciones, esta forma de movimiento se descartó.
En esta fase de pruebas, se desarrollo el control de la cámara.
El control de la cámara permite que mientras el personaje de vaya moviendo por el
escenario, esta vaya cambiando en tiempo real. Esta actualización en tiempo real es posible
debido a que la función de la cámara es llamada 60 veces por segundo, mediante la función
update.
4.11 Testeo del movimiento del personaje mediante acelerómetro 1
Para hacer posible el uso del acelerómetro, es necesario habilitarlo, cosa que se hace
mediante esta línea:
self.isAccelerometerEnabled = YES;
Una vez habilitado, con la función accelerometer, ya se puede configurar todo para
que el personaje se mueva según el movimiento del iPhone, en este caso.
A continuación se optó para que según la dirección en la que se moviera al personaje,
a este se le cambiara la imagen, para hacer más creíble el movimiento.
En la última versión de la aplicación se modificó para que el acelerómetro se pudiera
desactivar dentro del menú descrito en el punto 4.13.2.
1
Solamente se puede testear esta función mediante el dispositivo físico.
28
4.12 Inserción el menú del juego
El menú del juego no se puede poner directamente encima del escenario, sino que se
tiene que añadir encima de la vista del escenario. El menú del juego está creado en los
ficheros HudLayer.m y .h, más que nada para que todo el código y los ficheros estén
organizados y sea posible una mejor y fácil lectura, además que de esta manera todo está
más organizado.
Cuando en el punto 4.8 se hizo que el escenario siempre quedara por debajo de
cualquier otro elemento, fue precisamente para este caso entre otros. De esta manera el
menú siempre estará por encima.
En referente al menú, solamente comentar que se colocaron todos los botones,
preparados para hacer su función. Estos botones en un principio están todos ocultos para
no estorbar. Solamente el botón “Menú” es visible, véase figura 3.3.
En la figura a continuación se pueden observar los botones que estaban ocultos.
Éstos se vuelven visibles siempre y cuando se pulse el botón “Menú”, en cambio el botón
“Menú” se oculta, así como el joystick del punto 4.13; y aparece en su lugar el botón
“Atrás”.
Figura 4.12. Opciones del menú del juego
4.12.1 Inserción del menú de estado del personaje
Cuando se pulsa el botón “Estado”, éste llama la función que hace que se vuelva
visible toda la información referente a nuestro personaje, con sus atributos para la batalla,
juntamente con un icono de éste. Al mismo tiempo que se vuelve visible toda esta
información, los botones que forman parte del menú excepto el botón “Estado” se vuelven
invisibles. Para más aclaración véase la figura que hay a continuación.
29
Figura 4.12.1. Menú estado del personaje
4.12.2 Inserción del menú de opciones de sonido y del acelerómetro
Este menú se compone de los mismos elementos que el menú de opciones al que se
accede desde el menú principal, solo con el añadido del botón “Acelerómetro”, que su
función es la de activar/desactivar el acelerómetro y así permitir o no el movimiento del
personaje mediante este.
Figura 4.12.2 Comparativa de los menús de opciones
Como en el caso del punto 4.12.1, también desaparecen los botones del menú,
exceptuando al botón de “Opciones”.
30
4.12.3 Inserción de las opciones para salir del juego
Para salir del juego, se ha optado para tener 2 métodos de salir del juego desde el
menú y volver a la pantalla inicial.

Pulsando el botón “Inicio”, aparecerá en pantalla en mensaje que se puede
observar en la siguiente figura:
Figura 4.12.3.a. Opción para salir del juego sin guardar
Si se da el caso de que se pulsa el botón “Sí”, se volverá al menú principal de juego
habiendo perdido todo es progreso del juego.

Pulsando el botón “Guardar”, aparecerá en pantalla en mensaje que se puede
observar en la siguiente figura:
Figura 4.12.3.b. Opción para salir del juego guardando es estado de la partida
Si se da el caso de que se pulsa el botón “Sí”, también se volverá al menú principal
de juego como en el caso anterior pero con la peculiaridad de que si en el menú principal
se pulsa el botón de “Continuar”, se volverá al punto del juego en el que se guardo.
31
4.13 Testeo del movimiento del personaje mediante joystick
Debido a que se descartó la opción de movimiento del punto 4.10, pensé que era
mejor tener un joystick para mover al personaje. Para la creación y funcionamiento del
joystick, encontré en un video tutorial, como hacían uso de unos ficheros. He utilizado
estos ficheros para la gestión del movimiento del joystick. Se trata de los ficheros
SneakyJoystick.m y .h, además de los ficheros SeakyJoystickSkinnedBase.m y .h.
En lo referente al movimiento del personaje, la manera de realizar su movimiento es
muy parecida a la vista con el acelerómetro. El comportamiento es idéntico.
Lo referente a la posición del joystick se puede comprobar en la figura 3.3 que éste
está situado en la parte inferior izquierda.
4.14 Control de colisiones
Con el acelerómetro y el joystick funcionando, todo parece funcionar correctamente,
pero surge un problema y es que nuestro personaje es capaz de atravesarlo todo.
Para evitar este problema tenemos la función de setCharacterPosition. Esta función
comparará si la posición futura del personaje es la misma que el área roja del escenario que
se encuentra en la capa “Misc”. Ésta área roja contiene la propiedad de “collidable”, es
decir, colisionable. Por lo tanto si al comprobar esa comparativa, el resultado de ella sea
cierto, el personaje no será posible de ir más allá.
A continuación se puede comprobar cómo es la capa “Misc”, siendo ésta invisible en
el momento de ejecutar la aplicación.
32
Figura 4.14. Capa Misc
4.15 Cambio de localización del personaje
En el escenario existen varias localizaciones, son las siguientes:

Vale
Figura 4.15.a. Vale

Pradera de Ancara
Figura 4.15.b. Pradera de Ancara
33

Kalay
Figura 4.15.c. Kalay

Puerto de Tolbi
Figura 4.15.d. Puerto de Tolbi

Bosque prohibido
Figura 4.15.e. Bosque prohibido

¿?
Figura 4.15.f. ¿?1
34
Figura 4.15.g. ¿?2
Figura 4.15.h. ¿?3
Cuando el personaje pasa de una localización a otra, véase la figura 4.14, donde el
verde claro corresponde a la localización de “Tale” y el verde oscuro pertenece a la
localización de “pradera de Ancara”; entonces se llama a la función switchLocation. Esta
función es llamada desde la función del joystick y desde la función del acelerómetro.
Su función es doble, por un lado va a generar en la parte superior de la pantalla un
mensaje correspondiente a la localización que se está entrando, y por otro va a cambiar la
música.
Comentar que las figuras 4.15.f., 4.15.g. y 4.15.h.; solo se va a cambiar la música,
no va a aparecer ningún texto.
4.16 Inserción de NPCs en el escenario y preparación de los textos de los NPCs
Cuando ya se ha comprobado que todo lo que se ha hecho hasta este momento
funciona perfectamente, llega el momento de introducir los NPCs, es decir, los personajes
no controlables. Estos personajes se van a colocar directamente al escenario mediante el
Tiled Map Editor, y a cada uno de ellos se le va a incluir una propiedad única, esta
propiedad única va a ser el nombre del personaje. Los NPCs, se van a colocar en la capa
35
con su propio nombre, y en la capa Misc, se pondrá en la misma posición del NPC el
patrón de “collidable”, para que nuestro personaje no le transpase, y alrededor se colocarán
los patrones marrones que tienen la propiedad de “talk”, es decir, hablar.
Asimismo, se creará un fichero .plist que contendrá todos los nombres de los
personajes en una lista. Los nombres de los personajes van a ser la llave del fichero, y
como valor que tendrá cada llave, se le asignará el texto que dirá dicho personaje en el
juego.
4.17 Hablar con los NPCs
Una vez se han preparado todos los ficheros e introducidos todos los NPCs en el
escenario procederemos a realizar las funciones de setTalk y displayDialog.
La función de setTalk será la encargada de comprobar a que NPC se ha acercado
nuestro personaje, y enviarle a la función displayDialog el nombre del NPC.
La función displayDialog, como su nombre indica, será la encargada de mostrar en la
parte superior de la pantalla, dentro de un cuadro de diálogo, el texto del nombre del NPC
que se le ha pasado por parámetro. Este cuadro de diálogo será visible durante un cierto
periodo de tiempo, que luego se irá ocultando hasta desaparecer.
Figura 4.17. Ejemplo de diálogo con un NPC
36
4.18 Creación de los atributos de todos los personajes
Se han creado los ficheros Characters.m y .h, dentro de los cuales se han ido creado
todos los personajes que van a participar en batalla. A cada personaje se le han definido
una serie de atributos, los cuales están ajustados según a cada uno.
En la figura 4.12.1, se pueden comprobar los atributos que tiene nuestro
protagonista.
Los atributos son los siguientes:

Hp, corresponde a la vida actual del personaje

MaxHp, corresponde a la vida que puede tener como máxima el personaje.

Psy, corresponde a la magia actual del personaje.

MaxPsy, corresponde a la magia que puede tener como máximo el personaje.

Atk, corresponde al poder de ataque físico que tiene el personaje.

PsyAtk, corresponde al poder mágico que tiene el personaje.
4.19 Creación de las animaciones de batalla
4.19.1 Pasos previos
Cabe puntualizar que en cocos2d, para la realización de animaciones, se tendrá que
seguir una serie de pasos específicos. En el caso que tengamos una imagen .gif, esta si la
insertamos directamente en cocos2d, solo será capaz de mostrar la primera imagen de la
animación.
Debido a la peculiaridad de cocos2d, para cada animación se ha seguido una serie de
pasos para lograr la animación de estas imágenes .gif. A continuación se detallan los pasos
seguidos:
 A partir de una imagen .gif animada procedemos a abrirla con el programa
Photoshop.
 Seguidamente procedemos a extraer todas las imágenes que conforman dicha
animación, mediante la opción de Exportar  Interpretar video.
37
 Una vez hemos extraído todas las imágenes, mediante el programa Zwoptex,
vamos a coger todas estas imágenes, las trataremos de manera que sea compatible
con cocos2d.

Con Zwoptex, se van a crear 2 archivos, un archivo .png, y otro .plist .
4.19.2 Inserción de las imágenes animadas
Para poder realizar las animaciones en cocos2d, se requerirán 2 archivos. El primer
archivo, es un archivo .png que contendrá todas las imágenes que se requieran para la
animación, y el otro archivo será un archivo .plist (property list), que contendrá las
coordenadas de cada frame (cada imagen que conforma la animación). Ambos archivos
deberán de tener el mismo nombre, de lo contrario no sería posible realizar la animación.
Una vez tenemos estos archivos, en nuestro código se requerirán 5 objetos.
1. Cache
2. Frame array
3. Animation object
4. Animation action
5. Sprite
Ejemplo de código para la animación de nuestro personaje:
-(void) initIsaacAnimation {
CCSpriteFrameCache *cache=[CCSpriteFrameCache
sharedSpriteFrameCache];
[cache addSpriteFramesWithFile:@"Isaac_lBlade_Back.plist"];
NSMutableArray *framesArray=[NSMutableArray array];
for (int i=1; i<5; i++) {
NSString *frameName=[NSString
stringWithFormat:@"Isaac_lBlade_Back%d.png", i];
id frameObject=[cache spriteFrameByName:frameName];
[framesArray addObject:frameObject];
}
id animObject=[CCAnimation animationWithFrames:framesArray
delay:0.25];
id animAction=[CCAnimate actionWithAnimation:animObject
restoreOriginalFrame:YES];
animAction=[CCRepeatForever actionWithAction:animAction];
_IsaacAnim = [CCSprite
spriteWithSpriteFrameName:@"Isaac_lBlade_Back1.png"];
_IsaacAnim.anchorPoint = ccp(0,0);
_IsaacAnim.position = ccp (350,75);
_IsaacAnim.scale = 2;
[self addChild:_IsaacAnim];
38
[_IsaacAnim runAction:animAction];
}
Para más información, mirar la API de cocos2d y los ficheros correspondientes a las
batallas.
4.19.3 Secuencias de batalla
Una vez hemos insertado las animaciones, llega la hora de crear las secuencias de
batalla. En un momento inicial, tanto nuestro personaje, como el enemigo, estarán en una
posición fija y con la animación de “preparados” repitiéndose hasta que no se realice
ninguna acción.
4.19.3.1Secuencia de ataque físico
 Nuestro personaje con la animación inicial se va a desplazar hasta donde se
encuentra el enemigo.
 A continuación, se ocultará esa animación para dar lugar a la animación de
ataque.
 Cuando esta termine, va a desaparecer, para volver a la animación inicial.
En ese mismo momento, la animación del enemigo también se ocultará y
dará paso a la imagen de “enemigo herido”.
 Unos instantes después, el enemigo va a volver a su animación inicial, y
nuestro personaje se desplazará hasta su posición inicial.
4.19.3.2Secuencia de ataque mágico
Ésta secuencia sólo va a ser posible, siempre y cuando nuestro personaje y/o el
enemigo, tengan suficiente “Psy”.
La secuencia será la siguiente:
 Nuestro personaje cambiará su animación inicial, por la animación de
ataque mágico.
 A continuación, en la posición dónde se encuentra el enemigo, aparecerá la
animación del ataque mágico.
39
 Cuando esta termine, la animación del enemigo también se ocultará y dará
paso a la imagen de “enemigo herido”.
 Finalmente, unos instantes después, el enemigo va a volver a su animación
inicial.
4.19.3.3Secuencia de cura del personaje
 Nuestro personaje cambiará su animación inicial, por la animación de
ataque mágico.
4.19.3.4Secuencia de derrota
En el caso de que nuestro personaje se encuentre sin vida, después de que el enemigo
le ataque, se va a realizar la siguiente secuencia:
 Nuestro personaje reemplazará la animación inicial por la imagen de
“personaje derrotado”.
En referente a los ataques de los enemigos, son casi idénticos a los de nuestro
personaje, entendiéndose como casi idénticos, como que en algunos casos los enemigos no
tendrán una secuencia animada del ataque, sino que sólo será una única imagen.
40
4.20 Creación de las batallas
4.20.1 Actualización de la vida y “Psy” de los personajes
En el principio de cada batalla, tanto nuestro personaje, como el enemigo,
inicializaran la vida y la “Psy”, éstas se inicializaran en color verde. Cada vez que uno u
otro realice un ataque, sea físico o mágico, al contrario, a éste se le va a reducir la vida. En
el caso que nuestro personaje realice “cura”, la vida le va aumentar, según el poder mágico
que éste tenga.
La actualización se va a realizar, en el momento inmediatamente siguiente a la
animación de “enemigo herido”/ ”personaje herido”, o bien si el personaje realiza “cura”,
esta actualización se hará cuando acabe la animación de ataque mágico.
Se ha tenido en cuenta que, cuando el enemigo o nuestro personaje, su vida o su
“Psy” estén entre un 15% y un 50% del su máximo, el color se cambiará a amarillo. Lo
mismo sucederá si está debajo del 15%, pero ésta vez en rojo.
4.20.2 Formas para salir del combate
Normalmente existirán 3 formas para salir del combate: ganando al enemigo, ser
vencido, o bien, huyendo del combate.
Cuando nuestro personaje haya dejado sin vida al enemigo, aparecerá un botón de
“continuar”, que nos devolverá al mismo punto del mapa del que estábamos antes del
combate.
En el caso que fuéramos derrotados, la pantalla de nos irá haciendo negra, hasta
aparecer una pantalla de “Game over”. En esta pantalla se nos dará la opción de
“continuar”, que nos devolverá a la pantalla de inicio.
La última opción solo estará disponible en los combates normales, es decir, en los
combates contra los jefes, esta opción no existirá. En el caso de que se pulse el botón de
“huir”, regresaremos al mismo punto del mapa del que estábamos antes del combate.
41
4.21 Creación de la pantalla de Game Over
Como se puede comprobar en la figura 3.6, hay una imagen de fondo y el botón de
“Continuar”, situado en la parte inferior derecha, que su función es la de redireccionar
hacia el menú principal.
4.22 Creación de la pantalla de Fin del juego
Como se puede comprobar en la figura 3.5, hay una imagen de fondo y el botón de
“Continuar” ”, situado en la parte superior derecha, que su función es la de redireccionar
hacia el menú principal.
42
5
Decisiones de diseño
La aplicación está pensada para ejecutarla en iPhone, por ese motivo la resolución de
la pantalla se ha restringido a 480 x 320 píxeles.
Para la ejecución de la aplicación, se han restringido las vistas. Es decir que sólo
están disponibles las vistas apaisadas.
5.1
Limitaciones para crear el escenario

Con Tiled Map Editor y la librería cocos2d, existen varias limitaciones.
Una de ellas es que según puede comprobar es que cocos2d como máximo
acepta escenarios no superiores a 175 x 100 patrones, en los que cada patrón
es de 32 x 32 píxeles. Estas son las medidas que utilicé para el escenario,
quería aprovechar al máximo estas dimensiones.

La otra limitación que existe entre cocos2d y Tiled Map Editor, es que en
cada capa sólo admite un conjunto de patrones. Lo que sí es posible hacer es,
utilizar un conjunto de patrones en varias capas.
5.2
Menú principal

El botón de “Continuar”, va a provocar la finalización de la aplicación en el
caso de que no se haya guardado ninguna partida, por ese motivo se ha escrito
un mensaje en color rojo, justo debajo del botón.

Con relación al punto anterior mencionar que cuando se guarda la partida
desde el juego, lo que en realidad se hace es un “pushscene”. Es decir, se
coloca encima de la pila de “scenes” (escenas), el juego.
Cuando se pulsa el botón de “Continuar” desde el menú principal, lo que se
hace es un “popscene”, es decir, se desapila la escena cosa que hace posible
recuperar la escena del juego, en el estado que se encontraba la última vez.
5.3
Juego
 Cuando se inicia el juego, el acelerómetro por defecto está habilitado, en
caso de que se quiera deshabilitar, basta con ir al menú de opciones, dentro
del juego, y pulsar el botón del “Acelerómetro”.
43
 Existe un inconveniente con el acelerómetro, y este se da a conocer cuando
se cambia de una vista apaisada a la otra. Cuando se cambie la vista, el
movimiento del iPhone para mover al personaje en cualquier dirección,
tendrá que ser el movimiento inverso. Pongamos por ejemplo de que
queremos mover nuestro personaje hacia la derecha, para lograr moverlo
hacia la derecha, tendremos que mover el iPhone hacia la izquierda.
 Cada localización que hay en el juego, le pertenece un patrón, el cual se ha
ido colocando en la capa “Misc”.

Se ha optado para que a cada localización tenga su propia canción.
 Cuando el personaje cambie de localización, hará que la música de la
antigua localización se pare, y empiece a sonar la música de la nueva
localización.
 Para hablar con los NPC, es suficiente acercarse a éste y que ambos
personajes colisionen.
 Para pasar a las pantallas de batalla, que ha optado de hacer aparecer el
botón de “Luchar”, cuando el personaje se coloque justo encima del
enemigo.
 Esta transición de escenas, está hecha mediante “pushscene” y “popscene”.
Así nos aseguramos que cuando se haya salido de la escena de la batalla, se
vuelva al mismo punto del escenario. En el caso que se hubiera perdido el
combate y salga la escena de “Game Over”, esta limpiará la pila de escenas
que se había creado.
 En los combates, he optado de hacerlos por turnos, y en los que siempre
nuestro personaje será el primero de atacar, para que luego lo haga el
enemigo.
 La mayoría de enemigo tendrán solo la opción de realizar un ataque físico,
por ello que siempre nos atacarán una vez lo haya hecho nuestro personaje.
 Existe un “minijefe”, que sólo nos podrá atacar mediante ataques mágicos.
Estos ataques mágicos consumen poder mágico, y por ello su uso es
limitado. En el momento que haya gastado todo su poder mágico, se verá
forzado a no poder atacarnos.
44
 Para el jefe final, he decidido que éste disponga de 2 tipos de ataque, el
físico y el mágico. Mediante una función random, este irá alternando los
ataques.
 En referente al jefe final, el botón de “Luchar”, no aparecerá hasta que se
hayan derrotado todos los “minijefes”. Se ha creado una variable entera, a la
que se la incrementa cada vez que se derrota a un “minijefe”.
 Para poder finalizar el juego, nuestro protagonista tendrá que entrar en el
barco que hay en el “Puerto de Tolbi”. A este solo podrá acceder una vez
que haya derrotado al jefe final. Para ello se ha creado una variable
booleana que se hará cierta, cuando se le haya derrotado.
 En la lucha contra estos “minijefes” y contra el jefe final, se ha optado de
eliminar la opción de huir de la batalla por un motiva doble, por el mero
hecho que se trata de una lucha “importante” y en estas, huir no es una
opción, y también debido a las variables que se comentan en los 2 puntos
anteriores.
 Para el tema de las batallas, he creído conveniente en crear para cada batalla
contra cada enemigo un archivo distinto. Lo he hecho de esta manera por el
hecho de que queda más entendible para la lectura del código.
45
46
6
Planificación temporal
Con el fin de esquematizar lo máximo posible el cálculo del tiempo total del
proyecto, se ha realizado un diagrama de Gantt:
Figura 6. Planificación temporal - Diagrama de Gantt
47
48
7
Conclusiones y mejoras
La realización de este proyecto me ha enseñado muchísimas cosas. El tema de
realizar una aplicación en un lenguaje completamente nuevo para mí y realizar un juego de
este estilo, realmente si alguien me lo hubiera dicho que lo hiciera, no lo hubiera visto
posible.
Gracias a la multitud de páginas en las que había tutoriales para aprender ObjectiveC y Cocos2d, ha sido posible realizar este proyecto.
Toda la experiencia en general de este proyecto ha sido muy satisfactoria, no solo por
el hecho de haber programado en un lenguaje que nunca antes había utilizado, sino en la
multitud de programas que he tocado y utilizado.
Todos estos programas que he utilizado en este proyecto, también he tenido que ir
aprendiendo su funcionamiento, ya que igual que en el caso de Objectice-C, era la primera
vez que los utilizaba.
Por ese motivo, en una cuantas ocasiones se ha dado el caso en el que iba
progresando en el proyecto, pero de repente me daba cuenta de que lo que había hecho
hasta la fecha no era correcto.
Uno de estos ejemplos fue el de la creación del escenario. El escenario que cree la
primera vez, era superior al tamaño máximo que se podía permitir con cocos 2d. O el caso
de los patrones, que no supe hasta que no introduje el escenario en cocos2d para darme
cuenta, que para cada capa sólo se podía utilizar un conjunto de patrones.
Casos como estos, provocaron un retraso en el proyecto, pero mirándolo por el lado
positivo, aprendí de ellos. Si en otra ocasión hiciera otra aplicación ya tendría en cuenta
estos casos, y no me volverían a suceder.
Ver cómo con cada uno de estos programas se iba haciendo parte del proyecto, y ver
luego como poco a poco cada una de las piezas se iban juntando, para mí, personalmente
no tiene precio.
A medida que iba progresando en el proyecto, observé que había muchos pequeños
detalles que se podían haber mejorado. Quizá si en un futuro decidiera seguir mejorando
este proyecto y hacerlo mucho más grande de lo que es, es seguro que los iría añadiendo.
49
50
8
Recursos utilizados
8.1
Xcode
Es el entorno de desarrollo integrado (IDE, en sus siglas en inglés) de Apple Inc. y se
suministra gratuitamente junto con Mac OS X. Xcode trabaja conjuntamente con Interface
Builder, una herencia de NeXT, una herramienta gráfica para la creación de interfaces de
usuario.
Xcode incluye la colección de compiladores del proyecto GNU (GCC), y puede
compilar código C, C++, Objective-C, Objective-C++, Java y AppleScript mediante una
amplia gama de modelos de programación, incluyendo, pero no limitado a Cocoa, Carbón
y Java. Otras compañías han añadido soporte para GNU Pascal,1 Free Pascal,2 Ada y
Perl.3
Entre las características más apreciadas de Xcode está la tecnología para distribuir el
proceso de construcción a partir de código fuente entre varios ordenadores, utilizando
Bonjour.
8.1.1 Historia
Xcode se introdujo el 24 de octubre de 2003 junto con la versión 10.3 de Mac OS X,
siendo desarrollado a partir del anterior entorno de desarrollo de Apple, Project Builder, al
que sustituyó. Project Builder, a su vez, también era una herencia de la compañía NeXT,
fusionada con Apple en 1996.
La aparición de Xcode 2.1 en junio de 2005 fue significativa porque proporcionó a la
comunidad de desarrolladores las herramientas para crear binarios universales que
permiten al software creado para Mac OS X ser ejecutado tanto en la arquitectura PowerPC
como en la nueva, basada en Intel (x86). Esta versión integró además las herramientas y
marcos de trabajo WebObjects de Apple para construir aplicaciones y servicios web de
Java, que anteriormente se vendían como un producto separado por un precio de 699$.
Con el lanzamiento de Mac OS X v10.5 también lo fue el Xcode 3.0, que tenía como
principales novedades la inclusión de Objetive-C 2.0, un nuevo Interface Builder, la opción
de refactorizar proyectos y hacer "snapshosts" del proyecto entre otras.
51
Xcode 4, lanzado a principios de 2011, incluía como novedades una nueva interfaz y
la compatibilidad con Mac OS X 10.7 Lion. Con esta versión, Xcode dejó de ser ompatible
con Mac OS X 10.5 Leopard.
8.2
Cocos2d
Cocos2D es un framework para el desarrollo de juegos en 2D y aplicaciones con alto
contenido interactivo. Cocos2D para iPhone es basado en Cocos2D pero implementa
Objective-C como lenguaje de programación en lugar de Python. Dentro de las
características principales de este framework encontramos:

Integración con motores de física: Box2D, Chipmunk

Manejo de Escenas y efectos de transiciones

Compatibilidad con eventos Touch y el acelerómetro

Texturas PVRTC de 2-bit y 4-bit, texturas RGBA de 16 bits y 32-bit

Basado en OpenGL ES 1.1
Dentro de Cocos2D encontramos tres conceptos principales a considerar: escenas, capas y
objetos. Las escenas equivalen a los niveles o vistas implementadas en un juego. Las
capas se incorporan a las escenas y pueden contener uno o más objetos: menús, botones,
etiquetas, cuerpos, etc. A su vez una escena puede contener una o más capas.
8.2.1 Implementación de Cocos2D en una aplicación
1. Descargar las librerías de Cocos2D para iPhone.
2. Ejecutar el siguiente comando en la consola (dentro de la carpeta descargada):
./install_template.sh
3. Crear un nuevo proyecto en Xcode de tipo cocos2d Application
52
Figura 8.2.1.a. Cocs2d - Nuevo proyecto
4. Compilar y Ejecutar
Figura 8.2.1.b. Simulador iOS
La plantilla creada nos muestra los principales elementos de una aplicación:

CCDirector: Es el controlador principal de nuestra aplicación
[CCDirector setDirectorType:CCDirectorTypeDefault];
53

CCScene: Implementa las escenas o vistas
CCScene *scene = [CCScene node];

CCLayer: Permite la creación de capas (HelloWorld es un objeto tipo CCLayer)
HelloWorld *layer = [HelloWorld node];

CCLabel: Uno de los tipos de objetos que se pueden implementar dentro de una
capa
CCLabel* label = [CCLabel labelWithString:@"Hola Mundo" fontName:@"Marker Felt"
fontSize:64];
En estos momentos tenemos implementadas las librerías de Cocos2D en nuestro proyecto
de Xcode. Ahora podemos utilizar los diferentes componentes que nos brindan estas
librerías y lograr una mejora en el desempeño de nuestras aplicaciones. En el siguiente
artículo revisaremos los conceptos básicos y la utilización de los principales métodos del
framework.
8.3
Tiled Map Editor
El Tiled es un editor de mapas libre escrito en C++ y con la biblioteca QT. El
programa es multiplataforma y de propósito general. Como su propio nombre indica está
hecho para juegos que tienen sus mapas en forma de tiles (casillas) esto es la gran mayoría
de los juegos 2D.
8.3.1 Características

Mapas tanto ortogonales como isométricos.

Formato de archivo XML.

Soporte para múltiples capas tanto de tiles como de objetos.

Soporte para múltiples tilesets.
54

Muy personalizable todas las propiedades de mapas con parejas de clave
valor.

Soporte de color clave y transparencias.

Tamaño de los tiles y mapas totalmente personalizable.
8.3.2 Mapas ortogonales e isométricos
Puedes crear mapas tanto en la vista clásica de los juegos 2D, como en la tan usada
simulación del 3D a través de la vista isométrica. En la imagen inferior podemos ver la
vista ortogonal.
Figura 8.3.2. Tiled Map Editor – Vista ortogonal
Apreciamos como el editor cuanta con herramientas básicas en la parte superior para
el dibujado de mapas como el tampón, el cubo de pintura para rellenar o la goma de borrar,
con un par de usos se controlan todas estas herramienta. En la parte derecha nos
encontramos con dos paneles, en la parte superior el panel de capas. Desde este panel
podemos gestionar en que capa queremos pintar, cambiarles el nombre, ocultarlas o
modificarlas. A parte de elegir su transparencia. Debajo de este panel nos encontramos con
el panel de tilesets que se gestionan mediante pestañas. Ambos paneles son arrastables y se
pueden poner como ventanas flotantes o acomodarlos en cualquier lugar del editor y con
cualquier tamaño.
55
8.3.3 Tamaño de los tiles y mapas totalmente personalizable
Figura 8.3.3. Tiled Map Editor – Nuevo mapa
Cuando creas un nuevo mapa te da a elegir si será ortogonal o isométrico. También
te deja elegir el número de tiles de ancho y alto y el tamaño que tendrán los tiles. Como
vemos totalmente configurable.
8.3.4 Color clave y tilesets
Figura 8.3.4. Tiled Map Editor – Nuevo conjunto de patrones
Cuando se carga un nuevo tileset al mapa nos deja elegir el nombre, la imagen del
tileset. El tamaño de los tiles y el margen y espaciado, esto es, la distancia visual en las que
el editor debe separar los tilesets para un correcto mapeado. También nos deja elegir si usar
color transparente. En el caso de marcarlo podemos escoger un color que representar como
transparente, muy útil para si tienes tilesets con un fondo puesto.
56
8.3.5 Capas de objetos
Una característica muy interesante son las capas de objetos. Esto son capas
especiales en las que se pueden colocar objetos rectangulares con la precisión a pixel y sin
estar ligadas a los tiles.
Cada objeto que creemos tiene un cuadro de propiedades accesibles desde el botón
derecho.
Figura 8.3.5.a. Tiled Map Editor – Propiedades del objeto
En este cuadro de diálogo podemos configurar diferentes datos del objeto como el
nombre, el tipo, la posición, tamaño. Debajo también tenemos una lista con dos campos
nombre y valor. Estas listas nos permitan definir propiedades propias y definir un valor. Es
muy personalizable.
Estos cuadros de propiedades valor no solo están disponibles en los objetos. También
los poseen los tilesets, las capas, los mapas y en realidad casi todos los elementos para que
puedas definir propiedades clave valor de casi todo. Debajo podemos ver un ejemplo de las
propiedades del mapa y posibles usos.
57
Figura 8.3.5.b. Tiled Map Editor – Propiedades del patrón
8.3.6 El formato TMX
Cuando guardas un mapa, el programa crea un fichero con extensión .tmx este
fichero en realidad no es más que un archivo XML que contiene todo los datos de nuestro
mapa. Solo deberemos leer el archivo XML desde nuestro juego (casi todos los lenguajes
tienen bibliotecas para trabajar con XML) y usar los datos como creamos convenientes.
8.4
VisualBoy Advance
Es un emulador de la Nintendo GameBoy Advance, con el cual he extraído gran
parte de los escenarios para el juego, mediante fichero .png que luego he tratado con
Photoshop para luego utilizar estas imágenes en el Tiled Map Editor.
8.5
Photoshop
Se trata esencialmente de una aplicación informática en forma de taller de pintura y
fotografía que trabaja sobre un "lienzo" y que está destinado para la edición, retoque
fotográfico y pintura a base de imágenes de mapa de bits (o gráficos rasterizados). Este
programa lo hemos utilizado constantemente para diferentes cosas a lo largo del proyecto.
Para la extracción de imágenes animadas, edición de imágenes, creación de los patrones
para el Tiled Map Editor, etc.
58
8.6
Zwoptex
Se trata de una aplicación para Mac OS X, mediante la cual podemos crear
animaciones compatibles con la librería de cocos2d.
En la imagen inferior podemos observar el programa en funcionamiento. Hemos
escogido 4 imágenes que formarán parte de una de las animaciones que podremos ver en el
juego.
Figura 8.6. Zwoptex
8.7
Audacity
Se trata de una aplicación para Mac OS X, mediante la cual podemos grabar el
sonido y luego editarlo como a nosotros nos parezca oportuno.
Hemos utilizado este programa para grabar algunos sonidos que faltaban al juego,
estos sonidos están sacados del juego que nos hemos basado.
59
Figura 8.7. Audacity
60
9
Referencias
Tutoriales:
http://www.youtube.com/course?list=EC640F44F1C97BA581
http://www.youtube.com/course?list=EC53038489615793F7
http://www.youtube.com/course?list=ECD6327E00257AF1D0
http://bobueland.com/cocos2d/tutorials/
http://www.youtube.com/playlist?list=PL3D5A9CF48EDF6ED3&feature=plcp
Otras páginas web de interés:
http://www.goldensun-syndicate.net/sprites/
http://www.cocos2d-iphone.org/api-ref/latest-stable/
http://www.cocos2d-iphone.org/forum/
http://razonartificial.com/2010/12/tiled-map-editor-el-editor-de-mapas-libre/
61