Comenzando con la unidad - Terminando nuestro juego con un menú

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Hay varios métodos utilizados para producir menús dentro de Unity, los dos principales son el sistema integrado de GUI y el uso de GameObjects con Colliders que responden a las interacciones con el mouse. El sistema GUI de Unity puede ser complicado de usar, por lo que vamos a utilizar el enfoque de GameObject, que creo que también es un poco más divertido para lo que estamos tratando de lograr aquí.

Vista previa del resultado final

Paso 1: determina la resolución de tu juego

Antes de diseñar un menú, siempre debe determinar qué resolución le va a servir.

Abra la configuración del Reproductor a través del menú superior, Editar> Configuración del proyecto> Reproductor e ingrese los valores predeterminados de ancho y alto de la pantalla en el inspector. Elegí dejar el mío como 600x450px por defecto como se muestra a continuación.

Luego, debe ajustar el tamaño de su vista de juego del "Aspecto libre" predeterminado a "Web (600 x 450)", de lo contrario, podría ubicar los elementos del menú fuera de la pantalla.

Paso 2: elegir un fondo de menú

Como habrás visto en la vista previa, nuestra escena de menú tendrá nuestro entorno de juego en el fondo para que cuando hagas clic en Play entres sin problemas en el juego.

Para hacer esto, necesitas colocar tu reproductor en algún lugar de la escena donde te gusta el fondo y redondear el valor de rotación Y. Esto es así para que sea más fácil de recordar y de replicar más adelante, de modo que la transición pueda ser transparente desde el menú al juego.

¡Ahora sigamos con la creación de la escena del menú!

Paso 3: Creando la escena del menú

Asegúrate de que tu escena esté guardada y se llame "juego"; verás por qué más tarde.

Seleccione la escena del juego dentro de la vista del Proyecto y duplíquela usando Ctrl / Command + D, luego cambie el nombre de la copia a "menú" y haga doble clic para abrirla.

Nota: Puede confirmar qué escena está abierta al marcar la parte superior de la pantalla, debería decir algo como "Unity - menu.unity - ProjectName - Web Player / Stand Alone". ¡No querrás comenzar a eliminar partes accidentalmente de tu escena de juego!

Ahora seleccione y elimine la GUI y los GameObjects PickupSpawnPoints de la Jerarquía. Expanda el "Player" y arrastre la "Cámara principal" para que ya no sea un elemento secundario del Player, luego elimine el Player.

A continuación, seleccione el terreno y elimine el componente Terrain Collider haciendo clic con el botón derecho y seleccionando Eliminar componente.

Finalmente, seleccione la "Cámara principal" y elimine el componente MouseLook haciendo clic derecho y seleccionando Eliminar componente.

Si ejecuta el juego ahora, no debería pasar nada y no debería poder moverse en absoluto. Si puede mover o rotar, vuelva a realizar los pasos anteriores.

Paso 4: ajustar la configuración de compilación

Actualmente, cuando construyes o juegas tu juego, el único nivel incluido dentro de esa construcción es la escena del "juego". Esto significa que la escena del menú nunca aparecerá. Para que podamos probar nuestro menú, ajustaremos la configuración de compilación ahora.

En el menú superior, seleccione Archivo> Configuraciones de compilación y arrastre la escena de menú desde su Vista de proyecto a la lista "Configuraciones en compilación" de Configuraciones de compilación como se muestra a continuación.

(Asegúrate de reorganizar las escenas para poner "menu.unity" en la parte superior, de modo que sea la escena la que se cargue primero cuando se juegue el juego).

¡Perfecto!

Paso 5: Agregar el botón Reproducir

Vamos a usar texto 3D para nuestro menú, así que ve y crea un GameObject de texto 3D a través del menú superior: GameObject> Crear otro> Texto 3D, luego cámbiale el nombre a "PlayBT". Establezca la rotación Y del texto PlayBT para que coincida con el valor de rotación Y de su cámara principal, de modo que esté directamente orientada hacia ella y, por lo tanto, pueda leerse fácilmente.

Con PlayBT seleccionado, cambie la propiedad del texto de la malla de texto de Hello World a "Reproducir", reduzca el Tamaño del carácter a 0.1 y aumente el Tamaño de la fuente a 160 para que el texto sea más nítido.

Nota: Si desea utilizar una fuente diferente a la predeterminada, seleccione la fuente antes de crear el texto 3D o arrastre la fuente a la propiedad Fuente del texto del texto 3D y luego arrastre el "Material de fuente" de fuentes a la lista Materiales de restitución de malla, sobrescribiendo la fuente Material existente. ¡Una molestia, lo sé!

Finalmente, agregue un Box Collider a través del menú superior: Componente> Física> Box Collider. Cambia el tamaño del Box Collider para que se ajuste al texto si no se ajusta bien.

En este punto del tutorial, realmente necesitas tener abiertas la escena y las vistas del juego al mismo tiempo, ya que ahora vas a mover el PlayBT dentro de la vista de escena para que esté centrado dentro de tu Game View, como se muestra a continuación. Recomiendo primero posicionarlo horizontalmente usando una vista de arriba hacia abajo y luego volver a usar una vista en perspectiva para colocarlo verticalmente usando los mangos de los ejes.

Así que ese es nuestro botón Reproducir todo configurado. ¡Ahora hagámoslo jugar!

Paso 6: la secuencia de comandos del controlador de mouse

Cree un nuevo script de JavaScript dentro de su carpeta de scripts, renómbrelo como "MenuMouseHandler" y agréguelo como un Componente de PlayBT GameObject arrastrando directamente en PlayBT o seleccionando PlayBT y arrastrando el script en su Inspector.

Reemplace el código predeterminado con lo siguiente:

/**
  Mouse Down Event Handler
*/
function OnMouseDown()
{
	// if we clicked the play button
	if (this.name == "PlayBT")
	{
		// load the game
		Application.LoadLevel("game");
	}
}

Estamos utilizando la función MonoBehaviour OnMouseDown(...), invocada cada vez que haga clic con el mouse en la casilla BoxCollider. Comprobamos si el botón pulsado se llama "PlayBT", y si es así usamos Application.LoadLevel(...) para cargar la escena del "juego".

¡Basta de hablar! ¡Ve a ejecutarlo y mira cómo tu juego cobra vida cuando haces clic en Reproducir!

Nota: si hace clic en Reproducir y se encuentra con un error de configuración de compilación, no se preocupe; solo necesita verificar su configuración de compilación - revise el Paso 4.

Paso 7: finalizando el juego

Entonces, el menú para comenzar el juego es genial, pero el juego técnicamente nunca termina, ya que cuando se acaba el tiempo no ocurre nada ... arreglemos eso ahora.

Abra el script CountdownTimer y en la parte inferior de la función Tick() agregue la siguiente línea:

Application.LoadLevel("menu");

¡Ahora vuelve a ejecutar tu juego y cuando se acabe el tiempo volverás al menú! ¡Pan comido!

Ahí vamos - un menú básico agregado a nuestro juego. Ahora vamos a hacer que sea un poco más fácil de usar con una pantalla de ayuda para explicar cómo jugar.

Paso 8: Agregar el botón Ayuda

El botón de ayuda es idéntico al PlayBT en prácticamente todos los sentidos, así que adelante y duplica el PlayBT, renómbralo a HelpBT y colócalo debajo del botón Reproducir. Ajuste la propiedad del texto para decir "Ayuda" en lugar de "Reproducir" y, tal vez, haga que el Tamaño de la fuente sea un poco más pequeño, como se muestra a continuación: utilicé 100.

Ahora abra el script de MenuMouseHandler y agregue lo siguiente else if a su instrucción if existente.

// if we clicked the help button
else if (this.name == "HelpBT")
{
    // rotate the camera to view the help &quot;page&quot;
    
}

Si marca la vista previa, verá que al hacer clic en Ayuda, la cámara gira para mostrar el menú de ayuda. ¿Entonces cómo hacemos eso?

Paso 9: God Save iTween

Nuestra rotación de la cámara se puede hacer agradable y limpiamente en una línea, gracias a iTween. Sin iTween, la vida no sería tan divertida. Como el nombre puede revelar, es un motor intercalado, construido para Unity. También es gratis.

Continúe y abra iTween en la tienda de Unity Asset, luego haga clic en Descargar / Importar e impórtelo todo a su proyecto. Una vez importado, debe mover el directorio iTween/Plugins a la raíz de su carpeta de recursos.

¡Ahora estás listo para interponer tu vida!

Paso 10: girar la cámara

Tome un trozo de papel y un bolígrafo (o abra un documento en blanco) y anote el valor de rotación Y de su cámara principal, como se muestra a continuación.

Dentro de la vista de escena, gire la cámara en cualquier dirección que desee alrededor del eje Y para que el texto Reproducir y Ayuda quede fuera de la vista y tenga un fondo decente para su página de ayuda. Puedes ver el mío a continuación: giré de -152 a -8.

Regrese a su secuencia de comandos MenuMouseHandler y agregue la siguiente línea dentro de la declaración else if:

iTween.RotateTo(Camera.main.gameObject, Vector3(0, -8, 0), 1.0);

Usamos Camera.main para recuperar la cámara principal (definida por la etiqueta "MainCamera") de la escena y usamos iTween.RotateTo(...) para rotar la cámara a un ángulo específico, en mi caso -8.

(Debe reemplazar el -8 dentro de la línea anterior con la rotación actual de su cámara).

Ahora regrese a su escena y devuelva su cámara a su rotación original que anotó al comienzo de esta sección, de modo que quede frente a PlayBT. Ejecute su juego, haga clic en Ayuda y la cámara debería girar.

Nota: Si obtiene un error acerca de que iTween no existe, entonces no lo ha importado correctamente: revise el Paso 9.

Ahora construyamos nuestra página de Ayuda.

Paso 11: creación de la página de ayuda

Gire su cámara de nuevo a la rotación Y de su página de ayuda, en mi caso -8.

Ahora vamos a agregar un pequeño texto de explicación y un poco más de texto para explicar las diferentes recolecciones y sus puntajes. Finalmente, agregaremos un botón Atrás para regresar al menú principal. Puede organizar su página de la forma que desee, así que siéntase libre de ser creativo. Aquí vamos...

Duplique la HelpBT, renómbrela HelpHeader, establezca su rotación en la de su cámara, cambie el valor Anchor a "upper center" y reduzca el Tamaño de la Fuente - Yo usé 60.

A continuación, copie y pegue el párrafo siguiente en la propiedad text:

"Recoge tantos cubos como puedas dentro del límite de tiempo.
Pero cuidado, ¡cambian con el tiempo!

Nota: Vale la pena señalar que no puede escribir texto de líneas múltiples en la propiedad del texto; tiene que escribirlo en otro programa y luego copiarlo y pegarlo ya que al presionar enter / return se asigna el campo.

Finalmente, elimine los componentes Box Collider y MenuMouseHandler dentro del Inspector, ya que no será necesario hacer clic en este texto. Espero que termines con algo como esto:

Ahora arrastre un prefabricado de recogida a la escena y colóquelo en la pantalla. Puse el mío como se muestra a continuación.

Luego, duplica el HelpHeader, cámbiale el nombre a HelpPowerups, cambia el Anchor a "upper-left" y copia y pega el párrafo debajo en el campo de texto.

"Verde: + 2 puntos

Rosa: +/- Puntos Aleatorios

Azul: Aumento de velocidad aleatorio"

Vuelve a colocarlo para que tengas algo como lo siguiente.

Todo lo que queda ahora es agregar un botón Atrás para regresar al menú principal.

Paso 12: El botón Atrás de la página de ayuda

Duplique el HelpBT, renómbrelo BackBT, cambie su texto a "Atrás", configure su rotación a la de su cámara y use la Vista de Escena para reposicionarlo dentro de la Vista del juego. Coloqué el mío en la esquina inferior como se muestra aquí:

Ahora solo tenemos que actualizar nuestra secuencia de comandos MenuMouseHandler para manejar también los clics del mouse desde BackBT. Agregue lo siguiente else if a la parte inferior de las sentencias OnMouseDown() if:

	// if we clicked the Back button
	else if (this.name == "BackBT")
	{
		// rotate the camera to view the menu "page"
		iTween.RotateTo(Camera.main.gameObject, Vector3(0, -152, 0), 1.0);
	}

Esto es casi idéntico al enunciado anterior de iTween, la única diferencia es el ángulo en que gira la cámara: -152 en mi caso. Debes cambiar este número a la rotación Y original de tu cámara (la que anotaste, ¿recuerdas?)

Ahora todo lo que necesita hacer es configurar su cámara de nuevo a su rotación original, el valor que acaba de agregar a la declaración iTween, de modo que esté de nuevo frente al menú principal.Ejecute el juego y su cámara debería girar para revelar la página de ayuda y volver al menú principal.

Felicidades, ¡has terminado!

Conclusión

¡Espero que hayas disfrutado esta sesión de introducción a Unity!

En esta parte, cubrimos el uso de GameObjects como elementos de menú y la biblioteca de interpolación increíblemente poderosa, iTween.

Si desea un desafío adicional, intente usar iTween para cambiar el color del texto en MouseOver y luego de nuevo en MouseExit. (Encontrará una lista de controladores de Mouse en esta página).

O agregue un iTween CameraFade y luego desactívelo cuando el temporizador se agote, luego cargue el menú, en lugar de terminar el juego bruscamente. A continuación, podría retrasar la llamada a Application.LoadLevel(...) utilizando yield WaitForSeconds(...).

¡Déjame saber cómo te va en los comentarios!