#6 Programar la interfaz de usuario en Unity. [Laberinto en Primera Persona]

ACTUALIZACIÓN IMPORTANTE

PUBLICARÉ LOS ARCHIVOS DE ESTE PROYECTO CUANDO EL CANAL LLEGUE A 1000 SUSCRIPTORES

DEJO UNA COMPILACIÓN ACTUALIZADA PARA QUE PUEDAS PROBAR, PUEDE QUE TARDE UN POQUITO EN CARGAR
🔻

MOVIMIENTO: WASD CÁMARA: MOUSE

A PARTIR DE AQUÍ CONTINÚA EL ARTÍCULO ORIGINAL

Introducción

En este artícu­lo vamos a pro­gra­mar el fun­cionamien­to de la inter­faz de usuario crea­da en el video 5 de la serie del laber­in­to. Si no leiste el artícu­lo ante­ri­or, en resumen creamos una inter­faz de usuario en Uni­ty, que con­tará con la fun­cional­i­dad mín­i­ma para que el usuario pue­da inter­ac­tu­ar con el juego.

Página principal del proyecto

Vídeo de la SERIE 👉

Descripción del objetivo

En el artícu­lo ante­ri­or dis­eñamos una inter­faz de usuario sim­ple para que el usuario puede con­tro­lar los aspec­tos fun­da­men­tales de nue­stro juego, como pueden ser ini­ciar la par­ti­da, saber cuán­to tiem­po le que­da, etc.

De momen­to vamos a uti­lizar el Script Game­Con­trol para mane­jar la inter­faz de usuario. En capí­tu­los sigu­ientes del­e­gare­mos esta respon­s­abil­i­dad a un nue­vo Script.

Para resumir los ele­men­tos de la inter­faz de usuario ten­emos dos pan­tallas, una para el menú prin­ci­pal la cual con­tiene sólo un botón que sirve para ini­ciar el juego. La segun­da pan­talla es para la par­ti­da y tiene un ele­men­to tex­to que mostrará la can­ti­dad de tiem­po que que­da para ter­mi­nar la partida.

Resolución

En el Script Game­Con­trol defin­i­mos tres GameOb­jects seri­al­iza­dos, uno para la cámara que está acti­va en el menú prin­ci­pal, otro para la inter­faz del menú y otro para la inter­faz de la partida.

Los tres GameOb­jects definidos están resalta­dos en la figu­ra 1.

script c# para unity 3d con tres gameobjects seleccionados
Fig. 1: Se definen tres GameOb­jects seri­al­iza­dos para la cámara y las pan­tallas de la interfaz.

En la figu­ra 2 podemos obser­var que estos nuevos cam­pos apare­cen en el inspector.

inspector en unity 3d, en los espacios se colocarán gameobjects de la interfaz de usuario
Fig. 2: Los tres GameOb­jects apare­cen en el inspector.

Tomamos los obje­tos crea­d­os en el video ante­ri­or y los arras­tramos a los cam­pos en el inspec­tor. Estos obje­tos son la cámara, el GameOb­ject Main­Menu y el GameOb­ject Game.

jerarquía en unity 3d con game objects
Fig. 3: Tomamos los GameOb­jects de la jer­ar­quía y los lle­va­mos al inspector.

inspector en unity 3d, se han colocado todos los gameobjects de la interfaz de usuario
Fig. 4: En el inspec­tor colo­camos cada GameOb­ject en su espa­cio correspondiente.

Métodos startGame y endGame

Vamos a definir dos méto­dos, uno se va a lla­mar "startGame" y el otro "endGame". El méto­do startGame ten­drá la fun­ción de hac­er todo lo nece­sario para que la par­ti­da empiece, es decir pon­er el timer en cero, colo­car el pre­fab del per­son­aje, colo­car el pedestal en una posi­ción aleato­ria del esce­nario y demás. Teng­amos en cuen­ta que estas acciones prob­a­ble­mente estarán definidas en otros métodos.

En el méto­do endGame elim­i­namos todos los obje­tos del esce­nario, vamos al menú prin­ci­pal y demás.

La defini­ción de los méto­dos se mues­tra en la figu­ra 5. Para ampli­ar la infor­ma­ción hice un video sobre qué es un méto­do en pro­gra­mación y tam­bién escribí un artícu­lo para esta pági­na.

script c# para unity 3d metodos startGame y endGame para empezar y terminar juego respectivamente
Fig. 5: Se definen los méto­dos startGame y endGame.

En los méto­dos vamos a acti­var y desac­ti­var los ele­men­tos cor­re­spon­di­entes, como se obser­va en la figu­ra 6. Esto tiene que ver con la inter­faz de usuario.

script c# para unity 3d metodos startGame y endGame para empezar y terminar juego respectivamente
Fig. 6: Den­tro de cada méto­do colo­camos las instruc­ciones apropiadas.

Vamos a la jer­ar­quía y selec­cionamos el botón "Start", para obser­var sus propiedades en el inspector.

jerarquía en unity 3d con game objects, esta seleccionado el boton start de la interfaz de usuario
Fig. 7: Se selec­ciona el botón de start en la jerarquía.

inspector en unity 3d con un botón de la interfaz de usuario seleccionado
Fig. 8: En el inspec­tor hace­mos clic en el sig­no más para agre­gar una fun­ción a OnClick().

En la com­po­nente But­ton hay un cam­po lla­ma­do OnClick(), vamos a hac­er clic en el sig­no más de la esquina infe­ri­or derecha, en la figu­ra 8 el cur­sor está sobre este botón.

Esto nos per­mi­tirá eje­cu­tar méto­dos públi­cos den­tro de las com­po­nentes del GameOb­ject que asignemos.

En el cam­po que aparece vamos a colo­car el GameOb­ject Control.

inspector del metodo OnClick de button en unity 3d
Fig. 9: Aparece un espa­cio para colo­car un GameObject.

asignacion de un gameobject en el metodo onclick en el inspector de unity 3d
Fig. 10: Colo­camos el obje­to Con­trol que tiene asig­na­do el Script GameController.

Aho­ra uti­lizan­do el menú desple­gable, podemos acced­er a las com­po­nentes y sus métodos.

selección de función para el método onclick en unity 3d
Fig. 11: Con el menú desple­gable se puede selec­cionar un méto­do de algu­na de las com­po­nentes del obje­to Control.

Como se tra­ta del botón Start, esta­mos bus­can­do el méto­do StartGame que hemos definido en el Script Game­Con­trol, en la figu­ra 12 podemos obser­var los atrib­u­tos y méto­dos públi­cos del Script Game­Con­trol y vemos que StartGame no se encuen­tra entre ellos.

selección de función para el método onclick en unity 3d
Fig. 12: El méto­do startGame no aparece entre las funciones.

Esto se debe a que uti­lizamos vis­i­bil­i­dad pri­va­da en la definición.

Para solu­cionar el prob­le­ma, cam­bi­amos el méto­do a vis­i­bil­i­dad públi­ca, como se ve en la figu­ra 14.

script c# para unity 3d metodos startGame y endGame para empezar y terminar juego respectivamente. control de la interfaz de usuario
Fig. 13: Habíamos definido el méto­do startGame como privado.

script c# para unity 3d metodos startGame y endGame para empezar y terminar juego respectivamente. control de la interfaz de usuario
Fig. 14: Cam­bi­amos la vis­i­bil­i­dad a público.

Aho­ra podemos ele­gir que se eje­cute este méto­do cuan­do se haga clic en el botón Start.

selección de función para el método onclick en unity 3d
Fig. 15: Aho­ra el méto­do startGame aparece en las funciones.

Aco­mo­do un poco la cámara para que se vea la pequeña esce­na de las puer­tas y entro en el modo juego para pro­bar el fun­cionamien­to del botón.

escena en unity 3d vista superior, el suelo es de cesped
Fig. 16: Aco­modamos la cámara del menú principal.
prueba de la interfaz grafica en unity 3d
Fig. 17: Entramos en el modo juego para pro­bar el botón.

Corrección de bug

Al entrar en modo juego, el per­son­aje aparece en una de las puer­tas de man­era aleato­ria, pero por algu­na razón los con­troles no fun­cio­nan cor­rec­ta­mente, el per­son­aje se arras­tra por el sue­lo y la cámara gira en una direc­ción extraña.

bug en unity 3d, el personaje aparece caido en el suelo
Fig. 18: El juego ini­cia pero parece haber un prob­le­ma con el personaje.

bug en unity 3d, el personaje aparece caido en el suelo
Fig. 19: El per­son­aje aparece de costa­do y no puede moverse.

El pro­ce­so de Debug­ging puede lle­gar a ser algo tor­tu­oso, por suerte ten­emos her­ramien­tas para analizar el flu­jo del pro­gra­ma, des­cubrir las partes del códi­go que fun­cio­nan cor­rec­ta­mente, ver los val­ores de las vari­ables y así has­ta detec­tar el prob­le­ma y poder corregirlo.

Hice un artícu­lo sobre una de estas her­ramien­tas de debug­ging, el méto­do Debug.Log para imprim­ir datos en pan­talla, haz clic en este link para leer­lo es una her­ramien­ta muy útil!

Sin entrar en detalles, porque sin­ce­ra­mente no recuer­do cómo des­cubrí el bug, el prob­le­ma tenía que ver con la estruc­tura de par­entez­co entre los GameOb­jects y la trans­for­ma­ción herede­da del GameOb­ject padre.

Para cor­re­gir el prob­le­ma en la instruc­ción para instan­ciar al per­son­aje, den­tro del méto­do "pla­ce­Play­er­Ran­dom­ly", cam­bio la rotación de local a glob­al, como se obser­va en las fig­uras 20 y 21. 

script c# para unity 3d metodo placePlayerRandomly para colocar al jugador aleatoriamente en el escenario
Fig. 20: El méto­do pla­ce­Play­er­Ran­dom­ly es el que se encar­ga de colo­car al per­son­aje en el escenario.
script c# para unity 3d metodo placePlayerRandomly para colocar al jugador aleatoriamente en el escenario
Fig. 21: En la instruc­ción instan­ti­ate cam­bi­amos local­Ro­ta­tion por rotation.

Con esto se cor­rige el prob­le­ma y ya podemos uti­lizar el botón start para comen­zar el juego.

modo juego en unity 3d, suelo de cesped con margaritas y una puerta antigua de madera
Fig. 22: Aho­ra el per­son­aje aparece cor­rec­ta­mente en el escenario.

Algunos detalles antes de terminar

Cuan­do se entra en el modo juego, el pre­fab del con­tro­lador en primera per­sona cap­tura el cur­sor, lo colo­ca en el cen­tro de la pan­talla y lo oculta.

Esto es un prob­le­ma porque al regre­sar al menú prin­ci­pal cuan­do se ter­mi­na la par­ti­da no podemos hac­er clic en los botones. Así que la solu­ción es des­blo­quear el cur­sor y hac­er­lo vis­i­ble en el momen­to en que ter­mi­na la par­ti­da, es decir en el méto­do endGame().

Para des­cubrir cómo hac­er esto vamos a analizar el Script MouseLook que uti­liza el con­tro­lador en primera per­sona. En la figu­ra 23 podemos ver este Script jun­to con su ruta para lle­gar a él.

cuatro scripts de unity 3d en la ventana proyecto
Fig. 23: Abri­mos el Script MouseLook den­tro de First­Per­son­Char­ac­ter de Stan­dard Assets.

Error Fatal

Al inten­tar abrir MouseLook el edi­tor fal­la y debe cer­rarse perdién­dose todos los cam­bios no guarda­dos! Es impor­tante guardar en todo momen­to, el acce­so CTRL+S es muy útil.

fallo en editor de scripts mono behaviour durante un proyecto en unity 3d
Fig. 24: Al abrir el script se pro­duce un error y se pier­den todos los cam­bios no guardados.

En el segun­do inten­to fuimos capaces de acced­er el Script. Esta­mos bus­can­do una instruc­ción rela­ciona­da al Cursor. 

Vemos que en las líneas 93 y 94 de la figu­ra 26 hay un par de instruc­ciones que pare­cen ser las indi­cadas así que las copiamos. 

script mouse look de firstpersoncharacter standard assets
Fig. 25: Revisamos el script MouseLook en bus­ca de las instruc­ciones que des­blo­quean el mouse.

dos instrucciones en c# que desbloquean el cursor del mouse y lo desbloquean
Fig. 26: Las dos instruc­ciones selec­cionadas des­blo­quean el cur­sor y lo hacen visible.

Luego vamos al Script Game­Con­trol y peg­amos estas instruc­ciones al final del méto­do endGame que se eje­cu­tará cuan­do el tiem­po se agote.

script c sharp para unity 3d metodo placePlayerRandomly para colocar al jugador aleatoriamente en el escenario
Fig. 27: Peg­amos las instruc­ciones al final del méto­do endGame.

Finalizar la partida

Tam­bién vamos a dar­le al usuario la posi­bil­i­dad de ter­mi­nar la par­ti­da cuan­do lo desee uti­lizan­do la tecla Escape.

Esto lo hace­mos con el méto­do GetKey­Down de la clase Input.

En el primer video de la serie fun­da­men­tal de Uni­ty expli­co cómo leer entradas de tecla­do y mouse, además la difer­en­cia que existe entre los dis­tin­tos méto­dos, tam­bién hay un artícu­lo sobre el video en esta pági­na.

script c sharp unity 3d metodos update y startGame
Fig. 28: Eje­cu­ta­mos el méto­do endGame al pre­sion­ar la tecla escape.

Conclusión

En el artícu­lo anal­izamos cómo pro­gra­mar la inter­ac­ción entre los ele­men­tos de la inter­faz de usuario y el Script GameControl.

En el caso del botón ya está pro­gra­ma­da la fun­cional­i­dad para que eje­cute méto­dos de los Scripts, pero debe­mos ase­gu­rarnos de que estos méto­dos ten­gan vis­i­bil­i­dad pública.

guest
0 Comments
Inline Feedbacks
View all comments
YouTube
Scroll al inicio
Secured By miniOrange