UNITY Texturas

Introducció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 estos tres colores básicos (rojo-verde-azul) podemos obtener cualquier color mezclándolos en la proporció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 bordes 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 3D

• Como comentamos anteriormente, la forma en como asociamos una textura (imagen bidimensional, con un ancho-alto) a una figura tridimensional (denominada Mesh) es la de 'pegar' la imagen sobre las caras que conforman la figura.

• Por lo tanto, primero debemos de recortar la figura 3D en sus caras, para que estas queden dibujadas de una forma bidimensional.

Veamos un ejemplo con un cubo (algo supongo que todos hemos hecho alguna vez :) )

• Como vemos tenemos un objeto 3D (el cubo) el cual lo hemos 'recortado' para que sus caras se dibujen sobre una superficie 2D.

Ahora solo tenemos que pasar cada textura (tenemos 6, aunque podemos utilizar la misma textura en cada cara) a cada una de las caras del cubo.

El programa 3D ya se encargará de 'colocar' cada textura en cada una de las caras.

• Este concepto lo podemos aplicar a cualquier figura 3D.

Lo normal es que una figura 'compleja' la tengamos dividida en 'trozos' para que cada uno de ellos tenga texturas diferentes.

• Otro ejemplo lo encontramos cuando queremos representar un planeta.

La figura 3D que representa un planeta es una esfera (no exactamente, ya que los planetas están achatados pero simplificamos).

Para 'pegar' la textura, una de las formas de hacerlo, es cortar la esfera por la mitad (como si fuera una naranja para hacer zumo) y 'aplastar' las dos mitades sobre el plano. Una vez hecho esto, podemos poner encima una textura como la siguiente:

• Veamos otro con una nave espacial:

• Texturas aplicacas a nave espacial. Gráficos obtenidos [del Blog de Xoppa-LIBDX]
• 

  Nave sin aplicar la textura.

• 

  Textura a aplicar a la nave una vez esté 'cortada'.

• 

  Nave una vez aplicada la textura anterior.

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