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.
Validando
instalación de Unity y visual studio y conectándolos
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
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
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: