Página 12: Apuntes de "How to make an ARPG in godot 4 #13: Player health part 1"

Lista de reproducción completa del tutorial de Godot sobre cómo crear un Action-RPG en Godot, creada por MakerTech

https://www.youtube.com/playlist?list=PLMQtM2GgbPEVuTgD4Ln17ombTg6EahSLr

Vamos a revisar como implementar un sistema de salud al juego, donde el jugador pierda salud al entrar en contacto con el hitBox del enemigo.

Vamos actualizar el script del jugador agregándole dos nuevas variables.

Actualizamos el contenido del signal que hicimos para que el jugador detectara otras hitBox.

 

 

Vamos a crear dos escenas nuevas, HeartContainer y HeartGui 

Al contrario del video-tutorial, vamos a empezar creando el HeartGui, que es el grafico del corazón, esta escena se compone por un nodo Panel y su hijo Sprite2D. 

Sacar el panel a través de Other Node de una nueva escena, con la opción de Create New > Scene te quita el fondo oscuro del Panel.

Finalmente, acabe enseñando como crear nodos nuevos.

 De momento debe quedar así nuestra escena.

Desactivamos Sprite2D > Offset > Centered .

Vamos hacer que es fondo oscuro del Panel no se vea.

 

 Arrinconamos el Sprite2D a la esquina del viewport y ajustamos el tamaño del panel al del corazón.

 

Vamos al inspector del Panel y modificamos Control > Layout > Custom Minimun Size (x=16,y=13)

 

Vale, ahora vamos a crear el HeartContainer, que sera una escena con un solo HBoxContainer.

Así tal cual.

Meteremos de manera provisional tres HeartGui como hijos del HeartContainer, solo para hacer unas cuantas pruebas, luego los borraremos, así que no os encariñéis mucho.

 

Podremos modificar la distancia entre Heart Gui, activando y modificando el campo que se encuentra en BoxContainer > Control > Themes Overrives > Constants > Separation.

 Diferencias de separation desactivado, a 0 y a 5.

  

 Para agregar esta interfaz en el mundo del juego, le crearemos un nodo CanvasLayer y volcaremos nuestra escena HeartContainer

 

 Por defecto debería ponerse ponerse así la GUI.

 

Podremos modificar la posición y el contenido de HeartContainer.

Box Container > Alignment: Alinea el contenido del HBoxContainer

Layout > Anchors Presests: Indica donde situar el HBoxContanier en el CanvasLayer.

 En la próxima pagina de anotaciones, empezaremos a cargarle los script correspondientes.