Universidad de El Salvador Facultad de Ingeniería y Arquitectura...
Transcript of 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
Guía N° 3 25 de julio de 2014
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.
Guía N° 3 25 de julio de 2014
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.
Guía N° 3 25 de julio de 2014
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.
Guía N° 3 25 de julio de 2014
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.
Guía N° 3 25 de julio de 2014
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.
Guía N° 3 25 de julio de 2014
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.
Guía N° 3 25 de julio de 2014
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.
Guía N° 3 25 de julio de 2014
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:
Guía N° 3 25 de julio de 2014
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.
Guía N° 3 25 de julio de 2014
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
Guía N° 3 25 de julio de 2014
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.
Guía N° 3 25 de julio de 2014
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.
Guía N° 3 25 de julio de 2014
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.
Guía N° 3 25 de julio de 2014
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:
Guía N° 3 25 de julio de 2014
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);
Guía N° 3 25 de julio de 2014
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);
Guía N° 3 25 de julio de 2014
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);
Guía N° 3 25 de julio de 2014
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; } }
Guía N° 3 25 de julio de 2014
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);
Guía N° 3 25 de julio de 2014
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
Guía N° 3 25 de julio de 2014
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
Guía N° 3 25 de julio de 2014
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:
Guía N° 3 25 de julio de 2014
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”.
Guía N° 3 25 de julio de 2014
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.
Guía N° 3 25 de julio de 2014
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.
Guía N° 3 25 de julio de 2014
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.
Guía N° 3 25 de julio de 2014
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.
Guía N° 3 25 de julio de 2014
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.
Guía N° 3 25 de julio de 2014
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); }
Guía N° 3 25 de julio de 2014
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.
Guía N° 3 25 de julio de 2014
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.
Guía N° 3 25 de julio de 2014
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.
Guía N° 3 25 de julio de 2014
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.