Capítulo 9 - UI en el juego
Ya sabemos manejar ui/CocosGUI.h. Ahora veremos cómo crear componentes de interfaz de usuario dentro de nuestro juego como la barra de salud o los indicadores de puntuación que no tienen por qué ser únicamente componentes de ui/CocosGUI.h.
Recuerda que en este capítulo usaremos las clases y recursos del capítulo anterior.
9.1 - Score, Salud, botón de pausa ...
Si recordáis nuestra GameLayer de capítulos anteriores, ahora se llama Level1 y hereda de BaseGameLayer, en esta clase BaseGameLayer, se encuentra la interfaz de nuestro juego y la lógica para manejarla así como aquellos componentes comunes a todos los niveles (el player, la UI, alguna lógica...etc.). Así que para explicar la interfaz, comenzaremos explicando la clase BaseGameLayer.
BaseGameLayer.h
BaseGameLayer.cpp
La interfaz de usuario se compone de: Botones de pausa y resume, barra de salud del jugador, indicador de puntuación, indicador de porcentaje de nivel completado y el texto que indica que el nivel se ha completado al llegar a una puntuación determinada.
Como vemos todos los elementos comunes a todos los niveles, entre ellos las UI están encapsulados en esta clase, también su lógica, no es una clase compleja, ya que casi todos los métodos son de creación y posicionamiento de elementos. Prestaremos especial atención a como se ha creado la barra de salud y al método update de esta clase. Pare ello mira el método createHealthIndicator donde componemos y añadimos a la escena la barra de salud, esta barra tiene 3 componentes: healthContainerIndicator una imagen de una nave pequeña que indica que esa es la salud del jugador, healthContainer, una imagen de fondo para la barra de salud y por último la barra roja de salud healthBar para que esta barra se comporte como es debido se debe posicionar su anchorPoint en 0, 0.5 ya que no solo el posicionamiento de los Sprites va en función del anchor point sino también su rotación y escalado y esta barra será escalada en función de la salud del jugador.
Ahora que ya posicionamos la barra de salud echemos un ojo al update en concreto a la línea que pone _healthBar->setScaleX(static_cast(_player->getHealth()) / static_cast(MAX_HEALTH)) como vemos se modifica el tamaño de la barra en función de la cantidad de vida que tiene el jugador escalando la barra, el factor de escalado lo obtenemos dividiendo el número de vidas del jugador entre la vida total del mismo.
En este método update también se gestiona qué debe aparecer en el Label de puntuación y porcentaje de completado del nivel. Si el jugador completa el nivel, se llama a la función levelCompleteActions que muestra un texto en pantalla para indicar que se completó el nivel y tras un par de segundos lanza al jugador a la pantalla de selección de nivel para que elija si quiere jugar el siguiente nivel o jugar uno que ya haya superado. Además guarda mediante el GameManager el nivel superado por el jugador.
El resto de componentes no es demasiado difícil advertir su funcionamiento así que no los veremos en profundidad. Mejor vemos el comportamiento de una clase derivada de esta.
Level1.h
Level1.cpp
Esta clase equivale a la que llamábamos GameLayer en capítulos anteriores. Como vemos hereda de BaseGameLayer, veamos cómo se comporta.
En su método init() se llama antes al init de la superclase BaseGameLayer no al de Layer::init() además en su update antes llama al update de la superclase BaseGameLayer::update(dt) de esta forma la interfaz de usuario también se actualizará en cada frame. El resto ya lo conocemos de capítulos anteriores como la forma de lanzar enemigos en el juego.
Además se implementa el método pauseButtonAction y resumeButtonAction sobreescribiendo los de la superclase para indicar cómo pausar el nivel en que nos encontramos. Para más detalles acerca de esto echaremos un ojo más adelante al método pause de la clase Player. Este es el aspecto que presenta hasta este punto nuestro primer nivel.
Botones de pausa
Estos botones son creados en la superclase BaseGameLayer, ambos creados en la misma posición, solo que al comenzar el juego el botón de resume esta invisible y deshabilitado, al tocar el botón de pausa, es este el que pasa a estar invisible y deshabilitado y se habilita el de resume es decir al tocar uno de ellos este se deshabilita y habilita al opuesto. Su funcionalidad es extendida por clases derivadas, si vemos la implementación de pauseButtonAction en la clase Level1, vemos que primero llama al mismo método de la superclase y luego añade funcionalidad específica del nivel como pausar los enemigos o al jugador (o cualquier otro componente del nivel).
Botón de volver a jugar o respawn
Este botón también es creado en la clase BaseGameLayer y extendido por sus clases derivadas, una vez pulsado se ejecutará el método respawnButtonAction que reseteará el nivel en cuestión. Basta con ver su implementación en la clase Level1. Este botón es mostrado en pantalla al pulsar el botón de pausa o al morir el jugador (ver clase BaseGameLayer)
