Trilab: El Desafío Definitivo de los Tres Laberintos – Una Experiencia Unity

Como parte de nuestra implementación a Unity, tenemos que tener en cuenta que Existen diferentes Versión y cada una de ellas cuenta con diferencias de componente, diseno y estructuraciones de menús, independencias, librerías entre muchas mas, para esta implementación usaremos la versión de Unity 6000.2.10f.

Crear un proyecto en Unity

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

Abrir el proyecto

Al finalizar la configuración de los paquetes de Unity para implementar el motor Grafico 3D, se nos presenta en el menú de Proyecto cada uno de los archivos creado.

Sistema de Carpetas

Antes de Comenzar nuestro proyecto es fundamental crear diferentes carpetas donde podamos alojar cada unos de nuestros Assets, imágenes, personajes, scripts, entre otros, esta división de carpeta nos ayudan encontrar con mayor facilidad cada unos de los elementos que conforman nuestro proyecto

Crear nuestro primer paredes

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

Vista desde el eje y

Unity nos permite igual que otro motores gráficos como Blender mover los 3 ejes para visualizar de mejor manera nuestra escena y cada uno de los objetos que la interpreten.

Pantallazos Escalar y movemos

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

Agregar las puertas una de Sketchfab y la otra diseño propio

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

Solo una puerta abrimos Blender

Después 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.

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.

Nueva carpeta en Assets  para guardar las puertas llama “Materiales”

Para Importar las puertas, ya exportados en fbx, en la carpeta del proyecto Assets y Materiales, pegamos los Fbx

Al colocar los materiales exportados en Blender Automáticamente se implementa la textura de cada uno de estos, como podemos ver en la imagen.

Colocar puerta de entrada

Realizaremos copia de paredes para empezar a hacer el laberinto

Animación Personaje

Una de las herramientas más usadas para crear animaciones, es mixamo, esta tiene una categoría 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ás.

Para realizar las animaciones primero se importara un modelo fbx o glb de un personaje

Para las animaciones en mixamo vamos a descargar la primera que es la de correr, seleccionamos la de nuestra preferencia y damos click en “In place” para que el personaje corra en el mismo sitio sin moverse

Descargamos sin piel y ahi se importa en Unity

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.

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

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ón.

Configurar Animaciones en Blender

Como parte de la configuración 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ón y también se realiza lo mismo con la animación de running.

Animación en el Rig se coloca la siguiente configuración

En la pestaña Animator se coloca lo siguiente

Componente al personaje llamado Animator y se pone la siguiente configuración

Agregar un componente al personaje llamado Rigidbody ,para estar el personaje afectado por la gravedad, un Capsule Collider para la interacción con los otros objetos.

Collider para ajustarlo al personaje

Como parte de la configuración 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.

Script para el movimiento del personaje, se crea una carpeta para los script

Se crea un animator controller

Creamos un nuevo estado con click derecho, donde ahí se podrán agregar las animaciones de correr y pudiendo identificar los “x” y “y” que es como podemos ver que animación realizar. Damos doble click cuando lo hayamos creado el Blend Tree.

Vamos a agregar dos parámetros y cambiamos el Blend Type.

En las animaciones en el Project vamos a copiarlos (Ctrl + D),

Modificamos el código para que los parámetros que agregamos en el Animator puedas recibirlos desde el script, del movimiento del personaje. El código agregado quiere decir que se colocará los valores de “x” y “y” a las variables que se escriban.

Crear nuestros escenarios, es indispensable crear un Gameobject, seleccionaremos una esfera como parámetro visual de donde estará nuestro personaje en un futuro.

Como parte fundamental de nuestro juego en 3D necesitamos que la cámara siga al personaje y para ellos vamos dirigirnos a el personaje en el Hierarchy

Creación de la antorcha

Se crea un sistema de partículas

Cambaremos el color a uno rojo para poder distinguirlo mejor

En el Shape ponemos la siguiente configuración para determinar el radio y que sea más reducido el fuego

Se marca la opción “Size over lifetime” y agregamos un boyfriend, colocamos de la siguiente manera

Vamos a trabajar un poco la textura para que se vea mas real, en un navegador buscamos “fuego fondo negro” y seleccionan cualquiera, y guarda la imagen.

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.

En el material, el Shader se cambia a Universal Render Pipeline y Unlit, y en el Surface Options se colocan las siguientes modificaciones.

Para darle más realismo se va a crear un Point light para darle más luz y ahora se arrastra la luz hacia el sistema de partículas, y luego estas se posicionan encima de la antorcha, finalmente se arrastra el sistema de partículas a la antorcha en el Hierarchy

Ya teniendo la antorcha haremos que el jugador recoja la antorcha, para esto se crea un objeto vacío en el personaje, y vamos hasta donde este los huesos de la mano, creando object empty.

Ahora con el objeto que vamos a interactuar se crea un box collider para poder chocar con él. y creamos un object empty dentro de la antorcha, y también se le agrega un box collider para poder agarrarlo.

Ahora se crea un script para efectuar y poder recoger la antorcha

Y por ultimo se arrastra el script al object empty de la antorcha y se agregan las variables que se requieren del script

Como implementar la oscuridad en nuestro nivel de Blender

Nos ubicamos en la parte superior en en la barra de herramientas, buscamos window, Rendering y lighting, environment colocamos la ambientación de color negro.

En el directional light se pone la intensidad en 0

Agregamos neblina para poner más intriga y misterio al laberinto, en el mismo lado donde se modificó en windows rendering, en environment, abajo other settings se activa la opción de fog   

Minijuego (Puzzle)

Crear una carpeta donde se va alojar las escena y el minijuego. Lo primero para realizar el puzzle es instalar el plugin de fungus.

En la ventana de windows vamos a Package Manager y se busca Fungus y se importa. Vamos a pasar nuestra imagen a nuestro proyecto.

Modificamos en el inspector para poder realizar las modificaciones a la imagen

En Open Sprite Editor abrimos, y se subdividen las columnas y filas que se deseen.

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ámara vamos a poner un fondo negro

Como agregar el Puzzle a un Canva

Nos dirigimos ha Tools y creamos en fungus un Flowchart para realizar el puzzle sin una línea de código

Agregamos en el mismo lugar un view y empezamos a agregar las imágenes una por una al view, y luego las organizamos.

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

Como Implementar configurar el FlowChar en Unity

Ya cargados los componentes a todas las piezas iniciamos a trabajar con Flowchart, se agregaran el mismo número 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á 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.

Para agregarle la lógica, se realiza con cada bloque creado haciendo que la pieza clickeada gire cada 90°. Para agregar la función en el + y buscamos la opción LeanTween/Rotate.

Ya agregado se configura de la siguiente manera para que la pieza realice el movimiento

Colocar condiciones en cada bloque (condicional if), si el bloque seleccionado es el último que va a tocar  o es cualquier otro, y también vamos a crear variables antes para realizar las condiciones.

Crear las variables se crean las siguientes variables

Hacer la condición en cada bloque es

necesitamos corregirle error de Transfor para ellos tomaremos el Transform para tomar el valor de Z cuando le den a la pieza clic

Se agrega un if para saber si z es igual o menor que 0, entonces se agrega un nuevo If

Para que cuando ya esté ubicada correctamente la pieza se utiliza un st clickeable

Se agrega un contador para saber cuando ya está bien posicionada y de esa manera el jugador pueda saber que ya puede seguir con el siguiente

Nuestros bloques con las condicionales fueron 

Por último para hacer que las rotaciones antes de iniciar el juego salen aleatoriamente se crea un script y se pondrá en el Fungus, en el objeto donde se encuentran todas las piezas se agrega el script.

Time en el Canva

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á.

Ubicamos el Text en la parte superior izquierda 

Posteriormente tenemos que ingresar un plano donde nuestro personaje va a interactuar con el escenario.

Al finalizar con la inserción de nuestro plano vamos a realizar un material de diferentes colores, para el personaje y el piso.

A Continuación 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.

 Continuando con las modificaciones de nuestras paredes usaremos el comando rápido para Extruir objetos,presionamos “R” para extruir el objeto.

Repetiremos el proceso para crear cada una de las paredes de nuestro laberinto.

Configuración controller jugador

configuración cámara con el personaje.

Arrastrar el script de la configuración de la cámara a nuestra cámara principal

Configurar la cámara para posicionarse con el objeto que deseamos, en esta caso el jugador

Agregando una salida al juego 

Vamos a la configuración del objeto Box Collider y habilitamos Is Trigger(se puede atravesar)

Adicional pondremos un etiqueta o tag para saber cuando el jugador atraviesa la salida

Configurar Tracking Target colocar el objeto y ajustar position control orbital follow

En el script de movimiento Controlador, realizaremos algunas modificaciones para respecto a la cámara y el movimiento del personaje, debido a que la cámara y el movimiento tenían configuraciones ambiguas, lo que realizaremos es que el personaje se pueda mover en la dirección correcta independientemente de la traslación de la cámara para ellos capturaremos el transform de la Cámara y ajustaremos los detalles del movimiento en la función MoveCube.

Ajustar cámara

Importar modelos de avaturn

Para la creación de nuestro modelo en 3D, para el personaje principal, usaremos la herramienta de Avaturn, la cual nos permite crear un modelo en 3D, con un rostro personalizado.

Crear animiaciones del personaje

Después de importar nuestro modelo con el rostro personalizado que creamos en Avaturn, exportaremos el modelo para usarlo en Maxiamo.

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

Escoger todos los .fbx de neustro modelo y escoger es humanind

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

Configuración enemigo

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.

Generar un box collider al golpe de nuestro personaje y adicionaremos un add even al final de la animación para que blender sepa cuando finaliza la animación, para ello buscaremos el método creado en los Script que se llama final Ataque.

void finalAtaque()

    {

        animator.SetBool(“attack”, false);

        ataque = false;

    }

Añadiendo un box collider a la mano derecha de Enemigo

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ón.

Después 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.

Configurar imagen foto de vida, la imagen debe quedar en Texture Type,en la opcion de Sprite 2D

Complemento Inteligencia Artificial para Esquivar Obstáculos

Continuando con las configuración de los parámetros de nuestro enemigo, vamos a implementar una rutina más dentro de la lógica del enemigo, la cual ayudará a que el enemigo no se quede estancado en paredes y  busque la manera de rodearlas o simplemente omitirlas, ayudándonos del package de Inteligencia Artificial que nos ofrece Unity.

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áculo en frente

A continuacion nos dirigirnos a healthy, dar click en nuestro enemigo y añadir un nuevo componente, Agente de navegación para nuestro enemigo, después de configurar el Agente lo pasamos a los componente del Script de la rutina del enemigo en la variable de agente.

Creación del Primer Nivel

Lo que hicimos fue crear el Nivel 1 y agregar un Plane como base. Luego creamos un objeto vacío y, dentro de él, añadimos un cubo que posteriormente convertimos en un muro. Lo escalamos y comenzamos a organizarlo hasta formar las paredes del laberinto. Además, le aplicamos color a los muros para diferenciarlos visualmente.

También exportamos nuestro personaje desde Blender en formato FBX 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.

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ñadimos las puertas. Para las puertas, creamos un script adicional que permite que una de las tres sea seleccionada aleatoriamente como la puerta correcta.

Creación de Canvas

Creamos todos los Canvas del juego, incluyendo el menú principal, la pantalla de selección de personajes, felicitaciones, game over, créditos, información de los controles y la pantalla final. Cada uno de estos Canvas se creó en una escena independiente.

Dentro de cada escena añadimos un objeto llamado Canvas e importamos la imagen principal del juego como fondo. Luego creamos un título para cada pantalla, al cual le cambiamos el color, le añadimos sombra y le asignamos un tipo de letra importado.

También agregamos los botones correspondientes a cada funcionalidad y creamos los scripts necesarios para que cada botón realizara su acción. Finalmente, asignamos estos scripts a los botones dentro del Canvas, configurando correctamente la funcionalidad que debía ejecutar cada uno.

Menú inicial

Agregar Música

Para la música ingresamos a la página, donde buscamos y descargamos la pista deseada. Luego la importamos en la carpeta Music dentro de Assets.

Después, en cada Canvas y en cada nivel del juego creamos un Audio Source, y desde allí asignamos la pista de audio importada. Finalmente, activamos la opción Loop para que la música se repita automáticamente cuando llegue al final.

Música Canvas

Cambio de los Canvas de Pixeles

Cuando creamos el ejecutable, los Canvas se veían extraños: se habían desplazado y aparecían muy pequeños. Al revisar, evidenciamos que todos estaban configurados en Pixels. Para solucionarlo, cambiamos la opción del Canvas Scaler a Scale With Screen Size.
Gracias a este ajuste, al generar nuevamente el archivo .exe, los Canvas se visualizaron correctamente y con el tamaño adecuado en pantalla.

Generación del ejecutable para Pc

Después de tener incorporado los 3 niveles de los laberinto, solamente nos queda generar el ejecutable para Pc específicamente 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ón del juego, la resolución de la pantalla el icon del ejecutable entre otros aspectos.

Scrips de los canvas

using UnityEngine;
using UnityEngine.SceneManagement;

public class Creditos : MonoBehaviour
{
    [Header("Referencias a los Canvas")]
    public GameObject canvasMenu;       // Canvas principal
    public GameObject canvasOpciones;   // Canvas de opciones

    // Jugar → Ir a la escena para elegir personaje
    public void MenuPrincipal()
    {
        SceneManager.LoadScene("Menu Principal");
    }

    public void IrCreditos()
    {
        SceneManager.LoadScene("Creditos");
    }

    public void Volver()
    {
        SceneManager.LoadScene("Nivel 3");
    }
}

En su mayoría de los scripts del canvas son de esta manera entonces esta podria ser una manera de tomar los scripts

Scrips de los niveles

using UnityEngine;

public class Movimientos_Caroline : MonoBehaviour
{
    public float velocidad = 5.0f;
    public float velocidadRotacion = 200.0f;
    private Animator anim;
    public float x, y;

    void Start()
    {
        anim = GetComponentInParent<Animator>();
    }

    void Update()
    {
        x = Input.GetAxis("Horizontal");
        y = Input.GetAxis("Vertical");

        transform.Rotate(0, x * Time.deltaTime * velocidadRotacion, 0);
        transform.Translate(0, 0, y * Time.deltaTime * velocidad);

        anim.SetFloat("velX", x);
        anim.SetFloat("velY", y);
    }
}

Nota: Si desea ver los archivos con mayor detalle o ampliar la información del proyecto, puede consultar el siguiente repositorio Git.

Video del Video Juego

Autores: Bolivar Mojica Juan Manuel, Diaz Sarmiento Yipsi Caroline, Montes González Bryan Camilo
Editor: Mg. Pinzon Romer Carlos Ivan
Código: UCMV-2-2502
Universidad: Universidad central

Referencias

Academia de Videojuegos [@academiadevideojuegos]. (s/f). 04 - Añadiendo los muros - Taller - Unity desde cero [[Object Object]]. Youtube, de https://www.youtube.com/watch?v=eIK-kDq_0nk
Antorcha - Download Free 3D model by Clases3d. (2020, mayo 8).
Blanco, A. [@CosmicWorks]. (s/f). Nuevo INPUT SYSTEM en UNITY de 3 maneras. Tutorial paso a paso [[Object Object]]. Youtube, de https://www.youtube.com/watch?v=bXefKaGIoXg&t=359s
Desarrollo, K. [@kopdesarrollo]. (s/f). Creando niebla en Unity: El truco sencillo para un efecto impresionante [[Object Object]], de https://www.youtube.com/watch?v=1Xkfbo_Rz0A
Dev, J. [@JackSParrotDev]. (s/f). [Unity3D - 5.3] Laberinto - capitulo 3: Creando el laberinto y la salida [[Object Object]]. Youtub, de https://www.youtube.com/watch?v=v4pX4UTXAAY
JoexScript [@joexscript7046]. (s/f-a). Unity 3D - Enemigo básico (Rutinas y comportamientos) [[Object Object]]. Youtube, de https://www.youtube.com/watch?v=_5pxcUykXcA
JoexScript [@joexscript7046]. (s/f-b). Unity 3D - Enemigo te sigue esquivando obstaculos (NavMesh) [[Object Object]]. Youtube, de https://www.youtube.com/watch?v=ZEd19mXhOu0
jucarave [@jucarave]. (s/f). Como importar ANIMACIONES DE MIXAMO a UNITY [[Object Object]]. Youtube, de https://www.youtube.com/watch?v=PesrC6HcYB8
Mandreel [@Mandreel]. (s/f-a). Crea puzzles sin saber programar! (Parte 1) | Unity + Fungus | EP#20 | Mandreel [[Object Object]]. Youtube, de https://www.youtube.com/watch?v=95B1HHXNdmE
Mandreel [@Mandreel]. (s/f-b). Crea puzzles sin saber programar! (Parte 2) | Unity + Fungus | EP#21 | Mandreel [[Object Object]]. Youtub, de https://www.youtube.com/watch?v=lpOeG1Q_2n8
Pachi, D. [@DonPachi]. (s/f-a). Como hacer una camara en tercera persona Unity [[Object Object]]. Youtube, de https://www.youtube.com/watch?v=eAL4eVUbUBg
Pachi, D. [@DonPachi]. (s/f-b). Unity - Como cambiar tipo de letras [[Object Object]]. Youtube, de https://www.youtube.com/watch?v=9cLABLEIS78
Pachi, D. [@DonPachi]. (s/f-c). Unity 2019: Importar y animar un personaje 3D [[Object Object]]. Youtubede https://www.youtube.com/watch?v=Ay_oy6GXC-s
Puertas Bano - Download Free 3D model by Mitsere. (2022, junio 22).
@rvm, M. P. E. [@kiliansolerpons]. (s/f). Unity 5 micro tutorial creación de fuego por partículas principiantes facil [[Object Object]]. Youtube, de https://www.youtube.com/watch?v=8pFovJNpxDU
Sensorial, M. [@multisensorial]. (s/f). Agarrar y trasladar objetos en Unity [[Object Object]]. Youtube, de https://www.youtube.com/watch?v=TDCDcYgHf2E