La plantilla de Ciudad básica resalta el proceso y las técnicas que se pueden usar para diseñar el aspecto de una ciudad dentro de Unreal Editor para Fortnite (UEFN).
¡Esta isla contiene una pequeña porción de la ciudad de Nueva York, iluminada y estilizada para hacer que las Tortugas Ninja (TNMT) se sientan como en casa! Juega en la plantilla para experimentar una perspectiva baja y alta de la ciudad.
Esta guía analiza los pasos que el equipo realizó para conceptualizar y construir el aspecto de la plantilla. Incluye las siguientes áreas:
Diseño de visuales desde concepto
Enfoques para la disposición de recursos
Técnicas de posprocesamiento
Técnicas de estilo adicionales: textura de cielo personalizada, iluminación y ventanas
Ideas para expandir la experiencia
Echar un vistazo al posprocesamiento, la textura de cielo y la iluminación personalizada, y aprender a crear visuales estilizadas increíbles.
Esto no es un tutorial de partida de juego. El mapa no incluye barreras en el nivel. Puedes añadirlos a medida que construyes tu propia experiencia con recursos como el dispositivo Barrera. Para aprender a construir un modo de juego de arcade, que incluye una cámara de desplazamiento lateral y una interfaz de usuario (IU) personalizada, consulta la plantilla de arcade de las Tortugas Ninja.
Para acceder a la plantilla, sigue estos pasos:
Abre UEFN.
Ve a Plantillas de marca > Ciudad básica.
Crea un nuevo proyecto.
Si no encuentras el proyecto en las plantillas de marca, asegúrate de haberte registrado adecuadamente. Para más información, consulta el Reglamento de la marca Las Tortugas Ninja.
Estilos visuales
La plantilla de Ciudad básica presenta dos estilos estéticos destacados: dibujo animado y cómic. Estos estilos visuales se diseñaron para ajustarse a los temas y a la jugabilidad de las Tortugas Ninja. Los dos estilos están disponibles en la plantilla de UEFN a través de los volúmenes de posproceso y en las islas de modo Creativo con el dispositivo de posprocesamiento. Estos estilos no son exclusivos de las herramientas de desarrolladores de las Tortugas Ninja. Usa las técnicas en la plantilla para personalizar más las islas o para construir sobre esta plantilla.
 |  |
Filtro de estilo de dibujo animado | Filtro de estilo cómic |
Estos estilos se seleccionaron al analizar las experiencias de las Tortugas Ninja, desde dibujos animados hasta estilos animados en 3D. El equipo trabajó con Paramount para establecer elementos icónicos que capturan el entorno de las Tortugas Ninja. Desde arte conceptual y otras piezas referenciales, el equipo señaló elementos como el sombreado de cel, escenas desde azoteas con la luna de fondo y esquemas de color.
Referencias de concepto
Las estéticas actúan como un elemento de diseño de juego que se adapta a las mecánicas y a la narrativa de la experiencia. Estas estéticas varían entre el color, la iluminación, los recursos y el diseño de la escena. Ayudan a crear la sensación de la experiencia para los jugadores.
Cambia los estilos
Desde el editor, se puede alternar entre los estilos con el esquematizador. En el esquematizador, busca "posproceso" para visualizar tanto el volumen de PostProcessVolume_Cartoon como el de PostProcessVolume_Comic.
Conmutador de estilo en la guarida de alcantarilla.
El estilo de dibujos animados está activo por defecto. Para habilitar el estilo de cómic, sigue estos pasos:
En el esquematizador, cambia el ícono de ojo de PostProcessVolume_Cartoon a apagado.
Selecciona PostProcessVolume_Comic y en el panel de detalles, busca "blendweight".
Establece el peso de fusión en 1.
Antes de ejecutar la plantilla, es necesario asegurarse de revertir los cambios antes mencionados.
En la plantilla de partida de juego, puedes elegir el modo de visual en la guarida de la alcantarilla en los dispositivos de interruptor en la pared. Activa o desactiva los estilos y, luego, explora los niveles de tejado y de calle para ver los recursos de las Tortugas Ninja que crean la ciudad. Usa esta plantilla como base para construir tu propia experiencia de las Tortugas Ninja o llevar las técnicas visuales a otro proyecto.
Para aprender cómo ajustar estos estilos aún más, consulta la sección Técnicas de posproceso en esta página.
Diseño de nivel
Los filtros de dibujos animados y de cómic son estilos visuales sorprendentes, pero la ciudad es lo que hace que la plantilla funcione. Los artistas establecieron los recursos de una manera que crea una ciudad auténtica para las Tortugas Ninja. El uso de recursos de Fortnite y de las Tortugas Ninja añade capas a la ciudad. La disposición de los recursos para definir un espacio y un camino para jugadores para viajar se conoce como diseño de nivel.
La ciudad de las Tortugas Ninja con la silueta del horizonte en el fondo para añadir profundidad y rodear al jugador.
Centrar 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 el diseño, la plantilla tiene una temática de plataformas. Este género de juego ayuda a definir el espacio reproducible. Dentro del espacio reproducible, los artistas colocan recursos detallados y únicos, principalmente recursos de las Tortugas Ninja. La idea es que los jugadores puedan entrar y explorar estos recursos.
Estos recursos son compatibles con la temática. Al pensar en un estilo, hay que tener en mente los recursos. Pueden ayudar con el aspecto visual de la experiencia o pueden arruinarlo. La disposición de estos recursos en el nivel y cómo un jugador navega por la escena también desempeñan un papel importante. La plantilla usa recursos adicionales como afiches, señales de neón, grafitis y utilerías para darle personalidad al entorno y reafirmar la temática. Para acceder a la lista completa de recursos, consulta Cómo trabajar con islas de las Tortugas Ninja.
Recursos de Canal 6 en el estilo de cómic.
Con el conjunto de espacio reproducible, el equipo tiene una idea de cómo construir el resto del mapa para completar el espacio.
El mapa consiste de un primer plano, un plano intermedio y un fondo. Los edificios y las ventanas se simplifican mientras más lejos estén del centro. El horizonte actúa como el fondo para el mapa, y encierra al jugador en la ciudad. Para la rejilla de la alcantarilla, se colocan recursos muy detallados porque la intensión es que el jugador explore cada parte del área.
 |  |
Diseño de recurso a nivel de ciudad | Disposición de recursos de alcantarillado |
Finalmente, los elementos realzados como la luna, las ventanas, la iluminación y un filtro virtual se usan para capturar la sensación de la vida nocturna de la ciudad.
Técnicas de posproceso
Lo que hace enfatizar la sensación de ciudad son las distintas técnicas que se usan para crear los estilos visuales. Los volúmenes de posproceso son las características prominentes usadas para crear los estilos.
El posproceso es una superposición visual que afecta la estética de tu isla como un todo o como partes selectas. Cada filtro tiene una configuración de posproceso estándar adaptada, junto con materiales personalizados que conducen el aspecto. Para más información sobre posprocesamiento y su configuración estándar, consulta Introducción al posprocesamiento.
Filtro de posproceso de dibujos animados
Niebla de profundidad
La plantilla usa un efecto de niebla atmosférica personalizada a través de los materiales. La niebla añade color y ayuda a darle profundidad a la ciudad. Puedes usar la configuración del material para controlar artísticamente las siluetas de los edificios y el color de la escena.
Para más información sobre los controles para hacer ajustes, consulta la sección Material de niebla personalizado en la página.
 |  |
Horizonte de la ciudad en el fondo | Horizonte de la ciudad llevado hacia atrás |
Sombreador de cel
El material de sombreador de cel aplana la iluminación e introduce algunos umbrales y posterización de luz. Esto ayuda a que la escena luzca más caricaturesca.
En la plantilla, el efecto se oculta en el primer plano para evitar que parezca discordante. Ya que el animé y los dibujos animados de referencia en general tienen fondos pintados más suaves, lo oculto mantiene el aspecto.
 |  |
Valor de sombreador de cel 0 | Valor 1 del sombreador de cel |
Contornos
Los contornos ayudan a estilizar aún más la escena para crear la sensación de dibujo animado. El material incluye opciones para controlar el espesor, el color y la opacidad a través de la profundidad. Con estas configuraciones, los artistas fortalecieron las línea en el primer plano y crearon contornos complementarios para las construcciones que se desvanecen en la distancia.
Filtro de posproceso de cómic
El filtro de cómic (negro) usa algunas configuraciones de posproceso estándar y materiales de contorno y un sombreador de cel similar, como el filtro de dibujos animados. El material de contorno se ajustó para complementar el rango tonal de escala de grises. Los materiales personalizados únicos de filtro incluyen la posterización, el tono de cómic y un fotograma. El resultado es un elevado estilo gráfico, reminiscente de una novela gráfica o de cómic.
Fotograma y tono de cómic
El material de tono de cómic le saca saturación y aplica umbrales de luminosidad para darle a la escena un rango tonal impreso. El material de fotograma se aplica entonces para completar el aspecto.
 |  |
Tono de cómic y valor de fotograma 0 | Tono de cómic y valor de fotograma 1 |
Posterización
Para hacer que el efecto de cómic sea aún más convincente, la imagen se posteriza con sólidas bandas de grises convertidas a varios tamaños de puntos. Mientras más oscuro es el tono, más grande es el punto, hasta que se combinan para formar algo puramente negro. Los puntos se combinan entonces en una imagen de escala de grises hasta lograr la cantidad deseada. El material se usa al 25 % de su valor para reducir la tensión de ojo durante la partida del juego.
 |  |
Valor de posterización 0 | Valor de posterización 1 |
Edición de los materiales de posproceso
Los materiales dirigen el efecto de posproceso que ves en los dos modos estilizados. Puedes explorar la construcción de cada material y hacer modificaciones que se ajusten a tu proyecto. También puedes cambiar materiales en los volúmenes de posproceso para modificar rápidamente el estilo.
Para ver los materiales personalizados para cada volumen de posproceso:
En el esquematizador, haz clic en el volumen de posproceso.
Dirígete al Panel de detalles > Herramientas de renderizado > Materiales de posproceso > Matriz.
 |  |
Materiales de posprocesamiento para caricatura | Materiales de posprocesamiento cómic |
Puedes ajustar cada valor de matriz entre 0 y 1 para examinar el efecto de cada material. Para abrir la ubicación de cada material, haz clic en el ícono de carpeta. A continuación, haz clic en el material a examinar para abrir el editor de materiales. El editor de materiales tiene alguna configuración de artista en el panel de detalles, mientras que otros tienen parámetros en el gráfico de materiales. La configuración amigable con los artistas son parámetros del gráfico de materiales que se exponen como variables públicas. Para más información sobre materiales, incluido el editor, las funciones y las expresiones, consulta Nodos de material y configuración.
Material de niebla personalizado
Un ejemplo de configuración de artista 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 rampas curvas, que otorgan una manera flexible para ajustar los valores de niebla precisamente a través de la profundidad de la escena. Este método otorga más control para crear un aspecto estilizado sobre el sistema de niebla atmosférica incorporada del editor.
Controles para el material de niebla profunda.
El material consiste en los siguientes parámetros principales, diseñado para que los artistas hagan ajustes rápidamente. Puedes acceder a estos valores en el panel de detalles del material o ir al gráfico de materiales y ajustar los valores predeterminados.
| Parámetro de niebla | Descripción |
|---|---|
Curva de punto lejano y cercano | Establece la distancia cercana y lejana a la que está mapeada la rampa de recurso de curva. Los colores de rampa en la izquierda corresponden al punto cercano y el lado derecho de la rampa corresponde al punto lejano. |
Entrada de curva | Otorga una curva de color para ajustar los colores de gradiente de la niebla. Para abrir la curva, haz doble clic en el ícono. 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 para la rampa de niebla. |
Límite de rango | Establece el umbral de la profundidad de la escena. Puedes usar valores de rango para controlar si la niebla se aplica a la textura de cielo. |
El material de niebla es un ejemplo de cómo puedes abrir cada material para hacer ajustes. Los materiales restantes tienen los mismos principios. Para practicar la creación de un nuevo material de posprocesamiento y aprender sobre el gráfico de materiales, consulta Cómo usar el material de posproceso.
Técnicas visuales adicionales
Esta sección abarca algunas técnicas usadas con iluminación y ventanas para empujar aún más el ambiente y el estilismo.
Cómo ajustar la textura de cielo procesal
Otra técnica basada en el material es la textura de cielo, que está separada del volumen de posproceso. Ambos filtros usan la textura de cielo procesal personalizada para crear una atmósfera estilizada. El material está unido a una esfera de malla estática que incluye el mapa. Los parámetros amigables con el artista se exponen en el panel de detalles del material para modificaciones rápidas.
Puedes acceder a la herramienta de textura de cielo desde una de las siguientes opciones:
Esquematizador > SkySphere > MI_ProceduralSkybox
Cajó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ámetro almacena la configuración para ajustar la estilización del cielo, descrita en la tabla que aparece debajo. La categoría incluye un conjunto de Valores de parámetro de cambio estático global para activar/desactivar la nitidez del horizonte y de la luna.
Controles para el material de textura de cielo.
| Parámetro de textura de cielo | Descripción | Ejemplo |
|---|---|---|
Valores de parámetros escalares globales | Modifica los atributos de la luna y la atmósfera. Los controles le otorgan a los artistas los medios para estilizar la luna como una pieza central. La técnica satisface el concepto de las Tortugas Ninja corriendo a través de lo alto de los edificios en silueta contra la luna. |  |
Valores globales de parámetros vectoriales | Modifica el color de los atributos del cielo. La textura de cielo personalizada otorga más control sobre la gradiente del cielo y los sesgos de fusión. Este control de color es esencial para mejorar los valores del horizonte contra los rascacielos. Los controles de color extra se diseñaron para retocar el cielo cuidadosamente, más allá de los valores realistas, para que se ajusten mejor en línea con el color de modelado estilizado. |  |
Estrellas | Modifica la transformación, el color, los azulejos y el brillo de las estrellas. |  |
Nubes | Modifica el mapa de textura de la nube, la cobertura, la suavidad de los bordes, colores oscuros y claros, luz tenue, opacidad y dirección de movimiento de la nube. Esto otorga una manera para que el artista entre en un cielo más dinámico con un interés más visual. |
Con el cielo personalizado y la configuración de iluminación, el Administrador de hora del día se desactiva en la configuración del entorno.
Puedes examinar más el material en el gráfico de materiales. Para abrir el gráfico de materiales, en la barra de herramientas del editor de materiales, haz clic en Jerarquía > M_ProceduralSkybox. El gráfico se abre con grupos de nodos categorizados en cajas de comentarios para mostrar a qué parámetros afectan. Puedes ajustar los nodos para redefinir los parámetros.
Gráfico de materiales para la textura de cielo procedimental.
Iluminación personalizada
La iluminación para la plantilla se integra en los volúmenes de posprocesamiento, para asegurar una estética adecuada. La iluminación ayuda a establecer el ambiente y le otorga dirección a los jugadores. Ayuda también a definir atributos de los filtros de posproceso. Las luces generales se colocaron para iluminar la ciudad; luego, las luces específicas se añadieron para resaltar los edificios y la utilería.
Iluminación del ambiente
La iluminación del ambiente es el proceso de colocar de manera precisa luces que se suponen van a establecer un sentimiento particular para la experiencia.
Durante la fase de conceptualización, los artistas revisan el material de referencia (generalmente llamados tableros de ambiente) para establecer la emoción y la dirección de la iluminación. Este proceso se usa en otras formas de historia, como películas de acción en vivo, animaciones y teatro en vivo.
La mayor parte de la iluminación de ambiente en la escena se establece por una de las siguientes:
Luz cenital: conduce el color de 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 la iluminación desde la luna.
Luces puntuales: se colocan para añadir tonos de color de dibujos animados en áreas que, de lo contrario, serían menos interesantes. (Especular está desactivado para quitar manchas brillantes creadas por las luces).
Componentes de luz adjuntos a un actor.
Materiales emisivos.
Las luces de ambiente también ayudan a conservar la calidad visual al optimizar el proyecto. El estilo de las luces y los recursos mantiene el interés visual en dispositivos de gama baja.
 |  |  |
Estilo clásico de Fortnite BC | Estilo de dibujo animado | Estilo de cómic |
Para obtener más información sobre las prácticas de luces artísticas, consulta Iluminación y color.
Windows
Entre más te alejes del centro de la ciudad, más se simplificarán las ventanas en la escena. Como se nota en el diseño de nivel, la simplificación añade profundidad y ayuda a optimizar la escena. Las ventanas también emplean materiales para emitir luz y seguir desarrollando el aspecto estilizado. La tabla a continuación describe las distintas técnicas utilizas para las ventanas.
Un dispositivo secuenciador de día se usa para controlar que las luces de fondo basadas en material de construcción estén apagadas.
En este ejemplo, el color y estilo de estas luces materiales no encaja con el aspecto de la ciudad, así que se tomó la decisión de apagarlas y crear luces de ventanas personalizadas.
| Técnica | Descripción | Ejemplo |
|---|---|---|
Mapa de cubos interior | Un método de material para dar la apariencia de un estado 3D. El método se utiliza para rellenar edificios en lo que no se espera que los jugadores entren, pero que pueden ver al pasar. Puedes acceder al material desde Cajón de contenido > Nombre del proyecto > Materiales > M_Windows_Interior. |  |
Máscara de ventana | Material que aleatoriza las posiciones de las ventanas para darles variedad a los edificios del fondo. Puedes acceder al material desde Cajón de contenido > Nombre del proyecto > Materiales > M_WindowMask. |  |
Valor aleatorio de la posición del entorno | El aspecto de la habitación, iluminada o no, se determina para la posición de la ventana en el entorno. Cada material de ventana tiene una compensación de posición del entorno aplicada al color del material. La compensación crea un factor de brillo aleatorio para darle vida a la ciudad. Este método reduce el uso de materiales únicos y de memoria. | |
Material de brillo de caricatura | Líneas diagonales aplicadas a ventanas para imitar un efecto de brillo estilizado. Cajón de contenido > Nombre del proyecto > Materiales > M_Windows_Channel6. |  |
Cómo extender la experiencia
Tras aprender de las técnicas y procesos utilizados para crear el aspecto estético clave de la plantilla, puedes comenzar a elevar el mapa para que refleje tu propia experiencia de las Tortugas Ninja.
Utiliza la plantilla y alterna entre los estilos para imaginar cuáles elementos de jugabilidad y narrativa encajan con el filtro y la ciudad.
Aquí te presentamos unas primeras ideas:
Construye sobre la base del juego de plataformas y añade encuentros con enemigos a lo largo del nivel. Para aprender cómo agregar encuentros, consulta Encuentros con enemigos y obstáculos de las Tortugas Ninja.
Usa los recursos de sala de prensa como cinemáticas narrativas con el estilo de cómic. Para obtener más información, consulta Cómo crear cinemáticas y escenas.
Mejora el efecto con materiales de brillo estelar de cómic como cuadros de diálogo que aparecen mediante Sequencer. Para obtener más información, consulta Eventos de juego en Sequencer.
Crear un estilo soleado
Conforme sigas ahondando en la plantilla o lleves recursos a otros proyectos, comienza desde una base conceptual: ¿qué narrativa y jugabilidad encaja mejor con la escena de la ciudad y los recursos de Tortugas Ninja? Piensa en el ambiente que quieres y cómo deberían verse las luces. Considera qué partes del mapa quieres que explore el jugador.
Referencia conceptual de un mapa de estilo soleado con un encuentro de PNJ en el techo.
Con los volúmenes de posprocesamiento y las técnicas visuales adicionales, puedes tomar este concepto de una ciudad soleada y darle ese toque de vida.
Ajustes de textura de cielo
Primero, ilumina la atmósfera con la textura de cielo procedimental. Para crear cielos azules, sigue estos pasos:
En el Cajón de contenido, busca MI_ProceduralSkybox y haz doble clic para abrir el editor de materiales.
En el panel de detalles, ajusta los siguientes valores:
Nubes luz y oscuridad: RGB 1.0, 1.0, 1.0
Color de horizonte: RGB 0.0619, 0.970, 1.0
Color, encima: RGB 0.038, 0.119, 0.838
Brillo estelar: 0 (para apagar las estrellas)
Brillo de luna: 9.5 (para imitar el sol)
Como otra opción, en vez del ajuste de brillo de la luna, puedes cambiar la textura de la luna en el gráfico de materiales por tu propia imagen del sol.
Ajustes de luz
Con el cielo azul, el sol y la dirección de su luz deben coincidir. 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.
Rota la luz a la izquierda para establecer una posición más alta.
En el panel de detalles, aumenta la intensidad de luz a 6.
Ahora, para apagar las luz de ventana de distancia media y del primer plano, sigue estos pasos:
Haz clic en una ventana de distancia media.
En la barra de menús, haz clic en Seleccionar > Seleccionar todo con el mismo material.
Elimina el set de ventanas.
Repite los pasos para las ventanas del primer plano.
Eliminar las ventanas cuando no son necesarias ayuda a optimizar la escena.
Ajustes de niebla
Para el modo soleado, usa PostProcessVolume_Cartoon como base. Para ajustar el color y profundidad de la niebla, sigue estos pasos:
En el cajón de contenido, busca PP_DepthFog_Inst y luego haz doble clic en el material para abrir el editor de materiales.
En el panel de detalles, haz doble clic en la curva de color Entrada de curva.
Ajusta los valores clave de color superior:
Clave de color extrema derecha: RGB 0.022, 0.979, 0.629
Clave de color del centro: RGB 0.0, 0.140, 0.307
Clave de color extrema izquierda: RGB 0.208, 0.059, 0.117
En el panel de detalles de PP_DepthFog_Inst, ajusta la profundidad de la rampa de color con los siguientes valores:
Punto lejano de curva: 93511
Punto cercano de curva: 14887
Ajustes de posterización
Por último, añade la posterización para crear un efecto punteado similar al modo Comic-Noir.
En el panel de detalles, bajo materiales de posprocesamiento, haz clic en el símbolo más para añadir un elemento de matriz de material.
Del menú desplegable de la nueva matriz, elige Referencia de recurso, luego busca y selecciona PP_Posterize.
Para ajustar la cantidad, navega al material y haz doble clic para abrir el editor de materiales.
En el panel de parámetros, establece Cantidad de posterización a 0.05.
¡Con algunos ajustes a los materiales y la luz, hiciste que la ciudad despertara bajo un cielo azul! Ahora ve y coloca a esas tortugas en su guarida.
