Share
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 el jugador en solitario 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 su juego un aspecto sorprendente y vanguardista..
Obtenga el ejemplo del proyecto Unity aquí
Este tutorial asume que ya sabe cómo hacer modelado 3D, o puede encontrar modelos 3D gratuitos en Internet. Estaré sacando ejemplos de modelos del aire; 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 se exportarán a formatos que Blender y Unity pueden usar.
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 algo de arte para juegos en 2D; en cualquier caso, aprenderá rápidamente que los juegos 3D requieren un conjunto muy grande de habilidades para crear. No solo necesita aprender a crear modelos en 3D, también necesita desenvolver esos modelos para dibujar correctamente una textura en la superficie de su modelo. También es necesario crear cuidadosamente la textura, por supuesto.
¿Qué pasaría si pudieras simplemente crear el modelo, pero haberlo terminado y listo para tu juego después de unos pocos pasos adicionales para colorearlo y sombrearlo? Podría terminar con algo como esto:
O esto:
Claro, el aspecto es espartano y lo-fi, ¡pero ese es el punto! Ya sea que busque la nostalgia de principios de los 90, una apariencia abstracta moderna, o simplemente quiera ahorrar mucho tiempo en la creación de activos 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 juego de arte, la simplicidad del flujo de trabajo le permite concentrarse 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.
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-Piense en esto como un pequeño alfiler que sobresale del vértice.
El motor de renderizado usa lo 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 aplique una textura (y, a menudo, incluso si lo hace), esto se ve realmente terrible en cualquier cosa que no sea una superficie curvilínea y "almohada":
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 su 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, la unidad hace esto muy simple.
Si está lo suficientemente familiarizado con su herramienta de modelado, puede hacer que su modelo se vea plano sombreado estableciendo todos los bordes como "duros". Sin embargo, en Unity, puede simplemente dejar que Unity cree bordes duros automáticamente:
Haga clic en su modelo en el Proyecto ventana para que aparezca su Importar ajustes en el Inspector panel.
Ve a la Normales y tangentes sección y, en el Normales desplegable, elija Calcular.
Selecciona el Ángulo de suavizado a 0 y haga clic Aplicar.
La unidad hará que cualquier borde que sea un ángulo más agudo que este en un borde duro. Queremos que todos nuestros bordes sean duros, por lo que, naturalmente, configurarlo para 0 da este efecto.
Siéntase libre de experimentar con diferentes ángulos de suavizado, dependiendo de la geometría de su modelo, puede ser una manera increíblemente fácil de darle un aspecto completamente diferente.
¡Ahora que tenemos nuestro modelo sombreado plano, debemos darle un poco de color! Hay muchas maneras de hacer esto, pero algunas son mejores que otras:
Yo prefiero el último método, que te describo a continuación. Normalmente, después de crear un modelo 3D, debe 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 su trabajo de desenvolvimiento de rayos UV, podría ser simplemente una mezcla aleatoria de vértices, siempre y cuando esté en la parte superior de la correcta color!
El primer paso en la coloración es crear la textura. Para nuestro ejemplo, digamos que queremos cuatro colores:
A continuación, cargue su modelo 3D completado en el modelo que elija y cargue su textura. Seleccione todas las caras del modelo que desea que sea de un color determinado y desenvuelva automáticamente UV. El resultado será probablemente 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 la textura de la paleta. Luego, arrástrelos sobre el color de su elección.
Echa un vistazo a tu modelo; ¡Las secciones texturadas ahora tienen el color correcto! Repita este proceso para el resto de las caras de su modelo, seleccionándolas y desenvolviéndolas de nuevo según el color que desee. Si comete un error, no es gran cosa, simplemente seleccione las caras de nuevo, desenvuélvalo de nuevo si es necesario y colóquelos en el lugar correcto sobre la textura. Lo mismo no se puede decir del desenvolvimiento UV "real"!
Voilà! Tienes un modelo de color, plano y sombreado que puedes importar a tu juego.
En caso de que te lo preguntes, aquí hay algunas razones para evitar los otros dos métodos:
Este método crea una gran cantidad de materiales de los que tendrá que realizar un seguimiento en Unity y, lo que es más importante, Unity no realizará lotes de forma dinámica en sus modelos y utilizará un sorteo completo para cada material, que a menudo es el cuello de botella más pequeño en el hardware gráfico moderno..
En pocas palabras, obtendrá un rendimiento terrible si utiliza este método ampliamente.
En realidad, esto funciona bastante bien y, de hecho, es posible que desee utilizarlo según sus necesidades particulares o flujo de trabajo artístico. Sin embargo, notará algo inmediatamente: cuando importa su modelo y utiliza un sombreador difuso básico, los colores de su vértice no parecen estar apareciendo!
Esto es porque los shaders básicos los ignoran; Tendrá 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 desea otros efectos de renderización de otros sombreadores: estos sombreadores a menudo tampoco usan colores de vértice, y tendrá que modificar el sombreador usted mismo..
Si aún no sabes cómo escribir shaders, esto puede llevarte a 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.
Ahora que tiene una paleta de texturas y una técnica básica resuelta, puede crear el resto de los modelos para su 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é anteriormente, "dibujar llamadas" es un gran cuello de botella en los gráficos de computadora y es una buena idea mantenerlos al mínimo.
Unity intentará automáticamente dibujar su escena en la menor cantidad posible de llamadas de dibujo si utiliza un solo material para todo, aunque cada modelo debe escalarse de la misma manera y tener menos de aproximadamente 300 vértices. Te informará de lo bien que se hace en el Estadísticas ventana:
Propina: Si desea obtener más información acerca de los procesos por lotes, asegúrese de consultar los documentos de Unity sobre el tema. Esto debería ser una lectura obligatoria para cualquier persona interesada en el desempeño de su juego.!
Tienes un conjunto de modelos que son de color 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, puede crear paletas separadas y materiales separados, pero eso significa que pierde 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, tome 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 llamadas de sorteo, 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 le permite modificar los vértices de su modelo sobre la marcha, incluidas las coordenadas UV, por lo que para cada tipo de terreno diferente, puede mover las coordenadas UV al cuadro de color correcto mediante un script.
Crea un nuevo script de C # en Unity llamado PaletteColorizer y pega este código en él:
utilizando UnityEngine; utilizando System.Collections; clase pública PaletteColorizer: MonoBehaviour public int colorsPerRow = 4; public int colorIndex = 0; public bool overrideUVs = false; void Awake () if (! enabled) return; SetUVsToColor (colorIndex); void Update () public void SetUVsToColor (int colorIndex) if (overrideUVs) SetUVs (gameObject, GetColorOffset (colorIndex)); else TranslateUVs (gameObject, GetColorOffset (colorIndex)); Vector2 GetColorOffset (int colorIndex) Vector2 offset = new Vector2 (); float row = Mathf.Floor (colorIndex / colorsPerRow); paso flotante = 1.0f / colorsPerRow; offset.x = (colorIndex - (row * colorsPerRow)) * step; offset.y = (1.0f - (row / colorsPerRow)); compensación de retorno volante público estático TranslateUVs (GameObject obj, Vector2 offset) var meshFilter = obj.GetComponent (); Malla de malla = mallaFiltro.mesh; var newUVs = new Vector2 [mesh.uv.Length]; para (int i = 0; i < mesh.uv.Length; i++) newUVs[i] = new Vector2(mesh.uv[i].x + offset.x, mesh.uv[i].y + offset.y); mesh.uv = newUVs; static public void SetUVs(GameObject obj, Vector2 offset) var meshFilter = obj.GetComponent(); Mesh mesh = meshFilter.mesh; var newUVs = new Vector2[mesh.uv.Length]; for(int i=0; i < mesh.uv.Length; i++) newUVs[i] = new Vector2(offset.x + 0.01f, offset.y - 0.01f); mesh.uv = newUVs;
Para usar este script, simplemente agréguelo como componente a cualquier objeto del juego con un material que use una textura de paleta, establezca el número de colores por fila y establezca el índice de color (comenzando con 0 en la esquina superior izquierda y contando hasta la derecha y abajo).
Si las coordenadas UV de su modelo no están configuradas para caber dentro de las cajas de la paleta (como en el caso del cuadrante "agua" alrededor de los hexes), verifique la Anular UVs caja; Como puede 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 hace particularmente a menudo en una gran cantidad de mallas, es posible que tenga problemas de memoria y querrá 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.
El sombreado plano no necesariamente tiene que estar siempre emparejado con bloques de color uniformes. Una forma en que puede agregar algunos detalles sutiles y una apariencia realista "polvorienta" a cualquier superficie es agregarle oclusión ambiental. Unity Pro proporciona formas de agregar oclusión ambiental como un filtro de posprocesamiento, pero quiero mostrarle 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 necesita hacer es desenvolver su 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 más real y vanguardista..
Primero, querrá arrancar Blender con una escena vacía: presione UNA para seleccionar todos los objetos en la escena de inicio, presione Borrar, entonces presione re para confirmar. No desea ninguna lámpara o cámara porque se importarán como objetos basura vacíos en Unity.
Luego, importa tu modelo en él. (Archivo> Importar> Wavefront (.obj)). Para este ejemplo, vamos a empezar con una roca.
Abra el Editor UV y cree una textura que pueda contener aproximadamente la cantidad de detalles que desea. 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 voy más grande para los objetos muy grandes (como la montaña en la que están caminando).
Ahora, desenvuelve tu modelo. Hay muchas maneras de hacerlo, que están cubiertas con mucho más detalle de lo que jamás podría esperar, así que consulte la documentación de Blender u otros tutoriales en línea sobre cómo desenvolver su modelo de manera correcta y eficiente..
Ahora que tiene un modelo sin envolver, está listo para hornear la oclusión ambiental en su textura. Blender procesará la oclusión ambiental directamente en su textura, respetando las coordenadas UV que acaba de desenvolver. Simplemente siga estos pasos:
Ahora tiene la textura AO horneada y un modelo que tiene las coordenadas UV correctas para usarlo. Guarde la textura en un archivo de imagen y exporte el modelo en Blender a un formato que Unity pueda usar (como .fbx).
Dependiendo de sus necesidades, puede utilizar la textura tal como está. Simplemente cree un nuevo material difuso que use su nueva textura de AO horneada y establezca el color en algo que se vea bien.
Sin embargo, es probable que desee tener modelos con varios colores, como un árbol. Solo necesitas seguir unos pasos adicionales. Siga las instrucciones anteriores para crear una textura AO horneada para su 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.
Abra su textura de AO horneada con el programa de pintura que elija (todo lo que admita capas lo hará, como GIMP). Cree una nueva capa y colóquela sobre su capa AO, utilizando la capa AO como guía para colorear la nueva capa de acuerdo con los colores que desea ver en el modelo..
Utilizar el Lazo herramienta, u otra herramienta de selección de su elección, para seleccionar las partes de la textura que desea colorear, luego rellénelas con el color correcto.
Ahora tiene los colores configurados, así que es hora de la tarea final: mezclar el AO sobre los colores. Mueva la capa AO sobre la capa de color y cambie el modo de fusión a Multiplicar.
Establecer la opacidad de la capa a lo que se ve bien. Use su propio criterio, pero asegúrese de anotar este porcentaje, ya que para obtener un efecto uniforme en todas sus texturas, querrá usar el mismo método de mezcla y cantidad..
Guarde esta textura en un archivo e impórtela en Unity junto con el modelo de árbol. Crea un material tal como hiciste para la roca, utilizando la textura que acabas de hacer..
¡Eso es practicamente todo! Use esta técnica en todos sus modelos para darle a la escena completa un aspecto más pulido y tangible del que podría obtener con el sombreado plano básico.
Puede notar que sus materiales solo utilizan sombreadores difusos básicos. Una de las cosas hermosas sobre el uso de AO al horno mezclado directamente sobre la textura de color es que puede usar esta textura con cualquier otro sombreador que tome una textura difusa ... sin necesidad de un código específico de AO!
Ahora tiene una útil caja de herramientas de técnicas gráficas que puede utilizar para crear un juego completo de sombra plana. Con suficiente práctica, puede crear imágenes impresionantes que son rápidas de producir y que se renderizan de manera eficiente.
Accentsconagua