La plantilla Ciudad inicial destaca el proceso y las técnicas que puedes utilizar para diseñar el aspecto de una ciudad dentro de Unreal Editor para Fortnite (UEFN).
Esta isla contiene un trocito de la ciudad de Nueva York, iluminada y estilizada para que las Tortugas Ninja se sientan como en casa. Utiliza esta plantilla para experimentar la ciudad desde abajo y desde las alturas.
Esta guía repasa los pasos que dio el equipo para conceptualizar y construir el aspecto de la plantilla. Abarca lo siguiente:
Diseño de elementos visuales desde el concepto
Enfoques para la disposición de recursos
Técnicas de posprocesamiento
Otras técnicas de estilo: skybox, iluminación y ventanas personalizadas
Ideas para ampliar la experiencia
Echa un vistazo al posprocesamiento, las skyboxes y la iluminación personalizada y aprende a crear efectos visuales estilizados que causen sensación.
No se trata de un tutorial de juego. El mapa no incluye barreras en el nivel. Puedes añadirlas a medida que construyes tu propia experiencia con recursos como el dispositivo Barrera. Para aprender a crear un modo de juego arcade que incluya una cámara de desplazamiento lateral y una interfaz de usuario (IU) personalizada, consulta la plantilla Arcade de las Tortugas Ninja.
Para acceder a la plantilla, sigue estos pasos:
Abre UEFN.
Ve a Plantillas de marcas > Ciudad inicial.
Crea un nuevo proyecto.
Si no ves el proyecto en Plantillas de marcas, asegúrate de que te has registrado correctamente. Para obtener más información, consulta el Programa de marca de las Tortugas Ninja.
Estilos visuales
La plantilla Ciudad inicial presenta dos estilos estéticos destacados: dibujo y cómic. Dichos estilos visuales se han diseñado para adaptarse a la jugabilidad y los temas de las Tortugas Ninja. Ambos están disponibles en la plantilla de UEFN a través de los volúmenes de posprocesamiento y en las islas del modo Creativo con el dispositivo de posprocesamiento. Estos estilos no son exclusivos de las herramientas de desarrollo de las Tortugas Ninja. Utiliza las técnicas de la plantilla para personalizar aún más tus islas o para partir de esta plantilla.
 |  |
Filtro del estilo dibujo | Filtro del estilo cómic |
Estos estilos se seleccionaron revisando las experiencias de las Tortugas Ninja desde los dibujos animados hasta el estilo animado en 3D. El equipo trabajó con Paramount para establecer elementos icónicos que captaran el mundo de las Tortugas Ninja. A partir del arte conceptual y otros elementos de referencia, el equipo tomó nota de aspectos como el sombreado plano, las escenas en los tejados con la luna asomando y los esquemas de color.
Referencias conceptuales
La estética actúa como un elemento de diseño del juego que encaja con la mecánica y la narrativa de la experiencia. Abarca desde el color, la iluminación, los recursos y la disposición de la escena. y ayuda a crear la sensación de la experiencia para los jugadores.
Cómo cambiar entre estilos
Desde el editor, puedes cambiar entre los estilos mediante el esquematizador. En el esquematizador, busca «posprocesamiento» para ver los volúmenes PostProcessVolume_Cartoon y PostProcessVolume_Comic.
Interruptor de estilo en la guarida de las alcantarillas.
El estilo dibujo está activo de forma predeterminada. Para habilitar el estilo cómic, sigue estos pasos:
En el esquematizador, desactiva el icono del ojo de PostProcessVolume_Cartoon.
Selecciona PostProcessVolume_Comic y, en el panel Detalles, busca «peso de mezcla».
Establece el valor del peso de mezcla en 1.
Antes de ejecutar la plantilla, asegúrate de revertir los cambios anteriores.
En la plantilla de juego, puedes elegir el modo visual en la guarida de las alcantarillas desde los dispositivos interruptores de la pared. Alterna los estilos y explora el nivel de las calles y los tejados para ver los recursos de las Tortugas Ninja que componen la ciudad. Utiliza la plantilla como base para crear tu propia experiencia de las Tortugas Ninja o aplica las técnicas visuales a otro proyecto.
Para obtener información sobre cómo ajustar más estos estilos, consulta la sección Técnicas de posprocesamiento de esta página.
Diseño de niveles
Los filtros Dibujo y Cómic son estilos visuales llamativos, pero la ciudad es lo que une a la plantilla. Los artistas han dispuesto los recursos de forma que se cree una auténtica ciudad para las Tortugas Ninja. El uso de recursos de las Tortugas Ninja y Fortnite añade capas a la ciudad. La disposición de los recursos para definir un espacio y un camino por el que puedan transitar los jugadores se denomina diseño de niveles.
La ciudad de las Tortugas Ninja, con una silueta del horizonte de fondo para añadir profundidad y rodear al jugador.
Centro de la ciudad
La plantilla se diseñó a partir de opciones que definen la ciudad. Aunque la plantilla no es un ejemplo de juego completo, para ayudar a diseñar la disposición, la plantilla tiene la temática de plataformas. Este género de juego ayuda a definir el espacio jugable. Dentro del espacio jugable, los artistas colocaron recursos únicos y detallados, principalmente recursos de las Tortugas Ninja. La idea es que los jugadores puedan entrar y explorar estos recursos.
Estos recursos sirven de apoyo a la temática. Al pensar en el estilo, hay que tener en cuenta los recursos. Pueden mejorar o empeorar el aspecto visual de la experiencia. La disposición de estos recursos en el nivel y la forma en que el jugador recorre la escena también desempeñan un papel importante. La plantilla utiliza otros recursos, como carteles, letreros de neón, grafitis y elementos, para dar carácter al mundo y establecer aún más la temática. Para ver la lista completa de recursos, consulta Cómo trabajar con las islas de las Tortugas Ninja.
Recursos del canal 6 en modo cómic.
Una vez establecido el espacio jugable, el equipo tiene una idea de cómo construir el resto del mapa para llenar el espacio.
El mapa consta de un primer plano, un plano medio y un fondo. Los edificios y las ventanas se simplifican cuanto más se alejan del centro. La línea del horizonte actúa como telón de fondo del mapa, encerrando al jugador en la ciudad. Para la guarida de las alcantarillas, se han colocado recursos muy detallados porque la intención es que el jugador explore cada parte de la zona.
 |  |
Disposición de recursos a nivel de ciudad | Disposición de recursos de la guarida de las alcantarillas |
Por último, se utilizan elementos de resaltado como la luna, las ventanas, la iluminación y un filtro visual para captar la sensación de la vida nocturna de la ciudad.
Técnicas de posprocesamiento
Lo que acentúa la sensación de ciudad son las diversas técnicas utilizadas para crear los estilos visuales. Los volúmenes de posprocesamiento son la función destacada utilizada para crear los estilos.
El posprocesamiento es una superposición visual que afecta a la estética de la isla en su conjunto o de partes seleccionadas. Cada filtro tiene ajustados los parámetros estándar de posprocesamiento, junto con materiales personalizados que determinan el aspecto. Para obtener más información sobre el posprocesamiento y sus ajustes estándar, consulta la introducción al posprocesamiento.
Filtro de posprocesamiento de dibujo
Niebla de profundidad
La plantilla utiliza un efecto personalizado de niebla atmosférica a través de los materiales. La niebla añade color y ayuda a dar profundidad a la ciudad. Puedes utilizar los ajustes de material para controlar artísticamente las siluetas de los edificios y el color de la escena.
Para obtener más información sobre los controles para realizar ajustes, consulta la sección Material de niebla personalizado de la página.
 |  |
El horizonte de la ciudad en primer plano | El horizonte de la ciudad hacia el fondo |
Sombreador plano
El material del sombreador plano iguala la iluminación e introduce algunos umbrales y posterización de la luz. Esto ayuda a que la escena parezca más caricaturesca.
En la plantilla, el efecto se enmascara en primer plano para evitar que la distancia resulte chocante. Como los dibujos animados y las animaciones de referencia suelen tener fondos pintados más suaves, el enmascaramiento mantiene dicho aspecto.
 |  |
Valor del sombreador plano 0 | Valor del sombreador plano 1 |
Contornos
Los contornos ayudan a estilizar aún más la escena para crear la sensación de dibujo. El material incluye opciones para controlar el grosor, el color y la opacidad mediante la profundidad. Con estos ajustes, los artistas han reforzado las líneas del primer plano y han creado contornos complementarios para los edificios a medida que se alejan en la distancia.
Filtro de posprocesamiento de cómic
El filtro Cómic (negro) utiliza algunos ajustes de posprocesamiento estándar, materiales de contorno y sombreador plano similares a los del filtro Dibujo. El material de contorno se ha ajustado para complementar la gama tonal de la escala de grises. Los materiales personalizados exclusivos del filtro incluyen posterización, tonalidad de cómic y un marco. El resultado es un estilo muy gráfico que recuerda a un cómic o una novela gráfica.
Tonalidad de cómic y marco
El material con tonalidad de cómic quita saturación y aplica umbrales de luminancia para dar a la escena una gama tonal impresa. A continuación, se aplica el material del marco para completar la estética.
 |  |
Valor de tonalidad de cómic y marco 0 | Valor de tonalidad de cómic y marco 1 |
Posterización
Para que el efecto de cómic sea aún más convincente, la imagen se posteriza con bandas sólidas de grises convertidas en puntos de distintos tamaños. Cuanto más oscuro sea el tono, más grande será el punto, hasta que se fundan para formar el negro puro. A continuación, los puntos se combinan en la imagen en escala de grises en la cantidad deseada. El material se utiliza al 25 % de su valor para reducir la fatiga visual durante el juego.
 |  |
Valor de posterización 0 | Valor de posterización 1 |
Edición de los materiales de posprocesamiento
Los materiales impulsan el efecto de posprocesamiento que se ve en ambos modos estilizados. Puedes explorar la estructura de cada material y hacer ajustes para adaptarlo a tu proyecto. También puedes cambiar los materiales en los volúmenes de posprocesamiento para modificar rápidamente el estilo.
Para ver los materiales personalizados de cada volumen de posprocesamiento:
En el esquematizador, haz clic en el volumen de posprocesamiento.
Ve al panel Detalles > Funciones de renderizado > Materiales de posprocesamiento > Matriz.
 |  |
Materiales de posprocesamiento de dibujo | Materiales de posprocesamiento cómic |
Puedes ajustar cada valor de la matriz entre 0 y 1 para examinar el efecto de cada material. Para abrir la ubicación de cada material, haz clic en el icono de la carpeta. A continuación, haz clic en el material que quieras examinar para abrir el editor de materiales. El editor de materiales tiene algunos ajustes para artistas en el panel Detalles, mientras que otros tienen parámetros en el grafo de material. Los ajustes para artistas son parámetros del grafo de material que se exponen como variables públicas. Para obtener más información sobre los materiales, incluido el editor, las funciones y las expresiones, consulta los nodos y la configuración de materiales.
Material de niebla personalizado
Un ejemplo de ajustes para artistas en un material son los parámetros establecidos para el material de niebla de profundidad. Los valores de color de la niebla se establecen mediante escalas de curvas, que proporcionan una forma flexible de ajustar los valores de niebla con precisión en toda la profundidad de la escena. Este método ofrece más control para crear un aspecto estilizado sobre el sistema de niebla atmosférica integrado en el editor.
Controles para el material de niebla de profundidad.
El material consta de los siguientes parámetros básicos, diseñados para que los artistas realicen ajustes rápidamente. Puede acceder a estos valores en el panel Detalles del material o entrar en el grafo de material y ajustar los valores predeterminados.
| Parámetros de niebla | Descripción |
|---|---|
Punto lejano y cercano de la curva | Establece la distancia cercana y lejana a la que se asigna la escala del recurso de curva. Los colores de la escala de la izquierda corresponden al punto cercano y los de la derecha al punto lejano. |
Entrada de curva | Proporciona una curva de color para ajustar los colores de degradado de la niebla. Para abrir la curva, haz doble clic en el icono. Para obtener más información, consulta la documentación de Unreal Engine Atlas de curvas en materiales. |
Cantidad global | Establece el porcentaje de visibilidad de la escala de niebla. |
Límite de alcance | Establece el umbral de la profundidad de la escena. Puedes utilizar los valores de alcance para controlar si se aplica niebla a la skybox. |
El material de niebla es un ejemplo de cómo puedes abrir cada material para realizar ajustes. Los demás materiales siguen los mismos principios. Para practicar la creación de un nuevo material de posprocesamiento y conocer más sobre el grafo de material, consulta Cómo usar un material de posprocesamiento.
Otras técnicas visuales
Esta sección abarca algunas técnicas utilizadas con la iluminación y las ventanas para acentuar aún más el ambiente y la estilización.
Cómo ajustar la skybox procedimental
Otra técnica basada en materiales es la skybox, que es independiente del volumen de posprocesamiento. Ambos filtros utilizan la skybox procedimental personalizada para crear una atmósfera estilizada. El material está unido a una esfera de malla estática que abarca el mapa. En el panel Detalles del material se exponen parámetros de uso sencillo para el artista, que permiten realizar ajustes rápidos.
Puedes acceder a la herramienta Skybox desde una de las siguientes opciones:
Esquematizador > SkySphere > MI_ProceduralSkybox
Almacén de contenido > Nombre del proyecto > Materiales > MI_ProceduralSkybox
Haz doble clic en el material para abrir el editor de materiales. La categoría Grupos de parámetros contiene los parámetros para ajustar la estilización del cielo, que se describen en la tabla siguiente. La categoría incluye un interruptor estático global para los valores de los parámetros para alternar la nitidez del horizonte y la luna.
Controles para el material de la skybox.
| Parámetros de skybox | Descripción | Ejemplo |
|---|---|---|
Valores de parámetro de escalar global | Ajusta los atributos de la luna y la atmósfera. Los controles proporcionan a los artistas los medios para estilizar la luna como pieza central. La técnica cumple el concepto de las Tortugas Ninja corriendo por las cimas de los edificios y su silueta se recorta contra la luz de la luna. |  |
Valores de parámetros vectoriales globales | Ajusta el color de los atributos del cielo. La skybox personalizada ofrece más control sobre los colores de degradado del cielo y los sesgos de mezcla. Este control del color es esencial para mejorar los valores de la línea del horizonte frente a los rascacielos. Los controles de color adicionales están diseñados para ajustar el cielo cuidadosamente más allá de los valores realistas para que se ajuste más a la paleta de colores estilizada. |  |
Estrellas | Ajusta la transformación, el color, el teselado y el brillo de las estrellas. |  |
Nubes | Ajusta el mapa de textura y la cobertura de las nubes, la suavidad de los bordes, los colores claros y oscuros, la luz del borde, la opacidad y la dirección de movimiento de las nubes. De este modo, el artista puede conseguir un cielo más dinámico y con mayor interés visual. |
Con la configuración personalizada del cielo y la iluminación, el gestor del momento del día del mundo está desactivado en la configuración del mundo.
Puedes seguir examinando el material desde el grafo de material. Para abrir el grafo de material, en la barra de herramientas del editor de materiales, haz clic en Jerarquía > M_ProceduralSkybox. El grafo se abre con grupos de nodos clasificados en cuadros de comentarios para mostrar a qué parámetros afectan. Puedes ajustar los nodos para redefinir los parámetros.
Grafo de material para la skybox procedimental.
Iluminación personalizada
La iluminación de la plantilla se integra con los volúmenes de posprocesamiento para garantizar una estética adecuada. La iluminación ayuda a crear ambiente y a orientar a los jugadores. También ayuda a definir los atributos de los filtros de posprocesamiento. Se colocaron luces generales para iluminar la ciudad y, a continuación, se añadieron luces específicas para resaltar edificios y elementos.
Iluminación ambiental
La iluminación ambiental es el proceso de colocar con precisión luces destinadas a crear una sensación particular para la experiencia.
Durante la fase de conceptualización, los artistas revisan el material de referencia (a menudo denominado panel de ideas) para establecer la emoción y la dirección de la iluminación. Este proceso se utiliza en otras formas de historia, como las películas de acción real, las animaciones y el cine en vivo.
La mayor parte de la iluminación ambiental de la escena se establece mediante uno de los siguientes elementos:
Luz cenital: gestiona el color ambiente de la escena y controla la iluminación más oscura en las sombras.
Luz direccional: controla la posición de la luna y su iluminación.
Luces puntuales: se colocan para añadir toques de color de dibujos en zonas que de otro modo serían menos interesantes. (Especular está deshabilitado para eliminar los puntos brillantes creados por estas luces).
Componentes de luz unidos a un actor.
Materiales emisores.
Las luces ambientales también ayudan a mantener la calidad visual cuando se optimiza el proyecto. La estilización de las luces y los recursos mantiene el interés visual en los dispositivos de gama baja.
 |  |  |
Estilo clásico de BR de Fornite | Estilo de dibujo | Estilo de cómic |
Para obtener más información sobre las prácticas de iluminación artística, consulta Iluminación y color.
Ventanas
Cuanto más te alejas del centro de la ciudad, más se simplifican las ventanas de la escena. Como se ha señalado en el diseño de niveles, la simplificación añade profundidad y ayuda a optimizar la escena. Las ventanas también utilizan materiales que emiten luz y refuerzan aún más el aspecto estilizado. En la tabla siguiente se describen las distintas técnicas utilizadas para las ventanas.
Se utiliza un dispositivo Secuenciador del día para controlar que las luces de fondo basadas en materiales de construcción estén desactivadas.
En este ejemplo, el color y el estilo de estas luces de material no encajaban con la estética de la ciudad, por lo que se tomó la decisión de desactivarlas y crear luces de ventana personalizadas.
| Técnica | Descripción | Ejemplo |
|---|---|---|
Mapa de cubos interior | Un método de material para dar la apariencia de un espacio 3D. El método se utiliza para rellenar edificios en los que no se espera que los jugadores entren, pero que pueden ver al pasar. Puedes acceder al material desde Almacén de contenido > Nombre del proyecto > Materiales > M_Windows_Interior. |  |
Máscara de ventana | Material que aleatoriza las posiciones de las ventanas para dar variedad a los edificios del fondo. Puedes acceder al material desde Almacén de contenido > Nombre del proyecto > Materiales > M_WindowMask. |  |
Valor aleatorio de la posición en el mundo | El aspecto de una habitación, iluminada o no, viene determinado por la posición de la ventana en el mundo. Cada material de ventana tiene un desfase de posición en el mundo aplicado al color del material. El desfase crea un factor de luminosidad aleatorio para dar vida a la ciudad. Este método reduce el uso de materiales únicos y de memoria. | |
Material de brillo estilo dibujo | Líneas diagonales aplicadas a las ventanas para imitar un efecto de brillo estilizado. Almacén de contenido > Nombre del proyecto > Materiales > M_Windows_Channel6. |  |
Cómo ampliar la experiencia
Después de aprender los enfoques y técnicas utilizados para crear la estética clave de la plantilla, podrás empezar a mejorar el mapa a tu propia experiencia de las Tortugas Ninja.
Recorre la plantilla y alterna entre los estilos para imaginar qué elementos narrativos de juego encajan con el filtro y la ciudad.
Aquí tienes algunas ideas para empezar:
Parte de una base de juego de plataformas y añade enfrentamientos con enemigos. Para obtener información sobre cómo añadir enfrentamientos, consulta Obstáculos y enfrentamientos con enemigos de las Tortugas Ninja.
Utiliza los recursos de noticias como escenas de corte narrativo con el estilo cómic. Para obtener más información, consulta Cómo crear escenas cinemáticas.
Mejora el efecto con materiales de explosión estilo cómic como cuadros de diálogo que aparecen mediante Sequencer. Para obtener más información, consulta Eventos de juego en Sequencer.
Cómo crear un estilo soleado
Cuando partas de una plantilla o utilices recursos en otros proyectos, parte de una base conceptual de la narrativa y la jugabilidad que encajan con el escenario de la ciudad y los recursos de las Tortugas Ninja. Piensa en el ambiente que quieres crear y en cómo quedaría la iluminación. Ten en cuenta las partes del mapa que pretendes que explore el jugador.
Referencia conceptual para un mapa de estilo soleado con un enfrentamiento con un PNJ en el tejado.
Con los volúmenes de posprocesamiento y otras técnicas visuales puedes tomar esta idea de ciudad de estilo soleado y darle vida.
Ajustes en la skybox
En primer lugar, ilumina la atmósfera con la skybox procedimental. Para crear un cielo azul, sigue estos pasos:
En el almacén de contenido, busca MI_ProceduralSkybox y haz doble clic para abrir el editor de materiales.
En el panel Detalles, ajusta los siguientes valores:
Luces y sombras de nubes: RGB 1.0, 1.0, 1.0
Color del horizonte: RGB 0.0619, 0.970, 1.0
Color superior: RGB 0.038, 0.119, 0.838
Brillo de las estrellas: 0 (para apagar las estrellas)
Brillo lunar: 9.5 (para imitar al sol)
Como alternativa, en lugar de ajustar el brillo de la luna, puedes intercambiar la textura de la luna en el grafo de material con tu propia imagen del sol.
Ajustes de iluminación
Con el cielo azul, el sol y la dirección de su luz deben coincidir mejor. Para ajustar la posición del sol y la dirección de la luz, sigue estos pasos:
En el esquematizador, busca y selecciona DirectionalLight_Index1.
Gira la luz hacia la izquierda para establecer una posición más alta.
En el panel Detalles, aumenta la intensidad de la luz a 6.
A continuación, para apagar las luces de las ventanas en primer y segundo plano, sigue estos pasos:
Haz clic en una ventana intermedia.
En la barra de menús, haz clic en Seleccionar > Seleccionar todo con el mismo material.
Elimina el conjunto de ventanas.
Repite los pasos con las ventanas en primer plano.
Eliminar las ventanas cuando no se necesitan ayuda a optimizar la escena.
Ajustes de niebla
Para el modo soleado, utiliza PostProcessVolume_Cartoon como base. Para ajustar la profundidad y el color de la niebla, sigue estos pasos:
En el almacén de contenido, busca PP_DepthFog_Inst y haz doble clic en el material para abrir el editor de materiales.
En el panel Detalles, haz doble clic en la curva de color Entrada de curva.
Ajusta los valores de la clave de color superior:
Clave de color del extremo derecho: RGB 0.022, 0.979, 0.629
Clave de color del centro: RGB 0.0, 0.140, 0.307
Clave de color del extremo izquierdo: RGB 0.208, 0.059, 0.117
En el panel Detalles de PP_DepthFog_Inst, ajusta la profundidad de la escala de color con los siguientes valores:
Punto lejano de la curva: 93511
Punto cercano de la curva: 14887
Ajustes de posterización
Por último, añade la posterización para crear un efecto de puntos similar al del modo cómic oscuro.
En el panel Detalles, en Materiales de posprocesamiento, añade un elemento de la matriz de materiales. Para ello, haz clic en el icono más.
En el menú desplegable de la nueva matriz, selecciona Referencia de recursos y, a continuación, busca y selecciona PP_Posterize.
Para ajustar la cantidad, busca el material y haz doble clic para abrir el editor de materiales.
En el panel Parámetros, establece la cantidad de posterización en 0.05.
Con algunos ajustes en los materiales y las luces, ¡has despertado a la ciudad con un cielo azul! Ahora lleva a esas tortugas a su guarida rápidamente.
