Saltar navegación

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

Primeros pasos en Unity. UI parte 3b: gestionar imágenes - 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 27 de octubre de 2025 por Alvaro H.

43 visualizaciones

Aprendamos a cambiar los sprites de una imagen mediante código y usando Arrays

Más información Transcripción

Descargar la transcripción

Bien, ya tengo el sprite ubicado en la zona de mi pantalla donde yo quiero, utilizando el RedTransform, los puntos de anclaje y bueno. 00:00:07
Lo que ocurre es que yo quiero cambiar esa imagen en función de cómo se está desarrollando mi juego, es decir, que pase de tres vidas a dos a uno y finalmente me muera. 00:00:16
Eso, lógicamente, lo vamos a hacer por código. 00:00:27
Y para ello voy a crear un script, en este caso lo he llamado Canvas Manager, y lo voy a asociar al canvas, que realmente podría asociarlo incluso a un empty object, no hay ninguna limitación, pero bueno, como a lo mejor a través de este script voy a gestionar no solo la imagen, sino los botones y demás, pues me gusta tenerlo vinculado al canvas. 00:00:29
lo abro bien antes que nada siempre recordad que cuando vamos a hacer algo referente a la 00:00:48
user interface pues necesitamos la librería unity engine y ahora que la tengo pues tengo 00:00:56
acceso a elementos del user interface y veremos que cambiar el sprite vinculado a una imagen es 00:01:01
realmente sencillo para eso solo tengo que crear una variable de tipo serializada para poder 00:01:06
acceder a ella desde Unity, de tipo imagen, image, que va a contener la imagen que está 00:01:11
en nuestro canvas. Le voy a llamar lives image y otra variable de tipo sprite que va a tener 00:01:18
vinculado los sprites que yo voy a asociar a esa imagen. Le voy a llamar, por ejemplo, 00:01:33
lives sprite. Y ahora si me vuelvo a Unity, efectivamente me está pidiendo una variable 00:01:38
de tipo imagen y una variable de tipo sprite, pues muy bien, se la damos 00:01:46
la imagen la tengo aquí en el canvas, se llama image porque no le he cambiado el nombre 00:01:50
recomiendo ponerles nombres que sean identificativos, pero bueno 00:01:54
así que la variable de tipo imagen tiene 00:01:58
mi imagen del canvas y la variable de tipo sprite 00:02:02
va a tener el sprite que yo voy a poner en esa imagen, para comprobarlo voy a poner 00:02:06
ahora mismo, por ejemplo, esta, que es la de 00:02:10
en la que sólo queda una vida. Así que cojo ese sprite y lo paso a esa variable. 00:02:14
Y en el código podemos decirle que la variable que contiene la imagen, en este 00:02:23
caso livesImage, uno de sus atributos es el sprite. Y le podemos decir que el 00:02:27
sprite que contiene esa imagen es igual a la variable que yo he creado para tal 00:02:35
efecto, que se llama livesSprite. Esto que 00:02:40
significa que en cuanto le dé al play al juego cambiará el sprite de mi imagen 00:02:45
ahí está lógicamente esto no tiene ninguna utilidad lo útil es que esa 00:02:50
imagen vaya cambiando en función de las vidas que tengo vamos a probarlo voy a 00:02:56
crear una variable también serializada de tipo número entero porque son las 00:03:00
vidas que tengo y le voy a llamar lives por ejemplo y ahora 00:03:07
Esto que voy a hacer no lo recomiendo, solo lo voy a hacer ahora como ejemplo, pero luego veremos que hay una forma mucho mejor de hacerlo, que es, lo voy a meter en el método update, con lo cual va a estar en cada fotograma actualizando la imagen. 00:03:12
Pero, en vez de ponerle con una, voy a tener tres sprites. Uno por cada sprite que he creado a partir de esa hoja de sprites. 00:03:27
Y ahora tengo que hacer un pequeño paréntesis porque yo ahora mismo podría crear tres variables de sprites, uno vinculado con el de tres vidas, el de dos y el de una, y hacerle un if en mi update y decirle si tengo tres vidas pon el sprite tres, si tengo dos vidas ponme el sprite dos. 00:03:36
Pero a estas alturas ya tenemos que saber que existe una variable maravillosa que nos permite hacer eso, que es un array. 00:03:53
Un array, recordemos, es una lista, una lista de variables, lo que nos permite en una sola variable contener múltiples variables, del tipo que sea, por ejemplo, del tipo sprite. 00:04:00
Yo ahora mismo había creado una variable de tipo sprite. 00:04:11
Pues ahora le voy a decir que esa variable de tipo sprite es un array. 00:04:15
os recuerdo que para decirle que esto es un array sólo tenemos que ponerle unos corchetes lo único 00:04:19
que ahora cuando le decimos que a la imagen le ponga un sprite cual este esto ya no es una 00:04:25
variable normal en la que entre corchetes también le tenemos que decir qué elemento del array es 00:04:31
decir qué clave si ese elemento 0 el 1 el 2 de acuerdo entonces le voy a decir que sea el 00:04:37
elemento 0 por ejemplo es decir el primer elemento del array y si nos fijamos ahora efectivamente el 00:04:42
El lives sprite ya no es una variable, sino que es un array y de hecho me pide cuántos elementos tiene. 00:04:49
Pues le voy a dar tres. 00:04:53
Y si lo despliego, efectivamente me permite poner tres sprites. 00:04:54
Que este es uno, que este es otro, que este es otro. 00:04:58
Con lo cual, ahora mismo, el elemento cero se corresponde con el sprite que aquí se llama lives cero, que concretamente es ese. 00:05:04
Pero, ¿qué pasa si yo le digo, por ejemplo, que ponga el elemento uno del array? 00:05:11
Pues pondrá el elemento uno, que concretamente es este. 00:05:15
Es decir, ese. 00:05:19
Vamos a ver si funciona. 00:05:21
Ahí está. 00:05:23
Parémonos a pensar que ahora mismo va a poner el elemento del array que yo le diga. 00:05:26
Y es un buen momento para ser un poco, vamos a decir, pícaros. 00:05:31
Y sabemos que vamos a tener tres vidas, dos vidas, una vida. 00:05:35
Pues yo puedo, digamos, hackear un poco el array para que el elemento 3 se corresponda con las tres vidas, 00:05:39
el elemento 2 con las dos vidas y el elemento 1 con una vida. 00:05:45
Y eso me permitirá que en función de las vidas que yo tengo, que ponga el elemento correcto, que ponga el sprite adecuado. ¿Cómo lo conseguimos? Bueno, haciendo una pequeña trampa, aunque no me gusta llamarlo así, pero si yo en mi array de vidas le digo que en vez de tres elementos tenga cuatro y el elemento tres se corresponde con la imagen que tiene tres corazones, el elemento dos se corresponde con la imagen que tiene dos corazones y el elemento uno se corresponde con la imagen que tiene un corazón, 00:05:48
el elemento 0 le digo que vacío 00:06:19
incluso le puedo decir 00:06:22
uno de los placeholder que utiliza 00:06:23
Unity 00:06:26
da igual porque no lo voy a usar 00:06:28
porque en cuanto tenga 0 vidas no cambiaré la imagen 00:06:30
sino que directamente me saldré de la pantalla 00:06:32
¿y esto que nos permite ahora mismo? 00:06:34
pues nos permite que si yo me voy 00:06:37
al script donde cambiaba 00:06:38
la imagen por el elemento del array 00:06:40
pues ese elemento 00:06:43
del array ahora se corresponde directamente 00:06:44
con mi variable vidas 00:06:46
Es decir, que le puedo poner aquí directamente la variable lives. 00:06:48
Y así cuando tenga tres, habrá tres corazones. Cuando tenga dos, habrá dos. Y cuando uno, uno. 00:06:53
Vamos a comprobarlo. Me sale el placeholder. ¿Por qué? Pues porque de momento no tengo ninguna vida. 00:06:59
Me voy a ir al script donde yo le digo las vidas que tengo y le voy a decir aquí que tengo tres. 00:07:04
Y ahí aparece. Pues le voy a decir ahora que tengo dos. 00:07:11
Y paso a dos vidas. Le voy a decir que tengo una. 00:07:15
ahora, esto se produce porque lo he metido en el método update 00:07:17
lógicamente eso no es lo correcto 00:07:21
lo correcto es que a vez que me muera 00:07:24
llame a una función que actualice el sprite 00:07:26
y que haga las cosas necesarias 00:07:30
Idioma/s:
es
Materias:
Informática, Imagen y Sonido
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:
43
Fecha:
27 de octubre de 2025 - 10:28
Visibilidad:
Público
Centro:
CFP JOSÉ LUIS GARCI
Duración:
07′ 33″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
203.80 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid