() translation by (you can also view the original English article)
En este tutorial, te mostraré cómo crear gráficos 3D de sombreado plano para tu juego de Unity, y te explicaré por qué querrías hacerlo en primer lugar.
Hoy en día, hay una gran cantidad de herramientas y motores 3D que permiten que cualquiera pueda hacer juegos 3D. Sin embargo, los desafíos del arte en 3D son desalentadores y, a menudo, requieren una gran cantidad de tiempo, esfuerzo y experiencia que desarrollador por si solo, o el aficionado no tienen. Los modelos de polígonos bajos, en combinación con el sombreado plano, devuelven el estilo de principios de los años 90, utilizando técnicas que cualquiera puede aprender. Y no es solo un retroceso nostálgico; el sombreado plano se puede combinar fácilmente con técnicas modernas como los mapas de oclusión ambiental para darle a tu juego un aspecto sorprendente y vanguardista.
Obtén el ejemplo del proyecto Unity aquí
Este tutorial asume que ya sabes cómo hacer modelado 3D, o que puedes encontrar modelados 3D gratuitos en Internet Estaré sacando ejemplos de modelos de la nada; hay toneladas de tutoriales en Internet sobre cómo comenzar en el modelado 3D Si recién estás empezando, puedo recomendar altamente Wings 3D y SketchUp. Ambos tienen interfaces extremadamente accesibles en comparación con las aplicaciones de modelado profesional, y exportan los archivos en formatos que Blender y Unity pueden usar.
¿Por qué usar sombreado plano?
Así que has decidido ensuciarte las manos con Unity y comenzar a crear un juego completamente en 3D. Tal vez no tengas conocimientos previos de arte en juegos, o tal vez hayas hecho arte para juegos en 2D; en cualquier caso, aprenderás rápidamente que los juegos 3D requieren un conjunto muy grande de habilidades para ser creados. No solo necesitas aprender a crear modelos en 3D, también necesitas desenvolver esos modelos para dibujar correctamente una textura en la superficie de tu modelo. Por supuesto, también es necesario crear la textura con esmero.
¿Qué pasaría si pudieras simplemente crear el modelo, terminado y estando listo después de unos pocos pasos adicionales lo coloreas y sombreas? Podrías terminar con algo como esto:
O esto
Claro, el aspecto es espartano y lo-fi, ¡pero ese es el punto! Ya sea que busques la nostalgia de principios de los 90, una apariencia abstracta moderna, o simplemente quieras ahorrar mucho tiempo en la creación de recursos para un juego improvisado, el sombreado plano es una excelente opción de estilo para principiantes y expertos en 3D por igual.
Si recién está comenzando con el arte de juegos, la simplicidad del flujo de trabajo te permite concentrarte en los aspectos fundamentales: aprender a crear un modelo 3D con una silueta y forma agradables y colorearlo con un pequeño conjunto de colores seleccionados a mano. Concentrarse en estos fundamentos te enseña las habilidades básicas del arte sin distracciones.
Cómo funciona el sombreado plano
Cada modelo 3D está compuesto por un conjunto de vértices que determinan la forma de ese modelo. Para cada vértice, también hay un vector llamado normal; piensa en esto como un pequeño alfiler que sobresale del vértice.
El motor de renderizado usa ese normal para cada vértice y compara su dirección con la dirección de cualquier fuente de luz entrante, y la dirección en la que se encuentra la cámara, para determinar la cantidad de luz que se aplicará a ese vértice.
El renderizador reduce gradualmente la cantidad de luz de un vértice al siguiente, lo que le da a un modelo 3D básico una apariencia de "almohada". A menos que apliques una textura (y, a menudo, incluso si lo haces), esto se ve realmente terrible en cualquier cosa que no sea una superficie curvilínea y "acolchada":
Con un sombreado plano, toda la superficie de un polígono recibe una cantidad uniforme de luz, calculada a partir de una adherencia normal desde el centro del polígono:
Las aplicaciones modernas de modelado utilizan "bordes duros" o "grupos de suavizado" para ajustar los vértices normales de tu modelo para que coincidan con el polígono al que están adyacentes, lo que hace que se sombree de manera uniforme y plana. Un experto artista en 3D utilizará estos para hacer que los bordes afilados se vean afilados y las superficies planas se vean planas, pero estamos interesados en hacer que todo el modelo se vea nítido y plano. Afortunadamente, Unity hace esto muy simple.
Técnica Básica
Si estás lo suficientemente familiarizado con tu herramienta de modelado, puedes hacer que tu modelo se vea sombreado de forma plana estableciendo todos los bordes como "duros". Sin embargo, en Unity, puedes simplemente dejar que Unity cree bordes duros automáticamente:
Paso 1
Haz clic en tu modelo en la ventana Proyecto para que aparezca la Configuración de importación en el panel Inspector.
Paso 2
Ve a la sección Normales y tangentes y, en el menú desplegable Normales, selecciona Calcular.
Paso 3
Establece el Ángulo de suavizado en 0 y haz clic en Aplicar.
Unity hará que cualquier borde que sea un ángulo más agudo que este sea un borde duro. Queremos que todos nuestros bordes sean duros, por lo que, naturalmente, al establecerlo en 0 se obtiene este efecto.
Siéntete libre de experimentar con diferentes ángulos de suavizado, dependiendo de la geometría de tu modelo, puede ser una manera increíblemente fácil de darle un aspecto completamente diferente.
Paso 4
¡Ahora que tenemos nuestro modelo con sombreado plano, debemos darle un poco de color! Hay muchas maneras de hacer esto, pero algunas son mejores que otras:
- Selecciona partes de tu modelo y configúralas en un material diferente para cada color que desees usar.
- Asigna colores de vértice en tu programa de modelado.
- Crea una "textura de paleta" que contenga un montón de cuadrados de colores y texturiza tu modelo con esto.
Yo prefiero el último método, que te describo a continuación. Normalmente, después de crear un modelo 3D, debes desenvolverlo cuidadosamente para que coincida con una textura hecha a mano. Sin embargo, dado que solo estamos interesados en tener un solo color para cada polígono, realmente no importa cómo se vea tu trabajo de desenvolvimiento de UV, podría ser simplemente una mezcla aleatoria de vértices, siempre y cuando esté en la parte superior del color correcto!
El primer paso en la coloración es crear la textura. Para nuestro ejemplo, digamos que queremos cuatro colores:
A continuación, carga tu modelo 3D completado en el modelador que elijas y carga tu textura. Selecciona todas las caras del modelo que deseas que sean de un color determinado y desenvuelve UV automáticamente . El resultado probablemente será una confusa mezcla de polígonos.
Como dije, sin embargo, eso realmente no importa. Mueve todos los polígonos uno encima del otro y escálalos en una pequeña mancha que se ajuste a uno de los cuadrados de tu paleta de texturas. Luego, arrástralos sobre el color de tu elección.
Echa un vistazo a tu modelo; ¡Las secciones texturadas ahora tienen el color correcto! Repite este proceso para el resto de las caras de tu modelo, seleccionándolas y desenvolviéndolas de nuevo según el color que desees. Si cometes un error, no es gran cosa, simplemente selecciona las caras de nuevo, desenvuélvelas de nuevo si es necesario y colócalas en el lugar correcto sobre la textura. ¡No se puede decir lo mismo para el desenvolvimiento UV "real"!
¡Voilà! Tienes un modelo de color, en sombreado plano que puedes importar a tu juego.
¿Qué pasa con los otros métodos?
En caso de que te lo preguntes, aquí hay algunas razones para evitar los otros dos métodos:
Múltiples materiales
Este método crea una gran cantidad de materiales de los que tendrás que realizar un seguimiento en Unity y, lo que es más importante, Unity no realizará lotes de forma dinámica en tus modelos y utilizará un sorteo completo para cada material, que a menudo es el cuello de botella más pequeño en hardware de gráficos moderno.
En pocas palabras, obtendrás un rendimiento terrible si utilizas este método ampliamente.
Colores del vértice
En realidad, esto funciona bastante bien y, de hecho, es posible que desees utilizarlo según tus necesidades particulares o flujo de trabajo artístico. Sin embargo, notarás algo inmediatamente: cuando importas tu modelo y utilizas un sombreador difuso básico, ¡los colores de tu vértice no parecen estar apareciendo!
Esto es porque los sombreadores básicos los ignoran; tendrás que usar sombreadores especiales que realmente usan los datos de color de vértice. Se pueden encontrar fácilmente, pero las cosas se complican si también deseas otros efectos de renderización de otros sombreadores: estos sombreadores a menudo tampoco usan colores de vértice, y tendrás que modificar el sombreador tu mismo.
Si aún no sabes cómo escribir sombreadores, esto puede quitarte un montón de tiempo y esfuerzo que preferirías gastar en el resto de tu juego. Además, podría ser solo yo, pero me resulta mucho más fácil cambiar varios colores a la vez con una textura en lugar de configurarlos manualmente en un modelador o en el juego con un script.
Optimización
Ahora que tienes una paleta de texturas y una técnica básica resuelta, puedes crear el resto de los modelos para tu juego. Como puedes sospechar, puedes seguir agregando colores a tu paleta y usar la misma textura para todo el juego.
En realidad, hay algunas ventajas de rendimiento importantes al hacer esto: si sigues usando el mismo material para todo tu juego, Unity usualmente dibujará todos tus objetos de manera más eficiente al "agruparlos". Como mencioné antes, "dibujar lotes" es un importante cuello de botella en los gráficos de computadora y es una buena idea mantenerlos al mínimo.
Unity intentará automáticamente dibujar tu escena en la menor cantidad posible de lotes de dibujo si utilizas un solo material para todo, aunque cada modelo debe escalarse de la misma manera y tener menos de aproximadamente 300 vértices. Te informará qué tan bien se hace en la ventana Estadísticas:
Sugerencia: si deseaS obtener más información acerca de los procesos por lotes, asegúrate de consultar los documentos de Unity sobre el tema. ¡Esta lectura deberia ser obligatoria para cualquier persona interesada en el desempeño de su juego!
Cambio de colores sobre la marcha
Tienes un conjunto de modelos que son de sombreado plano y de color, y todo parece estar en su lugar, pero ¿qué pasa si quieres cambiar de color mientras se juega el juego?
Por ejemplo, digamos que tienes un script que generará tu avión, pero luego quieres colorearlo en azul si es amigable o rojo si es un enemigo. Ciertamente, puedes crear paletas separadas y materiales separados, pero eso significa que pierdes el aumento de rendimiento de los dos tipos de aviones.
Eso no es un gran problema si solo hay algunos a la vista a la vez. Sin embargo, toma el ejemplo de un terreno generado por procedimientos compuesto de toneladas y toneladas de fichas o cubos, de muchos tipos de terrenos diferentes, como un determinado juego de caja de arena popular. Esto significaría un montón de dibujos sorteados, pero no temas, ¡hay una manera de seguir usando un solo material!
¿Recuerdas cómo coloreaste tu modelo metiendo sus coordenadas UV en cajas de colores? Unity te permite modificar los vértices de tu modelo sobre la marcha, incluidas las coordenadas UV, por lo que para cada tipo de terreno diferente puedes mover las coordenadas UV al cuadro de color correcto a través de un script.
Crea un nuevo script C# en Unity llamado PaletteColorizer y pega este código en él:
1 |
using UnityEngine; |
2 |
using System.Collections; |
3 |
|
4 |
public class PaletteColorizer : MonoBehaviour |
5 |
{
|
6 |
public int colorsPerRow = 4; |
7 |
public int colorIndex = 0; |
8 |
public bool overrideUVs = false; |
9 |
|
10 |
void Awake () |
11 |
{
|
12 |
if(!enabled) |
13 |
{
|
14 |
return; |
15 |
} |
16 |
|
17 |
SetUVsToColor(colorIndex); |
18 |
} |
19 |
|
20 |
void Update() |
21 |
{
|
22 |
} |
23 |
|
24 |
public void SetUVsToColor(int colorIndex) |
25 |
{
|
26 |
if(overrideUVs) |
27 |
{
|
28 |
SetUVs(gameObject, GetColorOffset(colorIndex)); |
29 |
} |
30 |
else |
31 |
{
|
32 |
TranslateUVs(gameObject, GetColorOffset(colorIndex)); |
33 |
} |
34 |
} |
35 |
|
36 |
Vector2 GetColorOffset(int colorIndex) |
37 |
{
|
38 |
Vector2 offset = new Vector2(); |
39 |
float row = Mathf.Floor(colorIndex / colorsPerRow); |
40 |
float step = 1.0f / colorsPerRow; |
41 |
|
42 |
offset.x = (colorIndex - (row * colorsPerRow)) * step; |
43 |
offset.y = (1.0f - (row / colorsPerRow)); |
44 |
|
45 |
return offset; |
46 |
} |
47 |
|
48 |
static public void TranslateUVs(GameObject obj, Vector2 offset) |
49 |
{
|
50 |
var meshFilter = obj.GetComponent(); |
51 |
Mesh mesh = meshFilter.mesh; |
52 |
|
53 |
var newUVs = new Vector2[mesh.uv.Length]; |
54 |
|
55 |
for(int i=0; i < mesh.uv.Length; i++) |
56 |
{
|
57 |
newUVs[i] = new Vector2(mesh.uv[i].x + offset.x, mesh.uv[i].y + offset.y); |
58 |
} |
59 |
|
60 |
mesh.uv = newUVs; |
61 |
} |
62 |
|
63 |
static public void SetUVs(GameObject obj, Vector2 offset) |
64 |
{
|
65 |
var meshFilter = obj.GetComponent(); |
66 |
Mesh mesh = meshFilter.mesh; |
67 |
|
68 |
var newUVs = new Vector2[mesh.uv.Length]; |
69 |
|
70 |
for(int i=0; i < mesh.uv.Length; i++) |
71 |
{
|
72 |
newUVs[i] = new Vector2(offset.x + 0.01f, offset.y - 0.01f); |
73 |
} |
74 |
|
75 |
mesh.uv = newUVs; |
76 |
} |
77 |
} |
Para usar este script, simplemente agrégalo como componente a cualquier objeto del juego con un material que use una paleta de textura, establece el número de colores por fila y establece el índice de color (comenzando con 0 en la esquina superior izquierda y contando hasta la derecha y abajo).
Si las coordenadas UV de tu modelo no están configuradas para caber dentro de las cajas de la paleta (como en el caso del cuadrante "agua" alrededor de los hexagonos), marca la casilla de verificación Anular UVs; Como puedes ver arriba, esto hará que el script escriba coordenadas completamente nuevas en lugar de cambiar las existentes.
Una cosa a tener en cuenta acerca de este método es que, al modificar cualquier malla, Unity creará silenciosamente una nueva malla en la memoria. Si lo haces particularmente a menudo en una gran cantidad de mallas, es posible que tengas problemas de memoria y querrás buscar un medio para almacenar en caché y compartir mallas que se han coloreado de la misma manera Sin embargo, para un número razonable de modelos low-poly, probablemente nunca tendrás que preocuparte por eso.
Oclusión Ambiental Al Horno
El sombreado plano no necesariamente tiene que estar siempre emparejado con bloques de color uniformes. Una forma en que puedes agregar algunos detalles sutiles y un aspecto realista "polvoriento" a cualquier superficie es agregarle oclusión ambiental. Unity Pro proporciona formas de agregar oclusión ambiental como un filtro de posprocesamiento, pero quiero mostrarte una manera de agregar ese toque extra de pulido sin necesidad de la versión Pro y sin necesidad de sombreadores especiales
Todo lo que necesitas hacer es desenvolver tu modelo y "hornear" el efecto de oclusión ambiental en una textura. Esto requiere que realmente dediques un poco de tiempo y esfuerzo para desenvolver correctamente tu modelo, pero después de ese paso, se trata de unos pocos clics y un poco de manipulación en tu programa de pintura para darle a tu modelo un aspecto un poco más real y vanguardista.
Paso 1
Primero, querrás iniciar Blender con una escena vacía: presiona A para seleccionar todos los objetos en la escena de inicio, presiona Eliminar y luego presiona D para confirmar. No quieres ninguna lámpara o cámara porque estas se importarán como objetos basura vacíos en Unity.
Paso 2
Luego, importa tu modelo en él (Archivo> Importar> Wavefront (.obj)). Para este ejemplo, comencemos con una roca.
Paso 3
Abre el Editor UV y crea una textura que pueda contener aproximadamente la cantidad de detalles que deseas. Soy bastante tacaño, así que me quedo con 256x256px para cualquier cosa sobre el tamaño del jugador (una roca o un árbol), y solo hago más grande los objetos muy grandes (como la montaña en la que caminan).
Paso 4
Ahora, desenvuelve tu modelo. Hay muchas formas de hacerlo, que están cubiertas con mucho más detalle de lo que jamás podría esperar, así que consulta la documentación de Blender u otros tutoriales en línea sobre cómo desenvolver tu modelo de manera correcta y eficiente.
Paso 5
Ahora que tienes un modelo sin envoltura, estás listo para hornear la oclusión ambiental en tu textura. Blender renderizara la oclusión ambiental directamente en tu textura, respetando las coordenadas UV que acabas de desenvolver. Simplemente sigue estos pasos:
- Haz clic en el botón Renderizar (el icono de la cámara) en el panel de Propiedades en el lado derecho de la pantalla.
- Desplázate hacia abajo hasta la subsección Hornear (en la parte inferior) y expándela.
- Cambia el modo de horneado de Renderización completa a Oclusión ambiental.
- Haz clic en el botón Hornear directamente encima de eso.
Paso 6
Ahora tienes la textura AO horneada y un modelo que tiene las coordenadas UV correctas para usarlo. Guarda la textura en un archivo de imagen y exporta el modelo en Blender a un formato que Unity pueda usar (como .fbx).
Paso 7
Dependiendo de tus necesidades, puedes utilizar la textura tal como está. Simplemente crea un nuevo material difuso que use tu nueva textura de AO horneada y establece el color en algo que se vea bien.
Sin embargo, es probable que desees tener modelos con varios colores, como un árbol. Solo necesitas seguir algunos pasos adicionales. Sigue las instrucciones anteriores para crear una textura AO horneada para tu modelo de árbol. Esta vez, sin embargo, querrás hacer un seguimiento de dónde colocas tus coordenadas UV, porque necesitarás colorear esas ubicaciones en la textura manualmente.
Sería prudente agrupar tus islas UV por color. En este ejemplo, coloco las partes del tronco en la parte superior de la textura y las partes de la hoja en la parte inferior.
Paso 8
Abre tu textura de AO horneada con el programa de pintura que elijas (cualquiera que admita capas lo hará, como GIMP). Crea una nueva capa y colócala sobre tu capa AO, utilizando la capa AO como guía para colorear la nueva capa de acuerdo con los colores que quieras ver en el modelo.
Usa la herramienta Lazo u otra herramienta de selección de tu elección para seleccionar las partes de la textura que quieras colorear y luego rellenalas con el color correcto.
Paso 9
Ahora tienes los colores configurados, así que es hora de la tarea final: mezclar AO sobre los colores. Mueve la capa AO sobre la capa de color y cambia el modo de fusión a Multiplicar.
Establece la opacidad de la capa a lo que se vea bien. Usa tu propio criterio, pero asegúrate de anotar este porcentaje, ya que para obtener un efecto uniforme en todas tus texturas, querrás usar el mismo método y cantidad de mezcla.
Guarda esta textura en un archivo e impórtala en Unity junto con el modelo de árbol. Crea un material tal como hiciste para la roca, usando la textura que acabas de hacer.
¡Eso es practicamente todo! Usa esta técnica en todos tus modelos para dar a la escena un aspecto más pulido y tangible del que podrías obtener con el sombreado plano básico.
Puedes notar que tus materiales solo utilizan sombreadores difusos básicos. Una de las cosas hermosas sobre hornear AO mezclado directamente sobre la textura de color es que puedes usar esta textura con cualquier otro sombreador que admita una textura difusa ... ¡sin necesidad de un código específico de AO!
Conclusión
Ahora tienes una útil caja de herramientas de técnicas gráficas que puedes utilizar para crear un juego con sombreado plano completo. Con suficiente práctica, puedes crear imágenes impresionantes que son rápidas de producir y que se renderizan de manera eficiente.
