jueves, 31 de agosto de 2023

Creando un videojuego en Unity [ Galaxy Shooter I]

Documentación curso creación de vídeo juegos con Unity. Proyecto 1 [ Galaxy Shooter]

Sección 3. Configuración del proyecto

En esta sección aprenderemos lo siguiente:

  • ·         Instalar Unity y set up del primer Proyecto.
  • ·         Activar y usar el servicio de gestión de versiones y colaboración de Unity “Collab”.
  • ·         Crear commits
  • ·         Instalar assets desde la Asset Store de Unity.
  • ·         Aplicar shader.

Instalando Visual Studio Comunity 2022 e integrándolo con Unity y mas

Voy a instalar Visual Studio por separado y lo integrarñe con Unity. Podríamos haber instalado Visual Studio al instalar el hub de unity, pero es mejor hacerl así para disponer de este Ide no sólo para proyectos unity sino para crear apps, webs y todo lo que nos permite hacer. Veamos entonces como instalarlo.

Nos dirigimos a la web https://visualstudio.microsoft.com/es/ donde tenemos toda la gama de productos de Microsoft relacionados con visual studio, tenemos visual studio para win y mac y visual studio code. No son la misma cosa.

Vamos a necesitar una cuenta de Microsoft para validar la instalación, la cuenta actualizaciones, etc. Entonces en lugar de descargarlo vamos a ir al sign in y logearnos

Una vez logeados ya estamos en la página principal


En el pie de pagina podemos ver un enlace que me llevará a la página de visual studio

Descargaremos la versión comunity que es gratis y me da prácticamente lo mismo que las versiones de empresa


Es un sencillo ejecutable y lo instalamos

 


La siguiente ventana que nos aparece es muy importante, en ella deberemos elegir que queremos instalar para desarrollar con C#. Necesitaremos:

  • ·         Desarrollo de escritorio .NET
  • ·         Desarrollo de juegos con unity

Así que marcaremos estas dos opciones:


Luego si vamos a la pestaña de paquetes de idiomas, podemos seleccionar el paquete inglés, el de español ya viene marcado, es recomendable trabajar en la medida de la posible en inglés.




Una vez hecho esto le damos instalar y se iniciará el proceso de instalación



Validando instalación de Unity y visual studio y conectándolos

Ha llegado el momento de validar las instalaciones y de conectar Unity con Visual tudio, es decir que lo que escribimos en Visual Studio tiene efecto en Unity. Para ello vamos a mandar un mensaje a la consola que diga “Hola mundo”.
Para ello abriremos nuestro unity hub à Proyectos y crearemos un nuevo proyecto


De todas las opciones le indicaremos qye nuestro proyecto será un 3D core




Solo nos queda dar un nombre al proyeto y decidir en qué carpeta los queremos guardar, yo me he creado una en el escritorio que he llamado Proyectos Unity



Y nos creará el proyecto en nuestra carpeta abriendo el editor de unity





Ya hemos validado que unity está bien instalado, ahora debemos validar que se integra bien con Visual estudio. Para ello iremos a edit à preferences


Si hacemos click nos abrirá una ventana


En ella me aseguraré en la pestaña external tolos tenemos activado Microsoft Visual Studio 2022 que es la versión que acabamos de descargar.


Con esto ya le estamos diciendo a unity que cuando cree un script de C# y le de a abrir lo que va a hacer es que va a ir directo a buscar el visual studio.

Ahora nos dirigimos a la pestaña del pie de página donde dice proyects


 Haremos clic en la pestaña assets y haremos clic dercho en la zona de carpetas para crear nuestro primer script de C#


Lo dejaremos así no le cambiaremos el nombre de momento por que es sol para probar la conexión


Una vez creado si le doy doble click, debería abrirme el Microsoft Visual Studio y vemos que así es


En el código de ejemplo que se nos muestra escribiremos nuestro hola mundo (remarcado en verde)

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
 
public class NewBehaviourScript : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        Debug.Log("Hola Mundo");
    }
 
    // Update is called once per frame
    void Update()
    {
       
    }
}

Lo que estamos haciendo en llamando al método de inicio Start, que cuando se inicie el proyecto lo primero que hará será ejecutar la línea de código de nuestra hola mundo, mediante la librería debug, se enviará un log (un mensaje) a la consola. Guardamos y cerramos Visual Studio

Nos vamos al editor de unity y en la izquierda seleccionamos en la pestaña Hierachy à Main Camera


Al hacerlo se abre una columan a la derecha con las propiedades de la cámara, lo que vamos a hacer es seleccionar el script y sin soltar arrastrarlo a donde dice “Add Component”


Lo que acabo de hacer es colocarle el script a la cámara



Entonces ahora cuando yo le de a play va a ir a buscar la función start del script y ejecutará lo que tenga ese script es decir nuestro hola mundo que podremos ver en la consola

Le doy a play y puedo ver el mensaje en consola, con esto ya sabemos que tenemos conectado unity con visual studio y que me compila perfectamente los scripts, con este simple hola mundo hemos validado todo el flujo de trabajo


SECCIÓN 3

Creando un proyectos  desde cero y repaso a UI de unity

Abrir un proyecto anterior

Si lo que quiero es abrir un proyecto anterior, nada más abrir el unity hub dispondo de una lista de todos los proyectos que tengo crados, conla fecha e creación y modificación así como la versión de unity conla que ha sido creado,  simplemente con hacer clik sobre é el proyecto se abrirá.


Dispongo de una pestaña donde pone open, de forma que si hago clik en la flechita, me da dos opciones

  • ·         Add Project from disk. Por si quiero abrir un proyecto desde un pendrive u otro disco esto no está muy recomendado la mejor opción es abrir los proyectos desde el disco de la máquina en la que vas a trabajar
  • ·         Open remote Project. Unity posse un sistema de control de versiones que se llama plastic y nos permite tener proyectos en la nube y abrirlos desde ahí.


 

Creando un nuevo proyecto

Abrimos Unity hub y hacemos clic en la pestaña new Project


 Al hacerlo se nos despliegan un montón de posiblidades vamos a hacer un repaso de todas las posibilidades y tipos de proyectos que podemos crear


Puedo decidir la versión con la que lo quiero abrir, en este caso me ha cogido la versión 2022 que es la última qu tengo instalada y después debo escoger la plantilla o tipo de proyecto que quiero empezar. 2D, 3D, VR, AR y un motón más.

Abajo vemos que dependiendo de la plataforma al que vaya a apuntar, si quiero ya definir el sistema de render un poco más avanzado me voy a URP, si voy a hacer juegos para plataformas triple A como PC o consolas y voya trabajar iluminación a tiempo real pues puedo escoger HDRP 



Por último en el lateral izquierdo tengo una columna con categorías:

Core son las plantillas principales, sample son plantillas de ejemplo y también disponemos de plantillas de aprendizaje



Nosotros en esta fase inicial del curso estaremos trabajando con las dos primeras plantillas 2D y 3D. que son las que vienen por defecto descargadas. Cuando ya entendamos el manejo del editor veremos llantillas más avanzadas que no vienen descargadas por defecto, (observa el icono de la nube con la flecha)

Así que empecemos creando un proyecto nuevo con una plantilla 3D, elijo la plantilla, ñe doy como nombre Interface y seleciono mi carpeta de proyectos del escritorio para guardarlo


Ya se pone a crear todo lo que neceista me abre la interfaz de carga y me lo lista, cuando termine iremos a ver que me ha creado en la carpeta pojects que es la carpeta que tengo para los proyectos


 Una vez que ha terminado me abre el proyecto


Y puedo ver el proyecto interface ya creado en mi carpeta projets


 

SECCIÓN 3

Ahora que tenemos instalado y configurado Unity vamos a crear nuestro primer proyecto.

Primero haremos login con nuestro id


Como ya sabemos en el unity hub tenemos la posibilidad de crear un nuevo proyecto, o también de seguir tutoriales en la pestaña learn.

Haremos clic en el botón New Project, en la siguiente pantalla le daremos el nombre Galaxy Shooter y seleccionaremos la carpeta del proyecto, que en mi caso se llama del mismo modo y está ubicada en el escritorio:


Una vez seleccionado todo le daremos a crear proyecto, al hacerlo se iniciará la carga de nuestro nuevo proyecto

Una vez se ha creado nuestro proyecto se nos abrirá en una nueva pantalla de Unity.

 

Pestaña proyect

Aquí tendremos guardados nuestros modelos 3d, 2d, sprites, texturas  y assets en general


Tenemos también la ventana scene donde contruiremos nuestro juego, prototipos e ideas. Aquí manipulamos todos los assets que están dentro de nuestra jerarquía.

Esta es la vista 2d pero disponemos de una vista 3d para juegos 3d, solo debemos hacer clic en la pestaña resaltada en amarillo para cambiar entre ellas


Vista 3d


Tenemos nuestra jerarquía “Hiterachy” que es la zona donde disponemos de todos los objetos que ya están dentro de nuestro juego, en este caso como es un proyecto nuevo solo tenemos la cámara principal:



Si seleccionamos la cámara situándonos sobre ella y haciendo clic veremos que a la derecha aparece una ventana, que es el inspector. En este panel se muestra la información detallada del objeto que hemos seleccionado, en este caso la cámara principal.


Al seleccionar un objeto veremos también que al ladeo izquierdo aparece una toolbar donde disponemos de las herramientas que se usan con más frecuencia para la manipulación de objetos:


Y en la parte superior encontraremos las pestañas para conectarnos a la nube con nuestro id, los botones de play y pause y los botones de layers y layout


Al lado de la pestaña escena tenemos la pestaña Game:

 

Básicamente todo lo que veamos en la pestaña Game es lo que el usuario o el jugador verá cuando juegue a nuestro juego.

LAYOUT

Unity nos permite cambiar la disposición de las ventanas como nosotros queramos, un lay out personalizado que nos permite trabajar de forma muy cómoda puede ser el siguiente:

Tendremos la escena y debajo la pantalla game a n 50% del alto total, al lado de la pantalla game pondremos la pestaña de la ocnsola y en la parte derecha dispondremos la jerarquía y debajo las carpetas del proyecto, al lado a la derecha el inspector.

NOTA: Para la pestaña Project, seleccionaremos la opción de solo una columna:



De este modo nuestro Layout queda muy intuitivo, limpio y funcional.

 

SECCIÓN 3  [ IMPORTACIÓN DE ASSETS]

Vamos a importar los assets necesarios para nuestro proyecto que tenemos descargados para el curso.

Vamos a ir a la carpeta donde los tenemos descargados y descomprimidos y simplemente la arrastraremos a la carpeta Proyectà Assets:


Cunado termine de importar los archivos veremos que tenemos las carpetas, Audio, Materials, Sprites, que es como hemos dividido la estructura de carpetas para una buena organización del proyecto.

Dentro tenemos todo lo necesario para empezar a crear nuestro juego

 


Carpeta Scenes

Observa que de forma automática Unity nos ha creado una carpeta scenes, que es donde tendremos todas las escenas de nuestro juego.  Podemos pensar en las escenas como si fueran niveles dentro de nuestro juego, es común que los juegos tengan 30 o más niveles, por ello es mejor tenerlas todas agrupadas en una misma carpeta para una mejor eficiencia a la hora de trabajar.

Como vamos a entrar muchas veces en esta carpeta, le vamos a anteponer un guion bajo en el nombre, de este modo se nos situará la primera en la jerarquía de carpetas:


 

SECCIÓN 3 [ CREANDO LA GALAXIA ]

Vamos a crear nuestro fondo de galaxia, pero antes debemos configurar nuestro “Aspect ratio”

Aspect ratio

Si vamos a la pestaña Game veremos que por defecto está selccionado Free Aspect.

Aquí podemos crear una ratio de aspecto personalizado o elegir de entre los existentes, uno de los más utilizados es el 16:9 para TV y pc y es el que vamos a elegir:


Elegimos 16: 9 y la antalla anterior cambia a esto:

CREANDO EL FONDO:

Vamos a ir nuestra jerarquía y dentro de la escena básica haremos clic derecho y le diremos 3D object –> Cuad:


Se nos crea el cuad en pantalla, una cuad es simplemente un cuadro que está formado por dos triángulos. Usamos el cuad porque contiene la mínima cantidad de polígonos.


El siguiente paso es asignarle un nombre adecuado. Podemos hacer clic sobre el objeto y cambiarle el nombre al mismo objeto o en el inspector, lo vamos a llamar Galaxy:


Lo siguiente es ajustar este objeto al tamaño de nuestra pantalla, en el menú de herramientas si esta seleccionado “rect tool” veremos unos puntos azules en la escena que nos permite expandir las esquinas del objeto, lo ajustamos al tamaño de la pantalla.

Mientras expandimos el cuad en la escena veremos que se mueve también en la ventana Game, tendremos cuidado de cubrir toda la pantalla de forma que no se vea el fondo:


Podemos escalar la ventana de juego para ver que no se ve el fondo en ningún sitio:


De momento lo único que tenemos es un cuadro gris que cubre toda la pantalla, lo que vamos a hacer ahora es crear un nuevo material para darle un nuevo aspecto. Este material tendrá un SHADER que creará un efecto visual que hará que nuestra galaxia se vea viva.

Nos dirigimos a nuestra carpeta de materiales y haremos clic derecho sobre ella para crear un nuevo material:


Al hacer esto se nos crea un nuevo material que vamos a llamar Galaxy_mat:



El guion bajo que le hemos dado al nombre del material, nos permite ir a la caja de búsqueda y poner _mat, de forma que nos aparecerán todos los materiales que tengamos:


Ahora si vamos al insectoràShaderà FX encontraremos un shader que se llamam Galaxy:


Y esta opción está disponible porque tenemos un shader llamado Galaxy en la carpeta shaders que está dentro de materials, al seleccionarlo vemos que la esfera cambia a un aspecto de Galaxia:


entraremos en ellos Shaders con más profundidad más adelante, de momento basta con saber que un shader es un script que le indica al material cómo va a interpretar la imagen, se va a comunicar con la CPU para darle el efecto visual que buscamos y que hemos creado en el script.

Ahora que tenemos nuestro material con el shader correcto asignado simplemente tengo que asignar ese material ami objeto cube de fondo, puedo arrastrarlo directamente al objeto en la escena o en la jerarquía:

Al hacerlo nuestro fondo cambia a:

En el momento que le demos al play de nuestro juego veremos que el fondo posee un efecto de paralax que hace que se mueva. Aunque ya está funcionando podemos ver que es un poco caótica, hay muchos objetos y se mueve a mucha velocidad, para hacer cambios en este material lo único que necesitamos es seleccioarlo e ir al inspectora para ver su configuración, valores, etc:

De inicio tenemos estos valores:

Concretamente el valor de screen direction en X y Z lo voy a mover a cero porque no quiero que se mueva en esa dirección y también ajustare el valor de Y a 50 por ejemplo, ahora si damos play solo nos movemos en y hacia arriba

De momento lo dejamos así:


Overlay

Vamos a agregar la parte de overlay de nuestro fondo galáctico y para eso, dentro de nuestra carpeta sprites tenemos un espacio que se llama SpaceBG_Overlay


Vamos a seleccionar este Sprite y simplemente arrastrarlo a nuestra jerarquía dentro de Galaxy


Como se puede ver es una capa superpuesta a nuestro fondo, vamos a tocar algunos parámetros en su configuración, como hicimos antes con el fondo lo seleccionamos y nos vamos a sus propiedades en el inspector:

Ajustamos los bordes para que tenga el tamaño de la pantalla, podemos variar su posición.

Profundidad en ambientes 2D  [ SORTING LAYERS ]

 Es importante tener en cuenta que estamos trabajando en un ambiente 2D en este proyecto. En un ambiente 2D no disponemos de una profundidad como tal. Para poder dar un efecto de profundidad a nuestra escena tendremos que hacer ciertos ajustes que crearán ese efecto de profundidad. Para ello vamos a crear una serie de capas para poder trabajar adecuadamente.

En nuestro primer overlay SpaceBG_Overlay, vamos a ir a la pestaña Sorting Layer, que ahora mismo está como default y le vamos a añadir un nuevo sorting layer:

Hacemos clic

Hacemos clic en el símbolo + y lo vamos a llamar background:


Para salir volvemos a hacer clic en spaceBG_Overlay en la jerarquía y volvemos a darle a sorting layer donde ya nos aparece esa capa que acabamos de crear de nombre Background, la seleccionamos:


Y ya queda como nuestro Sorting layer:


Esto nos permitirá tener nuestros elementos de fondo del escenario separados de nuestros elementos del juego

Vamos a crear un nuevo sorting layer del mismo modo que lo acabamos de hacer para los elementos de fondo, pero esta vez para elementos de juego.

-          Selecciono de nuevo SpaceBG_Overlay

-          Voy a sorting layer creo uno nuevo y lo puedo llamar foreground


Ya tengo estas dos capas listas para añadir elementos más adelante, las del background y las del foreground (primer plano) donde irán elementos del juego, de este modo lo tengo todo en capas separadas.

SECCIÓN 4 VÍDEO 12 [ INTRODUCCIÓN A LA CREACIÓN DEL PLAYER]

En esta sección vamos a crear nuestro jugador. Nos enfocaremos en el componente transform de nuestra nave espacial, así como en recibir los inputs del usuario y mover a nuestro jugador basándonos en esos inputs. No iniciaremos en los fundamentos de la resolución de problemas y la programación en C#. Hablaremos de variables y sentencias y finalmente resolveremos retos como aplicar una variable que controle la velocidad de nuestro jugador y restringir el movimiento del jugador. Por primera vez introduciremos la API de Unity.

·         Mover el jugador

·         Aprender variables y sentencias de control.

·         Aplicar variable velocidad

·         Restringir el movimiento del jugador

·         API de Unity

 [ Configurando el Player ]

En esta sección vamos a empezar a configurar a nuestro jugador y vamos a hacer un pequeño código para que cuando arranque nuestro juego podamos asignar una posición inicial al mismo.

Para empezar vamosa ir anuestra carpeta de sprites, seleccionaremos el Sprite Player Turn Left0000 y lo arrastraremos a nuestra lerarquía o directamente a nuestra escena:


Le cambiaremos el nombre a player, en el inspector y también le vamos a cambiar la escala ya que se ve demasiado grande, probemos a darle 0.35:

 


Ahora nuestro asset jugador se ve de la siguiente manera:


Ahora mismo el jugador está en una posición cualquiera, lo que queremos es crear un script que lo sitúe en una posición inicial que puede ser por ejemplo 0, 0, 0 y para esto vamos a crear nuestro primer código.

En la pestaña Project, nos situamos encima de la carpeta assets,  crearemos una nueva carpeta que llamaremos Scripts, botón dercho en Project, Createà Folder:


Dentro de esta nueva carpeta también con el botón derecho crearemos un script C# al que vamos a llamar Player:


Ahora solo tenemos que hacer doble clic sobre el script para abrir el archivo que según nuestra configuración debería abrirse en Visual Studio y vemos que así es:


Lo que estamos viendo es ya la clase del jugador, clase Player. Podemos pensar en una clase como si fuera un patrón a seguir de entidades que se comportarán según lo que nosotros programemos en este patrón.

Aunque aún no hemos codificado nada podemos ya arrastrar el script que posee esta clase a nuestro objeto player, simplemente seleccionamos el script en el Project y lo arrastramos hasta el objeto Player en la jerarquía:

De este modo ese script ya está dentro del componente Player, Unity está basado en componentes, si te fijas en el inspector a la derecha podemos ver el código que tenemos también abierto en Visual Studio, todo lo que escribamos en ese script afectará exclusivamente al Player y que va a contener todo el comportamiento del jugador, disparar, moverse, etc.

Si volvemos a hacer clic sobre player veremos todos sus componentes, transform, Sprite renderer y el script que acabamos de crear:




Analicemos el código que tenemos en el script, la clase Player:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
 
public class Player : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
       
    }
 
    // Update is called once per frame
    void Update()
    {
       
    }
}

Vemos que se trata de una clase pública de nombre player, lo primero que debemos considerar es que el nombre de la clase y el nombre del archivo que la contiene deben de ser el mismo.


Luego podemos ver dos puntos seguidos de un nombre : Monobehaviour, esto nos indica que esta clase Player, está heredando de esa clase Monobehaviour, que es la que nos permite agregar este script como componente a los objetos. básicamente todo lo que es un componente está hecho a partir de un MonoBehaviour.

 

 
public class Player : MonoBehaviour
 

 

Tenemos también dos métodos Start y Update que podemos usar gracias a que los heredamos de Monobehaviour, y se están creando automáticamente por Unity:

El método Start se ejecuta al principio una sola vez y en el se harán todas las inicializaciones necesarias y el método Update se ejecutará una vez por cada frame, digamos que será el bucle principal del juego.

NOTA: normalmente Update se ejecuta en cada frame a razón de 60 FPS (Frames Per Second) es decir 60 frames cada segundo.

    // Start is called before the first frame update
    void Start()
    {
       
    }
 
    // Update is called once per frame
    void Update()
    {
       
    }

Y arriba del todo, tenemos la importación de la librerías necesarias para usar MonoBehaviour y otras clases que están dentro de esas librerías:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

 

 

TEST MENSAJE POR CONSOLA

Para ver el rendimiento de nuestro juego y la comunicación entre Visual studio y Unity vamos a imprimir algo por consola usando el método debug.log en el método Start:

    void Start()

    {

        Debug.Log("Hola Blackout_lab ¡¡");

    }

Una vez escrito y salvado, cerramos el script y si corremos el juego, podremos ver nuestro mensaje en la consola de la ventana Game:



También podemos ver el mensaje en nuestra gvista de consola:



Vamos a poner otro mensaje pero esta vez en el método Update, para ver las diferencias, en este caso pongamos por ejemplo nuestro nombre:

    // Start is called before the first frame update

    void Start()

    {

        Debug.Log("Hola Blackout_lab ¡¡");

    }

 

    // Update is called once per frame

    void Update()

    {

        Debug.Log(" Juanjo de Miguel");

    }


Como podemos ver en la ventana consola el mensaje Juanjo de Miguel se está imprimiendo en cada frame. Primero se ha escrito el mensaje Hola Blackout_Lab y después el mensaje con mi nombre en cada frame.

Así es como trabajan estos dos métodos, odemos entender que uno se ejecuta una vez y el otro constantemente. Y todo ello es posible gracias a la herencia de MonoBehaiviour. Por tanto el método Start será el método de inicialización del juego y el método Update actuará como el bucle principal de nuestro juego.

 

REVISANDO LA DOCUMENTACIÓN DE LA API DE UNITY

Si queremos obtener más información sobre un componente podemos revisar la referencia de la API de unity, por ejemplo, si seleccionamos nuestro componente player en la jerarquía y vamos al inspector, veremos un icono de interrogación, en cada u no de los componentes de Player, Transform, Sprite Renderer y Player (Script). Si nos situamos encima de cualquiera de ellos se nos indica que es un enlace a la referencia de ese componente:


Si hacemos clic se nos redirige a la documentación donde podemos buscar información sobre cualquier clase o elemento que necesitemos, en este caso vamos a hacer clic sobre el interrogante de Transform, y como vemos se nos lleva directamente a la documentación de Transform.

Desde ahí mismo podemos buscar cualquier clase en la casilla de búsqueda para acceder a su documentación.


Podemos buscar la clase MonoBehaviour, y podremos ver su documentación:




CONTINÚA EN LA SEGUNDA ENTRADA