Para empezar
Supongo que ya tienes los gráficos de tu barra de vida (lifebar). Puedes diseñarlos como quieras, siempre que siga esta estructura:
La segunda barra es opcional, tan solo mejora la apariencia.
Paso 2
Impórtalos en Construct y asígnales los puntos de imagen (image points) como aparece acontinuación:
Ajústalos hasta que cuadren. Para facilitarnos el trabajo, le pondremos un nombre a cada objeto. Los llamaremos: Frame (al marco), Subbar (al fondo) y Bar (a la barra). Al personaje, u objeto al que afectará nuestra barra, lo llamaremos: Hero.
Pon los objetos en una capa separada. Y asegurate de que los valores Parallax X e Y de dicha capa están en 0. (Esto hará que nuestra barra aparezca siempre en pantalla)
Paso 3
Añade algunas propiedades, como "Life" y "MaxLife" a nuestro Hero e "InitialWidth" (anchura inicial) a la barra. Para añadir las propiedades, vamos al panel izquierdo > Instance Variables -> Add/edit Instance Variables. Edítalas como quieras, por ejemplo: si quieres que tu Hero tenga 100 como vida máxima, pon en la variable MaxLife 100 y en Life otros 100, para que empiece con la vida rellena.
Otra forma de añadir propiedades es: Ir al panel de objetos, hacer click derecho en el objeto -> Instance variables... O también, ir a la hoja de eventos (Event sheet): Add Action -> doble click en el objeto -> Ir a la sección de "Instance Variables" -> Set Value (Por lo general en un evento "On Start of Layout", pero puede estar donde quieras.)
Paso 4
Último paso: los eventos. Para organizarnos mejor, añade una hoja de eventos que se llame HUD, o como quieras.
En el panel Projects -> Click derecho en Event Sheets -> Add Event Sheet.
Para añadirla a la hoja de eventos principal: abre la principal y en la parte blanca haces click derecho -> Include Event Sheet. Después en la hoja de eventos HUD:
Añade un evento System: On Start of Layout . Y en sus acciones:
- Bar: Set Position to (Frame.X, Frame.Y)
- Subbar: Set Position to (Frame.X, Frame.Y)
- Bar: Set Instance Variable InitialWidth to Self.Width
Debajo de esto, añade un evento: System: Every Tick con las acciones:
- Bar: Set Width to (Self.InitialWidth + (Hero.Life-Hero.MaxLife)*(Self.InitialWidth/Hero.MaxLife))
(Gracias a @Sargas por el consejo !)
Y ya has terminado! Los puntos de imagen colocarán las barras correctamente, así al cambiar la anchura no se modificará su posición.
Ahora solo debes manipular la Hero.Life como quieras! Eso es todo, nos vemos en el siguiente tutorial :D
Así se vería finalmente: