{"id":73803,"date":"2025-11-26T15:56:26","date_gmt":"2025-11-26T20:56:26","guid":{"rendered":"https:\/\/niixer.com\/?p=73803"},"modified":"2025-11-27T16:35:45","modified_gmt":"2025-11-27T21:35:45","slug":"el-desafio-definitivo-de-los-tres-laberintos","status":"publish","type":"post","link":"https:\/\/niixer.com\/index.php\/2025\/11\/26\/el-desafio-definitivo-de-los-tres-laberintos\/","title":{"rendered":"Trilab: El Desaf\u00edo Definitivo de los Tres Laberintos \u2013 Una Experiencia Unity"},"content":{"rendered":"\n

Como parte de nuestra implementaci\u00f3n a Unity, tenemos que tener en cuenta que Existen diferentes Versi\u00f3n y cada una de ellas cuenta con diferencias de componente, diseno y estructuraciones de men\u00fas, independencias, librer\u00edas entre muchas mas, para esta implementaci\u00f3n usaremos la versi\u00f3n de Unity 6000.2.10f.<\/p>\n\n\n\n

Crear un proyecto en Unity<\/h2>\n\n\n\n

A continuaci\u00f3n daremos los primeros pasos para crear un proyecto en Unity, iniciando con la creaci\u00f3n y el motor grafico que usaremos en este caso crearemos un juego 3D<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Abrir el proyecto<\/h2>\n\n\n\n

Al finalizar la configuraci\u00f3n de los paquetes de Unity para implementar el motor Grafico 3D, se nos presenta en el men\u00fa de Proyecto cada uno de los archivos creado.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Sistema de Carpetas<\/h2>\n\n\n\n

Antes de Comenzar nuestro proyecto es fundamental crear diferentes carpetas donde podamos alojar cada unos de nuestros Assets, im\u00e1genes, personajes, scripts, entre otros, esta divisi\u00f3n de carpeta nos ayudan encontrar con mayor facilidad cada unos de los elementos que conforman nuestro proyecto<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Crear nuestro primer paredes<\/h2>\n\n\n\n

Una de las cosas mas usada en Unity es el objeto Game Object, este nos ayuda a diferentes cosas, es tambi\u00e9n llamado el objeto fundamental de una escena, sirviendo como un contenedor para componentes<\/strong> que definen su apariencia, funcionalidad y comportamiento.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Vista desde el eje y<\/strong><\/h2>\n\n\n\n

Unity nos permite igual que otro motores gr\u00e1ficos como Blender mover los 3 ejes para visualizar de mejor manera nuestra escena y cada uno de los objetos que la interpreten.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Pantallazos Escalar y movemos<\/strong><\/p>\n\n\n\n

Extruir y escalar son dos herramientas muy usadas en Unity para ellos usaremos las teclas de “w” para mover nuestro objeto y “R” para escalar el mismo<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Agregar las puertas una de Sketchfab y la otra dise\u00f1o propio<\/strong><\/h2>\n\n\n\n

Sketchfab <\/a>es una herramienta que tiene diferentes Assets, con Sketchfab podemos avanzar mas r\u00e1pido en nuestro proyecto, debido a que no tenemos que crear cada objeto desde 0, podemos usar estos modelos ya dise\u00f1ados , como puestas, llaves, escenas, entre otras cosas, si deseas saber mas sobre exportaciones y importaciones en Blender entreal siguiente link<\/a>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Solo una puerta abrimos Blender<\/strong><\/h2>\n\n\n\n

Despu\u00e9s de escoger y descargar el Assets que mas nos gusta tendremos que realizar algunas modificaciones, para ello usaremos un motor grafico distinto que nos ayuda a esto el cual es Blender, para aprender mas sobre Blender Entra al siguiente link<\/a>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Este es el proceso que tenemos que realizar para que cada modelo que de bien implementado en el motor grafico de Unity, para saber mas sobre Blender mira el siguiente link<\/a>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Nueva carpeta en Assets  para guardar las puertas llama \u201cMateriales\u201d<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Para Importar las puertas, ya exportados en fbx, en la carpeta del proyecto Assets y Materiales, pegamos los Fbx<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Al colocar los materiales exportados en Blender Autom\u00e1ticamente se implementa la textura de cada uno de estos, como podemos ver en la imagen.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Colocar puerta de entrada<\/strong><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Realizaremos copia de paredes para empezar a hacer el laberinto<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Animaci\u00f3n Personaje<\/strong><\/h2>\n\n\n\n

Una de las herramientas m\u00e1s usadas para crear animaciones, es mixamo<\/a>, esta tiene una categor\u00eda de cientos de movimiento ya renderizados, con un esqueleto ya implementado y adicionalmente cuenta con diferentes personajes para  escoger desde ogros, brujas, monstruos entre muchos m\u00e1s.<\/p>\n\n\n\n

Para realizar las animaciones primero se importara un modelo fbx o glb de un personaje<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Para las animaciones en mixamo vamos a descargar la primera que es la de correr, seleccionamos la de nuestra preferencia y damos click en \u201cIn place\u201d para que el personaje corra en el mismo sitio sin moverse<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Descargamos sin piel y ahi se importa en Unity<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

El modelo que se tiene del personaje es un tipo de formato glb, pero en unity no se puede realizar las animaciones con este tipo de archivo, por lo que lo vamos a pasar a fbx. Para esto vamos a abrir el formato glb en blender y ahi lo exportamos en fbx.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Guardando el modelo en fbx, se importa en unity. Aqu\u00ed se tuvo un problema porque las exportaciones fbx me estaban saliendo sin texturas por lo que la soluci\u00f3n fue teniendo los dos modelos tanto fbx como glb, fue colocarle las texturas que tenia el de glb al otro modelo.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Los materiales (los que tienen una forma circular) los muevo uno por uno hasta adherirlos al que corresponde. Con el modelo fbx empezamos a trabajar en la animaci\u00f3n.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Configurar Animaciones en Blender<\/h2>\n\n\n\n

Como parte de la configuraci\u00f3n esencia de Unity, temeos que darle el mismo esquelos ha cada uno de las animaciones de Mixamo, para ello daremos click en el personaje y a la derecha en el inspector se coloca la siguiente configuraci\u00f3n y tambi\u00e9n se realiza lo mismo con la animaci\u00f3n de running.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Animaci\u00f3n en el Rig se coloca la siguiente configuraci\u00f3n<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

En la pesta\u00f1a Animator se coloca lo siguiente<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Componente al personaje llamado Animator y se pone la siguiente configuraci\u00f3n<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Agregar un componente al personaje llamado Rigidbody ,para estar el personaje afectado por la gravedad, un Capsule Collider para la interacci\u00f3n con los otros objetos.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Collider para ajustarlo al personaje<\/strong><\/h2>\n\n\n\n

Como parte de la configuraci\u00f3n esencia de Blender es necesario agregar un add component a cada uno de los personaje, en este caso es necesario implementar un adicional que nos permite tener colisiones en nuestro personaje, para esto usaremos el Collider que podemos implementar en cada uno de los inspector que tiene cada Game Object.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Script para el movimiento del personaje, se crea una carpeta para los script<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Se crea un animator controller<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Creamos un nuevo estado con click derecho, donde ah\u00ed se podr\u00e1n agregar las animaciones de correr y pudiendo identificar los \u201cx\u201d y \u201cy\u201d que es como podemos ver que animaci\u00f3n realizar. Damos doble click cuando lo hayamos creado el Blend Tree.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Vamos a agregar dos par\u00e1metros y cambiamos el Blend Type.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

En las animaciones en el Project vamos a copiarlos (Ctrl + D),<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Modificamos el c\u00f3digo para que los par\u00e1metros que agregamos en el Animator puedas recibirlos desde el script, del movimiento del personaje. El c\u00f3digo agregado quiere decir que se colocar\u00e1 los valores de \u201cx\u201d y \u201cy\u201d a las variables que se escriban.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Crear nuestros escenarios, es indispensable crear un Gameobject, seleccionaremos una esfera como par\u00e1metro visual de donde estar\u00e1 nuestro personaje en un futuro.<\/p>\n\n\n\n

Como parte fundamental de nuestro juego en 3D necesitamos que la c\u00e1mara siga al personaje y para ellos vamos dirigirnos a el personaje en el Hierarchy<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Creaci\u00f3n de la antorcha<\/strong><\/h2>\n\n\n\n

Se crea un sistema de part\u00edculas<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Cambaremos el color a uno rojo para poder distinguirlo mejor<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

En el Shape ponemos la siguiente configuraci\u00f3n para determinar el radio y que sea m\u00e1s reducido el fuego<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Se marca la opci\u00f3n \u201cSize over lifetime\u201d y agregamos un boyfriend, colocamos de la siguiente manera<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Vamos a trabajar un poco la textura para que se vea mas real, en un navegador buscamos \u201cfuego fondo negro\u201d y seleccionan cualquiera, y guarda la imagen.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Se agrega en los assets, y se va a crear un nuevo material y luego se arrastra la imagen a Base Map en el material creado.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

En el material, el Shader se cambia a Universal Render Pipeline y Unlit, y en el Surface Options se colocan las siguientes modificaciones.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Para darle m\u00e1s realismo se va a crear un Point light para darle m\u00e1s luz y ahora se arrastra la luz hacia el sistema de part\u00edculas, y luego estas se posicionan encima de la antorcha, finalmente se arrastra el sistema de part\u00edculas a la antorcha en el Hierarchy<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Ya teniendo la antorcha haremos que el jugador recoja la antorcha, para esto se crea un objeto vac\u00edo en el personaje, y vamos hasta donde este los huesos de la mano, creando object empty.<\/p>\n\n\n\n

Ahora con el objeto que vamos a interactuar se crea un box collider para poder chocar con \u00e9l. y creamos un object empty dentro de la antorcha, y tambi\u00e9n se le agrega un box collider para poder agarrarlo.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Ahora se crea un script para efectuar y poder recoger la antorcha<\/p>\n\n\n\n

Y por ultimo se arrastra el script al object empty de la antorcha y se agregan las variables que se requieren del script<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Como implementar la oscuridad en nuestro nivel de Blender<\/strong><\/h2>\n\n\n\n

Nos ubicamos en la parte superior en en la barra de herramientas, buscamos window, Rendering y lighting, environment colocamos la ambientaci\u00f3n de color negro.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

En el directional light se pone la intensidad en 0<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Agregamos neblina para poner m\u00e1s intriga y misterio al laberinto, en el mismo lado donde se modific\u00f3 en windows rendering, en environment, abajo other settings se activa la opci\u00f3n de fog   <\/p>\n\n\n\n

Minijuego (Puzzle)<\/strong><\/h2>\n\n\n\n

Crear una carpeta donde se va alojar las escena y el minijuego. Lo primero para realizar el puzzle es instalar el plugin de fungus.<\/p>\n\n\n\n

En la ventana de windows vamos a Package Manager y se busca Fungus y se importa. Vamos a pasar nuestra imagen a nuestro proyecto.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Modificamos en el inspector para poder realizar las modificaciones a la imagen<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

En Open Sprite Editor abrimos, y se subdividen las columnas y filas que se deseen.<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

En este punto es indispensable crear un fondo de el Puzzle y lo que esta detra, para que el usuario pueda determinar bien donde esta el cuadrante de cada pieza del rompecabezas Ahora en nuestra c\u00e1mara vamos a poner un fondo negro<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Como agregar el Puzzle a un Canva<\/h2>\n\n\n\n

Nos dirigimos ha Tools y creamos en fungus un Flowchart para realizar el puzzle sin una l\u00ednea de c\u00f3digo<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Agregamos en el mismo lugar un view y empezamos a agregar las im\u00e1genes una por una al view, y luego las organizamos.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Ahora vamos a trabajar con cada una de las piezas para agregarle cada una de las propiedades, y est\u00e1n se mueven al seleccionarse, cuales son los componentes que usaremos: Clickable 2D y Box collider 2D.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Como Implementar configurar el FlowChar en Unity<\/h2>\n\n\n\n

Ya cargados los componentes a todas las piezas iniciamos a trabajar con Flowchart, se agregaran el mismo n\u00famero de bloques de cuantas piezas hayan (se agrega con el +). Por cada bloque en Execute On Event se cambia a Sprite\/Object Clicked, el cual indicar\u00e1 que se dispara cuando se le de click en pantalla, pero vamos a agregar en que pieza se ejecuta ese bloque, y asi con todas las piezas.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Para agregarle la l\u00f3gica, se realiza con cada bloque creado haciendo que la pieza clickeada gire cada 90\u00b0. Para agregar la funci\u00f3n en el + y buscamos la opci\u00f3n LeanTween\/Rotate.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Ya agregado se configura de la siguiente manera para que la pieza realice el movimiento<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Colocar condiciones en cada bloque (condicional if), si el bloque seleccionado es el \u00faltimo que va a tocar  o es cualquier otro, y tambi\u00e9n vamos a crear variables antes para realizar las condiciones.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Crear las variables se crean las siguientes variables<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Hacer la condici\u00f3n en cada bloque es<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

necesitamos corregirle error de Transfor para ellos tomaremos el Transform para tomar el valor de Z cuando le den a la pieza clic<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Se agrega un if para saber si z es igual o menor que 0, entonces se agrega un nuevo If<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Para que cuando ya est\u00e9 ubicada correctamente la pieza se utiliza un st clickeable<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Se agrega un contador para saber cuando ya est\u00e1 bien posicionada y de esa manera el jugador pueda saber que ya puede seguir con el siguiente<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Nuestros bloques con las condicionales fueron <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Por \u00faltimo para hacer que las rotaciones antes de iniciar el juego salen aleatoriamente se crea un script y se pondr\u00e1 en el Fungus, en el objeto donde se encuentran todas las piezas se agrega el script.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Time en el Canva<\/h2>\n\n\n\n

Crear el timer, en el canvas vamos a crear un text, con clic derecho en canvas, vamos a UI y en Legacy seleccionamos Text y ya nos aparecer\u00e1.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Ubicamos el Text en la parte superior izquierda <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Posteriormente tenemos que ingresar un plano donde nuestro personaje va a interactuar con el escenario.<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Al finalizar con la inserci\u00f3n de nuestro plano vamos a realizar un material de diferentes colores, para el personaje y el piso.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

A Continuaci\u00f3n comenzaremos a crear nuestro muro, para ellos comenzaremos repetiremos nuestro proceso de  Gameobject,posteriormente destruiremos las dimensiones de  X y Y, nos dirigiremos con Inspector para poder modificar las dimensiones.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

 Continuando con las modificaciones de nuestras paredes usaremos el comando r\u00e1pido para Extruir objetos,presionamos “R” para extruir el objeto.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Repetiremos el proceso para crear cada una de las paredes de nuestro laberinto.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Configuraci\u00f3n controller jugador<\/strong><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

configuraci\u00f3n c\u00e1mara con el personaje.<\/strong><\/h2>\n\n\n\n

Arrastrar el script de la configuraci\u00f3n de la c\u00e1mara a nuestra c\u00e1mara principal<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Configurar la c\u00e1mara para posicionarse con el objeto que deseamos, en esta caso el jugador<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Agregando una salida al juego <\/strong><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Vamos a la configuraci\u00f3n del objeto Box Collider y habilitamos Is Trigger(se puede atravesar)<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Adicional pondremos un etiqueta o tag para saber cuando el jugador atraviesa la salida<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Configurar Tracking Target colocar el objeto y ajustar position control orbital follow<\/strong><\/h2>\n\n\n\n

En el script de movimiento Controlador, realizaremos algunas modificaciones para respecto a la c\u00e1mara y el movimiento del personaje, debido a que la c\u00e1mara y el movimiento ten\u00edan configuraciones ambiguas, lo que realizaremos es que el personaje se pueda mover en la direcci\u00f3n correcta independientemente de la traslaci\u00f3n de la c\u00e1mara para ellos capturaremos el transform de la C\u00e1mara y ajustaremos los detalles del movimiento en la funci\u00f3n MoveCube.<\/p>\n\n\n\n

Ajustar c\u00e1mara<\/strong><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Importar modelos de avaturn<\/h2>\n\n\n\n

Para la creaci\u00f3n de nuestro modelo en 3D, para el personaje principal, usaremos la herramienta de Avaturn<\/a>, la cual nos permite crear un modelo en 3D, con un rostro personalizado.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Crear animiaciones del personaje<\/h2>\n\n\n\n

Despu\u00e9s de importar nuestro modelo con el rostro personalizado que creamos en Avaturn, exportaremos el modelo para usarlo en Maxiamo.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Al momento de importar el modelo tenemos que tener en cuenta si la animaci\u00f3n es una en movimiento o es algo est\u00e1tico, en el caso de que sea una animaci\u00f3n con movimiento de desplazamiento en el eje X, tener en cuenta seleccionar el bot\u00f3n de in-place ya que el recorrido se realiza en los Scripts de programaci\u00f3n.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Escoger todos los .fbx de neustro modelo y escoger es humanind<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Ahora escogeremos los 3 assets de movimiento(caminar, correr y esperar), para configurarlos con el esqueleto que tiene nuestro modelo en pose-T.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Configuraci\u00f3n enemigo<\/strong><\/h2>\n\n\n\n

Para continuar con el proceso realizaremos los mismo pasos para el enemigo que nos va a perseguir al 3 nivel, buscaremos un modelo en Mixamo, usaremos movimientos como Idle,left walk, running,Posterior  a esto realizaremos un nuevo Script y Animation.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Generar un box collider al golpe de nuestro personaje y adicionaremos un add even al final de la animaci\u00f3n para que blender sepa cuando finaliza la animaci\u00f3n, para ello buscaremos el m\u00e9todo creado en los Script que se llama final Ataque.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

void finalAtaque()<\/p>\n\n\n\n

    {<\/p>\n\n\n\n

        animator.SetBool(“attack”, false);<\/p>\n\n\n\n

        ataque = false;<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

A\u00f1adiendo un box collider a la mano derecha de Enemigo<\/h2>\n\n\n\n

Como parte de las colisiones de cada personaje es necesario agregar una nueva Colision al enemigo para eso nos dirigiremos a Animation, para ver frame a frame que esta sucediendo en la animaci\u00f3n.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Despu\u00e9s de mirar exactamente cual es el frame donde el enemigo golpea en ese preciso momento tenemos que agregar un Collider, o en algunos casos activarlo.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Configurar imagen foto de vida, la imagen debe quedar en Texture Type,en la opcion de Sprite 2D<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Complemento Inteligencia Artificial para Esquivar Obst\u00e1culos<\/h2>\n\n\n\n

Continuando con las configuraci\u00f3n de los par\u00e1metros de nuestro enemigo, vamos a implementar una rutina m\u00e1s dentro de la l\u00f3gica del enemigo, la cual ayudar\u00e1 a que el enemigo no se quede estancado en paredes y  busque la manera de rodearlas o simplemente omitirlas, ayud\u00e1ndonos del package de Inteligencia Artificial que nos ofrece Unity.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Nos dirigiremos a Windows> AI>Navegation, esto con el fin de configurar el camino que puede tomar el agente en dado caso de que tenga un obst\u00e1culo en frente<\/p>\n\n\n\n

A continuacion nos dirigirnos a healthy, dar click en nuestro enemigo y a\u00f1adir un nuevo componente, Agente de navegaci\u00f3n para nuestro enemigo, despu\u00e9s de configurar el Agente lo pasamos a los componente del Script de la rutina del enemigo en la variable de agente.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Creaci\u00f3n del Primer Nivel<\/strong> <\/h2>\n\n\n\n

Lo que hicimos fue crear el Nivel 1 y agregar un Plane<\/em> como base. Luego creamos un objeto vac\u00edo y, dentro de \u00e9l, a\u00f1adimos un cubo que posteriormente convertimos en un muro. Lo escalamos y comenzamos a organizarlo hasta formar las paredes del laberinto. Adem\u00e1s, le aplicamos color a los muros para diferenciarlos visualmente.<\/p>\n\n\n\n

Tambi\u00e9n exportamos nuestro personaje desde Blender en formato FBX<\/strong> y lo importamos en Unity. Luego, en Mixamo, seleccionamos y descargamos las animaciones de correr y detenerse, que posteriormente incorporamos al personaje dentro del proyecto.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Creamos un script para controlar los movimientos del personaje y desarrollamos todo lo relacionado con la llave: colocamos la llave en el escenario, hicimos el script para recogerla y a\u00f1adimos las puertas. Para las puertas, creamos un script adicional que permite que una de las tres sea seleccionada aleatoriamente como la puerta correcta.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Creaci\u00f3n de Canvas<\/strong><\/h2>\n\n\n\n

Creamos todos los Canvas<\/em> del juego, incluyendo el men\u00fa principal, la pantalla de selecci\u00f3n de personajes, felicitaciones, game over<\/em>, cr\u00e9ditos, informaci\u00f3n de los controles y la pantalla final. Cada uno de estos Canvas<\/em> se cre\u00f3 en una escena independiente.<\/p>\n\n\n\n

Dentro de cada escena a\u00f1adimos un objeto llamado Canvas<\/strong> e importamos la imagen principal del juego como fondo. Luego creamos un t\u00edtulo para cada pantalla, al cual le cambiamos el color, le a\u00f1adimos sombra y le asignamos un tipo de letra importado.<\/p>\n\n\n\n

Tambi\u00e9n agregamos los botones correspondientes a cada funcionalidad y creamos los scripts necesarios para que cada bot\u00f3n realizara su acci\u00f3n. Finalmente, asignamos estos scripts a los botones dentro del Canvas<\/em>, configurando correctamente la funcionalidad que deb\u00eda ejecutar cada uno.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Men\u00fa inicial<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Agregar M\u00fasica<\/strong><\/h2>\n\n\n\n

Para la m\u00fasica ingresamos a la p\u00e1gina<\/a>, donde buscamos y descargamos la pista deseada. Luego la importamos en la carpeta Music<\/strong> dentro de Assets<\/em>.<\/p>\n\n\n\n

Despu\u00e9s, en cada Canvas<\/em> y en cada nivel del juego creamos un Audio Source<\/strong>, y desde all\u00ed asignamos la pista de audio importada. Finalmente, activamos la opci\u00f3n Loop<\/strong> para que la m\u00fasica se repita autom\u00e1ticamente cuando llegue al final.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

M\u00fasica Canvas<\/strong><\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Cambio de los Canvas de Pixeles<\/strong><\/h2>\n\n\n\n

Cuando creamos el ejecutable, los Canvas<\/em> se ve\u00edan extra\u00f1os: se hab\u00edan desplazado y aparec\u00edan muy peque\u00f1os. Al revisar, evidenciamos que todos estaban configurados en Pixels<\/strong>. Para solucionarlo, cambiamos la opci\u00f3n del Canvas Scaler<\/em> a Scale With Screen Size<\/strong>.
Gracias a este ajuste, al generar nuevamente el archivo .exe<\/strong>, los Canvas<\/em> se visualizaron correctamente y con el tama\u00f1o adecuado en pantalla.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Generaci\u00f3n del ejecutable para Pc<\/strong><\/h2>\n\n\n\n

Despu\u00e9s de tener incorporado los 3 niveles de los laberinto, solamente nos queda generar el ejecutable para Pc espec\u00edficamente Windows, los pasos mas importantes para nuestro ejecutable son el icono del Apk, nos dirigiremos a la barra de herramientas de la parte superior de nuestro motor Grafico de Unity de Daremos a File>Build Profile, en esta nueva ventana emergente podemos configurar todo los aspectos relevantes de nuestro Apk, como lo son la resoluci\u00f3n del juego, la resoluci\u00f3n de la pantalla el icon del ejecutable entre otros aspectos.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Scrips de los canvas<\/strong><\/h2>\n\n\n\n
using UnityEngine;\nusing UnityEngine.SceneManagement;\n\npublic class Creditos : MonoBehaviour\n{\n    [Header(\"Referencias a los Canvas\")]\n    public GameObject canvasMenu;       \/\/ Canvas principal\n    public GameObject canvasOpciones;   \/\/ Canvas de opciones\n\n    \/\/ Jugar \u2192 Ir a la escena para elegir personaje\n    public void MenuPrincipal()\n    {\n        SceneManager.LoadScene(\"Menu Principal\");\n    }\n\n    public void IrCreditos()\n    {\n        SceneManager.LoadScene(\"Creditos\");\n    }\n\n    public void Volver()\n    {\n        SceneManager.LoadScene(\"Nivel 3\");\n    }\n}\n<\/code><\/pre>\n\n\n\n
En su mayor\u00eda de los scripts del canvas son de esta manera entonces esta podria ser una manera de tomar los scripts<\/p>\n\n\n\n
Scrips de los niveles<\/strong><\/h2>\n\n\n\n
using UnityEngine;\n\npublic class Movimientos_Caroline : MonoBehaviour\n{\n    public float velocidad = 5.0f;\n    public float velocidadRotacion = 200.0f;\n    private Animator anim;\n    public float x, y;\n\n    void Start()\n    {\n        anim = GetComponentInParent<Animator>();\n    }\n\n    void Update()\n    {\n        x = Input.GetAxis(\"Horizontal\");\n        y = Input.GetAxis(\"Vertical\");\n\n        transform.Rotate(0, x * Time.deltaTime * velocidadRotacion, 0);\n        transform.Translate(0, 0, y * Time.deltaTime * velocidad);\n\n        anim.SetFloat(\"velX\", x);\n        anim.SetFloat(\"velY\", y);\n    }\n}\n\n<\/code><\/pre>\n\n\n\n

Nota:<\/strong> Si desea ver los archivos con mayor detalle o ampliar la informaci\u00f3n del proyecto, puede consultar el siguiente repositorio Git<\/a>.<\/p>\n\n\n\n
 Video del Video Juego<\/strong><\/h2>\n\n\n\n
\n