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

Mapeando! #1 - Interior (Parallax Mapping)

Iniciado por Misty, 23/03/2014 às 04:49

23/03/2014 às 04:49 Última edição: 18/02/2024 às 20:00 por Misty


[box class=titlebg]Introdução e Informações[/box]
  Olá, jovens aventureiros! Primeiramente gostaria de pedir desculpas pelo tópico porcamente feito, estou com um tempo corrido demais para enfeitar muito o tópico então esse foi o melhor que pude fazer nesse meio tempo que passei criando o tutorial. Esse é um simples tutorial onde eu ensino a minha técnica para mapear utilizando o Parallax Mapping, portanto, para aqueles que quiserem aprender, serão muito bem vindos aqui.

Para criar um mapa usando o Parallax, você irá precisar de algumas ferramentas extras além do RPG Maker e seus tilesets. O primeiro de tudo é um programa de manipulação de imagem, pode ser o que melhor atender suas necessidades, no meu caso utilizei o bom e velho Photoshop. Além do programa de manipulação de imagem você também precisará de dois scripts (deixarei os scripts dentro de um spoiler no final do tópico) que irão fazer o mapa funcionar no RPG Maker: Parallax Fix e Picture Fix.

O Parallax Fix serve para fixar o parallax no mapa, impedindo que ele mova-se junto com a "câmera" que está focada sobre o personagem e assim então, fazendo com que o mapa fique parado. E o Picture Fix possui a mesma função que o outro script, só que ele fixa as pictures em vez do parallax. Enfim, não é complicado de criar um mapa desses, levei cerca de 40 minutos para fazê-lo e com prática você pode fazer em até menos tempo. Nesta aula ensinarei como criar um mapa de interior, e o resultado final será esse.






[box class=titlebg]Passo 1 - Crie sua base com o RPG Maker.[/box]
  Para começar, abra o RPG Maker (no caso utilizei o RPG Maker VX ACE) e crie a base do seu  mapa, ou seja, as paredes e o chão. Claro que é possível editar essas partes do mapa diretamente pelo photoshop sem perder tempo com o RPG Maker, mas eu prefiro criar direto no RPG Maker para poder ter uma noção maior do que eu estou fazendo.

Quando for criar sua base, já tenha pronto o tileset que você irá usar e claro, uma pequena ideia de como o seu mapa deve ser. Um erro que vejo acontecer constantemente quando as pessoas criam mapas de interiores, é exagerar no tamanho. Não é preciso fazer um mapa muito grande para colocar todos os elementos que você deseja, é possível deixá-lo na medida exata para que todos os objetos caibam e fiquem harmônicos sem deixar muitos espaços sobrando.

Feita a idealização do mapa e a escolha do tileset base, coloque a mão na massa e desenvolva a base com muito cuidado, pois é nela que você irá trabalhar até o final e caso tenha feito algo errado, o seu mapa todo irá ficar assim. Eu resolvi criar o andar térreo de uma pequena e simples casa:

Spoiler
[close]

Após ter feito sua base, tire uma screenshot (print screen) dela e abra essa imagem com o photoshop. É aqui que iremos começar a mapear todo o cenário. Tendo em mente que já tinha uma ideia de onde colocar as portas, eu já editei a screenshot que tirei e fiz o batente das portas que utilizarei.

PS: Para que não ocorra nenhum erro durante o processo de mapeamento quanto à posição dos elementos, sugiro que você coloque uma grade sobre a imagem base, essa grade deve ter um espaçamento de 32x32 pixels. O próprio photoshop oferece essa função, mas a grade que ele adiciona não é muito boa e pode lhe causar alguma confusão, então eu prefiro adicionar minha própria grade:

Spoiler
[close]






[box class=titlebg]Passo 2 - Coloque a mão na massa![/box]
  Agora que você já iniciou o seu mapa, é hora de começar a distribuir os elementos no mapa da maneira que mais lhe agradar. Mas tenha cuidado, preencha somente o que for necessário, não extrapole colocando objetos demais e poluindo o seu mapa, assim como não deve deixá-lo vazio.

Não existe nenhuma fórmula para saber quando é a hora de parar de preencher o mapa, isso depende do mapa que você está fazendo, assim como depende de você mesmo e seu senso se ambientação. Por falar nele, pense no seu mapa como se estivesse vivendo naquele lugar, assim ficará mais fácil de distribuir os objetos.

Voltando para o nosso mapa, vamos começar pelo banheiro? Fazendo um cômodo de cada vez fica mais fácil de preencher sem se perder em meio as camadas do photoshop. Pois bem, preencha o seu banheiro até achar que ele está completo, lembrando que você não deve mesclar as camadas de forma alguma, por mais que fique cansativo procurar camada por camada por apenas 1 objeto, é preciso deixá-los separados pois mais para frente precisaremos deles, para facilitar a sua vida, você pode separar as camadas de cada cômodo por pastas. Terminando o banheiro, o meu ficou assim:

Spoiler
[close]

  Note que o banheiro está com um número de objetos não muito alto e não muito baixo, ele está na medida! Você pode caprichar nos detalhes, como por exemplo os produtos de higiene que estão próximos à banheira, o mapa está livre somente esperando para que você faça ele se tornar um ambiente, lembrando, é claro, que devemos nos conter nos exageros.






[box class=titlebg]Passo 3 - Partindo para outra...[/box]
  O banheiro já está pronto, agora iremos partir para a sala. Da mesma maneira que você fez com o banheiro, coloque mais uma vez a mão na massa e vá preenchendo o mapa com elementos que você julgue necessários para formar um ambiente harmônico.

Os tilesets padrão do RPG Maker (RTP) deixam um objeto ocupar exatamente os 32 pixels de cada "janela" no tileset, porém, eu penso que dessa maneira o mapa fica muito quadrado, e as passabilidades dele ficam, em alguns  casos, sem sentido. Por esse motivo, quando meus elementos estão encostados na parece, por exemplo, eu gosto de deixar a parte inferior dele ocupar apenas metade dessa janela, ou seja, 16 pixels. Desse modo além de não impedir a passabilidade do herói, deixa o mapa mais harmônico.

Nesse caso é preciso cuidado! Não são todos os objetos que devem ocupar 16 pixels, pois desse modo o que deveria impedir a passabilidade do herói, acaba permitindo sua passagem. Voltando ao nosso mapa, após preencher a sala com aquilo que preferi, ela ficou desse maneira:

Spoiler
[close]

  Percebeu que alguns elementos estão ocupando apenas 16 pixels, mas também existem aqueles que ocupam os 32 pixels que ocupariam por padrão? Isso tudo se aplica no que disse acima, onde, normalmente os elementos que ocupam os 32 pixels servem para impedir a passagem do herói.






[box class=titlebg]Passo 4 - Melhor parte.[/box]
  Já preenchemos 2 dos 3  cômodos que esse mapa possui, estamos quase entrando na reta final. Agora que terminarmos a nossa sala, vamos partir para a cozinha? Pois bem, basta seguir o mesmo ritmo e ir preenchendo o mapa da maneira que achar melhor, colocando os objetos necessários para que o ambiente fique o mais parecido com a realidade possível.

Uma das vantagens do Parallax Mapping é a total liberdade que o mapper possui. Mapeando diretamente pelo RPG Maker você acaba ficando preso nas limitações do programa e na maneira que é feita a distribuição de tudo, mas utilizando este método de mapeamento por imagem, você pode deixar o seu mapa com diferentes formas e posições, e essa é a melhor parte! Você pode até mesmo editar alguns objetos de deixá-los de uma forma que fique mais agradável para você. Com isso, terminamos de preencher a cozinha:

Spoiler
[close]

  Conseguiu notar a liberdade que tive para editar e preencher o mapa da maneira que mais me agradou? Um exemplo disso é a mesa e as cadeiras, onde elas são separadas no tileset, mas com uma pequena edição, pude deixá-las de um modo mais interessante para o mapa.






[box class=titlebg]Passo 5 - O de cima, sobe, e o de baixo, desce![/box]
  Tirando o trocadilho horrível que citei acima, a frase faz todo sentido. Lembra quando disse que não deveríamos juntar as camadas dos objetos pois iriamos precisar delas separadas um pouco mais adiante? Pois bem, agora é a hora de usá-las. Existe algo no parallax mapping que se chama "Objetos de Alta Prioridade", que nada mais são do que os objetos que ficam acima do herói.

Para isso, você deve pegar todas as camadas que ficam acima do herói e cortá-las do restante do mapa, deixando-as separadas em um pasta ou acima de tudo, como você preferir. Neste mapa eu resolvi não deixar muitos objetos de alta prioridade para que não cause nenhuma confusão em membros iniciantes no assunto, então esses são os nossos pontos de alta prioridade:

Spoiler
[close]

  Esses são todos os objetos de alta prioridade que existem no mapa. Nas screens, eles estão sendo mostrados junto com o solo, mas quando for salvar a sua picture, é necessário que eles estejam separados do solo. Nas screens também aparecem os batentes das portas e isso é proposital, pois o heróis passará por baixo desse batente, deixando o jogo um pouco mais realista.






[box class=titlebg]Passo 6 - Quase lá.[/box]
  Nós estamos quase terminando de fazer o nosso mapa, mas ainda faltam uns pontos cruciais no desenvolvimento dele para que o mesmo possa entrar em funcionamento. Pois bem, agora que já preenchemos todos os cômodos da casa, iremos salvar essa imagem (sem a grade) na pasta Parallaxes do seu projeto. Lembrando que o nome dessa imagem deve conter o prefixo "(FIX)", eu nomeei a imagem de "Casa_(FIX)", e ela ficou assim:

Spoiler
[close]

  Pois bem, agora que temos o nosso solo, lembram-se do que disse antes? Precisamos separar os objetos de alta prioridade do solo, e assim poderemos salvar a nossa picture. Para isso, desative todas as camadas que não fazem parte dos objetos de alta prioridade, depois disso, salve essa imagem na pasta Pictures do seu projeto, da mesma forma que o parallax, é preciso ter o prefixo "(FIX)" no nome dessa picture:

Spoiler
[close]







[box class=titlebg]Passo 7 - De volta para o RPG Maker.[/box]
  Estamos na fase final do mapa. Lembram do mapa que usamos como base para iniciar esse? Faça um limpeza nele, deixando-o vazio e mantendo somente suas proporções. Agora, nas propriedades desse mapa, escolha o parallax que nós salvamos anteriormente e deixe marcada a opção "Mostrar no editor". Feito isso, partiremos para outra parte do mapa.

Abra o database e vá para a aba de tilesets, nele, crie um tileset novo e coloque uma imagem como esta que aqui mostrarei como um tileset, dessa forma poderemos iniciar o mapeamento para especificar as passabilidades:

Spoiler
[close]

  Agora, note que o X está sobre o vermelho e o O está sobre o verde, e isso indica onde é permitido ou não a passagem do herói. Feito isso, dê um ok para fechar o database e volte para as propriedades do mapa, nessas propriedades, você deve alterar o tileset usado para esse que acabamos de criar. Com isso, podemos dar início para as passabilidades:

Spoiler
[close]

  Preencha todo o mapa com as cores necessárias, utilizando é claro a cor específica para cada local desejado (verde para onde o herói pode andar, e vermelho para onde ele não pode). Após preencher todo o mapa, volte para o database e para a aba de tilesets. No tileset novo que criamos, você irá substituir a imagem onde o verde e o vermelho estão, por uma imagem em branco:

Spoiler
[close]

  Pronto, estamos quase lá! Agora para finalizar, crie um evento com prioridade "Processo Paralelo", nele, coloque a opção "Mostrar Imagem" e selecione aquela picture que nós criamos com os objetos de alta prioridade. Dê um OK e teste o seu jogo, com o seu mais novo mapa criado via Parallax Mapping! :)






[box class=titlebg]Considerações Finais.[/box]
  Acredito que o tutorial acabou ficando um pouco confuso e com a explicação rápida demais, por esse motivo, todos aqueles que tiverem alguma dúvida ou problema no desenvolvimento de algum mapa e tenha aprendido aqui no tutorial, não se acanhem em perguntar aqui no tópico para que eu possa sanar suas dúvidas.

Para criar esse mapa, utilizei os tilesets criados pela Lunarea, Celianna, Ayene-Chan e alguns foram editados por mim mesmo! Nessa aula eu estou utilizando o RPG Maker VX ACE, mas esse método se aplica ao RPG Maker VX, também, apenas os scripts que devem ser outros. Por falar neles, aqui estão os scripts necessários para isso, ambos criados por Raizen.

Parallax Fix
#===============================================================
# Parallax Fix
# Compativel com RMVXAce
# Autor: Raizen884
# Exclusividade da comunidade : www.centrorpgmaker.com
# É permitido postar em outros lugares contanto que não seja mudado
# as linhas dos créditos.
# Descrição: Permite fixar o panorama, permitindo assim o mapeamento
# "parallax mapping" e outros usos que seja necessários que o panorama
# não tenha movimento.
#===============================================================


module Raizen_fixp
# O que devera estar contido no nome do arquivo para que o panorama
# seja fixado, graficos sem isso vão funcionar como panoramas normalmente.
Fixparallax = "(FIX)"end
# Aqui começa o script.

class Spriteset_Map
  alias update_raizen_parallax update_parallax
   def update_parallax
     update_raizen_parallax
     if @parallax_name.include?(Raizen_fixp::Fixparallax)
       @parallax.ox = $game_map.display_x * 32
       @parallax.oy = $game_map.display_y * 32
     end   
   end
 end
[close]
Picture Fix
#=======================================================
#         Fix Picture
# Autor: Raizen884
# Exclusividade da comunidade : www.centrorpgmaker.com
# O script fixa qualquer imagem na posição (0,0) que contém o 
# prefixo (FIX), e assim posibilita ao maker fazer
# iluminações e panomaps com essa imagem fixa.
#=======================================================

class Sprite_Picture < Sprite
  def update_position
    if @picture.name.include?("(FIX)")
      self.x = -$game_map.display_x*32
      self.y = -$game_map.display_y*32
    else
      self.x = @picture.x
      self.y = @picture.y
    end
    self.z = @picture.number
  end
  end
[close]

Você só usa esse char...
A aula ficou muito boa e ensina bastante sobre os espaços.
Como é o mestre do clã de mappers eu não tenho nada a criticar e eu entendo essa falta de tempo para organizar o tópico...
Intermediários que aprendam.

Estava sentindo falta de um tuto de map com tiles futuristas, precisaria para um outro projeto
boa aula tio Misty Bem explicativo e simples.  :XD:


 Gostei muito do tutorial, você realmente explicou muito bem para um interior e como mapear por Parallax Mapping. Fico feliz em saber que uso o mesmo método (desde a grade ao tiles vermelhos e verdes), apesar de eu ter mais trabalho quando tento deixar que um móvel seja passável por trás e frente e modificando no maker os sentidos de onde andar, porém com chars que passem do tamanho de 32 pixels vira um problema.

Uma coisa que não curti é o fato da porta ser alta e aparecer o piso dos cômodos, mas levando em consideração que é erro no gráfico mesmo, não é algo em levar em consideração a explicação do tutorial.

Espero que poste mais tutorias sobre mapeamento como exteriores e senti a falta de uma iluminação nisso ai. :]

2010 ~ 2016 / 2024

Ficou muito bom, bem explicativo e funcional, o melhor tutorial de panomap que já vi, parabéns e continue assim.

~FocoNaMissão!

Citação de: Alisson online 23/03/2014 às 11:54
Você só usa esse char...
A aula ficou muito boa e ensina bastante sobre os espaços.
Como é o mestre do clã de mappers eu não tenho nada a criticar e eu entendo essa falta de tempo para organizar o tópico...
Intermediários que aprendam.

Eu gosto desse char, ele é tão fofinho!  :*-*:
Enfim, obrigado pelos elogios, Alisson. Mas não é bem assim, eu sou um mapper mediano comparado aos mappers que existem por aí.  :XD:

Citação de: SimonMuran online 23/03/2014 às 12:16
Estava sentindo falta de um tuto de map com tiles futuristas, precisaria para um outro projeto
boa aula tio Misty Bem explicativo e simples.  :XD:

Obrigado pelo comentário e pelos elogios. Ainda bem que conseguiu compreender!  :blink:

Citação de: Kwerten online 23/03/2014 às 12:53
Até que enfim um tutorial que explica tudo, foi o único até agora que eu consegui entender perfeitamente. Valeu Mistyrol! :ok:

Opá, se conseguiu entender, então minha missão foi cumprida!  :*-*:
Obrigado pelos elogios e pelo comentário, Kwerten.

Citação de: Vash online 23/03/2014 às 20:27
Gostei muito do tutorial, você realmente explicou muito bem para um interior e como mapear por Parallax Mapping. Fico feliz em saber que uso o mesmo método (desde a grade ao tiles vermelhos e verdes), apesar de eu ter mais trabalho quando tento deixar que um móvel seja passável por trás e frente e modificando no maker os sentidos de onde andar, porém com chars que passem do tamanho de 32 pixels vira um problema.

Uma coisa que não curti é o fato da porta ser alta e aparecer o piso dos cômodos, mas levando em consideração que é erro no gráfico mesmo, não é algo em levar em consideração a explicação do tutorial.

Espero que poste mais tutorias sobre mapeamento como exteriores e senti a falta de uma iluminação nisso ai. :]

Esse método das cores e da grade é muito mais simples para mapear do que ir mapeando pelo "achismo", mesmo que não seja difícil, para que complicar, não é mesmo?  :XD:

Como disse para você no Skype, o problema da porta é do charset e não do mapa em si, mas de qualquer forma, obrigado por notar. Sobre a iluminação, isso foi proposital, pretendo fazer outro tutorial em breve (ou talvez não tão breve assim) explicando como faço a iluminação.

Citação de: Paranoid online 23/03/2014 às 22:49
Ficou muito bom, bem explicativo e funcional, o melhor tutorial de panomap que já vi, parabéns e continue assim.

~FocoNaMissão!

Poxa, isso vindo de você, um dos mappers que mais admiro, não tem preço.  :T.T:
Obrigado pelos elogios e pelo comentário, realmente me deixou feliz.

Acho que está faltando meu comentário aqui :XD:
Bom,achei o tutorial muito bom,você explicou muito bem cada detalhe
deixando o tuto fácil de se compreender e de botar em prática o que
foi aprendido.
Enfim,parabéns guy !
Prazer, Terror dos Modinha

Citação de: Makers online 24/03/2014 às 17:30
Acho que está faltando meu comentário aqui :XD:
Bom,achei o tutorial muito bom,você explicou muito bem cada detalhe
deixando o tuto fácil de se compreender e de botar em prática o que
foi aprendido.
Enfim,parabéns guy !


Obrigado pelos elogios e pelo comentário, Makers.
Fico feliz em saber que tenha gostado e achado o tutorial simples, principalmente para a compreensão.  :XD:

Show de bola, já está nos meus favoritos rapaz.
Aproposito, como você vai fazer o 2#? Não vejo como esse mapa pode melhorar  :clap:

Mistyrol,poderia disponibilizar esse tileset aqui no tópico?
RPG Maker Vx Ace.

Citação de: Dilacrius online 28/03/2014 às 15:54
Show de bola, já está nos meus favoritos rapaz.
Aproposito, como você vai fazer o 2#? Não vejo como esse mapa pode melhorar  :clap:

Que bom que gostou, Dilacrius. E deixe de besteira, meu caro, ainda existe muito o que melhorar no mapa.  :XD:

Citação de: TokusatsuBR online 05/04/2014 às 22:14
Mistyrol,poderia disponibilizar esse tileset aqui no tópico?

Não querendo ser chato nem nada, mas não irei disponibilizar aqui os tilesets por diversos motivos, entres eles estão:

Eu não uso tilesets separados para fazer um mapa, eu edito os tilesets pegando um simples elemento e juntando com outros objetos de outros tilesets e dessa forma eu acabo criando o meu próprio tileset.

Alguns elementos que estão no mapa fazem parte de tilesets pagos onde é preciso comprá-los para poder utilizá-los, caso eu os postasse seria considerado pirataria, além de não ter a permissão dos autores.

Desculpe por isso, mas não fique triste, a maioria dos elementos podem ser encontrados por aí, quase todos eles são do mega pack da Celianna:XD:

Citação de: TokusatsuBR online 05/04/2014 às 22:14
Mistyrol,poderia disponibilizar esse tileset aqui no tópico?


Citar
Não querendo ser chato nem nada, mas não irei disponibilizar aqui os tilesets por diversos motivos, entres eles estão:

Eu não uso tilesets separados para fazer um mapa, eu edito os tilesets pegando um simples elemento e juntando com outros objetos de outros tilesets e dessa forma eu acabo criando o meu próprio tileset.

Alguns elementos que estão no mapa fazem parte de tilesets pagos onde é preciso comprá-los para poder utilizá-los, caso eu os postasse seria considerado pirataria, além de não ter a permissão dos autores.

Desculpe por isso, mas não fique triste, a maioria dos elementos podem ser encontrados por aí, quase todos eles são do mega pack da Celianna:XD:
Mapeamento avançado, é elementar meu caro...
Bom, nem é tão caro assim os tiles na RMWeb. Acredito que são na base dos 10 $
Mas não precisa usar eles para se fazer um bom mapa.
Mas aí você pergunta: "Mas por que vocês compram?"
Resposta: Assim como o designer precisa de brushes, o pixel artist precisa de palletes, o compositor precisa de instrumentos, o Mapper vai precisar de um estoque de resources para seus mapas, independente de qual for, sempre que ele precisar de um certo tile, por simples que seja, 1 pode fazer a diferença em um mapa.
Ainda vou ver se ensino isso...
E misty, o char me lembra o King de alguma forma '-'.
Seria interessante criar aulas tanto para o photoshop e gimp, mas eu acho que já tem uma aula assim na rmvx.net

28/02/2015 às 23:27 #13 Última edição: 01/03/2015 às 00:00 por benner
Amigo.. tenho uma dúvida.. eu tenho a imagem de uma árvore que é 32 > por 64 de altura..
a imagem é completa.. como faço pra separar a parte que o herói vai passar por baixo e a parte que não é "passável" ?

obrigado

28/02/2015 às 23:46 #14 Última edição: 01/03/2015 às 00:22 por Raizen
Coloca a árvore na imagem que cobre o mapa, a que vai usar o Picture fix, ai você coloca um tile invisivel não passável na base da árvore :).