FASE 2 - GAME OVER ⏰ 20' aprox
Esta página contiene las instrucciones específicas de la Segunda Fase de la sexta sesión para desarrollar el juego del Puente de las Flores.
Vamos a crear ahora la pantalla de Game Over, que se activará cuando nuestro contador de vidas llegue a 0.
Para ello, añadimos a nuestro Canvas tres nuevos elementos.
En primer lugar, una imagen, que será nuestra imagen de fondo. Click derecho en el Canvas > UI > Image. Cambiamos el nombre por Imagen_GameOver.
Ponemos los siguientes valores en el inspector, componente Rect Transform, para que nuestra imagen ocupe toda la pantalla.
Por último, nos vamos a la carpeta Images y seleccionamos la imagen gameover. Cambiamos Texture type a Sprite (2D and UI) y pulsamos en Apply.
Por último, la arrastramos a la imagen de nuestro Canvas en el campo Source Image del inspector.
Esta imagen la hemos generado mediante inteligencia artificial, en https://designer.microsoft.com/ utilizando el prompt “Genera imágenes tipo vector, en el puente de las flores de valencia, en la que aparece un policía, con traje y gorra azules, gafas de sol y un bigote de pelo negro, triste y agobiado porque le han robado muchas flores. Hay muy pocas flores en el suelo”
En el inspector, desactivamos la imagen para que no se vea. La activaremos con el script GestorVidas cuando nuestro contador llegue a 0.
El siguiente elemento de nuestra pantalla de Game Over, será un mensaje.
Lo creamos haciendo click derecho en el Canvas > UI > Text - TextMeshPro.
Cambiamos el nombre a Mensaje_Final, el texto, la fuente, y ajustamos la posición en el canvas.
Vamos a añadir también un botón debajo para reiniciar la partida. Por ello, lo ponemos en la parte superior de la pantalla.
Por último, lo desactivamos de la misma forma que hemos hecho con la imagen.
Para crear el botón de Reiniciar Partida, hacemos Click derecho en nuestro Canvas > Button - TextMeshPro.
En el inspector, desactivamos el componente Image para que nuestro botón solo tenga texto.
Después, en la jerarquía, al desplegarlo, vemos que tiene un texto.
Lo seleccionamos, y en el inspector, vamos a modificar el mensaje (REINICIAR PARTIDA), cambiamos también la fuente, y vamos a ajustar su posición.
Al ajustar la posición, es importante que el botón y el texto queden en el mismo sitio.
Podemos comprobarlo seleccionando estos elementos en la jerarquía. El botón es el elemento al que hacemos que hacer click para reiniciar la partida, y el texto es lo que aparece en pantalla.
También podemos cambiar el color del texto cambiando el valor de Vertex Color.
Activamos todos los elementos para comprobar como se ven juntos y si tenemos que ajustar algo, y los volvemos a desactivar.
El siguiente paso es modificar el script GestorVidas para que se activen los elementos de la pantalla de GameOver cuando el contador de vidas llegue a 0 y para que funcione el botón de reiniciar partida.
using System.Collections.Generic;
using System.Linq;
using TMPro;
using UnityEngine;
using UnityEngine.UI;
public class GestorVidas : MonoBehaviour
{
public List<Image> imagenVida; // Lista de las imágenes de macetas
private int vidas; // Número inicial de vidas
public TextMeshProUGUI mensajeInicio; //Mensaje inicial
public TextMeshProUGUI mensajeFinal; //Mensaje de Game Over
public Button botonReiniciar; //Botón de la pantalla de Game Over
public Image background; //Imagen de fondo de la pantalla de Game Over
private bool gameOVer;
//Inicializamos el número de vidas
//Buscamos las imágenes de las macetas en la escena y las añadimos a la lista
//Mostramos el mensaje inicial y lo ocultamos a los 3 segundos
//Añadimos un listener al botón de reiniciar
void Start()
{
vidas = imagenVida.Count;
if (imagenVida.Count == 0)
{
foreach (Transform child in transform)
{
Image macetaImage = child.GetComponent<Image>();
if (macetaImage != null)
{
imagenVida.Add(macetaImage);
}
}
}
Invoke("OcultarMensaje", 3f);
botonReiniciar.onClick.AddListener(Reiniciar);
}
void Update()
{
//Expandimos el mensaje inicial antes de que desaparezca
if (mensajeInicio.isActiveAndEnabled)
{
mensajeInicio.transform.localScale = new Vector3(
mensajeInicio.transform.localScale.x + 0.02f,
mensajeInicio.transform.localScale.y + 0.02f,
mensajeInicio.transform.localScale.z + 0.02f);
}
//Llamamos al Game Over cuando no nos quedan vidas
if (vidas == 0)
{
if (!gameOVer)
{
gameOVer = true;
GameOver();
}
}
}
//Método para que desaparezca el mensaje inicial utilizado en el método Start
private void OcultarMensaje()
{
mensajeInicio.gameObject.SetActive(false);
}
//Método para perder una vida que utilizamos en el script MoverPeaton
public void PerderVida()
{
if (vidas > 0)
{
vidas--;
imagenVida[9 - vidas].gameObject.SetActive(false);
}
}
//Metodo para reiniciar la partida, lo llamamos al pulsar el botón de reiniciar
private void Reiniciar()
{
UnityEngine.SceneManagement.SceneManager.LoadScene(UnityEngine.SceneManagement.SceneManager.GetActiveScene()
.name);
}
//Método para mostrar la pantalla de game over
private void GameOver()
{
mensajeFinal.gameObject.SetActive(true);
botonReiniciar.gameObject.SetActive(true);
background.gameObject.SetActive(true);
foreach (Transform child in transform)
{
child.gameObject.SetActive(false);
}
}
}
Por último, seleccionamos el contador de vidas, y en el inspector añadimos los elementos de la pantalla de Game Over en el componente Gestor Vidas, y comprobamos el funcionamiento pulsando Play.
