Estilos visuais iniciais de cidades

O modelo Iniciante em Cidades destaca o processo e as técnicas que você pode usar para designar o visual de uma cidade no Unreal Editor para Fortnite (UEFN).

Esta ilha contém um pequeno pedaço da cidade de Nova Iorque, iluminada e estilizada para fazer com que as Tartaformas Fortnite (TMN) se sintam em casa! Jogue o modelo para experimentar um ponto de vista baixo e alto da cidade.

Este guia analisa as etapas realizadas pela equipe para definir o conceito e criar o visual do modelo. Cobre as seguintes áreas:

• Design de visuais a partir de um conceito

• Abordagens para layout de ativos

• Técnicas de pós-processar

• 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.

Este não é um tutorial de jogabilidade. O mapa não inclui barreiras no nível. Você pode adicioná-los conforme cria para sua própria experiência com ativos como o dispositivo Barreira. Para saber como criar um modo de jogo de fliperama, incluindo uma câmera de rolagem lateral e uma interface de usuário (IU) personalizada, consulte o Modelo de fliperama para TMnt.

Para acessar o modelo, siga estas etapas:

1. Abra o UEFN.

2. Acesse Modelos de marca > Iniciador de Cidade.

3. Crie um novo projeto.

Caso não veja o projeto nos modelos de marca, certifique-se de que iniciou uma sessão corretamente. Para obter mais informações, consulte Regras para marcas TMNT e criadores.

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. Os dois estilos estão disponíveis no modelo UEFN por meio dos volumes de pós-processamento e nas ilhas do Modo Criativo com o dispositivo de pós-processamento. Esses estilos não são exclusivos das ferramentas de criação do TMNT. Use as técnicas no modelo para personalizar ainda mais suas ilhas ou expandir esse modelo.

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 capturam o mundo das Tartarugas Ninja. Na arte de conceito e em outras peças de referência, a equipe notou elementos como sombreamento de células, cenas em telhados com vista para a lua e esquemas de cores.

Referências de conceitos

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 está ativo por padrão. Para habilitar o estilo de história em quadrinhos, siga estas etapas:

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

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

3. Defina o valor do Blend Weight (Peso de mescla) para 1.

Antes de executar o modelo, certifique-se de reverter as alterações acima.

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 saber como ajustar ainda mais esses estilos, consulte a seção Técnicas de pós-processamento nesta página.

Design de nível

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 idealizado a partir de escolhas que definem a cidade. Embora o Template não seja um exemplo de jogo completo, para ajudar a design o layout, o modelo tem um plataforma clássico. Esse gênero de jogo ajuda a definir o espaço jogável. Dentro do espaço jogável, os artistas colocaram ativos exclusivos e detalhados, principalmente ativos de TMRT. 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 break 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 solidificar o tema. Consulte a lista completa de ativos em: Como trabalhar com ilhas das Tartarugas Ninja.

Os ativos do Canal 6 no modo de estilo 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.

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 enfatiza a 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 de destaque 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

Névoa de profundidade

O modelo usa um efeito de neblina atmosférica personalizado nos 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.

Para saber mais sobre os controles para fazer ajustes, consulte a seção Material de Névoa Personalizado na página.

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.

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 até a profundidade. Com essas configurações, os artistas reforçaram as linhas em primeiro plano e criaram contornos complementares para as construções conforme elas se afastam.

Filtro de pós-processamento em quadrinhos

O filtro Quadrinhos (Noir) usa algumas configurações padrão de pós-processamento e shader de cél semelhante e materiais de contorno como o filtro Desenho animado. O material do contorno foi ajustado para complementar a faixa tonal da escala de cinza. Os materiais personalizados exclusivos do filtro incluem cartazização, tom de quadrinhos e um quadro. O resultado é um estilo altamente gráfico que lembra uma história em quadrinhos ou história em quadrinhos.

Tom e quadro de quadrinhos

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.

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 um preto puro. 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.

Como editar os materiais de pós-processamento

Os materiais conduzem 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 se encaixam no seu projeto. Você também pode 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.

Você pode ajustar cada valor de matriz entre 0 e 1 para examinar o efeito de cada material. Para abrir a localização 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 de artista no painel Detalhes, enquanto outras têm parâmetros no Gráfico de Material. As configurações compatíveis com o artista são parâmetros do gráfico de material que são expostos como variáveis públicas. Para saber mais sobre materiais, incluindo o editor, funções e expressões, consulte Nós e configurações de materiais.

Material de neblina personalizada

Um exemplo de configurações de artista em um material são os parâmetros set para o material de fog de profundidade. Os valores de cor da neblina são definidos por rampas de curvas, que fornecem uma maneira flexível de ajustar os valores da neblina com precisão na 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.

Controles para o material de fog de profundidade.

O material consiste nos 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 aprender sobre o gráfico de material, consulte Usando um material de pós-processamento.

Técnicas visuais adicionais

Esta seção aborda algumas técnicas usadas com iluminação e janelas para aprimorar ainda mais o clima 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 opções:

• 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 Global Static Switch Parameter Values (Valores de parâmetro de alternância de estática global) para alternar a nitidez do horizonte e da lua.

Controles para o material de skybox.

Com a composição de céu e iluminação personalizada, o Gerenciador de hora do dia do mundo fica desligado nas configurações do mundo.

Você pode examinar mais detalhadamente o material no Gráfico de materiais. 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 grupos de nós categorizados em caixas de comentários para mostrar quais parâmetros eles 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 do modelo é integrada aos volumes de pós-processamento para garantir a estética adequada. A iluminação ajuda a setar o clima e a orientar os jogadores. 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 de ambiente

A iluminação ambiente é o processo de posicionar com precisão luzes que se destinam a setar uma sensação específica na experiência.

Durante a fase de conceptualização, 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: conduz 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 da 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.

• Os materiais emissivos.

As luzes ambientais 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 nos dispositivos de baixo custo.

Para saber mais sobre práticas artísticas de luz, 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 compõem o visual estilizado. A tabela abaixo descreve as várias técnicas usadas para as janelas.

Um dispositivo Sequenciador do Dia é usado para deixar as luzes baseadas em material do prédio do segundo plano desligadas.

Neste exemplo, a cor e o estilo dessas luzes de materiais não se adequaram à estética da cidade, então, tomou-se a decisão de desligá-las e criar luzes de janela personalizadas.

Como expandir 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 quais elementos de jogabilidade e narrativas se encaixam no filtro e na 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 o efeito com materiais de explosão estelar de quadrinhos como caixas de diálogo que aparecem usando o Sequencer. Para saber mais, consulte 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 setar e como a iluminação ficaria. Considere as partes do mapa que quer que o jogador explore.

Referência de conceito para um mapa de estilo ensolarado com encontro com NPCs no telhado.

Com os volumes de pós-processamento e técnicas visuais adicionais, você poderá dar vida a esse conceito de uma cidade de estilo ensolarada.

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 Estelar: 0 (para apagar as estrelas).

   5. Brilho da Lua: 9,5 (para imitar 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 setar uma posição mais alta.

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

Em seguida, para apagar as luzes da janela do meio e do 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 em primeiro plano.

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

Ajustes de 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, depois, 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 da chroma key superior:

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

   2. Chave de cor do meio: RGB 0.0, 0.140, 0.307

   3. Chave de cor da extrema 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 mais distante da curva: 93511

• Ponto próximo da curva: 14887

Ajustes de posterização

Por fim, adicione a cartazização para criar um efeito pontilhado semelhante ao modo Comic-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, depois procure e selecione PP_Posterize.

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

4. No painel Parâmetros, defina Posterize Amount (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.