TEMA 7 INTERFAZ GRÁFICA (continuación)

Sin valoraciones

TEMA 7 INTERFAZ GRÁFICA (continuación)

Ahora editaremos el componente Camera y en la opción Culling Mask le va­mos a decir que queremos que pinte cuando se cargue esta escena. Primero le decimos que nada y posteriormente seleccionamos las opciones Default que es donde hemos pintado los sprites y la opción UI que es donde tendremos nuestra interfaz gráfica

TEMA 7 INTERFAZ GRÁFICA (continuación)

Vamos a descargar un par de Assets extra que utilizaremos en nuestro proyecto. Abrimos la página de Kenney y nos descargamos el contenido de esta dirección; https://www.kenney.nl/assets/kenney-fonts

TEMA 7 INTERFAZ GRÁFICA (continuación)

Y en la misma pagina nos descargaremos este pack
https://www.kenney.nl/assets/ui-pack-rpg-expansion

TEMA 7 INTERFAZ GRÁFICA (continuación)

Nos venimos a nuestro proyecto y dentro de la carpeta Assets creamos una nueva carpeta a la cúal llamaremos Fonts

TEMA 7 INTERFAZ GRÁFICA (continuación)

Y dentro metemos lo que nos hemos descargado como fuentes tipográficas. Abrimos nuestra carpeta de descarga y arrastramos el contenido

TEMA 7 INTERFAZ GRÁFICA (continuación)

Dentro podemos ver todas las tipografías que nos hemos descargado

TEMA 7 INTERFAZ GRÁFICA (continuación)

Ahora nos vamos a la carpeta de Art>Sprites>UI

TEMA 7 INTERFAZ GRÁFICA (continuación)

Y aquí arrastraremos el contenido del assets que hemos descargado UI RPG pack

TEMA 7 INTERFAZ GRÁFICA (continuación)

Al importarlo deberemos decirle que todos sus sprites su tamaño pixel por unidad esté en 100. Así que nos venimos dentro de la carpeta y abrimos la carpeta PNG, seleccionamos todo y desde el Inspector nos vamos a la opción Pixel per Unit y escribimos 100 y para guardar el cambio pul­samos en el botón de Apply

TEMA 7 INTERFAZ GRÁFICA (continuación)

TEMA 7 INTERFAZ GRÁFICA (continuación)

Ahora nos volvemos a la carpeta unpack-rpg y seleccionamos todo lo que está en ella, menos la carpeta PNG, y borramos su contenido

TEMA 7 INTERFAZ GRÁFICA (continuación)

El siguiente paso va a ser crear nuestra interfaz con el botón UI. Para ello nos vamos a la ventana de Jerarquía y en el espacio vacío pulsamos el botón derecho>UI>TextMeshPro

TEMA 7 INTERFAZ GRÁFICA (continuación)

Al hacerlo nos aparecerá una ventana avisandonos que tenemos que instalar un paquete llamado TMP Essentials. Pulsamos en el botón que pone Import para poder operar con este tipo de texto

TEMA 7 INTERFAZ GRÁFICA (continuación)

Ahora para que Text Mesh Pro pueda utilizar las fuentes que hemos descar­gado deberemos decirle desde la carpeta donde las tenemos que queremos que lo use este paquete. Y para ello abrimos la carpeta Fonts:

TEMA 7 INTERFAZ GRÁFICA (continuación)

Y seleccionando cada elemento tipográfico que nos aparece pulsamos el bo­tón derecho y de las opciones que nos aparece en el desplegable le damos a la opción de Create>TextMeshPro>FontAssets

TEMA 7 INTERFAZ GRÁFICA (continuación)

Y repetimos el proceso con el resto de fuentes que se encuentra en esta carpeta

TEMA 7 INTERFAZ GRÁFICA (continuación)

Una vez que tengamos hecho estos pasos podremos utilizar la tipografía dentro de nuestro canvas.

Ahora vamos a ver un menú que tenemos creado dentro de la carpeta prefabs de nuestro proyecto que tendrás listo dentro de la carpeta de material en el zip llama­do proyecto final(4)

TEMA 7 INTERFAZ GRÁFICA (continuación)

El prefab MainMenu lo arrastraremos a nuestra escena para ver como esta hecho y lo introducimos dentro del Canvas que hemos creado anteriormente.

TEMA 7 INTERFAZ GRÁFICA (continuación)

Ahora dentro del inspector de este prefab vamos a reconfigurar su aspecto. Deberemos pulsar Alt+shift para que crezca el panel que tenemos pulsado tal y como se ve en la imagen

TEMA 7 INTERFAZ GRÁFICA (continuación)

Este menú se compone en dos objetos el título de nuestro videojuego y unos botones

TEMA 7 INTERFAZ GRÁFICA (continuación)

TEMA 7 INTERFAZ GRÁFICA (continuación)

Y luego arrastraremos el SettingMenu dentro de nuestra escena en el objeto Canvas

TEMA 7 INTERFAZ GRÁFICA (continuación)

Compártelo en tus redes

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Valore este curso

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestra web. Si sigues utilizando este sitio asumimos que estás de acuerdo. VER