Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Primeros pasos en Unity. UI parte 2. Canvas y textos - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 21 de octubre de 2025 por Alvaro H.

49 visualizaciones

Continuamos viendo cómo funciona la User Interface en Unity. Veremos ahora la creación de un lienzo o canvas y cómo añadir textos.

Más información Transcripción

Descargar la transcripción

Ahora que ya sabemos cómo controlar las escenas mediante código, pues vamos a adentrarnos por fin en el User Interface y veremos los elementos básicos de interacción. 00:00:06
Lo primero que tenemos que saber es que todos los elementos del User Interface se circunscriben en un canvas, que es un lienzo, literalmente. 00:00:18
Aunque cada vez que nosotros añadimos un nuevo elemento del User Interface, aquí en GameObject, User Interface, se va a crear por defecto un canvas. 00:00:25
Pero yo lo voy a crear desde cero. Aquí abajo tenemos crear un canvas. 00:00:33
Es un elemento que en principio parece invisible, pero que es donde se van a meter todos nuestros elementos del User Interface. 00:00:43
Y de hecho, me voy a detener un momentito en los componentes del canvas. 00:00:52
Para empezar, cómo se distribuye ese canvas dentro del espacio, la opción que viene por defecto es Screen Space Overlay. 00:00:56
Que básicamente es, ocupa todo lo que se vea en pantalla. 00:01:04
va a estar siempre encima de todo lo que vemos si queremos ya ajustar el cómo se 00:01:09
ve con respecto a una cámara tenemos la screen space cámara que entonces nos 00:01:14
pide que le demos a qué cámara queremos que se superponga de forma que le 00:01:19
tenemos que arrastrar una cámara y ahora si veremos que esta cámara que 00:01:24
está aquí ahí está mi cámara y si nos fijamos el canvas 00:01:29
circunscribe a la cámara de hecho si me voy a las opciones aquí tenemos una 00:01:35
opción que es a qué distancia se coloca el plano con respecto a la cámara y 00:01:42
veremos que si la desplegamos pues se pondrá más cerca o más lejos 00:01:48
esto nos viene muy bien cuando cuando queremos crear efectos de perspectiva 00:01:53
con nuestro user interface es decir el user interface o el canvas se pondrá en 00:01:58
en la línea de visión de la cámara, pero sus elementos se distribuirán en forma de perspectiva. 00:02:02
Y tenemos una última opción que es el World Space, 00:02:08
que realmente sirve para poner un User Interface como si fuese un GameObjectMatch. 00:02:11
Si lo distribuimos, si lo colocamos, si lo rotamos y si pasamos con un personaje al lado de él, 00:02:15
pues lo verá como si fuese un panel que hay allí más. 00:02:20
Y muy importante es el Canvas Scaler, que significa los elementos que ponemos dentro de nuestro Canvas 00:02:25
¿qué ocurre si nuestra pantalla cambia de tamaño? 00:02:32
Entonces le podemos decir que no se escalen. 00:02:35
Si yo pongo una imagen de 100% se quedará igual de tamaño 00:02:37
que significa que si hago pantalla grande la imagen se quedará pequeña. 00:02:41
A veces eso no nos interesa y nos interesa que se escale con la pantalla. 00:02:45
De forma que cuando yo paso de pantalla pequeña a pantalla grande 00:02:48
pues ese elemento se escale con ella. 00:02:52
Y tenemos una tercera opción que esto es un poco más delicado 00:03:06
que es en vez de utilizar el tamaño de los píxeles para determinar qué tamaño 00:03:08
tiene la los elementos pues que utilice conceptos como las resoluciones entonces 00:03:12
ya entramos en púxeles píxeles por pulgada puntos para los textos en fin 00:03:18
pero bueno es un poco más delicado hablar de ello bien pues empecemos a 00:03:22
añadir elementos a nuestro canvas el elemento más básico que hay por supuesto 00:03:26
es el texto vemos aquí que se ha añadido ese texto y nosotros una vez que estamos 00:03:30
ahí pues lo podemos desplazar pero recomiendo normalmente utilizar el método rectul que es 00:03:46
para escalar elementos en 2d si nos fijamos ese es el texto pero está circunscrito a una caja que 00:03:54
es la que el contenedor de ese texto que de hecho lo podemos modificar aquí es decir fijos porque 00:04:03
realmente lo que es el tamaño del texto viene determinado por el tamaño de su 00:04:11
fuente que lo tenemos aquí abajo y en donde tenemos todas las opciones del 00:04:15
fuente de la fuente que son pueden ser las tipografías podemos cargar 00:04:19
tipografías en nuestro proyecto si la queremos negrita en tamaño el espaciado 00:04:23
entre líneas si queremos que sea un texto enriquecido esto es muy 00:04:36
interesante porque eso nos permitirá luego mediante código añadir negrita o 00:04:39
o cursivas o incluso colores a través del texto enriquecido. 00:04:44
Cómo funciona el párrafo, qué hacer cuando el texto se sale del párrafo, 00:04:48
es decir, si ese texto se sale del párrafo, ¿qué hago con ello? 00:04:53
Pues lo puedo truncar o overflow, que entonces si le ponemos un overflow se sale de él, 00:04:57
o darle best fit y entonces el texto se ajustará siempre al tamaño de la caja. 00:05:02
Por supuesto el color o darle un material si queremos. 00:05:09
no hace falta que lo diga pero todos estos parámetros los podemos modificar por código 00:05:13
luego veremos alguno muy sencillito 00:05:17
y es un buen momento para recordar lo que vimos 00:05:19
voy a seleccionar un momentito el canvas 00:05:23
y recordamos lo que habíamos dicho aquí en el canvas scaler 00:05:24
que le hemos dicho que el tamaño de píxeles sea constante 00:05:28
es decir que si ese texto ocupa x píxeles 00:05:32
y yo de repente maximizo la pantalla de juego 00:05:35
vemos que de repente ese texto es muy pequeño 00:05:41
y si hago la pantalla muy pequeña 00:05:44
ese texto es enorme, es más, se sale 00:05:47
esto pensemos en un juego en el que vamos a dar la opción 00:05:50
al jugador de redimensionar la pantalla 00:05:54
en ese caso no nos interesa que de repente el texto 00:05:56
cambie de posición o de tamaño 00:05:59
en ese caso podemos decirle que 00:06:02
el Canvas Scaler se escale con la pantalla del juego 00:06:05
De forma que ahora mismo este texto está con este tamaño, pero si yo escalo la pantalla, veremos que se seguirá viendo al mismo tamaño relativo. 00:06:11
Y eso con todos los elementos, no solo con el texto, sino con imágenes o con cualquier otro elemento que hayamos metido en nuestro canvas. 00:06:24
Bien, y antes de seguir vamos a ver otro de los elementos básicos, que es cómo se ubica dentro de ese lienzo. 00:06:30
Tenemos aquí un iconito, un gizmo, que indica nuestro punto de anclaje. ¿Por qué? 00:06:37
Porque la posición que nosotros le hemos dado a ese elemento es siempre relativa a ese punto de anclaje. 00:06:43
Es decir, que si yo ese texto, que por cierto lo voy a poner en centrado, 00:06:49
si yo le digo que su posición va a ser en 0 en X y 0 en Y, en Z, ahora mismo no me interesa moverlo, 00:06:52
esa posición 0, 0, 0 es relativa a ese punto de anclaje. 00:06:59
Ahora, ¿y si yo quiero que este texto siempre esté en relación a la esquina superior izquierda? 00:07:04
Pues bien, para eso tenemos esta herramienta que si pinchamos en esta ventanita se nos abrirán los presets de anclaje donde le podemos decir cómo queremos que se oriente tanto en la vertical como en la horizontal. 00:07:11
Y entonces le puedo decir, pues mira, este texto quiero que esté siempre con relación a la esquina superior izquierda. 00:07:25
De forma que si yo ahora mismo le digo que la posición es 0, 0, 0, veremos que efectivamente se pone con relación a esa esquina. 00:07:32
Entonces, si yo le digo que siempre esté, pues a lo mejor, moviéndose a 100 de distancia de X y a menos 50 de Y, 00:07:47
pues entonces este texto siempre va a estar ahí. 00:07:55
En este caso sí lo voy a orientar a la izquierda, de forma que en este texto hará... 00:07:57
Hola mundo, ¿qué tal? 00:08:03
Le voy a quitar el best fit. 00:08:05
Lo podemos mover y lo podemos desplazar. 00:08:07
Pinchando en el centro del punto de anclaje podemos desplazarlo y ponerlo donde queramos. 00:08:10
y ahora que tengo el punto de anclaje en un sitio a medida 00:08:14
puedo incluso cambiar a modo de control de pivot 00:08:19
también punto de pivoteo del texto 00:08:26
llevarlo a mi posición superior izquierda 00:08:28
y eso significa que ahora mismo mi texto 00:08:32
si está en la posición 0 en X y 0 en Y 00:08:35
pues efectivamente siempre va a estar arriba a la izquierda 00:08:38
Idioma/s:
es
Materias:
Programación, Imagen y Sonido
Etiquetas:
Animación
Niveles educativos:
▼ Mostrar / ocultar niveles
  • Formación Profesional
    • Ciclo formativo de grado superior
      • Primer Curso
      • Segundo Curso
Autor/es:
Alvaro Holguera Gozalo
Subido por:
Alvaro H.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
49
Fecha:
21 de octubre de 2025 - 9:13
Visibilidad:
Público
Centro:
CFP JOSÉ LUIS GARCI
Duración:
08′ 42″
Relación de aspecto:
1.78:1
Resolución:
1280x720 píxeles
Tamaño:
139.03 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid