Este es un breve tutorial que te mostrará cómo crear una interfaz de usuario (UI, también conocida como heads-up display o HUD) en un único layout dedicado que se lleva a través de todo tu juego. La ventaja de construir tu UI (Interfaz de Usuario) de esta manera en lugar de duplicar los objetos de UI en cada nivel, es que cuando necesitas hacer cambios posteriores, sólo tienes que hacerlos en un único layout. Este sistema también te permite personalizar tu aspecto y comportamiento en el editor, en lugar de utilizar eventos para construir tu UI en el inicio de cada pantalla del juego.
Este tutorial asume que tienes al menos un nivel de principiante en conocimientos de Construct 2, en particular, el uso de múltiples layouts y hojas de eventos.
Si quieres descargar el capx completo para este tutorial, lo puedes conseguir aquí (requiere Construct 2 r136 o superior).
Visión general
En este tutorial vamos a asignar a nuestros elementos UI (ya sean de texto, sprites, 9-patch, tiled backgrounds (fondos de azulejos) o cualquier otra cosa ) la propiedad global. Cuando un objeto se establece como global este no será destruido en cambios de layouts, y continuará en el próximo layout con su misma posición, variables de instancia y comportamientos intactos.
A los efectos de este tutorial, voy a suponer que tú estás construyendo un juego basado en torno a múltiples layouts (uno por nivel). Si utilizas otro sistema, este tutorial sigue aplicando, pero en la segunda página donde cubro usos más avanzados de esta función, es posible que tengas que ajustar tu juego en consecuencia.
Paso 1: Construyendo la base
Crea tres layouts, cada uno con su propia hoja de eventos. Los llamaremos "Menú Principal", "UI", y el "Nivel 1".
En el menú principal de layouts, crea un objeto texto llamado "NuevoJuego" y escribe ese texto en él. También crea un objeto mouse.
Ahora, en tu layout UI, cambia el nombre de default layer a "UI" y crea una nueva capa (layer) debajo de ella llamada "Juego". Añade cualquier objeto que desees a la capa UI, tales como objetos de texto llamados SaludJugador, VidasJugador y RecordActual. Colócalos cómo quieras. Ahora, ve a cada objeto de UI que creaste y, en el panel de propiedades, establece cada objeto como "Global: yes".
Selecciona la capa "UI", y luego, en el panel de propiedades, establece su propiedad Parallax a 0,0.
Ahora vete a tu layout Nivel 1. Una vez más, establece las capas a "UI" y "Juego", y establece la propiedad Parallax de la capa "UI" a_ 0,0. Es crítico que los layouts del juego y layout UI tengan exactamente la misma estructura de capa. También es un buen hábito a obtener el crear más capas de las que necesitas, tales como "Fondo1", "Fondo2", "Juego1", "Juego2, etc.".
Paso 2: Los eventos
La lógica que vamos a crear aquí nos dice para nuestro juego que vaya desde el menú principal a la pantalla de UI, recoja los elementos UI, y luego vaya a nuestras pantallas de juego actual. Así que vamos a hacer esto en estos pasos:
Desde tu Menú Principal, crea un evento [Mouse: On Left button Clicked on NewGame -> System: Go to “UI”]. Este evento será diferente en tu propio juego, pero el punto aquí es llevar el juego hacia el layout UI primero antes de ir al layout del juego.
A continuación, en UI, crea un envento [System: On start of layout -> System: Go to “Level 1”]. Esto llevará a nuestro jugador hacia el propio layout del juego.
Y eso es todo! Tú has construido con éxito una UI global con sólo dos eventos! La clave es entender la lógica, y cómo los objetos globales funcionan.. Con ellos, Tú podrás hacer mucho más que sólo los elementos UI. Jugadores, enemigos, armas y NPCs pueden todos beneficiarse de propiedad global, siempre que estos objetos sean correctamente manejados. Esto nos lleva a nuestro siguiente paso el cual es enteramente opcional...