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.
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í:
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:
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í:
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:
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:
Publicado el 05 de Febrero de 2025
unityvideojuegos2d