🤔 Para Refletir :
"Games do sonhos ficam ali, nos sonhos, faca o game do hoje"
- codingkitsune

Iluminação/Sombreamento avançado do Lyca!

Lycanimus Masculino

Cidadão
Membro
Membro
Juntou-se
17 de Janeiro de 2016
Postagens
85
Bravecoins
260
[box class=black title=Intro] Ultimamente eu percebi que muitas pessoas tem dificuldades em fazer uma boa iluminação e também definir qual o nível de sombreamento adequado para o seu mapa, com esse tutorial eu vou estar ensinando a vocês o meu modo de fazer e espero que tire essas dúvidas que muitos me perguntam, bom, então vamos la![/box]​

[box class=black title=Requisitos] 
- Gimp ou Photoshop (Eu utilizei o Gimp no tutorial).
- Saber utilizar os editores acima para fazer seus mapas via Parallax.
[/box]​

[box class=black title=Iniciando]
Para esse tutorial eu vou utilizar uma parte de um dos meus mapas já prontos, apenas sem o efeito de luz e sombra, que é o que nós vamos fazer passo a passo aqui.
A parte do mapa que eu estarei utilizando então é esse:
T0qAYjM.png


Note que nessa parte do mapa há 3 pontos de luz das tochas, portanto são em cima desses pontos que nós vamos trabalhar.

[/box] ​


[box class=black title=Sombreamento]
Já com o Gimp aberto e após ter finalizado o seu mapa com todas as camadas, crie uma camada acima de todas as outras e nomeie ela para Sombra, como na imagem a seguir:

oFSkApl.png


Após criar a camada Sombra, vá no seu Pincel e selecione o Hardness 050 que é um dos pinceis padrão do Gimp, como na imagem a seguir:

P6VSRgf.png


Agora aumente o tamanho do pincel para 100000 só para pegar a tela inteira e lembre-se de estar na camada Sombra, como na imagem:

F1fVKUl.png


Agora com o pincel selecionado coloque ele bem no centro da tela e dê 1 clique apenas, isso vai fazer com que ele pinte a tela toda de preto, ual heim! "Mas Lyca não era mais fácil pintar com o balde de tinta?" Sim era, mas isso é para você já ir se acostumando a usar os pinceis e saber localizar eles pelo nome, pois ainda vamos trabalhar bastante com eles.

Ok, se você fez tudo certo até agora a sua tela deve estar toda preta, como na imagem:

FprAmv3.png


Agora com a sua tela assim, vá na camada Sombra e diminua a opacidade para algo em torno de 25 a 40, nessa parte é que você vai definir o nível de sombreamento do seu mapa, o ideal é você deixar entre 25 a 40 no máximo, evite ultrapassar disso, pois se não você você vai ter problemas com o seu mapa, tanto para enxerga-lo, como para quando formos criar a iluminação, no meu mapa eu deixei em 30, e ficou assim:

uEdhGPo.png


Pronto, você definiu o quão escuro o seu mapa vai ser, agora você precisa ver de onde vem a luz do seu mapa, no meu por exemplo, a luz vem das 3 tochas, portanto eu preciso tirar a sombra ao redor das tochas, pois é ai que vamos criar a iluminação mais para frente e não queremos que seja escuro não é mesmo?
Para isso eu vou selecionar a Borracha e o pincel Hardeness 050 e vou diminuir a opacidade dele para 50 e o tamanho deixe em torno de 110 +-, como na imagem:

eDzG5DF.png


Agora com o pincel vá nos pontos de luz do seu mapa e na camada Sombra e comece a apagar a sombra em volta dos pontos de luz do seu mapa, no meu caso nas tochas, ficando como nas imagens a seguir:

Antes  de passar a Borracha
BVbuTWX.png

Depois de passar a Borracha
DWivriW.png


Assim finalizamos a parte de sombreamento do mapa e podemos dar finalmente inicio a iluminação!
[/box] ​


[box class=black title=Iluminacao]   
Vamos dar início a iluminação agora, para isso, crie uma nova camada, acima da camada Sombra e nomeie ela para Luz 1, como na imagem a seguir:

6ZwgCki.png


Vá agora no seus pinceis e selecione o pincel Hardeness 075, como na imagem:

geFUu6n.png


Com o pincel, mude a cor dele para uma cor amarela ou alaranjada, ou se quiser coloque a mesma cor que eu utilizei como na imagem:

MFgTZ3f.png


Mude agora o tamanho do seu pincel de forma que cubra grande parte em volta do seu ponto de luz do seu mapa, no meu caso eu deixei o pincel no tamanho 150, como na imagem:

J90xDZr.png


Agora com o pincel, pinte por cima e em volta de todo o seu ponto de luz, ou seja, todo o lugar que você quer que a luz chegue, mas não exagere no tamanho do raio que você quer que a luz alcance, tente deixar como no exemplo da imagem a seguir:

dG1Ttvb.png


E pronto, está feito a sua iluminação, é só jogar no projeto agora!  "Lyca, você está louco?"...haha  Calma, muita calma, você deve estar se perguntando mas que P@&% é essa não é mesmo?  Mas vamos continuar então, vá na camada de Luz 1 e la em cima ontem tem modo, mude de normal para Sobrepor, como na imagem a seguir:

evZ3rQT.png


Com isso acho que vai dar uma "pequena diferença" na sua iluminação:

sdpjjH1.png


Após achar que o Lyca não está mais louco, vamos continuar, pois ainda não acabou..hehe  Agora você deve pegar a borracha novamente e o pincel Hardeness 050, mude a opacidade para 30 e o tamanho deixei o padrão que é 51 mesmo, como na imagem:

7CKCcxE.png


Com a borracha você vai remover o "excesso" de iluminação e os pontos onde a luz não consegue chegar, como trabalhamos no 2D, você deve ter uma noção básica de perspectiva, e saber "enxergar" o mapa de outros ângulos, isso vai ajudar nessa parte, mas não é nada complicado, veja a imagem e repare nos pontos que eu removi a luz, onde provavelmente ela não chegaria.

cpWoknl.png


Após corrigir esses pontos, lembrando novamente que para o seu mapa vai ser diferente, e você deve "enxergar" isso, vamos criar agora um foco de luz maior bem no centro de onde a luz está sendo emitida, ou seja, no meu caso bem no centro das tochas, para isso eu vou criar uma nova camada e nomeá-la de Luz 2, como na imagem a seguir:

X61C5A6.png


Nessa nova camada você vai repetir o mesmo processo que fizemos para a Luz 1, para isso selecione o pincel Hardeness 075, diminua seu tamanho do mesmo tamanho ou menor que o seu objeto de luz, no meu caso são as tochas, para isso eu vou diminuir o pincel um pouco menor que ela, no caso deixei o tamanho em 35, como na imagem:

i2OT5aO.png


E agora vou pintar em cima das tochas do mapa, bem no centro delas, não abrangendo muito espaço, pois lembre-se o que queremos criar agora é o foco mais forte da luz, de onde ela está saindo, então pintando ficaria igual na imagem a seguir:

2vBvz0N.png


Ok, agora nós vamos selecionar a camada Luz 2 e abrir o modo dela, e mudar para mesclar grãos e deixar a opacidade da camada em torno de 35, se você fizer isso a imagem vai ficar assim:

5mLY6B4.png


Com isso estamos quase acabando a nossa iluminação, falta apenas ajustar a matiz de cores de acordo com o ambiente do seu mapa, para isso selecione a camada Luz 1 e vá em Cores>Matiz-Saturação, como na imagem a seguir:

AoLS0dc.png


E ajuste a Matiz, a Saturação e Luminosidade da sua luz, no meu caso eu quero uma luz um pouco mais alaranjada, pois são tochas, então vou ajustar a matiz para essa cor e aumentar a saturação e a luminosidade dela, lembrando que estamos trabalhando com a Luz 1, para a Luz 2, faça a mesma coisa, porém aumente um pouco mais a saturação e a luminosidade do que a Luz 1, para deixar o centro com uma luz mais forte, segue a imagem de exemplo:

cpmqBs2.png


E com isso a nossa iluminação está pronta finalmente, sei que parece bem trabalhoso, mas se seguir esses passos e treinarem não tem segredo, para jogarem no projeto, vocês devem apenas combinar as camadas das luzes com a dos tiles em baixo, e na camada acima do herói apenas deixe uma luz com opacidade bem baixa só para ficar por cima quando ele passar, o que vai dar a impressão de ser a mesma luz.
[/box] ​


[box class=black title=Extra] 
Caso queiram fazer uma luz Branca, é só seguirem esse mesmo passo, porém na hora de mudar a Matiz, vocês devem apenas aumentar no máximo a luminosidade e diminuir toda a saturação, faça isso para as duas camadas de Luz que aprendemos, fazendo isso, você vai deixar igual essa imagem que é a continuação do mesmo mapa:

t61UEoQ.png

[/box] ​


[box class=black title=Resultado Final em Jogo] 
Agora é só "enfeitar" o seu mapa com efeitos que queira adicionar, mudar a cor pelo próprio maker, adicionar efeitos de chuvas ou fogs e seu mapa vai ficar perfeito!

Espero que tenham gostado do tutorial galera e que tenham aprendido bastante também, lembrando que isso é só o modo que eu utilizo no meu mapeamento, mas há muitos outros, eu apenas consigo bons resultados com esse, qualquer dúvida que tiverem é só me falar!

Segue agora o mesmo mapa Finalizado:

G0rbaV7.png

[/box] ​
Abraços do Lyca!​
 
Star Gleen comentou:
Isso que chamo de tutorial! E ainda usando uma ferramenta simples, em? Parabéns pelo trabalho.

Muito obrigado Star Gleen, fico contente que tenha gostado do tutorial, eu escolhi o Gimp, pois acho que é mais acessível para o pessoal baixar e treinar, mas pelo Photoshop o procedimento é bem semelhante, e não há tanta diferença também, espero que tire as dúvidas do pessoal, abraços!
 
Angelo Nobre comentou:
Obrigado por compartilhar seu conhecimento conosco, gostei muito do tutorial. Parabéns!

Muito obrigado cara, fico contente que tenha gostado, em breve tentarei trazer mais tutoriais assim, abraços!
 
Ótimo tutorial, Lycanimus!
Está muito bem explicado. Pra quem tinha dúvidas sobre isso não tem mais hahaha
Ps.: Que efeito de chuva lindo *-*
 
RyanKamos comentou:
Ótimo tutorial, Lycanimus!
Está muito bem explicado. Pra quem tinha dúvidas sobre isso não tem mais hahaha
Ps.: Que efeito de chuva lindo *-*

Muito obrigado Ryan, agradeço muito o comentário e elogio, espero que realmente tire as dúvidas do pessoal quanto a esse tipo de iluminação, abraços!

 
Voltar
Topo Inferior