(Nivel: Intermedio) Parte 1 - Haz tu propio videojuego!

Deja cargar el post... Intro Buenas a todos! Los PostTutoriales están de regreso! Para quienes no estén al tanto, hace unos días comencé una serie de tutoriales para hacer tu propio videojuego. Comenzamos con dos tutoriales para cubrir el nivel mas básico, y ahora vamos a seguir el mismo juego desde donde lo dejamos pero con cosas un poco mas avanzadas. Voy a asumir que muchas cosas ya las saben de los tutoriales pasados. Si se sienten un poco perdidos quizás deban darles un repaso. Si queres comenzarlos desde el principio podes encontrarlos en estos links(click en las imagenes) Música para ambientar el Post-Tutorial Indice: 1.- Implementando la Cámara Orbital2.- Creando la Barra de Vida3.- Programando la Barra de Vida4.- Creando un Control Principal5.- Creando el Sistema de Puntos6.- Programando el Sistema de Puntos7.- Creando el Primer PowerUp 1.- Implementando la Cámara Orbital Bueno primero que nada abrimos nuestro proyecto. Una vez abierto, si no esta abierta la escena que creamos la abrimos desde la carpeta Scenes. Lo primero que vamos a hacer es bajarle un poco el brillo al piso(En el post anterior me dijeron que casi quedan ciegos). Ademas vamos a usar una barra color verde así que... Elijan el material piso en la carpeta materials. Luego en la pestaña inspector hagan click en la casilla albedo y bajen el todo a un verde bien oscuro. Hecho eso quiero que descarguen este package que hice yo mismo. Es como cuando importaron el package Characters en el primer tutorial. 01101000 01110100 01110100 01110000 01110011 00111010 00101111 00101111 01101101 01100101 01100111 01100001 00101110 01100011 01101111 00101110 01101110 01111010 00101111 00100011 00100001 01111010 01101011 00110101 01101011 01101101 01000011 01110001 01000001 00100001 01100001 01100001 00110010 01100110 00110011 01000100 00110010 01000100 01111000 00110110 00110001 01011000 01010000 00110100 01110101 01001011 01000111 01100100 01111001 01101101 01111010 01110000 01010100 01010011 01001111 01000111 01010100 01001000 01001000 01011111 01100100 00110000 01101010 01010001 01001111 00111000 00110111 01100100 01000110 01101000 01000010 01010010 01100011 Si no saben como descargar un link en binario dejenme un mp ¿Que es este package? Un package es un paquete de Unity que puede contener modelos, scripts, prefabs, etc. El package Characters que ustedes ya usaron, contenía varios personajes listos para usar, entre ellos Ethan que es el que estamos usando. Este package en particular, lo hice yo mismo. Y es una cámara orbital hecha con objetos y raycast, que es completamente compatible con el personaje que estamos usando. La cámara orbita al rededor del personaje. Y se acerca si hay algún obstáculo entre la cámara y el personaje. La hice pensando usarla en un juego en el que estoy trabajando. Me base en cámaras típicas de videojuegos como Tomb Raider(2013), y Styx Master of Shadows. Todavía le falta algo de trabajo pero esta funcional. La cámara no es difícil de hacer y pienso hacer un tutorial para que ustedes mismos hagan este tipo de cosas mas adelante. Una vez descargada le dan doble click, y se les va a importar en el proyecto que tienen abierto. Le dan al botón importar, y esperan a que termine. Van a ver que les creo una nueva carpeta en la pestaña project llamada CameraPackage. Adentro verán el material, el script y el prefab. Seleccionen al jugador en el hierarchy. Y si no esta desplegado, desplieguenlo con la pequeña flecha junto a su nombre. Seleccionen la Main Camera y bórrenla con Supr.(El prefab que van a usar ya tiene una cámara así que no precisamos esta). Arrastren el prefab "CameraPrefab" hacia dentro del Jugador en la pestaña hierarchy. Debería quedar justo en la posición 0, 0, 0. De no ser así cámbienlo ustedes. Una vez hecho denle play(Asegurense de tener "Maximize on Play" tildado en la pestaña game). Prueben la cámara a ver si la sienten cómoda. Tiene algunos valores para cambiar pero de momento les recomiendo que no lo hagan. Al terminar el post como siempre pueden duplicar el proyecto y experimentar en el sin arriesgar el que usamos para aprender. Tip: Prueben arrastrar algunos Obstaculos de los que creamos el post anterior, ponganlos dispersos por el mapa para poder esconderse detrás de ellos. Y ya de paso verán como la cámara se acerca al jugador cuando hay algo en el camino 2.- Creando la Barra de Vida Bien ahora vamos a mejorar un poco la jugabilidad, porque no tiene mucha gracia que las balas nos maten de un impacto así que vamos a poner una barra de vida. Esto les sera de mucha ayuda en casi cualquier proyecto que hagan. Ahora vamos a crear nuestro primer UI. Explicación rápida sobre los UI. User Interface es una característica que implemento Unity hace poco, y son los objetos que van a estar en pantalla todo el tiempo. Son perfectos para menús, barras de vida, y montón de cosas mas. Vayan al hierarchy click derecho en un espacio: Click Derecho > UI > Slider Verán que esto les crea 3 objetos; Canvas, Slider(dentro del cual hay mas objetos aun), y EventSystem. Canvas: Es donde van todos los UI. Es el lienzo... de manera simple es la pantalla.Sldier: Es lo que acabamos de crear. Una barra deslizable.EventSystem: Se crea siempre con el Canvas. Sin el ningunas de las funcionalidades del canvas serviria. También aparece en pantalla una barra que es el slider. Van a desplegar Slider. Luego seleccionan y borran "Handle Slide Area". Como habrán notado se borra el circulito que había en la barra de la pantalla, eso no lo vamos a usar ya que es una barra de vida. Pero ahora queda un espacio vació en la punta que parece como si la vida no estuviera llena. Seleccionen "FillArea" y en el inspector cambien el valor right de 15 a 5. Ahora se ve llena. Desplieguen "FillArea" y en el componente color, hagan click en el rectángulo blanco. En la opción que les aparece cambien el color a uno de barra de vida, yo voy a usar verde. Ahora vamos a ubicar la barra de vida, hagan doble click a slider en el hierarcyh para mover la escena hacia donde se encuentra. Los UI se encuentran en el Canvas. El Canvas en la escena se ve como un rectángulo gigante. Pongan la escena de frente con el símbolo que esta en la esquina de la pestaña scene. Presionen la tecla T para usar la herramienta de transformar. Se acuerdan que les dije que esta herramienta podía mover y cambiar el tamaño, pero estaba pensada para 2D. Bueno para estas cosas sirve. Si presionan un borde o una de las esferas de las esquinas le cambiaran el tamaño. Estirenla bastante hacia los lados hasta que ocupe 3/4 de la pantalla mas o menos. Presionen el centro y arrástrenlo hasta el centro de la pantalla, y hasta bien cerca del borde inferior. La herramienta mismo les ayuda a que quede centrada. Ahí mismo denle play(Ahora es importante que este la opción "Maximize on Play" marcada) Verán que al darle play la barra se encoge y se pone en el medio de la pantalla: Ahora con el slider seleccionado, veran que en el inspector junto al valor "right" que modificamos antes, hay un cuadrado con varios cuadrados y lineas. Eso es adonde esta "anclado" el objeto, osea a donde se va a anclar el objeto si la pantalla cambia de tamaño. Tenemos que hacer que se "ancle" al borde inferior, y que se estire a los lados con la pantalla(Así no se encoge). Presionen ese cuadrado y seleccionen las opciones marcadas en la siguiente imagen: Vuelvan a probar darle play y ahora la barra debería quedarse abajo y estirarse a los lados: Tip: Como pueden ver en las imágenes yo agregue varios prefab "Obstaculo". Para mantener el orden también cree un "empty object" en el hirarchy lo renombre "obstaculos" y los puse todos como sus child 3.- Programando la Barra de Vida Ahora que ya tenemos nuestra barra de vida solo hace falta programarla para que funcione, y que las balas en vez de matarnos nos saquen un poco de vida. Vamos a la carpeta Scripts y creamos un nuevo C# llamado Vida. Lo abrimos y como siempre que creamos un script nuevo borramos todo lo que esta entre el primer y ultimo brace. En esta ocasión justo debajo de using System.Collections; vamos a pegar la linea using UnityEngine.UI; Nos va a quedar un script así: Vamos a agregar dos variables Int. Cuando vamos a agregar dos variables que son iguales, podemos ponerlas en la misma linea con una coma de por medio. Ejemplo en vez de hacer: public int variable1; public int variable2; Podemos hacer: public int variable1, variable2; Las variables que vamos a hacer nosotros son int con el nombre "vida" y "vida_maxima" Imagino que pueden crearlas solos basándose en el ejemplo de arriba. Debajo de esas variables crearemos una mas que sera así: public Slider barra_vida; Estas variables serán para determinar la vida actual y máxima del jugador. Y la variable slider sera donde colocaremos el slider que creamos en el paso anterior. Ahora quiero que creen un nuevo void Start () y dentro de el pongan vida = vida_maxima; Si algo de esto te confunde o no te queda claro quizas deberias dar un repaso a los post anteriores. Sino de todos modos mas adelante pongo el script completo para que verifiques que lo hiciste bien. Ese void que creamos es para que siempre al empezar la partida nuestra vida actual sea igual a nuestra vida al máximo. Ahora vamos a crear un void Update(). Y dentro de el pongan barra_vida.maxValue = vida_maxima; y debajo barra_vida.value = vida; Esto hace que el valor máximo de ese slider que creamos, se el mismo que la vida_maxima, y que el que tan lleno esta sea acorde a nuestra vida actual. por ultimo vamos a crear una condición: if (vida <= 0) Como se habrán dado cuenta esta condición se cumple si la vida es igual o menor que 0. Pongan los braces debajo de la condición, y dentro de los braces: Destroy(gameObject); El código completo debe lucir así: Ahora guarden el código y vuelvan Unity, esperen a que compile y vean que no les de ningún error. Seleccionen al jugador, y en el inspector minimicen cada componente. Luego arrastren el script Vida hacia un espacio vació del inspector. Pongan vida_maxima en 100(vida no le cambien nada) y arrastren el slider que creamos desde el hierarchy hasta la variable "Barra_vida" que esta en el inspector(Justo en el recuadro que dice "None (Slider)". Abran el script "Bala" haciéndole doble click en la carpeta scripts. Y vamos a modificarle unas cosas para que en vez de destruir al jugador de un solo tiro, le saque 10 de vida. En la linea que dice Destroy(other.gameObject);, pongan: other.GetComponent().vida -= 10; Lo que hace esto es al "chocar" con el jugador, accede a su componente "Vida" y modifica el valor "vida" restandole 10. Así completo el nuevo script "Bala": Por ultimo en este paso, seleccionen el prefab "Bala" en la carpeta Prefabs. Y en el inspector cambien "Layer" de Default a IgnoreRaycast Esto es porque nuestro jugador, tiene un script que detecta cuando un objeto esta encima de el, y cuando eso pasa se agacha. Esta detección la hace atraves de Raycast así que ponemos la bala para que ignore esos Raycast y que el jugador no se agache cada vez que lo atraviesa una bala. Ahora ve y prueba los cambios que hiciste, en teoría se necesitan 10 golpes de bala para matarte, y a cada golpe de bala se te va a reducir la barra de vida. Tip: Los Raycast los había mencionado antes cuando hable de mi cámara. Son algo así como rayos que se utilizan para distintas cosas. Como comprobar una distancia, o si hay un objeto en el camino. Son algo MUY valioso, y aprenderemos a usarlos mas adelante. De momento imagina que un rayo nace de la cabeza de tu jugador unos centímetros hacia arriba, y si ese rayo choca con algo, el jugador se agacha 4.- Creando un Control Principal Ahora vamos a usar un código que no va en ningún objeto en especifico. Quiero decir, no va en la bala, ni en el jugador, ni en el piso... No va específicamente en ningún lado. Pero aun así debemos ponerlo en un objeto en la escena. Esto va a pasar varias veces con varios scripts. Lo que se hace en este tipo de situaciones, es crear un único "empty object" renombrarlo de alguna manera(Generalmente les pongo Main Control, pero como estoy tratando de poner casi todo en español...), y poner ahí todos los códigos sin hogar. Así que creen un nuevo empty object, y renombrenlo "Control Principal". Vayan a la carpeta Scripts y creen un nuevo C# con el nombre "ControlPrincipal" así sin espacios. Ábranlo y borren todo entre el primer y ultimo brace como siempre. Y luego añadan un void Update (). Entre los braces del update pongan la siguiente condición: if(Input.GetKeyDown(KeyCode.R)) Esta condición se va a cumplir cada vez que se presione la R. Añadan los braces de la condición, y entre ellos pongan: Application.LoadLevel(Application.loadedLevel); En resumen, cada vez que presionen la R, el nivel se reinicia. El código hasta ahora: Guarden el código y vayan a Unity. Cuando haya compilado y no les de errores prueben caminar un poco reciban un par de balazos o algo. Y luego presionen R. Si todo salio bien se reinicia el nivel desde el principio. Tip: Recuerden ir guardando la escena y el proyecto cada tanto para no perder todos los avances si Unity se crashea o si se les apaga el pc. 5.- Creando el Sistema de Puntos Bien ahora para darle un poco mas de jugablidad a lo que tenemos, vamos a hacer un sistema de puntos. Hagan click derecho en el canvas > UI > Text Esto les creara un nuevo texto, con el seleccionado vayan al inspector, y pongan en Font Size un 20 y en Font Style elijan la opción Bold. Y centrenlo horizontal y verticalmente en las opciones que dicen Alignment. También cambien el color en el recuadro ya que por defecto es gris. Pónganlo totalmente blanco. Ahora en el inspector pongan "Add Component..." y escriban en el recuadro de busqueda "Outline". Este nuevo componente es para ponerle un contorno al texto. En el componente nuevo abran el recuadro de color y cambien el canal alfa(es el ultimo tiene una A) al maximo. Esto es la transparencia, viene por defecto medio transparente, pero nosotros lo queremos solido. También cambien el valor Y de -1 a 1. Ahora hagan doble click en Text en el hierarchy, así la escena se centra en el. Y con la herramienta T activa, quiero que lo muevan al centro de la pantalla, y justo por arriba de la barra de vida. Por ultimo, en la opción que usamos para que la barra de vida se quede abajo y se alargue, vamos a seleccionar que el texto se quede abajo al centro. Tip: El componente Outline es un muy lindo efecto, y pueden usarlo en casi cualquier cosa 2D 6.- Programando el Sistema de Puntos Ya tenemos ubicado donde van a mostrarse nuestros "Puntos". Solo falta programarlos y poner los objetos que los darán. Vayamos nuevamente al script "ControlPrincipal" y como debajo de using System.Collections;, añadan using UnityEngine.UI;. Esa linea que también usamos en el script Vida, es un requisito para poder modificar todo lo que sea UI. En el caso anterior el slider, en este caso el texto. Añadan dos variables: public int puntos; public Text mostrar_puntos; También añadan un void Start (), y dentro de sus braces pongan puntos = 0; para que siempre al comenzar tengamos 0 puntos. Por ultimo dentro del Update añadan: mostrar_puntos.text = "" +puntos.ToString(); El script completo: Guarden el codigo y vayan a Unity. Seleccionen "Control Principal" en el hierarchy y arrastren Text desde el hierarchy hasta la variable "Mostrar_puntos" en el inspector. Ahora pruebenlo. Si todo salio bien, al darle play en vez de "New Text" va a decir "0". Tip: Siempre asegúrense que no haya errores ni advertencias después de hacer algún cambio en un script. De haber un error no podrán darle "Play". También siempre que hagan algun tipo de cambio pruebenlo para verificar que todo este funcionando bien. 7.- Creando el Primer PowerUp Bien llegamos al ultimo apartado de este PostTutorial. Para ir cerrando haremos un objeto que nos sume los puntos que creamos. Primero que nada, vayan a la carpeta Materials y creen un nuevo material llamado "PowerUp" y ponganle el color azul(Si no recuerdan como vayan al primer tuto). Creen una esfera en el hierarchy y cambienle el nombre a "PowerUp". Como hicieron con "Bala" cambien el Layout de Default a Ignore Raycast. Y por ultimo ponganle la opción IsTrigger activada. Ahora arrastreenle el material a la esfera y ya casi tenemos nuestro PowerUp terminado, solo falta el script. (Ponganlo en la posición 0, 1, 0 y háganle doble click para verlo) En la carpeta Scripts creen un nuevo C# llamado PowerUp. Abranlo y borren todo entre el primer y ultimo brace como siempre. Lo primero es una variable: ControlPrincipal control; Dos cosas para explicar acá. No dice public, porque no necesitamos que sea publica ni se vea en el editor, así que no le ponemos nada. El tipo de variable(int, float, etc) es el nombre de otra script que ya tenemos creada. Esto es para poder acceder a ella. Luego creamos un void Start () y dentro colocamos: control = GameObject.Find("ControlPrincipal".GetComponent(); Vieron cuando creamos una variable publica y luego nosotros mismos vamos y arrastramos el objeto hacia ella(Como hicimos con slider, y text). En este caso en vez de hacerlo nosotros, lo hará el código cada vez que empiece el juego. También vamos a hacer un void OnTriggerEnter (Collider other), como tiene "Bala". Y dentro de los braces vamos a poner una condición: if(other.tag == "Player" Dentro de los braces de esta condición: control.puntos += 10; Destroy(this.gameObject); En resumen, si choca con el jugador, va a sumar 10 puntos a la variable que esta en el script ControlPrincipal, y se va a destruir el objeto PowerUp. El script terminado: Arrastren el script a la esfera que crearon y pruebenlo. La esfera debería estar justo detrás del jugador, intenten agarrarla. En teoría, la esfera se destruye y a ustedes se les suman 10 puntos: Para ir terminando, abran la carpeta Prefabs y arrastren la esfera "PowerUp" hacia la carpeta para crear un prefab. Ahora dupliquen el PowerUp varias veces(unas 10) y ponganlas dispersas por el mapa(Pongan la vista desde arriba con el icono e la esquina de scene y hagan doble click en piso). Creen un empty object con el nombre "PowerUps" y pongan todas las esferas dentro para mantener organizado. Pueden ir probando como quedo intentando agarrarlas todas, si pierden pueden presionar R para comenzar de nuevo. Y eso es todo por ahora.... Tip: Esto de ponerle nombre "Bala" al objeto "Bala" al material "Bala" al script y así con todo, es un habito mio. Seguro es mas organizado por Bala, Bala_Script, Bala_Material, etc. Para evitar confundirse ¡Encuestas! Mis otros Post ¿Que sigue? Yo creo que es genial lo que tenemos hasta ahora! En solo 3 post ya tenemos un juego con objetivo y dificultad, y en el proceso aprendimos un montón de cosas que vamos a usar en casi cualquier juego futuro. Pero esto no queda así, yo les prometí que haríamos un buen juego. Esto que tenemos ahora sigue siendo la maqueta, de momento vamos a seguir mejorando la maqueta. Al terminar el Nivel: Intermedio vamos a tener la maqueta completada y ahí voy a comenzar una serie de tutoriales "Extra" donde enseñare lo necesario para que cada uno pueda personalizar su juego y no sean todos iguales. En los siguientes veremos: Mas PowerUps(+Vida, +Velocidad, -Vida, +Disparos, -Visión)Generación aleatoria de los PowerUpNuevos enemigosMenús(Menú Principal, Menú de Pausa) Les pido que saquen capturas de sus avances y las shouteen con el hastag #PostTutoriales así yo también puedo ser parte de sus avances Eso es todo, como siempre muchísimas gracias por leerme, por comentar por pasar, por los puntos si dejan, y principalmente por compartir el post Recuerden que acepto criticas, las adoro me ayudan a crecer mucho. Gracias por la onda, Saludos!