Estilos visuais do modelo Iniciador de Cidade

O modelo Iniciador de cidade destaca o processo e as técnicas que você pode usar para projetar a aparência de uma cidade no Unreal Editor para Fortnite (UEFN).

Essa ilha contém uma pequena parte da cidade de Nova York, iluminada e estilizada para que as Tartarugas Ninja se sintam em casa. . Jogue o modelo para ter um ponto de vista alto e baixo da cidade.

Este guia analisa as etapas que a equipe seguiu para criar o conceito e o visual do modelo. Ele abrange as seguintes áreas:

• Design de visuais com base em um conceito

• Abordagens ao layout de ativos

• Técnicas de pós-processamento

• Técnicas de estilo adicionais: skybox, iluminação e janelas personalizados

• Ideias para expandir a experiência

Confira o pós-processamento, o skybox e a iluminação personalizada e aprenda a criar visuais estilizados incríveis.

Para acessar o modelo, siga estas etapas:

1. Abra o UEFN.

2. Acesse Modelos de marca, Iniciador de Cidade.

3. Crie um novo projeto.

Estilos visuais

O modelo Iniciador de Cidade apresenta dois estilos estéticos principais: desenho animado e quadrinho. Esses estilos visuais foram projetados para combinarem com a jogabilidade e os temas do universo das Tartarugas Ninja. Ambos os estilos estão disponíveis no modelo do UEFN por meio dos volumes de pós-processamento e nas ilhas do Modo Criativo com o Pós-processamento Esses estilos não são exclusivos das ferramentas de desenvolvimento das Tartarugas Ninja. Use as técnicas no modelo para personalizar ainda mais suas ilhas ou expandir esse modelo.

Filtro de estilo de desenho animado	Filtro de estilo de quadrinho

Esses estilos foram selecionados após a revisão das experiências das Tartarugas Ninja do estilo desde desenhos animados ao estilo de animação 3D. A equipe trabalhou com a Paramount para estabelecer elementos icônicos que captam o mundo das Tartarugas Ninja. Desde a arte de conceito e outras peças de referência, a equipe percebeu elementos como cel shading, cenas nos telhados com a lua ao fundo e esquemas de cores.

Referências de conceito

A estética funciona como um elemento de design de jogo que se combina com a mecânica e a narrativa da experiência. Esses aspectos estéticos compõem a cor, a iluminação, os ativos e o layout da cena. Eles ajudam a compor a sensação da experiência para os jogadores.

Mude os estilos

No editor, você pode alternar entre os estilos usando o Organizador. No Organizador, procure "pós-processamento" para visualizar os volumes PostProcessVolume_Cartoon e PostProcessVolume_Comic.

Alternância de estilo no esconderijo do esgoto.

O estilo de desenho animado fica ativo por padrão. Para habilitar o estilo de quadrinho, siga estas etapas:

1. No Organizador, alterne o ícone de olho para desligado para PostProcessVolume_Cartoon.

2. Selecione PostProcessVolume_Comic e, no painel Detalhes, procure "blendweight".

3. Defina o valor do Peso da mesclagem para 1.

Na jogabilidade do modelo, você pode escolher o modo visual no esconderijo do esgoto nos dispositivos alternadores na parede. Alterne os estilos e explore o nível da rua e do telhado para ver os ativos das Tartarugas Ninja que criam a cidade. Use o modelo como uma base para criar sua própria experiência das Tartarugas Ninja ou leve as técnicas visuais para outro projeto.

Para aprender a ajustar ainda mais esses estilos, consulte a seção Técnicas de pós-processamento nesta página.

Design de níveis

Os filtros de desenho animado e quadrinho são estilos visuais marcantes, mas a cidade é o que de fato compõe o modelo. Os artistas distribuíram os ativos de uma forma que cria uma cidade autêntica para as Tartarugas Ninja. O uso dos ativos das Tartarugas Ninja e do Fortnite dá mais profundidade à cidade. A organização dos ativos para definir um espaço e um caminho para os jogadores viajarem é chamado de design de nível.

A cidade das Tartarugas Ninja com um céu em silhueta em segundo plano para adicionar profundidade e circundar o jogador.

Centralize a cidade

O modelo foi projetado a partir das escolhas que definem a cidade. Embora ele não seja um exemplo de jogo completo, para ajudar a projetar o layout, o modelo tem um tema de jogo de plataforma Este gênero de jogo ajuda a definir o espaço de jogo. Dentro do espaço de jogo, os artistas incluíram ativos únicos e detalhados, principalmente ativos das Tartarugas Ninja. A ideia é que os jogadores possam entrar e explorar esses ativos.

Ativos esses que dão suporte ao tema. Ao pensar no estilo, você precisa lembrar dos ativos. Eles podem ajudar ou prejudicar o visual da experiência. A organização desses ativos no nível e como um jogador navega pela cena também tem uma função importante. O modelo se utiliza de ativos adicionais como cartazes, letreiros de neon, grafite e adereços para dar personalidade ao mundo e consolidar o tema. Consulte a lista completa de ativos em Como trabalhar com ilhas das Tartarugas Ninja.

Ativos do Canal 6 no modo de estilo de quadrinho.

Com o espaço de jogo definido, a equipe tem uma ideia de como distribuir o resto do mapa para preencher o espaço.

O mapa consiste de um primeiro plano, um plano intermediário e um segundo plano. Os prédios e as janelas ficam mais simples quanto mais longe estão do centro. A linha do céu funciona como pano de fundo para o mapa, envolvendo o jogador na cidade. Para o esconderijo do esgoto, ativos altamente detalhados foram colocados porque a intenção é que o jogador explore todas as partes da área.

Layout de ativos no nível da cidade	Layout de ativos no esconderijo do esgoto

Por fim, elementos de destaque como a lua, as janelas, a iluminação e um filtro visual são usados para capturar a sensação da vida noturna da cidade.

Técnicas de pós-processamento

O que dá ênfase à sensação da cidade são as várias técnicas usadas para criar os estilos visuais. Os volumes de pós-processamento são a funcionalidade mais proeminente usada para criar os estilos.

O pós-processamento é uma sobreposição visual que afeta a estética da sua ilha como um todo ou partes selecionadas dela. Cada filtro tem configurações de pós-processamento padrão ajustadas, juntamente com materiais personalizados que compõem o visual. Consulte mais informações sobre o pós-processamento e suas configurações padrão em Introdução ao pós-processamento.

Filtro de pós-processamento de desenho animado

Neblina de profundidade

O modelo usa um efeito de neblina atmosférica personalizada por meio de materiais. A neblina adiciona cor e ajuda a estabelecer a profundidade da cidade. Você pode usar as configurações de materiais para controlar artisticamente as silhuetas dos prédios e a cor da cena.

Consulte mais informações sobre os controles para fazer ajustes na seção Material de neblina personalizada nesta página.

O céu da cidade em primeiro plano	O céu da cidade afastado

Cel shader

O material de cel shader achata a iluminação e introduz um pouco de posterização e limites de luz. Ajudando a cena a ter mais aparência de desenho animado.

No modelo, o efeito é mascarado no primeiro plano para impedir que a distância pareça grande demais. Como os desenhos animados e os animes de referência geralmente têm segundos planos pintados mais suavemente, mascarar mantém o visual.

Valor do cel shader 0	Valor do cel shader 1

Contornos

Os contornos ajudam a estilizar ainda mais a cena para criar a aparência de desenho animado. O material inclui opções para controlar a espessura, a cor e a opacidade por meio da profundidade. Com essas configurações, os artistas aumentaram as linhas no primeiro plano e criaram contornos complementares para os prédios conforme eles recuam ao longe.

Valor do contorno 0

Valor do contorno 1

Filtro de pós-processamento de quadrinho

O filtro de quadrinho (noir) usa algumas das configurações de pós-processamento padrão e materiais de cel shader e contorno semelhantes ao filtro de desenho animado. O material de contorno foi ajustado para complementar a escala de cinza tonal. Os materiais personalizados únicos do filtro incluem posterização, tom de quadrinho e um quadro. O resultado é um estilo altamente gráfico que lembra um quadrinho ou uma graphic novel.

Quadro e tom de quadrinho

O material de tom de quadrinho dessatura e aplica limites de luminância para dar à cena uma escala tonal impressa. Depois, o material de quadro é aplicado para completar o visual.

Tom de quadrinho e valor do quadro 0	Tom de quadrinho e valor do quadro 1

Posterização

Para deixar o efeito de quadrinho ainda mais convincente, a imagem é posterizada com faixas sólidas de cinza convertidas para vários tamanhos e pontos. Quanto mais escuro o tom, maior o ponto, até que eles se mesclem para formar uma cor preta pura. Depois, os pontos são mesclados em uma imagem de escala de cinza até o valor desejado. O material é usado com 25% de seu valor para reduzir o cansaço visual durante o jogo.

Valor de posterização 0	Valor de posterização 1

Edição de materiais de pós-processamento

Os materiais orientam o efeito de pós-processamento que você vê nos dois modos estilizados. Você pode explorar a construção de cada material e fazer os ajustes que combinam com seu projeto. Pode também trocar os materiais nos volumes de pós-processamento para alterar rapidamente o estilo.

Para visualizar os materiais personalizados para cada volume de pós-processamento:

1. No Organizador, clique no volume de pós-processamento.

2. Acesse o painel Detalhes > Funcionalidades de renderização > Materiais de pós-processamento > Matriz.

Materiais de pós-processamento de desenho animado	Materiais de pós-processamento de quadrinho

Você pode ajustar o valor de cada matriz entre 0 e 1 para examinar o efeito de cada material. Para abrir o local de cada material, clique no ícone de pasta. Em seguida, clique no material que deseja examinar para abrir o Editor de Material. O Editor de Material tem algumas configurações artísticas no painel Detalhes, enquanto outras têm parâmetros no gráfico de material. As configurações artísticas são parâmetros do gráfico de material expostos como variáveis globais. Consulte mais informações sobre materiais, incluindo o editor, suas funções e expressões em Nós e configurações de materiais.

Material de neblina personalizado

Um exemplo de configuração artística em um material são os parâmetros configurados para o material de neblina de profundidade. Os valores de cor da neblina são definidos por rampas de curva, que oferecem uma maneira flexível para ajustar os valores da neblina precisamente em toda a profundidade da cena. Esse método dá maior controle para criar um visual estilizado em relação ao sistema de neblina atmosférica integrado do editor.

Os controles para o material de neblina de profundidade.

O material consiste dos seguintes parâmetros principais, projetados para que os artistas façam ajustes rapidamente. Você pode acessar esses valores no painel Detalhes do material, ou acessar o gráfico de material e ajustar os valores padrão.

O material de neblina é um exemplo de como você pode abrir cada material e fazer ajustes neles. Os outros materiais têm os mesmos princípios. Para praticar a criação de um novo material de pós-processamento e saber mais sobre o gráfico de material, consulte Como usar um material de pós-processamento.

Técnicas visuais adicionais

Esta seção aborda algumas técnicas usadas com a iluminação e as janelas para compor o ambiente e a estilização.

Como ajustar o skybox procedural

Outra técnica baseada em materiais é o skybox, que é diferente do volume de pós-processamento. Os dois filtros usam o skybox procedural personalizado para criar uma atmosfera estilizada. O material é anexado a uma esfera de malha estática que engloba o mapa. Os parâmetros artísticos são expostos no painel Detalhes do material para ajustes rápidos.

Você pode acessar a ferramenta Skybox de uma das seguintes maneiras:

• Organizador > SkySphere > MI_ProceduralSkybox

• Gaveta de Conteúdo > Nome do projeto > Materiais > MI_ProceduralSkybox

Clique duas vezes no material para abrir o Editor de Material. A categoria Grupos de parâmetros contém as configurações para ajustar a estilização do céu, como descrito na tabela a seguir. Essa categoria inclui Valores de parâmetro de alternância de estática global para alternar a nitidez do horizonte e da lua.

Os controles do material da skybox.

Parâmetro do skybox	Descrição	Exemplo
Balores de parâmetros escalares globais	Ajusta os atributos da lua e da atmosfera. Os controles oferecem aos artistas os meios para estilizar a lua como uma peça central. Essa técnica preenche o conceito das Tartarugas Ninja correndo pelos telhados dos prédios em uma silhueta com a lua ao fundo.
Valores dos parâmetros do vetor global	Ajusta a cor dos atributos do céu. O skybox personalizado dá mais controle sobre o gradiente de cores do céu e das diferenças de mesclagem. Esse controle de cor é essencial para melhorar os valores da linha do céu com os arranha-céus ao fundo. Os controles de cor extra foram projetados para alternar o céu cuidadosamente além dos valores realistas para se alinharem mais com a paleta de cores estilizada.
Estrelas	Ajusta a transformação, a cor, o ladrilhamento e o brilho das estrelas.
Nuvens	Ajusta o mapa de texturas das nuvens, a cobertura das nuvens, a suavidade da borda, as cores claras e escuras, a luz de contorno, a opacidade e a direção de movimento das nuvens. Permite que o artista inclua um céu mais dinâmico com maior interesse visual.

Você pode examinar mais detalhadamente o material no gráfico de material. Para abrir o gráfico de material, na barra de ferramentas do Editor de Material, clique em Hierarquia > M_ProceduralSkybox. O gráfico é aberto com os grupos de nós categorizados em caixas de comentários para mostrar quais parâmetros afetam. Você pode ajustar os nós para redefinir os parâmetros.

O gráfico de material para o skybox procedural.

Iluminação personalizada

A iluminação para o modelo é integrada com os volumes de pós-processamento para garantir a aplicação estética correta. A iluminação ajuda a criar o clima e direcionar os jogadores. Ela também ajuda a definir os atributos dos filtros de pós-processamento. As luzes gerais foram colocadas para iluminar a cidade, depois luzes específicas foram adicionadas para dar destaque aos prédios e adereços.

Iluminação do meio

A iluminação de ambiente é o processo de colocar com precisão luzes que devem criar uma sensação específica para a experiência.

Durante a fase de conceito, os artistas revisam o material de referência (geralmente chamados de "mood boards") para estabelecer a direção da emoção e da iluminação. Esse processo é usado em outras formas de história como filmes com atores reais, animações e peças de teatro.

A maior parte da iluminação de ambiente na cena é composta por um dos seguintes:

• Luz do céu: orienta a cor ambiente da cena e controla a iluminação mais escura nas sombras.

• Luz direcional: controla a posição da lua e a iluminação produzida pela lua.

• Luzes pontuais: colocadas para adicionar pontos de cor de desenho animado em áreas que, de outra forma, seriam menos interessantes. A configuração Especular fica desabilitada para remover pontos brilhantes criados por essas luzes.

• Componentes de luz anexados a um ator.

• Materiais emissores.

As luzes do meio também ajudam a manter a qualidade visual quando você otimiza seu projeto. A estilização das luzes e dos ativos mantém o interesse visual em aparelhos mais básicos.

Estilo clássico do Fornite BR	Estilo de desenho animado	Estilo de quadrinho

Para saber mais sobre práticas de iluminação artística, consulte Iluminação e cor.

Janelas

Quanto mais você se afasta do centro da cidade, mais as janelas da cena se simplificam. Como observado no design de nível, a simplificação adiciona profundidade e ajuda a otimizar a cena. As janelas também usam materiais para emitir luz e dar sustentação ao visual estilizado. A tabela abaixo descreve as várias técnicas usadas para as janelas.

Técnica	Descrição	Exemplo
Cubemap de interior	Um método de material para dar a aparência de um espaço 3D. O método é usado para preencher os prédios que os jogadores não devem entrar, mas podem ver de passagem. Você pode acessar o material em Gaveta de Conteúdo > Nome do projeto > Materiais > M_Windows_Interior.
Máscara de janela	Material que aleatoriza as posições da janela para dar mais variedade aos prédios em segundo plano. Você pode acessar o material em Gaveta de Conteúdo > Nome do projeto > Materiais > M_WindowMask.
Valor aleatório da posição no mundo	O visual de um espaço, iluminável ou não iluminável, é determinado pela posição da janela no mundo. O material de cada janela tem um deslocamento de posição no mundo aplicado à cor do material. O deslocamento cria um fator de brilho aleatório que dá mais vida à cidade. Esse método reduz o uso de materiais únicos e memória.
Material de brilho de desenho animado	Linhas diagonais aplicadas às janelas para simular um efeito de brilho estilizado. Gaveta de Conteúdo > Nome do projeto > Materiais > M_Windows_Channel6.

Como experiência a experiência

Depois de aprender as abordagens e as técnicas usadas para criar os elementos estéticos principais do modelo, você pode começar a expandir o mapa para a sua própria experiência do universo das Tartarugas Ninja.

Percorra o modelo e alterne entre os estilos para imaginar que elementos de jogabilidade e narrativas combinam com o filtro e a cidade.

Apresentamos aqui algumas ideias para você começar:

• Expanda a base do jogo de plataforma e adicione encontros com inimigos por ela. Para aprender a adicionar encontros, consulte Encontros com inimigos e obstáculos das Tartarugas Ninja.

• Use os ativos da sala da redação como cenas narrativas com o estilo de quadrinho. Para saber mais, consulte Como criar cinematografias e cenas.

• Aprimore a cena com materiais de explosão estelar de quadrinho como caixas de diálogo que surgem usando o Sequencer. Para saber mais, acesse Eventos de Jogabilidade no Sequencer.

Como criar um estilo ensolarado

Conforme você expande o modelo ou leva ativos para outros projetos, comece de uma base conceitual da narrativa e da jogabilidade que combinam com a cena da cidade e o ativos das Tartarugas Ninja. Pense no clima que você quer criar e como a iluminação ficaria. Considere as partes do mapa que quer que o jogador explore.

A referência do conceito para um mapa de estilo ensolarado com encontro com PNJs no telhado.

Com os volumes de pós-processamento e as técnicas visuais adicionais, você pode usar o conceito de uma cidade com estilo ensolarado e dar vida a ela.

Ajuste do skybox

Primeiro, ilumine a atmosfera com o skybox procedural. Para criar céus azuis, siga estas etapas:

1. Na Gaveta de Conteúdo, procure MI_ProceduralSkybox e clique duas vezes nesse elemento para abrir o Editor de Material.

2. No painel Detalhes, ajuste os seguintes valores:

   1. Nuvem escura e clara: RGB 1,0, 1,0, 1,0

   2. Cor do Horizonte: RGB 0,0619, 0,970, 1,0

   3. Cor superior: RGB 0,038, 0,119, 0,838

   4. Brilho das estrelas: 0 (para desativar as estrelas)

   5. Brilho da lua: 9,5 (para simular o sol)

Alternativamente, em vez do ajuste do brilho da lua, você pode trocar a textura da lua no gráfico de material por uma imagem sua do sol.

Ajustes de luz

Com o céu azul, o sol e a direção de sua luz devem combinar melhor. Para ajustar a posição do sol e a direção da luz, siga estas etapas:

1. No Organizador, procure e selecione DirectionalLight_Index1.

2. Gire a luz para a esquerda para definir uma posição mais alta.

3. No painel Detalhes, aumente a intensidade da luz para 6.

A seguir, para desligar a janela de plano intermediário e primeiro plano, siga estas etapas:

1. Clique em uma janela do plano intermediário.

2. Na barra de menus, clique Selecionar > Selecionar tudo com o mesmo material.

3. Exclua o conjunto de janelas.

4. Repita as etapas para as janelas do primeiro plano.

Remover as janelas quando elas não são necessárias ajuda a otimizar a cena.

Ajustes da neblina

Para o modo ensolarado, use PostProcessVolume_Cartoon como base. Para ajustar a profundidade e a cor da neblina, siga estas etapas:

1. Na Gaveta de Conteúdo, procure PP_DepthFog_Inst e, em seguida, clique duas vezes no material para abrir o Editor de Material.

2. No painel Detalhes, clique duas vezes na curva de cor Entrada de curva.

3. Ajuste os valores do código de cores do topo:

   1. Código de cores mais à direita: RGB 0,022, 0,979, 0,629

   2. Código de cores no centro: RGB 0,0, 0,140, 0,307

   3. Código de cores mais à esquerda: RGB 0,208, 0,059, 0,117

No painel Detalhes de PP_DepthFog_Inst, ajuste a profundidade da rampa de cores com os seguintes valores:

• Ponto distante da curva: 93511

• Ponto próximo da curva: 14887

Ajustes de posterização

Por fim, adicione a posterização para criar um efeito pontilhado semelhante ao modo quadrinho noir.

1. No painel Detalhes, sob "Materiais de pós-processamento", adicione um elemento da matriz de materiais clicando no ícone de mais.

2. No menu suspenso da nova matriz, escolha Referência de ativo, em seguida, procure PP_Posterize e selecione-o.

3. Para ajustar o valor, navegue até o material e clique duas vezes nele para abrir o Editor de Material.

4. No painel Parâmetros, defina Valor de posterização como 0,05.

Com alguns ajustes aos materiais e às luzes você acrescentou um céu azul à cidade! Agora leve essas Tartarugas para o seu esconderijo, rápido.