Aldeia RPG

Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

Suporte ao desenvolvimento de jogos


+4
GallighanMaker
Profane ~
Kies
Lycanimus
8 participantes

    Tutorial Light Lyca

    Lycanimus
    Lycanimus
    Iniciante
    Iniciante


    Mensagens : 49
    Créditos : 17

    Tutorial Light Lyca Empty Tutorial Light Lyca

    Mensagem por Lycanimus Sáb Jul 08, 2017 7:43 pm

    Introdução 
    Fala galera da Aldeia, aqui é o Lycanimus, e hoje vou estar ensinando a vocês o meu tutorial de
    Iluminação via Parallax Mapping, 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 espero tirar muitas dúvidas e ajudar muitos mappers a refinarem os seus trabalhos, bom, então vamos lá!


    Requisitos
    - Gimp ou Photoshop (Eu utilizei o Gimp no tutorial).
    - Saber utilizar os editores acima para fazer seus mapas via Parallax.
     

    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:
    Tutorial Light Lyca QLSI9jS

    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.

     

    Ajustando o nível de Sombreamento - Primeiro Passo
    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:

    Tutorial Light Lyca IFGqKlp

    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:

    Tutorial Light Lyca P6VSRgf

    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:

    Tutorial Light Lyca I7bjDhS

    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:

    Tutorial Light Lyca LWb1vKq

    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ê 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:

    Tutorial Light Lyca BTe8pbn

    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:

    Tutorial Light Lyca EDzG5DF

    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

    Tutorial Light Lyca JbBQ9NK

    Depois de passar a Borracha

    Tutorial Light Lyca QZYAG60

    Assim finalizamos a parte de sombreamento do mapa e podemos dar finalmente inicio a iluminação!
     


    Criando a Iluminação - Segundo Passo 
    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:

    Tutorial Light Lyca 6ZwgCki

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

    Tutorial Light Lyca GeFUu6n

    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:

    Tutorial Light Lyca MFgTZ3f

    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:

    Tutorial Light Lyca 9e3Okj5

    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:

    Tutorial Light Lyca CordpsC

    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 onde tem modo, mude de normal para Sobrepor, como na imagem a seguir:

    Tutorial Light Lyca EvZ3rQT

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

    Tutorial Light Lyca 4u3RiCP

    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:

    Tutorial Light Lyca 7CKCcxE

    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.

    Tutorial Light Lyca BITFyiP

    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:

    Tutorial Light Lyca X61C5A6

    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:

    Tutorial Light Lyca I2OT5aO

    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:

    Tutorial Light Lyca HtIBCL0

    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:

    Tutorial Light Lyca KSdttnt

    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:

    Tutorial Light Lyca H6AHAgR

    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:

    Tutorial Light Lyca Qia3HBA

    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.
     


    Bônus
    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:

    Tutorial Light Lyca G5iGAY2



    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:

    Tutorial Light Lyca G0rbaV7

    Abraços do Lyca!
     


    Última edição por Lycanimus em Sáb Jul 08, 2017 8:59 pm, editado 11 vez(es)
    Kies
    Kies
    Diva
    Diva


    Mensagens : 1154
    Créditos : 124

    Ficha do personagem
    Nível: 1
    Experiência:
    Tutorial Light Lyca Left_bar_bleue0/0Tutorial Light Lyca Empty_bar_bleue  (0/0)
    Vida:
    Tutorial Light Lyca Left_bar_bleue30/30Tutorial Light Lyca Empty_bar_bleue  (30/30)

    Tutorial Light Lyca Empty Re: Tutorial Light Lyca

    Mensagem por Kies Sáb Jul 08, 2017 8:06 pm

    Muito obrigado por trazer até nos esse belíssimo sistema, continue assim meu jovem, +1 cred
    Profane ~
    Profane ~
    Colaborador
    Colaborador


    Mensagens : 818
    Créditos : 130

    Tutorial Light Lyca Empty Re: Tutorial Light Lyca

    Mensagem por Profane ~ Sáb Jul 08, 2017 8:12 pm

    Naisu, creio que com toda certeza o Grimgard irá receber bons retornos desse tutorial >< < 3


    _________________
    "Mistress of shattered hopes and forever broken dreams"
    Lycanimus
    Lycanimus
    Iniciante
    Iniciante


    Mensagens : 49
    Créditos : 17

    Tutorial Light Lyca Empty Re: Tutorial Light Lyca

    Mensagem por Lycanimus Sáb Jul 08, 2017 8:19 pm

    Kies~ - Muito obrigado, fico contente em contribuir com a comunidade maker, abraços!

    Profane~ - Muito obrigado, espero ajudar muitos mappers a refinarem os seus trabalhos! Very Happy

    Obs - Ainda estou arrumando as resoluções das imagens que no tópico ficou um pouco cortada!

    Abraços do Lyca!


    _________________
    Fazer mapas é uma arte, faça como se fosse o seu último.

    Tutorial Light Lyca VDITA3z

    Tutorial Light Lyca 7PWYoTw
    GallighanMaker
    GallighanMaker
    Colaborador
    Colaborador


    Medalhas : Tutorial Light Lyca ZgLkiRU
    Mensagens : 985
    Créditos : 102

    Ficha do personagem
    Nível: 1
    Experiência:
    Tutorial Light Lyca Left_bar_bleue0/0Tutorial Light Lyca Empty_bar_bleue  (0/0)
    Vida:
    Tutorial Light Lyca Left_bar_bleue30/30Tutorial Light Lyca Empty_bar_bleue  (30/30)

    Tutorial Light Lyca Empty Re: Tutorial Light Lyca

    Mensagem por GallighanMaker Seg Jul 10, 2017 9:25 am

    Muito bom Lyca, 


    Esse estilo de mapeamento é extraordinário e tenho certeza pra galera mapper vai gostar pois ver um tutorial novo nesse gênero é algo raro, estava faltando isso aqui na aldeia.


    _________________
    Tutorial Light Lyca 8dVK0ku
    using C# and import Python developer || Expert in Unity Engine IDE. || Tutorial Light Lyca 769_heart 2D pixel games.
    Lycanimus
    Lycanimus
    Iniciante
    Iniciante


    Mensagens : 49
    Créditos : 17

    Tutorial Light Lyca Empty Re: Tutorial Light Lyca

    Mensagem por Lycanimus Ter Jul 11, 2017 1:34 am

    GallighanMaker - Muito obrigado, realmente eu não vejo muitos tutoriais nesse gênero, o que é uma pena, mas fico contente em contribuir com esse aqui na Aldeia, em breve espero trazer mais alguns!

    Abraços do Lyca!


    _________________
    Fazer mapas é uma arte, faça como se fosse o seu último.

    Tutorial Light Lyca VDITA3z

    Tutorial Light Lyca 7PWYoTw
    Sonart
    Sonart
    Administrador
    Administrador


    Medalhas : Tutorial Light Lyca ZgLkiRUTutorial Light Lyca 1add79
    Mensagens : 541
    Créditos : 107

    Ficha do personagem
    Nível: 1
    Experiência:
    Tutorial Light Lyca Left_bar_bleue7/50Tutorial Light Lyca Empty_bar_bleue  (7/50)
    Vida:
    Tutorial Light Lyca Left_bar_bleue30/30Tutorial Light Lyca Empty_bar_bleue  (30/30)

    Tutorial Light Lyca Empty Re: Tutorial Light Lyca

    Mensagem por Sonart Qui Ago 03, 2017 9:17 pm

    Boa @Lycanimus muito foda o tutorial.
    eluedes
    eluedes
    Novato
    Novato


    Mensagens : 8
    Créditos : 0

    Tutorial Light Lyca Empty Re: Tutorial Light Lyca

    Mensagem por eluedes Qui Ago 03, 2017 11:16 pm

    gostei :3
    vou adquirir esse aprendizado
    OFWGKTA
    OFWGKTA
    Experiente
    Experiente


    Mensagens : 408
    Créditos : 27

    Ficha do personagem
    Nível: 1
    Experiência:
    Tutorial Light Lyca Left_bar_bleue5/50Tutorial Light Lyca Empty_bar_bleue  (5/50)
    Vida:
    Tutorial Light Lyca Left_bar_bleue30/30Tutorial Light Lyca Empty_bar_bleue  (30/30)

    Tutorial Light Lyca Empty Re: Tutorial Light Lyca

    Mensagem por OFWGKTA Seg Ago 07, 2017 7:45 am

    Esse cara é fera


    _________________
    Tutorial Light Lyca 112898
    EVANGELION 
    Lycanimus
    Lycanimus
    Iniciante
    Iniciante


    Mensagens : 49
    Créditos : 17

    Tutorial Light Lyca Empty Re: Tutorial Light Lyca

    Mensagem por Lycanimus Seg Ago 07, 2017 10:07 pm

    xSonart - Muito obrigado!  

    eluedes - Obrigado, fico contente que vá seguir o tutorial, qualquer dúvida é só falar!

    Mundator - Muito obrigado!  


    Abraços do Lyca!


    _________________
    Fazer mapas é uma arte, faça como se fosse o seu último.

    Tutorial Light Lyca VDITA3z

    Tutorial Light Lyca 7PWYoTw

    Conteúdo patrocinado


    Tutorial Light Lyca Empty Re: Tutorial Light Lyca

    Mensagem por Conteúdo patrocinado


      Data/hora atual: Qui maio 16, 2024 12:25 pm