O TEMA DO FÓRUM ESTÁ EM MANUTENÇÃO. FEEDBACKS AQUI: ACESSAR

Mapas em Parallax #01 - Exterior

Iniciado por Opalablue, 19/05/2019 às 23:14

Imprimir
Ir para o fim Páginas1
Ações
19/05/2019 às 23:14 Última edição: 20/05/2019 às 22:41 por Opalablue
Mapeamento em Parallax!
#01 - Exterior
Depois do último mapa que eu postei, choveu gente me perguntando como eu fiz. Já que já estavam me pedindo tutorial tem um tempo, cá estou eu com ele!
Acho importante ressaltar que não sou uma profissional e que não possuo conhecimentos específicos em Level Design. Tudo o que venho repassar aqui é com base em minha experiência individual, portanto, sintam-se livres para fazerem sugestões!
Me desculpe se ficar meio confuso :derp:

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=Materiais Necessários]
Spoiler

[close]
[/box2]

[box2 class=titlebg title=1.Primeiros Passos]
Spoiler


  • Organize os seus materiais numa pasta.
  • Defina o conceito do mapa.
  • Escolha o tamanho do mapa. Leve em consideração a resolução do seu maker! Eu estarei trabalhando com um 512x512, mas use o tamanho que desejar.
[close]
[/box2]

[box2 class=titlebg title=2. Conceituando o Mapa]
Spoiler

Pelo amor de deus: PAREM de pular a parte de conceitualização do mapa. Essa é uma das partes mais importantes de todas, sem brincadeira. É tão importante que planejo um tutorial APENAS sobre isso. Um mapa sem conceito não tem significado, utilidade, e não será memorável para o jogador. Parem de focar em fazer mapas bonitos, e vamos focar em fazer mapas funcionais.
Eu montei uma ficha pra ajudar vocês, mas é óbvio que não precisam fazer sempre que forem construir um mapa. Com a prática, creio que o uso dela deixará de ser necessário.

Nome do mapa (opcional): Autoexplicativo.
Tipo de cenário: É uma praia? uma floresta? uma cidade? É isolado? É populoso? É em algum bioma específico?
Mapas adjacentes: Se há mapas que se conectam com esse.
É habitado? Se sim, por quem?: Quem está (temporariamente ou não) nesse mapa? Quem são esses seres? Descreva.
Há construções? Quais?: Há casas? Cabanas? Barraquinhas?
Detalhes: O que mais é importante sobre esse mapa?
Cena: Esse mapa faz parte de uma cena? Descreva a cena.

Eu preenchi essa ficha com os dados do mapa que vou fazer nesse tutorial.

Nome do mapa (opcional): Recanto Solitário
Tipo de cenário: Floresta isolada
Mapas adjacentes: Não.
É habitado? Se sim, por quem?: Sim. Um caçador híbrido chamado Hoger e seu fiel cão, o Bones. Ele costumava ter uma filha.
Há construções? Quais?: Uma casa na árvore, uma casa pro cachorro e um pequeno depósito pra lenha.
Detalhes: Há um rio que passa em frente à casa, de onde o personagem retira água potável e para uso geral. Não há trilhas de terra que levam até esse mapa.
Cena: Depois de semanas sem caçar nada por conta de uma maldição instalada na floresta, Hoger divide um último pedaço de pão com seu fiel amigo, na margem do rio.
[close]
[/box2]

[box2 class=titlebg title=3. Criando o Terreno]
Spoiler

Primeiro, abra o programa de edição e crie uma nova imagem com a resolução escolhida. Crie quatro camadas, que deverão ser organizadas mais ou menos assim:


Neste primeiro momento, você pode ocultar a camada template. Ela só nos servirá mais no futuro.
Com uma borracha suave (hardness 0%) de tamanho 100 - 150, você irá começar a apagar a camada Grass, para criar o seu rio ou lago.
[hs width=300 height=300]https://i.imgur.com/jmbLpgT.png[/hs]

Então, você irá reduzir a opacidade da camada Water. Eu usei o valor 150.
[hs width=300 height=300]https://i.imgur.com/0vQa8q4.png[/hs]

Neste tutorial, eu farei uma margem alta de pedra. Se você se sentir confortável, pode tentar fazer uma margem de cascalho ou com areia, mas acho esta mais fácil para iniciantes.
Você vai precisar de duas ou quatro pedras do seu tileset e de um barranco. Eu escolhi esse conjunto:


Crie uma nova camada, selecione o barranco de sua escolha e o vá encaixando ao longo da margem. Não se preocupe com a aparência horrenda que isso vai ficar.
[hs width=300 height=300]https://i.imgur.com/XNCSoEf.png[/hs]

Com a borracha suave de tamanho 100, comece a apagar o início do barranco e as partes que conectam na grama. Não se preocupe se apagar de mais em alguns pontos.
[hs width=300 height=300]https://i.imgur.com/8DZJjwT.png[/hs]

Crie uma nova camada. Escolha pelo menos duas pedras e vá encaixando elas ao longo da margem, alternando entre elas para dar um acabamento mais natural.
[hs width=300 height=300]https://i.imgur.com/vTbetQ2.png[/hs]

Com uma borracha suave de tamanho 50, você vai dar pequenas batidinhas, apagando a parte inferior das pedras. Isso vai mesclar ela aos barrancos, criando uma margem.
[hs width=300 height=300]https://i.imgur.com/4J298F6.png[/hs]

Crie uma nova camada, localizada acima da camada do Barranco.


Selecione o pincel de cor branca com hardness em 100% e pinte acima da água. Repare que eu fui contornando o formado do barranco, e isso foi proposital.

[hs width=300 height=300]https://i.imgur.com/imbvfOx.png[/hs]

Agora, mude a opacidade da camada Water2 para 30%.
[hs width=300 height=300]https://i.imgur.com/SA9xZJ0.png[/hs]

Mude a cor das camadas e a opacidade até conseguir um resultado satisfatório. Corrija pequenos detalhes que julgar necessários. Eu fiquei feliz com essa combinação, mas nada me impede de mudar no futuro:
[hs width=300 height=300]https://i.imgur.com/bZAEg3l.png[/hs]

Nesse tutorial, eu não vou ensinar a fazer água animada, então eu irei mesclar todas as camadas e ficar com algo assim:
[close]
[/box2]

[box2 class=titlebg title=4.Preenchendo]
Spoiler


Essa é a parte onde você deve deixar a sua imaginação trabalhar! Leve o conceito do mapa bastante a sério!
Primeiramente, deixe a camada Template visível e mude sua opacidade até conseguir ver o fundo do mapa com clareza. Outra opção é mudar o blending dela para multiply.

Cada quadrado desse template indica um espaço de 32x32. A não ser que você esteja usando algum script que modifique isso, o personagem sempre se moverá um quadrado por vez. Portanto, quando for posicionar objetos interagíveis, por exemplo, você vai querer que eles estejam localizados em um desses blocos.

       

Agora, crie uma nova camada.


O Hoger vai morar numa casa na árvore. Então essa é a primeira coisa que eu vou fazer. Felizmente, eu selecionei um tileset que já possuía uma casa na árvore, mas nada impede você de editar e fazer a sua própria.
[hs width=300 height=300]https://i.imgur.com/Ol1BQfQ.png[/hs]
Reparem que o balanço e a escada estão centralizados nos blocos, pois serão interagíveis.

Agora, eu vou criar uma nova camada pra posicionar as árvores e arbustos grandes. Escolha pelo menos dois tipos de árvores pra trabalhar, e alterne entre elas. A minha dica é posicionar elas de forma assimétrica.
[hs width=300 height=300]https://i.imgur.com/CUfagmb.png[/hs]
Outra dica é mudar levemente a cor das árvores. Eu acho que fica mais natural assim. Repare que as árvores não estão posicionadas de forma consciente ao Template, porque elas não são importantes para a interatividade do mapa.

Então, eu adicionei o restante das estruturas: a casa de cachorro, um depósito pra lenha, e já que havia no tileset, um banheiro. Eu gosto de criar uma camada só pras estruturas grandes.
[hs width=300 height=300]https://i.imgur.com/Y3VFo0S.png[/hs]

Depois disso, eu criei uma camada só pra adicionar o restante do mato e pedras. Sempre tomando cuidado pra tentar harmonizar as cores.
Uma dica: Quando for colocar mato na água, use uma borracha suave para apagar a parte inferior e dar a impressão de que parte dele está submerso.
[hs width=300 height=300]https://i.imgur.com/oBM37Mu.png[/hs]

Ainda falando sobre o mato que está na água: Lembre-se de que quando a água é cristalina, você deve levar em consideração que os objetos vão até o fundo ou geram uma sombra. Pra gerar esse efeito, eu dupliquei a camada do mato. Na camada mais inferior, eu mudei a claridade para 0, deixando os componentes da camada pretos.
E então, eu mudei a opacidade da camada até ficar assim:


Pra não ficar com um monte de camadas, eu organizei elas assim:

Casa na Árvore: A casa do Hoger
Estruturas: A casa do cachorro, o banheiro e o depósito
Vegetables2: Onde estão as árvores
Mato: Onde está o mato/pedras do chão e da água
Template: Autoexplicativo
Ground: A camada base

Se quiser, você pode mesclar as camadas Mato e Ground.
[close]
[/box2]

[box2 class=titlebg title=5.Detalhando]
Spoiler


Crie uma nova camada chamada Objects. É onde você vai por os objetos.
Lembra quando eu disse que o conceito do mapa era importante? Pois bem. Tudo que está contido no mapa conta uma história e é responsável pela ambientação. Não vou entrar muito em detalhes nisso neste tutorial, mas quando for selecionar um objeto pra por no mapa, pense: Do que esse personagem precisa? O que um personagem desse teria por perto? O que me ajudaria a passar a mensagem que eu quero?
Enfim, prosseguindo

[hs width=300 height=300]https://i.imgur.com/tHAgAmI.png[/hs]
Eu coloquei um machado mais ou menos próximo de onde está a lenha, pois julguei que ele provavelmente ia precisar.
Por viver da caça e pesca, coloquei um banco perto do lago. É onde ele estará quando eu organizar a cena.
Como planejo fazer de noite, coloquei uma lamparina acesa. Sim, eu coloco as lamparinas direto no mapa ao invés de criar um evento pra tal, e no tutorial de iluminação eu explicarei o porquê.
Coloquei um círculo onde fica uma fogueira.
Coloquei uma carroça meio escondida. Por estar num local de difícil acesso, eu quis deixar a entender que ela quase não é usada. Fiz isso pra mostrar que o personagem é realmente isolado, tanto que não há trilhas que levam a este lugar.
O balanço foi pra mostrar que esse lugar é (ou no caso, era) habitado por uma criança.
[close]
[/box2]

[box2 class=titlebg title=6.Definindo Prioridades]
Spoiler

Prioridades são os objetos que ficam acima do jogador.
Quando você quer criar o efeito de que o jogador passa por baixo de algo, você precisará ter uma imagem apenas para esses objetos que ficam por cima.
Há diversos tutoriais ensinando a fazer isso na internet, por isso eu serei breve:

1. Crie uma camada para os objetos prioritários


2.Selecione todas as partes que você deseja que o jogador passe por baixo/por trás.
[hs width=300 height=300]https://i.imgur.com/z4g5IHs.png[/hs]

3. Você vai recortar todos os objetos das partes selecionadas para a nova camada que você criou. Ao fim, você terá algo parecido com isso na sua camada prioritária:
[hs width=300 height=300]https://i.imgur.com/5y0QF2o.png[/hs]
[close]
[/box2]

[box2 class=titlebg title=Fim da aula 01!]
Esse tutorial já está bem extenso! Vamos continuar trabalhando neste mapa no próximo tutorial.
Até agora, o resultado que obtemos é este:
Spoiler
[close]
[/box2]

[box2 class=titlebg title=Dicas]

  • Não se limite aos tiles que você encontrar na internet. Crie os seus próprios ou edite os que você encontrar! Combine objetos para criar componentes únicos.
  • A prática leva à perfeição. Não desanime se seus primeiros mapas não ficarem como imaginou.
  • Estude! Quanto mais conhecimentos geográficos você tiver, melhor vai ser para fazer o mapa.
[/box2]

[box2 class=titlebg title=Materiais Usados na Aula]
Aqui tem os tilesets, imagens e o arquivo em pdn do mapa para que você possa analisar.[/box2]

[box2 class=titlebg title=Créditos]
Scripts:
Fix Parallax e Fix Picture: Raizen
Tilesets:
Candacis
Celianna
PandaMaru
Alguns autores não foram encontrados, e as imagens em questão estão marcadas. Se alguém encontrar, por favor me avise para que eu possa creditar corretamente.
[/box2]
19/05/2019 às 23:29 #1 Última edição: 19/05/2019 às 23:37 por Jorge_Maker
Nunca me interessei por Parallax mapping muito em razão da minha preferência mais arcaica de arte para jogos Top Down, oque acaba refletindo no meu -pouco- desenvolvimento criativo na área. Só um Zelda com aquela pixel artezona maravilhosa é o suficiente pra mim. aheuahe'
No entanto, aprecio muito esse tipo trabalho quando é bem feito, e o seu resultado final mostrado no tópico é um ótimo exemplo disso. Espero que o seu tutorial ajude ao pessoal que está começando a se engajar na área.
Muito obrigado por trazer esse conteúdo pra cá, Lone. (o/

Super OFF

"Vegetables" seguido de "mato" define muito bem eu quando tô programando. uaheauh'
[close]
Oxe
20/05/2019 às 06:46 #2
 Estes tempos eu estava pensando justamente em também aprender mapeamento por Parallax, a primeira coisa é programar. :|
Eu tenho quase certeza que esta aula me será útil.

Vou fixa-lo nos favoritos.
22/05/2019 às 20:41 #3
Excelente iniciativa!
Isso é muito legal de se ver!
Parabéns!! :math:
Imprimir
Ir para o topo Páginas1
Ações