UNITY Texturas

Introdución

• Una textura representa una imagen que se 'pega' a la superficie de un objeto 3D o 2D.

• Un objeto dentro del juego en un mundo 2D se representará como un cuadrado/rectángulo.

Sobre ese cuadrado se dibujará una imagen (textura) que será lo que represente a nuestro personaje dentro del juego.

• En el caso de las figuras 3D, estas están formadas por muchos triángulos unidos formando una figura en el espacio 3D, como ya comentamos anteriormente en esta WIKI.

Las texturas van a ser las imágenes que se van a poner 'encima' de la malla tridimensional que representa a la figura para darle un aspecto realista.

La pregunta aquí sería, ¿ cómo podemos acoplar una imagen bidimensional (la textura) a una figura tridimensional ? Lo veremos a continuación.

Los colores

• Cuando dibujamos un gráfico, la textura tiene información de qué color tiene que tener en cada pixel (punto) que se va a dibujar.

Esta información sigue un modelo de colores. En este punto se va a explicar el modelo RGB (Red-Green-Blue)

Existen otros modelos como YUV o CMYK.

• Con estes tres colores básicos (rojo-verde-azul) podemos obtener cualquier color mezclándolos en la propoción correcta.

Por ejemplo:

Información obtenida del libro Beginning Android 4 Games

Todos los colores anteriores se obtienen como combinación de los tres básicos: RED – GREEN – BLUE.

• Cada color básico se puede expresar con un número en coma flotante entre los valores 0.0f - 1.0f (siendo 1 la intensidad más alta y 0 la más baja)

También se puede codificar cada color con un byte con valores entre 0 y 255.

• Dependiendo de las diferentes opciones podemos tener diferentes formatos RGB:
• Codificación RGB de 32 bits: tiene 12 bytes por cada pixel (32 bits por color (al ser flotante) = 4 bytes x 3 colores=12 bytes). Las intensidades pueden varias entre 0.0f y 1.0f.
• Codificación RGB de 24 bits: tiene 3 o 4 bytes (si tiene alfa, visto después) por cada pixel (8 bits por color = 1 bytes x 3 colores=3 bytes). Las intensidades pueden varias entre 0 e 255. La orden de los componentes puede ser RGB o BGR. Se conoce como RGB888 o BGR888.
• Codificación RGB de 16 bits: tiene 2 bytes por cada pixel. Red y blue tienen una intensidad que varía entre 0 y 31 (5 bits x 2 = 10 bits) y el verde una intensidad entre 0 y 63 (6 bits). El orden puede ser RGB o BGR y se conoce como RGB565 o BGR565.

• Lo normal es trabajar con el formato RGB888.

Formato de imágenes

• A la hora de guardar imágenes disponemos de multitud de formatos diferentes.

Dos de los más conocidos son los formatos JPEG y PNG.

• JPEG es un formato que pierde calidad con respecto a la imagen original pero tiene una nivel de compresión alto (ocupa menos en disco).
• PNG no pierde calidad y es idéntica a la imagen original.

Nota: Siempre que utilicemos una imagen que no necesite transparencia (explicado a continuación) ni una calidad excesiva debemos eligir el formato jpg ya que tiene un gran nivel de compresión.

El componente Alfa: Nivel de transparencia.

• El componente alfa es un número que indica el nivel de transparencia de una imagen.

• Normalmente al superponer una imagen sobre otra, la imagen superior 'tapa' a la inferior.

Cuando creamos una imagen esta tiene una forma cuadrada/rectangular ya que al guardar le tenemos que dar un tamaño en pixeles (puntos) en su ancho y alto.

Sin embargo, los personajes que conforman un juego no tienen esa forma, puede ser redonda, con border redondeados,...

Información obtenida del libro 'Beginning Android 4 Games'

Si disponemos de un fondo y queremos que el personaje pase por dicho fondo, tendríamos este efecto:

Imagen superpuesta. El color blanco aparece alrrededor del gráfico.

• Gracias al componente alfa podemos establecer que un determinado color sea transparente (lo que se conoce como alfa).

Así, aplicado a los formatos gráficos vistos anteriormente, podemos aplicar el formato RGBA8888 (y sus variantes). Con esto indicamos que el componente alfa está compuesto por un valor que va desde 0 (totalmente transparente) a 255 (totalmente opaco).

Si hacemos que en el ejemplo el color blanco sea totalmente transparente, conseguiremos este efecto:

Imágenes superpuestas. El color blanco tiene un nivel de transparencia de 0.

• IMPORTANTE: Si la imagen necesita transparencias no podemos guardarla en el formato JPG. Obligatoriamente tendría que ser PNG.

• Para hacer un color transparente en GIMP:

• Vídeo de como facer un fondo transparente en GIMP: https://www.youtube.com/watch?v=m-7j6bP94fg
• También podemos asignar a un color un nivel de transparencia como se indica en la siguiente imagen:

Cambiando unha cor a transparente

Texturas en objetos 2D

• Un gráfico en dos dimensiones es un gráfico plano formado por dos coordenadas en el espacio 2D (x1,y1-x2,y2) conformando un cuadrado/rectángulo.

Texturas en objetos 3D

-- Ángel D. Fernández González -- (2018).