universidad de el salvador facultad de ingeniería y arquitectura...

Descripción General del Proyecto y

Guía de desarrollo para el primer día del Taller

Docente Tutor del proyecto

Ing. MAF César Augusto González Rodríguez

Equipo de Desarrollo

Rodrigo Antonio Bazán Molina Jenny Ariela Reyes Cartagena Adolfo José Rivas Escobar Silvia Iveth Vásquez Molina

Taller

Desarrollo de Aplicaciones multiplataforma a base de mapas de

Polígonos de navegación virtual de un sitio de interés.

Universidad de El Salvador

Facultad de Ingeniería y Arquitectura

Escuela de Ingeniería en Sistemas Informáticos

Contenido Guía de desarrollo para el tercer día del Taller ............................................................................... 1

DESARROLLO DE APLICACIÓN BASADO EN MAPA DE POLIGONOS UTILIZANDO COCOS2D-X ........... 2

Objetivo: .................................................................................................................................... 2

Descripción: ............................................................................................................................... 2

1. Entorno de Desarrollo para Pcs con Sistema Operativo Windows 7 u 8. .................................. 3

1.1VmWare Player. .................................................................................................................... 3

1.2 MacOS X. .............................................................................................................................. 6

1.3 Xcode. .................................................................................................................................. 7

2. Desarrollo de proyecto.(creación de la multiplataforma ios-Android) ..................................... 8

2.1 Registro de variables de entorno en Cocos2d-x a través de consola ................................ 9

2.2 Creación del proyecto base a través de consola. ........................................................... 10

2.3 Edición del proyecto en el entorno de desarrollo Xcode. ............................................... 11

3. Creación de proyecto a base de mapa de polígonos. ............................................................ 13

3.1 Creación de primera escena. .............................................................................................. 13

3.2 Creación de la segunda escena. .......................................................................................... 24

3.3 Compilación del proyecto para plataforma Android y creación de archivo .apk................... 32

Guía N° 3 25 de julio de 2014

2014 Página 1

Guía de desarrollo para el tercer día del Taller

Requisitos de los participantes

Conocimientos básicos de programación.

Preferiblemente con Dispositivo móvil con Sistema Operativo Android. o IOS (ipad o

ipod).

Para la realización correcta de la guía, son necesarios los archivos para jugador,

plantillas, mapas y archivos meta.

Duración del tercer día de taller

2 horas 15 minutos


2014 Página 2

DESARROLLO DE APLICACIÓN BASADO EN MAPA DE POLIGONOS

UTILIZANDO COCOS2D-X

En esta guía se realizará la implementación de un mapa de polígonos utilizando los mapas

que se crearon en la guía 2 y las plantillas creadas en la guía 1, para el desarrollo se codificará en el

lenguaje C++ y se utilizará el sistema operativo MacOS X con el Entorno de Desarrollo Integrado

(IDE) Xcode versión 5, el cual nos facilitará la programación.

Al finalizar está guía se observará la funcionalidad de la navegación en el mapa de polígonos

creado al estilo 2D.

Objetivo: Conocer el entorno de desarrollo integrado Xcode 5.

Crear una aplicación multiplataforma para dispositivos móviles a base de mapas de

polígonos. Configurando primero las herramientas para trabajo en Android e IOS.

Comprender el uso básico del framework llamado cocos2d-X, para que sean reconocidos

los mapas de patrones y objetos creados en la guía anterior.

Compilar y ejecutar la aplicación en dos sistemas operativos (Android e IOS).

Descripción:

El IDE(Entorno de Desarrollo Integrado) a utilizar será Xcode, presente en el Sistema operativo

Mac OS X, dicho IDE nos presenta una gran facilidad a la hora de crear proyectos compatibles en

diferentes Sistemas operativos móviles y de escritorio, para ello nos auxiliaremos del lenguaje C++;

si se quiere desarrollar bajo otros IDEs que soporten el desarrollo de estas aplicaciones, existen

alternativas muy buenas como VisualStudio 2012 (con WindowsPhoneSDK) y Eclipse (con

ADT(Android Developer Tools)).

Cocosd2d-X es un framework para el desarrollo de juegos en 2D y 3D, este permite desarrollar

aplicaciones multiplataforma, no solo aplicaciones móviles sino también aplicaciones de escritorio

ya sea bajo el sistema operativo Windows o Mac OSX.

A continuación se presentan las características principales del framework:

Una vez configurados los entornos multiplataforma, se puede optar por utilizar el mismo

lenguaje de programación para la creación de las diferentes aplicaciones.

Soporta el manejo de archivos .TMX (TiledMap) y todos los atributos u objetos que estos

archivos contienen.

El motor gráfico es de fácil manejo.


2014 Página 3

Las librerías presentadas por el framework están creadas casi por completo en el idioma

inglés, por lo tanto son de facil comprensión.

Cocos2d-X permite programar en diferentes lenguajes de programación, tales como: C++.

Javascript y lua, los cuales permiten un desarrollo de juegos de manera sencilla.

En este proyecto se incorporarán los recursos creados en las Guia 1 y 2 desarrolladas los dias

anteriores, y serán utilizados para el desarrollo de esta guía, agregando líneas de programación

para el reconocimiento de los diferentes elementos y la funcionalidad correcta de la aplicación.

1. Entorno de Desarrollo para Pcs con Sistema Operativo

Windows 7 u 8.

1.1VmWare Player. Para el uso del sistema operativo MacOS X virtualizado, se utilizara el programa

VmWarePlayer, el cual es un software que simula sistemas operativos virtuales, a los cuales les

asigna un hardware determinado por el usuario para asi simular de igual manera el sistema

físico de este. Esto requiere un sistema operativo anfitrion que podria ser Windows

Para iniciar a utilizar el software hacer doble clic en el icono de VmWare Player, que se

muestra a continuación.

Abierto el programa, se presentaran las máquinas virtuales existentes en la computadora

utilizada, se utilizara la virtualización del sistema operativo Mac OS X Mavericks, el cual se

presentara de la siguiente manera.

Al seleccionar la máquina virtual, se abrirá otra ventana en la cual se podrán ver el sistema

operativo iniciando su arranque y alguna opciones de VmWare.


2014 Página 4

Acciones para realizar en

la virtualización como

pausar o suspender.

Este botón manda

un crtl+alt+supr

Sirve para ver en pantalla

completa la virtualización.

Las opciones utilizadas en esta guía presentadas por VmWare son las siguientes.


2014 Página 5

En la opción PlayerRemovable Devices aparecerá los discos extraíbles (usb) para darle

connect para hacer uso de ellos.

Ahora que se conocen los elementos que presenta VMWare, para poder ingresar a la virtualización

se tiene la siguiente pantalla:

Digitar la contraseña para ingresar que es compdes2014

De este modo se accederá al entorno de MacOS X.


2014 Página 6

1.2 MacOS X.

MacOS X es un sistema operativo creado por Apple, es de fácil manejo e intuitivo, a

continuacion se muestran los elementos que consideramos principales para desarrollar la

guia:

Barra de menú

Accesos directos de

aplicaciones

Aplicaciones

minimizadas

Papelera de

reciclaje.


2014 Página 7

De las aplicaciones presentadas las que usaremos son :

Xcode

Finder (navegador de carpetas).

aseprite(guia 1)

Terminal

TiledMap(guia 2)

Safari (navegador web)

1.3 Xcode. Es el Entorno de Desarrollo Integrado (IDE) que se utilizará para la codificación de la

aplicación, los elementos importantes a utilizar en su entorno son:

En la barra de herramientas en la parte superior de la pantalla aparecen las siguientes

opciones:

Botón de Build and run y Stop. Ayudará para probar la aplicación.

Botón de control de esquema en construcción, al presionarlo seleccionar el que se

está trabajando :

Botón para seleccionar el simulador para probar la aplicación.


2014 Página 8

Barra de estado de la aplicación.

Barra de navegación.

2. Desarrollo de proyecto.(creación de la multiplataforma ios-

Android) Para la creación del proyecto se necesitan ciertas herramientas externas, que se encuentran

en la carpeta Herramientas en el Escritorio.

Esta carpeta contiene las siguientes subcarpetas, las cuales corresponden a los siguientes

elementos:

ADT, Android Developer Tool es requerido, ya que se necesita de algún SDK de android

para poder crear el proyecto.

Android NDK, este permite crear una aplicación android desde el lenguaje nativo de

android.

Apache ant, este es requerido para la creación del proyecto y la combinación de las

librerías del framework y la aplicación creada.

Cocos2dx 3.0rc2, este contiene todas las librerías a utilizar como también los archivos

necesarios para la creación de un nuevo proyecto multiplataforma.


2014 Página 9

Para la creación de proyecto se necesita trabajar desde la terminal del sistema operativo.

2.1 Registro de variables de entorno en Cocos2d-x a través de consola

Entrando en la terminal accederemos a la carpeta de Herramientas que está ubicada en el

escritorio con el comando cd Desktop/Herramientas, luego entrar a la carpeta de cocos2d-X

con el comando cd cocos2d-x-3.0rc2.

Estando en la carpeta de cocos2d-X se especificaran ciertas variables de entorno, las cuales se

muestran a continuación.

export NDK_ROOT="/Users/pdm-115/Desktop/Herramientas/android-ndk-r9d" export ANDROID_SDK_ROOT="/Users/pdm-115/Desktop/Herramientas/adt-bundle-mac-x86_64-20140321/sdk" export ANT_ROOT="/Users/pdm-115/Desktop/Herramientas/apache-ant-1.9.3" export PATH=$ANT_ROOT/bin:$PATH

Creadas estas variables ejecutar el comando ls, el cual mostrara el contenido de la carpeta actual

(cocos2d-x).

De estos archivos el archivo setup.py será ejecutado, esto para la instalación de cocos2d-x y la

verificación de las variables de entorno, ejecutar el archivo (./setup.py).

Al ejecutar, el framework verifica si se encuentran todas las variables de entorno como se muestra

a continuación:


2014 Página 10

Al finalizar la ejecución del comando anterior, debemos digitar el comando .bash_profile cuando

lo solicite, esto se realiza para que tengan efecto los cambios que se hagan.

2.2 Creación del proyecto base a través de consola.

Se procede a ejecutar el comando “cocos new”, el cual crea un nuevo proyecto de cocos2d-x.

El comando se escribe de la siguiente manera, después de new se escribe el nombre del proyecto,

en este caso “Navegacion”, luego se coloca –p para especificar el paquete a utilizar

(sv.edu.ues.fia.navegacion), luego –l para especificar el lenguaje a utilizar y para finalizar –d que

sería la dirección adonde se crea el proyecto en la computadora.

Al ejecutar el comando de manera exitosa se muestran los cambios realizados por el framework.

Ahora ya creado el proyecto se deben de dar los permisos necesarios para que el proyecto se abra

por Xcode sin ningún problema. Para esto debemos acceder a la carpeta del proyecto con el

comando cd Desktop/Navegacion, luego ejecutar el comando sudo chmod –R 777 ./ el cual

solicitara la contraseña del usuario (compdes2014), al ingresar la contraseña luego de unos

momentos estos permisos estarán otorgados.

En estos momentos minimice la consola y vaya por el entorno visual(finder) hacia la carpeta

navegación.


2014 Página 11

Con estos permisos ubicarse en el escritorio y se observara la carpeta “Navegacion”.

2.3 Edición del proyecto en el entorno de desarrollo Xcode.

Al abrir esta carpeta contendrá varias subcarpetas, muchas de ellas tienen el prefijo proj.,

estas contienen los archivos básicos para los proyectos en la plataforma determinada, la carpeta

Classes contienen los archivos en el lenguaje C++ que se van a estar utilizando, la carpeta

Resources, contienen todos los recursos que se van a utilizar para la aplicación (estos serán

agregados posteriormente desde el IDE), pero todos los recursos agregados serán guardados en

esta carpeta y la carpeta cocos2d contienen todos los archivos de la librería cocos2d-x.

Para ingresar al proyecto, abrir la carpeta proj.ios_mac y dentro de ella hacer doble clic el archivo

Navegacion.xcodeproj, el cual abrirá la aplicación Xcode de MacOSX.

En la barra de navegación del Xcode ubicada a la izquierda se puede observar la estructura de

nuestro proyecto, como también se puede observar otro proyecto interno el cual se llama

“cocos2d_libs.xcodeproj”, este proyecto contiene todos los archivos de la librería cocos2d-x, el


2014 Página 12

cual no será modificado en el desarrollo de la aplicación. También se observan los apartados de las

carpetas Classes y Resources, tal como se mostró en el Finder (navegador de carpetas).

Para la prueba del proyecto creado exitosamente, presionar el botón Build And Run( ) ubicado

en la barra superior de Xcode, observar que el esquema de ejecución sea el de la aplicación y no

las librerías ( ).

Al ejecutar tardara unos minutos compilando todos los archivos de la librería y construyendo el

framework, se observara en la barra superior de estado el progreso en la compilación y ejecución

de la aplicación.

Al terminar de compilar todos los archivos, Xcode abrirá automáticamente el simulador iOS y

ejecutara la aplicación.


2014 Página 13

3. Creación de proyecto a base de mapa de polígonos.

3.1 Creación de primera escena.

Para la creación del proyecto a base de mapa de polígonos se realizaran ciertas modificaciones

en las clases ya creadas, como también se crearan otras clases además de agregar los recursos

necesarios para la ejecución de la aplicación.

Para agregar los archivos necesarios, entrar en la carpeta adonde estén ubicados los recursos a

utilizar, ya sea los originales o los creados personalmente. Se muestra a continuación algunos de

los recursos a utilizar.

Luego seleccionar todos los archivos a utilizar y arrastrarlos hacia la aplicación Xcode, en la barra

de navegación, en el apartado de Resources.


2014 Página 14

Realizar esto para todos los archivos creados, incluyendo los de jugadores.

Al soltar dichos archivos en la sección correspondiente, Xcode presentara una ventana emergente,

la cual preguntara sobre el tipo de copiado, asegurarse de seleccionar “Copy ítems into destination

group’s folder (if needed)” y configurar como se muestra a continuación.


2014 Página 15

Al terminar la carpeta de Resources se verá modificada con la adición de los archivos deseados.

Para empezar con la modificación del código, abrir el archivo HelloWorldScene.h ( ),

en este se agregaran las siguientes líneas de código.

El codigo a agregar es el siguiente, en el cual se declara un objeto de tipo TiledMap, el cual

correspondera a nuestro mapa, 2 objetos TMXLayer, los cuales seran las capas de nuestro mapa y

un objeto Sprite el cual sera la imagen del jugador.

//Codigo 1, declaracion en HelloWorld.h private: cocos2d::TMXTiledMap *mapa; cocos2d::TMXLayer *meta; cocos2d::TMXLayer *limite; cocos2d::Sprite *jugador;

Luego proceder a modificar el archivo HelloWorldScene.cpp, en el cual se borrara el codigo que no

se utilizará, es decir se borraran todos los elementos dentro del metodo “Init” exceptuando el

siguiente codigo:


2014 Página 16

//Codigo 2, metodo init, luego de borrar los elementos no utilizados, si desea puede comentarear los elementos bool HelloWorld::init() { if ( !Layer::init() ) { return false; } //Aqui se ingresara todo el contenido del metodo init return true; }

Escribir el siguiente codigo, en el cual se inicializan los elementos de TiledMap y las capas con los

nombres correspondientes de los archivos a utilizar, tambien se agrega el elemento TMXTiledMap

a la escena. Al inicilizar la capa meta, tambien la ocultaremos con el metodo setvisible, ya que esta

capa no debe de ser observada por el usuario.

//Codigo 3, //Inicializacion de elementos el tilemap int x=0, y=0; mapa = TMXTiledMap::create("mapa1.tmx"); meta = mapa->getLayer("META"); limite = mapa->getLayer("Limite"); addChild(mapa); meta->setVisible(false);


2014 Página 17

Agregar el siguiente codigo, el cual obtiene la capa de objetos creada en el archivo .TMX y

almacena en una variable todos los elementos existenten en esa capa, para asi obtener la posicion

del objeto con el nombre “1”, el cual representara el punto de aparicion o entrada que tendra

nuestro jugador en el mapa1. Como tambien se crea el Sprite del jugador, con el archivo

“jugador01.png”. Se le asigna la posicion obtenida del objeto, como tambien al nivel de el eje z del

jugador se le asigna el mismo nivel que la capa “Limite” de nuestro archivo TMX.

//Codigo 4, //Creacion de jugador y ubicacion de el en el mapa auto Objetos = mapa->getObjectGroup("Entrada"); auto& Entrada = Objetos->getObjects(); for (auto& Obj : Entrada) { if (Obj.asValueMap()["name"].asString() == "1") { x= Obj.asValueMap()["x"].asInt(); y= Obj.asValueMap()["y"].asInt(); } } jugador=Sprite::create("jugador01.png"); jugador->setPosition(x,y); mapa->addChild(jugador); //A continuacion se asigna el valo del eje z al jugador igual a la capa limite jugador->setLocalZOrder(limite->getLocalZOrder());

Ya realizada la modificacion necesaria en el metodo “init”, estaran los elementos ya inicializados,

por lo cual se agregar el metodo público centrarvista (todos los métodos que se agreguen a

continuación se de ben agregar al apartado público) en el archivo HelloWorldScene.h

//Codigo 5, declaracion de metodo CentrarVista, en el archivo .h void CentrarVista(cocos2d::Point posicion);

Se creara el metodo en el archivo HelloWorldScene.cpp, el cual realiza un calculo de la ubicación

según la posicion que se envia, manteniendo siempre la posicion que se envia en el centro del la

pantalla, por lo tanto si se necesitara mover el TMX de ubicación en pantalla, este es desplazado.

Este metodo funciona para que siempre se trate de mantener el Sprite del jugador en el centro de

la pantalla, si el tilemap se acaba deja de desplazarse, evitando asi mostrar parte del mapa sin

contenido en la pantalla.

//Codigo 6, //El metodo siguiente centra la vista para que el jugador se encuentre al centro de la pantalla void HelloWorld::CentrarVista(cocos2d::Point posicion) { cocos2d::Size medida = Director::getInstance()->getWinSize(); int x = MAX(posicion.x,medida.width/2); int y = MAX(posicion.y,medida.height/2);


2014 Página 18

x = MIN(x,(mapa->getMapSize().width * mapa->getTileSize().width)-medida.width/2); y = MIN(y,(mapa->getMapSize().height * mapa->getTileSize().height)-medida.height/2); Point Actual = Point(x, y); Point Centro = Point(medida.width/2,medida.height/2); Point PuntoVista = Point(Centro-Actual); setPosition(PuntoVista); }

Agregar al final del método “init” la ejecución del método CentrarVista, enviando como parámetro

la ubicación del Sprite jugador, por lo cual se centrara la vista al iniciar la aplicación

//Codigo 7, //Centramos la vista desde el punto de inicio del jugador CentrarVista(jugador->getPosition());

Para modificar la resolución de la pantalla y crear un estándar de esta, se modifica el archivo

AppDelegate.cpp ( ) en el cual se crea primeramente el director del juego y

las escenas (agregar el código arriba de la llamada al método SetDisplayStats), se especificara un

tamaño estándar (480,320) para la ejecución de la aplicación.

//Codigo 8, modificacion de pantalla en AppDelegate.cpp //Asignacion de tamaño de vista especifico para todos los dispositivos. director->getOpenGLView()->setDesignResolutionSize(480, 320, ResolutionPolicy::SHOW_ALL);

Abrir el archivo HelloWorldScene.h y agregar los siguientes métodos, estos métodos serán

utilizados para realizar el movimiento del jugador, como también para reconocer los toques que se

den en pantalla.

//Codigo 9, declaracion de metodos en archivo .h bool onTouchBegan(cocos2d::Touch* touch, cocos2d::Event* event); void onTouchMoved(cocos2d::Touch* touch, cocos2d::Event* event); void onTouchEnded(cocos2d::Touch* touch, cocos2d::Event* event); cocos2d::Point CoordenadasEnPosicion(cocos2d::Point posicion); void AsignarPosicion(cocos2d::Point posicion);

Crearemos en el método “init” ubicado en el archivo HelloWorldScene.cpp un objeto listener, que

será el que controlara los eventos toque por toque en pantalla, a este le asignaremos los métodos

de empezar, en movimiento y terminar toque, estos métodos serán modificados posteriormente.

//Codigo 10, agregar listener en metodo init //Creacion de listener para el control de los toques en pantalla. auto listener = EventListenerTouchOneByOne::create(); listener->setSwallowTouches(true); listener->onTouchBegan = CC_CALLBACK_2(HelloWorld::onTouchBegan, this);


2014 Página 19

listener->onTouchMoved = CC_CALLBACK_2(HelloWorld::onTouchMoved, this); listener->onTouchEnded = CC_CALLBACK_2(HelloWorld::onTouchEnded, this); _eventDispatcher->addEventListenerWithSceneGraphPriority(listener, this);

Crear los siguientes métodos de inicio de toque y movimiento de toque, el inicio de toque por el

momento devolverá un booleano true, ya que especificamos que se inició el toque y el de

movimiento no realizara nada por el momento.

//Codigo 11, implementacion de metodos //Metodo que devuelve un valor verdad al iniciar el toque bool HelloWorld::onTouchBegan(cocos2d::Touch *touch, cocos2d::Event *event) { return true; } //Metodo que se ejecuta cuando se realiza un movimiento mientras se realiza el toque void HelloWorld::onTouchMoved(cocos2d::Touch *touch, cocos2d::Event *event) { }

El método de finalizar toque establece una diferencia entre el toque realizado y la ubicación actual

del jugador, dependiendo de la dirección de la diferencia de las ubicaciones, así será agregada la

dimensión de los polígonos (40px) según la dirección necesaria para el movimiento. Determinada

la dirección en la que se desplazara el jugador, existe una condición que corrobora que el polígono

al que se quiera desplazar exista, al existir este llama al método AsignarPosición, el cual será

agregado posteriormente y luego llama al método CentrarVista. Por lo tanto el método

OnTouchEnded se vera de la siguiente manera.

//Codigo 12, impelementacion de metodo onTouchEnded //Metodo en el cual se calcula la direccion del movimiento del jugador a efectuar void HelloWorld::onTouchEnded(cocos2d::Touch *touch, cocos2d::Event *event) { //Se obtiene la diferencia entre el toque y la ubicacion del jugador. Point Toque = touch->getLocationInView(); Toque = Director::getInstance()->convertToGL(Toque); Toque = this->convertToNodeSpace(Toque); Point PosicionJugador = jugador->getPosition(); Point Diferencia = Point(Toque - PosicionJugador); if (abs(Diferencia.x)>abs(Diferencia.y)) { if (Diferencia.x>0) { //Se realiza un movimiento hacia la derecha PosicionJugador.x += mapa->getTileSize().width; } else { //Se realiza un movimiento hacia la izquierda PosicionJugador.x -= mapa->getTileSize().width; } }


2014 Página 20

else { if (Diferencia.y>0) { //Se realiza un movimiento hacia la arriba PosicionJugador.y += mapa->getTileSize().height; } else { //Se realiza un movimiento hacia la abajo PosicionJugador.y -= mapa->getTileSize().height; } } //Verifica que el movimiento se realice dentro de los limites del mapa if (PosicionJugador.x <= (mapa->getMapSize().width * mapa->getTileSize().width) && PosicionJugador.y <= (mapa->getMapSize().height * mapa->getTileSize().height) && PosicionJugador.x >= 0 && PosicionJugador.y >= 0) { this->AsignarPosicion(PosicionJugador); } this->CentrarVista(jugador->getPosition()); }

Para el método asignar posición, se necesitara de otro método llamado CoordenadasEnPosicion, el

cual devuelve la posición enviada como parámetro en estilo coordenadas de” x” y “y” (0,0).

//Codigo 13, impelementacion de metodo CoordenadasEnPosicion //Retorna la posicion enviada en pixeles en coordenadas de (x,y). Ej. (2,11) cocos2d::Point HelloWorld::CoordenadasEnPosicion(cocos2d::Point posicion) { int x = posicion.x/mapa->getTileSize().width; int y = ((mapa->getMapSize().height*mapa->getTileSize().height)-posicion.y)/mapa->getTileSize().height; return Point(x, y); }

El método se AsignarPosicion, realizara la asignación a una nueva posición que viene derivada del

toque realizado, esta posición puede que contenga algún bloque con propiedades específicas, el

código siguiente no restringe de ninguna manera la asignación de posición.

//Codigo 14, Implementacion del metodo Asignar Posicion void HelloWorld::AsignarPosicion(cocos2d::Point posicion) { //Convierte la posicion enviada en coordenadas x,y Point Coordenada = this->CoordenadasEnPosicion(posicion); //Se obtiene el numero especifico del bloque en la posicion int bloqueGID = meta->getTileGIDAt(Coordenada);


2014 Página 21

if (bloqueGID) { //Si se encuentra un bloque se obtienen los atributos de este auto Propiedades = mapa->getPropertiesForGID(bloqueGID); if (!Propiedades.isNull()) { } } //Se nada interrumpe el metodo se asigna la posicion al jugador jugador->setPosition(posicion); }

Uso de la capa “META” en la aplicación.

Para el control de eventos la única capa que se evalúa, es la capa “META” para verificar los

atributos asignados en la guía previa, por lo cual en el momento que se encuentre un bloque de la

capa “META” determinado, se puede realizar las acciones deseadas.

En el código anterior del método AsignarPosicion no se especifica nombres de atributos, solo se

obtienen dichos atributos de la capa meta, para realizar las condicionales por atributo, se

especifica el nombre del atributo y el valor de él, si se encuentra igualdad entre lo especificado, se

realizaran ciertas acciones. A continuación se muestra el código de manera general para los 3

atributos agregados en el archivo TMX en el conjunto de patrones llamados META, al encontrarse

con estos atributos el jugador no realizada la acción de movimiento, ya que el método realiza un

return y deja de ejecutarse, por lo cual omite el método setPosition del jugador.

//Codigo 15, metodo AsignarPosicion modificado para el uso de la capa META void HelloWorld::AsignarPosicion(cocos2d::Point posicion) { //Convierte la posicion enviada en coordenadas x,y Point Coordenada = this->CoordenadasEnPosicion(posicion); //Se obtiene el numero especifico del bloque en la posicion int bloqueGID = meta->getTileGIDAt(Coordenada); if (bloqueGID) { //Si se encuentra un bloque se obtienen los atributos de este auto Propiedades = mapa->getPropertiesForGID(bloqueGID); if (!Propiedades.isNull()) { ValueMap vm = Propiedades.asValueMap(); if (vm["Atributo1"].asString()=="Si") { //Acciones a realizar cuando se encuentre el bloque con el atributo1 return; } if (vm["Atributo2"].asString()=="Si") { //Acciones a realizar cuando se encuentre el bloque con el atributo2 return; } if (vm["Atributo3"].asString()=="Si") { //Acciones a realizar cuando se encuentre el bloque con el atributo3 return; } } } //Se nada interrumpe el metodo se asigna la posicion al jugador


2014 Página 22

jugador->setPosition(posicion); }

Uso de la animación creada en Aseprite.

Para la implementación de animación del jugador se necesitara agregar las 12 imágenes animación

con los nombres correspondientes (jugador01.png… jugador12.png). Las modificaciones para la

animación se realizaran en el método “onTouchEnded”, para que las animaciones se realicen sin

importar que el jugador se mueva o por alguna alteración de la capa meta se realice otra acción.

Agregar el siguiente código el cual inicializa la animación, asignando un intervalo de 0.05 segundo

por cuadro de animación y números de ciclo a repetir la animación (1).

//Codigo 16, codigo a agregar en el metodo onTouchEnded //Inicializacion de la animacion y la accion Animation *Animacion = Animation::create(); Animacion->setDelayPerUnit(0.05f); Animacion->setLoops(1); Animate *Accion;

Dentro de las condicionales adonde se asigna el cambio de posición, se creara la animación

correspondiente, agregando cuadros de imagen, formando así una animación de 3 cuadros de

imagen e inicializando así la acción con la animación creado previamente.

//Codigo 17, condicional de movimiento modificada para la realizacion de animacion if (Diferencia.x>0) { //Se realiza un movimiento hacia la derecha PosicionJugador.x += mapa->getTileSize().width; Animacion->addSpriteFrameWithFile("jugador08.png"); Animacion->addSpriteFrameWithFile("jugador09.png"); Animacion->addSpriteFrameWithFile("jugador07.png"); Accion = Animate::create(Animacion); }

Todas las condicionales quedaran de la siguiente manera, si a la hora de la ejecución, la imagen se

distorsiona o no esta de acuerdo al movimiento, alguna imagen está mal nombrada, o el orden de

la agregación de los cuadros esta incorrecta. Al finalizar todas las condicionales y creada ya la

acción, se procede a ejecutar la aplicación desde el sprite jugador, como se observa en la última

línea de código de bloque a continuación.

//Codigo 18, condicionales modificadas para la ejecucion de la animacion, y la llamada al metodo runaction por parte del jugador al salir de las condicionales if (abs(Diferencia.x)>abs(Diferencia.y)) { if (Diferencia.x>0) { //Se realiza un movimiento hacia la derecha


2014 Página 23

PosicionJugador.x += mapa->getTileSize().width; Animacion->addSpriteFrameWithFile("jugador08.png"); Animacion->addSpriteFrameWithFile("jugador09.png"); Animacion->addSpriteFrameWithFile("jugador07.png"); Accion = Animate::create(Animacion); } else { //Se realiza un movimiento hacia la izquierda PosicionJugador.x -= mapa->getTileSize().width; Animacion->addSpriteFrameWithFile("jugador11.png"); Animacion->addSpriteFrameWithFile("jugador12.png"); Animacion->addSpriteFrameWithFile("jugador10.png"); Accion = Animate::create(Animacion); } } else { if (Diferencia.y>0) { //Se realiza un movimiento hacia la arriba PosicionJugador.y += mapa->getTileSize().height; Animacion->addSpriteFrameWithFile("jugador05.png"); Animacion->addSpriteFrameWithFile("jugador06.png"); Animacion->addSpriteFrameWithFile("jugador04.png"); Accion = Animate::create(Animacion); } else { //Se realiza un movimiento hacia la abajo PosicionJugador.y -= mapa->getTileSize().height; Animacion->addSpriteFrameWithFile("jugador02.png"); Animacion->addSpriteFrameWithFile("jugador03.png"); Animacion->addSpriteFrameWithFile("jugador01.png"); Accion = Animate::create(Animacion); } } //Ejecutar la animacion con el jugador jugador->runAction(Accion);

Ahora ya se puede probar la aplicación con lo que se ha realizado hasta el momento asi que dar

clic en el botón build and run y se observará lo siguiente:


2014 Página 24

3.2 Creación de la segunda escena.

Para la creación de la segunda escena, agregar un archivo de tipo cpp, dentro de la carpeta

Classes, hacer clic derecho sobre la carpeta clases en la barra de navegación y selección “New

File”.


2014 Página 25

Se presenta una ventana con los diferentes tipos de archivo que se pueden crear, a la izquierda se

presentan conjuntos de archivos, seleccionar el que comprende C++ ( ), luego se

presentaran al lado derecho varios tipos de archivos de tipo c++ que se pueden crear, crear una

clase c++.

Al seleccionar se presentara una ventana para ingresar el nombre de la clase, en este colocar el

nombre de “Escena2”, si se desea colocar otro nombre, trabajar con ese otro nombre donde lo

que se refiera a “Escena2”. Presionar “Create”.

La clase se vera observara en la barra de navegación de la izquierda, dentro de al carpeta Classes.

Al abrir el archivo Escena2.h, se observa que solo tiene un include, el cual será borrado para las

modificaciones posteriores, debido a que esta clase será una replica de la otra clase solo con

diferentes elementos se procederá a copiar y pegar código de la clase HelloWorldScene.


2014 Página 26

En el archivo HelloWorldScene.h copiar todo lo que se encuentra adentro del ifndef y endif, como

se muestra a continuación.

Y se procederá a pegar en el archivo Escena2.h, entre los mismo apartados, dejando intacto los

#ifndef #define y #endif.

Al pegar, se tendrán que realizaran cambios necesarios para que la clase sea correspondiente a la

clase Escena2, primeramente se realizara el siguiente cambio de código. El nombre de la clase en

el archivo Escena2.h se cambiara de HelloWorld a Escena2.

Y la última línea del archivo Escena2.h, será modificada para que la función creada sea con el

nombre Escena2.


2014 Página 27

El archivo Escena2.h se observara de la siguiente manera.

Para modificar el archivo Escena2.cpp acceder al archivo HelloWorldScene.cpp, y copiar todo lo

que se encuentra en el archivo, exceptuando el include superior.


2014 Página 28

Al haber copiado pegar todo este contenido en el archivo Escena2.cpp dejando los include ya

existentes en dicha clase, se observara que muchos errores son presentados, esto que debido a

que cada método está relacionado con la clase HelloWorld, estos cambios se tendrán que realizar

uno a uno en todo el archivo Escena2.cpp.

El método CreateScene, se observa de la siguiente manera.


2014 Página 29

Realizar los cambios necesarios en cada método, para que este se relación con la clase

Escena2.cpp, sustituyendo “HelloWorld” por “Escena2”, estos elementos quedaran como se

muestra a continuación, todos los métodos deben de estar relacionados con la clase “Escena2”.

También se deben de cambiar llamadas específicas adentro de los mismos métodos, por ejemplo

cuando se llama al método AsignarPosicion y otros métodos específicos.

Como también se cambiara el archivo de arranque de tipo .tmx, sustituyendo mapa1.tmx con

mapa2.tmx.


2014 Página 30

2.4.3 Creación de la conexión entre las 2 escenas.

Ahora modificada completamente el archivo Escena2.cpp y Escena2.h, proceder a realizar la

conexión entre ambas escenas, así lograremos una transición desde HelloWorld a Escena2 y

viceversa.

Para lograr dicha transición se debe de agregar la librería Escena.h a la clase HelloWorldScene,

para eso en el apartado de include, se agregara también la Escena2.h.

Ya agregada Escena2, la clase HelloWorld reconocerá los métodos de la clase Escena2, por lo cual

modificar el método AsignarPosicion, para que se realice la transición. Se debe de llamar el

método estático de Escena2, llamado “createScene ()”, este método devuelve una escena, la cual

será parámetro para el método estático del Director llamado “replaceScene”. El método

AsignarPosicion se modifica como se muestra a continuación.

//Codigo 19, Modificacion de metodo AsignarPosicion de la clase HelloWorld para realizar la transicion, despues de haber creado la clase Escena2 void HelloWorld::AsignarPosicion(cocos2d::Point posicion) { //Convierte la posicion enviada en coordenadas x,y Point Coordenada = this->CoordenadasEnPosicion(posicion); //Se obtiene el numero especifico del bloque en la posicion int bloqueGID = meta->getTileGIDAt(Coordenada); if (bloqueGID) { //Si se encuentra un bloque se obtienen los atributos de este auto Propiedades = mapa->getPropertiesForGID(bloqueGID); if (!Propiedades.isNull()) { ValueMap vm = Propiedades.asValueMap(); if (vm["Atributo1"].asString()=="Si") { //Acciones a realizar cuando se encuentre el bloque con el atributo1 return; } if (vm["Atributo2"].asString()=="Si") { //Se sustituira la escena por Escena2, cargando el mapa2 Director::getInstance()->replaceScene(Escena2::createScene()); return; } if (vm["Atributo3"].asString()=="Si") { //Acciones a realizar cuando se encuentre el bloque con el atributo3 return; } } } //Se nada interrumpe el metodo se asigna la posicion al jugador jugador->setPosition(posicion); }


2014 Página 31

Se debe re realizar lo mismo en la Escena2, solo que se agrega la clase HelloWorldScene.h y se

crea una nueva escena del método estatico de esta clase. A continuación se muestran los cambios

a realizar.

//Codigo 20, Modificacion realizada al metodo AsignarPosicion de la clase Escena2 void Escena2::AsignarPosicion(cocos2d::Point posicion) { //Convierte la posicion enviada en coordenadas x,y Point Coordenada = this->CoordenadasEnPosicion(posicion); //Se obtiene el numero especifico del bloque en la posicion int bloqueGID = meta->getTileGIDAt(Coordenada); if (bloqueGID) { //Si se encuentra un bloque se obtienen los atributos de este auto Propiedades = mapa->getPropertiesForGID(bloqueGID); if (!Propiedades.isNull()) { ValueMap vm = Propiedades.asValueMap(); if (vm["Atributo1"].asString()=="Si") { //Acciones a realizar cuando se encuentre el bloque con el atributo1 return; } if (vm["Atributo2"].asString()=="Si") { //Se sustituira la escena por HelloWordlScene, cargando el mapa1 Director::getInstance()->replaceScene(HelloWorld::createScene()); return; } if (vm["Atributo3"].asString()=="Si") { //Acciones a realizar cuando se encuentre el bloque con el atributo3 return; } } } //Se nada interrumpe el metodo se asigna la posicion al jugador jugador->setPosition(posicion); }

Con esto concluye la conexión de ambas escenas y así permite una transición de una a la otra,

terminando así una aplicación funcional en base a mapas de polígono, ahora proceder a compilar y

ejecutar el simulador de iOS, para su funcionamiento. No olvidar que todos los recursos utilizados

deben de encontrarse en la carpeta de Resources.

Para la prueba de la aplicación ya se podrá observar el cambio en la navegación al pasar a la

escena 2.


2014 Página 32

3.3 Compilación del proyecto para plataforma Android y creación de archivo .apk. Previo a la ejecución de los comandos necesarios para realizar la compilación para la plataforma

Android, se debe de modificar el archivo Android.mk que se encuentra en el proyecto de Android,

a este se le deben de agregar las clases adicionales a las que genera el proyecto primeramente.

Al abrir el archivo .mk se abrira con la aplicación TextEdit.

Se observara el siguiente texto, en el cual se observa la lista de las clases que se va a compilar para

la plataforma Android, si se observa no se encuentra la clase creada Escena2.cpp.


2014 Página 33

Modificar el apartado de LOCAL_SRC_FILES, agregando la clase creada, de igual manera como

están las otras clases que se van a compilar, como se muestra a continuación.

Para realizar la compilación se debe de abrir la aplicación Terminal del sistema operativo Mac OSX,

en esta se debe de acceder a la carpeta del proyecto trabajado.

Cd Desktop/Navegacion

Adentro de este proyecto se debe de acceder a la subcarpeta específica del proyecto de Android,

en la cual se encuentra el archivo Python para la creación del archivo de ejecución. Para acceder a

la carpeta ingresar el siguiente comando.

Se debe de asignar los las variables de entorno al igual que en el momento de la creación del

proyecto, si la terminal sigue abierta, puede ser que no sean requeridos estos comandos, por

seguridad volver a ingresarlos. Apretando el botón de flecha arriba, se pueden ver los comandos

previamente ejecutados, por si no se desean volver a escribir.

Después de haber asignado las variables de entorno se debe de ejecutar el comando para llamar al

archivo Python que realiza la compilación, agregado a ese comando se agrega el apartado –p y se

agrega el número de API o SDK en el cual será compilado para la plataforma Android.

La compilación comenzara y se mostrara como a continuación.

Mientras se realiza la compilación se empiezan a compilar cada uno de los archivos

correspondientes a la librería cocos2d-x, esto puede llevar un poco de tiempo asi que ser un poco

paciente, si hubiera algún problema con el entorno de ejecución java, se debería de instalar, lo

cual lleva unos minutos más, y se debe de realizar otra vez la ejecución del comando anterior.


2014 Página 34

Al finalizar se observara el tiempo de ejecución y si se realizó de manera satisfactoria o con

errores.

Al terminar, el archivo .apk para realizar la instalación en los dispositivos móviles con sistema

operativo Android, se encuentra en la carpeta “bin”, la cual se encuentra en la subcarpeta del

proyecto de Android del proyecto creado (proj.android). El nombre del archivo es el nombre del

proyecto – debug.apk. A continuación se muestran dichos archivos.

Para la instalación del archivo, solo se abre el archivo en el dispositivo Android, este debe de tener

permisos para instalar aplicaciones de terceros.

universidad de el salvador facultad de ingeniería y arquitectura...

Documents