desarrollo de un juego de tablero con realidad aumentada

41
Escuela Técnica Superior de Ingeniería Informática Universitat Politècnica de València Desarrollo de un juego de tablero con Realidad Aumentada Proyecto Final de Carrera Grado en Ingeniería Informática Autor: Iván Pallarés Barberá Director: M. Carmen Juan Lizandra 04-09-2016

Upload: others

Post on 31-Jul-2022

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Desarrollo de un juego de tablero con Realidad Aumentada

Escuela Teacutecnica Superior de Ingenieriacutea Informaacutetica

Universitat Politegravecnica de Valegravencia

Desarrollo de un juego de tablero

con Realidad Aumentada

Proyecto Final de Carrera

Grado en Ingenieriacutea Informaacutetica

Autor Ivaacuten Pallareacutes Barberaacute

Director M Carmen Juan Lizandra

04-09-2016

2

Resumen

La realidad aumentada (RA) estaacute introducieacutendose poco a poco en el diacuteaa diacutea De hecho nos la podemos encontrar cada vez maacutes habitualmenteen entornos luacutedicos (juegos aplicacioneshellip) asi como en entornos deinvestigacioacuten

En este trabajo nos vamos a centrar en el entorno luacutedico de estatecnologia ya que su espectacularidad y funcionalidad tienen lacapacidad de atraer a un buen nuacutemero de personas

Vamos a crear un juego en el que podemos seleccionar nuestropersonaje ofreciendo a la caacutemara diversos targets para luego poderusarlo en un mapa con casillas La funcionalidad baacutesica de estaaplicacioacuten es tirar un dado para avanzar casillas y ser el que primerollegue a la meta El objetivo principal es crear un juego luacutedico destinado ausuarios de un gran rango de edades El juego tiene la funcioacuten deentretener e incluso se podriacutean hacer unas modificaciones para quefuese un juego para el aprendizage Para esto se ha introducido la RA enel juego de casillas Primero en la seleccioacuten de personaje dondepodremos visualizarlo en nuestro dispositivo a traveacutes de la caacutemara Porotra parte el tableto va a ser mostrado tambieacuten por la caacutemara y loveremos introducido en nuestro entorno

Palabras clave Unity Vuforia Realidad Aumentada Juego 3D

3

Resum

La realitat augmentada (RA) estagrave introduintse poc a poc en el diacutea a diacuteaDe fet ens la podem encontrar cada volta meacutes habitualment en entornsluacutedics (jocs aplicacionshellip) asiacute com en entorns dinvestigacioacute

En aquest treball ens centrarem en lentorn luacutedic daquesta tecnologia jaque la seua espectacularitat y funcionalitat tenen la capacitat datraure unbon nombre de persones

Anem a crear un joc en el que podem seleccionar el nostre personatgeoferint a la cagravemera diversos targets per despreacutes poder utilitzar-lo en unmapa amb caselles La funcionalitat bagravesica daquesta aplicacioacute es llanccedilarun dau per avanccedilar caselles i ser el primer que arrive a la metaLobjectiu principal eacutes crear un joc luacutedic destinat a usuaris dun gran rengdedats El joc teacute la funcioacute dentretindre i incluacutes es podrien fer unesmodificacions perquegrave foacutera un joc per a laprendizage Per a accedilograve shaintroduiumlt la RA en el joc de caselles Primer en la seleccioacute de personatgeon podrem visualitzar-ho en el nostre dispositiu a traveacutes de la cambraDaltra banda el tableto seragrave mostrat tambeacute per la cambra i ho veuremintroduiumlt en el nostre entorn

Paraules clau Unity Vuforia Realitat Augmentada Joc 3D

4

Abstract

Augmented reality is at an early stage of development and has not yetbeen able to find a utility in which it can be above other technologiesNevertheless we can find it every day and more regularity in ludicenvironments( games applications) and research environments

In this paper we will focus on the ludic environment of this technology astheir showmanship and functionality have the ability to attract a bignumber of people

We are going to create a game in which your character can be selectedoffering a target to the camera then you can use it un a map with boxesThe basic functionality of this application is throwing a dice to move boxesand be the first to reach the goal The main objective is to create aentretaining game for users of a wide range of ages The game has thefunction of entretaining and even we could do some modifications to turnit into a game of aprendizage For this RA has been introduced in thegame First on the character selection we can view it on our devicethrough the camera Moreover the board will be also sown by the cameraand we will see added to our environment

Keywords Unity Vuforia Augmented Reality Joc 3D

5

Iacutendice general

1 Introduccioacuten 10

11 Motivacioacuten 10

12 Objetivos 12

13 Estructura de la memoria 12

2 Estado del arte 14

21 Realidad aumentada 14

211 Definicioacuten 14

212 Teacutecnicas de visualizacioacuten 15

213 Historia 16

213 Actualidad 18

22 Propuesta 21

3 Herramientas 23

31 Unity 3D 23

32 Vuforia 24

4 Desarrollo 28

41 Descripcioacuten 28

42 Pasos 29

421 Instalacioacuten 29

422 Busqueda de aplicaciones similares 31

423 Primeras pruebas 32

424 Interfaces 33

425 Fase Inicial de Desarrollo 34

426 Fase Final de Desarrollo 35

5 Conclusiones 37

6 Trabajos Futuros 39

Bibliografiacutea 41

6

Iacutendice de figuras

Figura 11 Hololens por Microsoft 9

Figura 21 Continuo de Milgram 12

Figura 22 Imagen del sensorama por Morton Heilig 13

Figura 23 Head Mounted Display por Ivan Sutherland 14

Figura 24 Dispositivo para configuracioacuten de cables 15

Figura 25 Cubo interactivo 16

Figura 26 Minecraft sobre Hololens 17

Figura 27 Pokemon GO 18

Figura 28 Uso de la RA con fines terapeacuteuticos 19

Figura 31 Versiones de Unity 22

Figura 32 Diagrama de flujo de Vuforia 23

Figura 41 Descarga de Unity 28

Figura 42 Aplicaciones similares de RA 29

Figura 43 Target simple 30

Figura 44 Muacuteltiples Targets 31

Figura 45 Pantalla principal 31

Figura 46 Diagrama de flujo 32

Figura 47 Tablero inicial 33

Figura 48 Seleccioacuten de personaje 34

Figura 49 Tirada del Juego 35

Figura 410 Tienda del juego 35

7

Capiacutetulo 1

Introduccioacuten

11 Motivacioacuten

El auge de las aplicaciones moacuteviles junto con la expansioacuten constante delos mismos en los uacuteltimos antildeos nos han llevado a convivir con latecnologiacutea diacutea a diacutea Constantemente manejamos cualquier tipo deaplicacioacuten ya sea para ver el tiempo que haraacute en la ciudad en la queestamos para leer las noticias como para contactar con nuestros amigos

Es mucho el tiempo que pasamos a lo largo del diacutea delante de nuestrodispositivo moacutevil Es por esto que el desarrollo de aplicaciones es unmercado con un gran puacuteblico y donde es muy faacutecil y accesible entrar

Es por eso que el desarrollo de un juego basado en Android puede seruna manera de introducirnos en el mundo de las aplicaciones moacutevilesUna parte de este mercado se basa en la realidad aumentada

8

La idea de realidad aumentada en concreto se refiere a la inclusioacuten entiempo real de elementos virtuales dentro del universo fiacutesico Utilizandounas gafas u otros dispositivos especiales una persona puede observarel mundo real con ciertos elementos agregados que aparecen en suslentes o pantalla a modo de informacioacuten digital En la Figura 11 semuestra coacutemo se ve el planeta tierra mediante el dispositivo Hololens deMicrosoft tambieacuten nos permite interactuar con eacutel

Eacutesta puede ser una tecnologiacutea muy interesante ya que nos muestracualquier tipo de imagen o cuerpo virtual a traveacutes de la caacutemara denuestro dispositivo moacutevil esto tiene gran capacidad de atraccioacuten paracualquier tipo de usuario por ser una tecnologiacutea relativamente nueva

12 Objetivos

El objetivo principal de este trabajo es desarrollar una aplicacioacuten paradispositivos Android (pese a que luego se puede trasladar a iOS) basadaen un sistema de turnos En el turno se deberaacute hacer una tirada con un

9

Figura 11 Hololens por Microsoft

dado y se iraacute avanzando por las casillas el nuacutemero sacado en la tirada Eljugador que primero llegue a la uacuteltima casilla seraacute el ganador

Los objetivos seraacuten los siguientes

Podremos seleccionar nuestro personaje desde una pantalladonde mostraremos los distintos targets a la caacutemara

Este personaje seraacute introducido en un mapa con casillas dondepodremos jugar con eacutel

La aplicacioacuten tendraacute una seccioacuten de opciones donde cambiardistintas configuraciones como el sonido o el idioma

12 Estructura de la memoria

Eacutesta memoria se divide en un total de siete capiacutetulos Cada uno centradoen la explicacioacuten de un punto distinto A continuacioacuten explicaremos elcuerpo de cada capiacutetulo

El primer capiacutetulo introduce el motivo de este trabajo asiacute como las ideasbaacutesicas de las cuales sale la idea Otro punto explicaraacute los objetivos delmismo y por uacuteltimo esta pequentildea estructura

10

Capiacutetulo 2

Estado del arte

21 Realidad aumentada

211 Definicioacuten

La realidad aumentada (RA) es el teacutermino que se usa para definir unavisioacuten a traveacutes de un dispositivo tecnoloacutegico directa o indirecta de unentorno fiacutesico del mundo real cuyos elementos se combinan conelementos virtuales para la creacioacuten de una realidad mixta en tiemporeal Consiste en un conjunto de dispositivos que antildeaden informacioacutenvirtual a la informacioacuten fiacutesica ya existente

Eacutesta es la principal diferencia con la realidad virtual puesto que nosustituye la realidad fiacutesica sino que superpone los datos informaacuteticos almundo real Como podemos observar en la Figura 21 la realidad

11

aumentada se encuentra entre el entorno virtual y el real En ella semuestra el continuo de Realidad-Virtual de Milgram (1994)[1]

Figura 21 Continuo de Milgram

212 Teacutecnicas de visualizacioacuten

Existen tres teacutecnicas distintas de visualizacion de RA

Display en la cabeza Con sus siglas en ingleacutes HMD (HeadMounted Display) consta de un dispositivo que actua como unasgafas o un visor que nos colocamos en la cabeza y desde el quepodemos ver los objetos virtuales sobre la visioacuten del mundo real

Display de mano Consta de una pantalla pequentildea baacutesicamenteun smartphone o una tablet donde a traveacutes de la caacutemara eldispositivo informaacutetico superpone los objetos virtuales sobre lasimaacutegenes capturadas

Display espacial La realidad aumentada espacial usa un proyectorpara mostrarnos las imaacutegenes virtuales encima de los objetosreales La principal ventaja de esta teacutecnica es poder utilizarla engrupos en lugar de un usuario exclusivamente

Por uacuteltimo comentar que en este trabajo vamos a centrarnos en lateacutecnica del display de mano usando nuestro dispositivo moacutevil paramostrar la RA

12

213 Historia

Debemos entender que Realidad Virtual y Realidad Aumentada han idopraacutecticamente de la mano

En 1950 Morton Heilig escribioacute sobre un ldquoCine de Experienciardquo quepudiera acompantildear a todos los sentidos de una manera efectivaintegrando al espectador con la actividad en la pantalla Construyoacute unprototipo llamado el Sensorama en 1962 junto con 5 filmes cortos quepermitiacutean aumentar la experiencia del espectador a traveacutes de sussentidos (vista olfato tacto y oiacutedo) Podemos ver una foto delSensorama en la Figura 22

Figura 22 Imagen del sensorama por Morton Heilig

En 1968 Ivan Sutherland con la ayuda de su estudiante Bob Sproullconstruyeron lo que seriacutea ampliamente considerado el primer HeadMounted Display (HMD) para Realidad Virtual y Realidad AumentadaComo podemos ver en la Figura 23 era muy primitivo en teacuterminos deInterfaz de usuario y realismo y el HMD usado por el usuario era tangrande y pesado que debiacutea colgarse del techo y los graacuteficos que haciacuteanal ambiente virtual eran simples ldquomodelos alaacutembricordquo A finales de los 80

13

se popularizoacute el teacutermino Realidad Virtual por Jaron Lanier cuyacompantildeiacutea creoacute los primeros guantes y gafas de Realidad Virtual

Figura 23 Head MountedDisplay por Ivan Sutherland

El teacutermino Realidad Aumentada fue introducido por el investigador TomCaudell en Boeing en 1992 Caudell fue contratado para encontrar unaalternativa a los tediosos tableros de configuracioacuten de cables que utilizanlos trabajadores Salioacute con la idea de gafas especiales y tablerosvirtuales sobre tableros reales geneacutericos es asiacute que se le ocurrioacute queestaba ldquoaumentandordquo la realidad del usuario El teacutermino RealidadAumentada fue dado al puacuteblico en un artiacuteculo en 1992

14

Figura 24 Dispositivo para configuracioacuten de cables

213 Actualidad

En la actualidad la realidad aumentada cada vez se estaacute ganando un sitioen el diacutea a diacutea de las personas El gran avance de las tecnologiacuteas hahecho posible lo que anteriormente solo se podiacutea imaginar SeguacutenTechNavio (wwwtechnaviocom) una empresa de articulos deinvestigacioacuten la realidad aumentada tiene un prometedor futuroAugurando para eacuteste un crecimiento del 132 entre 2014 y 2018

En los uacuteltimos antildeos se han desarrollado muacuteltiples tecnologiacuteas que hansido uacutetiles para el desarrollo de la realidad aumentada Algunos ejemplosson ARToolKit ATOMIC Authoring Tool o Vuforia Este uacuteltimo es elsoftware que usaremos para el desarrollo de nuestra aplicacioacuten

El avance que maacutes ha contribuido a la realidad aumentada es la granexpansioacuten de los dispositivos moacuteviles Con una gran capacidad decoacutemputo una caacutemara y una gran pantalla donde interactuar con lasimaacutegenes que nos proyecta la aplicacioacuten Se convierten en el dispositivoclave donde esta tecnologiacutea puede hacer su gran aparicioacuten

15

Visto que la realidad aumentada teniacutea un gran futuro las empresas estaacutenempezando a interesarse por esta tecnologiacutea por sus interminablesaplicaciones aplicaacutendola asiacute en distintos sectores

Educacioacuten

Podemos incluir en los libros las imaacutegenes necesarias para permitirnosvisualizar objetos en 3D desde un dispositivo moacutevil para asiacute permitirexplorar desde el cuerpo humano hasta los inventos maacutes importantes dela historia Vemos en la Figura 25 un cubo con un target donde podervisualizar el elemento 3D[2] Tambieacuten nos permite escanear obras de artemonumentos o edificios para mostrarnos una pequentildea descripcioacuten ohistoria

Entretenimiento

En el sector del entretenimiento tiene una gran trayectoria ya que en losuacutetlimos antildeos han salido a la luz distintas aplicaciones o dispositivos Losmaacutes significativos los vamos a mencionar a continuacioacuten

Hololens Un dispositivo de la empresa Microsoft que consiste enunas gafas inalaacutembricas que nos proyectan delante de nosotros lasimaacutegenes en 3D y nos permite interactuar con ellas

16

Figura 25 Cubo interactivo

Figura 26 Minecraft sobre Hololens

Cascos de realidad virtual En este apartado tenemos actualmentetres empresas compitiendo por el mercado de la realidad virtualPor una parte tenemos el Oculus Rift de la empresa Oculus VRTambieacuten tenemos el HTC Vive de la empresa HC y por uacuteltimoPlayStation VR de Sony Esto nos muestra el gran mercado quetiene la realidad virtual Estos cascos se basan en poner unapantalla muy cercana a los ojos del usuario y eliminarle todo elcampo de visioacuten De esta manera la inmersioacuten en lo que se estaacuteviendo es mayor

Invizimals Videojuego desarrollado por Novarama para la consolaPSP Se puede decir que ha sido el juego de realidad aumentadaque maacutes se ha expandido en el momento en que salioacute El juegoincluye unas tarjetas donde enfocando la caacutemara podremos vernuestras mascotas Invizimals y podemos interactuar con ellas

PokemonGo Es un juego de realidad aumentada de la empresaNiantic que ha revolucionado el mundo de los juegos de losdispositivos moacuteviles haciendo que miles de personas salgan a lacalle a capturar pokemon mediante su smartphone No hace ni tresmeses que ha salido y cuenta con cuatro millones de descargassolo en PlayStore

17

Figura 27 Pokemon GO

Gafas de RA Un ejemplo de estas son las Google Glass de laempresa Google Son unas gafas de realidad aumentadadestinadas a mostrarnos la informacioacuten de nuestro teleacutefono moacutevilsin necesidad de utilizar las manos tambieacuten podremos navegarpor internet por medio de oacuterdenes de voz

Psicologiacutea

El tema de la superacioacuten de traumas puede ser a veces un temadelicado un proceso largo y costoso Pero la realidad aumentada unavez maacutes son sorprende con sus aplicaciones esta vez en el campo de lapsicologiacutea Al permitir mostrar cuerpos digitales en un entorno realpodemos por ejemplo visualizar un miedo por ejemplo a las cucarachaso arantildeas en un entorno real y asiacute controlar como el paciente seacostumbra a su presencia controlando el nuacutemero y el comportamientode eacutestas Como ejemplo se hizo un estudio en la Universidad Politecnicade Valencia en el que se sometiacutea a diversas personas a la visualizacioacutende sus fobias en un entorno controlado [3]

18

Figura 28 Uso de la RA con fines terapeacuteuticos

Otro ejemplo de fobia que podemos superar mediante la realidadaumentada es la fobia a las alturas Mediante RA podemos hacer que unpaciente tenga la sensacioacuten de estar en un sitio alto o con caiacuteda sinninguacuten tipo de peligro[4]

Sector Industrial

Otro sector en el que la realidad aumentada ha logrado hacerse ver esen el sector industrial Un ejemplo son las gafas Moverio Pro BT-2000 dela empresa Epson donde los usuarios pueden ver lo que estaacuten viendootros trabajadores para asi mejorar la comunicacioacuten y permitir apoyar laformacioacuten de nuevos trabajadores

22 PropuestaLa finalidad de este trabajo es realizar un juego de realidad aumentadadonde por medio de unas imaacutegenes reales podremos seleccionar elpersonaje que queremos jugar Para luego introducirlo en un mapa concasillas en el que tiraremos un dado y avanzaremos casillas con nuestropersonaje Nos enfrentaremos a otro personaje controlado por la IA Elprimero que llegue a la uacuteltima casilla seraacute el vencedor

19

20

Capiacutetulo 3

Herramientas

31 Unity 3D

Unity 3D es una herramienta para el desarrollo de videojuegosmultiplataforma de la empresa Unity Technologies Existen otrasplataformas de desarrollo de videojuegos como UDK de Epic Games oCryEngine de CRYtek pero lo que adelanta Unity a las demaacutes es quepuede ser usado tanto para Windows como para Mac Unity viene convarias versiones desde la versioacuten gratuita hasta la versioacuten PRO por 125$al mes Esta uacuteltima nos ofrece unos servicios exclusivos como soportepremium kits de assets o tutoriales Tambieacuten nos ofrece una versioacuten paraempresas que nos permite obtener una configuracioacuten personalizada

21

Figura 31 Versiones de Unity

El motor Unity nos permite desarrollar no solo videojuegos Tambieacuten nospermite desarrollar todo tipo de aplicaciones graacuteficas Tambieacuten se haincluido la opcioacuten de desarrollar aplicaciones moacuteviles para Android o iOSy todas las plataformas maacutes importantes de videojuegos actuales comoMicrosoft Nintendo o Sony

Otra de las ventajas de utilizar Unity es la Unity Store donde encontrarrecursos de todo tipo Muchos de ellos gratuitos Esto hace que podamosrealizar un videojuego sin necesidad de saber modelado 3D

32 Vuforia

De la empresa Qualcomm Vuforia es una de las plataformas de realidadaumentada que maacutes ha credico en el uacuteltimo antildeo Tiene maacutes de 30000desarrolladores en todo el mundo y grandes empresas como Audi Nike o Sonyentre otras ya la han usado

Vuforia es un SDK que permite visualizar imaacutegenes en 3D mediante la caacutemarade nuestro dispositivo De esta manera se mezclan objetos del mundo real ydel virtual Vuforia tambieacuten permite el reconocimiento de texto reconocimientode muacuteltiples targets al mismo tiempo y la deteccioacuten raacutepida de targets entreotras funcionalidades

22

Su arquitectura consta de cuatro elementos baacutesicos que procederemos adescribir a continuacioacuten

Caacutemara Capta la imagen para que posteriormente eacutesta sea procesadapor el Tracker

Base de Datos Almacena una serie de Targets para ser reconocidos porel Tracker Se crea con el Target Manager y puede ser local o en lanube

Target Se utilizan para permitir al Tracker el reconocimiento del mundoreal pueden ser de diferentes tipos como Image Targets o Word Targetentre otros

Tracker Analiza la imagen de la caacutemara y asiacute detecta los objetos delmundo real para buscar coincidencias en su base de datos

23

Figura 32 Diagrama de flujo de Vuforia

Una vez explicados los elementos de la arquitectura de Vuforia vamos aexplicar brevemente los pasos que sigue para el reconocimiento de unaimagen

Primero el dispositivo captura una escena mediente la caacutemara de viacutedeo

La SDK de Vuforia coge una imagen de las que componen el video yconvierte esa imagen a una resolucioacuten que el Tracker pueda manejar

Mediante el Tracker Vuforia analiza la imagen y busca similitudes en losTargets de la base de datos

Por uacuteltimo la aplicacioacuten puede renderizar el objeto 3D en la pantalla deldispositivo moacutevil y de esta manera crear realidad aumentada

24

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 2: Desarrollo de un juego de tablero con Realidad Aumentada

2

Resumen

La realidad aumentada (RA) estaacute introducieacutendose poco a poco en el diacuteaa diacutea De hecho nos la podemos encontrar cada vez maacutes habitualmenteen entornos luacutedicos (juegos aplicacioneshellip) asi como en entornos deinvestigacioacuten

En este trabajo nos vamos a centrar en el entorno luacutedico de estatecnologia ya que su espectacularidad y funcionalidad tienen lacapacidad de atraer a un buen nuacutemero de personas

Vamos a crear un juego en el que podemos seleccionar nuestropersonaje ofreciendo a la caacutemara diversos targets para luego poderusarlo en un mapa con casillas La funcionalidad baacutesica de estaaplicacioacuten es tirar un dado para avanzar casillas y ser el que primerollegue a la meta El objetivo principal es crear un juego luacutedico destinado ausuarios de un gran rango de edades El juego tiene la funcioacuten deentretener e incluso se podriacutean hacer unas modificaciones para quefuese un juego para el aprendizage Para esto se ha introducido la RA enel juego de casillas Primero en la seleccioacuten de personaje dondepodremos visualizarlo en nuestro dispositivo a traveacutes de la caacutemara Porotra parte el tableto va a ser mostrado tambieacuten por la caacutemara y loveremos introducido en nuestro entorno

Palabras clave Unity Vuforia Realidad Aumentada Juego 3D

3

Resum

La realitat augmentada (RA) estagrave introduintse poc a poc en el diacutea a diacuteaDe fet ens la podem encontrar cada volta meacutes habitualment en entornsluacutedics (jocs aplicacionshellip) asiacute com en entorns dinvestigacioacute

En aquest treball ens centrarem en lentorn luacutedic daquesta tecnologia jaque la seua espectacularitat y funcionalitat tenen la capacitat datraure unbon nombre de persones

Anem a crear un joc en el que podem seleccionar el nostre personatgeoferint a la cagravemera diversos targets per despreacutes poder utilitzar-lo en unmapa amb caselles La funcionalitat bagravesica daquesta aplicacioacute es llanccedilarun dau per avanccedilar caselles i ser el primer que arrive a la metaLobjectiu principal eacutes crear un joc luacutedic destinat a usuaris dun gran rengdedats El joc teacute la funcioacute dentretindre i incluacutes es podrien fer unesmodificacions perquegrave foacutera un joc per a laprendizage Per a accedilograve shaintroduiumlt la RA en el joc de caselles Primer en la seleccioacute de personatgeon podrem visualitzar-ho en el nostre dispositiu a traveacutes de la cambraDaltra banda el tableto seragrave mostrat tambeacute per la cambra i ho veuremintroduiumlt en el nostre entorn

Paraules clau Unity Vuforia Realitat Augmentada Joc 3D

4

Abstract

Augmented reality is at an early stage of development and has not yetbeen able to find a utility in which it can be above other technologiesNevertheless we can find it every day and more regularity in ludicenvironments( games applications) and research environments

In this paper we will focus on the ludic environment of this technology astheir showmanship and functionality have the ability to attract a bignumber of people

We are going to create a game in which your character can be selectedoffering a target to the camera then you can use it un a map with boxesThe basic functionality of this application is throwing a dice to move boxesand be the first to reach the goal The main objective is to create aentretaining game for users of a wide range of ages The game has thefunction of entretaining and even we could do some modifications to turnit into a game of aprendizage For this RA has been introduced in thegame First on the character selection we can view it on our devicethrough the camera Moreover the board will be also sown by the cameraand we will see added to our environment

Keywords Unity Vuforia Augmented Reality Joc 3D

5

Iacutendice general

1 Introduccioacuten 10

11 Motivacioacuten 10

12 Objetivos 12

13 Estructura de la memoria 12

2 Estado del arte 14

21 Realidad aumentada 14

211 Definicioacuten 14

212 Teacutecnicas de visualizacioacuten 15

213 Historia 16

213 Actualidad 18

22 Propuesta 21

3 Herramientas 23

31 Unity 3D 23

32 Vuforia 24

4 Desarrollo 28

41 Descripcioacuten 28

42 Pasos 29

421 Instalacioacuten 29

422 Busqueda de aplicaciones similares 31

423 Primeras pruebas 32

424 Interfaces 33

425 Fase Inicial de Desarrollo 34

426 Fase Final de Desarrollo 35

5 Conclusiones 37

6 Trabajos Futuros 39

Bibliografiacutea 41

6

Iacutendice de figuras

Figura 11 Hololens por Microsoft 9

Figura 21 Continuo de Milgram 12

Figura 22 Imagen del sensorama por Morton Heilig 13

Figura 23 Head Mounted Display por Ivan Sutherland 14

Figura 24 Dispositivo para configuracioacuten de cables 15

Figura 25 Cubo interactivo 16

Figura 26 Minecraft sobre Hololens 17

Figura 27 Pokemon GO 18

Figura 28 Uso de la RA con fines terapeacuteuticos 19

Figura 31 Versiones de Unity 22

Figura 32 Diagrama de flujo de Vuforia 23

Figura 41 Descarga de Unity 28

Figura 42 Aplicaciones similares de RA 29

Figura 43 Target simple 30

Figura 44 Muacuteltiples Targets 31

Figura 45 Pantalla principal 31

Figura 46 Diagrama de flujo 32

Figura 47 Tablero inicial 33

Figura 48 Seleccioacuten de personaje 34

Figura 49 Tirada del Juego 35

Figura 410 Tienda del juego 35

7

Capiacutetulo 1

Introduccioacuten

11 Motivacioacuten

El auge de las aplicaciones moacuteviles junto con la expansioacuten constante delos mismos en los uacuteltimos antildeos nos han llevado a convivir con latecnologiacutea diacutea a diacutea Constantemente manejamos cualquier tipo deaplicacioacuten ya sea para ver el tiempo que haraacute en la ciudad en la queestamos para leer las noticias como para contactar con nuestros amigos

Es mucho el tiempo que pasamos a lo largo del diacutea delante de nuestrodispositivo moacutevil Es por esto que el desarrollo de aplicaciones es unmercado con un gran puacuteblico y donde es muy faacutecil y accesible entrar

Es por eso que el desarrollo de un juego basado en Android puede seruna manera de introducirnos en el mundo de las aplicaciones moacutevilesUna parte de este mercado se basa en la realidad aumentada

8

La idea de realidad aumentada en concreto se refiere a la inclusioacuten entiempo real de elementos virtuales dentro del universo fiacutesico Utilizandounas gafas u otros dispositivos especiales una persona puede observarel mundo real con ciertos elementos agregados que aparecen en suslentes o pantalla a modo de informacioacuten digital En la Figura 11 semuestra coacutemo se ve el planeta tierra mediante el dispositivo Hololens deMicrosoft tambieacuten nos permite interactuar con eacutel

Eacutesta puede ser una tecnologiacutea muy interesante ya que nos muestracualquier tipo de imagen o cuerpo virtual a traveacutes de la caacutemara denuestro dispositivo moacutevil esto tiene gran capacidad de atraccioacuten paracualquier tipo de usuario por ser una tecnologiacutea relativamente nueva

12 Objetivos

El objetivo principal de este trabajo es desarrollar una aplicacioacuten paradispositivos Android (pese a que luego se puede trasladar a iOS) basadaen un sistema de turnos En el turno se deberaacute hacer una tirada con un

9

Figura 11 Hololens por Microsoft

dado y se iraacute avanzando por las casillas el nuacutemero sacado en la tirada Eljugador que primero llegue a la uacuteltima casilla seraacute el ganador

Los objetivos seraacuten los siguientes

Podremos seleccionar nuestro personaje desde una pantalladonde mostraremos los distintos targets a la caacutemara

Este personaje seraacute introducido en un mapa con casillas dondepodremos jugar con eacutel

La aplicacioacuten tendraacute una seccioacuten de opciones donde cambiardistintas configuraciones como el sonido o el idioma

12 Estructura de la memoria

Eacutesta memoria se divide en un total de siete capiacutetulos Cada uno centradoen la explicacioacuten de un punto distinto A continuacioacuten explicaremos elcuerpo de cada capiacutetulo

El primer capiacutetulo introduce el motivo de este trabajo asiacute como las ideasbaacutesicas de las cuales sale la idea Otro punto explicaraacute los objetivos delmismo y por uacuteltimo esta pequentildea estructura

10

Capiacutetulo 2

Estado del arte

21 Realidad aumentada

211 Definicioacuten

La realidad aumentada (RA) es el teacutermino que se usa para definir unavisioacuten a traveacutes de un dispositivo tecnoloacutegico directa o indirecta de unentorno fiacutesico del mundo real cuyos elementos se combinan conelementos virtuales para la creacioacuten de una realidad mixta en tiemporeal Consiste en un conjunto de dispositivos que antildeaden informacioacutenvirtual a la informacioacuten fiacutesica ya existente

Eacutesta es la principal diferencia con la realidad virtual puesto que nosustituye la realidad fiacutesica sino que superpone los datos informaacuteticos almundo real Como podemos observar en la Figura 21 la realidad

11

aumentada se encuentra entre el entorno virtual y el real En ella semuestra el continuo de Realidad-Virtual de Milgram (1994)[1]

Figura 21 Continuo de Milgram

212 Teacutecnicas de visualizacioacuten

Existen tres teacutecnicas distintas de visualizacion de RA

Display en la cabeza Con sus siglas en ingleacutes HMD (HeadMounted Display) consta de un dispositivo que actua como unasgafas o un visor que nos colocamos en la cabeza y desde el quepodemos ver los objetos virtuales sobre la visioacuten del mundo real

Display de mano Consta de una pantalla pequentildea baacutesicamenteun smartphone o una tablet donde a traveacutes de la caacutemara eldispositivo informaacutetico superpone los objetos virtuales sobre lasimaacutegenes capturadas

Display espacial La realidad aumentada espacial usa un proyectorpara mostrarnos las imaacutegenes virtuales encima de los objetosreales La principal ventaja de esta teacutecnica es poder utilizarla engrupos en lugar de un usuario exclusivamente

Por uacuteltimo comentar que en este trabajo vamos a centrarnos en lateacutecnica del display de mano usando nuestro dispositivo moacutevil paramostrar la RA

12

213 Historia

Debemos entender que Realidad Virtual y Realidad Aumentada han idopraacutecticamente de la mano

En 1950 Morton Heilig escribioacute sobre un ldquoCine de Experienciardquo quepudiera acompantildear a todos los sentidos de una manera efectivaintegrando al espectador con la actividad en la pantalla Construyoacute unprototipo llamado el Sensorama en 1962 junto con 5 filmes cortos quepermitiacutean aumentar la experiencia del espectador a traveacutes de sussentidos (vista olfato tacto y oiacutedo) Podemos ver una foto delSensorama en la Figura 22

Figura 22 Imagen del sensorama por Morton Heilig

En 1968 Ivan Sutherland con la ayuda de su estudiante Bob Sproullconstruyeron lo que seriacutea ampliamente considerado el primer HeadMounted Display (HMD) para Realidad Virtual y Realidad AumentadaComo podemos ver en la Figura 23 era muy primitivo en teacuterminos deInterfaz de usuario y realismo y el HMD usado por el usuario era tangrande y pesado que debiacutea colgarse del techo y los graacuteficos que haciacuteanal ambiente virtual eran simples ldquomodelos alaacutembricordquo A finales de los 80

13

se popularizoacute el teacutermino Realidad Virtual por Jaron Lanier cuyacompantildeiacutea creoacute los primeros guantes y gafas de Realidad Virtual

Figura 23 Head MountedDisplay por Ivan Sutherland

El teacutermino Realidad Aumentada fue introducido por el investigador TomCaudell en Boeing en 1992 Caudell fue contratado para encontrar unaalternativa a los tediosos tableros de configuracioacuten de cables que utilizanlos trabajadores Salioacute con la idea de gafas especiales y tablerosvirtuales sobre tableros reales geneacutericos es asiacute que se le ocurrioacute queestaba ldquoaumentandordquo la realidad del usuario El teacutermino RealidadAumentada fue dado al puacuteblico en un artiacuteculo en 1992

14

Figura 24 Dispositivo para configuracioacuten de cables

213 Actualidad

En la actualidad la realidad aumentada cada vez se estaacute ganando un sitioen el diacutea a diacutea de las personas El gran avance de las tecnologiacuteas hahecho posible lo que anteriormente solo se podiacutea imaginar SeguacutenTechNavio (wwwtechnaviocom) una empresa de articulos deinvestigacioacuten la realidad aumentada tiene un prometedor futuroAugurando para eacuteste un crecimiento del 132 entre 2014 y 2018

En los uacuteltimos antildeos se han desarrollado muacuteltiples tecnologiacuteas que hansido uacutetiles para el desarrollo de la realidad aumentada Algunos ejemplosson ARToolKit ATOMIC Authoring Tool o Vuforia Este uacuteltimo es elsoftware que usaremos para el desarrollo de nuestra aplicacioacuten

El avance que maacutes ha contribuido a la realidad aumentada es la granexpansioacuten de los dispositivos moacuteviles Con una gran capacidad decoacutemputo una caacutemara y una gran pantalla donde interactuar con lasimaacutegenes que nos proyecta la aplicacioacuten Se convierten en el dispositivoclave donde esta tecnologiacutea puede hacer su gran aparicioacuten

15

Visto que la realidad aumentada teniacutea un gran futuro las empresas estaacutenempezando a interesarse por esta tecnologiacutea por sus interminablesaplicaciones aplicaacutendola asiacute en distintos sectores

Educacioacuten

Podemos incluir en los libros las imaacutegenes necesarias para permitirnosvisualizar objetos en 3D desde un dispositivo moacutevil para asiacute permitirexplorar desde el cuerpo humano hasta los inventos maacutes importantes dela historia Vemos en la Figura 25 un cubo con un target donde podervisualizar el elemento 3D[2] Tambieacuten nos permite escanear obras de artemonumentos o edificios para mostrarnos una pequentildea descripcioacuten ohistoria

Entretenimiento

En el sector del entretenimiento tiene una gran trayectoria ya que en losuacutetlimos antildeos han salido a la luz distintas aplicaciones o dispositivos Losmaacutes significativos los vamos a mencionar a continuacioacuten

Hololens Un dispositivo de la empresa Microsoft que consiste enunas gafas inalaacutembricas que nos proyectan delante de nosotros lasimaacutegenes en 3D y nos permite interactuar con ellas

16

Figura 25 Cubo interactivo

Figura 26 Minecraft sobre Hololens

Cascos de realidad virtual En este apartado tenemos actualmentetres empresas compitiendo por el mercado de la realidad virtualPor una parte tenemos el Oculus Rift de la empresa Oculus VRTambieacuten tenemos el HTC Vive de la empresa HC y por uacuteltimoPlayStation VR de Sony Esto nos muestra el gran mercado quetiene la realidad virtual Estos cascos se basan en poner unapantalla muy cercana a los ojos del usuario y eliminarle todo elcampo de visioacuten De esta manera la inmersioacuten en lo que se estaacuteviendo es mayor

Invizimals Videojuego desarrollado por Novarama para la consolaPSP Se puede decir que ha sido el juego de realidad aumentadaque maacutes se ha expandido en el momento en que salioacute El juegoincluye unas tarjetas donde enfocando la caacutemara podremos vernuestras mascotas Invizimals y podemos interactuar con ellas

PokemonGo Es un juego de realidad aumentada de la empresaNiantic que ha revolucionado el mundo de los juegos de losdispositivos moacuteviles haciendo que miles de personas salgan a lacalle a capturar pokemon mediante su smartphone No hace ni tresmeses que ha salido y cuenta con cuatro millones de descargassolo en PlayStore

17

Figura 27 Pokemon GO

Gafas de RA Un ejemplo de estas son las Google Glass de laempresa Google Son unas gafas de realidad aumentadadestinadas a mostrarnos la informacioacuten de nuestro teleacutefono moacutevilsin necesidad de utilizar las manos tambieacuten podremos navegarpor internet por medio de oacuterdenes de voz

Psicologiacutea

El tema de la superacioacuten de traumas puede ser a veces un temadelicado un proceso largo y costoso Pero la realidad aumentada unavez maacutes son sorprende con sus aplicaciones esta vez en el campo de lapsicologiacutea Al permitir mostrar cuerpos digitales en un entorno realpodemos por ejemplo visualizar un miedo por ejemplo a las cucarachaso arantildeas en un entorno real y asiacute controlar como el paciente seacostumbra a su presencia controlando el nuacutemero y el comportamientode eacutestas Como ejemplo se hizo un estudio en la Universidad Politecnicade Valencia en el que se sometiacutea a diversas personas a la visualizacioacutende sus fobias en un entorno controlado [3]

18

Figura 28 Uso de la RA con fines terapeacuteuticos

Otro ejemplo de fobia que podemos superar mediante la realidadaumentada es la fobia a las alturas Mediante RA podemos hacer que unpaciente tenga la sensacioacuten de estar en un sitio alto o con caiacuteda sinninguacuten tipo de peligro[4]

Sector Industrial

Otro sector en el que la realidad aumentada ha logrado hacerse ver esen el sector industrial Un ejemplo son las gafas Moverio Pro BT-2000 dela empresa Epson donde los usuarios pueden ver lo que estaacuten viendootros trabajadores para asi mejorar la comunicacioacuten y permitir apoyar laformacioacuten de nuevos trabajadores

22 PropuestaLa finalidad de este trabajo es realizar un juego de realidad aumentadadonde por medio de unas imaacutegenes reales podremos seleccionar elpersonaje que queremos jugar Para luego introducirlo en un mapa concasillas en el que tiraremos un dado y avanzaremos casillas con nuestropersonaje Nos enfrentaremos a otro personaje controlado por la IA Elprimero que llegue a la uacuteltima casilla seraacute el vencedor

19

20

Capiacutetulo 3

Herramientas

31 Unity 3D

Unity 3D es una herramienta para el desarrollo de videojuegosmultiplataforma de la empresa Unity Technologies Existen otrasplataformas de desarrollo de videojuegos como UDK de Epic Games oCryEngine de CRYtek pero lo que adelanta Unity a las demaacutes es quepuede ser usado tanto para Windows como para Mac Unity viene convarias versiones desde la versioacuten gratuita hasta la versioacuten PRO por 125$al mes Esta uacuteltima nos ofrece unos servicios exclusivos como soportepremium kits de assets o tutoriales Tambieacuten nos ofrece una versioacuten paraempresas que nos permite obtener una configuracioacuten personalizada

21

Figura 31 Versiones de Unity

El motor Unity nos permite desarrollar no solo videojuegos Tambieacuten nospermite desarrollar todo tipo de aplicaciones graacuteficas Tambieacuten se haincluido la opcioacuten de desarrollar aplicaciones moacuteviles para Android o iOSy todas las plataformas maacutes importantes de videojuegos actuales comoMicrosoft Nintendo o Sony

Otra de las ventajas de utilizar Unity es la Unity Store donde encontrarrecursos de todo tipo Muchos de ellos gratuitos Esto hace que podamosrealizar un videojuego sin necesidad de saber modelado 3D

32 Vuforia

De la empresa Qualcomm Vuforia es una de las plataformas de realidadaumentada que maacutes ha credico en el uacuteltimo antildeo Tiene maacutes de 30000desarrolladores en todo el mundo y grandes empresas como Audi Nike o Sonyentre otras ya la han usado

Vuforia es un SDK que permite visualizar imaacutegenes en 3D mediante la caacutemarade nuestro dispositivo De esta manera se mezclan objetos del mundo real ydel virtual Vuforia tambieacuten permite el reconocimiento de texto reconocimientode muacuteltiples targets al mismo tiempo y la deteccioacuten raacutepida de targets entreotras funcionalidades

22

Su arquitectura consta de cuatro elementos baacutesicos que procederemos adescribir a continuacioacuten

Caacutemara Capta la imagen para que posteriormente eacutesta sea procesadapor el Tracker

Base de Datos Almacena una serie de Targets para ser reconocidos porel Tracker Se crea con el Target Manager y puede ser local o en lanube

Target Se utilizan para permitir al Tracker el reconocimiento del mundoreal pueden ser de diferentes tipos como Image Targets o Word Targetentre otros

Tracker Analiza la imagen de la caacutemara y asiacute detecta los objetos delmundo real para buscar coincidencias en su base de datos

23

Figura 32 Diagrama de flujo de Vuforia

Una vez explicados los elementos de la arquitectura de Vuforia vamos aexplicar brevemente los pasos que sigue para el reconocimiento de unaimagen

Primero el dispositivo captura una escena mediente la caacutemara de viacutedeo

La SDK de Vuforia coge una imagen de las que componen el video yconvierte esa imagen a una resolucioacuten que el Tracker pueda manejar

Mediante el Tracker Vuforia analiza la imagen y busca similitudes en losTargets de la base de datos

Por uacuteltimo la aplicacioacuten puede renderizar el objeto 3D en la pantalla deldispositivo moacutevil y de esta manera crear realidad aumentada

24

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 3: Desarrollo de un juego de tablero con Realidad Aumentada

Resumen

La realidad aumentada (RA) estaacute introducieacutendose poco a poco en el diacuteaa diacutea De hecho nos la podemos encontrar cada vez maacutes habitualmenteen entornos luacutedicos (juegos aplicacioneshellip) asi como en entornos deinvestigacioacuten

En este trabajo nos vamos a centrar en el entorno luacutedico de estatecnologia ya que su espectacularidad y funcionalidad tienen lacapacidad de atraer a un buen nuacutemero de personas

Vamos a crear un juego en el que podemos seleccionar nuestropersonaje ofreciendo a la caacutemara diversos targets para luego poderusarlo en un mapa con casillas La funcionalidad baacutesica de estaaplicacioacuten es tirar un dado para avanzar casillas y ser el que primerollegue a la meta El objetivo principal es crear un juego luacutedico destinado ausuarios de un gran rango de edades El juego tiene la funcioacuten deentretener e incluso se podriacutean hacer unas modificaciones para quefuese un juego para el aprendizage Para esto se ha introducido la RA enel juego de casillas Primero en la seleccioacuten de personaje dondepodremos visualizarlo en nuestro dispositivo a traveacutes de la caacutemara Porotra parte el tableto va a ser mostrado tambieacuten por la caacutemara y loveremos introducido en nuestro entorno

Palabras clave Unity Vuforia Realidad Aumentada Juego 3D

3

Resum

La realitat augmentada (RA) estagrave introduintse poc a poc en el diacutea a diacuteaDe fet ens la podem encontrar cada volta meacutes habitualment en entornsluacutedics (jocs aplicacionshellip) asiacute com en entorns dinvestigacioacute

En aquest treball ens centrarem en lentorn luacutedic daquesta tecnologia jaque la seua espectacularitat y funcionalitat tenen la capacitat datraure unbon nombre de persones

Anem a crear un joc en el que podem seleccionar el nostre personatgeoferint a la cagravemera diversos targets per despreacutes poder utilitzar-lo en unmapa amb caselles La funcionalitat bagravesica daquesta aplicacioacute es llanccedilarun dau per avanccedilar caselles i ser el primer que arrive a la metaLobjectiu principal eacutes crear un joc luacutedic destinat a usuaris dun gran rengdedats El joc teacute la funcioacute dentretindre i incluacutes es podrien fer unesmodificacions perquegrave foacutera un joc per a laprendizage Per a accedilograve shaintroduiumlt la RA en el joc de caselles Primer en la seleccioacute de personatgeon podrem visualitzar-ho en el nostre dispositiu a traveacutes de la cambraDaltra banda el tableto seragrave mostrat tambeacute per la cambra i ho veuremintroduiumlt en el nostre entorn

Paraules clau Unity Vuforia Realitat Augmentada Joc 3D

4

Abstract

Augmented reality is at an early stage of development and has not yetbeen able to find a utility in which it can be above other technologiesNevertheless we can find it every day and more regularity in ludicenvironments( games applications) and research environments

In this paper we will focus on the ludic environment of this technology astheir showmanship and functionality have the ability to attract a bignumber of people

We are going to create a game in which your character can be selectedoffering a target to the camera then you can use it un a map with boxesThe basic functionality of this application is throwing a dice to move boxesand be the first to reach the goal The main objective is to create aentretaining game for users of a wide range of ages The game has thefunction of entretaining and even we could do some modifications to turnit into a game of aprendizage For this RA has been introduced in thegame First on the character selection we can view it on our devicethrough the camera Moreover the board will be also sown by the cameraand we will see added to our environment

Keywords Unity Vuforia Augmented Reality Joc 3D

5

Iacutendice general

1 Introduccioacuten 10

11 Motivacioacuten 10

12 Objetivos 12

13 Estructura de la memoria 12

2 Estado del arte 14

21 Realidad aumentada 14

211 Definicioacuten 14

212 Teacutecnicas de visualizacioacuten 15

213 Historia 16

213 Actualidad 18

22 Propuesta 21

3 Herramientas 23

31 Unity 3D 23

32 Vuforia 24

4 Desarrollo 28

41 Descripcioacuten 28

42 Pasos 29

421 Instalacioacuten 29

422 Busqueda de aplicaciones similares 31

423 Primeras pruebas 32

424 Interfaces 33

425 Fase Inicial de Desarrollo 34

426 Fase Final de Desarrollo 35

5 Conclusiones 37

6 Trabajos Futuros 39

Bibliografiacutea 41

6

Iacutendice de figuras

Figura 11 Hololens por Microsoft 9

Figura 21 Continuo de Milgram 12

Figura 22 Imagen del sensorama por Morton Heilig 13

Figura 23 Head Mounted Display por Ivan Sutherland 14

Figura 24 Dispositivo para configuracioacuten de cables 15

Figura 25 Cubo interactivo 16

Figura 26 Minecraft sobre Hololens 17

Figura 27 Pokemon GO 18

Figura 28 Uso de la RA con fines terapeacuteuticos 19

Figura 31 Versiones de Unity 22

Figura 32 Diagrama de flujo de Vuforia 23

Figura 41 Descarga de Unity 28

Figura 42 Aplicaciones similares de RA 29

Figura 43 Target simple 30

Figura 44 Muacuteltiples Targets 31

Figura 45 Pantalla principal 31

Figura 46 Diagrama de flujo 32

Figura 47 Tablero inicial 33

Figura 48 Seleccioacuten de personaje 34

Figura 49 Tirada del Juego 35

Figura 410 Tienda del juego 35

7

Capiacutetulo 1

Introduccioacuten

11 Motivacioacuten

El auge de las aplicaciones moacuteviles junto con la expansioacuten constante delos mismos en los uacuteltimos antildeos nos han llevado a convivir con latecnologiacutea diacutea a diacutea Constantemente manejamos cualquier tipo deaplicacioacuten ya sea para ver el tiempo que haraacute en la ciudad en la queestamos para leer las noticias como para contactar con nuestros amigos

Es mucho el tiempo que pasamos a lo largo del diacutea delante de nuestrodispositivo moacutevil Es por esto que el desarrollo de aplicaciones es unmercado con un gran puacuteblico y donde es muy faacutecil y accesible entrar

Es por eso que el desarrollo de un juego basado en Android puede seruna manera de introducirnos en el mundo de las aplicaciones moacutevilesUna parte de este mercado se basa en la realidad aumentada

8

La idea de realidad aumentada en concreto se refiere a la inclusioacuten entiempo real de elementos virtuales dentro del universo fiacutesico Utilizandounas gafas u otros dispositivos especiales una persona puede observarel mundo real con ciertos elementos agregados que aparecen en suslentes o pantalla a modo de informacioacuten digital En la Figura 11 semuestra coacutemo se ve el planeta tierra mediante el dispositivo Hololens deMicrosoft tambieacuten nos permite interactuar con eacutel

Eacutesta puede ser una tecnologiacutea muy interesante ya que nos muestracualquier tipo de imagen o cuerpo virtual a traveacutes de la caacutemara denuestro dispositivo moacutevil esto tiene gran capacidad de atraccioacuten paracualquier tipo de usuario por ser una tecnologiacutea relativamente nueva

12 Objetivos

El objetivo principal de este trabajo es desarrollar una aplicacioacuten paradispositivos Android (pese a que luego se puede trasladar a iOS) basadaen un sistema de turnos En el turno se deberaacute hacer una tirada con un

9

Figura 11 Hololens por Microsoft

dado y se iraacute avanzando por las casillas el nuacutemero sacado en la tirada Eljugador que primero llegue a la uacuteltima casilla seraacute el ganador

Los objetivos seraacuten los siguientes

Podremos seleccionar nuestro personaje desde una pantalladonde mostraremos los distintos targets a la caacutemara

Este personaje seraacute introducido en un mapa con casillas dondepodremos jugar con eacutel

La aplicacioacuten tendraacute una seccioacuten de opciones donde cambiardistintas configuraciones como el sonido o el idioma

12 Estructura de la memoria

Eacutesta memoria se divide en un total de siete capiacutetulos Cada uno centradoen la explicacioacuten de un punto distinto A continuacioacuten explicaremos elcuerpo de cada capiacutetulo

El primer capiacutetulo introduce el motivo de este trabajo asiacute como las ideasbaacutesicas de las cuales sale la idea Otro punto explicaraacute los objetivos delmismo y por uacuteltimo esta pequentildea estructura

10

Capiacutetulo 2

Estado del arte

21 Realidad aumentada

211 Definicioacuten

La realidad aumentada (RA) es el teacutermino que se usa para definir unavisioacuten a traveacutes de un dispositivo tecnoloacutegico directa o indirecta de unentorno fiacutesico del mundo real cuyos elementos se combinan conelementos virtuales para la creacioacuten de una realidad mixta en tiemporeal Consiste en un conjunto de dispositivos que antildeaden informacioacutenvirtual a la informacioacuten fiacutesica ya existente

Eacutesta es la principal diferencia con la realidad virtual puesto que nosustituye la realidad fiacutesica sino que superpone los datos informaacuteticos almundo real Como podemos observar en la Figura 21 la realidad

11

aumentada se encuentra entre el entorno virtual y el real En ella semuestra el continuo de Realidad-Virtual de Milgram (1994)[1]

Figura 21 Continuo de Milgram

212 Teacutecnicas de visualizacioacuten

Existen tres teacutecnicas distintas de visualizacion de RA

Display en la cabeza Con sus siglas en ingleacutes HMD (HeadMounted Display) consta de un dispositivo que actua como unasgafas o un visor que nos colocamos en la cabeza y desde el quepodemos ver los objetos virtuales sobre la visioacuten del mundo real

Display de mano Consta de una pantalla pequentildea baacutesicamenteun smartphone o una tablet donde a traveacutes de la caacutemara eldispositivo informaacutetico superpone los objetos virtuales sobre lasimaacutegenes capturadas

Display espacial La realidad aumentada espacial usa un proyectorpara mostrarnos las imaacutegenes virtuales encima de los objetosreales La principal ventaja de esta teacutecnica es poder utilizarla engrupos en lugar de un usuario exclusivamente

Por uacuteltimo comentar que en este trabajo vamos a centrarnos en lateacutecnica del display de mano usando nuestro dispositivo moacutevil paramostrar la RA

12

213 Historia

Debemos entender que Realidad Virtual y Realidad Aumentada han idopraacutecticamente de la mano

En 1950 Morton Heilig escribioacute sobre un ldquoCine de Experienciardquo quepudiera acompantildear a todos los sentidos de una manera efectivaintegrando al espectador con la actividad en la pantalla Construyoacute unprototipo llamado el Sensorama en 1962 junto con 5 filmes cortos quepermitiacutean aumentar la experiencia del espectador a traveacutes de sussentidos (vista olfato tacto y oiacutedo) Podemos ver una foto delSensorama en la Figura 22

Figura 22 Imagen del sensorama por Morton Heilig

En 1968 Ivan Sutherland con la ayuda de su estudiante Bob Sproullconstruyeron lo que seriacutea ampliamente considerado el primer HeadMounted Display (HMD) para Realidad Virtual y Realidad AumentadaComo podemos ver en la Figura 23 era muy primitivo en teacuterminos deInterfaz de usuario y realismo y el HMD usado por el usuario era tangrande y pesado que debiacutea colgarse del techo y los graacuteficos que haciacuteanal ambiente virtual eran simples ldquomodelos alaacutembricordquo A finales de los 80

13

se popularizoacute el teacutermino Realidad Virtual por Jaron Lanier cuyacompantildeiacutea creoacute los primeros guantes y gafas de Realidad Virtual

Figura 23 Head MountedDisplay por Ivan Sutherland

El teacutermino Realidad Aumentada fue introducido por el investigador TomCaudell en Boeing en 1992 Caudell fue contratado para encontrar unaalternativa a los tediosos tableros de configuracioacuten de cables que utilizanlos trabajadores Salioacute con la idea de gafas especiales y tablerosvirtuales sobre tableros reales geneacutericos es asiacute que se le ocurrioacute queestaba ldquoaumentandordquo la realidad del usuario El teacutermino RealidadAumentada fue dado al puacuteblico en un artiacuteculo en 1992

14

Figura 24 Dispositivo para configuracioacuten de cables

213 Actualidad

En la actualidad la realidad aumentada cada vez se estaacute ganando un sitioen el diacutea a diacutea de las personas El gran avance de las tecnologiacuteas hahecho posible lo que anteriormente solo se podiacutea imaginar SeguacutenTechNavio (wwwtechnaviocom) una empresa de articulos deinvestigacioacuten la realidad aumentada tiene un prometedor futuroAugurando para eacuteste un crecimiento del 132 entre 2014 y 2018

En los uacuteltimos antildeos se han desarrollado muacuteltiples tecnologiacuteas que hansido uacutetiles para el desarrollo de la realidad aumentada Algunos ejemplosson ARToolKit ATOMIC Authoring Tool o Vuforia Este uacuteltimo es elsoftware que usaremos para el desarrollo de nuestra aplicacioacuten

El avance que maacutes ha contribuido a la realidad aumentada es la granexpansioacuten de los dispositivos moacuteviles Con una gran capacidad decoacutemputo una caacutemara y una gran pantalla donde interactuar con lasimaacutegenes que nos proyecta la aplicacioacuten Se convierten en el dispositivoclave donde esta tecnologiacutea puede hacer su gran aparicioacuten

15

Visto que la realidad aumentada teniacutea un gran futuro las empresas estaacutenempezando a interesarse por esta tecnologiacutea por sus interminablesaplicaciones aplicaacutendola asiacute en distintos sectores

Educacioacuten

Podemos incluir en los libros las imaacutegenes necesarias para permitirnosvisualizar objetos en 3D desde un dispositivo moacutevil para asiacute permitirexplorar desde el cuerpo humano hasta los inventos maacutes importantes dela historia Vemos en la Figura 25 un cubo con un target donde podervisualizar el elemento 3D[2] Tambieacuten nos permite escanear obras de artemonumentos o edificios para mostrarnos una pequentildea descripcioacuten ohistoria

Entretenimiento

En el sector del entretenimiento tiene una gran trayectoria ya que en losuacutetlimos antildeos han salido a la luz distintas aplicaciones o dispositivos Losmaacutes significativos los vamos a mencionar a continuacioacuten

Hololens Un dispositivo de la empresa Microsoft que consiste enunas gafas inalaacutembricas que nos proyectan delante de nosotros lasimaacutegenes en 3D y nos permite interactuar con ellas

16

Figura 25 Cubo interactivo

Figura 26 Minecraft sobre Hololens

Cascos de realidad virtual En este apartado tenemos actualmentetres empresas compitiendo por el mercado de la realidad virtualPor una parte tenemos el Oculus Rift de la empresa Oculus VRTambieacuten tenemos el HTC Vive de la empresa HC y por uacuteltimoPlayStation VR de Sony Esto nos muestra el gran mercado quetiene la realidad virtual Estos cascos se basan en poner unapantalla muy cercana a los ojos del usuario y eliminarle todo elcampo de visioacuten De esta manera la inmersioacuten en lo que se estaacuteviendo es mayor

Invizimals Videojuego desarrollado por Novarama para la consolaPSP Se puede decir que ha sido el juego de realidad aumentadaque maacutes se ha expandido en el momento en que salioacute El juegoincluye unas tarjetas donde enfocando la caacutemara podremos vernuestras mascotas Invizimals y podemos interactuar con ellas

PokemonGo Es un juego de realidad aumentada de la empresaNiantic que ha revolucionado el mundo de los juegos de losdispositivos moacuteviles haciendo que miles de personas salgan a lacalle a capturar pokemon mediante su smartphone No hace ni tresmeses que ha salido y cuenta con cuatro millones de descargassolo en PlayStore

17

Figura 27 Pokemon GO

Gafas de RA Un ejemplo de estas son las Google Glass de laempresa Google Son unas gafas de realidad aumentadadestinadas a mostrarnos la informacioacuten de nuestro teleacutefono moacutevilsin necesidad de utilizar las manos tambieacuten podremos navegarpor internet por medio de oacuterdenes de voz

Psicologiacutea

El tema de la superacioacuten de traumas puede ser a veces un temadelicado un proceso largo y costoso Pero la realidad aumentada unavez maacutes son sorprende con sus aplicaciones esta vez en el campo de lapsicologiacutea Al permitir mostrar cuerpos digitales en un entorno realpodemos por ejemplo visualizar un miedo por ejemplo a las cucarachaso arantildeas en un entorno real y asiacute controlar como el paciente seacostumbra a su presencia controlando el nuacutemero y el comportamientode eacutestas Como ejemplo se hizo un estudio en la Universidad Politecnicade Valencia en el que se sometiacutea a diversas personas a la visualizacioacutende sus fobias en un entorno controlado [3]

18

Figura 28 Uso de la RA con fines terapeacuteuticos

Otro ejemplo de fobia que podemos superar mediante la realidadaumentada es la fobia a las alturas Mediante RA podemos hacer que unpaciente tenga la sensacioacuten de estar en un sitio alto o con caiacuteda sinninguacuten tipo de peligro[4]

Sector Industrial

Otro sector en el que la realidad aumentada ha logrado hacerse ver esen el sector industrial Un ejemplo son las gafas Moverio Pro BT-2000 dela empresa Epson donde los usuarios pueden ver lo que estaacuten viendootros trabajadores para asi mejorar la comunicacioacuten y permitir apoyar laformacioacuten de nuevos trabajadores

22 PropuestaLa finalidad de este trabajo es realizar un juego de realidad aumentadadonde por medio de unas imaacutegenes reales podremos seleccionar elpersonaje que queremos jugar Para luego introducirlo en un mapa concasillas en el que tiraremos un dado y avanzaremos casillas con nuestropersonaje Nos enfrentaremos a otro personaje controlado por la IA Elprimero que llegue a la uacuteltima casilla seraacute el vencedor

19

20

Capiacutetulo 3

Herramientas

31 Unity 3D

Unity 3D es una herramienta para el desarrollo de videojuegosmultiplataforma de la empresa Unity Technologies Existen otrasplataformas de desarrollo de videojuegos como UDK de Epic Games oCryEngine de CRYtek pero lo que adelanta Unity a las demaacutes es quepuede ser usado tanto para Windows como para Mac Unity viene convarias versiones desde la versioacuten gratuita hasta la versioacuten PRO por 125$al mes Esta uacuteltima nos ofrece unos servicios exclusivos como soportepremium kits de assets o tutoriales Tambieacuten nos ofrece una versioacuten paraempresas que nos permite obtener una configuracioacuten personalizada

21

Figura 31 Versiones de Unity

El motor Unity nos permite desarrollar no solo videojuegos Tambieacuten nospermite desarrollar todo tipo de aplicaciones graacuteficas Tambieacuten se haincluido la opcioacuten de desarrollar aplicaciones moacuteviles para Android o iOSy todas las plataformas maacutes importantes de videojuegos actuales comoMicrosoft Nintendo o Sony

Otra de las ventajas de utilizar Unity es la Unity Store donde encontrarrecursos de todo tipo Muchos de ellos gratuitos Esto hace que podamosrealizar un videojuego sin necesidad de saber modelado 3D

32 Vuforia

De la empresa Qualcomm Vuforia es una de las plataformas de realidadaumentada que maacutes ha credico en el uacuteltimo antildeo Tiene maacutes de 30000desarrolladores en todo el mundo y grandes empresas como Audi Nike o Sonyentre otras ya la han usado

Vuforia es un SDK que permite visualizar imaacutegenes en 3D mediante la caacutemarade nuestro dispositivo De esta manera se mezclan objetos del mundo real ydel virtual Vuforia tambieacuten permite el reconocimiento de texto reconocimientode muacuteltiples targets al mismo tiempo y la deteccioacuten raacutepida de targets entreotras funcionalidades

22

Su arquitectura consta de cuatro elementos baacutesicos que procederemos adescribir a continuacioacuten

Caacutemara Capta la imagen para que posteriormente eacutesta sea procesadapor el Tracker

Base de Datos Almacena una serie de Targets para ser reconocidos porel Tracker Se crea con el Target Manager y puede ser local o en lanube

Target Se utilizan para permitir al Tracker el reconocimiento del mundoreal pueden ser de diferentes tipos como Image Targets o Word Targetentre otros

Tracker Analiza la imagen de la caacutemara y asiacute detecta los objetos delmundo real para buscar coincidencias en su base de datos

23

Figura 32 Diagrama de flujo de Vuforia

Una vez explicados los elementos de la arquitectura de Vuforia vamos aexplicar brevemente los pasos que sigue para el reconocimiento de unaimagen

Primero el dispositivo captura una escena mediente la caacutemara de viacutedeo

La SDK de Vuforia coge una imagen de las que componen el video yconvierte esa imagen a una resolucioacuten que el Tracker pueda manejar

Mediante el Tracker Vuforia analiza la imagen y busca similitudes en losTargets de la base de datos

Por uacuteltimo la aplicacioacuten puede renderizar el objeto 3D en la pantalla deldispositivo moacutevil y de esta manera crear realidad aumentada

24

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 4: Desarrollo de un juego de tablero con Realidad Aumentada

Resum

La realitat augmentada (RA) estagrave introduintse poc a poc en el diacutea a diacuteaDe fet ens la podem encontrar cada volta meacutes habitualment en entornsluacutedics (jocs aplicacionshellip) asiacute com en entorns dinvestigacioacute

En aquest treball ens centrarem en lentorn luacutedic daquesta tecnologia jaque la seua espectacularitat y funcionalitat tenen la capacitat datraure unbon nombre de persones

Anem a crear un joc en el que podem seleccionar el nostre personatgeoferint a la cagravemera diversos targets per despreacutes poder utilitzar-lo en unmapa amb caselles La funcionalitat bagravesica daquesta aplicacioacute es llanccedilarun dau per avanccedilar caselles i ser el primer que arrive a la metaLobjectiu principal eacutes crear un joc luacutedic destinat a usuaris dun gran rengdedats El joc teacute la funcioacute dentretindre i incluacutes es podrien fer unesmodificacions perquegrave foacutera un joc per a laprendizage Per a accedilograve shaintroduiumlt la RA en el joc de caselles Primer en la seleccioacute de personatgeon podrem visualitzar-ho en el nostre dispositiu a traveacutes de la cambraDaltra banda el tableto seragrave mostrat tambeacute per la cambra i ho veuremintroduiumlt en el nostre entorn

Paraules clau Unity Vuforia Realitat Augmentada Joc 3D

4

Abstract

Augmented reality is at an early stage of development and has not yetbeen able to find a utility in which it can be above other technologiesNevertheless we can find it every day and more regularity in ludicenvironments( games applications) and research environments

In this paper we will focus on the ludic environment of this technology astheir showmanship and functionality have the ability to attract a bignumber of people

We are going to create a game in which your character can be selectedoffering a target to the camera then you can use it un a map with boxesThe basic functionality of this application is throwing a dice to move boxesand be the first to reach the goal The main objective is to create aentretaining game for users of a wide range of ages The game has thefunction of entretaining and even we could do some modifications to turnit into a game of aprendizage For this RA has been introduced in thegame First on the character selection we can view it on our devicethrough the camera Moreover the board will be also sown by the cameraand we will see added to our environment

Keywords Unity Vuforia Augmented Reality Joc 3D

5

Iacutendice general

1 Introduccioacuten 10

11 Motivacioacuten 10

12 Objetivos 12

13 Estructura de la memoria 12

2 Estado del arte 14

21 Realidad aumentada 14

211 Definicioacuten 14

212 Teacutecnicas de visualizacioacuten 15

213 Historia 16

213 Actualidad 18

22 Propuesta 21

3 Herramientas 23

31 Unity 3D 23

32 Vuforia 24

4 Desarrollo 28

41 Descripcioacuten 28

42 Pasos 29

421 Instalacioacuten 29

422 Busqueda de aplicaciones similares 31

423 Primeras pruebas 32

424 Interfaces 33

425 Fase Inicial de Desarrollo 34

426 Fase Final de Desarrollo 35

5 Conclusiones 37

6 Trabajos Futuros 39

Bibliografiacutea 41

6

Iacutendice de figuras

Figura 11 Hololens por Microsoft 9

Figura 21 Continuo de Milgram 12

Figura 22 Imagen del sensorama por Morton Heilig 13

Figura 23 Head Mounted Display por Ivan Sutherland 14

Figura 24 Dispositivo para configuracioacuten de cables 15

Figura 25 Cubo interactivo 16

Figura 26 Minecraft sobre Hololens 17

Figura 27 Pokemon GO 18

Figura 28 Uso de la RA con fines terapeacuteuticos 19

Figura 31 Versiones de Unity 22

Figura 32 Diagrama de flujo de Vuforia 23

Figura 41 Descarga de Unity 28

Figura 42 Aplicaciones similares de RA 29

Figura 43 Target simple 30

Figura 44 Muacuteltiples Targets 31

Figura 45 Pantalla principal 31

Figura 46 Diagrama de flujo 32

Figura 47 Tablero inicial 33

Figura 48 Seleccioacuten de personaje 34

Figura 49 Tirada del Juego 35

Figura 410 Tienda del juego 35

7

Capiacutetulo 1

Introduccioacuten

11 Motivacioacuten

El auge de las aplicaciones moacuteviles junto con la expansioacuten constante delos mismos en los uacuteltimos antildeos nos han llevado a convivir con latecnologiacutea diacutea a diacutea Constantemente manejamos cualquier tipo deaplicacioacuten ya sea para ver el tiempo que haraacute en la ciudad en la queestamos para leer las noticias como para contactar con nuestros amigos

Es mucho el tiempo que pasamos a lo largo del diacutea delante de nuestrodispositivo moacutevil Es por esto que el desarrollo de aplicaciones es unmercado con un gran puacuteblico y donde es muy faacutecil y accesible entrar

Es por eso que el desarrollo de un juego basado en Android puede seruna manera de introducirnos en el mundo de las aplicaciones moacutevilesUna parte de este mercado se basa en la realidad aumentada

8

La idea de realidad aumentada en concreto se refiere a la inclusioacuten entiempo real de elementos virtuales dentro del universo fiacutesico Utilizandounas gafas u otros dispositivos especiales una persona puede observarel mundo real con ciertos elementos agregados que aparecen en suslentes o pantalla a modo de informacioacuten digital En la Figura 11 semuestra coacutemo se ve el planeta tierra mediante el dispositivo Hololens deMicrosoft tambieacuten nos permite interactuar con eacutel

Eacutesta puede ser una tecnologiacutea muy interesante ya que nos muestracualquier tipo de imagen o cuerpo virtual a traveacutes de la caacutemara denuestro dispositivo moacutevil esto tiene gran capacidad de atraccioacuten paracualquier tipo de usuario por ser una tecnologiacutea relativamente nueva

12 Objetivos

El objetivo principal de este trabajo es desarrollar una aplicacioacuten paradispositivos Android (pese a que luego se puede trasladar a iOS) basadaen un sistema de turnos En el turno se deberaacute hacer una tirada con un

9

Figura 11 Hololens por Microsoft

dado y se iraacute avanzando por las casillas el nuacutemero sacado en la tirada Eljugador que primero llegue a la uacuteltima casilla seraacute el ganador

Los objetivos seraacuten los siguientes

Podremos seleccionar nuestro personaje desde una pantalladonde mostraremos los distintos targets a la caacutemara

Este personaje seraacute introducido en un mapa con casillas dondepodremos jugar con eacutel

La aplicacioacuten tendraacute una seccioacuten de opciones donde cambiardistintas configuraciones como el sonido o el idioma

12 Estructura de la memoria

Eacutesta memoria se divide en un total de siete capiacutetulos Cada uno centradoen la explicacioacuten de un punto distinto A continuacioacuten explicaremos elcuerpo de cada capiacutetulo

El primer capiacutetulo introduce el motivo de este trabajo asiacute como las ideasbaacutesicas de las cuales sale la idea Otro punto explicaraacute los objetivos delmismo y por uacuteltimo esta pequentildea estructura

10

Capiacutetulo 2

Estado del arte

21 Realidad aumentada

211 Definicioacuten

La realidad aumentada (RA) es el teacutermino que se usa para definir unavisioacuten a traveacutes de un dispositivo tecnoloacutegico directa o indirecta de unentorno fiacutesico del mundo real cuyos elementos se combinan conelementos virtuales para la creacioacuten de una realidad mixta en tiemporeal Consiste en un conjunto de dispositivos que antildeaden informacioacutenvirtual a la informacioacuten fiacutesica ya existente

Eacutesta es la principal diferencia con la realidad virtual puesto que nosustituye la realidad fiacutesica sino que superpone los datos informaacuteticos almundo real Como podemos observar en la Figura 21 la realidad

11

aumentada se encuentra entre el entorno virtual y el real En ella semuestra el continuo de Realidad-Virtual de Milgram (1994)[1]

Figura 21 Continuo de Milgram

212 Teacutecnicas de visualizacioacuten

Existen tres teacutecnicas distintas de visualizacion de RA

Display en la cabeza Con sus siglas en ingleacutes HMD (HeadMounted Display) consta de un dispositivo que actua como unasgafas o un visor que nos colocamos en la cabeza y desde el quepodemos ver los objetos virtuales sobre la visioacuten del mundo real

Display de mano Consta de una pantalla pequentildea baacutesicamenteun smartphone o una tablet donde a traveacutes de la caacutemara eldispositivo informaacutetico superpone los objetos virtuales sobre lasimaacutegenes capturadas

Display espacial La realidad aumentada espacial usa un proyectorpara mostrarnos las imaacutegenes virtuales encima de los objetosreales La principal ventaja de esta teacutecnica es poder utilizarla engrupos en lugar de un usuario exclusivamente

Por uacuteltimo comentar que en este trabajo vamos a centrarnos en lateacutecnica del display de mano usando nuestro dispositivo moacutevil paramostrar la RA

12

213 Historia

Debemos entender que Realidad Virtual y Realidad Aumentada han idopraacutecticamente de la mano

En 1950 Morton Heilig escribioacute sobre un ldquoCine de Experienciardquo quepudiera acompantildear a todos los sentidos de una manera efectivaintegrando al espectador con la actividad en la pantalla Construyoacute unprototipo llamado el Sensorama en 1962 junto con 5 filmes cortos quepermitiacutean aumentar la experiencia del espectador a traveacutes de sussentidos (vista olfato tacto y oiacutedo) Podemos ver una foto delSensorama en la Figura 22

Figura 22 Imagen del sensorama por Morton Heilig

En 1968 Ivan Sutherland con la ayuda de su estudiante Bob Sproullconstruyeron lo que seriacutea ampliamente considerado el primer HeadMounted Display (HMD) para Realidad Virtual y Realidad AumentadaComo podemos ver en la Figura 23 era muy primitivo en teacuterminos deInterfaz de usuario y realismo y el HMD usado por el usuario era tangrande y pesado que debiacutea colgarse del techo y los graacuteficos que haciacuteanal ambiente virtual eran simples ldquomodelos alaacutembricordquo A finales de los 80

13

se popularizoacute el teacutermino Realidad Virtual por Jaron Lanier cuyacompantildeiacutea creoacute los primeros guantes y gafas de Realidad Virtual

Figura 23 Head MountedDisplay por Ivan Sutherland

El teacutermino Realidad Aumentada fue introducido por el investigador TomCaudell en Boeing en 1992 Caudell fue contratado para encontrar unaalternativa a los tediosos tableros de configuracioacuten de cables que utilizanlos trabajadores Salioacute con la idea de gafas especiales y tablerosvirtuales sobre tableros reales geneacutericos es asiacute que se le ocurrioacute queestaba ldquoaumentandordquo la realidad del usuario El teacutermino RealidadAumentada fue dado al puacuteblico en un artiacuteculo en 1992

14

Figura 24 Dispositivo para configuracioacuten de cables

213 Actualidad

En la actualidad la realidad aumentada cada vez se estaacute ganando un sitioen el diacutea a diacutea de las personas El gran avance de las tecnologiacuteas hahecho posible lo que anteriormente solo se podiacutea imaginar SeguacutenTechNavio (wwwtechnaviocom) una empresa de articulos deinvestigacioacuten la realidad aumentada tiene un prometedor futuroAugurando para eacuteste un crecimiento del 132 entre 2014 y 2018

En los uacuteltimos antildeos se han desarrollado muacuteltiples tecnologiacuteas que hansido uacutetiles para el desarrollo de la realidad aumentada Algunos ejemplosson ARToolKit ATOMIC Authoring Tool o Vuforia Este uacuteltimo es elsoftware que usaremos para el desarrollo de nuestra aplicacioacuten

El avance que maacutes ha contribuido a la realidad aumentada es la granexpansioacuten de los dispositivos moacuteviles Con una gran capacidad decoacutemputo una caacutemara y una gran pantalla donde interactuar con lasimaacutegenes que nos proyecta la aplicacioacuten Se convierten en el dispositivoclave donde esta tecnologiacutea puede hacer su gran aparicioacuten

15

Visto que la realidad aumentada teniacutea un gran futuro las empresas estaacutenempezando a interesarse por esta tecnologiacutea por sus interminablesaplicaciones aplicaacutendola asiacute en distintos sectores

Educacioacuten

Podemos incluir en los libros las imaacutegenes necesarias para permitirnosvisualizar objetos en 3D desde un dispositivo moacutevil para asiacute permitirexplorar desde el cuerpo humano hasta los inventos maacutes importantes dela historia Vemos en la Figura 25 un cubo con un target donde podervisualizar el elemento 3D[2] Tambieacuten nos permite escanear obras de artemonumentos o edificios para mostrarnos una pequentildea descripcioacuten ohistoria

Entretenimiento

En el sector del entretenimiento tiene una gran trayectoria ya que en losuacutetlimos antildeos han salido a la luz distintas aplicaciones o dispositivos Losmaacutes significativos los vamos a mencionar a continuacioacuten

Hololens Un dispositivo de la empresa Microsoft que consiste enunas gafas inalaacutembricas que nos proyectan delante de nosotros lasimaacutegenes en 3D y nos permite interactuar con ellas

16

Figura 25 Cubo interactivo

Figura 26 Minecraft sobre Hololens

Cascos de realidad virtual En este apartado tenemos actualmentetres empresas compitiendo por el mercado de la realidad virtualPor una parte tenemos el Oculus Rift de la empresa Oculus VRTambieacuten tenemos el HTC Vive de la empresa HC y por uacuteltimoPlayStation VR de Sony Esto nos muestra el gran mercado quetiene la realidad virtual Estos cascos se basan en poner unapantalla muy cercana a los ojos del usuario y eliminarle todo elcampo de visioacuten De esta manera la inmersioacuten en lo que se estaacuteviendo es mayor

Invizimals Videojuego desarrollado por Novarama para la consolaPSP Se puede decir que ha sido el juego de realidad aumentadaque maacutes se ha expandido en el momento en que salioacute El juegoincluye unas tarjetas donde enfocando la caacutemara podremos vernuestras mascotas Invizimals y podemos interactuar con ellas

PokemonGo Es un juego de realidad aumentada de la empresaNiantic que ha revolucionado el mundo de los juegos de losdispositivos moacuteviles haciendo que miles de personas salgan a lacalle a capturar pokemon mediante su smartphone No hace ni tresmeses que ha salido y cuenta con cuatro millones de descargassolo en PlayStore

17

Figura 27 Pokemon GO

Gafas de RA Un ejemplo de estas son las Google Glass de laempresa Google Son unas gafas de realidad aumentadadestinadas a mostrarnos la informacioacuten de nuestro teleacutefono moacutevilsin necesidad de utilizar las manos tambieacuten podremos navegarpor internet por medio de oacuterdenes de voz

Psicologiacutea

El tema de la superacioacuten de traumas puede ser a veces un temadelicado un proceso largo y costoso Pero la realidad aumentada unavez maacutes son sorprende con sus aplicaciones esta vez en el campo de lapsicologiacutea Al permitir mostrar cuerpos digitales en un entorno realpodemos por ejemplo visualizar un miedo por ejemplo a las cucarachaso arantildeas en un entorno real y asiacute controlar como el paciente seacostumbra a su presencia controlando el nuacutemero y el comportamientode eacutestas Como ejemplo se hizo un estudio en la Universidad Politecnicade Valencia en el que se sometiacutea a diversas personas a la visualizacioacutende sus fobias en un entorno controlado [3]

18

Figura 28 Uso de la RA con fines terapeacuteuticos

Otro ejemplo de fobia que podemos superar mediante la realidadaumentada es la fobia a las alturas Mediante RA podemos hacer que unpaciente tenga la sensacioacuten de estar en un sitio alto o con caiacuteda sinninguacuten tipo de peligro[4]

Sector Industrial

Otro sector en el que la realidad aumentada ha logrado hacerse ver esen el sector industrial Un ejemplo son las gafas Moverio Pro BT-2000 dela empresa Epson donde los usuarios pueden ver lo que estaacuten viendootros trabajadores para asi mejorar la comunicacioacuten y permitir apoyar laformacioacuten de nuevos trabajadores

22 PropuestaLa finalidad de este trabajo es realizar un juego de realidad aumentadadonde por medio de unas imaacutegenes reales podremos seleccionar elpersonaje que queremos jugar Para luego introducirlo en un mapa concasillas en el que tiraremos un dado y avanzaremos casillas con nuestropersonaje Nos enfrentaremos a otro personaje controlado por la IA Elprimero que llegue a la uacuteltima casilla seraacute el vencedor

19

20

Capiacutetulo 3

Herramientas

31 Unity 3D

Unity 3D es una herramienta para el desarrollo de videojuegosmultiplataforma de la empresa Unity Technologies Existen otrasplataformas de desarrollo de videojuegos como UDK de Epic Games oCryEngine de CRYtek pero lo que adelanta Unity a las demaacutes es quepuede ser usado tanto para Windows como para Mac Unity viene convarias versiones desde la versioacuten gratuita hasta la versioacuten PRO por 125$al mes Esta uacuteltima nos ofrece unos servicios exclusivos como soportepremium kits de assets o tutoriales Tambieacuten nos ofrece una versioacuten paraempresas que nos permite obtener una configuracioacuten personalizada

21

Figura 31 Versiones de Unity

El motor Unity nos permite desarrollar no solo videojuegos Tambieacuten nospermite desarrollar todo tipo de aplicaciones graacuteficas Tambieacuten se haincluido la opcioacuten de desarrollar aplicaciones moacuteviles para Android o iOSy todas las plataformas maacutes importantes de videojuegos actuales comoMicrosoft Nintendo o Sony

Otra de las ventajas de utilizar Unity es la Unity Store donde encontrarrecursos de todo tipo Muchos de ellos gratuitos Esto hace que podamosrealizar un videojuego sin necesidad de saber modelado 3D

32 Vuforia

De la empresa Qualcomm Vuforia es una de las plataformas de realidadaumentada que maacutes ha credico en el uacuteltimo antildeo Tiene maacutes de 30000desarrolladores en todo el mundo y grandes empresas como Audi Nike o Sonyentre otras ya la han usado

Vuforia es un SDK que permite visualizar imaacutegenes en 3D mediante la caacutemarade nuestro dispositivo De esta manera se mezclan objetos del mundo real ydel virtual Vuforia tambieacuten permite el reconocimiento de texto reconocimientode muacuteltiples targets al mismo tiempo y la deteccioacuten raacutepida de targets entreotras funcionalidades

22

Su arquitectura consta de cuatro elementos baacutesicos que procederemos adescribir a continuacioacuten

Caacutemara Capta la imagen para que posteriormente eacutesta sea procesadapor el Tracker

Base de Datos Almacena una serie de Targets para ser reconocidos porel Tracker Se crea con el Target Manager y puede ser local o en lanube

Target Se utilizan para permitir al Tracker el reconocimiento del mundoreal pueden ser de diferentes tipos como Image Targets o Word Targetentre otros

Tracker Analiza la imagen de la caacutemara y asiacute detecta los objetos delmundo real para buscar coincidencias en su base de datos

23

Figura 32 Diagrama de flujo de Vuforia

Una vez explicados los elementos de la arquitectura de Vuforia vamos aexplicar brevemente los pasos que sigue para el reconocimiento de unaimagen

Primero el dispositivo captura una escena mediente la caacutemara de viacutedeo

La SDK de Vuforia coge una imagen de las que componen el video yconvierte esa imagen a una resolucioacuten que el Tracker pueda manejar

Mediante el Tracker Vuforia analiza la imagen y busca similitudes en losTargets de la base de datos

Por uacuteltimo la aplicacioacuten puede renderizar el objeto 3D en la pantalla deldispositivo moacutevil y de esta manera crear realidad aumentada

24

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 5: Desarrollo de un juego de tablero con Realidad Aumentada

Abstract

Augmented reality is at an early stage of development and has not yetbeen able to find a utility in which it can be above other technologiesNevertheless we can find it every day and more regularity in ludicenvironments( games applications) and research environments

In this paper we will focus on the ludic environment of this technology astheir showmanship and functionality have the ability to attract a bignumber of people

We are going to create a game in which your character can be selectedoffering a target to the camera then you can use it un a map with boxesThe basic functionality of this application is throwing a dice to move boxesand be the first to reach the goal The main objective is to create aentretaining game for users of a wide range of ages The game has thefunction of entretaining and even we could do some modifications to turnit into a game of aprendizage For this RA has been introduced in thegame First on the character selection we can view it on our devicethrough the camera Moreover the board will be also sown by the cameraand we will see added to our environment

Keywords Unity Vuforia Augmented Reality Joc 3D

5

Iacutendice general

1 Introduccioacuten 10

11 Motivacioacuten 10

12 Objetivos 12

13 Estructura de la memoria 12

2 Estado del arte 14

21 Realidad aumentada 14

211 Definicioacuten 14

212 Teacutecnicas de visualizacioacuten 15

213 Historia 16

213 Actualidad 18

22 Propuesta 21

3 Herramientas 23

31 Unity 3D 23

32 Vuforia 24

4 Desarrollo 28

41 Descripcioacuten 28

42 Pasos 29

421 Instalacioacuten 29

422 Busqueda de aplicaciones similares 31

423 Primeras pruebas 32

424 Interfaces 33

425 Fase Inicial de Desarrollo 34

426 Fase Final de Desarrollo 35

5 Conclusiones 37

6 Trabajos Futuros 39

Bibliografiacutea 41

6

Iacutendice de figuras

Figura 11 Hololens por Microsoft 9

Figura 21 Continuo de Milgram 12

Figura 22 Imagen del sensorama por Morton Heilig 13

Figura 23 Head Mounted Display por Ivan Sutherland 14

Figura 24 Dispositivo para configuracioacuten de cables 15

Figura 25 Cubo interactivo 16

Figura 26 Minecraft sobre Hololens 17

Figura 27 Pokemon GO 18

Figura 28 Uso de la RA con fines terapeacuteuticos 19

Figura 31 Versiones de Unity 22

Figura 32 Diagrama de flujo de Vuforia 23

Figura 41 Descarga de Unity 28

Figura 42 Aplicaciones similares de RA 29

Figura 43 Target simple 30

Figura 44 Muacuteltiples Targets 31

Figura 45 Pantalla principal 31

Figura 46 Diagrama de flujo 32

Figura 47 Tablero inicial 33

Figura 48 Seleccioacuten de personaje 34

Figura 49 Tirada del Juego 35

Figura 410 Tienda del juego 35

7

Capiacutetulo 1

Introduccioacuten

11 Motivacioacuten

El auge de las aplicaciones moacuteviles junto con la expansioacuten constante delos mismos en los uacuteltimos antildeos nos han llevado a convivir con latecnologiacutea diacutea a diacutea Constantemente manejamos cualquier tipo deaplicacioacuten ya sea para ver el tiempo que haraacute en la ciudad en la queestamos para leer las noticias como para contactar con nuestros amigos

Es mucho el tiempo que pasamos a lo largo del diacutea delante de nuestrodispositivo moacutevil Es por esto que el desarrollo de aplicaciones es unmercado con un gran puacuteblico y donde es muy faacutecil y accesible entrar

Es por eso que el desarrollo de un juego basado en Android puede seruna manera de introducirnos en el mundo de las aplicaciones moacutevilesUna parte de este mercado se basa en la realidad aumentada

8

La idea de realidad aumentada en concreto se refiere a la inclusioacuten entiempo real de elementos virtuales dentro del universo fiacutesico Utilizandounas gafas u otros dispositivos especiales una persona puede observarel mundo real con ciertos elementos agregados que aparecen en suslentes o pantalla a modo de informacioacuten digital En la Figura 11 semuestra coacutemo se ve el planeta tierra mediante el dispositivo Hololens deMicrosoft tambieacuten nos permite interactuar con eacutel

Eacutesta puede ser una tecnologiacutea muy interesante ya que nos muestracualquier tipo de imagen o cuerpo virtual a traveacutes de la caacutemara denuestro dispositivo moacutevil esto tiene gran capacidad de atraccioacuten paracualquier tipo de usuario por ser una tecnologiacutea relativamente nueva

12 Objetivos

El objetivo principal de este trabajo es desarrollar una aplicacioacuten paradispositivos Android (pese a que luego se puede trasladar a iOS) basadaen un sistema de turnos En el turno se deberaacute hacer una tirada con un

9

Figura 11 Hololens por Microsoft

dado y se iraacute avanzando por las casillas el nuacutemero sacado en la tirada Eljugador que primero llegue a la uacuteltima casilla seraacute el ganador

Los objetivos seraacuten los siguientes

Podremos seleccionar nuestro personaje desde una pantalladonde mostraremos los distintos targets a la caacutemara

Este personaje seraacute introducido en un mapa con casillas dondepodremos jugar con eacutel

La aplicacioacuten tendraacute una seccioacuten de opciones donde cambiardistintas configuraciones como el sonido o el idioma

12 Estructura de la memoria

Eacutesta memoria se divide en un total de siete capiacutetulos Cada uno centradoen la explicacioacuten de un punto distinto A continuacioacuten explicaremos elcuerpo de cada capiacutetulo

El primer capiacutetulo introduce el motivo de este trabajo asiacute como las ideasbaacutesicas de las cuales sale la idea Otro punto explicaraacute los objetivos delmismo y por uacuteltimo esta pequentildea estructura

10

Capiacutetulo 2

Estado del arte

21 Realidad aumentada

211 Definicioacuten

La realidad aumentada (RA) es el teacutermino que se usa para definir unavisioacuten a traveacutes de un dispositivo tecnoloacutegico directa o indirecta de unentorno fiacutesico del mundo real cuyos elementos se combinan conelementos virtuales para la creacioacuten de una realidad mixta en tiemporeal Consiste en un conjunto de dispositivos que antildeaden informacioacutenvirtual a la informacioacuten fiacutesica ya existente

Eacutesta es la principal diferencia con la realidad virtual puesto que nosustituye la realidad fiacutesica sino que superpone los datos informaacuteticos almundo real Como podemos observar en la Figura 21 la realidad

11

aumentada se encuentra entre el entorno virtual y el real En ella semuestra el continuo de Realidad-Virtual de Milgram (1994)[1]

Figura 21 Continuo de Milgram

212 Teacutecnicas de visualizacioacuten

Existen tres teacutecnicas distintas de visualizacion de RA

Display en la cabeza Con sus siglas en ingleacutes HMD (HeadMounted Display) consta de un dispositivo que actua como unasgafas o un visor que nos colocamos en la cabeza y desde el quepodemos ver los objetos virtuales sobre la visioacuten del mundo real

Display de mano Consta de una pantalla pequentildea baacutesicamenteun smartphone o una tablet donde a traveacutes de la caacutemara eldispositivo informaacutetico superpone los objetos virtuales sobre lasimaacutegenes capturadas

Display espacial La realidad aumentada espacial usa un proyectorpara mostrarnos las imaacutegenes virtuales encima de los objetosreales La principal ventaja de esta teacutecnica es poder utilizarla engrupos en lugar de un usuario exclusivamente

Por uacuteltimo comentar que en este trabajo vamos a centrarnos en lateacutecnica del display de mano usando nuestro dispositivo moacutevil paramostrar la RA

12

213 Historia

Debemos entender que Realidad Virtual y Realidad Aumentada han idopraacutecticamente de la mano

En 1950 Morton Heilig escribioacute sobre un ldquoCine de Experienciardquo quepudiera acompantildear a todos los sentidos de una manera efectivaintegrando al espectador con la actividad en la pantalla Construyoacute unprototipo llamado el Sensorama en 1962 junto con 5 filmes cortos quepermitiacutean aumentar la experiencia del espectador a traveacutes de sussentidos (vista olfato tacto y oiacutedo) Podemos ver una foto delSensorama en la Figura 22

Figura 22 Imagen del sensorama por Morton Heilig

En 1968 Ivan Sutherland con la ayuda de su estudiante Bob Sproullconstruyeron lo que seriacutea ampliamente considerado el primer HeadMounted Display (HMD) para Realidad Virtual y Realidad AumentadaComo podemos ver en la Figura 23 era muy primitivo en teacuterminos deInterfaz de usuario y realismo y el HMD usado por el usuario era tangrande y pesado que debiacutea colgarse del techo y los graacuteficos que haciacuteanal ambiente virtual eran simples ldquomodelos alaacutembricordquo A finales de los 80

13

se popularizoacute el teacutermino Realidad Virtual por Jaron Lanier cuyacompantildeiacutea creoacute los primeros guantes y gafas de Realidad Virtual

Figura 23 Head MountedDisplay por Ivan Sutherland

El teacutermino Realidad Aumentada fue introducido por el investigador TomCaudell en Boeing en 1992 Caudell fue contratado para encontrar unaalternativa a los tediosos tableros de configuracioacuten de cables que utilizanlos trabajadores Salioacute con la idea de gafas especiales y tablerosvirtuales sobre tableros reales geneacutericos es asiacute que se le ocurrioacute queestaba ldquoaumentandordquo la realidad del usuario El teacutermino RealidadAumentada fue dado al puacuteblico en un artiacuteculo en 1992

14

Figura 24 Dispositivo para configuracioacuten de cables

213 Actualidad

En la actualidad la realidad aumentada cada vez se estaacute ganando un sitioen el diacutea a diacutea de las personas El gran avance de las tecnologiacuteas hahecho posible lo que anteriormente solo se podiacutea imaginar SeguacutenTechNavio (wwwtechnaviocom) una empresa de articulos deinvestigacioacuten la realidad aumentada tiene un prometedor futuroAugurando para eacuteste un crecimiento del 132 entre 2014 y 2018

En los uacuteltimos antildeos se han desarrollado muacuteltiples tecnologiacuteas que hansido uacutetiles para el desarrollo de la realidad aumentada Algunos ejemplosson ARToolKit ATOMIC Authoring Tool o Vuforia Este uacuteltimo es elsoftware que usaremos para el desarrollo de nuestra aplicacioacuten

El avance que maacutes ha contribuido a la realidad aumentada es la granexpansioacuten de los dispositivos moacuteviles Con una gran capacidad decoacutemputo una caacutemara y una gran pantalla donde interactuar con lasimaacutegenes que nos proyecta la aplicacioacuten Se convierten en el dispositivoclave donde esta tecnologiacutea puede hacer su gran aparicioacuten

15

Visto que la realidad aumentada teniacutea un gran futuro las empresas estaacutenempezando a interesarse por esta tecnologiacutea por sus interminablesaplicaciones aplicaacutendola asiacute en distintos sectores

Educacioacuten

Podemos incluir en los libros las imaacutegenes necesarias para permitirnosvisualizar objetos en 3D desde un dispositivo moacutevil para asiacute permitirexplorar desde el cuerpo humano hasta los inventos maacutes importantes dela historia Vemos en la Figura 25 un cubo con un target donde podervisualizar el elemento 3D[2] Tambieacuten nos permite escanear obras de artemonumentos o edificios para mostrarnos una pequentildea descripcioacuten ohistoria

Entretenimiento

En el sector del entretenimiento tiene una gran trayectoria ya que en losuacutetlimos antildeos han salido a la luz distintas aplicaciones o dispositivos Losmaacutes significativos los vamos a mencionar a continuacioacuten

Hololens Un dispositivo de la empresa Microsoft que consiste enunas gafas inalaacutembricas que nos proyectan delante de nosotros lasimaacutegenes en 3D y nos permite interactuar con ellas

16

Figura 25 Cubo interactivo

Figura 26 Minecraft sobre Hololens

Cascos de realidad virtual En este apartado tenemos actualmentetres empresas compitiendo por el mercado de la realidad virtualPor una parte tenemos el Oculus Rift de la empresa Oculus VRTambieacuten tenemos el HTC Vive de la empresa HC y por uacuteltimoPlayStation VR de Sony Esto nos muestra el gran mercado quetiene la realidad virtual Estos cascos se basan en poner unapantalla muy cercana a los ojos del usuario y eliminarle todo elcampo de visioacuten De esta manera la inmersioacuten en lo que se estaacuteviendo es mayor

Invizimals Videojuego desarrollado por Novarama para la consolaPSP Se puede decir que ha sido el juego de realidad aumentadaque maacutes se ha expandido en el momento en que salioacute El juegoincluye unas tarjetas donde enfocando la caacutemara podremos vernuestras mascotas Invizimals y podemos interactuar con ellas

PokemonGo Es un juego de realidad aumentada de la empresaNiantic que ha revolucionado el mundo de los juegos de losdispositivos moacuteviles haciendo que miles de personas salgan a lacalle a capturar pokemon mediante su smartphone No hace ni tresmeses que ha salido y cuenta con cuatro millones de descargassolo en PlayStore

17

Figura 27 Pokemon GO

Gafas de RA Un ejemplo de estas son las Google Glass de laempresa Google Son unas gafas de realidad aumentadadestinadas a mostrarnos la informacioacuten de nuestro teleacutefono moacutevilsin necesidad de utilizar las manos tambieacuten podremos navegarpor internet por medio de oacuterdenes de voz

Psicologiacutea

El tema de la superacioacuten de traumas puede ser a veces un temadelicado un proceso largo y costoso Pero la realidad aumentada unavez maacutes son sorprende con sus aplicaciones esta vez en el campo de lapsicologiacutea Al permitir mostrar cuerpos digitales en un entorno realpodemos por ejemplo visualizar un miedo por ejemplo a las cucarachaso arantildeas en un entorno real y asiacute controlar como el paciente seacostumbra a su presencia controlando el nuacutemero y el comportamientode eacutestas Como ejemplo se hizo un estudio en la Universidad Politecnicade Valencia en el que se sometiacutea a diversas personas a la visualizacioacutende sus fobias en un entorno controlado [3]

18

Figura 28 Uso de la RA con fines terapeacuteuticos

Otro ejemplo de fobia que podemos superar mediante la realidadaumentada es la fobia a las alturas Mediante RA podemos hacer que unpaciente tenga la sensacioacuten de estar en un sitio alto o con caiacuteda sinninguacuten tipo de peligro[4]

Sector Industrial

Otro sector en el que la realidad aumentada ha logrado hacerse ver esen el sector industrial Un ejemplo son las gafas Moverio Pro BT-2000 dela empresa Epson donde los usuarios pueden ver lo que estaacuten viendootros trabajadores para asi mejorar la comunicacioacuten y permitir apoyar laformacioacuten de nuevos trabajadores

22 PropuestaLa finalidad de este trabajo es realizar un juego de realidad aumentadadonde por medio de unas imaacutegenes reales podremos seleccionar elpersonaje que queremos jugar Para luego introducirlo en un mapa concasillas en el que tiraremos un dado y avanzaremos casillas con nuestropersonaje Nos enfrentaremos a otro personaje controlado por la IA Elprimero que llegue a la uacuteltima casilla seraacute el vencedor

19

20

Capiacutetulo 3

Herramientas

31 Unity 3D

Unity 3D es una herramienta para el desarrollo de videojuegosmultiplataforma de la empresa Unity Technologies Existen otrasplataformas de desarrollo de videojuegos como UDK de Epic Games oCryEngine de CRYtek pero lo que adelanta Unity a las demaacutes es quepuede ser usado tanto para Windows como para Mac Unity viene convarias versiones desde la versioacuten gratuita hasta la versioacuten PRO por 125$al mes Esta uacuteltima nos ofrece unos servicios exclusivos como soportepremium kits de assets o tutoriales Tambieacuten nos ofrece una versioacuten paraempresas que nos permite obtener una configuracioacuten personalizada

21

Figura 31 Versiones de Unity

El motor Unity nos permite desarrollar no solo videojuegos Tambieacuten nospermite desarrollar todo tipo de aplicaciones graacuteficas Tambieacuten se haincluido la opcioacuten de desarrollar aplicaciones moacuteviles para Android o iOSy todas las plataformas maacutes importantes de videojuegos actuales comoMicrosoft Nintendo o Sony

Otra de las ventajas de utilizar Unity es la Unity Store donde encontrarrecursos de todo tipo Muchos de ellos gratuitos Esto hace que podamosrealizar un videojuego sin necesidad de saber modelado 3D

32 Vuforia

De la empresa Qualcomm Vuforia es una de las plataformas de realidadaumentada que maacutes ha credico en el uacuteltimo antildeo Tiene maacutes de 30000desarrolladores en todo el mundo y grandes empresas como Audi Nike o Sonyentre otras ya la han usado

Vuforia es un SDK que permite visualizar imaacutegenes en 3D mediante la caacutemarade nuestro dispositivo De esta manera se mezclan objetos del mundo real ydel virtual Vuforia tambieacuten permite el reconocimiento de texto reconocimientode muacuteltiples targets al mismo tiempo y la deteccioacuten raacutepida de targets entreotras funcionalidades

22

Su arquitectura consta de cuatro elementos baacutesicos que procederemos adescribir a continuacioacuten

Caacutemara Capta la imagen para que posteriormente eacutesta sea procesadapor el Tracker

Base de Datos Almacena una serie de Targets para ser reconocidos porel Tracker Se crea con el Target Manager y puede ser local o en lanube

Target Se utilizan para permitir al Tracker el reconocimiento del mundoreal pueden ser de diferentes tipos como Image Targets o Word Targetentre otros

Tracker Analiza la imagen de la caacutemara y asiacute detecta los objetos delmundo real para buscar coincidencias en su base de datos

23

Figura 32 Diagrama de flujo de Vuforia

Una vez explicados los elementos de la arquitectura de Vuforia vamos aexplicar brevemente los pasos que sigue para el reconocimiento de unaimagen

Primero el dispositivo captura una escena mediente la caacutemara de viacutedeo

La SDK de Vuforia coge una imagen de las que componen el video yconvierte esa imagen a una resolucioacuten que el Tracker pueda manejar

Mediante el Tracker Vuforia analiza la imagen y busca similitudes en losTargets de la base de datos

Por uacuteltimo la aplicacioacuten puede renderizar el objeto 3D en la pantalla deldispositivo moacutevil y de esta manera crear realidad aumentada

24

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 6: Desarrollo de un juego de tablero con Realidad Aumentada

Iacutendice general

1 Introduccioacuten 10

11 Motivacioacuten 10

12 Objetivos 12

13 Estructura de la memoria 12

2 Estado del arte 14

21 Realidad aumentada 14

211 Definicioacuten 14

212 Teacutecnicas de visualizacioacuten 15

213 Historia 16

213 Actualidad 18

22 Propuesta 21

3 Herramientas 23

31 Unity 3D 23

32 Vuforia 24

4 Desarrollo 28

41 Descripcioacuten 28

42 Pasos 29

421 Instalacioacuten 29

422 Busqueda de aplicaciones similares 31

423 Primeras pruebas 32

424 Interfaces 33

425 Fase Inicial de Desarrollo 34

426 Fase Final de Desarrollo 35

5 Conclusiones 37

6 Trabajos Futuros 39

Bibliografiacutea 41

6

Iacutendice de figuras

Figura 11 Hololens por Microsoft 9

Figura 21 Continuo de Milgram 12

Figura 22 Imagen del sensorama por Morton Heilig 13

Figura 23 Head Mounted Display por Ivan Sutherland 14

Figura 24 Dispositivo para configuracioacuten de cables 15

Figura 25 Cubo interactivo 16

Figura 26 Minecraft sobre Hololens 17

Figura 27 Pokemon GO 18

Figura 28 Uso de la RA con fines terapeacuteuticos 19

Figura 31 Versiones de Unity 22

Figura 32 Diagrama de flujo de Vuforia 23

Figura 41 Descarga de Unity 28

Figura 42 Aplicaciones similares de RA 29

Figura 43 Target simple 30

Figura 44 Muacuteltiples Targets 31

Figura 45 Pantalla principal 31

Figura 46 Diagrama de flujo 32

Figura 47 Tablero inicial 33

Figura 48 Seleccioacuten de personaje 34

Figura 49 Tirada del Juego 35

Figura 410 Tienda del juego 35

7

Capiacutetulo 1

Introduccioacuten

11 Motivacioacuten

El auge de las aplicaciones moacuteviles junto con la expansioacuten constante delos mismos en los uacuteltimos antildeos nos han llevado a convivir con latecnologiacutea diacutea a diacutea Constantemente manejamos cualquier tipo deaplicacioacuten ya sea para ver el tiempo que haraacute en la ciudad en la queestamos para leer las noticias como para contactar con nuestros amigos

Es mucho el tiempo que pasamos a lo largo del diacutea delante de nuestrodispositivo moacutevil Es por esto que el desarrollo de aplicaciones es unmercado con un gran puacuteblico y donde es muy faacutecil y accesible entrar

Es por eso que el desarrollo de un juego basado en Android puede seruna manera de introducirnos en el mundo de las aplicaciones moacutevilesUna parte de este mercado se basa en la realidad aumentada

8

La idea de realidad aumentada en concreto se refiere a la inclusioacuten entiempo real de elementos virtuales dentro del universo fiacutesico Utilizandounas gafas u otros dispositivos especiales una persona puede observarel mundo real con ciertos elementos agregados que aparecen en suslentes o pantalla a modo de informacioacuten digital En la Figura 11 semuestra coacutemo se ve el planeta tierra mediante el dispositivo Hololens deMicrosoft tambieacuten nos permite interactuar con eacutel

Eacutesta puede ser una tecnologiacutea muy interesante ya que nos muestracualquier tipo de imagen o cuerpo virtual a traveacutes de la caacutemara denuestro dispositivo moacutevil esto tiene gran capacidad de atraccioacuten paracualquier tipo de usuario por ser una tecnologiacutea relativamente nueva

12 Objetivos

El objetivo principal de este trabajo es desarrollar una aplicacioacuten paradispositivos Android (pese a que luego se puede trasladar a iOS) basadaen un sistema de turnos En el turno se deberaacute hacer una tirada con un

9

Figura 11 Hololens por Microsoft

dado y se iraacute avanzando por las casillas el nuacutemero sacado en la tirada Eljugador que primero llegue a la uacuteltima casilla seraacute el ganador

Los objetivos seraacuten los siguientes

Podremos seleccionar nuestro personaje desde una pantalladonde mostraremos los distintos targets a la caacutemara

Este personaje seraacute introducido en un mapa con casillas dondepodremos jugar con eacutel

La aplicacioacuten tendraacute una seccioacuten de opciones donde cambiardistintas configuraciones como el sonido o el idioma

12 Estructura de la memoria

Eacutesta memoria se divide en un total de siete capiacutetulos Cada uno centradoen la explicacioacuten de un punto distinto A continuacioacuten explicaremos elcuerpo de cada capiacutetulo

El primer capiacutetulo introduce el motivo de este trabajo asiacute como las ideasbaacutesicas de las cuales sale la idea Otro punto explicaraacute los objetivos delmismo y por uacuteltimo esta pequentildea estructura

10

Capiacutetulo 2

Estado del arte

21 Realidad aumentada

211 Definicioacuten

La realidad aumentada (RA) es el teacutermino que se usa para definir unavisioacuten a traveacutes de un dispositivo tecnoloacutegico directa o indirecta de unentorno fiacutesico del mundo real cuyos elementos se combinan conelementos virtuales para la creacioacuten de una realidad mixta en tiemporeal Consiste en un conjunto de dispositivos que antildeaden informacioacutenvirtual a la informacioacuten fiacutesica ya existente

Eacutesta es la principal diferencia con la realidad virtual puesto que nosustituye la realidad fiacutesica sino que superpone los datos informaacuteticos almundo real Como podemos observar en la Figura 21 la realidad

11

aumentada se encuentra entre el entorno virtual y el real En ella semuestra el continuo de Realidad-Virtual de Milgram (1994)[1]

Figura 21 Continuo de Milgram

212 Teacutecnicas de visualizacioacuten

Existen tres teacutecnicas distintas de visualizacion de RA

Display en la cabeza Con sus siglas en ingleacutes HMD (HeadMounted Display) consta de un dispositivo que actua como unasgafas o un visor que nos colocamos en la cabeza y desde el quepodemos ver los objetos virtuales sobre la visioacuten del mundo real

Display de mano Consta de una pantalla pequentildea baacutesicamenteun smartphone o una tablet donde a traveacutes de la caacutemara eldispositivo informaacutetico superpone los objetos virtuales sobre lasimaacutegenes capturadas

Display espacial La realidad aumentada espacial usa un proyectorpara mostrarnos las imaacutegenes virtuales encima de los objetosreales La principal ventaja de esta teacutecnica es poder utilizarla engrupos en lugar de un usuario exclusivamente

Por uacuteltimo comentar que en este trabajo vamos a centrarnos en lateacutecnica del display de mano usando nuestro dispositivo moacutevil paramostrar la RA

12

213 Historia

Debemos entender que Realidad Virtual y Realidad Aumentada han idopraacutecticamente de la mano

En 1950 Morton Heilig escribioacute sobre un ldquoCine de Experienciardquo quepudiera acompantildear a todos los sentidos de una manera efectivaintegrando al espectador con la actividad en la pantalla Construyoacute unprototipo llamado el Sensorama en 1962 junto con 5 filmes cortos quepermitiacutean aumentar la experiencia del espectador a traveacutes de sussentidos (vista olfato tacto y oiacutedo) Podemos ver una foto delSensorama en la Figura 22

Figura 22 Imagen del sensorama por Morton Heilig

En 1968 Ivan Sutherland con la ayuda de su estudiante Bob Sproullconstruyeron lo que seriacutea ampliamente considerado el primer HeadMounted Display (HMD) para Realidad Virtual y Realidad AumentadaComo podemos ver en la Figura 23 era muy primitivo en teacuterminos deInterfaz de usuario y realismo y el HMD usado por el usuario era tangrande y pesado que debiacutea colgarse del techo y los graacuteficos que haciacuteanal ambiente virtual eran simples ldquomodelos alaacutembricordquo A finales de los 80

13

se popularizoacute el teacutermino Realidad Virtual por Jaron Lanier cuyacompantildeiacutea creoacute los primeros guantes y gafas de Realidad Virtual

Figura 23 Head MountedDisplay por Ivan Sutherland

El teacutermino Realidad Aumentada fue introducido por el investigador TomCaudell en Boeing en 1992 Caudell fue contratado para encontrar unaalternativa a los tediosos tableros de configuracioacuten de cables que utilizanlos trabajadores Salioacute con la idea de gafas especiales y tablerosvirtuales sobre tableros reales geneacutericos es asiacute que se le ocurrioacute queestaba ldquoaumentandordquo la realidad del usuario El teacutermino RealidadAumentada fue dado al puacuteblico en un artiacuteculo en 1992

14

Figura 24 Dispositivo para configuracioacuten de cables

213 Actualidad

En la actualidad la realidad aumentada cada vez se estaacute ganando un sitioen el diacutea a diacutea de las personas El gran avance de las tecnologiacuteas hahecho posible lo que anteriormente solo se podiacutea imaginar SeguacutenTechNavio (wwwtechnaviocom) una empresa de articulos deinvestigacioacuten la realidad aumentada tiene un prometedor futuroAugurando para eacuteste un crecimiento del 132 entre 2014 y 2018

En los uacuteltimos antildeos se han desarrollado muacuteltiples tecnologiacuteas que hansido uacutetiles para el desarrollo de la realidad aumentada Algunos ejemplosson ARToolKit ATOMIC Authoring Tool o Vuforia Este uacuteltimo es elsoftware que usaremos para el desarrollo de nuestra aplicacioacuten

El avance que maacutes ha contribuido a la realidad aumentada es la granexpansioacuten de los dispositivos moacuteviles Con una gran capacidad decoacutemputo una caacutemara y una gran pantalla donde interactuar con lasimaacutegenes que nos proyecta la aplicacioacuten Se convierten en el dispositivoclave donde esta tecnologiacutea puede hacer su gran aparicioacuten

15

Visto que la realidad aumentada teniacutea un gran futuro las empresas estaacutenempezando a interesarse por esta tecnologiacutea por sus interminablesaplicaciones aplicaacutendola asiacute en distintos sectores

Educacioacuten

Podemos incluir en los libros las imaacutegenes necesarias para permitirnosvisualizar objetos en 3D desde un dispositivo moacutevil para asiacute permitirexplorar desde el cuerpo humano hasta los inventos maacutes importantes dela historia Vemos en la Figura 25 un cubo con un target donde podervisualizar el elemento 3D[2] Tambieacuten nos permite escanear obras de artemonumentos o edificios para mostrarnos una pequentildea descripcioacuten ohistoria

Entretenimiento

En el sector del entretenimiento tiene una gran trayectoria ya que en losuacutetlimos antildeos han salido a la luz distintas aplicaciones o dispositivos Losmaacutes significativos los vamos a mencionar a continuacioacuten

Hololens Un dispositivo de la empresa Microsoft que consiste enunas gafas inalaacutembricas que nos proyectan delante de nosotros lasimaacutegenes en 3D y nos permite interactuar con ellas

16

Figura 25 Cubo interactivo

Figura 26 Minecraft sobre Hololens

Cascos de realidad virtual En este apartado tenemos actualmentetres empresas compitiendo por el mercado de la realidad virtualPor una parte tenemos el Oculus Rift de la empresa Oculus VRTambieacuten tenemos el HTC Vive de la empresa HC y por uacuteltimoPlayStation VR de Sony Esto nos muestra el gran mercado quetiene la realidad virtual Estos cascos se basan en poner unapantalla muy cercana a los ojos del usuario y eliminarle todo elcampo de visioacuten De esta manera la inmersioacuten en lo que se estaacuteviendo es mayor

Invizimals Videojuego desarrollado por Novarama para la consolaPSP Se puede decir que ha sido el juego de realidad aumentadaque maacutes se ha expandido en el momento en que salioacute El juegoincluye unas tarjetas donde enfocando la caacutemara podremos vernuestras mascotas Invizimals y podemos interactuar con ellas

PokemonGo Es un juego de realidad aumentada de la empresaNiantic que ha revolucionado el mundo de los juegos de losdispositivos moacuteviles haciendo que miles de personas salgan a lacalle a capturar pokemon mediante su smartphone No hace ni tresmeses que ha salido y cuenta con cuatro millones de descargassolo en PlayStore

17

Figura 27 Pokemon GO

Gafas de RA Un ejemplo de estas son las Google Glass de laempresa Google Son unas gafas de realidad aumentadadestinadas a mostrarnos la informacioacuten de nuestro teleacutefono moacutevilsin necesidad de utilizar las manos tambieacuten podremos navegarpor internet por medio de oacuterdenes de voz

Psicologiacutea

El tema de la superacioacuten de traumas puede ser a veces un temadelicado un proceso largo y costoso Pero la realidad aumentada unavez maacutes son sorprende con sus aplicaciones esta vez en el campo de lapsicologiacutea Al permitir mostrar cuerpos digitales en un entorno realpodemos por ejemplo visualizar un miedo por ejemplo a las cucarachaso arantildeas en un entorno real y asiacute controlar como el paciente seacostumbra a su presencia controlando el nuacutemero y el comportamientode eacutestas Como ejemplo se hizo un estudio en la Universidad Politecnicade Valencia en el que se sometiacutea a diversas personas a la visualizacioacutende sus fobias en un entorno controlado [3]

18

Figura 28 Uso de la RA con fines terapeacuteuticos

Otro ejemplo de fobia que podemos superar mediante la realidadaumentada es la fobia a las alturas Mediante RA podemos hacer que unpaciente tenga la sensacioacuten de estar en un sitio alto o con caiacuteda sinninguacuten tipo de peligro[4]

Sector Industrial

Otro sector en el que la realidad aumentada ha logrado hacerse ver esen el sector industrial Un ejemplo son las gafas Moverio Pro BT-2000 dela empresa Epson donde los usuarios pueden ver lo que estaacuten viendootros trabajadores para asi mejorar la comunicacioacuten y permitir apoyar laformacioacuten de nuevos trabajadores

22 PropuestaLa finalidad de este trabajo es realizar un juego de realidad aumentadadonde por medio de unas imaacutegenes reales podremos seleccionar elpersonaje que queremos jugar Para luego introducirlo en un mapa concasillas en el que tiraremos un dado y avanzaremos casillas con nuestropersonaje Nos enfrentaremos a otro personaje controlado por la IA Elprimero que llegue a la uacuteltima casilla seraacute el vencedor

19

20

Capiacutetulo 3

Herramientas

31 Unity 3D

Unity 3D es una herramienta para el desarrollo de videojuegosmultiplataforma de la empresa Unity Technologies Existen otrasplataformas de desarrollo de videojuegos como UDK de Epic Games oCryEngine de CRYtek pero lo que adelanta Unity a las demaacutes es quepuede ser usado tanto para Windows como para Mac Unity viene convarias versiones desde la versioacuten gratuita hasta la versioacuten PRO por 125$al mes Esta uacuteltima nos ofrece unos servicios exclusivos como soportepremium kits de assets o tutoriales Tambieacuten nos ofrece una versioacuten paraempresas que nos permite obtener una configuracioacuten personalizada

21

Figura 31 Versiones de Unity

El motor Unity nos permite desarrollar no solo videojuegos Tambieacuten nospermite desarrollar todo tipo de aplicaciones graacuteficas Tambieacuten se haincluido la opcioacuten de desarrollar aplicaciones moacuteviles para Android o iOSy todas las plataformas maacutes importantes de videojuegos actuales comoMicrosoft Nintendo o Sony

Otra de las ventajas de utilizar Unity es la Unity Store donde encontrarrecursos de todo tipo Muchos de ellos gratuitos Esto hace que podamosrealizar un videojuego sin necesidad de saber modelado 3D

32 Vuforia

De la empresa Qualcomm Vuforia es una de las plataformas de realidadaumentada que maacutes ha credico en el uacuteltimo antildeo Tiene maacutes de 30000desarrolladores en todo el mundo y grandes empresas como Audi Nike o Sonyentre otras ya la han usado

Vuforia es un SDK que permite visualizar imaacutegenes en 3D mediante la caacutemarade nuestro dispositivo De esta manera se mezclan objetos del mundo real ydel virtual Vuforia tambieacuten permite el reconocimiento de texto reconocimientode muacuteltiples targets al mismo tiempo y la deteccioacuten raacutepida de targets entreotras funcionalidades

22

Su arquitectura consta de cuatro elementos baacutesicos que procederemos adescribir a continuacioacuten

Caacutemara Capta la imagen para que posteriormente eacutesta sea procesadapor el Tracker

Base de Datos Almacena una serie de Targets para ser reconocidos porel Tracker Se crea con el Target Manager y puede ser local o en lanube

Target Se utilizan para permitir al Tracker el reconocimiento del mundoreal pueden ser de diferentes tipos como Image Targets o Word Targetentre otros

Tracker Analiza la imagen de la caacutemara y asiacute detecta los objetos delmundo real para buscar coincidencias en su base de datos

23

Figura 32 Diagrama de flujo de Vuforia

Una vez explicados los elementos de la arquitectura de Vuforia vamos aexplicar brevemente los pasos que sigue para el reconocimiento de unaimagen

Primero el dispositivo captura una escena mediente la caacutemara de viacutedeo

La SDK de Vuforia coge una imagen de las que componen el video yconvierte esa imagen a una resolucioacuten que el Tracker pueda manejar

Mediante el Tracker Vuforia analiza la imagen y busca similitudes en losTargets de la base de datos

Por uacuteltimo la aplicacioacuten puede renderizar el objeto 3D en la pantalla deldispositivo moacutevil y de esta manera crear realidad aumentada

24

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 7: Desarrollo de un juego de tablero con Realidad Aumentada

Iacutendice de figuras

Figura 11 Hololens por Microsoft 9

Figura 21 Continuo de Milgram 12

Figura 22 Imagen del sensorama por Morton Heilig 13

Figura 23 Head Mounted Display por Ivan Sutherland 14

Figura 24 Dispositivo para configuracioacuten de cables 15

Figura 25 Cubo interactivo 16

Figura 26 Minecraft sobre Hololens 17

Figura 27 Pokemon GO 18

Figura 28 Uso de la RA con fines terapeacuteuticos 19

Figura 31 Versiones de Unity 22

Figura 32 Diagrama de flujo de Vuforia 23

Figura 41 Descarga de Unity 28

Figura 42 Aplicaciones similares de RA 29

Figura 43 Target simple 30

Figura 44 Muacuteltiples Targets 31

Figura 45 Pantalla principal 31

Figura 46 Diagrama de flujo 32

Figura 47 Tablero inicial 33

Figura 48 Seleccioacuten de personaje 34

Figura 49 Tirada del Juego 35

Figura 410 Tienda del juego 35

7

Capiacutetulo 1

Introduccioacuten

11 Motivacioacuten

El auge de las aplicaciones moacuteviles junto con la expansioacuten constante delos mismos en los uacuteltimos antildeos nos han llevado a convivir con latecnologiacutea diacutea a diacutea Constantemente manejamos cualquier tipo deaplicacioacuten ya sea para ver el tiempo que haraacute en la ciudad en la queestamos para leer las noticias como para contactar con nuestros amigos

Es mucho el tiempo que pasamos a lo largo del diacutea delante de nuestrodispositivo moacutevil Es por esto que el desarrollo de aplicaciones es unmercado con un gran puacuteblico y donde es muy faacutecil y accesible entrar

Es por eso que el desarrollo de un juego basado en Android puede seruna manera de introducirnos en el mundo de las aplicaciones moacutevilesUna parte de este mercado se basa en la realidad aumentada

8

La idea de realidad aumentada en concreto se refiere a la inclusioacuten entiempo real de elementos virtuales dentro del universo fiacutesico Utilizandounas gafas u otros dispositivos especiales una persona puede observarel mundo real con ciertos elementos agregados que aparecen en suslentes o pantalla a modo de informacioacuten digital En la Figura 11 semuestra coacutemo se ve el planeta tierra mediante el dispositivo Hololens deMicrosoft tambieacuten nos permite interactuar con eacutel

Eacutesta puede ser una tecnologiacutea muy interesante ya que nos muestracualquier tipo de imagen o cuerpo virtual a traveacutes de la caacutemara denuestro dispositivo moacutevil esto tiene gran capacidad de atraccioacuten paracualquier tipo de usuario por ser una tecnologiacutea relativamente nueva

12 Objetivos

El objetivo principal de este trabajo es desarrollar una aplicacioacuten paradispositivos Android (pese a que luego se puede trasladar a iOS) basadaen un sistema de turnos En el turno se deberaacute hacer una tirada con un

9

Figura 11 Hololens por Microsoft

dado y se iraacute avanzando por las casillas el nuacutemero sacado en la tirada Eljugador que primero llegue a la uacuteltima casilla seraacute el ganador

Los objetivos seraacuten los siguientes

Podremos seleccionar nuestro personaje desde una pantalladonde mostraremos los distintos targets a la caacutemara

Este personaje seraacute introducido en un mapa con casillas dondepodremos jugar con eacutel

La aplicacioacuten tendraacute una seccioacuten de opciones donde cambiardistintas configuraciones como el sonido o el idioma

12 Estructura de la memoria

Eacutesta memoria se divide en un total de siete capiacutetulos Cada uno centradoen la explicacioacuten de un punto distinto A continuacioacuten explicaremos elcuerpo de cada capiacutetulo

El primer capiacutetulo introduce el motivo de este trabajo asiacute como las ideasbaacutesicas de las cuales sale la idea Otro punto explicaraacute los objetivos delmismo y por uacuteltimo esta pequentildea estructura

10

Capiacutetulo 2

Estado del arte

21 Realidad aumentada

211 Definicioacuten

La realidad aumentada (RA) es el teacutermino que se usa para definir unavisioacuten a traveacutes de un dispositivo tecnoloacutegico directa o indirecta de unentorno fiacutesico del mundo real cuyos elementos se combinan conelementos virtuales para la creacioacuten de una realidad mixta en tiemporeal Consiste en un conjunto de dispositivos que antildeaden informacioacutenvirtual a la informacioacuten fiacutesica ya existente

Eacutesta es la principal diferencia con la realidad virtual puesto que nosustituye la realidad fiacutesica sino que superpone los datos informaacuteticos almundo real Como podemos observar en la Figura 21 la realidad

11

aumentada se encuentra entre el entorno virtual y el real En ella semuestra el continuo de Realidad-Virtual de Milgram (1994)[1]

Figura 21 Continuo de Milgram

212 Teacutecnicas de visualizacioacuten

Existen tres teacutecnicas distintas de visualizacion de RA

Display en la cabeza Con sus siglas en ingleacutes HMD (HeadMounted Display) consta de un dispositivo que actua como unasgafas o un visor que nos colocamos en la cabeza y desde el quepodemos ver los objetos virtuales sobre la visioacuten del mundo real

Display de mano Consta de una pantalla pequentildea baacutesicamenteun smartphone o una tablet donde a traveacutes de la caacutemara eldispositivo informaacutetico superpone los objetos virtuales sobre lasimaacutegenes capturadas

Display espacial La realidad aumentada espacial usa un proyectorpara mostrarnos las imaacutegenes virtuales encima de los objetosreales La principal ventaja de esta teacutecnica es poder utilizarla engrupos en lugar de un usuario exclusivamente

Por uacuteltimo comentar que en este trabajo vamos a centrarnos en lateacutecnica del display de mano usando nuestro dispositivo moacutevil paramostrar la RA

12

213 Historia

Debemos entender que Realidad Virtual y Realidad Aumentada han idopraacutecticamente de la mano

En 1950 Morton Heilig escribioacute sobre un ldquoCine de Experienciardquo quepudiera acompantildear a todos los sentidos de una manera efectivaintegrando al espectador con la actividad en la pantalla Construyoacute unprototipo llamado el Sensorama en 1962 junto con 5 filmes cortos quepermitiacutean aumentar la experiencia del espectador a traveacutes de sussentidos (vista olfato tacto y oiacutedo) Podemos ver una foto delSensorama en la Figura 22

Figura 22 Imagen del sensorama por Morton Heilig

En 1968 Ivan Sutherland con la ayuda de su estudiante Bob Sproullconstruyeron lo que seriacutea ampliamente considerado el primer HeadMounted Display (HMD) para Realidad Virtual y Realidad AumentadaComo podemos ver en la Figura 23 era muy primitivo en teacuterminos deInterfaz de usuario y realismo y el HMD usado por el usuario era tangrande y pesado que debiacutea colgarse del techo y los graacuteficos que haciacuteanal ambiente virtual eran simples ldquomodelos alaacutembricordquo A finales de los 80

13

se popularizoacute el teacutermino Realidad Virtual por Jaron Lanier cuyacompantildeiacutea creoacute los primeros guantes y gafas de Realidad Virtual

Figura 23 Head MountedDisplay por Ivan Sutherland

El teacutermino Realidad Aumentada fue introducido por el investigador TomCaudell en Boeing en 1992 Caudell fue contratado para encontrar unaalternativa a los tediosos tableros de configuracioacuten de cables que utilizanlos trabajadores Salioacute con la idea de gafas especiales y tablerosvirtuales sobre tableros reales geneacutericos es asiacute que se le ocurrioacute queestaba ldquoaumentandordquo la realidad del usuario El teacutermino RealidadAumentada fue dado al puacuteblico en un artiacuteculo en 1992

14

Figura 24 Dispositivo para configuracioacuten de cables

213 Actualidad

En la actualidad la realidad aumentada cada vez se estaacute ganando un sitioen el diacutea a diacutea de las personas El gran avance de las tecnologiacuteas hahecho posible lo que anteriormente solo se podiacutea imaginar SeguacutenTechNavio (wwwtechnaviocom) una empresa de articulos deinvestigacioacuten la realidad aumentada tiene un prometedor futuroAugurando para eacuteste un crecimiento del 132 entre 2014 y 2018

En los uacuteltimos antildeos se han desarrollado muacuteltiples tecnologiacuteas que hansido uacutetiles para el desarrollo de la realidad aumentada Algunos ejemplosson ARToolKit ATOMIC Authoring Tool o Vuforia Este uacuteltimo es elsoftware que usaremos para el desarrollo de nuestra aplicacioacuten

El avance que maacutes ha contribuido a la realidad aumentada es la granexpansioacuten de los dispositivos moacuteviles Con una gran capacidad decoacutemputo una caacutemara y una gran pantalla donde interactuar con lasimaacutegenes que nos proyecta la aplicacioacuten Se convierten en el dispositivoclave donde esta tecnologiacutea puede hacer su gran aparicioacuten

15

Visto que la realidad aumentada teniacutea un gran futuro las empresas estaacutenempezando a interesarse por esta tecnologiacutea por sus interminablesaplicaciones aplicaacutendola asiacute en distintos sectores

Educacioacuten

Podemos incluir en los libros las imaacutegenes necesarias para permitirnosvisualizar objetos en 3D desde un dispositivo moacutevil para asiacute permitirexplorar desde el cuerpo humano hasta los inventos maacutes importantes dela historia Vemos en la Figura 25 un cubo con un target donde podervisualizar el elemento 3D[2] Tambieacuten nos permite escanear obras de artemonumentos o edificios para mostrarnos una pequentildea descripcioacuten ohistoria

Entretenimiento

En el sector del entretenimiento tiene una gran trayectoria ya que en losuacutetlimos antildeos han salido a la luz distintas aplicaciones o dispositivos Losmaacutes significativos los vamos a mencionar a continuacioacuten

Hololens Un dispositivo de la empresa Microsoft que consiste enunas gafas inalaacutembricas que nos proyectan delante de nosotros lasimaacutegenes en 3D y nos permite interactuar con ellas

16

Figura 25 Cubo interactivo

Figura 26 Minecraft sobre Hololens

Cascos de realidad virtual En este apartado tenemos actualmentetres empresas compitiendo por el mercado de la realidad virtualPor una parte tenemos el Oculus Rift de la empresa Oculus VRTambieacuten tenemos el HTC Vive de la empresa HC y por uacuteltimoPlayStation VR de Sony Esto nos muestra el gran mercado quetiene la realidad virtual Estos cascos se basan en poner unapantalla muy cercana a los ojos del usuario y eliminarle todo elcampo de visioacuten De esta manera la inmersioacuten en lo que se estaacuteviendo es mayor

Invizimals Videojuego desarrollado por Novarama para la consolaPSP Se puede decir que ha sido el juego de realidad aumentadaque maacutes se ha expandido en el momento en que salioacute El juegoincluye unas tarjetas donde enfocando la caacutemara podremos vernuestras mascotas Invizimals y podemos interactuar con ellas

PokemonGo Es un juego de realidad aumentada de la empresaNiantic que ha revolucionado el mundo de los juegos de losdispositivos moacuteviles haciendo que miles de personas salgan a lacalle a capturar pokemon mediante su smartphone No hace ni tresmeses que ha salido y cuenta con cuatro millones de descargassolo en PlayStore

17

Figura 27 Pokemon GO

Gafas de RA Un ejemplo de estas son las Google Glass de laempresa Google Son unas gafas de realidad aumentadadestinadas a mostrarnos la informacioacuten de nuestro teleacutefono moacutevilsin necesidad de utilizar las manos tambieacuten podremos navegarpor internet por medio de oacuterdenes de voz

Psicologiacutea

El tema de la superacioacuten de traumas puede ser a veces un temadelicado un proceso largo y costoso Pero la realidad aumentada unavez maacutes son sorprende con sus aplicaciones esta vez en el campo de lapsicologiacutea Al permitir mostrar cuerpos digitales en un entorno realpodemos por ejemplo visualizar un miedo por ejemplo a las cucarachaso arantildeas en un entorno real y asiacute controlar como el paciente seacostumbra a su presencia controlando el nuacutemero y el comportamientode eacutestas Como ejemplo se hizo un estudio en la Universidad Politecnicade Valencia en el que se sometiacutea a diversas personas a la visualizacioacutende sus fobias en un entorno controlado [3]

18

Figura 28 Uso de la RA con fines terapeacuteuticos

Otro ejemplo de fobia que podemos superar mediante la realidadaumentada es la fobia a las alturas Mediante RA podemos hacer que unpaciente tenga la sensacioacuten de estar en un sitio alto o con caiacuteda sinninguacuten tipo de peligro[4]

Sector Industrial

Otro sector en el que la realidad aumentada ha logrado hacerse ver esen el sector industrial Un ejemplo son las gafas Moverio Pro BT-2000 dela empresa Epson donde los usuarios pueden ver lo que estaacuten viendootros trabajadores para asi mejorar la comunicacioacuten y permitir apoyar laformacioacuten de nuevos trabajadores

22 PropuestaLa finalidad de este trabajo es realizar un juego de realidad aumentadadonde por medio de unas imaacutegenes reales podremos seleccionar elpersonaje que queremos jugar Para luego introducirlo en un mapa concasillas en el que tiraremos un dado y avanzaremos casillas con nuestropersonaje Nos enfrentaremos a otro personaje controlado por la IA Elprimero que llegue a la uacuteltima casilla seraacute el vencedor

19

20

Capiacutetulo 3

Herramientas

31 Unity 3D

Unity 3D es una herramienta para el desarrollo de videojuegosmultiplataforma de la empresa Unity Technologies Existen otrasplataformas de desarrollo de videojuegos como UDK de Epic Games oCryEngine de CRYtek pero lo que adelanta Unity a las demaacutes es quepuede ser usado tanto para Windows como para Mac Unity viene convarias versiones desde la versioacuten gratuita hasta la versioacuten PRO por 125$al mes Esta uacuteltima nos ofrece unos servicios exclusivos como soportepremium kits de assets o tutoriales Tambieacuten nos ofrece una versioacuten paraempresas que nos permite obtener una configuracioacuten personalizada

21

Figura 31 Versiones de Unity

El motor Unity nos permite desarrollar no solo videojuegos Tambieacuten nospermite desarrollar todo tipo de aplicaciones graacuteficas Tambieacuten se haincluido la opcioacuten de desarrollar aplicaciones moacuteviles para Android o iOSy todas las plataformas maacutes importantes de videojuegos actuales comoMicrosoft Nintendo o Sony

Otra de las ventajas de utilizar Unity es la Unity Store donde encontrarrecursos de todo tipo Muchos de ellos gratuitos Esto hace que podamosrealizar un videojuego sin necesidad de saber modelado 3D

32 Vuforia

De la empresa Qualcomm Vuforia es una de las plataformas de realidadaumentada que maacutes ha credico en el uacuteltimo antildeo Tiene maacutes de 30000desarrolladores en todo el mundo y grandes empresas como Audi Nike o Sonyentre otras ya la han usado

Vuforia es un SDK que permite visualizar imaacutegenes en 3D mediante la caacutemarade nuestro dispositivo De esta manera se mezclan objetos del mundo real ydel virtual Vuforia tambieacuten permite el reconocimiento de texto reconocimientode muacuteltiples targets al mismo tiempo y la deteccioacuten raacutepida de targets entreotras funcionalidades

22

Su arquitectura consta de cuatro elementos baacutesicos que procederemos adescribir a continuacioacuten

Caacutemara Capta la imagen para que posteriormente eacutesta sea procesadapor el Tracker

Base de Datos Almacena una serie de Targets para ser reconocidos porel Tracker Se crea con el Target Manager y puede ser local o en lanube

Target Se utilizan para permitir al Tracker el reconocimiento del mundoreal pueden ser de diferentes tipos como Image Targets o Word Targetentre otros

Tracker Analiza la imagen de la caacutemara y asiacute detecta los objetos delmundo real para buscar coincidencias en su base de datos

23

Figura 32 Diagrama de flujo de Vuforia

Una vez explicados los elementos de la arquitectura de Vuforia vamos aexplicar brevemente los pasos que sigue para el reconocimiento de unaimagen

Primero el dispositivo captura una escena mediente la caacutemara de viacutedeo

La SDK de Vuforia coge una imagen de las que componen el video yconvierte esa imagen a una resolucioacuten que el Tracker pueda manejar

Mediante el Tracker Vuforia analiza la imagen y busca similitudes en losTargets de la base de datos

Por uacuteltimo la aplicacioacuten puede renderizar el objeto 3D en la pantalla deldispositivo moacutevil y de esta manera crear realidad aumentada

24

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 8: Desarrollo de un juego de tablero con Realidad Aumentada

Capiacutetulo 1

Introduccioacuten

11 Motivacioacuten

El auge de las aplicaciones moacuteviles junto con la expansioacuten constante delos mismos en los uacuteltimos antildeos nos han llevado a convivir con latecnologiacutea diacutea a diacutea Constantemente manejamos cualquier tipo deaplicacioacuten ya sea para ver el tiempo que haraacute en la ciudad en la queestamos para leer las noticias como para contactar con nuestros amigos

Es mucho el tiempo que pasamos a lo largo del diacutea delante de nuestrodispositivo moacutevil Es por esto que el desarrollo de aplicaciones es unmercado con un gran puacuteblico y donde es muy faacutecil y accesible entrar

Es por eso que el desarrollo de un juego basado en Android puede seruna manera de introducirnos en el mundo de las aplicaciones moacutevilesUna parte de este mercado se basa en la realidad aumentada

8

La idea de realidad aumentada en concreto se refiere a la inclusioacuten entiempo real de elementos virtuales dentro del universo fiacutesico Utilizandounas gafas u otros dispositivos especiales una persona puede observarel mundo real con ciertos elementos agregados que aparecen en suslentes o pantalla a modo de informacioacuten digital En la Figura 11 semuestra coacutemo se ve el planeta tierra mediante el dispositivo Hololens deMicrosoft tambieacuten nos permite interactuar con eacutel

Eacutesta puede ser una tecnologiacutea muy interesante ya que nos muestracualquier tipo de imagen o cuerpo virtual a traveacutes de la caacutemara denuestro dispositivo moacutevil esto tiene gran capacidad de atraccioacuten paracualquier tipo de usuario por ser una tecnologiacutea relativamente nueva

12 Objetivos

El objetivo principal de este trabajo es desarrollar una aplicacioacuten paradispositivos Android (pese a que luego se puede trasladar a iOS) basadaen un sistema de turnos En el turno se deberaacute hacer una tirada con un

9

Figura 11 Hololens por Microsoft

dado y se iraacute avanzando por las casillas el nuacutemero sacado en la tirada Eljugador que primero llegue a la uacuteltima casilla seraacute el ganador

Los objetivos seraacuten los siguientes

Podremos seleccionar nuestro personaje desde una pantalladonde mostraremos los distintos targets a la caacutemara

Este personaje seraacute introducido en un mapa con casillas dondepodremos jugar con eacutel

La aplicacioacuten tendraacute una seccioacuten de opciones donde cambiardistintas configuraciones como el sonido o el idioma

12 Estructura de la memoria

Eacutesta memoria se divide en un total de siete capiacutetulos Cada uno centradoen la explicacioacuten de un punto distinto A continuacioacuten explicaremos elcuerpo de cada capiacutetulo

El primer capiacutetulo introduce el motivo de este trabajo asiacute como las ideasbaacutesicas de las cuales sale la idea Otro punto explicaraacute los objetivos delmismo y por uacuteltimo esta pequentildea estructura

10

Capiacutetulo 2

Estado del arte

21 Realidad aumentada

211 Definicioacuten

La realidad aumentada (RA) es el teacutermino que se usa para definir unavisioacuten a traveacutes de un dispositivo tecnoloacutegico directa o indirecta de unentorno fiacutesico del mundo real cuyos elementos se combinan conelementos virtuales para la creacioacuten de una realidad mixta en tiemporeal Consiste en un conjunto de dispositivos que antildeaden informacioacutenvirtual a la informacioacuten fiacutesica ya existente

Eacutesta es la principal diferencia con la realidad virtual puesto que nosustituye la realidad fiacutesica sino que superpone los datos informaacuteticos almundo real Como podemos observar en la Figura 21 la realidad

11

aumentada se encuentra entre el entorno virtual y el real En ella semuestra el continuo de Realidad-Virtual de Milgram (1994)[1]

Figura 21 Continuo de Milgram

212 Teacutecnicas de visualizacioacuten

Existen tres teacutecnicas distintas de visualizacion de RA

Display en la cabeza Con sus siglas en ingleacutes HMD (HeadMounted Display) consta de un dispositivo que actua como unasgafas o un visor que nos colocamos en la cabeza y desde el quepodemos ver los objetos virtuales sobre la visioacuten del mundo real

Display de mano Consta de una pantalla pequentildea baacutesicamenteun smartphone o una tablet donde a traveacutes de la caacutemara eldispositivo informaacutetico superpone los objetos virtuales sobre lasimaacutegenes capturadas

Display espacial La realidad aumentada espacial usa un proyectorpara mostrarnos las imaacutegenes virtuales encima de los objetosreales La principal ventaja de esta teacutecnica es poder utilizarla engrupos en lugar de un usuario exclusivamente

Por uacuteltimo comentar que en este trabajo vamos a centrarnos en lateacutecnica del display de mano usando nuestro dispositivo moacutevil paramostrar la RA

12

213 Historia

Debemos entender que Realidad Virtual y Realidad Aumentada han idopraacutecticamente de la mano

En 1950 Morton Heilig escribioacute sobre un ldquoCine de Experienciardquo quepudiera acompantildear a todos los sentidos de una manera efectivaintegrando al espectador con la actividad en la pantalla Construyoacute unprototipo llamado el Sensorama en 1962 junto con 5 filmes cortos quepermitiacutean aumentar la experiencia del espectador a traveacutes de sussentidos (vista olfato tacto y oiacutedo) Podemos ver una foto delSensorama en la Figura 22

Figura 22 Imagen del sensorama por Morton Heilig

En 1968 Ivan Sutherland con la ayuda de su estudiante Bob Sproullconstruyeron lo que seriacutea ampliamente considerado el primer HeadMounted Display (HMD) para Realidad Virtual y Realidad AumentadaComo podemos ver en la Figura 23 era muy primitivo en teacuterminos deInterfaz de usuario y realismo y el HMD usado por el usuario era tangrande y pesado que debiacutea colgarse del techo y los graacuteficos que haciacuteanal ambiente virtual eran simples ldquomodelos alaacutembricordquo A finales de los 80

13

se popularizoacute el teacutermino Realidad Virtual por Jaron Lanier cuyacompantildeiacutea creoacute los primeros guantes y gafas de Realidad Virtual

Figura 23 Head MountedDisplay por Ivan Sutherland

El teacutermino Realidad Aumentada fue introducido por el investigador TomCaudell en Boeing en 1992 Caudell fue contratado para encontrar unaalternativa a los tediosos tableros de configuracioacuten de cables que utilizanlos trabajadores Salioacute con la idea de gafas especiales y tablerosvirtuales sobre tableros reales geneacutericos es asiacute que se le ocurrioacute queestaba ldquoaumentandordquo la realidad del usuario El teacutermino RealidadAumentada fue dado al puacuteblico en un artiacuteculo en 1992

14

Figura 24 Dispositivo para configuracioacuten de cables

213 Actualidad

En la actualidad la realidad aumentada cada vez se estaacute ganando un sitioen el diacutea a diacutea de las personas El gran avance de las tecnologiacuteas hahecho posible lo que anteriormente solo se podiacutea imaginar SeguacutenTechNavio (wwwtechnaviocom) una empresa de articulos deinvestigacioacuten la realidad aumentada tiene un prometedor futuroAugurando para eacuteste un crecimiento del 132 entre 2014 y 2018

En los uacuteltimos antildeos se han desarrollado muacuteltiples tecnologiacuteas que hansido uacutetiles para el desarrollo de la realidad aumentada Algunos ejemplosson ARToolKit ATOMIC Authoring Tool o Vuforia Este uacuteltimo es elsoftware que usaremos para el desarrollo de nuestra aplicacioacuten

El avance que maacutes ha contribuido a la realidad aumentada es la granexpansioacuten de los dispositivos moacuteviles Con una gran capacidad decoacutemputo una caacutemara y una gran pantalla donde interactuar con lasimaacutegenes que nos proyecta la aplicacioacuten Se convierten en el dispositivoclave donde esta tecnologiacutea puede hacer su gran aparicioacuten

15

Visto que la realidad aumentada teniacutea un gran futuro las empresas estaacutenempezando a interesarse por esta tecnologiacutea por sus interminablesaplicaciones aplicaacutendola asiacute en distintos sectores

Educacioacuten

Podemos incluir en los libros las imaacutegenes necesarias para permitirnosvisualizar objetos en 3D desde un dispositivo moacutevil para asiacute permitirexplorar desde el cuerpo humano hasta los inventos maacutes importantes dela historia Vemos en la Figura 25 un cubo con un target donde podervisualizar el elemento 3D[2] Tambieacuten nos permite escanear obras de artemonumentos o edificios para mostrarnos una pequentildea descripcioacuten ohistoria

Entretenimiento

En el sector del entretenimiento tiene una gran trayectoria ya que en losuacutetlimos antildeos han salido a la luz distintas aplicaciones o dispositivos Losmaacutes significativos los vamos a mencionar a continuacioacuten

Hololens Un dispositivo de la empresa Microsoft que consiste enunas gafas inalaacutembricas que nos proyectan delante de nosotros lasimaacutegenes en 3D y nos permite interactuar con ellas

16

Figura 25 Cubo interactivo

Figura 26 Minecraft sobre Hololens

Cascos de realidad virtual En este apartado tenemos actualmentetres empresas compitiendo por el mercado de la realidad virtualPor una parte tenemos el Oculus Rift de la empresa Oculus VRTambieacuten tenemos el HTC Vive de la empresa HC y por uacuteltimoPlayStation VR de Sony Esto nos muestra el gran mercado quetiene la realidad virtual Estos cascos se basan en poner unapantalla muy cercana a los ojos del usuario y eliminarle todo elcampo de visioacuten De esta manera la inmersioacuten en lo que se estaacuteviendo es mayor

Invizimals Videojuego desarrollado por Novarama para la consolaPSP Se puede decir que ha sido el juego de realidad aumentadaque maacutes se ha expandido en el momento en que salioacute El juegoincluye unas tarjetas donde enfocando la caacutemara podremos vernuestras mascotas Invizimals y podemos interactuar con ellas

PokemonGo Es un juego de realidad aumentada de la empresaNiantic que ha revolucionado el mundo de los juegos de losdispositivos moacuteviles haciendo que miles de personas salgan a lacalle a capturar pokemon mediante su smartphone No hace ni tresmeses que ha salido y cuenta con cuatro millones de descargassolo en PlayStore

17

Figura 27 Pokemon GO

Gafas de RA Un ejemplo de estas son las Google Glass de laempresa Google Son unas gafas de realidad aumentadadestinadas a mostrarnos la informacioacuten de nuestro teleacutefono moacutevilsin necesidad de utilizar las manos tambieacuten podremos navegarpor internet por medio de oacuterdenes de voz

Psicologiacutea

El tema de la superacioacuten de traumas puede ser a veces un temadelicado un proceso largo y costoso Pero la realidad aumentada unavez maacutes son sorprende con sus aplicaciones esta vez en el campo de lapsicologiacutea Al permitir mostrar cuerpos digitales en un entorno realpodemos por ejemplo visualizar un miedo por ejemplo a las cucarachaso arantildeas en un entorno real y asiacute controlar como el paciente seacostumbra a su presencia controlando el nuacutemero y el comportamientode eacutestas Como ejemplo se hizo un estudio en la Universidad Politecnicade Valencia en el que se sometiacutea a diversas personas a la visualizacioacutende sus fobias en un entorno controlado [3]

18

Figura 28 Uso de la RA con fines terapeacuteuticos

Otro ejemplo de fobia que podemos superar mediante la realidadaumentada es la fobia a las alturas Mediante RA podemos hacer que unpaciente tenga la sensacioacuten de estar en un sitio alto o con caiacuteda sinninguacuten tipo de peligro[4]

Sector Industrial

Otro sector en el que la realidad aumentada ha logrado hacerse ver esen el sector industrial Un ejemplo son las gafas Moverio Pro BT-2000 dela empresa Epson donde los usuarios pueden ver lo que estaacuten viendootros trabajadores para asi mejorar la comunicacioacuten y permitir apoyar laformacioacuten de nuevos trabajadores

22 PropuestaLa finalidad de este trabajo es realizar un juego de realidad aumentadadonde por medio de unas imaacutegenes reales podremos seleccionar elpersonaje que queremos jugar Para luego introducirlo en un mapa concasillas en el que tiraremos un dado y avanzaremos casillas con nuestropersonaje Nos enfrentaremos a otro personaje controlado por la IA Elprimero que llegue a la uacuteltima casilla seraacute el vencedor

19

20

Capiacutetulo 3

Herramientas

31 Unity 3D

Unity 3D es una herramienta para el desarrollo de videojuegosmultiplataforma de la empresa Unity Technologies Existen otrasplataformas de desarrollo de videojuegos como UDK de Epic Games oCryEngine de CRYtek pero lo que adelanta Unity a las demaacutes es quepuede ser usado tanto para Windows como para Mac Unity viene convarias versiones desde la versioacuten gratuita hasta la versioacuten PRO por 125$al mes Esta uacuteltima nos ofrece unos servicios exclusivos como soportepremium kits de assets o tutoriales Tambieacuten nos ofrece una versioacuten paraempresas que nos permite obtener una configuracioacuten personalizada

21

Figura 31 Versiones de Unity

El motor Unity nos permite desarrollar no solo videojuegos Tambieacuten nospermite desarrollar todo tipo de aplicaciones graacuteficas Tambieacuten se haincluido la opcioacuten de desarrollar aplicaciones moacuteviles para Android o iOSy todas las plataformas maacutes importantes de videojuegos actuales comoMicrosoft Nintendo o Sony

Otra de las ventajas de utilizar Unity es la Unity Store donde encontrarrecursos de todo tipo Muchos de ellos gratuitos Esto hace que podamosrealizar un videojuego sin necesidad de saber modelado 3D

32 Vuforia

De la empresa Qualcomm Vuforia es una de las plataformas de realidadaumentada que maacutes ha credico en el uacuteltimo antildeo Tiene maacutes de 30000desarrolladores en todo el mundo y grandes empresas como Audi Nike o Sonyentre otras ya la han usado

Vuforia es un SDK que permite visualizar imaacutegenes en 3D mediante la caacutemarade nuestro dispositivo De esta manera se mezclan objetos del mundo real ydel virtual Vuforia tambieacuten permite el reconocimiento de texto reconocimientode muacuteltiples targets al mismo tiempo y la deteccioacuten raacutepida de targets entreotras funcionalidades

22

Su arquitectura consta de cuatro elementos baacutesicos que procederemos adescribir a continuacioacuten

Caacutemara Capta la imagen para que posteriormente eacutesta sea procesadapor el Tracker

Base de Datos Almacena una serie de Targets para ser reconocidos porel Tracker Se crea con el Target Manager y puede ser local o en lanube

Target Se utilizan para permitir al Tracker el reconocimiento del mundoreal pueden ser de diferentes tipos como Image Targets o Word Targetentre otros

Tracker Analiza la imagen de la caacutemara y asiacute detecta los objetos delmundo real para buscar coincidencias en su base de datos

23

Figura 32 Diagrama de flujo de Vuforia

Una vez explicados los elementos de la arquitectura de Vuforia vamos aexplicar brevemente los pasos que sigue para el reconocimiento de unaimagen

Primero el dispositivo captura una escena mediente la caacutemara de viacutedeo

La SDK de Vuforia coge una imagen de las que componen el video yconvierte esa imagen a una resolucioacuten que el Tracker pueda manejar

Mediante el Tracker Vuforia analiza la imagen y busca similitudes en losTargets de la base de datos

Por uacuteltimo la aplicacioacuten puede renderizar el objeto 3D en la pantalla deldispositivo moacutevil y de esta manera crear realidad aumentada

24

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 9: Desarrollo de un juego de tablero con Realidad Aumentada

La idea de realidad aumentada en concreto se refiere a la inclusioacuten entiempo real de elementos virtuales dentro del universo fiacutesico Utilizandounas gafas u otros dispositivos especiales una persona puede observarel mundo real con ciertos elementos agregados que aparecen en suslentes o pantalla a modo de informacioacuten digital En la Figura 11 semuestra coacutemo se ve el planeta tierra mediante el dispositivo Hololens deMicrosoft tambieacuten nos permite interactuar con eacutel

Eacutesta puede ser una tecnologiacutea muy interesante ya que nos muestracualquier tipo de imagen o cuerpo virtual a traveacutes de la caacutemara denuestro dispositivo moacutevil esto tiene gran capacidad de atraccioacuten paracualquier tipo de usuario por ser una tecnologiacutea relativamente nueva

12 Objetivos

El objetivo principal de este trabajo es desarrollar una aplicacioacuten paradispositivos Android (pese a que luego se puede trasladar a iOS) basadaen un sistema de turnos En el turno se deberaacute hacer una tirada con un

9

Figura 11 Hololens por Microsoft

dado y se iraacute avanzando por las casillas el nuacutemero sacado en la tirada Eljugador que primero llegue a la uacuteltima casilla seraacute el ganador

Los objetivos seraacuten los siguientes

Podremos seleccionar nuestro personaje desde una pantalladonde mostraremos los distintos targets a la caacutemara

Este personaje seraacute introducido en un mapa con casillas dondepodremos jugar con eacutel

La aplicacioacuten tendraacute una seccioacuten de opciones donde cambiardistintas configuraciones como el sonido o el idioma

12 Estructura de la memoria

Eacutesta memoria se divide en un total de siete capiacutetulos Cada uno centradoen la explicacioacuten de un punto distinto A continuacioacuten explicaremos elcuerpo de cada capiacutetulo

El primer capiacutetulo introduce el motivo de este trabajo asiacute como las ideasbaacutesicas de las cuales sale la idea Otro punto explicaraacute los objetivos delmismo y por uacuteltimo esta pequentildea estructura

10

Capiacutetulo 2

Estado del arte

21 Realidad aumentada

211 Definicioacuten

La realidad aumentada (RA) es el teacutermino que se usa para definir unavisioacuten a traveacutes de un dispositivo tecnoloacutegico directa o indirecta de unentorno fiacutesico del mundo real cuyos elementos se combinan conelementos virtuales para la creacioacuten de una realidad mixta en tiemporeal Consiste en un conjunto de dispositivos que antildeaden informacioacutenvirtual a la informacioacuten fiacutesica ya existente

Eacutesta es la principal diferencia con la realidad virtual puesto que nosustituye la realidad fiacutesica sino que superpone los datos informaacuteticos almundo real Como podemos observar en la Figura 21 la realidad

11

aumentada se encuentra entre el entorno virtual y el real En ella semuestra el continuo de Realidad-Virtual de Milgram (1994)[1]

Figura 21 Continuo de Milgram

212 Teacutecnicas de visualizacioacuten

Existen tres teacutecnicas distintas de visualizacion de RA

Display en la cabeza Con sus siglas en ingleacutes HMD (HeadMounted Display) consta de un dispositivo que actua como unasgafas o un visor que nos colocamos en la cabeza y desde el quepodemos ver los objetos virtuales sobre la visioacuten del mundo real

Display de mano Consta de una pantalla pequentildea baacutesicamenteun smartphone o una tablet donde a traveacutes de la caacutemara eldispositivo informaacutetico superpone los objetos virtuales sobre lasimaacutegenes capturadas

Display espacial La realidad aumentada espacial usa un proyectorpara mostrarnos las imaacutegenes virtuales encima de los objetosreales La principal ventaja de esta teacutecnica es poder utilizarla engrupos en lugar de un usuario exclusivamente

Por uacuteltimo comentar que en este trabajo vamos a centrarnos en lateacutecnica del display de mano usando nuestro dispositivo moacutevil paramostrar la RA

12

213 Historia

Debemos entender que Realidad Virtual y Realidad Aumentada han idopraacutecticamente de la mano

En 1950 Morton Heilig escribioacute sobre un ldquoCine de Experienciardquo quepudiera acompantildear a todos los sentidos de una manera efectivaintegrando al espectador con la actividad en la pantalla Construyoacute unprototipo llamado el Sensorama en 1962 junto con 5 filmes cortos quepermitiacutean aumentar la experiencia del espectador a traveacutes de sussentidos (vista olfato tacto y oiacutedo) Podemos ver una foto delSensorama en la Figura 22

Figura 22 Imagen del sensorama por Morton Heilig

En 1968 Ivan Sutherland con la ayuda de su estudiante Bob Sproullconstruyeron lo que seriacutea ampliamente considerado el primer HeadMounted Display (HMD) para Realidad Virtual y Realidad AumentadaComo podemos ver en la Figura 23 era muy primitivo en teacuterminos deInterfaz de usuario y realismo y el HMD usado por el usuario era tangrande y pesado que debiacutea colgarse del techo y los graacuteficos que haciacuteanal ambiente virtual eran simples ldquomodelos alaacutembricordquo A finales de los 80

13

se popularizoacute el teacutermino Realidad Virtual por Jaron Lanier cuyacompantildeiacutea creoacute los primeros guantes y gafas de Realidad Virtual

Figura 23 Head MountedDisplay por Ivan Sutherland

El teacutermino Realidad Aumentada fue introducido por el investigador TomCaudell en Boeing en 1992 Caudell fue contratado para encontrar unaalternativa a los tediosos tableros de configuracioacuten de cables que utilizanlos trabajadores Salioacute con la idea de gafas especiales y tablerosvirtuales sobre tableros reales geneacutericos es asiacute que se le ocurrioacute queestaba ldquoaumentandordquo la realidad del usuario El teacutermino RealidadAumentada fue dado al puacuteblico en un artiacuteculo en 1992

14

Figura 24 Dispositivo para configuracioacuten de cables

213 Actualidad

En la actualidad la realidad aumentada cada vez se estaacute ganando un sitioen el diacutea a diacutea de las personas El gran avance de las tecnologiacuteas hahecho posible lo que anteriormente solo se podiacutea imaginar SeguacutenTechNavio (wwwtechnaviocom) una empresa de articulos deinvestigacioacuten la realidad aumentada tiene un prometedor futuroAugurando para eacuteste un crecimiento del 132 entre 2014 y 2018

En los uacuteltimos antildeos se han desarrollado muacuteltiples tecnologiacuteas que hansido uacutetiles para el desarrollo de la realidad aumentada Algunos ejemplosson ARToolKit ATOMIC Authoring Tool o Vuforia Este uacuteltimo es elsoftware que usaremos para el desarrollo de nuestra aplicacioacuten

El avance que maacutes ha contribuido a la realidad aumentada es la granexpansioacuten de los dispositivos moacuteviles Con una gran capacidad decoacutemputo una caacutemara y una gran pantalla donde interactuar con lasimaacutegenes que nos proyecta la aplicacioacuten Se convierten en el dispositivoclave donde esta tecnologiacutea puede hacer su gran aparicioacuten

15

Visto que la realidad aumentada teniacutea un gran futuro las empresas estaacutenempezando a interesarse por esta tecnologiacutea por sus interminablesaplicaciones aplicaacutendola asiacute en distintos sectores

Educacioacuten

Podemos incluir en los libros las imaacutegenes necesarias para permitirnosvisualizar objetos en 3D desde un dispositivo moacutevil para asiacute permitirexplorar desde el cuerpo humano hasta los inventos maacutes importantes dela historia Vemos en la Figura 25 un cubo con un target donde podervisualizar el elemento 3D[2] Tambieacuten nos permite escanear obras de artemonumentos o edificios para mostrarnos una pequentildea descripcioacuten ohistoria

Entretenimiento

En el sector del entretenimiento tiene una gran trayectoria ya que en losuacutetlimos antildeos han salido a la luz distintas aplicaciones o dispositivos Losmaacutes significativos los vamos a mencionar a continuacioacuten

Hololens Un dispositivo de la empresa Microsoft que consiste enunas gafas inalaacutembricas que nos proyectan delante de nosotros lasimaacutegenes en 3D y nos permite interactuar con ellas

16

Figura 25 Cubo interactivo

Figura 26 Minecraft sobre Hololens

Cascos de realidad virtual En este apartado tenemos actualmentetres empresas compitiendo por el mercado de la realidad virtualPor una parte tenemos el Oculus Rift de la empresa Oculus VRTambieacuten tenemos el HTC Vive de la empresa HC y por uacuteltimoPlayStation VR de Sony Esto nos muestra el gran mercado quetiene la realidad virtual Estos cascos se basan en poner unapantalla muy cercana a los ojos del usuario y eliminarle todo elcampo de visioacuten De esta manera la inmersioacuten en lo que se estaacuteviendo es mayor

Invizimals Videojuego desarrollado por Novarama para la consolaPSP Se puede decir que ha sido el juego de realidad aumentadaque maacutes se ha expandido en el momento en que salioacute El juegoincluye unas tarjetas donde enfocando la caacutemara podremos vernuestras mascotas Invizimals y podemos interactuar con ellas

PokemonGo Es un juego de realidad aumentada de la empresaNiantic que ha revolucionado el mundo de los juegos de losdispositivos moacuteviles haciendo que miles de personas salgan a lacalle a capturar pokemon mediante su smartphone No hace ni tresmeses que ha salido y cuenta con cuatro millones de descargassolo en PlayStore

17

Figura 27 Pokemon GO

Gafas de RA Un ejemplo de estas son las Google Glass de laempresa Google Son unas gafas de realidad aumentadadestinadas a mostrarnos la informacioacuten de nuestro teleacutefono moacutevilsin necesidad de utilizar las manos tambieacuten podremos navegarpor internet por medio de oacuterdenes de voz

Psicologiacutea

El tema de la superacioacuten de traumas puede ser a veces un temadelicado un proceso largo y costoso Pero la realidad aumentada unavez maacutes son sorprende con sus aplicaciones esta vez en el campo de lapsicologiacutea Al permitir mostrar cuerpos digitales en un entorno realpodemos por ejemplo visualizar un miedo por ejemplo a las cucarachaso arantildeas en un entorno real y asiacute controlar como el paciente seacostumbra a su presencia controlando el nuacutemero y el comportamientode eacutestas Como ejemplo se hizo un estudio en la Universidad Politecnicade Valencia en el que se sometiacutea a diversas personas a la visualizacioacutende sus fobias en un entorno controlado [3]

18

Figura 28 Uso de la RA con fines terapeacuteuticos

Otro ejemplo de fobia que podemos superar mediante la realidadaumentada es la fobia a las alturas Mediante RA podemos hacer que unpaciente tenga la sensacioacuten de estar en un sitio alto o con caiacuteda sinninguacuten tipo de peligro[4]

Sector Industrial

Otro sector en el que la realidad aumentada ha logrado hacerse ver esen el sector industrial Un ejemplo son las gafas Moverio Pro BT-2000 dela empresa Epson donde los usuarios pueden ver lo que estaacuten viendootros trabajadores para asi mejorar la comunicacioacuten y permitir apoyar laformacioacuten de nuevos trabajadores

22 PropuestaLa finalidad de este trabajo es realizar un juego de realidad aumentadadonde por medio de unas imaacutegenes reales podremos seleccionar elpersonaje que queremos jugar Para luego introducirlo en un mapa concasillas en el que tiraremos un dado y avanzaremos casillas con nuestropersonaje Nos enfrentaremos a otro personaje controlado por la IA Elprimero que llegue a la uacuteltima casilla seraacute el vencedor

19

20

Capiacutetulo 3

Herramientas

31 Unity 3D

Unity 3D es una herramienta para el desarrollo de videojuegosmultiplataforma de la empresa Unity Technologies Existen otrasplataformas de desarrollo de videojuegos como UDK de Epic Games oCryEngine de CRYtek pero lo que adelanta Unity a las demaacutes es quepuede ser usado tanto para Windows como para Mac Unity viene convarias versiones desde la versioacuten gratuita hasta la versioacuten PRO por 125$al mes Esta uacuteltima nos ofrece unos servicios exclusivos como soportepremium kits de assets o tutoriales Tambieacuten nos ofrece una versioacuten paraempresas que nos permite obtener una configuracioacuten personalizada

21

Figura 31 Versiones de Unity

El motor Unity nos permite desarrollar no solo videojuegos Tambieacuten nospermite desarrollar todo tipo de aplicaciones graacuteficas Tambieacuten se haincluido la opcioacuten de desarrollar aplicaciones moacuteviles para Android o iOSy todas las plataformas maacutes importantes de videojuegos actuales comoMicrosoft Nintendo o Sony

Otra de las ventajas de utilizar Unity es la Unity Store donde encontrarrecursos de todo tipo Muchos de ellos gratuitos Esto hace que podamosrealizar un videojuego sin necesidad de saber modelado 3D

32 Vuforia

De la empresa Qualcomm Vuforia es una de las plataformas de realidadaumentada que maacutes ha credico en el uacuteltimo antildeo Tiene maacutes de 30000desarrolladores en todo el mundo y grandes empresas como Audi Nike o Sonyentre otras ya la han usado

Vuforia es un SDK que permite visualizar imaacutegenes en 3D mediante la caacutemarade nuestro dispositivo De esta manera se mezclan objetos del mundo real ydel virtual Vuforia tambieacuten permite el reconocimiento de texto reconocimientode muacuteltiples targets al mismo tiempo y la deteccioacuten raacutepida de targets entreotras funcionalidades

22

Su arquitectura consta de cuatro elementos baacutesicos que procederemos adescribir a continuacioacuten

Caacutemara Capta la imagen para que posteriormente eacutesta sea procesadapor el Tracker

Base de Datos Almacena una serie de Targets para ser reconocidos porel Tracker Se crea con el Target Manager y puede ser local o en lanube

Target Se utilizan para permitir al Tracker el reconocimiento del mundoreal pueden ser de diferentes tipos como Image Targets o Word Targetentre otros

Tracker Analiza la imagen de la caacutemara y asiacute detecta los objetos delmundo real para buscar coincidencias en su base de datos

23

Figura 32 Diagrama de flujo de Vuforia

Una vez explicados los elementos de la arquitectura de Vuforia vamos aexplicar brevemente los pasos que sigue para el reconocimiento de unaimagen

Primero el dispositivo captura una escena mediente la caacutemara de viacutedeo

La SDK de Vuforia coge una imagen de las que componen el video yconvierte esa imagen a una resolucioacuten que el Tracker pueda manejar

Mediante el Tracker Vuforia analiza la imagen y busca similitudes en losTargets de la base de datos

Por uacuteltimo la aplicacioacuten puede renderizar el objeto 3D en la pantalla deldispositivo moacutevil y de esta manera crear realidad aumentada

24

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 10: Desarrollo de un juego de tablero con Realidad Aumentada

dado y se iraacute avanzando por las casillas el nuacutemero sacado en la tirada Eljugador que primero llegue a la uacuteltima casilla seraacute el ganador

Los objetivos seraacuten los siguientes

Podremos seleccionar nuestro personaje desde una pantalladonde mostraremos los distintos targets a la caacutemara

Este personaje seraacute introducido en un mapa con casillas dondepodremos jugar con eacutel

La aplicacioacuten tendraacute una seccioacuten de opciones donde cambiardistintas configuraciones como el sonido o el idioma

12 Estructura de la memoria

Eacutesta memoria se divide en un total de siete capiacutetulos Cada uno centradoen la explicacioacuten de un punto distinto A continuacioacuten explicaremos elcuerpo de cada capiacutetulo

El primer capiacutetulo introduce el motivo de este trabajo asiacute como las ideasbaacutesicas de las cuales sale la idea Otro punto explicaraacute los objetivos delmismo y por uacuteltimo esta pequentildea estructura

10

Capiacutetulo 2

Estado del arte

21 Realidad aumentada

211 Definicioacuten

La realidad aumentada (RA) es el teacutermino que se usa para definir unavisioacuten a traveacutes de un dispositivo tecnoloacutegico directa o indirecta de unentorno fiacutesico del mundo real cuyos elementos se combinan conelementos virtuales para la creacioacuten de una realidad mixta en tiemporeal Consiste en un conjunto de dispositivos que antildeaden informacioacutenvirtual a la informacioacuten fiacutesica ya existente

Eacutesta es la principal diferencia con la realidad virtual puesto que nosustituye la realidad fiacutesica sino que superpone los datos informaacuteticos almundo real Como podemos observar en la Figura 21 la realidad

11

aumentada se encuentra entre el entorno virtual y el real En ella semuestra el continuo de Realidad-Virtual de Milgram (1994)[1]

Figura 21 Continuo de Milgram

212 Teacutecnicas de visualizacioacuten

Existen tres teacutecnicas distintas de visualizacion de RA

Display en la cabeza Con sus siglas en ingleacutes HMD (HeadMounted Display) consta de un dispositivo que actua como unasgafas o un visor que nos colocamos en la cabeza y desde el quepodemos ver los objetos virtuales sobre la visioacuten del mundo real

Display de mano Consta de una pantalla pequentildea baacutesicamenteun smartphone o una tablet donde a traveacutes de la caacutemara eldispositivo informaacutetico superpone los objetos virtuales sobre lasimaacutegenes capturadas

Display espacial La realidad aumentada espacial usa un proyectorpara mostrarnos las imaacutegenes virtuales encima de los objetosreales La principal ventaja de esta teacutecnica es poder utilizarla engrupos en lugar de un usuario exclusivamente

Por uacuteltimo comentar que en este trabajo vamos a centrarnos en lateacutecnica del display de mano usando nuestro dispositivo moacutevil paramostrar la RA

12

213 Historia

Debemos entender que Realidad Virtual y Realidad Aumentada han idopraacutecticamente de la mano

En 1950 Morton Heilig escribioacute sobre un ldquoCine de Experienciardquo quepudiera acompantildear a todos los sentidos de una manera efectivaintegrando al espectador con la actividad en la pantalla Construyoacute unprototipo llamado el Sensorama en 1962 junto con 5 filmes cortos quepermitiacutean aumentar la experiencia del espectador a traveacutes de sussentidos (vista olfato tacto y oiacutedo) Podemos ver una foto delSensorama en la Figura 22

Figura 22 Imagen del sensorama por Morton Heilig

En 1968 Ivan Sutherland con la ayuda de su estudiante Bob Sproullconstruyeron lo que seriacutea ampliamente considerado el primer HeadMounted Display (HMD) para Realidad Virtual y Realidad AumentadaComo podemos ver en la Figura 23 era muy primitivo en teacuterminos deInterfaz de usuario y realismo y el HMD usado por el usuario era tangrande y pesado que debiacutea colgarse del techo y los graacuteficos que haciacuteanal ambiente virtual eran simples ldquomodelos alaacutembricordquo A finales de los 80

13

se popularizoacute el teacutermino Realidad Virtual por Jaron Lanier cuyacompantildeiacutea creoacute los primeros guantes y gafas de Realidad Virtual

Figura 23 Head MountedDisplay por Ivan Sutherland

El teacutermino Realidad Aumentada fue introducido por el investigador TomCaudell en Boeing en 1992 Caudell fue contratado para encontrar unaalternativa a los tediosos tableros de configuracioacuten de cables que utilizanlos trabajadores Salioacute con la idea de gafas especiales y tablerosvirtuales sobre tableros reales geneacutericos es asiacute que se le ocurrioacute queestaba ldquoaumentandordquo la realidad del usuario El teacutermino RealidadAumentada fue dado al puacuteblico en un artiacuteculo en 1992

14

Figura 24 Dispositivo para configuracioacuten de cables

213 Actualidad

En la actualidad la realidad aumentada cada vez se estaacute ganando un sitioen el diacutea a diacutea de las personas El gran avance de las tecnologiacuteas hahecho posible lo que anteriormente solo se podiacutea imaginar SeguacutenTechNavio (wwwtechnaviocom) una empresa de articulos deinvestigacioacuten la realidad aumentada tiene un prometedor futuroAugurando para eacuteste un crecimiento del 132 entre 2014 y 2018

En los uacuteltimos antildeos se han desarrollado muacuteltiples tecnologiacuteas que hansido uacutetiles para el desarrollo de la realidad aumentada Algunos ejemplosson ARToolKit ATOMIC Authoring Tool o Vuforia Este uacuteltimo es elsoftware que usaremos para el desarrollo de nuestra aplicacioacuten

El avance que maacutes ha contribuido a la realidad aumentada es la granexpansioacuten de los dispositivos moacuteviles Con una gran capacidad decoacutemputo una caacutemara y una gran pantalla donde interactuar con lasimaacutegenes que nos proyecta la aplicacioacuten Se convierten en el dispositivoclave donde esta tecnologiacutea puede hacer su gran aparicioacuten

15

Visto que la realidad aumentada teniacutea un gran futuro las empresas estaacutenempezando a interesarse por esta tecnologiacutea por sus interminablesaplicaciones aplicaacutendola asiacute en distintos sectores

Educacioacuten

Podemos incluir en los libros las imaacutegenes necesarias para permitirnosvisualizar objetos en 3D desde un dispositivo moacutevil para asiacute permitirexplorar desde el cuerpo humano hasta los inventos maacutes importantes dela historia Vemos en la Figura 25 un cubo con un target donde podervisualizar el elemento 3D[2] Tambieacuten nos permite escanear obras de artemonumentos o edificios para mostrarnos una pequentildea descripcioacuten ohistoria

Entretenimiento

En el sector del entretenimiento tiene una gran trayectoria ya que en losuacutetlimos antildeos han salido a la luz distintas aplicaciones o dispositivos Losmaacutes significativos los vamos a mencionar a continuacioacuten

Hololens Un dispositivo de la empresa Microsoft que consiste enunas gafas inalaacutembricas que nos proyectan delante de nosotros lasimaacutegenes en 3D y nos permite interactuar con ellas

16

Figura 25 Cubo interactivo

Figura 26 Minecraft sobre Hololens

Cascos de realidad virtual En este apartado tenemos actualmentetres empresas compitiendo por el mercado de la realidad virtualPor una parte tenemos el Oculus Rift de la empresa Oculus VRTambieacuten tenemos el HTC Vive de la empresa HC y por uacuteltimoPlayStation VR de Sony Esto nos muestra el gran mercado quetiene la realidad virtual Estos cascos se basan en poner unapantalla muy cercana a los ojos del usuario y eliminarle todo elcampo de visioacuten De esta manera la inmersioacuten en lo que se estaacuteviendo es mayor

Invizimals Videojuego desarrollado por Novarama para la consolaPSP Se puede decir que ha sido el juego de realidad aumentadaque maacutes se ha expandido en el momento en que salioacute El juegoincluye unas tarjetas donde enfocando la caacutemara podremos vernuestras mascotas Invizimals y podemos interactuar con ellas

PokemonGo Es un juego de realidad aumentada de la empresaNiantic que ha revolucionado el mundo de los juegos de losdispositivos moacuteviles haciendo que miles de personas salgan a lacalle a capturar pokemon mediante su smartphone No hace ni tresmeses que ha salido y cuenta con cuatro millones de descargassolo en PlayStore

17

Figura 27 Pokemon GO

Gafas de RA Un ejemplo de estas son las Google Glass de laempresa Google Son unas gafas de realidad aumentadadestinadas a mostrarnos la informacioacuten de nuestro teleacutefono moacutevilsin necesidad de utilizar las manos tambieacuten podremos navegarpor internet por medio de oacuterdenes de voz

Psicologiacutea

El tema de la superacioacuten de traumas puede ser a veces un temadelicado un proceso largo y costoso Pero la realidad aumentada unavez maacutes son sorprende con sus aplicaciones esta vez en el campo de lapsicologiacutea Al permitir mostrar cuerpos digitales en un entorno realpodemos por ejemplo visualizar un miedo por ejemplo a las cucarachaso arantildeas en un entorno real y asiacute controlar como el paciente seacostumbra a su presencia controlando el nuacutemero y el comportamientode eacutestas Como ejemplo se hizo un estudio en la Universidad Politecnicade Valencia en el que se sometiacutea a diversas personas a la visualizacioacutende sus fobias en un entorno controlado [3]

18

Figura 28 Uso de la RA con fines terapeacuteuticos

Otro ejemplo de fobia que podemos superar mediante la realidadaumentada es la fobia a las alturas Mediante RA podemos hacer que unpaciente tenga la sensacioacuten de estar en un sitio alto o con caiacuteda sinninguacuten tipo de peligro[4]

Sector Industrial

Otro sector en el que la realidad aumentada ha logrado hacerse ver esen el sector industrial Un ejemplo son las gafas Moverio Pro BT-2000 dela empresa Epson donde los usuarios pueden ver lo que estaacuten viendootros trabajadores para asi mejorar la comunicacioacuten y permitir apoyar laformacioacuten de nuevos trabajadores

22 PropuestaLa finalidad de este trabajo es realizar un juego de realidad aumentadadonde por medio de unas imaacutegenes reales podremos seleccionar elpersonaje que queremos jugar Para luego introducirlo en un mapa concasillas en el que tiraremos un dado y avanzaremos casillas con nuestropersonaje Nos enfrentaremos a otro personaje controlado por la IA Elprimero que llegue a la uacuteltima casilla seraacute el vencedor

19

20

Capiacutetulo 3

Herramientas

31 Unity 3D

Unity 3D es una herramienta para el desarrollo de videojuegosmultiplataforma de la empresa Unity Technologies Existen otrasplataformas de desarrollo de videojuegos como UDK de Epic Games oCryEngine de CRYtek pero lo que adelanta Unity a las demaacutes es quepuede ser usado tanto para Windows como para Mac Unity viene convarias versiones desde la versioacuten gratuita hasta la versioacuten PRO por 125$al mes Esta uacuteltima nos ofrece unos servicios exclusivos como soportepremium kits de assets o tutoriales Tambieacuten nos ofrece una versioacuten paraempresas que nos permite obtener una configuracioacuten personalizada

21

Figura 31 Versiones de Unity

El motor Unity nos permite desarrollar no solo videojuegos Tambieacuten nospermite desarrollar todo tipo de aplicaciones graacuteficas Tambieacuten se haincluido la opcioacuten de desarrollar aplicaciones moacuteviles para Android o iOSy todas las plataformas maacutes importantes de videojuegos actuales comoMicrosoft Nintendo o Sony

Otra de las ventajas de utilizar Unity es la Unity Store donde encontrarrecursos de todo tipo Muchos de ellos gratuitos Esto hace que podamosrealizar un videojuego sin necesidad de saber modelado 3D

32 Vuforia

De la empresa Qualcomm Vuforia es una de las plataformas de realidadaumentada que maacutes ha credico en el uacuteltimo antildeo Tiene maacutes de 30000desarrolladores en todo el mundo y grandes empresas como Audi Nike o Sonyentre otras ya la han usado

Vuforia es un SDK que permite visualizar imaacutegenes en 3D mediante la caacutemarade nuestro dispositivo De esta manera se mezclan objetos del mundo real ydel virtual Vuforia tambieacuten permite el reconocimiento de texto reconocimientode muacuteltiples targets al mismo tiempo y la deteccioacuten raacutepida de targets entreotras funcionalidades

22

Su arquitectura consta de cuatro elementos baacutesicos que procederemos adescribir a continuacioacuten

Caacutemara Capta la imagen para que posteriormente eacutesta sea procesadapor el Tracker

Base de Datos Almacena una serie de Targets para ser reconocidos porel Tracker Se crea con el Target Manager y puede ser local o en lanube

Target Se utilizan para permitir al Tracker el reconocimiento del mundoreal pueden ser de diferentes tipos como Image Targets o Word Targetentre otros

Tracker Analiza la imagen de la caacutemara y asiacute detecta los objetos delmundo real para buscar coincidencias en su base de datos

23

Figura 32 Diagrama de flujo de Vuforia

Una vez explicados los elementos de la arquitectura de Vuforia vamos aexplicar brevemente los pasos que sigue para el reconocimiento de unaimagen

Primero el dispositivo captura una escena mediente la caacutemara de viacutedeo

La SDK de Vuforia coge una imagen de las que componen el video yconvierte esa imagen a una resolucioacuten que el Tracker pueda manejar

Mediante el Tracker Vuforia analiza la imagen y busca similitudes en losTargets de la base de datos

Por uacuteltimo la aplicacioacuten puede renderizar el objeto 3D en la pantalla deldispositivo moacutevil y de esta manera crear realidad aumentada

24

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 11: Desarrollo de un juego de tablero con Realidad Aumentada

Capiacutetulo 2

Estado del arte

21 Realidad aumentada

211 Definicioacuten

La realidad aumentada (RA) es el teacutermino que se usa para definir unavisioacuten a traveacutes de un dispositivo tecnoloacutegico directa o indirecta de unentorno fiacutesico del mundo real cuyos elementos se combinan conelementos virtuales para la creacioacuten de una realidad mixta en tiemporeal Consiste en un conjunto de dispositivos que antildeaden informacioacutenvirtual a la informacioacuten fiacutesica ya existente

Eacutesta es la principal diferencia con la realidad virtual puesto que nosustituye la realidad fiacutesica sino que superpone los datos informaacuteticos almundo real Como podemos observar en la Figura 21 la realidad

11

aumentada se encuentra entre el entorno virtual y el real En ella semuestra el continuo de Realidad-Virtual de Milgram (1994)[1]

Figura 21 Continuo de Milgram

212 Teacutecnicas de visualizacioacuten

Existen tres teacutecnicas distintas de visualizacion de RA

Display en la cabeza Con sus siglas en ingleacutes HMD (HeadMounted Display) consta de un dispositivo que actua como unasgafas o un visor que nos colocamos en la cabeza y desde el quepodemos ver los objetos virtuales sobre la visioacuten del mundo real

Display de mano Consta de una pantalla pequentildea baacutesicamenteun smartphone o una tablet donde a traveacutes de la caacutemara eldispositivo informaacutetico superpone los objetos virtuales sobre lasimaacutegenes capturadas

Display espacial La realidad aumentada espacial usa un proyectorpara mostrarnos las imaacutegenes virtuales encima de los objetosreales La principal ventaja de esta teacutecnica es poder utilizarla engrupos en lugar de un usuario exclusivamente

Por uacuteltimo comentar que en este trabajo vamos a centrarnos en lateacutecnica del display de mano usando nuestro dispositivo moacutevil paramostrar la RA

12

213 Historia

Debemos entender que Realidad Virtual y Realidad Aumentada han idopraacutecticamente de la mano

En 1950 Morton Heilig escribioacute sobre un ldquoCine de Experienciardquo quepudiera acompantildear a todos los sentidos de una manera efectivaintegrando al espectador con la actividad en la pantalla Construyoacute unprototipo llamado el Sensorama en 1962 junto con 5 filmes cortos quepermitiacutean aumentar la experiencia del espectador a traveacutes de sussentidos (vista olfato tacto y oiacutedo) Podemos ver una foto delSensorama en la Figura 22

Figura 22 Imagen del sensorama por Morton Heilig

En 1968 Ivan Sutherland con la ayuda de su estudiante Bob Sproullconstruyeron lo que seriacutea ampliamente considerado el primer HeadMounted Display (HMD) para Realidad Virtual y Realidad AumentadaComo podemos ver en la Figura 23 era muy primitivo en teacuterminos deInterfaz de usuario y realismo y el HMD usado por el usuario era tangrande y pesado que debiacutea colgarse del techo y los graacuteficos que haciacuteanal ambiente virtual eran simples ldquomodelos alaacutembricordquo A finales de los 80

13

se popularizoacute el teacutermino Realidad Virtual por Jaron Lanier cuyacompantildeiacutea creoacute los primeros guantes y gafas de Realidad Virtual

Figura 23 Head MountedDisplay por Ivan Sutherland

El teacutermino Realidad Aumentada fue introducido por el investigador TomCaudell en Boeing en 1992 Caudell fue contratado para encontrar unaalternativa a los tediosos tableros de configuracioacuten de cables que utilizanlos trabajadores Salioacute con la idea de gafas especiales y tablerosvirtuales sobre tableros reales geneacutericos es asiacute que se le ocurrioacute queestaba ldquoaumentandordquo la realidad del usuario El teacutermino RealidadAumentada fue dado al puacuteblico en un artiacuteculo en 1992

14

Figura 24 Dispositivo para configuracioacuten de cables

213 Actualidad

En la actualidad la realidad aumentada cada vez se estaacute ganando un sitioen el diacutea a diacutea de las personas El gran avance de las tecnologiacuteas hahecho posible lo que anteriormente solo se podiacutea imaginar SeguacutenTechNavio (wwwtechnaviocom) una empresa de articulos deinvestigacioacuten la realidad aumentada tiene un prometedor futuroAugurando para eacuteste un crecimiento del 132 entre 2014 y 2018

En los uacuteltimos antildeos se han desarrollado muacuteltiples tecnologiacuteas que hansido uacutetiles para el desarrollo de la realidad aumentada Algunos ejemplosson ARToolKit ATOMIC Authoring Tool o Vuforia Este uacuteltimo es elsoftware que usaremos para el desarrollo de nuestra aplicacioacuten

El avance que maacutes ha contribuido a la realidad aumentada es la granexpansioacuten de los dispositivos moacuteviles Con una gran capacidad decoacutemputo una caacutemara y una gran pantalla donde interactuar con lasimaacutegenes que nos proyecta la aplicacioacuten Se convierten en el dispositivoclave donde esta tecnologiacutea puede hacer su gran aparicioacuten

15

Visto que la realidad aumentada teniacutea un gran futuro las empresas estaacutenempezando a interesarse por esta tecnologiacutea por sus interminablesaplicaciones aplicaacutendola asiacute en distintos sectores

Educacioacuten

Podemos incluir en los libros las imaacutegenes necesarias para permitirnosvisualizar objetos en 3D desde un dispositivo moacutevil para asiacute permitirexplorar desde el cuerpo humano hasta los inventos maacutes importantes dela historia Vemos en la Figura 25 un cubo con un target donde podervisualizar el elemento 3D[2] Tambieacuten nos permite escanear obras de artemonumentos o edificios para mostrarnos una pequentildea descripcioacuten ohistoria

Entretenimiento

En el sector del entretenimiento tiene una gran trayectoria ya que en losuacutetlimos antildeos han salido a la luz distintas aplicaciones o dispositivos Losmaacutes significativos los vamos a mencionar a continuacioacuten

Hololens Un dispositivo de la empresa Microsoft que consiste enunas gafas inalaacutembricas que nos proyectan delante de nosotros lasimaacutegenes en 3D y nos permite interactuar con ellas

16

Figura 25 Cubo interactivo

Figura 26 Minecraft sobre Hololens

Cascos de realidad virtual En este apartado tenemos actualmentetres empresas compitiendo por el mercado de la realidad virtualPor una parte tenemos el Oculus Rift de la empresa Oculus VRTambieacuten tenemos el HTC Vive de la empresa HC y por uacuteltimoPlayStation VR de Sony Esto nos muestra el gran mercado quetiene la realidad virtual Estos cascos se basan en poner unapantalla muy cercana a los ojos del usuario y eliminarle todo elcampo de visioacuten De esta manera la inmersioacuten en lo que se estaacuteviendo es mayor

Invizimals Videojuego desarrollado por Novarama para la consolaPSP Se puede decir que ha sido el juego de realidad aumentadaque maacutes se ha expandido en el momento en que salioacute El juegoincluye unas tarjetas donde enfocando la caacutemara podremos vernuestras mascotas Invizimals y podemos interactuar con ellas

PokemonGo Es un juego de realidad aumentada de la empresaNiantic que ha revolucionado el mundo de los juegos de losdispositivos moacuteviles haciendo que miles de personas salgan a lacalle a capturar pokemon mediante su smartphone No hace ni tresmeses que ha salido y cuenta con cuatro millones de descargassolo en PlayStore

17

Figura 27 Pokemon GO

Gafas de RA Un ejemplo de estas son las Google Glass de laempresa Google Son unas gafas de realidad aumentadadestinadas a mostrarnos la informacioacuten de nuestro teleacutefono moacutevilsin necesidad de utilizar las manos tambieacuten podremos navegarpor internet por medio de oacuterdenes de voz

Psicologiacutea

El tema de la superacioacuten de traumas puede ser a veces un temadelicado un proceso largo y costoso Pero la realidad aumentada unavez maacutes son sorprende con sus aplicaciones esta vez en el campo de lapsicologiacutea Al permitir mostrar cuerpos digitales en un entorno realpodemos por ejemplo visualizar un miedo por ejemplo a las cucarachaso arantildeas en un entorno real y asiacute controlar como el paciente seacostumbra a su presencia controlando el nuacutemero y el comportamientode eacutestas Como ejemplo se hizo un estudio en la Universidad Politecnicade Valencia en el que se sometiacutea a diversas personas a la visualizacioacutende sus fobias en un entorno controlado [3]

18

Figura 28 Uso de la RA con fines terapeacuteuticos

Otro ejemplo de fobia que podemos superar mediante la realidadaumentada es la fobia a las alturas Mediante RA podemos hacer que unpaciente tenga la sensacioacuten de estar en un sitio alto o con caiacuteda sinninguacuten tipo de peligro[4]

Sector Industrial

Otro sector en el que la realidad aumentada ha logrado hacerse ver esen el sector industrial Un ejemplo son las gafas Moverio Pro BT-2000 dela empresa Epson donde los usuarios pueden ver lo que estaacuten viendootros trabajadores para asi mejorar la comunicacioacuten y permitir apoyar laformacioacuten de nuevos trabajadores

22 PropuestaLa finalidad de este trabajo es realizar un juego de realidad aumentadadonde por medio de unas imaacutegenes reales podremos seleccionar elpersonaje que queremos jugar Para luego introducirlo en un mapa concasillas en el que tiraremos un dado y avanzaremos casillas con nuestropersonaje Nos enfrentaremos a otro personaje controlado por la IA Elprimero que llegue a la uacuteltima casilla seraacute el vencedor

19

20

Capiacutetulo 3

Herramientas

31 Unity 3D

Unity 3D es una herramienta para el desarrollo de videojuegosmultiplataforma de la empresa Unity Technologies Existen otrasplataformas de desarrollo de videojuegos como UDK de Epic Games oCryEngine de CRYtek pero lo que adelanta Unity a las demaacutes es quepuede ser usado tanto para Windows como para Mac Unity viene convarias versiones desde la versioacuten gratuita hasta la versioacuten PRO por 125$al mes Esta uacuteltima nos ofrece unos servicios exclusivos como soportepremium kits de assets o tutoriales Tambieacuten nos ofrece una versioacuten paraempresas que nos permite obtener una configuracioacuten personalizada

21

Figura 31 Versiones de Unity

El motor Unity nos permite desarrollar no solo videojuegos Tambieacuten nospermite desarrollar todo tipo de aplicaciones graacuteficas Tambieacuten se haincluido la opcioacuten de desarrollar aplicaciones moacuteviles para Android o iOSy todas las plataformas maacutes importantes de videojuegos actuales comoMicrosoft Nintendo o Sony

Otra de las ventajas de utilizar Unity es la Unity Store donde encontrarrecursos de todo tipo Muchos de ellos gratuitos Esto hace que podamosrealizar un videojuego sin necesidad de saber modelado 3D

32 Vuforia

De la empresa Qualcomm Vuforia es una de las plataformas de realidadaumentada que maacutes ha credico en el uacuteltimo antildeo Tiene maacutes de 30000desarrolladores en todo el mundo y grandes empresas como Audi Nike o Sonyentre otras ya la han usado

Vuforia es un SDK que permite visualizar imaacutegenes en 3D mediante la caacutemarade nuestro dispositivo De esta manera se mezclan objetos del mundo real ydel virtual Vuforia tambieacuten permite el reconocimiento de texto reconocimientode muacuteltiples targets al mismo tiempo y la deteccioacuten raacutepida de targets entreotras funcionalidades

22

Su arquitectura consta de cuatro elementos baacutesicos que procederemos adescribir a continuacioacuten

Caacutemara Capta la imagen para que posteriormente eacutesta sea procesadapor el Tracker

Base de Datos Almacena una serie de Targets para ser reconocidos porel Tracker Se crea con el Target Manager y puede ser local o en lanube

Target Se utilizan para permitir al Tracker el reconocimiento del mundoreal pueden ser de diferentes tipos como Image Targets o Word Targetentre otros

Tracker Analiza la imagen de la caacutemara y asiacute detecta los objetos delmundo real para buscar coincidencias en su base de datos

23

Figura 32 Diagrama de flujo de Vuforia

Una vez explicados los elementos de la arquitectura de Vuforia vamos aexplicar brevemente los pasos que sigue para el reconocimiento de unaimagen

Primero el dispositivo captura una escena mediente la caacutemara de viacutedeo

La SDK de Vuforia coge una imagen de las que componen el video yconvierte esa imagen a una resolucioacuten que el Tracker pueda manejar

Mediante el Tracker Vuforia analiza la imagen y busca similitudes en losTargets de la base de datos

Por uacuteltimo la aplicacioacuten puede renderizar el objeto 3D en la pantalla deldispositivo moacutevil y de esta manera crear realidad aumentada

24

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 12: Desarrollo de un juego de tablero con Realidad Aumentada

aumentada se encuentra entre el entorno virtual y el real En ella semuestra el continuo de Realidad-Virtual de Milgram (1994)[1]

Figura 21 Continuo de Milgram

212 Teacutecnicas de visualizacioacuten

Existen tres teacutecnicas distintas de visualizacion de RA

Display en la cabeza Con sus siglas en ingleacutes HMD (HeadMounted Display) consta de un dispositivo que actua como unasgafas o un visor que nos colocamos en la cabeza y desde el quepodemos ver los objetos virtuales sobre la visioacuten del mundo real

Display de mano Consta de una pantalla pequentildea baacutesicamenteun smartphone o una tablet donde a traveacutes de la caacutemara eldispositivo informaacutetico superpone los objetos virtuales sobre lasimaacutegenes capturadas

Display espacial La realidad aumentada espacial usa un proyectorpara mostrarnos las imaacutegenes virtuales encima de los objetosreales La principal ventaja de esta teacutecnica es poder utilizarla engrupos en lugar de un usuario exclusivamente

Por uacuteltimo comentar que en este trabajo vamos a centrarnos en lateacutecnica del display de mano usando nuestro dispositivo moacutevil paramostrar la RA

12

213 Historia

Debemos entender que Realidad Virtual y Realidad Aumentada han idopraacutecticamente de la mano

En 1950 Morton Heilig escribioacute sobre un ldquoCine de Experienciardquo quepudiera acompantildear a todos los sentidos de una manera efectivaintegrando al espectador con la actividad en la pantalla Construyoacute unprototipo llamado el Sensorama en 1962 junto con 5 filmes cortos quepermitiacutean aumentar la experiencia del espectador a traveacutes de sussentidos (vista olfato tacto y oiacutedo) Podemos ver una foto delSensorama en la Figura 22

Figura 22 Imagen del sensorama por Morton Heilig

En 1968 Ivan Sutherland con la ayuda de su estudiante Bob Sproullconstruyeron lo que seriacutea ampliamente considerado el primer HeadMounted Display (HMD) para Realidad Virtual y Realidad AumentadaComo podemos ver en la Figura 23 era muy primitivo en teacuterminos deInterfaz de usuario y realismo y el HMD usado por el usuario era tangrande y pesado que debiacutea colgarse del techo y los graacuteficos que haciacuteanal ambiente virtual eran simples ldquomodelos alaacutembricordquo A finales de los 80

13

se popularizoacute el teacutermino Realidad Virtual por Jaron Lanier cuyacompantildeiacutea creoacute los primeros guantes y gafas de Realidad Virtual

Figura 23 Head MountedDisplay por Ivan Sutherland

El teacutermino Realidad Aumentada fue introducido por el investigador TomCaudell en Boeing en 1992 Caudell fue contratado para encontrar unaalternativa a los tediosos tableros de configuracioacuten de cables que utilizanlos trabajadores Salioacute con la idea de gafas especiales y tablerosvirtuales sobre tableros reales geneacutericos es asiacute que se le ocurrioacute queestaba ldquoaumentandordquo la realidad del usuario El teacutermino RealidadAumentada fue dado al puacuteblico en un artiacuteculo en 1992

14

Figura 24 Dispositivo para configuracioacuten de cables

213 Actualidad

En la actualidad la realidad aumentada cada vez se estaacute ganando un sitioen el diacutea a diacutea de las personas El gran avance de las tecnologiacuteas hahecho posible lo que anteriormente solo se podiacutea imaginar SeguacutenTechNavio (wwwtechnaviocom) una empresa de articulos deinvestigacioacuten la realidad aumentada tiene un prometedor futuroAugurando para eacuteste un crecimiento del 132 entre 2014 y 2018

En los uacuteltimos antildeos se han desarrollado muacuteltiples tecnologiacuteas que hansido uacutetiles para el desarrollo de la realidad aumentada Algunos ejemplosson ARToolKit ATOMIC Authoring Tool o Vuforia Este uacuteltimo es elsoftware que usaremos para el desarrollo de nuestra aplicacioacuten

El avance que maacutes ha contribuido a la realidad aumentada es la granexpansioacuten de los dispositivos moacuteviles Con una gran capacidad decoacutemputo una caacutemara y una gran pantalla donde interactuar con lasimaacutegenes que nos proyecta la aplicacioacuten Se convierten en el dispositivoclave donde esta tecnologiacutea puede hacer su gran aparicioacuten

15

Visto que la realidad aumentada teniacutea un gran futuro las empresas estaacutenempezando a interesarse por esta tecnologiacutea por sus interminablesaplicaciones aplicaacutendola asiacute en distintos sectores

Educacioacuten

Podemos incluir en los libros las imaacutegenes necesarias para permitirnosvisualizar objetos en 3D desde un dispositivo moacutevil para asiacute permitirexplorar desde el cuerpo humano hasta los inventos maacutes importantes dela historia Vemos en la Figura 25 un cubo con un target donde podervisualizar el elemento 3D[2] Tambieacuten nos permite escanear obras de artemonumentos o edificios para mostrarnos una pequentildea descripcioacuten ohistoria

Entretenimiento

En el sector del entretenimiento tiene una gran trayectoria ya que en losuacutetlimos antildeos han salido a la luz distintas aplicaciones o dispositivos Losmaacutes significativos los vamos a mencionar a continuacioacuten

Hololens Un dispositivo de la empresa Microsoft que consiste enunas gafas inalaacutembricas que nos proyectan delante de nosotros lasimaacutegenes en 3D y nos permite interactuar con ellas

16

Figura 25 Cubo interactivo

Figura 26 Minecraft sobre Hololens

Cascos de realidad virtual En este apartado tenemos actualmentetres empresas compitiendo por el mercado de la realidad virtualPor una parte tenemos el Oculus Rift de la empresa Oculus VRTambieacuten tenemos el HTC Vive de la empresa HC y por uacuteltimoPlayStation VR de Sony Esto nos muestra el gran mercado quetiene la realidad virtual Estos cascos se basan en poner unapantalla muy cercana a los ojos del usuario y eliminarle todo elcampo de visioacuten De esta manera la inmersioacuten en lo que se estaacuteviendo es mayor

Invizimals Videojuego desarrollado por Novarama para la consolaPSP Se puede decir que ha sido el juego de realidad aumentadaque maacutes se ha expandido en el momento en que salioacute El juegoincluye unas tarjetas donde enfocando la caacutemara podremos vernuestras mascotas Invizimals y podemos interactuar con ellas

PokemonGo Es un juego de realidad aumentada de la empresaNiantic que ha revolucionado el mundo de los juegos de losdispositivos moacuteviles haciendo que miles de personas salgan a lacalle a capturar pokemon mediante su smartphone No hace ni tresmeses que ha salido y cuenta con cuatro millones de descargassolo en PlayStore

17

Figura 27 Pokemon GO

Gafas de RA Un ejemplo de estas son las Google Glass de laempresa Google Son unas gafas de realidad aumentadadestinadas a mostrarnos la informacioacuten de nuestro teleacutefono moacutevilsin necesidad de utilizar las manos tambieacuten podremos navegarpor internet por medio de oacuterdenes de voz

Psicologiacutea

El tema de la superacioacuten de traumas puede ser a veces un temadelicado un proceso largo y costoso Pero la realidad aumentada unavez maacutes son sorprende con sus aplicaciones esta vez en el campo de lapsicologiacutea Al permitir mostrar cuerpos digitales en un entorno realpodemos por ejemplo visualizar un miedo por ejemplo a las cucarachaso arantildeas en un entorno real y asiacute controlar como el paciente seacostumbra a su presencia controlando el nuacutemero y el comportamientode eacutestas Como ejemplo se hizo un estudio en la Universidad Politecnicade Valencia en el que se sometiacutea a diversas personas a la visualizacioacutende sus fobias en un entorno controlado [3]

18

Figura 28 Uso de la RA con fines terapeacuteuticos

Otro ejemplo de fobia que podemos superar mediante la realidadaumentada es la fobia a las alturas Mediante RA podemos hacer que unpaciente tenga la sensacioacuten de estar en un sitio alto o con caiacuteda sinninguacuten tipo de peligro[4]

Sector Industrial

Otro sector en el que la realidad aumentada ha logrado hacerse ver esen el sector industrial Un ejemplo son las gafas Moverio Pro BT-2000 dela empresa Epson donde los usuarios pueden ver lo que estaacuten viendootros trabajadores para asi mejorar la comunicacioacuten y permitir apoyar laformacioacuten de nuevos trabajadores

22 PropuestaLa finalidad de este trabajo es realizar un juego de realidad aumentadadonde por medio de unas imaacutegenes reales podremos seleccionar elpersonaje que queremos jugar Para luego introducirlo en un mapa concasillas en el que tiraremos un dado y avanzaremos casillas con nuestropersonaje Nos enfrentaremos a otro personaje controlado por la IA Elprimero que llegue a la uacuteltima casilla seraacute el vencedor

19

20

Capiacutetulo 3

Herramientas

31 Unity 3D

Unity 3D es una herramienta para el desarrollo de videojuegosmultiplataforma de la empresa Unity Technologies Existen otrasplataformas de desarrollo de videojuegos como UDK de Epic Games oCryEngine de CRYtek pero lo que adelanta Unity a las demaacutes es quepuede ser usado tanto para Windows como para Mac Unity viene convarias versiones desde la versioacuten gratuita hasta la versioacuten PRO por 125$al mes Esta uacuteltima nos ofrece unos servicios exclusivos como soportepremium kits de assets o tutoriales Tambieacuten nos ofrece una versioacuten paraempresas que nos permite obtener una configuracioacuten personalizada

21

Figura 31 Versiones de Unity

El motor Unity nos permite desarrollar no solo videojuegos Tambieacuten nospermite desarrollar todo tipo de aplicaciones graacuteficas Tambieacuten se haincluido la opcioacuten de desarrollar aplicaciones moacuteviles para Android o iOSy todas las plataformas maacutes importantes de videojuegos actuales comoMicrosoft Nintendo o Sony

Otra de las ventajas de utilizar Unity es la Unity Store donde encontrarrecursos de todo tipo Muchos de ellos gratuitos Esto hace que podamosrealizar un videojuego sin necesidad de saber modelado 3D

32 Vuforia

De la empresa Qualcomm Vuforia es una de las plataformas de realidadaumentada que maacutes ha credico en el uacuteltimo antildeo Tiene maacutes de 30000desarrolladores en todo el mundo y grandes empresas como Audi Nike o Sonyentre otras ya la han usado

Vuforia es un SDK que permite visualizar imaacutegenes en 3D mediante la caacutemarade nuestro dispositivo De esta manera se mezclan objetos del mundo real ydel virtual Vuforia tambieacuten permite el reconocimiento de texto reconocimientode muacuteltiples targets al mismo tiempo y la deteccioacuten raacutepida de targets entreotras funcionalidades

22

Su arquitectura consta de cuatro elementos baacutesicos que procederemos adescribir a continuacioacuten

Caacutemara Capta la imagen para que posteriormente eacutesta sea procesadapor el Tracker

Base de Datos Almacena una serie de Targets para ser reconocidos porel Tracker Se crea con el Target Manager y puede ser local o en lanube

Target Se utilizan para permitir al Tracker el reconocimiento del mundoreal pueden ser de diferentes tipos como Image Targets o Word Targetentre otros

Tracker Analiza la imagen de la caacutemara y asiacute detecta los objetos delmundo real para buscar coincidencias en su base de datos

23

Figura 32 Diagrama de flujo de Vuforia

Una vez explicados los elementos de la arquitectura de Vuforia vamos aexplicar brevemente los pasos que sigue para el reconocimiento de unaimagen

Primero el dispositivo captura una escena mediente la caacutemara de viacutedeo

La SDK de Vuforia coge una imagen de las que componen el video yconvierte esa imagen a una resolucioacuten que el Tracker pueda manejar

Mediante el Tracker Vuforia analiza la imagen y busca similitudes en losTargets de la base de datos

Por uacuteltimo la aplicacioacuten puede renderizar el objeto 3D en la pantalla deldispositivo moacutevil y de esta manera crear realidad aumentada

24

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 13: Desarrollo de un juego de tablero con Realidad Aumentada

213 Historia

Debemos entender que Realidad Virtual y Realidad Aumentada han idopraacutecticamente de la mano

En 1950 Morton Heilig escribioacute sobre un ldquoCine de Experienciardquo quepudiera acompantildear a todos los sentidos de una manera efectivaintegrando al espectador con la actividad en la pantalla Construyoacute unprototipo llamado el Sensorama en 1962 junto con 5 filmes cortos quepermitiacutean aumentar la experiencia del espectador a traveacutes de sussentidos (vista olfato tacto y oiacutedo) Podemos ver una foto delSensorama en la Figura 22

Figura 22 Imagen del sensorama por Morton Heilig

En 1968 Ivan Sutherland con la ayuda de su estudiante Bob Sproullconstruyeron lo que seriacutea ampliamente considerado el primer HeadMounted Display (HMD) para Realidad Virtual y Realidad AumentadaComo podemos ver en la Figura 23 era muy primitivo en teacuterminos deInterfaz de usuario y realismo y el HMD usado por el usuario era tangrande y pesado que debiacutea colgarse del techo y los graacuteficos que haciacuteanal ambiente virtual eran simples ldquomodelos alaacutembricordquo A finales de los 80

13

se popularizoacute el teacutermino Realidad Virtual por Jaron Lanier cuyacompantildeiacutea creoacute los primeros guantes y gafas de Realidad Virtual

Figura 23 Head MountedDisplay por Ivan Sutherland

El teacutermino Realidad Aumentada fue introducido por el investigador TomCaudell en Boeing en 1992 Caudell fue contratado para encontrar unaalternativa a los tediosos tableros de configuracioacuten de cables que utilizanlos trabajadores Salioacute con la idea de gafas especiales y tablerosvirtuales sobre tableros reales geneacutericos es asiacute que se le ocurrioacute queestaba ldquoaumentandordquo la realidad del usuario El teacutermino RealidadAumentada fue dado al puacuteblico en un artiacuteculo en 1992

14

Figura 24 Dispositivo para configuracioacuten de cables

213 Actualidad

En la actualidad la realidad aumentada cada vez se estaacute ganando un sitioen el diacutea a diacutea de las personas El gran avance de las tecnologiacuteas hahecho posible lo que anteriormente solo se podiacutea imaginar SeguacutenTechNavio (wwwtechnaviocom) una empresa de articulos deinvestigacioacuten la realidad aumentada tiene un prometedor futuroAugurando para eacuteste un crecimiento del 132 entre 2014 y 2018

En los uacuteltimos antildeos se han desarrollado muacuteltiples tecnologiacuteas que hansido uacutetiles para el desarrollo de la realidad aumentada Algunos ejemplosson ARToolKit ATOMIC Authoring Tool o Vuforia Este uacuteltimo es elsoftware que usaremos para el desarrollo de nuestra aplicacioacuten

El avance que maacutes ha contribuido a la realidad aumentada es la granexpansioacuten de los dispositivos moacuteviles Con una gran capacidad decoacutemputo una caacutemara y una gran pantalla donde interactuar con lasimaacutegenes que nos proyecta la aplicacioacuten Se convierten en el dispositivoclave donde esta tecnologiacutea puede hacer su gran aparicioacuten

15

Visto que la realidad aumentada teniacutea un gran futuro las empresas estaacutenempezando a interesarse por esta tecnologiacutea por sus interminablesaplicaciones aplicaacutendola asiacute en distintos sectores

Educacioacuten

Podemos incluir en los libros las imaacutegenes necesarias para permitirnosvisualizar objetos en 3D desde un dispositivo moacutevil para asiacute permitirexplorar desde el cuerpo humano hasta los inventos maacutes importantes dela historia Vemos en la Figura 25 un cubo con un target donde podervisualizar el elemento 3D[2] Tambieacuten nos permite escanear obras de artemonumentos o edificios para mostrarnos una pequentildea descripcioacuten ohistoria

Entretenimiento

En el sector del entretenimiento tiene una gran trayectoria ya que en losuacutetlimos antildeos han salido a la luz distintas aplicaciones o dispositivos Losmaacutes significativos los vamos a mencionar a continuacioacuten

Hololens Un dispositivo de la empresa Microsoft que consiste enunas gafas inalaacutembricas que nos proyectan delante de nosotros lasimaacutegenes en 3D y nos permite interactuar con ellas

16

Figura 25 Cubo interactivo

Figura 26 Minecraft sobre Hololens

Cascos de realidad virtual En este apartado tenemos actualmentetres empresas compitiendo por el mercado de la realidad virtualPor una parte tenemos el Oculus Rift de la empresa Oculus VRTambieacuten tenemos el HTC Vive de la empresa HC y por uacuteltimoPlayStation VR de Sony Esto nos muestra el gran mercado quetiene la realidad virtual Estos cascos se basan en poner unapantalla muy cercana a los ojos del usuario y eliminarle todo elcampo de visioacuten De esta manera la inmersioacuten en lo que se estaacuteviendo es mayor

Invizimals Videojuego desarrollado por Novarama para la consolaPSP Se puede decir que ha sido el juego de realidad aumentadaque maacutes se ha expandido en el momento en que salioacute El juegoincluye unas tarjetas donde enfocando la caacutemara podremos vernuestras mascotas Invizimals y podemos interactuar con ellas

PokemonGo Es un juego de realidad aumentada de la empresaNiantic que ha revolucionado el mundo de los juegos de losdispositivos moacuteviles haciendo que miles de personas salgan a lacalle a capturar pokemon mediante su smartphone No hace ni tresmeses que ha salido y cuenta con cuatro millones de descargassolo en PlayStore

17

Figura 27 Pokemon GO

Gafas de RA Un ejemplo de estas son las Google Glass de laempresa Google Son unas gafas de realidad aumentadadestinadas a mostrarnos la informacioacuten de nuestro teleacutefono moacutevilsin necesidad de utilizar las manos tambieacuten podremos navegarpor internet por medio de oacuterdenes de voz

Psicologiacutea

El tema de la superacioacuten de traumas puede ser a veces un temadelicado un proceso largo y costoso Pero la realidad aumentada unavez maacutes son sorprende con sus aplicaciones esta vez en el campo de lapsicologiacutea Al permitir mostrar cuerpos digitales en un entorno realpodemos por ejemplo visualizar un miedo por ejemplo a las cucarachaso arantildeas en un entorno real y asiacute controlar como el paciente seacostumbra a su presencia controlando el nuacutemero y el comportamientode eacutestas Como ejemplo se hizo un estudio en la Universidad Politecnicade Valencia en el que se sometiacutea a diversas personas a la visualizacioacutende sus fobias en un entorno controlado [3]

18

Figura 28 Uso de la RA con fines terapeacuteuticos

Otro ejemplo de fobia que podemos superar mediante la realidadaumentada es la fobia a las alturas Mediante RA podemos hacer que unpaciente tenga la sensacioacuten de estar en un sitio alto o con caiacuteda sinninguacuten tipo de peligro[4]

Sector Industrial

Otro sector en el que la realidad aumentada ha logrado hacerse ver esen el sector industrial Un ejemplo son las gafas Moverio Pro BT-2000 dela empresa Epson donde los usuarios pueden ver lo que estaacuten viendootros trabajadores para asi mejorar la comunicacioacuten y permitir apoyar laformacioacuten de nuevos trabajadores

22 PropuestaLa finalidad de este trabajo es realizar un juego de realidad aumentadadonde por medio de unas imaacutegenes reales podremos seleccionar elpersonaje que queremos jugar Para luego introducirlo en un mapa concasillas en el que tiraremos un dado y avanzaremos casillas con nuestropersonaje Nos enfrentaremos a otro personaje controlado por la IA Elprimero que llegue a la uacuteltima casilla seraacute el vencedor

19

20

Capiacutetulo 3

Herramientas

31 Unity 3D

Unity 3D es una herramienta para el desarrollo de videojuegosmultiplataforma de la empresa Unity Technologies Existen otrasplataformas de desarrollo de videojuegos como UDK de Epic Games oCryEngine de CRYtek pero lo que adelanta Unity a las demaacutes es quepuede ser usado tanto para Windows como para Mac Unity viene convarias versiones desde la versioacuten gratuita hasta la versioacuten PRO por 125$al mes Esta uacuteltima nos ofrece unos servicios exclusivos como soportepremium kits de assets o tutoriales Tambieacuten nos ofrece una versioacuten paraempresas que nos permite obtener una configuracioacuten personalizada

21

Figura 31 Versiones de Unity

El motor Unity nos permite desarrollar no solo videojuegos Tambieacuten nospermite desarrollar todo tipo de aplicaciones graacuteficas Tambieacuten se haincluido la opcioacuten de desarrollar aplicaciones moacuteviles para Android o iOSy todas las plataformas maacutes importantes de videojuegos actuales comoMicrosoft Nintendo o Sony

Otra de las ventajas de utilizar Unity es la Unity Store donde encontrarrecursos de todo tipo Muchos de ellos gratuitos Esto hace que podamosrealizar un videojuego sin necesidad de saber modelado 3D

32 Vuforia

De la empresa Qualcomm Vuforia es una de las plataformas de realidadaumentada que maacutes ha credico en el uacuteltimo antildeo Tiene maacutes de 30000desarrolladores en todo el mundo y grandes empresas como Audi Nike o Sonyentre otras ya la han usado

Vuforia es un SDK que permite visualizar imaacutegenes en 3D mediante la caacutemarade nuestro dispositivo De esta manera se mezclan objetos del mundo real ydel virtual Vuforia tambieacuten permite el reconocimiento de texto reconocimientode muacuteltiples targets al mismo tiempo y la deteccioacuten raacutepida de targets entreotras funcionalidades

22

Su arquitectura consta de cuatro elementos baacutesicos que procederemos adescribir a continuacioacuten

Caacutemara Capta la imagen para que posteriormente eacutesta sea procesadapor el Tracker

Base de Datos Almacena una serie de Targets para ser reconocidos porel Tracker Se crea con el Target Manager y puede ser local o en lanube

Target Se utilizan para permitir al Tracker el reconocimiento del mundoreal pueden ser de diferentes tipos como Image Targets o Word Targetentre otros

Tracker Analiza la imagen de la caacutemara y asiacute detecta los objetos delmundo real para buscar coincidencias en su base de datos

23

Figura 32 Diagrama de flujo de Vuforia

Una vez explicados los elementos de la arquitectura de Vuforia vamos aexplicar brevemente los pasos que sigue para el reconocimiento de unaimagen

Primero el dispositivo captura una escena mediente la caacutemara de viacutedeo

La SDK de Vuforia coge una imagen de las que componen el video yconvierte esa imagen a una resolucioacuten que el Tracker pueda manejar

Mediante el Tracker Vuforia analiza la imagen y busca similitudes en losTargets de la base de datos

Por uacuteltimo la aplicacioacuten puede renderizar el objeto 3D en la pantalla deldispositivo moacutevil y de esta manera crear realidad aumentada

24

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 14: Desarrollo de un juego de tablero con Realidad Aumentada

se popularizoacute el teacutermino Realidad Virtual por Jaron Lanier cuyacompantildeiacutea creoacute los primeros guantes y gafas de Realidad Virtual

Figura 23 Head MountedDisplay por Ivan Sutherland

El teacutermino Realidad Aumentada fue introducido por el investigador TomCaudell en Boeing en 1992 Caudell fue contratado para encontrar unaalternativa a los tediosos tableros de configuracioacuten de cables que utilizanlos trabajadores Salioacute con la idea de gafas especiales y tablerosvirtuales sobre tableros reales geneacutericos es asiacute que se le ocurrioacute queestaba ldquoaumentandordquo la realidad del usuario El teacutermino RealidadAumentada fue dado al puacuteblico en un artiacuteculo en 1992

14

Figura 24 Dispositivo para configuracioacuten de cables

213 Actualidad

En la actualidad la realidad aumentada cada vez se estaacute ganando un sitioen el diacutea a diacutea de las personas El gran avance de las tecnologiacuteas hahecho posible lo que anteriormente solo se podiacutea imaginar SeguacutenTechNavio (wwwtechnaviocom) una empresa de articulos deinvestigacioacuten la realidad aumentada tiene un prometedor futuroAugurando para eacuteste un crecimiento del 132 entre 2014 y 2018

En los uacuteltimos antildeos se han desarrollado muacuteltiples tecnologiacuteas que hansido uacutetiles para el desarrollo de la realidad aumentada Algunos ejemplosson ARToolKit ATOMIC Authoring Tool o Vuforia Este uacuteltimo es elsoftware que usaremos para el desarrollo de nuestra aplicacioacuten

El avance que maacutes ha contribuido a la realidad aumentada es la granexpansioacuten de los dispositivos moacuteviles Con una gran capacidad decoacutemputo una caacutemara y una gran pantalla donde interactuar con lasimaacutegenes que nos proyecta la aplicacioacuten Se convierten en el dispositivoclave donde esta tecnologiacutea puede hacer su gran aparicioacuten

15

Visto que la realidad aumentada teniacutea un gran futuro las empresas estaacutenempezando a interesarse por esta tecnologiacutea por sus interminablesaplicaciones aplicaacutendola asiacute en distintos sectores

Educacioacuten

Podemos incluir en los libros las imaacutegenes necesarias para permitirnosvisualizar objetos en 3D desde un dispositivo moacutevil para asiacute permitirexplorar desde el cuerpo humano hasta los inventos maacutes importantes dela historia Vemos en la Figura 25 un cubo con un target donde podervisualizar el elemento 3D[2] Tambieacuten nos permite escanear obras de artemonumentos o edificios para mostrarnos una pequentildea descripcioacuten ohistoria

Entretenimiento

En el sector del entretenimiento tiene una gran trayectoria ya que en losuacutetlimos antildeos han salido a la luz distintas aplicaciones o dispositivos Losmaacutes significativos los vamos a mencionar a continuacioacuten

Hololens Un dispositivo de la empresa Microsoft que consiste enunas gafas inalaacutembricas que nos proyectan delante de nosotros lasimaacutegenes en 3D y nos permite interactuar con ellas

16

Figura 25 Cubo interactivo

Figura 26 Minecraft sobre Hololens

Cascos de realidad virtual En este apartado tenemos actualmentetres empresas compitiendo por el mercado de la realidad virtualPor una parte tenemos el Oculus Rift de la empresa Oculus VRTambieacuten tenemos el HTC Vive de la empresa HC y por uacuteltimoPlayStation VR de Sony Esto nos muestra el gran mercado quetiene la realidad virtual Estos cascos se basan en poner unapantalla muy cercana a los ojos del usuario y eliminarle todo elcampo de visioacuten De esta manera la inmersioacuten en lo que se estaacuteviendo es mayor

Invizimals Videojuego desarrollado por Novarama para la consolaPSP Se puede decir que ha sido el juego de realidad aumentadaque maacutes se ha expandido en el momento en que salioacute El juegoincluye unas tarjetas donde enfocando la caacutemara podremos vernuestras mascotas Invizimals y podemos interactuar con ellas

PokemonGo Es un juego de realidad aumentada de la empresaNiantic que ha revolucionado el mundo de los juegos de losdispositivos moacuteviles haciendo que miles de personas salgan a lacalle a capturar pokemon mediante su smartphone No hace ni tresmeses que ha salido y cuenta con cuatro millones de descargassolo en PlayStore

17

Figura 27 Pokemon GO

Gafas de RA Un ejemplo de estas son las Google Glass de laempresa Google Son unas gafas de realidad aumentadadestinadas a mostrarnos la informacioacuten de nuestro teleacutefono moacutevilsin necesidad de utilizar las manos tambieacuten podremos navegarpor internet por medio de oacuterdenes de voz

Psicologiacutea

El tema de la superacioacuten de traumas puede ser a veces un temadelicado un proceso largo y costoso Pero la realidad aumentada unavez maacutes son sorprende con sus aplicaciones esta vez en el campo de lapsicologiacutea Al permitir mostrar cuerpos digitales en un entorno realpodemos por ejemplo visualizar un miedo por ejemplo a las cucarachaso arantildeas en un entorno real y asiacute controlar como el paciente seacostumbra a su presencia controlando el nuacutemero y el comportamientode eacutestas Como ejemplo se hizo un estudio en la Universidad Politecnicade Valencia en el que se sometiacutea a diversas personas a la visualizacioacutende sus fobias en un entorno controlado [3]

18

Figura 28 Uso de la RA con fines terapeacuteuticos

Otro ejemplo de fobia que podemos superar mediante la realidadaumentada es la fobia a las alturas Mediante RA podemos hacer que unpaciente tenga la sensacioacuten de estar en un sitio alto o con caiacuteda sinninguacuten tipo de peligro[4]

Sector Industrial

Otro sector en el que la realidad aumentada ha logrado hacerse ver esen el sector industrial Un ejemplo son las gafas Moverio Pro BT-2000 dela empresa Epson donde los usuarios pueden ver lo que estaacuten viendootros trabajadores para asi mejorar la comunicacioacuten y permitir apoyar laformacioacuten de nuevos trabajadores

22 PropuestaLa finalidad de este trabajo es realizar un juego de realidad aumentadadonde por medio de unas imaacutegenes reales podremos seleccionar elpersonaje que queremos jugar Para luego introducirlo en un mapa concasillas en el que tiraremos un dado y avanzaremos casillas con nuestropersonaje Nos enfrentaremos a otro personaje controlado por la IA Elprimero que llegue a la uacuteltima casilla seraacute el vencedor

19

20

Capiacutetulo 3

Herramientas

31 Unity 3D

Unity 3D es una herramienta para el desarrollo de videojuegosmultiplataforma de la empresa Unity Technologies Existen otrasplataformas de desarrollo de videojuegos como UDK de Epic Games oCryEngine de CRYtek pero lo que adelanta Unity a las demaacutes es quepuede ser usado tanto para Windows como para Mac Unity viene convarias versiones desde la versioacuten gratuita hasta la versioacuten PRO por 125$al mes Esta uacuteltima nos ofrece unos servicios exclusivos como soportepremium kits de assets o tutoriales Tambieacuten nos ofrece una versioacuten paraempresas que nos permite obtener una configuracioacuten personalizada

21

Figura 31 Versiones de Unity

El motor Unity nos permite desarrollar no solo videojuegos Tambieacuten nospermite desarrollar todo tipo de aplicaciones graacuteficas Tambieacuten se haincluido la opcioacuten de desarrollar aplicaciones moacuteviles para Android o iOSy todas las plataformas maacutes importantes de videojuegos actuales comoMicrosoft Nintendo o Sony

Otra de las ventajas de utilizar Unity es la Unity Store donde encontrarrecursos de todo tipo Muchos de ellos gratuitos Esto hace que podamosrealizar un videojuego sin necesidad de saber modelado 3D

32 Vuforia

De la empresa Qualcomm Vuforia es una de las plataformas de realidadaumentada que maacutes ha credico en el uacuteltimo antildeo Tiene maacutes de 30000desarrolladores en todo el mundo y grandes empresas como Audi Nike o Sonyentre otras ya la han usado

Vuforia es un SDK que permite visualizar imaacutegenes en 3D mediante la caacutemarade nuestro dispositivo De esta manera se mezclan objetos del mundo real ydel virtual Vuforia tambieacuten permite el reconocimiento de texto reconocimientode muacuteltiples targets al mismo tiempo y la deteccioacuten raacutepida de targets entreotras funcionalidades

22

Su arquitectura consta de cuatro elementos baacutesicos que procederemos adescribir a continuacioacuten

Caacutemara Capta la imagen para que posteriormente eacutesta sea procesadapor el Tracker

Base de Datos Almacena una serie de Targets para ser reconocidos porel Tracker Se crea con el Target Manager y puede ser local o en lanube

Target Se utilizan para permitir al Tracker el reconocimiento del mundoreal pueden ser de diferentes tipos como Image Targets o Word Targetentre otros

Tracker Analiza la imagen de la caacutemara y asiacute detecta los objetos delmundo real para buscar coincidencias en su base de datos

23

Figura 32 Diagrama de flujo de Vuforia

Una vez explicados los elementos de la arquitectura de Vuforia vamos aexplicar brevemente los pasos que sigue para el reconocimiento de unaimagen

Primero el dispositivo captura una escena mediente la caacutemara de viacutedeo

La SDK de Vuforia coge una imagen de las que componen el video yconvierte esa imagen a una resolucioacuten que el Tracker pueda manejar

Mediante el Tracker Vuforia analiza la imagen y busca similitudes en losTargets de la base de datos

Por uacuteltimo la aplicacioacuten puede renderizar el objeto 3D en la pantalla deldispositivo moacutevil y de esta manera crear realidad aumentada

24

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 15: Desarrollo de un juego de tablero con Realidad Aumentada

Figura 24 Dispositivo para configuracioacuten de cables

213 Actualidad

En la actualidad la realidad aumentada cada vez se estaacute ganando un sitioen el diacutea a diacutea de las personas El gran avance de las tecnologiacuteas hahecho posible lo que anteriormente solo se podiacutea imaginar SeguacutenTechNavio (wwwtechnaviocom) una empresa de articulos deinvestigacioacuten la realidad aumentada tiene un prometedor futuroAugurando para eacuteste un crecimiento del 132 entre 2014 y 2018

En los uacuteltimos antildeos se han desarrollado muacuteltiples tecnologiacuteas que hansido uacutetiles para el desarrollo de la realidad aumentada Algunos ejemplosson ARToolKit ATOMIC Authoring Tool o Vuforia Este uacuteltimo es elsoftware que usaremos para el desarrollo de nuestra aplicacioacuten

El avance que maacutes ha contribuido a la realidad aumentada es la granexpansioacuten de los dispositivos moacuteviles Con una gran capacidad decoacutemputo una caacutemara y una gran pantalla donde interactuar con lasimaacutegenes que nos proyecta la aplicacioacuten Se convierten en el dispositivoclave donde esta tecnologiacutea puede hacer su gran aparicioacuten

15

Visto que la realidad aumentada teniacutea un gran futuro las empresas estaacutenempezando a interesarse por esta tecnologiacutea por sus interminablesaplicaciones aplicaacutendola asiacute en distintos sectores

Educacioacuten

Podemos incluir en los libros las imaacutegenes necesarias para permitirnosvisualizar objetos en 3D desde un dispositivo moacutevil para asiacute permitirexplorar desde el cuerpo humano hasta los inventos maacutes importantes dela historia Vemos en la Figura 25 un cubo con un target donde podervisualizar el elemento 3D[2] Tambieacuten nos permite escanear obras de artemonumentos o edificios para mostrarnos una pequentildea descripcioacuten ohistoria

Entretenimiento

En el sector del entretenimiento tiene una gran trayectoria ya que en losuacutetlimos antildeos han salido a la luz distintas aplicaciones o dispositivos Losmaacutes significativos los vamos a mencionar a continuacioacuten

Hololens Un dispositivo de la empresa Microsoft que consiste enunas gafas inalaacutembricas que nos proyectan delante de nosotros lasimaacutegenes en 3D y nos permite interactuar con ellas

16

Figura 25 Cubo interactivo

Figura 26 Minecraft sobre Hololens

Cascos de realidad virtual En este apartado tenemos actualmentetres empresas compitiendo por el mercado de la realidad virtualPor una parte tenemos el Oculus Rift de la empresa Oculus VRTambieacuten tenemos el HTC Vive de la empresa HC y por uacuteltimoPlayStation VR de Sony Esto nos muestra el gran mercado quetiene la realidad virtual Estos cascos se basan en poner unapantalla muy cercana a los ojos del usuario y eliminarle todo elcampo de visioacuten De esta manera la inmersioacuten en lo que se estaacuteviendo es mayor

Invizimals Videojuego desarrollado por Novarama para la consolaPSP Se puede decir que ha sido el juego de realidad aumentadaque maacutes se ha expandido en el momento en que salioacute El juegoincluye unas tarjetas donde enfocando la caacutemara podremos vernuestras mascotas Invizimals y podemos interactuar con ellas

PokemonGo Es un juego de realidad aumentada de la empresaNiantic que ha revolucionado el mundo de los juegos de losdispositivos moacuteviles haciendo que miles de personas salgan a lacalle a capturar pokemon mediante su smartphone No hace ni tresmeses que ha salido y cuenta con cuatro millones de descargassolo en PlayStore

17

Figura 27 Pokemon GO

Gafas de RA Un ejemplo de estas son las Google Glass de laempresa Google Son unas gafas de realidad aumentadadestinadas a mostrarnos la informacioacuten de nuestro teleacutefono moacutevilsin necesidad de utilizar las manos tambieacuten podremos navegarpor internet por medio de oacuterdenes de voz

Psicologiacutea

El tema de la superacioacuten de traumas puede ser a veces un temadelicado un proceso largo y costoso Pero la realidad aumentada unavez maacutes son sorprende con sus aplicaciones esta vez en el campo de lapsicologiacutea Al permitir mostrar cuerpos digitales en un entorno realpodemos por ejemplo visualizar un miedo por ejemplo a las cucarachaso arantildeas en un entorno real y asiacute controlar como el paciente seacostumbra a su presencia controlando el nuacutemero y el comportamientode eacutestas Como ejemplo se hizo un estudio en la Universidad Politecnicade Valencia en el que se sometiacutea a diversas personas a la visualizacioacutende sus fobias en un entorno controlado [3]

18

Figura 28 Uso de la RA con fines terapeacuteuticos

Otro ejemplo de fobia que podemos superar mediante la realidadaumentada es la fobia a las alturas Mediante RA podemos hacer que unpaciente tenga la sensacioacuten de estar en un sitio alto o con caiacuteda sinninguacuten tipo de peligro[4]

Sector Industrial

Otro sector en el que la realidad aumentada ha logrado hacerse ver esen el sector industrial Un ejemplo son las gafas Moverio Pro BT-2000 dela empresa Epson donde los usuarios pueden ver lo que estaacuten viendootros trabajadores para asi mejorar la comunicacioacuten y permitir apoyar laformacioacuten de nuevos trabajadores

22 PropuestaLa finalidad de este trabajo es realizar un juego de realidad aumentadadonde por medio de unas imaacutegenes reales podremos seleccionar elpersonaje que queremos jugar Para luego introducirlo en un mapa concasillas en el que tiraremos un dado y avanzaremos casillas con nuestropersonaje Nos enfrentaremos a otro personaje controlado por la IA Elprimero que llegue a la uacuteltima casilla seraacute el vencedor

19

20

Capiacutetulo 3

Herramientas

31 Unity 3D

Unity 3D es una herramienta para el desarrollo de videojuegosmultiplataforma de la empresa Unity Technologies Existen otrasplataformas de desarrollo de videojuegos como UDK de Epic Games oCryEngine de CRYtek pero lo que adelanta Unity a las demaacutes es quepuede ser usado tanto para Windows como para Mac Unity viene convarias versiones desde la versioacuten gratuita hasta la versioacuten PRO por 125$al mes Esta uacuteltima nos ofrece unos servicios exclusivos como soportepremium kits de assets o tutoriales Tambieacuten nos ofrece una versioacuten paraempresas que nos permite obtener una configuracioacuten personalizada

21

Figura 31 Versiones de Unity

El motor Unity nos permite desarrollar no solo videojuegos Tambieacuten nospermite desarrollar todo tipo de aplicaciones graacuteficas Tambieacuten se haincluido la opcioacuten de desarrollar aplicaciones moacuteviles para Android o iOSy todas las plataformas maacutes importantes de videojuegos actuales comoMicrosoft Nintendo o Sony

Otra de las ventajas de utilizar Unity es la Unity Store donde encontrarrecursos de todo tipo Muchos de ellos gratuitos Esto hace que podamosrealizar un videojuego sin necesidad de saber modelado 3D

32 Vuforia

De la empresa Qualcomm Vuforia es una de las plataformas de realidadaumentada que maacutes ha credico en el uacuteltimo antildeo Tiene maacutes de 30000desarrolladores en todo el mundo y grandes empresas como Audi Nike o Sonyentre otras ya la han usado

Vuforia es un SDK que permite visualizar imaacutegenes en 3D mediante la caacutemarade nuestro dispositivo De esta manera se mezclan objetos del mundo real ydel virtual Vuforia tambieacuten permite el reconocimiento de texto reconocimientode muacuteltiples targets al mismo tiempo y la deteccioacuten raacutepida de targets entreotras funcionalidades

22

Su arquitectura consta de cuatro elementos baacutesicos que procederemos adescribir a continuacioacuten

Caacutemara Capta la imagen para que posteriormente eacutesta sea procesadapor el Tracker

Base de Datos Almacena una serie de Targets para ser reconocidos porel Tracker Se crea con el Target Manager y puede ser local o en lanube

Target Se utilizan para permitir al Tracker el reconocimiento del mundoreal pueden ser de diferentes tipos como Image Targets o Word Targetentre otros

Tracker Analiza la imagen de la caacutemara y asiacute detecta los objetos delmundo real para buscar coincidencias en su base de datos

23

Figura 32 Diagrama de flujo de Vuforia

Una vez explicados los elementos de la arquitectura de Vuforia vamos aexplicar brevemente los pasos que sigue para el reconocimiento de unaimagen

Primero el dispositivo captura una escena mediente la caacutemara de viacutedeo

La SDK de Vuforia coge una imagen de las que componen el video yconvierte esa imagen a una resolucioacuten que el Tracker pueda manejar

Mediante el Tracker Vuforia analiza la imagen y busca similitudes en losTargets de la base de datos

Por uacuteltimo la aplicacioacuten puede renderizar el objeto 3D en la pantalla deldispositivo moacutevil y de esta manera crear realidad aumentada

24

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 16: Desarrollo de un juego de tablero con Realidad Aumentada

Visto que la realidad aumentada teniacutea un gran futuro las empresas estaacutenempezando a interesarse por esta tecnologiacutea por sus interminablesaplicaciones aplicaacutendola asiacute en distintos sectores

Educacioacuten

Podemos incluir en los libros las imaacutegenes necesarias para permitirnosvisualizar objetos en 3D desde un dispositivo moacutevil para asiacute permitirexplorar desde el cuerpo humano hasta los inventos maacutes importantes dela historia Vemos en la Figura 25 un cubo con un target donde podervisualizar el elemento 3D[2] Tambieacuten nos permite escanear obras de artemonumentos o edificios para mostrarnos una pequentildea descripcioacuten ohistoria

Entretenimiento

En el sector del entretenimiento tiene una gran trayectoria ya que en losuacutetlimos antildeos han salido a la luz distintas aplicaciones o dispositivos Losmaacutes significativos los vamos a mencionar a continuacioacuten

Hololens Un dispositivo de la empresa Microsoft que consiste enunas gafas inalaacutembricas que nos proyectan delante de nosotros lasimaacutegenes en 3D y nos permite interactuar con ellas

16

Figura 25 Cubo interactivo

Figura 26 Minecraft sobre Hololens

Cascos de realidad virtual En este apartado tenemos actualmentetres empresas compitiendo por el mercado de la realidad virtualPor una parte tenemos el Oculus Rift de la empresa Oculus VRTambieacuten tenemos el HTC Vive de la empresa HC y por uacuteltimoPlayStation VR de Sony Esto nos muestra el gran mercado quetiene la realidad virtual Estos cascos se basan en poner unapantalla muy cercana a los ojos del usuario y eliminarle todo elcampo de visioacuten De esta manera la inmersioacuten en lo que se estaacuteviendo es mayor

Invizimals Videojuego desarrollado por Novarama para la consolaPSP Se puede decir que ha sido el juego de realidad aumentadaque maacutes se ha expandido en el momento en que salioacute El juegoincluye unas tarjetas donde enfocando la caacutemara podremos vernuestras mascotas Invizimals y podemos interactuar con ellas

PokemonGo Es un juego de realidad aumentada de la empresaNiantic que ha revolucionado el mundo de los juegos de losdispositivos moacuteviles haciendo que miles de personas salgan a lacalle a capturar pokemon mediante su smartphone No hace ni tresmeses que ha salido y cuenta con cuatro millones de descargassolo en PlayStore

17

Figura 27 Pokemon GO

Gafas de RA Un ejemplo de estas son las Google Glass de laempresa Google Son unas gafas de realidad aumentadadestinadas a mostrarnos la informacioacuten de nuestro teleacutefono moacutevilsin necesidad de utilizar las manos tambieacuten podremos navegarpor internet por medio de oacuterdenes de voz

Psicologiacutea

El tema de la superacioacuten de traumas puede ser a veces un temadelicado un proceso largo y costoso Pero la realidad aumentada unavez maacutes son sorprende con sus aplicaciones esta vez en el campo de lapsicologiacutea Al permitir mostrar cuerpos digitales en un entorno realpodemos por ejemplo visualizar un miedo por ejemplo a las cucarachaso arantildeas en un entorno real y asiacute controlar como el paciente seacostumbra a su presencia controlando el nuacutemero y el comportamientode eacutestas Como ejemplo se hizo un estudio en la Universidad Politecnicade Valencia en el que se sometiacutea a diversas personas a la visualizacioacutende sus fobias en un entorno controlado [3]

18

Figura 28 Uso de la RA con fines terapeacuteuticos

Otro ejemplo de fobia que podemos superar mediante la realidadaumentada es la fobia a las alturas Mediante RA podemos hacer que unpaciente tenga la sensacioacuten de estar en un sitio alto o con caiacuteda sinninguacuten tipo de peligro[4]

Sector Industrial

Otro sector en el que la realidad aumentada ha logrado hacerse ver esen el sector industrial Un ejemplo son las gafas Moverio Pro BT-2000 dela empresa Epson donde los usuarios pueden ver lo que estaacuten viendootros trabajadores para asi mejorar la comunicacioacuten y permitir apoyar laformacioacuten de nuevos trabajadores

22 PropuestaLa finalidad de este trabajo es realizar un juego de realidad aumentadadonde por medio de unas imaacutegenes reales podremos seleccionar elpersonaje que queremos jugar Para luego introducirlo en un mapa concasillas en el que tiraremos un dado y avanzaremos casillas con nuestropersonaje Nos enfrentaremos a otro personaje controlado por la IA Elprimero que llegue a la uacuteltima casilla seraacute el vencedor

19

20

Capiacutetulo 3

Herramientas

31 Unity 3D

Unity 3D es una herramienta para el desarrollo de videojuegosmultiplataforma de la empresa Unity Technologies Existen otrasplataformas de desarrollo de videojuegos como UDK de Epic Games oCryEngine de CRYtek pero lo que adelanta Unity a las demaacutes es quepuede ser usado tanto para Windows como para Mac Unity viene convarias versiones desde la versioacuten gratuita hasta la versioacuten PRO por 125$al mes Esta uacuteltima nos ofrece unos servicios exclusivos como soportepremium kits de assets o tutoriales Tambieacuten nos ofrece una versioacuten paraempresas que nos permite obtener una configuracioacuten personalizada

21

Figura 31 Versiones de Unity

El motor Unity nos permite desarrollar no solo videojuegos Tambieacuten nospermite desarrollar todo tipo de aplicaciones graacuteficas Tambieacuten se haincluido la opcioacuten de desarrollar aplicaciones moacuteviles para Android o iOSy todas las plataformas maacutes importantes de videojuegos actuales comoMicrosoft Nintendo o Sony

Otra de las ventajas de utilizar Unity es la Unity Store donde encontrarrecursos de todo tipo Muchos de ellos gratuitos Esto hace que podamosrealizar un videojuego sin necesidad de saber modelado 3D

32 Vuforia

De la empresa Qualcomm Vuforia es una de las plataformas de realidadaumentada que maacutes ha credico en el uacuteltimo antildeo Tiene maacutes de 30000desarrolladores en todo el mundo y grandes empresas como Audi Nike o Sonyentre otras ya la han usado

Vuforia es un SDK que permite visualizar imaacutegenes en 3D mediante la caacutemarade nuestro dispositivo De esta manera se mezclan objetos del mundo real ydel virtual Vuforia tambieacuten permite el reconocimiento de texto reconocimientode muacuteltiples targets al mismo tiempo y la deteccioacuten raacutepida de targets entreotras funcionalidades

22

Su arquitectura consta de cuatro elementos baacutesicos que procederemos adescribir a continuacioacuten

Caacutemara Capta la imagen para que posteriormente eacutesta sea procesadapor el Tracker

Base de Datos Almacena una serie de Targets para ser reconocidos porel Tracker Se crea con el Target Manager y puede ser local o en lanube

Target Se utilizan para permitir al Tracker el reconocimiento del mundoreal pueden ser de diferentes tipos como Image Targets o Word Targetentre otros

Tracker Analiza la imagen de la caacutemara y asiacute detecta los objetos delmundo real para buscar coincidencias en su base de datos

23

Figura 32 Diagrama de flujo de Vuforia

Una vez explicados los elementos de la arquitectura de Vuforia vamos aexplicar brevemente los pasos que sigue para el reconocimiento de unaimagen

Primero el dispositivo captura una escena mediente la caacutemara de viacutedeo

La SDK de Vuforia coge una imagen de las que componen el video yconvierte esa imagen a una resolucioacuten que el Tracker pueda manejar

Mediante el Tracker Vuforia analiza la imagen y busca similitudes en losTargets de la base de datos

Por uacuteltimo la aplicacioacuten puede renderizar el objeto 3D en la pantalla deldispositivo moacutevil y de esta manera crear realidad aumentada

24

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 17: Desarrollo de un juego de tablero con Realidad Aumentada

Figura 26 Minecraft sobre Hololens

Cascos de realidad virtual En este apartado tenemos actualmentetres empresas compitiendo por el mercado de la realidad virtualPor una parte tenemos el Oculus Rift de la empresa Oculus VRTambieacuten tenemos el HTC Vive de la empresa HC y por uacuteltimoPlayStation VR de Sony Esto nos muestra el gran mercado quetiene la realidad virtual Estos cascos se basan en poner unapantalla muy cercana a los ojos del usuario y eliminarle todo elcampo de visioacuten De esta manera la inmersioacuten en lo que se estaacuteviendo es mayor

Invizimals Videojuego desarrollado por Novarama para la consolaPSP Se puede decir que ha sido el juego de realidad aumentadaque maacutes se ha expandido en el momento en que salioacute El juegoincluye unas tarjetas donde enfocando la caacutemara podremos vernuestras mascotas Invizimals y podemos interactuar con ellas

PokemonGo Es un juego de realidad aumentada de la empresaNiantic que ha revolucionado el mundo de los juegos de losdispositivos moacuteviles haciendo que miles de personas salgan a lacalle a capturar pokemon mediante su smartphone No hace ni tresmeses que ha salido y cuenta con cuatro millones de descargassolo en PlayStore

17

Figura 27 Pokemon GO

Gafas de RA Un ejemplo de estas son las Google Glass de laempresa Google Son unas gafas de realidad aumentadadestinadas a mostrarnos la informacioacuten de nuestro teleacutefono moacutevilsin necesidad de utilizar las manos tambieacuten podremos navegarpor internet por medio de oacuterdenes de voz

Psicologiacutea

El tema de la superacioacuten de traumas puede ser a veces un temadelicado un proceso largo y costoso Pero la realidad aumentada unavez maacutes son sorprende con sus aplicaciones esta vez en el campo de lapsicologiacutea Al permitir mostrar cuerpos digitales en un entorno realpodemos por ejemplo visualizar un miedo por ejemplo a las cucarachaso arantildeas en un entorno real y asiacute controlar como el paciente seacostumbra a su presencia controlando el nuacutemero y el comportamientode eacutestas Como ejemplo se hizo un estudio en la Universidad Politecnicade Valencia en el que se sometiacutea a diversas personas a la visualizacioacutende sus fobias en un entorno controlado [3]

18

Figura 28 Uso de la RA con fines terapeacuteuticos

Otro ejemplo de fobia que podemos superar mediante la realidadaumentada es la fobia a las alturas Mediante RA podemos hacer que unpaciente tenga la sensacioacuten de estar en un sitio alto o con caiacuteda sinninguacuten tipo de peligro[4]

Sector Industrial

Otro sector en el que la realidad aumentada ha logrado hacerse ver esen el sector industrial Un ejemplo son las gafas Moverio Pro BT-2000 dela empresa Epson donde los usuarios pueden ver lo que estaacuten viendootros trabajadores para asi mejorar la comunicacioacuten y permitir apoyar laformacioacuten de nuevos trabajadores

22 PropuestaLa finalidad de este trabajo es realizar un juego de realidad aumentadadonde por medio de unas imaacutegenes reales podremos seleccionar elpersonaje que queremos jugar Para luego introducirlo en un mapa concasillas en el que tiraremos un dado y avanzaremos casillas con nuestropersonaje Nos enfrentaremos a otro personaje controlado por la IA Elprimero que llegue a la uacuteltima casilla seraacute el vencedor

19

20

Capiacutetulo 3

Herramientas

31 Unity 3D

Unity 3D es una herramienta para el desarrollo de videojuegosmultiplataforma de la empresa Unity Technologies Existen otrasplataformas de desarrollo de videojuegos como UDK de Epic Games oCryEngine de CRYtek pero lo que adelanta Unity a las demaacutes es quepuede ser usado tanto para Windows como para Mac Unity viene convarias versiones desde la versioacuten gratuita hasta la versioacuten PRO por 125$al mes Esta uacuteltima nos ofrece unos servicios exclusivos como soportepremium kits de assets o tutoriales Tambieacuten nos ofrece una versioacuten paraempresas que nos permite obtener una configuracioacuten personalizada

21

Figura 31 Versiones de Unity

El motor Unity nos permite desarrollar no solo videojuegos Tambieacuten nospermite desarrollar todo tipo de aplicaciones graacuteficas Tambieacuten se haincluido la opcioacuten de desarrollar aplicaciones moacuteviles para Android o iOSy todas las plataformas maacutes importantes de videojuegos actuales comoMicrosoft Nintendo o Sony

Otra de las ventajas de utilizar Unity es la Unity Store donde encontrarrecursos de todo tipo Muchos de ellos gratuitos Esto hace que podamosrealizar un videojuego sin necesidad de saber modelado 3D

32 Vuforia

De la empresa Qualcomm Vuforia es una de las plataformas de realidadaumentada que maacutes ha credico en el uacuteltimo antildeo Tiene maacutes de 30000desarrolladores en todo el mundo y grandes empresas como Audi Nike o Sonyentre otras ya la han usado

Vuforia es un SDK que permite visualizar imaacutegenes en 3D mediante la caacutemarade nuestro dispositivo De esta manera se mezclan objetos del mundo real ydel virtual Vuforia tambieacuten permite el reconocimiento de texto reconocimientode muacuteltiples targets al mismo tiempo y la deteccioacuten raacutepida de targets entreotras funcionalidades

22

Su arquitectura consta de cuatro elementos baacutesicos que procederemos adescribir a continuacioacuten

Caacutemara Capta la imagen para que posteriormente eacutesta sea procesadapor el Tracker

Base de Datos Almacena una serie de Targets para ser reconocidos porel Tracker Se crea con el Target Manager y puede ser local o en lanube

Target Se utilizan para permitir al Tracker el reconocimiento del mundoreal pueden ser de diferentes tipos como Image Targets o Word Targetentre otros

Tracker Analiza la imagen de la caacutemara y asiacute detecta los objetos delmundo real para buscar coincidencias en su base de datos

23

Figura 32 Diagrama de flujo de Vuforia

Una vez explicados los elementos de la arquitectura de Vuforia vamos aexplicar brevemente los pasos que sigue para el reconocimiento de unaimagen

Primero el dispositivo captura una escena mediente la caacutemara de viacutedeo

La SDK de Vuforia coge una imagen de las que componen el video yconvierte esa imagen a una resolucioacuten que el Tracker pueda manejar

Mediante el Tracker Vuforia analiza la imagen y busca similitudes en losTargets de la base de datos

Por uacuteltimo la aplicacioacuten puede renderizar el objeto 3D en la pantalla deldispositivo moacutevil y de esta manera crear realidad aumentada

24

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 18: Desarrollo de un juego de tablero con Realidad Aumentada

Figura 27 Pokemon GO

Gafas de RA Un ejemplo de estas son las Google Glass de laempresa Google Son unas gafas de realidad aumentadadestinadas a mostrarnos la informacioacuten de nuestro teleacutefono moacutevilsin necesidad de utilizar las manos tambieacuten podremos navegarpor internet por medio de oacuterdenes de voz

Psicologiacutea

El tema de la superacioacuten de traumas puede ser a veces un temadelicado un proceso largo y costoso Pero la realidad aumentada unavez maacutes son sorprende con sus aplicaciones esta vez en el campo de lapsicologiacutea Al permitir mostrar cuerpos digitales en un entorno realpodemos por ejemplo visualizar un miedo por ejemplo a las cucarachaso arantildeas en un entorno real y asiacute controlar como el paciente seacostumbra a su presencia controlando el nuacutemero y el comportamientode eacutestas Como ejemplo se hizo un estudio en la Universidad Politecnicade Valencia en el que se sometiacutea a diversas personas a la visualizacioacutende sus fobias en un entorno controlado [3]

18

Figura 28 Uso de la RA con fines terapeacuteuticos

Otro ejemplo de fobia que podemos superar mediante la realidadaumentada es la fobia a las alturas Mediante RA podemos hacer que unpaciente tenga la sensacioacuten de estar en un sitio alto o con caiacuteda sinninguacuten tipo de peligro[4]

Sector Industrial

Otro sector en el que la realidad aumentada ha logrado hacerse ver esen el sector industrial Un ejemplo son las gafas Moverio Pro BT-2000 dela empresa Epson donde los usuarios pueden ver lo que estaacuten viendootros trabajadores para asi mejorar la comunicacioacuten y permitir apoyar laformacioacuten de nuevos trabajadores

22 PropuestaLa finalidad de este trabajo es realizar un juego de realidad aumentadadonde por medio de unas imaacutegenes reales podremos seleccionar elpersonaje que queremos jugar Para luego introducirlo en un mapa concasillas en el que tiraremos un dado y avanzaremos casillas con nuestropersonaje Nos enfrentaremos a otro personaje controlado por la IA Elprimero que llegue a la uacuteltima casilla seraacute el vencedor

19

20

Capiacutetulo 3

Herramientas

31 Unity 3D

Unity 3D es una herramienta para el desarrollo de videojuegosmultiplataforma de la empresa Unity Technologies Existen otrasplataformas de desarrollo de videojuegos como UDK de Epic Games oCryEngine de CRYtek pero lo que adelanta Unity a las demaacutes es quepuede ser usado tanto para Windows como para Mac Unity viene convarias versiones desde la versioacuten gratuita hasta la versioacuten PRO por 125$al mes Esta uacuteltima nos ofrece unos servicios exclusivos como soportepremium kits de assets o tutoriales Tambieacuten nos ofrece una versioacuten paraempresas que nos permite obtener una configuracioacuten personalizada

21

Figura 31 Versiones de Unity

El motor Unity nos permite desarrollar no solo videojuegos Tambieacuten nospermite desarrollar todo tipo de aplicaciones graacuteficas Tambieacuten se haincluido la opcioacuten de desarrollar aplicaciones moacuteviles para Android o iOSy todas las plataformas maacutes importantes de videojuegos actuales comoMicrosoft Nintendo o Sony

Otra de las ventajas de utilizar Unity es la Unity Store donde encontrarrecursos de todo tipo Muchos de ellos gratuitos Esto hace que podamosrealizar un videojuego sin necesidad de saber modelado 3D

32 Vuforia

De la empresa Qualcomm Vuforia es una de las plataformas de realidadaumentada que maacutes ha credico en el uacuteltimo antildeo Tiene maacutes de 30000desarrolladores en todo el mundo y grandes empresas como Audi Nike o Sonyentre otras ya la han usado

Vuforia es un SDK que permite visualizar imaacutegenes en 3D mediante la caacutemarade nuestro dispositivo De esta manera se mezclan objetos del mundo real ydel virtual Vuforia tambieacuten permite el reconocimiento de texto reconocimientode muacuteltiples targets al mismo tiempo y la deteccioacuten raacutepida de targets entreotras funcionalidades

22

Su arquitectura consta de cuatro elementos baacutesicos que procederemos adescribir a continuacioacuten

Caacutemara Capta la imagen para que posteriormente eacutesta sea procesadapor el Tracker

Base de Datos Almacena una serie de Targets para ser reconocidos porel Tracker Se crea con el Target Manager y puede ser local o en lanube

Target Se utilizan para permitir al Tracker el reconocimiento del mundoreal pueden ser de diferentes tipos como Image Targets o Word Targetentre otros

Tracker Analiza la imagen de la caacutemara y asiacute detecta los objetos delmundo real para buscar coincidencias en su base de datos

23

Figura 32 Diagrama de flujo de Vuforia

Una vez explicados los elementos de la arquitectura de Vuforia vamos aexplicar brevemente los pasos que sigue para el reconocimiento de unaimagen

Primero el dispositivo captura una escena mediente la caacutemara de viacutedeo

La SDK de Vuforia coge una imagen de las que componen el video yconvierte esa imagen a una resolucioacuten que el Tracker pueda manejar

Mediante el Tracker Vuforia analiza la imagen y busca similitudes en losTargets de la base de datos

Por uacuteltimo la aplicacioacuten puede renderizar el objeto 3D en la pantalla deldispositivo moacutevil y de esta manera crear realidad aumentada

24

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 19: Desarrollo de un juego de tablero con Realidad Aumentada

Figura 28 Uso de la RA con fines terapeacuteuticos

Otro ejemplo de fobia que podemos superar mediante la realidadaumentada es la fobia a las alturas Mediante RA podemos hacer que unpaciente tenga la sensacioacuten de estar en un sitio alto o con caiacuteda sinninguacuten tipo de peligro[4]

Sector Industrial

Otro sector en el que la realidad aumentada ha logrado hacerse ver esen el sector industrial Un ejemplo son las gafas Moverio Pro BT-2000 dela empresa Epson donde los usuarios pueden ver lo que estaacuten viendootros trabajadores para asi mejorar la comunicacioacuten y permitir apoyar laformacioacuten de nuevos trabajadores

22 PropuestaLa finalidad de este trabajo es realizar un juego de realidad aumentadadonde por medio de unas imaacutegenes reales podremos seleccionar elpersonaje que queremos jugar Para luego introducirlo en un mapa concasillas en el que tiraremos un dado y avanzaremos casillas con nuestropersonaje Nos enfrentaremos a otro personaje controlado por la IA Elprimero que llegue a la uacuteltima casilla seraacute el vencedor

19

20

Capiacutetulo 3

Herramientas

31 Unity 3D

Unity 3D es una herramienta para el desarrollo de videojuegosmultiplataforma de la empresa Unity Technologies Existen otrasplataformas de desarrollo de videojuegos como UDK de Epic Games oCryEngine de CRYtek pero lo que adelanta Unity a las demaacutes es quepuede ser usado tanto para Windows como para Mac Unity viene convarias versiones desde la versioacuten gratuita hasta la versioacuten PRO por 125$al mes Esta uacuteltima nos ofrece unos servicios exclusivos como soportepremium kits de assets o tutoriales Tambieacuten nos ofrece una versioacuten paraempresas que nos permite obtener una configuracioacuten personalizada

21

Figura 31 Versiones de Unity

El motor Unity nos permite desarrollar no solo videojuegos Tambieacuten nospermite desarrollar todo tipo de aplicaciones graacuteficas Tambieacuten se haincluido la opcioacuten de desarrollar aplicaciones moacuteviles para Android o iOSy todas las plataformas maacutes importantes de videojuegos actuales comoMicrosoft Nintendo o Sony

Otra de las ventajas de utilizar Unity es la Unity Store donde encontrarrecursos de todo tipo Muchos de ellos gratuitos Esto hace que podamosrealizar un videojuego sin necesidad de saber modelado 3D

32 Vuforia

De la empresa Qualcomm Vuforia es una de las plataformas de realidadaumentada que maacutes ha credico en el uacuteltimo antildeo Tiene maacutes de 30000desarrolladores en todo el mundo y grandes empresas como Audi Nike o Sonyentre otras ya la han usado

Vuforia es un SDK que permite visualizar imaacutegenes en 3D mediante la caacutemarade nuestro dispositivo De esta manera se mezclan objetos del mundo real ydel virtual Vuforia tambieacuten permite el reconocimiento de texto reconocimientode muacuteltiples targets al mismo tiempo y la deteccioacuten raacutepida de targets entreotras funcionalidades

22

Su arquitectura consta de cuatro elementos baacutesicos que procederemos adescribir a continuacioacuten

Caacutemara Capta la imagen para que posteriormente eacutesta sea procesadapor el Tracker

Base de Datos Almacena una serie de Targets para ser reconocidos porel Tracker Se crea con el Target Manager y puede ser local o en lanube

Target Se utilizan para permitir al Tracker el reconocimiento del mundoreal pueden ser de diferentes tipos como Image Targets o Word Targetentre otros

Tracker Analiza la imagen de la caacutemara y asiacute detecta los objetos delmundo real para buscar coincidencias en su base de datos

23

Figura 32 Diagrama de flujo de Vuforia

Una vez explicados los elementos de la arquitectura de Vuforia vamos aexplicar brevemente los pasos que sigue para el reconocimiento de unaimagen

Primero el dispositivo captura una escena mediente la caacutemara de viacutedeo

La SDK de Vuforia coge una imagen de las que componen el video yconvierte esa imagen a una resolucioacuten que el Tracker pueda manejar

Mediante el Tracker Vuforia analiza la imagen y busca similitudes en losTargets de la base de datos

Por uacuteltimo la aplicacioacuten puede renderizar el objeto 3D en la pantalla deldispositivo moacutevil y de esta manera crear realidad aumentada

24

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 20: Desarrollo de un juego de tablero con Realidad Aumentada

20

Capiacutetulo 3

Herramientas

31 Unity 3D

Unity 3D es una herramienta para el desarrollo de videojuegosmultiplataforma de la empresa Unity Technologies Existen otrasplataformas de desarrollo de videojuegos como UDK de Epic Games oCryEngine de CRYtek pero lo que adelanta Unity a las demaacutes es quepuede ser usado tanto para Windows como para Mac Unity viene convarias versiones desde la versioacuten gratuita hasta la versioacuten PRO por 125$al mes Esta uacuteltima nos ofrece unos servicios exclusivos como soportepremium kits de assets o tutoriales Tambieacuten nos ofrece una versioacuten paraempresas que nos permite obtener una configuracioacuten personalizada

21

Figura 31 Versiones de Unity

El motor Unity nos permite desarrollar no solo videojuegos Tambieacuten nospermite desarrollar todo tipo de aplicaciones graacuteficas Tambieacuten se haincluido la opcioacuten de desarrollar aplicaciones moacuteviles para Android o iOSy todas las plataformas maacutes importantes de videojuegos actuales comoMicrosoft Nintendo o Sony

Otra de las ventajas de utilizar Unity es la Unity Store donde encontrarrecursos de todo tipo Muchos de ellos gratuitos Esto hace que podamosrealizar un videojuego sin necesidad de saber modelado 3D

32 Vuforia

De la empresa Qualcomm Vuforia es una de las plataformas de realidadaumentada que maacutes ha credico en el uacuteltimo antildeo Tiene maacutes de 30000desarrolladores en todo el mundo y grandes empresas como Audi Nike o Sonyentre otras ya la han usado

Vuforia es un SDK que permite visualizar imaacutegenes en 3D mediante la caacutemarade nuestro dispositivo De esta manera se mezclan objetos del mundo real ydel virtual Vuforia tambieacuten permite el reconocimiento de texto reconocimientode muacuteltiples targets al mismo tiempo y la deteccioacuten raacutepida de targets entreotras funcionalidades

22

Su arquitectura consta de cuatro elementos baacutesicos que procederemos adescribir a continuacioacuten

Caacutemara Capta la imagen para que posteriormente eacutesta sea procesadapor el Tracker

Base de Datos Almacena una serie de Targets para ser reconocidos porel Tracker Se crea con el Target Manager y puede ser local o en lanube

Target Se utilizan para permitir al Tracker el reconocimiento del mundoreal pueden ser de diferentes tipos como Image Targets o Word Targetentre otros

Tracker Analiza la imagen de la caacutemara y asiacute detecta los objetos delmundo real para buscar coincidencias en su base de datos

23

Figura 32 Diagrama de flujo de Vuforia

Una vez explicados los elementos de la arquitectura de Vuforia vamos aexplicar brevemente los pasos que sigue para el reconocimiento de unaimagen

Primero el dispositivo captura una escena mediente la caacutemara de viacutedeo

La SDK de Vuforia coge una imagen de las que componen el video yconvierte esa imagen a una resolucioacuten que el Tracker pueda manejar

Mediante el Tracker Vuforia analiza la imagen y busca similitudes en losTargets de la base de datos

Por uacuteltimo la aplicacioacuten puede renderizar el objeto 3D en la pantalla deldispositivo moacutevil y de esta manera crear realidad aumentada

24

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 21: Desarrollo de un juego de tablero con Realidad Aumentada

Capiacutetulo 3

Herramientas

31 Unity 3D

Unity 3D es una herramienta para el desarrollo de videojuegosmultiplataforma de la empresa Unity Technologies Existen otrasplataformas de desarrollo de videojuegos como UDK de Epic Games oCryEngine de CRYtek pero lo que adelanta Unity a las demaacutes es quepuede ser usado tanto para Windows como para Mac Unity viene convarias versiones desde la versioacuten gratuita hasta la versioacuten PRO por 125$al mes Esta uacuteltima nos ofrece unos servicios exclusivos como soportepremium kits de assets o tutoriales Tambieacuten nos ofrece una versioacuten paraempresas que nos permite obtener una configuracioacuten personalizada

21

Figura 31 Versiones de Unity

El motor Unity nos permite desarrollar no solo videojuegos Tambieacuten nospermite desarrollar todo tipo de aplicaciones graacuteficas Tambieacuten se haincluido la opcioacuten de desarrollar aplicaciones moacuteviles para Android o iOSy todas las plataformas maacutes importantes de videojuegos actuales comoMicrosoft Nintendo o Sony

Otra de las ventajas de utilizar Unity es la Unity Store donde encontrarrecursos de todo tipo Muchos de ellos gratuitos Esto hace que podamosrealizar un videojuego sin necesidad de saber modelado 3D

32 Vuforia

De la empresa Qualcomm Vuforia es una de las plataformas de realidadaumentada que maacutes ha credico en el uacuteltimo antildeo Tiene maacutes de 30000desarrolladores en todo el mundo y grandes empresas como Audi Nike o Sonyentre otras ya la han usado

Vuforia es un SDK que permite visualizar imaacutegenes en 3D mediante la caacutemarade nuestro dispositivo De esta manera se mezclan objetos del mundo real ydel virtual Vuforia tambieacuten permite el reconocimiento de texto reconocimientode muacuteltiples targets al mismo tiempo y la deteccioacuten raacutepida de targets entreotras funcionalidades

22

Su arquitectura consta de cuatro elementos baacutesicos que procederemos adescribir a continuacioacuten

Caacutemara Capta la imagen para que posteriormente eacutesta sea procesadapor el Tracker

Base de Datos Almacena una serie de Targets para ser reconocidos porel Tracker Se crea con el Target Manager y puede ser local o en lanube

Target Se utilizan para permitir al Tracker el reconocimiento del mundoreal pueden ser de diferentes tipos como Image Targets o Word Targetentre otros

Tracker Analiza la imagen de la caacutemara y asiacute detecta los objetos delmundo real para buscar coincidencias en su base de datos

23

Figura 32 Diagrama de flujo de Vuforia

Una vez explicados los elementos de la arquitectura de Vuforia vamos aexplicar brevemente los pasos que sigue para el reconocimiento de unaimagen

Primero el dispositivo captura una escena mediente la caacutemara de viacutedeo

La SDK de Vuforia coge una imagen de las que componen el video yconvierte esa imagen a una resolucioacuten que el Tracker pueda manejar

Mediante el Tracker Vuforia analiza la imagen y busca similitudes en losTargets de la base de datos

Por uacuteltimo la aplicacioacuten puede renderizar el objeto 3D en la pantalla deldispositivo moacutevil y de esta manera crear realidad aumentada

24

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 22: Desarrollo de un juego de tablero con Realidad Aumentada

Figura 31 Versiones de Unity

El motor Unity nos permite desarrollar no solo videojuegos Tambieacuten nospermite desarrollar todo tipo de aplicaciones graacuteficas Tambieacuten se haincluido la opcioacuten de desarrollar aplicaciones moacuteviles para Android o iOSy todas las plataformas maacutes importantes de videojuegos actuales comoMicrosoft Nintendo o Sony

Otra de las ventajas de utilizar Unity es la Unity Store donde encontrarrecursos de todo tipo Muchos de ellos gratuitos Esto hace que podamosrealizar un videojuego sin necesidad de saber modelado 3D

32 Vuforia

De la empresa Qualcomm Vuforia es una de las plataformas de realidadaumentada que maacutes ha credico en el uacuteltimo antildeo Tiene maacutes de 30000desarrolladores en todo el mundo y grandes empresas como Audi Nike o Sonyentre otras ya la han usado

Vuforia es un SDK que permite visualizar imaacutegenes en 3D mediante la caacutemarade nuestro dispositivo De esta manera se mezclan objetos del mundo real ydel virtual Vuforia tambieacuten permite el reconocimiento de texto reconocimientode muacuteltiples targets al mismo tiempo y la deteccioacuten raacutepida de targets entreotras funcionalidades

22

Su arquitectura consta de cuatro elementos baacutesicos que procederemos adescribir a continuacioacuten

Caacutemara Capta la imagen para que posteriormente eacutesta sea procesadapor el Tracker

Base de Datos Almacena una serie de Targets para ser reconocidos porel Tracker Se crea con el Target Manager y puede ser local o en lanube

Target Se utilizan para permitir al Tracker el reconocimiento del mundoreal pueden ser de diferentes tipos como Image Targets o Word Targetentre otros

Tracker Analiza la imagen de la caacutemara y asiacute detecta los objetos delmundo real para buscar coincidencias en su base de datos

23

Figura 32 Diagrama de flujo de Vuforia

Una vez explicados los elementos de la arquitectura de Vuforia vamos aexplicar brevemente los pasos que sigue para el reconocimiento de unaimagen

Primero el dispositivo captura una escena mediente la caacutemara de viacutedeo

La SDK de Vuforia coge una imagen de las que componen el video yconvierte esa imagen a una resolucioacuten que el Tracker pueda manejar

Mediante el Tracker Vuforia analiza la imagen y busca similitudes en losTargets de la base de datos

Por uacuteltimo la aplicacioacuten puede renderizar el objeto 3D en la pantalla deldispositivo moacutevil y de esta manera crear realidad aumentada

24

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 23: Desarrollo de un juego de tablero con Realidad Aumentada

Su arquitectura consta de cuatro elementos baacutesicos que procederemos adescribir a continuacioacuten

Caacutemara Capta la imagen para que posteriormente eacutesta sea procesadapor el Tracker

Base de Datos Almacena una serie de Targets para ser reconocidos porel Tracker Se crea con el Target Manager y puede ser local o en lanube

Target Se utilizan para permitir al Tracker el reconocimiento del mundoreal pueden ser de diferentes tipos como Image Targets o Word Targetentre otros

Tracker Analiza la imagen de la caacutemara y asiacute detecta los objetos delmundo real para buscar coincidencias en su base de datos

23

Figura 32 Diagrama de flujo de Vuforia

Una vez explicados los elementos de la arquitectura de Vuforia vamos aexplicar brevemente los pasos que sigue para el reconocimiento de unaimagen

Primero el dispositivo captura una escena mediente la caacutemara de viacutedeo

La SDK de Vuforia coge una imagen de las que componen el video yconvierte esa imagen a una resolucioacuten que el Tracker pueda manejar

Mediante el Tracker Vuforia analiza la imagen y busca similitudes en losTargets de la base de datos

Por uacuteltimo la aplicacioacuten puede renderizar el objeto 3D en la pantalla deldispositivo moacutevil y de esta manera crear realidad aumentada

24

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 24: Desarrollo de un juego de tablero con Realidad Aumentada

Una vez explicados los elementos de la arquitectura de Vuforia vamos aexplicar brevemente los pasos que sigue para el reconocimiento de unaimagen

Primero el dispositivo captura una escena mediente la caacutemara de viacutedeo

La SDK de Vuforia coge una imagen de las que componen el video yconvierte esa imagen a una resolucioacuten que el Tracker pueda manejar

Mediante el Tracker Vuforia analiza la imagen y busca similitudes en losTargets de la base de datos

Por uacuteltimo la aplicacioacuten puede renderizar el objeto 3D en la pantalla deldispositivo moacutevil y de esta manera crear realidad aumentada

24

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 25: Desarrollo de un juego de tablero con Realidad Aumentada

25

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 26: Desarrollo de un juego de tablero con Realidad Aumentada

Capiacutetulo 4

Desarrollo

41 Descripcioacuten

En este apartado del trabajo vamos a describir todo el proceso dedesarrollo de la aplicacioacuten Empezaremos cronoloacutegicamente desde lainstalacioacuten de las herramientas necesarias hasta la finalizacioacuten delproyecto

Nuestro proyecto consta de cuatro pantallas principales

Menuacute Pantalla inicial donde podemos seleccionar la accioacuten quequeremos hacer En esta pantalla se encuentran cuatro botonesdistintos Jugar Opciones Logros y Tienda El botoacuten Jugar noslleva a la siguiente pantalla Opciones abre un desplegable con laconfiguracioacuten del sonido Logros nos muestra una pantalla conciertos registros de puntuaciones y por uacuteltimo el botoacuten de Tiendaabre la pantalla de la tienda donde podremos comprar distintosobjetos

Seleccioacuten de Personaje En esta pantalla se usa la caacutemara delmoacutevil para seleccionar el personaje con el que queremos jugarmostraacutendole a la caacutemara distintos Targets

Juego Eacutesta es la pantalla principal del juego donde vamos a podertirar los dados para avanzar casillas hasta llegar al final Al terminar

26

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 27: Desarrollo de un juego de tablero con Realidad Aumentada

se abriraacute una ventana con las estadiacutesticas de la partida y sevolveraacute a la pantalla de Menuacute

La uacuteltima pantalla es la de Tienda donde podremos obtenerdistinos personajes y mapas

42 Pasos

Se ha dividido el desarrollo del proyecto en unos pasos para que seamaacutes faacutecil de explicar y de conocer la evolucioacuten del trabajo a lo largo deestos uacuteltimos meses

421 Instalacioacuten

Ahora vamos a hablar sobre la dificultad problemas y soluciones quehemos tenido a la hora de instalar las aplicaciones necesarias para eldesarrollo de este trabajo Es un punto interesante para futuras consultasya que puede ser complicado si es la primera vez que se realiza o si sequiere empezar a desarrollar videojuegos asiacute que este punto nos puedeservir de consulta

Empezaremos con Unity Esta herramienta es sencilla de instalarDebemos dirigirnos a su paacutegina web (httpsunity3dcomesunity)buscar la opcioacuten gratuita descargarla e instalarla Antes de descargarpodemos elegir si queremos la versioacuten para Windos o para MacPosteriormente podremos elegir si queremos la versioacuten de x32 o x64Ambas versiones no tienen ninguacuten tipo de problema de compatibilidadcon Vuforia con lo que podemos elegir la que mejor nos convenga Poruacuteltimo tendremos que crearnos una cuenta UnityID para poder empezar atrabajar Este uacuteltimo paso es opcional ya que una vez descargadopodemos elegir trabajar offline y de esta manera nos evitamos tener queintroducir la cuenta

27

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 28: Desarrollo de un juego de tablero con Realidad Aumentada

Una vez tengamos Unity descargado podemos pasar a descargar laherramienta Vuforia Para empezar deberemos dirigirnos a su paacuteginaweb (httpwwwvuforiacom) acceder al apartado de descargas ydescargar la versioacuten para Unity De esta manera se nos descargaraacute unarchivo de tipo Unity package con el que sencillamente arrastraacutendolo anuestro proyecto Unity nos importaraacute todo lo necesario para trabajar conrealidad aumentada Por uacuteltimo tendremos que darnos de alta en lapaacutegina de Vuforia mediante unos sencillos pasos para poder trabajar conlos Image Targets

Por uacuteltimo necesitaremos el SDK de Android ya que la aplicacioacuten quevamos a realizar va a ser para dispositivos Android Tenemos quedirigirnos a la paacutegina de Android Studio(httpsdeveloperandroidcomstudioindexhtml) buscamos la seccioacuten dedescarga y tenemos que dirigirnos al SDK de Android Una vezdescargado recordamos la ruta donde lo tenemos ya que a la hora deconstruir el APK debemos indicarle a Unity doacutende buscarlo

Una vez tengamos estas tres herramientas instaladas podemos empezara desarrollar nuestra aplicacioacuten movil de realidad aumentada

422 Buacutesqueda de aplicaciones similares

La primera tarea fueacute buscar aplicaciones que se parecieran a la nuestraen la tienda de Android hay una gran variedad Tenemos aplicaciones

28

Figura 41 Descarga de Unity

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 29: Desarrollo de un juego de tablero con Realidad Aumentada

para visualizar dinosaurios planetas aplicaciones educativas comoapoyo a libros y alguacuten que otro juego

Figura 42 Aplicaciones similares de RA

En general no se han encontrado aplicaciones con muchas descargasEsto nos hace pensar que en el mundo de las aplicaciones paradispositivos moacuteviles la realidad aumentada auacuten no ha logradointroducirse

Uno de los principales problemas que hemos encontrado ha sido que encada aplicacioacuten se tiene que descargar e imprimir la imagen con la que eldispositivo moacutevil nos mostraraacute el objeto 3D Esto es un problema si auacutenno sabemos si la aplicacioacuten nos va a gustar ya que en un momento sepueden probar muchas y es un desperdicio imprimirse la imagen de cadauna Eacuteste es un factor que no queremos en nuestra aplicacioacuten en unprincipio queremos que los usuarios puedan disfrutar de una experienciade juego primeriza sin tener que imprimirse nada La solucioacuten de esteproblema seriacutea buscar objetos que la mayoriacutea de usuarios tengan encasa y utilizarlos como Image Target Asiacutepues el elemento que surgioacutefueron las cartas de la baraja ya que tienen imaacutegenes faacutecilmentereconocibles por la caacutemara y la mayoriacutea de usuarios pueden tenerlas encasa

29

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 30: Desarrollo de un juego de tablero con Realidad Aumentada

423 Primeras pruebas

Una vez instaladas las herramientas necesarias el primer paso delproyecto ha sido probarlas en pequentildeos proyectos de Vuforia paraaprender a manejar primero uno y posteriormente diversos targets almismo tiempo

Como hemos dicho en el punto anterior vamos a usar las cartas de labaraja espantildeola como Image Targets Asiacute pues el primer paso estransformarlas a assets de Unity mediante la paacutegina de Vuforia

El primer proyecto consta simplemente de una carta y un objeto 3Dencima como podemos ver en la Figura 43 Es un proyecto para verificarque todos los elementos funcionan correctamente

Figura 43 Target simple

Posteriormente se ha probado el mismo proyecto probando a antildeadirdistintos elementos al mismo tiempo Como podemos ver en la Figura 44tenemos cuatro Targets reconocidos a la vez con figuras distintas

Para terminar se probo antildeadir alementos descargados de la tienda deUnity a los Targets y por uacuteltimo tambieacuten se antildeadieron algunas pequentildeasanimaciones

30

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 31: Desarrollo de un juego de tablero con Realidad Aumentada

Figura 44 Muacuteltiples Targets

424 Interfaces

La primera tarea para empezar el proyecto ha sido la creacioacuten de lasinterfaces Como hemos comentado anteriormente tenemos cuatropantallas principales Menuacute Seleccioacuten de personaje Juego y tienda perosolo dos de ellas necesitan interfaces completas ya que las otras utilizanla caacutemara

Al principio se disentildearon unas interfaces simples con un color de fondo ylos botones por defecto de Unity ya que se queriacutea implementar la

31

Figura 45 Pantalla principal

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 32: Desarrollo de un juego de tablero con Realidad Aumentada

funcionalidad antes de hacer la parte maacutes decorativa Una vez terminadose decoraron las interfaces para hacerlas maacutes acordes al proyecto

Para hacer maacutes claro el flujo de las interfaces del juego vamos aexplicarlas apoyaacutendonos en el diagrama mostrado en la Figura 46

Para empezar tenemos la pantalla principal eacutesta es la pantalla que seabre al ejecutar el juego Esta pantalla tiene un botoacuten de opciones dondepodremos modificar pequentildeos ajustes como el sonido la muacutesica o elidioma Tenemos tambieacuten un botoacuten que conduce a la tienda en la quepodremos gastarnos el dinero que nos den por ganar partidas Una vezen la tienda podremos volver a la pantalla principal pulsando el botoacutenVolver Por uacuteltimo tenemos el botoacuten jugar que nos llevaraacute a la pantalla deseleccioacuten de personaje En esta pantalla seleccionamos nuestropersonaje y pasamos a la pantalla de juego

En esta uacuteltima realizaremos las tiradas correspondientes y vermos coacutemonuestro personaje se iraacute moviendo Cuando nosotros o nuestrocontrincante llegue a la uacuteltima casilla el juego se terminaraacute y apareceraacuteun desplegable con un botoacuten para volver a la pantalla de inicio

Figura 46 Diagrama de flujo

32

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 33: Desarrollo de un juego de tablero con Realidad Aumentada

425 Fase Inicial del Desarrollo

Vamos a dividir el desarrollo en dos fases En eacutesta explicaremos lastareas baacutesicas que se han realizado y en la fase posterior se explicaraacutenlas tareas maacutes destinadas a la programacioacuten y a los uacuteltimos retoques dela aplicacioacuten

Una vez las interfaces simples estuvieron hechas la primera tarea que sehizo fue la creacioacuten de la pantalla de seleccioacuten de personaje paraempezar se seleccionoacute un caraacutecter de la tienda de Unity para descargarloy utilizarlo se comproboacute que no habiacutea ninguacuten problema en introducirlocomo elemento en el Image Target se antildeadieron las animaciones quetraia por defecto y por uacuteltimo se implementoacute el botoacuten que pasaba a lasiguiente pantalla

Una vez en la pantalla de juego se construyoacute un tablero simple y sindecoraciones donde se posicionaba el personaje en la primera casilla unbotoacuten para tirar los dados Tambieacuten se implementaron las funcionesnecesarias para que el personaje avanzara de casillas Por uacuteltimo el finaldel juego con una pantalla donde apareciacutea el cartel de victoria y un botoacutenque nos llevaba a la pantalla principal Tambieacuten se antildeadioacute lo que seraacute eloponente de nuestro personaje

Figura 47 Tablero inicial

33

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 34: Desarrollo de un juego de tablero con Realidad Aumentada

425 Fase Final del Desarrollo

Una vez se tuvo la funcionalidad baacutesica se empezaron a antildeadir mejorasLa primera mejora fue la de un personaje que lo controla la IA del juegopara competir contra el nuestro que explicaremos maacutes adelante Lafuncioacuten baacutesica de este personaje es tirar el dado para sacar puntuacioacuten yavanzar casillas

Tambieacuten se han antildeadido dos pantallas de fin de juego Una para cuandoel usuario resulta ganador y otra para cuando pierda Otra mejora ha sidoantildeadir maacutes personajes en la pantalla de seleccioacuten de personaje

Figura 48 Seleccioacuten de personaje

Antes teniacuteamos un botoacuten simple para ejecutar nuestra tirada y ahoratenemos un dado que resulta maacutes visual y acorde a la temaacutetica Se hahecho a mano sin bajarnos ningun asset de la tienda consta de un cubocon varias esferas para indicarnos la puntuacioacuten de cada cara Este dadollama a una funcioacuten que calcula un nuacutemero aleatorio entre 1 y 6 Seguacuten elnumero que salga el dado rotaraacute un angulo concreto para mostrarnos elnuacutemero que hayamos sacado Esta tirada se suma a la puntuacioacuten queya hemos conseguido anteriormente en el caso de que sea la primeratirada se suma a 0 Y por uacuteltimo el personaje se mueve a lascoordenadas de la casilla correspondiente

34

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 35: Desarrollo de un juego de tablero con Realidad Aumentada

Figura 49 Tirada del Juego

Una vez terminado nuestro turno empezaraacute el turno de nuestrocontrincante que realiza los mismos pasos que nosotros calcula unnuacutemero aleatorio mueve el dado y por uacuteltimo realiza su movimiento

Si el total de la tirada es mayor al del nuacutemero total de casillas nosmoveremos a la uacuteltima casilla y se terminaraacute el juego

Cuando se termina el juego si nuestro personaje resulta ganador nosrecompensaran con 100 monedas Esto nos lleva a la explicacioacuten de lapantalla de la tienda accesible desde la pantalla principal En estapantalla podremos gastarnos las monedas que nos den por ganar Loque podemos comprar baacutesicamente son skins para los personajes Estasskins lo uacutenico que hacen es cambiar el aspecto visual del personaje nocambia la funcionalidad ni las animaciones

35

Figura 410 Tienda del juego

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 36: Desarrollo de un juego de tablero con Realidad Aumentada

36

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 37: Desarrollo de un juego de tablero con Realidad Aumentada

Capiacutetulo 5

Conclusiones

En este trabajo hemos desarrollado un juego de tablero con RA paradispositivos moacuteviles Para su desarrollo se ha usado Unity y para el manejo dela RA se ha usado Vuforia La aplicacioacuten es un juego por turnos dondedebemos lanzar un dado y en base a esa puntuacioacuten movernos hasta llegar alfinal

Como hemos podido comprobar Unity y Vuforia son una pareja deherramientas que nos dan mucha facilidad a la hora de implementar larealidad aumentada a cualquier aplicacioacuten Praacutecticamente sin saber nadade estas dos herramientas en unos pocos meses se ha conseguidorealizar una aplicacioacuten funcional sin problemas

Ambas plataformas tienen un buen soporte a la hora de consultar API oresolver alguna pregunta concreta en el foro Hemos visto tambieacuten que larealidad aumentada es una tecnologiacutea impresionante que gusta mucho alos usuarios que la prueban Como hemos dicho anteriormente estatecnologiacutea estaacute auacuten por despegar y va a tener seguro un papelimportante en nuestras vidas

37

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 38: Desarrollo de un juego de tablero con Realidad Aumentada

38

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 39: Desarrollo de un juego de tablero con Realidad Aumentada

Bloque 6

Trabajos Futuros

La versioacuten final de la aplicacioacuten es una versioacuten muy pequentildea encomparacioacuten de lo que se podriacutea llegar a hacer Este trabajo trata sobrela realidad aumentada asiacute que en teacuterminos de la aplicacioacuten no nos hemosmetido tanto como se deberiacutea hacer en caso de que se quisieracompletar

Para tener un juego completo deberiacuteamos ampliar tanto los personajes aelegir como los mapas Con respecto a los personajes los que estaacutenimplementados ahora son versiones de la tienda de Unity En el caso deque quisieacuteramos completar el juego deberiacuteamos hacer nuestros propiosdisentildeos 3D y ampliar la seleccioacuten Lo mismo ocurre con los mapas Eneste proyecto son simplemente unas casillas interconectadas peropueden ser verdaderos mapas con decorados y animaciones Esto haraacuteque el usuario interaccione maacutes con la aplicacioacuten Otra mejora que sepodriacutea implementar es la tienda con dinero real dando la posibilidad alusuario de pagar por personajes o mapas

Eacutestas son solo unas ideas para mejorar la aplicacioacuten que se hanquedado fuera del proyecto por no tener relevancia con el verdaderopropoacutesito de este trabajo la realidad aumentada

39

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 40: Desarrollo de un juego de tablero con Realidad Aumentada

40

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41

Page 41: Desarrollo de un juego de tablero con Realidad Aumentada

Bibliografiacutea[1] Milgram P Kishino F (1994) A taxonomy of mixed reality visual

displays IEICE (Institute of Electronics Information andCommunication Engineers) Transactions on Information and SystemsSpecial issue on Networked Reality E77-D(12) 1321-1329

[2] Juan M C Canu R Gimeacutenez M (2008) Augmented realityinteractive storytelling systems using tangible cubes for edutainmentThe 8th IEEE International Conference on Advanced LearningTechnologies (ICALT 2008) pp 233-235

[3] Juan M C Alcantildeiz M Monserrat C Botella C Bantildeos RGuerrero B (2005) Using Augmented Reality to treat phobias IEEEComputer Graphics and Applications vol 25 N 6 pp 31-37

[4] Juan M C Bantildeos R Botella C Peacuterez D Alcantildeiz M MonserratC (2006) An augmented reality system for acrophobia The sense ofpresence using immersive photography Presence Teleoperators andvirtual environments vol 15 N 4 pp 393-402

41