Luzes 2D e sombras¶
Introdução¶
Este tutorial explica como a iluminação 2D funciona no projeto de demonstração lights and shadows. Ele começa com uma breve descrição dos recursos utilizados na demo final e depois descreve passo a passo como fazer uma cena como a demo.
Todos os recursos para este tutorial podem ser encontrados no repositório de demonstração oficial no GitHub. Sugiro que você faça o download antes de começar. Como alternativa, ele pode ser baixado do Gerenciador de Projetos. Inicie o Godot e, na barra superior, selecione "Modelos" e procure por "Demonstração de luzes e sombras 2D".
Configurar¶
Para esta demonstração, usamos quatro texturas: duas para as luzes, uma para os geradores de sombras e uma para o fundo. Incluí links para todos eles aqui se você quiser baixá-los separadamente da demonstração.
A primeira é a imagem de fundo (background.png) usada na demonstração. Você não precisa necessariamente de um plano de fundo, mas usamos um para a demonstração.
A segunda é uma imagem preta simples (caster.png) para usar como nosso lançador de sombras objeto. Para um jogo de cima para baixo, pode ser uma parede ou qualquer outro objeto que projete uma sombra.
Em seguida é a própria luz (light.png). Se você clicar no link, notará o quão grande ele é. A imagem que você usa para uma luz deve cobrir a área que você deseja que sua luz cubra. Esta imagem tem 1024x1024 pixels, então você deve usá-la para cobrir 1024x1024 pixels em seu jogo.
Por último, temos a imagem do holofote (spot.png). A demo usa um círculo para mostrar onde a luz é e usa a imagem de luz maior para mostrar o efeito da luz sobre o resto da cena.
Nós¶
- A demo usa quatro nós diferentes:
CanvasModulate é usado para escurecer a cena.
Sprites são usados para exibir as texturas para os pontos de luz, o plano de fundo e para os geradores de sombras.
Light2Ds são usados para iluminar a cena. A maneira como uma luz normalmente funciona é adicionando uma textura selecionada sobre o restante da cena para simular a iluminação. Mas pode ser usado de outras maneiras, por exemplo, mascarando partes da cena.
LightOccluder2Ds são usados para dizer ao shader quais partes da cena projetam sombras. As sombras aparecem apenas nas áreas cobertas pela Light2D e sua direção é baseada no centro da Light.
Luzes¶
Luzes cobrem toda a extensão de suas respectivas Texturas. Eles usam mistura aditiva para adicionar a cor de sua textura à cena.
Lights tem quatro Modes: Add, Sub, Mix e Mask.
Add adiciona a cor da textura de luz à cena. Ele ilumina a área sob a luz.
Sub subtrai a cor da luz da cena. Escurece a área sob a luz.
Mix mistura a cor da luz com a cena subjacente. O brilho resultante está a meio caminho entre a cor da luz e a cor por baixo.
Mask é usado para mascarar áreas que são cobertas pela luz. As áreas mascaradas são ocultadas ou reveladas com base na cor da luz.
Para a demonstração, as luzes têm dois componentes, o Light em si (que é o efeito da luz) e um Sprite blob que é uma imagem mostrando a localização de a fonte de luz. Um filho Sprite não é necessário para fazer um Light funcionar.
Sombras¶
As sombras são feitas cruzando uma Light com uma LightOccluder2D.
Por sombras padrão são desligadas. Para ligá-los clique no Light e sob a seção Shadows marque Ativado`.
Na demo, estamos usando um Sprite com uma Textura para fazer os "Shadow Casters", mas na realidade tudo o que você precisa é um par de LightOccluder2Ds. Por si só, o LightOccluder2D parece um ponto escuro e nesta demonstração o Sprite é apenas um quadrado preto.
Passo a passo¶
Agora que abordamos os fundamentos dos nós usados, agora podemos percorrer passo a passo o processo de criação de uma cena como a encontrada na demo.
Primeiro adicione um Sprite e defina sua textura para a `imagem de fundo <https://raw.githubusercontent.com/godotengine/godot-demo-projects/master/2d/lights_and_shadows/background.png> `_. Para o seu jogo, pode ser qualquer plano de fundo que você escolher. Para este estilo de sombra, é mais provável que seja uma textura de chão.
Em seguida, crie três Light2D's e defina suas texturas para a imagem de luz <https://raw.githubusercontent.com/godotengine/godot-demo-projects/master/2d/lights_and_shadows/light.png> `_. Você pode alterar sua cor na seção superior. Por padrão, as sombras são desativadas e o ``mode` é definido como add. Isso significa que cada luz adiciona sua própria cor ao que está por baixo.
Em seguida, adicione um filho Sprite a cada um dos nós Light e defina a textura Sprite para a imagem blob. Cada um deles deve ficar centralizado no nó Light. O blob é a imagem da própria luz enquanto Light mostra o efeito que a luz tem na cena. O LightOccluder2D's tratará a posição da luz como o centro do nó Light, e é por isso que queremos que o blob seja centralizado em seu pai :ref:` Luz <class_Light2D>`.
Nota
As animações na demonstração não serão abordadas aqui. Veja Introdução aos recursos de animação para informações sobre como criar animações.
Neste momento, a cena deve parecer muito clara. Isso ocorre porque todas as três luzes estão adicionando cor à cena. É por isso que a demonstração usa um CanvasModulate na cena. O CanvasModulate multiplica toda a janela de exibição por uma cor específica.
Adicione um CanvasModulate à cena e defina sua cor para rgb(70, 70, 70). Isso tornará a cena suficientemente escura para ver os efeitos das luzes de forma distinta.
Agora adicionamos os geradores de sombra.
A demo usa um Node chamado "casters" para organizar os projetadores de sombras. Adicione um Node2D à cena. Ele será usado para agrupar todos os lançadores de sombras. Dessa forma, podemos mostrar e ocultar todos ao mesmo tempo.
Cada projetor de sombras é feito de um Sprite, com um filho LightOccluder2D. Para a demonstração, o Sprite tem uma textura definida como `caster image <https://raw.githubusercontent.com/godotengine/godot-demo-projects/master/2d/lights_and_shadows/caster.png >`_ e nada mais. O filho LightOccluder2D é onde toda a mágica acontece. Em um jogo, o Sprite pode ser mais que uma caixa preta; pode ser uma imagem de qualquer objeto que esteja projetando a sombra: uma parede, um baú mágico ou qualquer outra coisa.
LightOccluder2Ds informa ao jogo qual a forma do oclusor. Eles possuem um OccluderPolygon2D, que é um contêiner para um polígono e algumas outras informações. Para esta demo, como nossa parede é um quadrado, definimos Polygon como um quadrado. As outras configurações padrão estão ok.
A primeira configuração, Closed pode ser on ou off. Um polígono fechado bloqueia a luz vinda de todas as direções. Um polígono aberto obstrui apenas a luz de uma direção.
Cull Mode permite que você selecione qual direção será selecionada. O padrão é Desativado, o que significa que o oclusor lançará uma sombra não importando de que lado a luz esteja acesa. As outras duas configurações Clockwise e Counter-Clockwise referem-se à ordem sinuosa dos vértices do polígono. A ordem sinuosa é usada para determinar qual lado da linha está dentro do polígono. Somente as linhas voltadas para fora projetam sombras.
Para ilustrar a diferença, aqui está uma imagem de LightOccluder2D com Closed definido como off no correspondente OccluderPolygon2D, de modo que as linhas do polígono podem ser vistas:
Nota
Cull Mode está definido como Disabled. Todas as três linhas projetam sombras.
Nota
Cull Mode é definido como Clockwise. Apenas as linhas superior e direita projetam sombras.
Nota
Cull Mode é definido como Counter-Clockwise. Apenas a linha de fundo projeta uma sombra. Se Fechado fosse definido como ligado, haveria uma linha vertical adicional à esquerda que projetaria uma sombra também.
Depois de adicionar o LightOccluder2Ds as sombras ainda não aparecerão. Você precisa voltar para Light2Ds e na seção Shadow definir Enable como on. Isso ativa as sombras com bordas duras, como na imagem abaixo.
Para dar às sombras uma aparência agradável e suave, definimos as variáveis filter, filter smooth e gradient length. Godot suporta Percentage Closer Filtering (PCF), que pega várias amostras do mapa de sombra em torno de um pixel e as desfoca para criar uma sombra de efeito suave. Quanto maior o número de amostras, mais suave a sombra parecerá, mas mais lenta ela será executada. É por isso que Godot fornece de 3 a 13 amostras por padrão e permite que você escolha. A demonstração usa PCF7.
Nota
Esta é uma sombra renderizada com as configurações da demonstração. gradient length é definido como 1.3, filter smooth é definido como 11.1 e filter é definido como PCF7.
Nota
filtro é definido como PCF13. Observe como a sombra fica mais larga, porque a distância entre as amostras é baseada na variável filter smooth.
Para fazer uso da filtragem, você precisa definir a variável filter smooth. Isso determina a distância entre as amostras. Se você deseja que a área suave se estenda bastante, você pode aumentar o tamanho do filter smooth. No entanto, com poucas amostras e um grande filtro suave, você pode ver linhas se formando entre as amostras.
Nota
filter smooth é definido como 30.
Os diferentes nós Light na demo usam valores diferentes para o filtro suave. Brinque com ele e veja o que você gosta.
Nota
filter smooth é definido como 0.
Por último, existe a variável comprimento do gradiente. Para algumas sombras suaves, é preferível que a sombra não comece imediatamente no objeto, pois isso produz uma borda dura. A variável de comprimento do gradiente cria um gradiente suave para iniciar a sombra para reduzir o efeito da borda rígida.
Nota
comprimento do gradiente é definido como 0.
Nota
comprimento do gradiente é definido como 10.
Você precisará testar um pouco as opções para encontrar configurações adequadas ao seu projeto. Não existe uma solução certa para todos, e é por isso que a Godot oferece tanta flexibilidade. Lembre-se de que quanto maior o filter, mais caras serão as sombras.