User Interface - Project3CITM/CulverinEngine-Project3 GitHub Wiki
User Interface
Overview
Empezaremos diciendo que nuestro juego tendremos una user interface más clásica al más puro estilo de los RPG. Pero para mejorarla para nuestro juego la simplificamos y la haremos más accesible para el jugador. La idea es crear una UI más funcional y fácil de usar para usuarios que no hayan jugado a juegos como el nuestro puedan dominarla en el menor tiempo posible.
Dividiremos este apartado por cada una de las partes que necesitaremos de UI en el juego.
Pantalla de inicio
El juego contará con una pantalla de confirmación la cual dirá al jugador si quiere entrar al juego. Básicamente en esta pantalla la crearemos también para que nos informe que todos los inputs (“Teclado, ratón, mando”) esten bien conectados, para que el jugador comience a jugar.
Que debe sentir el jugador: Esta pantalla comenzará en un fade to black, despues de eso irá apareciendo progresivamente el logo de juego de tronos y de fondo modelo estático del castillo de Kings Landing al estilo de la serie de juego de Tronos. La cámara comenzará a rotar alrededor de él. De fondo deberíamos tener el tema original de juego de tronos que comience de menos a mas conforme avanza mas tiempo en la pantalla de inicio.
Que podrá hacer el jugador:
En esta pantalla el jugador lo único que puede hacer es pulsar cualquier tecla, sea del mando o sea del teclado y raton, para poder avanzar al menú principal del juego. Cómo lo dije anteriormente en esta pantalla la usaremos para comprobar si todo está correcto, y ver si el jugador puede empezar ya. Que elementos de UI necesitamos: Los únicos elementos de UI que necesitamos en esta pantalla son los siguientes.
- UI_Image: Una imagen la cual contendrá el logo del juego.
- UI_Text: Un texto estático El cual aparezca “Pulsa cualquier tecla para continuar”. Debera aparecer y desaparecer cada cierto tiempo.
- Transición de la pantalla: Cuando el jugador pulse la tecla que quiera, la cámara rotará hasta otra zona por ejemplo las puertas del castillo o que vaya a la playa donde empieza el juego, o de la ciudad(“la rotación no debe ser muy brusca, debe ir a una velocidad que no moleste a la vista,y ni llegue a marear al jugador”), El logo del juego en medio de la rotación desaparece. Luego se mostrará otra vez el logo del juego y el menú. Con sus correspondientes elementos de UI.
- Es util este elemento : Este elemento puede ser muy útil por lo que dije en los anteriores apartados. Es una forma de saber que todo a cargado y funciona correctamente era una técnica que usaban los juegos anteriormente como forma de confirmación. Además vale también cómo una pequeña introducción al juego que sienta que está en Kings Landing y que la aventura esta por comenzar. Con una pantalla asi le damos ese toque de juego clásico al estilo Eye of the beholder.
Nota: no hace falta que esté al detalle de la serie, puede ser más a nuestro estilo de arte en el juego
Concept(WIP)
Menu de inicio
Haremos un menú de inicio sencillo,siguiendo el canon de juegos de este estilo. El jugador no estará mucho en el menú. Este menú servirá de puente para empezar el juego, poder continuar un juego que esta guardado, cambiar los ajustes y por ultimo salir del juego. Cada botón se explicará más adelante que deberá hacer.
Que debe sentir el jugador:
Despues de venir de la pantalla de inicio, habrá visto la rotación hasta dónde estará el menu del juego. Aparecerán los botones de empezar a jugar, continuar con el juego, ajustes y salir del juego. El jugador debe sentir que está en King’s Landing, por lo que la música no deberá parar en ningún momento debe continuar para no cortar el flow del jugador. si el castillo lo hacemos cómo una maqueta cómo en la intro de juego de tronos, para transmitir que esta pensando el plan de ataque. Arriba del todo del menú tendremos la misma imagen del Logo de Juego de tronos, arriba del menu.
Que podrá hacer el jugador:
El jugador tendrá este menú con los botones principales. El orden para los botones será en el orden en que estarán definidos. Seguiremos el mismo canon de UI que los juegos RPG para la colocación de los botones.
- Start the game: Primero tendremos este botón, Si el jugador no tienen ninguna partida guardada este aparecerá resaltado. Y si tiene ya una partida guardada no deberá aparecer resaltado. Cuando pulse el botón deberá comenzar a jugar.
- Continue the game: En segundo lugar tendremos el botón de continue. Si el jugador no tienen ninguna partida guardada deberá estar en gris y que no pueda interactuar con el. Una vez tengamos partidas guardadas, el botón estará resaltado, y cuando pulse el jugador deberá abrirse un menú con las partidas guardadas y que seleccione cual es su partida.
- Settings: El botón de settings siempre esta activo, si el jugador lo pulsa abrira un menu nuevo con todos los ajustes que el jugador pueda cambiar.
- Exit the game: Este botón está siempre activo, si el jugador lo pulsa no se cierra directamente el juego. Abrira un menu con un mensaje y que confirme salir del juego.
NOTA: Cada uno de los botones que lleven a otros menús tendrán su apartado propio, donde explicaremos al detalle lo que contienen.
Que elementos de UI necesitamos:
Los elementos de UI que necesitamos en esta pantalla son los siguientes. Cambiar Focus: Con el Tab el jugador deberá poder cambiar el focus entre los diferentes botones.
- UI_Image: La imagen con el Logo de juego de tronos.
- UI_Button: Para el menú necesitaremos botones los cuales deben tener estas opciones.
- Resaltado: En los momentos descritos en el apartado de arriba, tendrá un estado de resaltado, para que el jugador se le desvie la mirada hacia el.
- Hover: El jugador tiene el focus sobre el, o tiene el ratón sobre el.
- Clic: Cuando el jugador hace clic en el debe tener un sprite diferente para ver que hizo clic.
- Estado normal: No tiene ninguna interacción. es el sprite normal del botón.
- Desactivado: No se puede hacer clic sobre el. y tiene un color diferente.
- Transición de pantalla: Para los botones que abren otros menús como el “continue the game”, “settings”, y el “exit the game”, tendrán transiciones.
- Continue the game: Este botón al pulsar deberá hacer que la pantalla haga un fade hasta que se quede de color gris, y desaparezcan los botones de la pantalla y aparezcan todos los archivos de guardado. El jugador deberá seleccionar un y empezaria el juego.
- Settings: Abrirá una nueva pantalla delante del menu con los ajustes principales del juego y el jugador podrá editarlos. (“Esta pantalla la comentaremos más tarde”).
- Exit the game: Se abrirá una pantalla muy pequeña con un texto diciendo si confirma salir del juego, con dos botones uno que diga si sale del juego y otro diciendo que no y vuelva al menú.