Mapas em Parallax #02 - Iluminação

[Opalablue]

Mapeamento em Parallax!
#02 - Iluminação

Essa é a continuação do primeiro tutorial que eu postei. Neste, eu estarei ensinando como fazer iluminação pra dia, noite e tarde. Na realidade, é tudo a mesma coisa. O que muda é a direção das luzes, a quantidade de focos de luz e as cores usadas.
Deixo claro de antemão que sou fã de cenários coloridos e um tanto exagerados, portanto, trabalhe para encontrar o estilo que ache mais agradável ^^

Previsão do próximo tutorial: 31/05

Nível de habilidade: Intermediário - Avançado
Engine: RPG Maker VX Ace

[box2 class=titlebg title=Índice de Tutoriais]
#01 - Exterior
#02 - Iluminação
#03 - Configuração de Mapas (em breve)
#04 - Ambientação de Mapas (em breve)[/box2]

[box2 class=titlebg title=Noite]

Spoiler

1. Abra o mapa que nós começamos a montar na aula 1. Crie uma nova camada e pinte ela de preto azulado, mudando a opacidade para algo entre 140 - 100
[hs width=300 height=300]https://i.imgur.com/2TbeqK6.png[/hs]

2.Com uma borracha suave (hardness 0%) de tamanho 125, você apaga (na camada azul) a área onde está(ão) o(s) ponto(s) de luz. No meu caso, há uma lamparina
[hs width=300 height=300]https://i.imgur.com/g5yklge.png[/hs]

3. Crie uma nova camada para a Luz em aditivo. Dê uma batidinha em cima da lamparina com um pincel suave tamanho 125, na cor amarela.
[hs width=300 height=300]https://i.imgur.com/D9ozQhS.png[/hs]

4. Com um pincel suave tamanho 100, dê uma batidinha no centro da luz.
[hs width=300 height=300]https://i.imgur.com/U1hp3Bn.png[/hs]

5. Mude a opacidade da camada para um valor em torno de 150.
[hs width=300 height=300]https://i.imgur.com/fG7txTB.png[/hs]

6. Apague as sombras que já vem no tileset
[hs width=300 height=300]https://i.imgur.com/rmCwCJA.png[/hs]

7. Crie uma nova camada pra sombras.


8. Com um pincel preto, comece a sombrear. Lembre-se de posicionar a direção da sombra de acordo com as fontes de luz.
Eu também faço sombra nas partes mais fundas da água.
[hs width=300 height=300]https://i.imgur.com/tOyGpQp.png[/hs]

9. Esfume/desfoque as sombras.
[hs width=300 height=300]https://i.imgur.com/nWrJtf7.png[/hs]

10. Reduza a opacidade pra algo em torno de 150-170.
[hs width=300 height=300]https://i.imgur.com/Pjn4ho5.png[/hs]

11. Faça uma camada acima da camada das sombras. Ela é temporária.

12. Pinte a tela toda de preto e, com uma borracha suave de tamanho grande, apague a partir do centro da luz. Ou use uma ferramenta de vinheta, se disponível.
[hs width=300 height=300]https://i.imgur.com/8BjGY4Q.png[/hs]

13. Reduza a opacidade da vinheta (se achar necessário) e mescle a camada dela com a das sombras.
[hs width=300 height=300]https://i.imgur.com/DPyWKo0.png[/hs]

14. Nessa aula, eu não vou ensinar a criar reflexo em água animada. Apenas o simples.
Crie uma nova camada acima da camada da luz. Ela será temporária.
Para fazer o reflexo da luz na água, use um pincel suave nas cores amarelo, vermelho e branco. O roxo eu usei para fazer o reflexo do céu noturno.
OBS: Não saia espalhando reflexo pela água toda! Se concentre apenas no ponto onde a luz é mais forte.
[hs width=300 height=300]https://i.imgur.com/H5WTWR7.png[/hs]

15. Use uma ferramenta de distorção para criar esse efeito. Eu não sei quais tem disponível no Photoshop e no Gimp, mas no PaintDotNet, eu usei a ferramenta de distorção em bolhas.
[hs width=300 height=300]https://i.imgur.com/t9LxUaU.png[/hs]

16.Reduza a opacidade da camada, mas não muito. Se achar necessário, use um pincel suave para apagar os reflexos em excesso.
[hs width=300 height=300]https://i.imgur.com/R8zf5Uj.png[/hs]

17. Mescle com a camada da luz.
[hs width=300 height=300]https://i.imgur.com/JHL6jcN.png[/hs]

18. Faça os acabamentos como achar necessário. Eu acentuei algumas sombras e apaguei um pouco perto dos reflexos onde está a camada preto azulada.
[hs width=300 height=300]https://i.imgur.com/E2P6uAY.png[/hs]

[close]

[/box2]

[box2 class=titlebg title=Tarde e Dia]

Spoiler

1. Abra o mapa que começamos a montar na aula 01. Crie uma nova camada de cor laranja com opacidade de 70.
[hs width=300 height=300]https://i.imgur.com/aAgFSIh.png[/hs]

2. Crie uma nova camada para as sombras. Com um pincel preto, desenhe as mesmas, levando em consideração a direção do ponto de luz principal. Neste caso, é o sol, que está se pondo ao oeste.
Obs: Essa camada DEVE ficar acima da camada laranja.
[hs width=300 height=300]https://i.imgur.com/orQ9e71.png[/hs]

3. Use um blur ou desfoque nas sombras.
[hs width=300 height=300]https://i.imgur.com/OiApNFn.png[/hs]

4. Reduza a opacidade da camada pra um valor entre 150 - 200.
[hs width=300 height=300]https://i.imgur.com/ktJW0vS.png[/hs]

5. Crie uma camada temporária acima da camada da sombra. Na direção oposta da luz, você fará uma sombra.
[hs width=300 height=300]https://i.imgur.com/HRwovgT.png[/hs]

6. Reduza a opacidade dessa camada temporária e a mescle com a de sombras.
[hs width=300 height=300]https://i.imgur.com/CiVZ7VK.png[/hs]

7. Crie uma camada de luz. Vamos traçar os raios do Sol, que virão da esquerda (já que ele está se pondo à oeste). Eu usei as cores laranja e vermelho e o tamanho 125.
[hs width=300 height=300]https://i.imgur.com/ME3R9Vk.png[/hs]

8. Mude a camada para aditivo e mude a opacidade a gosto. Não exagere muito nos raios, ou o jogador não vai conseguir ver nada falo por experiência.
[hs width=300 height=300]https://i.imgur.com/kzJxbK9.png[/hs]

9. Vou ensinar a fazer o reflexo na água, mas neste caso, ela não é animada. Crie uma camada temporária abaixo da camada da luz.
Com um pincel suave e as cores laranja, amarelo e branco, pinte os locais onde ficará os reflexos. Reparem que eles formam uma trilha gradiente pelo rio, pois a parte leste está mais escura.
[hs width=300 height=300]https://i.imgur.com/Ll4fZsB.png[/hs]

10. Use uma ferramenta de distorção para criar um efeito de ondas. No PaintDotNet, eu utilizei o efeito de distorção bolha.
[hs width=300 height=300]https://i.imgur.com/Ec1zjm7.png[/hs]

11. Reduza a opacidade e mescle com a camada de luz.
[hs width=300 height=300]https://i.imgur.com/X7E2zjs.png[/hs]

12. Faça os acabamentos necessários. Neste caso, eu reduzi um pouco as luzes e acentuei algumas sombras.
[hs width=300 height=300]https://i.imgur.com/wWI46D2.png[/hs]

>Para mapa de dia<

É basicamente a mesma coisa, o que muda são as cores e a direção da luz. Nesta composição, eu tomei como ponto de referência o Sol, situado mais ao leste, quase acima do cenário. A opacidade da camada laranja é por volta de 30. Nos reflexos da água, além de serem mais espalhados ao longo do rio, eles incorporam a cor azul em sua composição.
[hs width=300 height=300]https://i.imgur.com/rpyDxLl.png[/hs]

[close]

[/box2]

[box2 class=titlebg title=Resultados Finais]

Spoiler

[hs width=150 height=150]https://i.imgur.com/rpyDxLl.png[/hs][hs width=150 height=150]https://i.imgur.com/wWI46D2.png[/hs][hs width=150 height=150]https://i.imgur.com/E2P6uAY.png[/hs]

[close]

[/box2]

[box2 class=titlebg title=Dicas]

• Não tenha medo de brincar com as cores! Teste diferentes combinações e veja a composição que você consegue criar.
• Sombras são mais do que apenas pincel preto com opacidade baixa. Tente fazer sombras com outras cores! Experimente roxo e azul escuro, por exemplo. Pode cair muito bem em alguns cenários.
• Tente manter um número reduzido de camadas.

[/box2]

[box2 class=titlebg title=Materiais Usados]
Aqui, você encontra os arquivos em pdn para análise.
[/box2]

[box2 class=titlebg title=Finalizando!]
Espero que tenha ajudado em alguma coisa XD
No próximo tutorial, vou reduzir as camadas, ensinar a configurar o mapa no VX Ace, e criar a cena (que foi elaborada no conceito lá do primeiro tutorial).
Até lá![/box2]

[drakysm]

Olá, Lon... digo, Opala!

Belos tutoriais, bem úteis e explicativos.

Por mais que o meu projeto não seja no RM, este tutorial também me ajudará bastante (veio em um ótimo momento).

Estou esperando para ver os próximos, creio que servirá de ajuda para muitos outros membros aqui no fórum.

P.S: Tu manda bem mesmo!

[NightWalker]

O tutorial quanto a explicação de métodos e ferramentas está ótimo.
Achei o resultado do "de dia" um pouco exagerado nas luzes.
O "de tarde" está com sombras muito marcadas fazendo parecer manchas na tela e não representando muito bem a função delas.
O "de noite" está ótimo, bem bacana.

[Nuno]

Muito bom o resultado!
Apesar de ser focado em VX Ace, a ideia já dá um ótimo direcionamento!
Aguardando os próximos tutoriais!