viernes, 10 de abril de 2015

Barra de vida con el nuevo UI

Me estaba dando unos problemas de variables no asociadas el hud antiguo, y como el sistema de UI ha sido actualizado y es bastante mejor ahora, no iba a arreglar el hud viejo para Unity 5, así que ya me puse a aprender sobre el UI nuevo y actualizar el sistema. Por ahora he hecho la barra de vida con el UI nuevo.

UI hud

El UI viejo era una serie eventos donde podías dibujar cosas en código, no era complicado, pero si no te querías matar a hacer mucho código y apaños solía quedar feote. El nuevo UI son componentes de escena, que puedes toquetear en el editor. Funciona un poco como CSS, tenemos un canvas, que es un espacio sobre el que poner componentes de interfaz y tienen características de responsive web. Podemos decidir como se comporta un elemento al redimensionar la pantalla, si debe estar a una distancia fija de un borde, debe hacerse más estrecho proporcionalmente, mantener tamaño, en un eje, en varios... Además podemos decidir de qué forma se interpreta una imagen. Por ejemplo si tenemos una imagen de fondo para un botón podemos elegir cortes sobre la imagen de tal manera que se redimensione la parte central, dejando los bordes como en el original. Tiene también varios modos de renderizado, 2d en plan hud en pantalla, o con cierta perspectiva, o 3D en el mundo del escenario, para poner, por ejemplo, un bocadillo justo sobre la cabeza de un personaje.

Se pueden animar los controles, tienen varias sencillas por defecto como cambiar el color del elemento (por ejemplo botón) en los diferentes eventos (pasar el ratón por encima, pulsar...), o poner diferentes sprites. Pero podemos hacer cualquier animación personalizada usando el animador y mecanim, con un diagrama de estados igual que con un personaje, para hacer cualquier cosa que se nos ocurra, botones que se hacen gigantes, usar shaders, poner la pantalla boca-abajo, lo que sea.

También mejora mucho el sistema de eventos, podemos trabajar el comportamiento de los elementos sin salir ni del editor. Por ejemplo un slider que cambia el volumen de la música se podría hacer sin ninguna línea de código. Aunque siempre podemos hacer que los eventos sobre la UI vayan a funciones propias y hacer el código que queramos.

Otra cosa añadida son las máscaras. Lo que en los ejemplos es una gran idea y permite mejorar el aspecto de los elementos del UI. Pero no consigo que hagan lo que quiero, me faltan detalles en las explicaciones oficiales. En teoría las máscaras permiten dar la forma que queramos a los elementos, mostrando o no la imagen de la máscara. La imagen es del tutorial oficial de UI de Unity. Vemos como han puesto una máscara a un panel con una imagen de fondo y se recorta en la forma de la máscara, con esos picos. Mi idea era hacer una barra ancha de vida y con una máscara recortarlo para que parezca un matraz redondo, con cuello largo y redondo abajo, pero que esa parte redonda sea parte de la barra, no decoración. La cosa es que no funciona. Si lo hago sobre los sliders no coge la forma que debe si lo hago en un panel del que cuelguen los sliders, el panel se recorta pero los hijos no. Tampoco explican el tipo de imagen que debe ser la máscara. ¿Qué se recorta? ¿Lo transparente? ¿Lo negro? ¿Lo blanco? A lo mejor en algún momento lo sigo intentando, pero por ahora la barra va a quedar como una simple barra.

UI mask

Al final como he hecho que funcione la barra de vida es poniendo dos barras verticales, una amarilla con fondo transparente debajo y otra roja encima. De esta forma cuando nos hacen daño la roja baja rápido pero la amarilla baja más lento y así podemos darnos cuenta de cómo de gorda ha sido la hostia que nos hemos llegado. Las barras son sliders sin tirador, solo para mostrar la cantidad de vida. Están ajustadas como strech en vertical y left en horizontal. Es decir mantienen el tamaño y el margen a la izquierda en el redimensionado horizontal y se deforma ante el redimensionado vertical.

También tenía la idea de poner una gota verde (de veneno) cayendo sobre la barra cada vez que la vida nos baja por estar envenenados. Creo que puede ayudar a saber lo que pasa, porque sino lo mismo no nos damos cuenta que la vida va bajando, o no nos damos cuenta del porqué. Pero me está costando hacerlo y voy a ir a la regla de ir haciendo lo más importante primero y dejar lo de la gotita para cuando tenga otras cosas más importantes solucionadas.

No hay comentarios :

Publicar un comentario