TUTORIAL: como reajustar tilesets e adicionar mais coisas?

Daí você baixa um tileset e vai todo contente adicionar no acervo do seu projeto, configura tudo e...ficou uma droga! Um objeto fica cortado em 3, quando deveria ser apenas cortado em 2 partes ou dois objetos ficam na mesma área, nada encaixa, outros objetos ficam grudados, a sombra fica longe... É um desastre! Mas calma, é bem fácil de resolver.

Clique para ampliar.
Aqui usarei o programa GIMP que é gratuito e você pode baixar por aqui, mas você também pode usar outros editores de imagens como o Photoshop por exemplo. As ferramentas necessárias serão a grade, recortar, colar, lupa (ou zoom) e um pouco de paciência.
.
Abra o GIMP e em seguida abra o arquivo da imagem nele (Arquivo > Abrir).

Clique para ampliar.
Cada objeto, cada parte, cada plantinha ou o que quer que seja que esteja compondo o seu cenário deve ficar milimetricamente no lugar certo ou na hora de montar tudo ficará um desastre! Mas como conseguir essa façanha? O segredo é utilizar uma ferramenta chamada “grade”. Ela funcionará como uma espécie de gabarito para que você consiga ajustar e acertar cada parte do cenário de forma adequada.
.
Você deve configurar a grade (Imagem > Configurar Grade) da seguinte forma:

Clique para ampliar.
Vá na parte do espaçamento e mude os valores para:
Altura = 32
Largura = 32

.
Não precisa mexer em mais nada. Aliás, eu sempre mudo a cor das linhas para vermelho para que possa visualizar melhor a grade na tela, mas fica a seu critério. Se desejar fazer o mesmo, mude a cor na opção “Cor de frente”. Dê um OK.
.
Ative a grade na imagem (Visualizar > Exibir grade). Pronto!
.
Clique para ampliar.
Agora vamos focar na imagem em si. Se preferir, utilize a Lupa para dar um zoom na imagem. Ela fica na Caixa de ferramentas.

.
O exemplo abaixo ilustra perfeitamente o que significa o desalinhamento do objeto.

.
Repare que o “gira-gira” do parquinho está totalmente fora de posição. Selecione a ferramenta “Seleção retangular” (um quadradinho no canto da Caixa de ferramentas), corte o objeto com cuidado para não atingir outras partes de outros objetos (se necessário, utilize a ferramenta “Seleção livre” para fazer um contorno à mão livre).

Seleção retangular à esquerda e seleção livre à direta.
A parte selecionada ficou com um pontilhado que se move ao redor. Em seguida recorte a imagem (ctrl+x ou “Editar > Cortar).
.
Atenção: você deve CORTAR e não COPIAR, pois precisamos “apagar” temporariamente a imagem para poder reposicioná-la.
.
Cole a imagem (ctrl+v ou “Editar > colar”). Agora tem um pequeno truque que na verdade é uma função exigida pelo GIMP para que ele compreenda a nova imagem colada como uma camada de fato. Isso significa que você poderá modificar a imagem colada como quiser, mas antes tem que fazer o seguinte: vá no menu de camadas e texturas, clique com o botão DIREITO sobre a opção “Camada flutuante” e selecione “Para nova camada”.

Clique para ampliar.
Pronto, agora ele vê como uma camada nova e consequentemente como uma imagem. Clique sobre essa nova imagem que você colou para selecioná-la (para excluir essa imagem, basta clicar sobre ela e depois sobre a lixeirinha que tem no cantinho do mesmo menu).

Clique para ampliar.
Feito isto, selecione a “Ferramenta de movimento” (uma cruz com setinhas) no menu de ferramentas. Clique sobre a imagem que quer movimentar, segure e arraste. Tente encaixar a imagem nos quadradinhos de forma que ela fique certinha como naquele exemplo do gira-gira. Você pode usar as teclas direcionais do seu teclado para ajudar a fazer ajustes finos na movimentação.

.
.
Faça o mesmo com todos os outros objetos que precisem ser ajustados.
.
O GIMP salva automaticamente todo arquivo com extensão “.xcf”, que o RPG Maker não consegue ler. Então teremos que converter esse arquivo para uma extensão compatível. A extensão perfeita para isto, pois salva a imagem com a transparência, é a extensão “.png”. Você deve exportar o arquivo para PNG (Arquivo > Exportar como...).
.
Primeiro dê um nome ao seu arquivo (quadro vermelho). Cuidado pra não apagar a extensão dele (as siglas depois do ponto). Em seguida escolha um lugar onde quer salvar o arquivo (quadro verde). Por fim escolha a extensão do arquivo na lista (quadro azul). No nosso caso é a PNG. Clique em Exportar.

Clique para ampliar.
Aparecerá mais uma janela perguntando algumas qualidades da imagem. Simplesmente selecione todas as opções, deixe a compressão sempre em 9 e clique em Exportar.

Clique para ampliar.
Agora você pode utilizar o arquivo no jogo. Basta apenas incluí-lo no acervo do seu projeto, configurar o tileset e por fim montar o seu cenário. Se você fez tudo direitinho, então o cenário ficará perfeito, se não retorne ao GIMP e faça mais alguns ajustes.

Ajustes pequenos, mas que fazem uma grande diferença. Clique para ampliar.
Alguns objetos não precisam ficar exatamente alinhados, pois às vezes você quer uma parte deles encostada na parede ou que fique por cima dos personagens, mas isso só será decidido quando você montar o cenário pro seu jogo.
.
O interessante dessa técnica é que você pode fazer o mesmo com charsets e também pode incluir objetos de outros tilesets em um já existente ou montar o seu próprio tileset com os objetos que você precisa/quer. Apenas não esqueça de creditar o(s) autor(s) original(s) do(s) tileset(s) que você usou para montar o seu próprio.

2 comentários:

  1. Caramba Liuka, esse tutorial não poderia ter vindo em melhor hora, eu estava tendo justamente esse problema, mas graças a você já consegui resolver, você usou até o gimp, que é o programa que eu uso.

    ResponderExcluir

Os comentários são moderados para evitar SPAM.

Baú da Liuka