UNIVERSIDAD PÓLITECNICA DE MADRIDoa.upm.es/62717/1/TESIS_MASTER_JOAQUIN_ATIENZA_LAMA.pdfCOCOS2D Es...

46
UNIVERSIDAD PÓLITECNICA DE MADRID ESCUELA TÉCNICA SUPERIOR DE INGENIERIA DE SISTEMAS INFORMATICOS MÁSTER UNIVERSITARIO EN DESARROLLO DE APLICACIONES Y SERVICIOS PARA DISPOSITIVOS MOVILES TRABAJO FIN DE MÁSTER Videogame Peace Bird Joaquín Atienza Lama 2019

Transcript of UNIVERSIDAD PÓLITECNICA DE MADRIDoa.upm.es/62717/1/TESIS_MASTER_JOAQUIN_ATIENZA_LAMA.pdfCOCOS2D Es...

  • UNIVERSIDAD PÓLITECNICA DE MADRID

    ESCUELA TÉCNICA SUPERIOR DE INGENIERIA DE SISTEMAS INFORMATICOS

    MÁSTER UNIVERSITARIO EN DESARROLLO DE APLICACIONES Y SERVICIOS PARA DISPOSITIVOS

    MOVILES

    TRABAJO FIN DE MÁSTER

    Videogame Peace Bird

    Joaquín Atienza Lama 2019

  • MÁSTER UNIVERSITARIO EN DESARROLLO DE APLICACIONES Y SERVICIOS PARA DISPOSITIVOS

    MOVILES

    TRABAJO FIN DE MÁSTER Título: Videogame Cheeky Bird Autor: D Joaquin Atienza Lama Tutor: D José Eugenio Naranjo Ponente: D. ……………… Departamento: Informática

    MIEMBROS DEL TRIBUNAL Presidente: D. …………… Vocal: D. ………….. Secretario: D. ………….. Suplente: D. …………….. Los miembros del tribunal arriba nombrados acuerdan otorgar la calificación de: ……… Madrid, a de de 20…

    RESUMEN El videojuego que se va a presentar es un juego estilo ‘Flappy Birds’ diseñado con el programa Unity con apoyo de otros programas de diseño como XXXX. El videojuego consistirá en un pájaro que debe atravesar obstáculos hasta que se choque con uno de ellos, por cada obstáculo superado se obtendrá una puntuación. Al terminar el videojuego se mostrará la puntuación, highscore y un botón replay para volver a ejecutar el videojuego.

  • SUMMARY The videogame presented is going to be a game with similar format as ‘Flappy birds’ an infamous videogame released years ago. The game has been designed with the Platform Unity, using other programs as XXXX for the design. The videogame consists on a bird in the middle of the screen that has to dodge obstacles until it collides with one. For every obstacle that is dodge the score will increase. At the end of the game the score, highscore will be shown as well as a bottom of replay to restart the game.

    PALABRAS CLAVE Juego, Pajaro, Escena, Botón, Parallax, Design, Adds.

    KEYWORDS Script, Game, Scene, Bottom, Bird, Parallax, Design, Adds.

  • ÍNDICE DEL CONTENIDO 1. INTRODUCCIÓN Y OBJETIVOS ......................................................... 1

    1.1. Introducción ............................................................................................................................ 1 1.2. Objetivos ................................................................................................................................. 2 1.3. ANALISIS DE LAS TÉCNOLOGÍAS DEL DESARROLLO DE VIDEOJUEGOS. ........... 2

    1.3.1. Game MAker .................................................................................................................. 2 1.3.2. Stencyl ............................................................................................................................. 3 1.3.3. GAME salad .................................................................................................................... 4 1.3.4. UNity ............................................................................................................................... 5 1.3.5. Cocos2d ........................................................................................................................... 5

    1.4. ¿Por qué unity? ....................................................................................................................... 6 1.5. recursos necesarios .................................................................................................................. 6

    2. DESARROLLO ................................................................................... 8 2.1. Desarollo gráfico ..................................................................................................................... 8 2.2. desarrollo unity ....................................................................................................................... 9 2.3. ARQUITECTURA ............................................................................................................... 12

    2.3.1. DIAGRAMAS .............................................................................................................. 12 2.4. desarrollo Visual ................................................................................................................... 14

    3. DESCRIPCIÓN BAJO Y ALTO NIVEL ............................................... 15 3.1. Detalles ALTO nivel ............................................................................................................. 15

    3.1.1. Canvas ........................................................................................................................... 16 3.2. Detalles bajo nivel ................................................................................................................. 19

    3.2.1. CountdownText.cs ........................................................................................................ 19 3.2.2. Gamemanager.cs ........................................................................................................... 20 3.2.3. highscoretext.cs ............................................................................................................. 23 3.2.4. parallaxer.cs .................................................................................................................. 24 3.2.5. scoretext.cs .................................................................................................................... 26 3.2.6. tapcontroller.cs .............................................................................................................. 27 3.2.7. unityaddsbutton.cs......................................................................................................... 28

    4. RESULTADOS Y PRUEBAS .............................................................. 29 4.1. resultado unity ....................................................................................................................... 29 4.2. demo funcional ...................................................................................................................... 36

    5. CONCLUSIONES Y LÍNEAS FUTURAS ............................................. 37 5.1. Conclusiones ......................................................................................................................... 37 5.2. Líneas futuraS ....................................................................................................................... 37

    6. BIBLIOGRAFÍA ............................................................................... 38

  • 7. ANEXO A: ASPECTOS ÉTICOS, ECONÓMICOS, SOCIALES Y AMBIENTALES ..................................................................................... 39

    7.1. A.1 Analisis ........................................................................................................................... 39 7.2. A.4 CONCLUSIONES ......................................................................................................... 39

  • TABLA DE ILUSTRACIONES Figure 1: Programa Unity usado para desarrollar el videojuego 7 Figure 2: Icono peace bird 8 Figure 3: Icono tubería 8 Figure 4: Imagen en conjunto del suelo, nubes, suelo y cielo. 8 Figure 5: Desarrollo completo 9 Figure 6: Carpeta Canvas vista desde Unity 9 Figure 7: Carpeta Environment vista desde Unity 10 Figure 8: Clases C# Usadas en el Videojuego 11 Figure 9: Diagrama de caso de uso (falta el punto de publicidad) 12 Figure 10: Diagrama de Flujo 13 Figure 11: Solución Visual Studio 14 Figure 12: Imagen completa environment 15 Figure 13: Canvas 16 Figure 14: Página StartPage 16 Figure 15: Página CountDown 17 Figure 16: Página Game Over 17 Figure 17: Botón UnityAds 18 Figure 18: Cuadros de Texto 18 Figure 19: Asociación vista desde Main Camera 19 Figure 20: CountDownText Class 19 Figure 21: OnEnable 20 Figure 22: OnPlayerDied 21 Figure 23: SetPage 22 Figure 24: HighScoreText Class 23 Figure 25: Ejemplo de funciones dentro de la clase Parallax 24 Figure 26: Ejemplo valores Parallax desde Unity 25 Figure 27: ScoreText Class 26 Figure 28: Métodos TapController 27 Figure 29: Asociación botón-clase UnityAds 28 Figure 30: Métodos Unity Adds 28 Figure 31: Pantalla de inicio 29 Figure 32: Página CountDown. 30 Figure 33: Comienzo del videojuego 31 Figure 34: Imagen previa al obstáculo 32 Figure 35: Imagen evitando el obstáculo + puntuación. 32 Figure 36: Elementos con efecto Parallax 33 Figure 37: New HighScore 34 Figure 38: Botón UnityAds 35 Figure 39: Juego en ejecución desde Unity 36

  • 1

    1. INTRODUCCIÓN Y OBJETIVOS 1.1. INTRODUCCIÓN

    Como proyecto final de Master (TFM) se ha decidido realizar un videojuego que incorporase prácticamente todas las lecciones recibidas en este master. El videojuego por lo tanto será una App funcional que se subirá a la tienda como parte final. El videojuego se ha desarrollado en Unity Multiplataformas, el videojuego incorpora funcionalidades aparte del propio juego como registro de usuarios, administración de publicidad y alojamiento en la nube. El videojuego es un juego de evasión de obstáculos, por cada evasión correcta se incrementará la puntuación, el objetivo es ser el jugador con la mayor puntuación. Para realizar este proyecto se han utilizado los programas:

    • Unity3D https://unity3d.com/ : Programa usado para realizar el videojuego. • Herramienta de diseño GIMP: https://www.gimp.org/: Programa usado para la parte de diseño

    gráfico. • Selección de iconos: http://www.flaticon.com: Programa usado para encontrar iconos (Como

    el botón play) • Herramienta audio: http://www.bfxr.net/: Programa usado para crear sonido como play o

    game over. • Programa para codificar: https://code.visualstudio.com/: Programa usado para editar el código

    del proyecto. Xcode si se usa un ordenador Apple. • Microsoft Word para realizar la memoria. • Microsoft PowerPoint para la presentación.

    Para realizar el siguiente videojuego se necesita un hardware especifico:

    • Necesario un ordenador Apple si se desea probar el videojuego en dispositivos Apple. • Si el ordenador es Windows, es necesario que tenga activo la característica Hiper-V para

    permitir a Visual Studio emular el videojuego.

    https://unity3d.com/https://www.gimp.org/http://www.flaticon.com/http://www.bfxr.net/https://code.visualstudio.com/

  • 2

    1.2. OBJETIVOS Como objetivos de este proyecto se fijó un objetivo principal que es hacer una App móvil funcional que se encuentre para descarga en la tienda, dentro de este objetivo hay distintos objetivos que se plantearon:

    1. -Realizar una Aplicación Móvil (App) funcional, en este caso un videojuego presente en las plataformas Apple (IOS) y Android.

    2. -Usar las tecnologías aprendidas en las lecciones del master dentro del videojuego; incorporar registros, almacenar el código en la nube, añadir anuncios, realizar el proyecto en múltiples plataformas…

    3. -Usar Parallax, Scripts, sonidos y todas las lecciones posibles aprendidas en Desarrollo de Videojuegos.

    4. -Escalable y usable desde cualquier parte del mundo.

    1.3. ANALISIS DE LAS TÉCNOLOGÍAS DEL DESARROLLO DE

    VIDEOJUEGOS. El desarrollo de videojuegos al igual que otros desarrollos como el Web ha ido sufriendo cambios y mejoras a lo largo del tiempo. En la la actualidad existen multitud de herramientas y software útil usado para crear videojuegos. Se explicaran los más relevantes y por que se ha decidido usar Unity como programa final.

    1.3.1. GAME MAKER Es una de las herramientas más usadas y conocidas en el desarrollo de videojuegos. Su entorno se basa en la gestión de eventos y disparadores lógicos.

  • 3

    Está pensado para personas que dispongan de algo más de experiencia en la programación. Dispone de una gran comunidad que da soporte y por lo tanto podrá encontrar documentación y ayuda en todo el proceso de desarrollo. Permite la creación de videojuegos para Android, iOS, Windows y Mac. Es un entorno muy potente ya que podemos crear casi cualquier tipo de juego.

    1.3.2. STENCYL Este entorno de desarrollo está pensado sobre todo para crear juegos basados en Flash y en 2D. Tiene un aspecto más visual que GameMaker. Inicialmente se llamaba StenylWorks pero se decidió acortar el nombre. En la página web de dicha herramienta podrás encontrar mucha información, tutoriales y ejemplos de juegos que han sido creados con este entorno de desarrollo. Un inconveniente es que para poder llevar el juego a Android e iOS las licencias son vendidas a parte aunque la herramienta sea gratuita.

  • 4

    1.3.3. GAME SALAD Posee una interfaz gráfica visual de arrastrar y soltar y una biblioteca enorme integrada para los aspectos de comportamiento, física y otras funciones muy interesantes que persiguen facilitar la creación y desarrollo de videojuegos. En la versión gratuita podrás crear juegos y publicarlos para web e iOS mientras que la versión profesional permite poner precio a los juegos y publicarlos para Google Play Store (Android) y Windows.

  • 5

    1.3.4. UNITY Se trata de una herramienta muy utilizada por los profesionales del sector del videojuego para la creación y desarrollo de sus juegos.

    • Es considerada por la mayoría de profesionales como la mejor herramienta para crear y diseñar un videojuego.

    • Permite crear juegos para cualquier plataforma (especializada en 3D). Se puede integrar con lenguaje C#.

    • Dispone de una librería muy grande con documentación. • El desarrollo de videojuegos se realiza desde cero y normalmente las licencias suelen ser más

    caras.

    1.3.5. COCOS2D Es el rival directo de Unity 3D. Es Software libre Dispone de un framework multiplataforma que permite la creación y desarrollo de videojuegos en varios lenguajes de programación. Se puede programar para casi cualquier sistema operativo pero con el inconveniente que el diseño ha de realizarse a bajo nivel, sin esas ventajas que te proporcionan otros programas, como Unity con el diseño, que lo simplifica mucho.

  • 6

    1.4. ¿POR QUÉ UNITY? A lo largo del curso Desarrollo de Videojuegos se ofreció al alumno varias posibilidades para diseñar videojuegos, con aplicaciones como Cocos2DX o Unity. A parte de esta introducción, en la asignatura Seminario Profesionales tuvimos la suerte de contar con un experto en el desarrollo de Videojuegos, Álvaro San Juan Cervera. Álvaro nos enseñó como usar Unity en la hora y media que tenía, nos enseñó sus capacidades y desarrollo un videojuego completo en tan solo 1h. Para realizar mi videojuego, al querer añadir funcionalidades extra como la publicidad o relación con la nube decidí utilizar Unity, probablemente el programa más completo para realizar videojuegos.

    1.5. RECURSOS NECESARIOS Para desarrollar el videojuego se necesitan muchos recursos, desde licencias hasta elemento gráficos del diseño. Los requisitos para este Videojuego han sido: Requisitos hardware -Dos ordenadores, uno para sistemas Windows que permitirá realizar el desarrollo Android y otro Apple, para realizar el diseño IOS. Aunque el videojuego se diseña solo con un ordenador para instalar el juego en los Apple es necesario un ordenador de Apple con sistema operativo MACOX. Requisitos software - Tener el programa Unity descargado, con usuario y a la última versión, para no tener problemas de versiones. - Licencia Unity para permitir desarrollar y comercializar videojuegos, ya que será añadido a la tienda. - Tener el programa Visual Studio para editar el código del proyecto. Requisitos de diseño - Es necesario tener un par de aplicaciones o webs de diseño para realizar los elementos gráficos; es decir, para realizar el pájaro, el fondo, las tuberías, las nubes…. Para este video juego hemos usado las aplicaciones:

    • Herramienta de diseño GIMP: https://www.gimp.org/: Programa usado para la parte de diseño gráfico.

    • Selección de iconos: http://www.flaticon.com: Programa usado para encontrar iconos (Como el botón play)

    • Herramienta audio: http://www.bfxr.net/: Programa usado para crear sonido como play o game over.

    • Microsoft Word para realizar la memoria. • Microsoft PowerPoint para la presentación. • Cuenta en Microsoft AZURE Services, para almacenar él código en la nube.

    https://www.gimp.org/http://www.flaticon.com/http://www.bfxr.net/

  • 7

    Figure 1: Programa Unity usado para desarrollar el videojuego

  • 8

    2. DESARROLLO

    2.1. DESAROLLO GRÁFICO El diseño gráfico de la aplicación abarca todos los diseños gráficos que se han usado para realizar el videojuego, los diseños usados son:

    • Icono pájaro

    Figure 2: Icono peace bird

    • Tuberías como obstáculos

    Figure 3: Icono tubería

    • Suelo • Cielo • Estrellas • Nubes

    Figure 4: Imagen en conjunto del suelo, nubes, suelo y cielo.

  • 9

    Figure 5: Desarrollo completo

    • Icono Aplicación

    2.2. DESARROLLO UNITY

    El desarrollo del videojuego en si (sin tener en cuenta el diseño) se ha realizado por un lado en Unity y por otro en Visual Studio 2019, el desarrollo Unity contiene todos los elementos del videojuego, incluido los Scripts en los que se ejecuta el código del videojuego (los scripts se editan en Visual Studio). El desarrollo Unity este compuesto por:

    • Canvas: Contiene todas las pantallas del videojuego, es decir: o Pantalla de juego, con la puntuación, las vidas y highscore. o Página de inicio con sus componentes (Texto, Botón play) o Página de CountDown, el juego se inicia una vez la cuenta termine. o Página de GameOver, con el botón de replay, con la puntación obtenida y otro texto

    con el Highscore (genérico). o Número de vidas, como un Text que se sitúa en la pantalla superior derecha. o Botón para obtener vidas (después de ver un anuncio completo), se encuentra en la

    esquina superior izquierda.

    Figure 6: Carpeta Canvas vista desde Unity

  • 10

    • Environment: Contiene los elementos gráficos usados en el proyecto, es decir:

    o El suelo o Cielo o Icono del Pajaro-Bird al que se aplicara detección de colisiones y efectos de gravedad. o Nubes, al que se aplicara el efecto parallax. o Estrellas, a las cuales se aplicarán el efecto parallax. o Tuberías, a las cuales se aplicarán el efecto parallax.

    Figure 7: Carpeta Environment vista desde Unity

    • Botón +1 Life: Botón que mostrará un anuncio de UnityAds y tras el cual se recibirá una vida como recompensa.

    • Texto con el número de vidas en la esquina superior izquierda. • Texto con la Puntuación actual (Score)

    A parte de estos elementos, que se encuentran en el esquema del videojuego, existen elementos internos necesarios para realizar el videojuego, dichos elementos son:

    • Scripts: Clases C# usadas en Visual Studio para añadir lógica al videojuego, dichos scripts son: o HighScoreText: Clase que devuelve la máxima puntuación obtenida. o ScoreText: Clase que devuelve la puntuación obtenida en la partida jugada. o Parallax: Clase usada para hacer el efecto Parallax en los elementos necesarios, es

    decir: ▪ Las nubes ▪ Las Estrellas ▪ Las tuberías

    o TapController: Clase usada para controlar cuando se pulsa la pantalla, en este videojuego al pulsar la pantalla el icono del Pajaro se elevará hacia arriba, ‘luchando contra la gravedad’.

    o UnityAds Controller: Clase que configura los anuncios, en esta clase se asigna la bonificación que el jugador recibe al ver el anuncio.

    o CountDownText: Clase que genera el CountDown usado en la página CountDown. o GameManager: Clase más importante, se encarga del control del videojuego, cuando

    se detectan colisiones, cuando se cambian de pantallas, sumar la puntuación, el calculo de vidas. En resumen, esta clase es el gestor del videojuego.

    • Assets: Recursos como imágenes, audios, iconos y demás elementos usados durante el videojuego. Estos recursos son:

    o UnityAds: Carpeta con los elementos que permiten introducir UnityAds.

  • 11

    o Songs: List of all the songs in the project, one for the tap, one for the collision and a song for the game when the bird is flying normally.

    o Font: Contiene las fuentes usadas en el videojuego, los estilos. o Scripts, descritos previamente. o Sprite, contiene las imágenes usadas por el juego y el efecto parallax, contiene el icono

    del Pajaro, las nubes, las tuberías….

    Figure 8: Clases C# Usadas en el Videojuego

  • 12

    2.3. ARQUITECTURA

    2.3.1. DIAGRAMAS

    Diagrama de Caso de Uso

    Figure 9: Diagrama de caso de uso (falta el punto de publicidad)

    Este diagrama de caso de usos representa todas las funcionalidades que tendría el jugador en este videojuego, por un lado, el jugador puede, jugar o salir del videojuego. Para jugar al videojuego hay que tocar la pantalla (Tap), al hacer Tap se ejecutara el videojuego, al tocar el Pajaro sonaran sonidos, así como cuando se produzca un choque. A este diagrama faltaría por añadir una línea que sería para la publicidad, sería un recuadro que tenga el nombre UnityAds, muy sencillo.

  • 13

    Diagrama de Flujo

    Figure 10: Diagrama de Flujo

    El siguiente diagrama corresponde al flujo del videojuego, es una representación útil para entender como se crea el videojuego en sí. Como por ejemplo al ejecutar el videojuego, si ya existía un juego previo se recarga, los elementos de sonido y gráficos no están siempre activos, depende de la etapa del videojuego, una vez pulsado el play los elementos de sonido se añaden, pero como se ve en el diagrama los elementos gráficos se cargan una vez de inicia, y una vez empieza el juego en sí, se cargan los sonidos.

  • 14

    2.4. DESARROLLO VISUAL

    El desarrollo en Visual Studio es básicamente el desarrollo de los Scripts usados por el videojuego, en la imagen inferior aparecer los scripts usados, el script Vidas no se uso finalmente en el proyecto.

    Figure 11: Solución Visual Studio

    Para el desarrollo en Microsoft Visual Studio se han empleado 7 clases, (la clase vidas finalmente no se ha usado en el desarrollo). La explicación especifica de cada clase se realiza en el punto 3.2-Detalles Bajo Nivel.

  • 15

    3. DESCRIPCIÓN BAJO Y ALTO NIVEL

    3.1. DETALLES ALTO NIVEL En este apartado se describirá el desarrollo realizado en Unity, el desarrollo de bajo nivel (Visual Studio) se realizará en el apartado 3.2. En Unity como se ha descrito anteriormente se encuentra el videojuego completo, tanto el bajo nivel como el alto nivel, el bajo nivel es el propio código que se edita en Visual Studio. En el alto nivel por lo tanto encontraremos:

    • Canvas: Contiene todas las pantallas del videojuego, es decir: o La página de inicio con sus componentes (Texto, Botón play) o Pantalla de juego, con la puntuación, las vidas y Highscore. o Página de CountDown, el juego se inicia una vez la cuenta termine. o Página de GameOver, con el botón de replay, con la puntación obtenida y otro texto

    con el Highscore. o Número de vidas, como un Text que se sitúa en la pantalla superior derecha. o Botón para obtener vidas (después de ver un anuncio completo), se encuentra en la

    esquina superior izquierda.

    • Environment: Contiene los elementos gráficos usados en el proyecto, es decir: o El suelo o Cielo o Icono del Pajaro-Bird al que se aplicara detección de colisiones y efectos de gravedad. o Nubes, al que se aplicara el efecto parallax. o Estrellas, a las cuales se aplicarán el efecto parallax. o Tuberías, a las cuales se aplicarán el efecto parallax.

    • Botón +1 Life: Botón que mostrará un anuncio de UnityAds y tras el cual se recibirá una vida como recompensa.

    • Texto con el número de vidas en la esquina superior izquierda. • Texto con la Puntuación actual (Score)

    Figure 12: Imagen completa environment

  • 16

    3.1.1. CANVAS Canvas es la carpeta en la cual se encuentran las pantallas usadas en el videojuego (juego, CountDown, Start y Game Over) más los elementos fijos, como el botón para sumar una vida o el número de vidas que son fijos y se verán en todas las pantallas del videojuego. Los elementos de Canvas interaccionan con los elementos gráficos de Environment para añadir la lógica, por ejemplo; la pantalla de inicio consta de botones y texto, pero el Pajaro que es el encargado de determinar las acciones a seguir en el Juego. Gracias a la detección de colisiones se cambia de la pantalla Start a la pantalla Game Over, pero es la acción realizada en la pantalla Start (pulsar el botón) la que empieza la ejecución. En resumen, el videojuego es una consecuencia de la relación entre los elementos de Canvas y Environment, cuya lógica viene definida por el bajo nivel en Visual Studio.

    Figure 13: Canvas

    • Pantalla de Inicio

    Figure 14: Página StartPage

    La pantalla de inicio estará formada por: -Botón Play: Botón encargado de iniciar el videojuego, al presionar dicho botón la pantalla Start cambiará a la Pantalla CountDown, se comenzará la cuenta atrás y cuando termines se pasará de pantalla a la del Juego. Una vez terminada la cuenta atrás el Pajaro comienza a ejecutar su movimiento.

  • 17

    • Página CountDown. La pantalla CountDown es la más sencilla, se invoca siempre tras pulsar el botón de play o de replay (dependiendo si el juego esta en la pantalla Start o Game Over), una vez se ejecuta la pantalla CountDown empieza la cuenta atrás. El cuadro de texto dentro de la pantalla CountDown cambia su texto cada segundo, representado la cuenta atrás 3,2,1. Al finalizar la cuenta atrás se cambia de pantalla y comienza la ejecución del videojuego.

    Figure 15: Página CountDown

    • Página GameOver.

    La pantalla Game Over es la pantalla a la que se accede tras detectarse alguna colisión, la colisión solo puede ser entre el Pajaro y las tuberías o el suelo. Los demás elementos gráficos (nubes, estrellas etc…) no tienen configurada la detección de colisiones. La pantalla de Game Over está compuesta por: -Cuadro de Texto: Recuadro de texto con la frase GAME OVER. -Botón Replay: Botón que cumple la misma funcionalidad que el botón Play, se encargara de pasar la pantalla de Game Over a CountDown, tras la pantalla de CountDown comenzara de nuevo el videojuego.

    Figure 16: Página Game Over

  • 18

    • Botón +1 Life Botón situado en la pantalla superior izquierda, tras pulsar este botón se muestra un anuncio de UnityAds, tras ver el anuncio por completo se bonifica al jugador con una vida, el sistema de anuncios UnityAds se configura dentro del propio Unity y solo es necesario modificar la clase en Visual Studio para asignar las bonificaciones. Se explicará en detalle en el punto 3.2.7 UnityAds Botón.

    Figure 17: Botón UnityAds

    • Cuadros de Texto

    En el videojuego existen dos cuadros de texto que serán visuales en todas las pantallas: -Número de vidas: En la esquina superior derecha se verá representado el numero de vidas disponibles, dichas vidas se bajan automáticamente cuando se detecta una colisión y se aumenta la vida en valor +1 después de ver el anuncio UnityAds por completo. -HighScore: El jugador tendrá en todo momento a la vista la puntuación máxima obtenida en el videojuego, se ha realizado de esta manera (visible en todas las pantallas) para motivar al jugador a batir su propio récord. HighScore se actualiza de manera automática tras detectar una nueva puntuación máxima.

    Figure 18: Cuadros de Texto

  • 19

    3.2. DETALLES BAJO NIVEL Antes de adentrase en el bajo nivel se han de establecer previamente unas relaciones desde Unity, gracias a esta relación se ejecuta el código de cada clase C# una vez dicho elemento esta activo, es decir, cuando el elemento lifes (texto vida) este activo (se muestre en pantalla) la clase Vidas se ejecutara.

    Figure 19: Asociación vista desde Main Camera

    A continuación, se describirá la funcionalidad de cada clase.

    3.2.1. COUNTDOWNTEXT.CS El código de esta clase es simple, se realiza una simple cuenta desde 3 hasta 0 (función Countdown()), el valor CountDownText actualiza el número que se muestra al jugador en la pantalla. Esta clase se usa para realizar la cuenta atrás en la pantalla CountDown por lo tanto el elemento gráfico CountDown (la página) estará asociado con la clase CountDownText Class.

    Figure 20: CountDownText Class

  • 20

    3.2.2. GAMEMANAGER.CS Game Manager es posiblemente la clase más importante de todo el proyecto, se encarga de la gestión del proyecto, es decir: -Se encarga de detectar el cambio de pantallas para establecer la secuencia correcta del videojuego -Es la clase encargada de detectar las colisiones entre objetos, y por lo tanto también es la clase encargada de llevar la cuenta de la puntuación. -Clase encargada también de llevar el calculo de las vidas, y recibir la nueva vida una vez el anuncio se ha visualizado correctamente. -Las acciones realizadas en cada página también se determinan en esta clase, es decir cuando se detecte una colision y se vaya a la pantalla de Game Over existira en la clase GameManager un metodo Game Over que realizara las acciones apropiadas (puntuacion a cero, restar una vida, representar la puntuación obtenida).

    Figure 21: OnEnable

  • 21

    Esta función se ejecuta cada vez que se invoca la clase, obtiene el numero de vidas restantes y restablece la puntuación a cero.,

    Figure 22: OnPlayerDied

    Función que se ejecuta al detectarse una colisión, contiene lógica importante del videojuego, como la puntuación o la resta de vidas.

  • 22

    Figure 23: SetPage

    Método en el cual se realiza el asignamiento de páginas, es importante ya que determina cual se ejecuta en cada momento, describe la secuencia del videojuego.

  • 23

    3.2.3. HIGHSCORETEXT.CS La clase HighScore es la clase encargada de actualizar el nuevo HighScore con el valor anterior, esta clase es muy sencilla y se ejecuta iterativamente al estar el cuadro de Texto en todas las pantallas, es decir se realiza una asociación en Unity con esta clase (ver imagen abajo). Esta asociación permite actualizar la puntuación automáticamente, pero es la clase GameManager la que lleva el recuento de la puntuación, por ello se hace referencia en PlayerPrefs.GetInt(“HighScore”).

    Figure 24: HighScoreText Class

  • 24

    3.2.4. PARALLAXER.CS Clase usada para crear los efectos parallax en los elementos gráficos deseados, se ha aplicado en este videojuego a las nubes, las estrellas y las tuberías. Las tuberías aparte tienes detección de colisiones lo que permite tener una puntuación. La clase parallax resumidamente coge un objeto gráfico (las tuberías, por ejemplo) y hace un spawn de ellas, spawn es cuando un elemento gráficos de repite dentro del videojuego, en este caso las tuberías; originalmente hay una tubería, pero tras realizar spawn estas se multiplican (se establecen unos valores en Unity y unos márgenes para que el spawn se realice dentro de la pantalla de juego y no fuera de la visión del jugador), de tal forma que las tuberías se van moviendo, el numero de tuberías, el espacio entre ellas y la frecuencia de repetición se establecen en Unity, en bajo nivel se realiza la clase que hace Spawn, como hacer el Spawn lo determina Unity.

    Figure 25: Ejemplo de funciones dentro de la clase Parallax

  • 25

    Figure 26: Ejemplo valores Parallax desde Unity

  • 26

    3.2.5. SCORETEXT.CS La clase ScoreText es muy similar a la clase HighScore, la puntuación se va actualizando de marea autmoática en la clase GameManager, esta clase ScoreText se asocia con el cuadro de texto de Unity ScoreText, tiene una asociación de la misma manera que tenia HighScore con la clase ScoreText Class, es decir desde Unity se relaciona con esta clase, realizandose la actualizacióon cada vez que se active el recuadro de texto ScoreText.

    Figure 27: ScoreText Class

  • 27

    3.2.6. TAPCONTROLLER.CS Clase que se encarga de controlar la caida y la subida del pajaro, cada vez que se pulse la pantalla (tap) se accedera a esta clase.

    Figure 28: Métodos TapController

  • 28

    3.2.7. UNITYADDSBUTTON.CS Clase encargada de generar el anuncio, como se puede observar en la asociación (Figura 29) el botón encargado de dar vidas se asocia a la clase UnityAdsButon, dicha asociación también determina el premio recibido por el jugador, aunque la lógica se halle en el código (Figura 30).

    Figure 29: Asociación botón-clase UnityAds

    Figure 30: Métodos Unity Adds

  • 29

    4. RESULTADOS Y PRUEBAS …

    4.1. RESULTADO UNITY El videojuego en funcionamiento se va a demostrar a traves de una secuencia de imágenes. Comenzando por el principio del videojuego, lo primero que el jugador ve es la pagina de inicio StarPage, que contiene el botón play y una serie de elementos graficos (estitos sin aplicar parallax todavía). Desde la página StartPage se veran tres elementos en todo el videojuego (a excepción de cuando se visualice el anuncio), estos elementos son:

    • Botón +1 Life. • Cuadro de Texto con el número de vidas. • Cuadro de Texto con HighScore.

    Figure 31: Pantalla de inicio

  • 30

    Una vez pulsado el botón Play, se pasará a la página CountDown, el botón play desaparece y se inicia una cuenta atrás desde 3 hasta 0. Durante esta ejecución la cuenta se reinicia a cero la puntuación (siempre y cuando no haya vidas)

    Figure 32: Página CountDown.

    La imagen fue tomada cuando la cuenta estaba en 2.

  • 31

    Una vez finalizada la cuenta comenzara la ejecución del videojuego, el pájaro comenzara a sufrir los efectos de gravedad, se aplicará el efecto Tap que levantara el pájaro cuando se pulse en pantalla y los elementos gráficos comenzaran a moverse con el efecto parallax.

    Figure 33: Comienzo del videojuego

  • 32

    El juego consistirá en evadir unas tuberías y obtener puntuación cada vez que se traspasan, en estas imágenes se observa como la puntuación cambia cuando se atraviesan con éxito dichas tuberías.

    Figure 34: Imagen previa al obstáculo

    Figure 35: Imagen evitando el obstáculo + puntuación.

  • 33

    A lo largo de todo el juego se moverán las nubes, estrellas y tuberías con los valores mostrados anteriormente, debajo una imagen en modo ejecución de cómo están estos elementos situados antes de representarse en la escena.

    Figure 36: Elementos con efecto Parallax

  • 34

    El juego continua indefinidamente hasta que haya una colisión, en cuyo caso termina. Durante el juego es posible batir la puntuación máxima obtenida en ese momento, cuando se obtenga una nueva

    Figure 37: New HighScore

  • 35

    Por ultimo se encuentra el botón de publicidad, dicho botón dará como se ha mostrado en los valores en la Figura 29 +1 vida al jugador que lo pulse y vea por completo.

    Figure 38: Botón UnityAds

  • 36

    4.2. DEMO FUNCIONAL

    Figure 39: Juego en ejecución desde Unity

  • 37

    5. CONCLUSIONES Y LÍNEAS FUTURAS

    5.1. CONCLUSIONES Como conclusiones al proyecto, hay que decir que a pesar de ser un videojuego sencillo se ha intentado que cubra todos los aspectos posibles y relevantes a la hora de desarrollar aplicaciones. Se añadió publicidad y un sistema de vidas, lo cual aporta un negocio a nuestra aplicación gracias a los servicios de publicidad instalados en él. El videojuego fue desarrollado en su totalidad, incluyendo los desarrollos gráficos, como recomendación seria recomendable usar desarrollos ya establecidos, o contratar a alguien que se encargue de ellos, se pierde mucho tiempo en hacer los elemento (nubes, estrellas, suelo) que en el fondo aportan poca lógica al proyecto (solo diseño). Nuestra recomendación es no perder excesivo tiempo en el diseño. Se valoro la opción de generar el acceso por redes sociales, pero nuestra intención fue realizar esto después de subir el videojuego a la tienda. Una vez este subido sin problemas de copyright o por el nombre, se realizará el acceso a través de redes sociales y GameCenter, que permitirá guardar la puntuación online y ‘competir’ contra otros usuarios. Como desarrollos futuros, se pensó en crear en vez de un botón de play 2, con dos niveles; uno infantil y otro más difícil como el modelo actual. También se ha valorado la opción de añadir publicidad una vez se estrella el Pajaro, estos desarrollos se han postpuesto a la versión 2.0.

    5.2. LÍNEAS FUTURAS Como desarrollos futuros, se pensó en crear en vez de un botón de play 2, con dos niveles; uno infantil y otro más difícil como el modelo actual. También se ha valorado la opción de añadir publicidad una vez se estrella el Pajaro, estos desarrollos se han postpuesto a la versión 2.0. Aparte de este desarrollo, el juego siempre puede ser optimizado, los valores de velocidad, separación entre tuberías y aceleración son variables y podrían cambiarse en función de lo que el jugador quiera.

  • 38

    6. BIBLIOGRAFÍA [1] https://revistadigital.inesem.es/informatica-y-tics/herramientas-para-desarrollo-de-

    videojuegos/ [2] https://revistadigital.inesem.es/informatica-y-tics/herramientas-para-desarrollo-de-

    videojuegos/ [3] https://unity3d.com/es/learn/tutorials/topics/2d-game-creation/2d-scrolling-backgrounds

    [4] https://classroom.google.com/c/MjkxMDI5MDI3OTda?hl=es https://revistadigital.inesem.es/informatica-y-tics/herramientas-para-desarrollo-de-videojuegos/

    https://revistadigital.inesem.es/informatica-y-tics/herramientas-para-desarrollo-de-videojuegos/https://revistadigital.inesem.es/informatica-y-tics/herramientas-para-desarrollo-de-videojuegos/https://revistadigital.inesem.es/informatica-y-tics/herramientas-para-desarrollo-de-videojuegos/https://revistadigital.inesem.es/informatica-y-tics/herramientas-para-desarrollo-de-videojuegos/https://unity3d.com/es/learn/tutorials/topics/2d-game-creation/2d-scrolling-backgroundshttps://classroom.google.com/c/MjkxMDI5MDI3OTda?hl=eshttps://revistadigital.inesem.es/informatica-y-tics/herramientas-para-desarrollo-de-videojuegos/https://revistadigital.inesem.es/informatica-y-tics/herramientas-para-desarrollo-de-videojuegos/

  • 39

    7. ANEXO A: ASPECTOS ÉTICOS, ECONÓMICOS, SOCIALES Y AMBIENTALES

    El apartado “Requisitos de las acreditaciones internacionales EUR-ACE y ABET” de la Normativa de TFT de la ETSIT-UPM establece que “La memoria del TFT del GITST, GIB y MUIT, y en general la de aquellas titulaciones que hayan obtenido o para las que se desee

    solicitar una acreditación internacional EUR-ACE o ABET, debe mostrar conciencia de la

    responsabilidad de la aplicación práctica de la ingeniería, el impacto social y ambiental, el

    compromiso con la ética profesional, la responsabilidad y las normas de la aplicación

    práctica de la ingeniería, así como sobre las prácticas de gestión de proyectos, gestión, y

    control de riesgos, entendiendo sus limitaciones”.

    Este anexo obligatorio del TFT tendrá un carácter sintético con los siguientes apartados:

    7.1. A.1 ANALISIS Como proyecto final de Master (TFM) se ha decidido realizar un videojuego que incorporase prácticamente todas las lecciones recibidas en este master. El videojuego por lo tanto será una App funcional que se subirá a la tienda como parte final. El videojuego se ha desarrollado en Unity Multiplataformas, el videojuego incorpora funcionalidades aparte del propio juego como registro de usuarios, administración de publicidad y alojamiento en la nube. El videojuego es un juego de evasión de obstáculos, por cada evasión correcta se incrementará la puntuación, el objetivo es ser el jugador con la mayor puntuación.

    7.2. A.4 CONCLUSIONES Valorar el proyecto desde un punto de vista ético, social, económico y medioambiental y justificar si el uso de criterios de sostenibilidad ha aportado o puede aportar valor añadido al proyecto. Este proyecto cumple con los puntos éticos, sociales y económicos que permiten hacerlo un proyecto sostenible, en cuanto a valores éticos, es un juego desarrollado para todos los públicos en especial menores de edad, con ningún tipo de contenido violento. Dispone de opción para economizar el videojuego a través de anuncios. En conclusión, creemos que se trata de un proyecto sostenible y que cumple con los requisitos solicitados.

  • 40