jairogarcíarincón

Introducción



En este ejemplo aprenderemos a crear un Canvas y anclar cajas de texto (aunque servirá para cualquier otro elemento de la UI) a diferentes áreas de la escena.

El Canvas



El objeto Canvas de Unity nos permite mostrar una capa de información (e interacción, puesto que puede incluir botones y otros elementos interactivos) entre la cámara y la escena de juego, de forma que dicha información siempre es visible en la escena, independientemente de la posición en la que nos encontremos.

Dicho elemento es parte de la interfaz de usuario de Unity (User Interface o UI), y se crea automáticamente en cuanto añadamos un objeto de la UI a la escena.

La escena



Para resolver el ejercicio, vamos a crear una nueva escena llamada Canvas, y asegurarnos de que, en la vista de Game, tenemos seleccionada la resolución Full HD (1920x1080). Si no existiera, debemos crearla y seleccionarla.

14 Unity 2D - Canvas
Fuente: Elaboración propia


Las cajas de texto



Vamos a empezar por crear una primera caja de texto, que automáticamente creará nuestro objeto Canvas. Para ello, haz clic derecho en la Hierarchy window y selecciona UI > Legacy > Text.

Verás que, además de un objeto Text, se ha creado un objeto Canvas como padre, y un objeto EventSystem, que no debes eliminar, ya que más adelante nos servirá para establecer interacciones mediante botones, deslizadores y demás.

Renombra la caja como ArribaIzquierda y, en su Inspector window, escribe el texto Arriba Izquierda y selecciona el color blanco. Selecciona también Overflow para las propiedades Horizontal y Vertical Overflow de la caja de texto. La escena debería ser ahora algo así:

15 Unity 2D - Canvas
Fuente: Elaboración propia


Por último, para situar el objeto en su posición, debemos anclarlo arriba a la izquierda. Para ello, haz clic en el icono de los Anchors y, con las teclas Alt + Mayus presionadas, selecciona el icono de arriba a la izquierda:

16 Unity 2D - Canvas
Fuente: Elaboración propia


Para realizar el resto del ejercicio, bastaría con ir duplicando la caja de texto que hemos creado, renombrándola, cambiando el texto y anclándola al lugar correspondiente.

Asegúrate además de que las alineaciones horizontal y vertical de cada caja son las correctas para que queden perfectamente ancladas en la posición deseada. El resultado final debería verse así:

17 Unity 2D - Canvas
Fuente: Elaboración propia


Imagen de fondo



Para poder añadir una imagen de fondo a la escena, tan solo necesitamos arrastrar una imagen de tipo png o jpg a nuestra carpeta de Assets > Sprites. Esto creará automáticamente un Sprite con nuestra imagen como Texture, que podremos arrastrar a la escena sin problema:

18 Unity 2D - Canvas
Fuente: Elaboración propia


Pastilla en el Canvas



También es posible añadir "pastillas" o imágenes dentro del Canvas. Para ello, añade una UI > Raw Image y, o bien modifica su color y transparencia, o bien añade una textura en png o jpg para comprobar el resultado. En mi caso he ajustado la pastilla detrás del texto central para que se visualice mejor:

19 Unity 2D - Canvas
Fuente: Elaboración propia


Publicado el 09 de Diciembre de 2022

unityvideojuegos2d