Creación de un heads-up display (HUD)
Un HUD (pantalla de información) es la interfaz de usuario, que nos mostrará en pantalla, la salud de nuestro personaje, su puntuación y demás informaciones propias del juego, útiles para el jugador. Vamos a hacer un HUD muy simple, con un objeto de texto.
El HUD debe permanecer en el mismo sitio de la pantalla, por mucho que esta se desplace a través del layout. Una forma sencilla de hacerlo es poner todos los objetos de nuestro HUD en una capa y ajustar su paralaje a cero. El Parallax (paralaje) es una propiedad de las capas, que permite que estas se desplacen a distintas velocidades. Muy útil para hacer que las capas del fondo se muevan a menor velocidad que las que están en primer plano, lo que nos va a dar una sensación de profundidad que aporta cierto realismo al movimiento de un personaje a través de un escenario. Lo habrás visto en infinidad de juegos. El caso es que si ajustamos el paralaje a cero, la capa permanecerá fija lo cual nos viene muy bien para nuestro HUD.
Volvamos a la barra de capas que ya hemos usado con anterioridad. Añadir una nueva capa llamada HUD . Asegurarse de que esté en la parte superior y seleccionarla (recuerda que esto la convierte en la capa activa). La barra de propiedades nos mostrará sus propiedades. Basta con ajustar la propiedad Parallax a 0, 0 (para sus ejes X e Y).
Doble clic sobre el layout de esta capa para añadir un nuevo objeto. Esta vez escoger el objeto texto . Colócalo en la esquina superior izquierda del layout. Si el color del texto es el negro, va a ser difícil de ver, de modo que vamos a cambiar alguna de sus propiedades. Vamos a ponerlo en negrita, cursiva, color amarillo y vamos a escoger un tamaño de letra ligeramente más grande. Es posible que el recuadro de texto, nos quede algo pequeño, por lo que lo adaptaremos a nuestras necesidades.
Nos quedará algo parecido a esto:
Volvamos a nuestra hoja de eventos. Lo único que tenemos que hacer, es que este texto nos muestre en todo momento la puntuación de nuestro juego. En el evento Every tick que ya teníamos, vamos a añadir la siguiente acción: Text -> Set text .
Usando el operador & , podemos convertir un número a texto y unirlo a otra cadena de texto. Así que para el texto, ponle:
"Score:" & Score
La primera parte ( "Score:" ) significa que el texto que se nos va a mostrar en pantalla empezará siempre con Score: . La segunda parte ( Score ) es el valor actual de la variable global Score. Tenemos por tanto por un lado un valor de tipo texto y por otro un valor de tipo numérico. Y queremos que los dos nos aparezcan en la misma linea. Para ello tenemos el & que une ambas variables en un texto único.
Prueba el juego, recorre el escenario y dispara a algunos monstruos. Verás como se muestra la puntuación y esta permanece en el mismo lugar de la pantalla!
Toques finales
Estamos a punto de terminar. Vamos a añadir algunos toques finales.
En primer lugar, vamos a hacer que algunos monstruos aparezcan regularmente, porque una vez que se ha aniquilado todos los monstruos no hay nada más que hacer. Vamos a crear un nuevo monstruo cada 3 segundos. Añadir un nuevo evento:
Condición: System -> Every X seconds -> 3
Acción: System -> Create object -> Monster, layer 1 , 1400 (para X) random(1024) (para Y)
Por lo tanto, los monstruos se crearán en un punto que tendrá por coordenada X 1400 , cerca del límite derecho de nuestro layout y una coordenada Y random (1024) que abarca la altura de nuestro "layout". En resumen, se van a crear en la parte derecha de nuestra área de juego a distinta altura.
Por último, vamos a hacer que el jugador pueda morir.
Condición: Monster -> On collision with another object -> Player
Acción: Player -> Destroy
Conclusión
Felicitaciones, has hecho tu primer juego HTML5 con el Construct 2! Si tu tienes un servidor y quieres mostrar tu trabajo, haz clic en Export en el menú file. Construct 2 guardará todos los ficheros del proyecto en una carpeta de tu ordenador. Podrás subir esta carpeta a un servidor o usar Dropbox o similar y compartirlo.
Has aprendido algunos aspectos básicos de Construct 2: Insertar objetos, usar capas, comportamientos, eventos y mas. Estos conceptos, constituyen unos buenos cimientos que te permitirán profundizar en el aprendizaje del Construct 2! Sigue explorando y experimenta con estas características y mira lo que puedes hacer con ellas.
Una última cosa
Trata de descargar el último tutorial actualizado. He añadido algunas características extra como una pantalla de "Game Over" y monstruos que se aceleran gradualmente. Con lo que has aprendido en este tutorial, no te resultará difícil de comprender como funcionan estas novedades. Encontrarás muchos comentarios describiendo como funciona.
Muy bien! Si tienes algún problema o crees que alguna parte de este tutorial puede ser mejorada, deja algún comentario en el foro. Veremos que podemos hacer!
Por último, si te ha gustado este tutorial y crees que a algún conocido le pueda gustar , ¿por qué no le envías un enlace a este tutorial? No temas, no le hará ningún daño! :)
Lecturas a mayores
¿Quiere agregar música y efectos de sonido? Mira sonidos y música en el manual.
Es muy probable que puedas estar interesado en seguir el tutorial alternativo de iniciación que versa sobre cómo crear un juego de plataformas.
Si quieres saber más acerca de cómo trabajan los eventos en Construct 2, consulta la sección cómo trabajan los eventos, en el manual. Es muy recomendable para poder avanzar más rápido en tus propios proyectos!
No te olvides que está a tu disposición, para mayor información, el manual del Construct 2