Suporte ao desenvolvimento de jogos!


    Organizando Tilesets

    Compartilhe
    avatar
    eusouojiin
    Novato
    Novato

    Mensagens : 15
    Créditos : 4

    Organizando Tilesets

    Mensagem por eusouojiin em Sab Out 29, 2011 1:26 am

    Isso é uma coisa simples de se fazer, mas dá um pouco de trabalho caso tenha que fazer muitas tilesets, e muita gente tem dúvida na hora de fazer.

    Programa necessário:
    Photoshop ou qualquer outro editor de imagens do gênero. No meu caso, usei Photoshop CS4 Extended.

    Dificuldade:
    Fácil

    Descrição:
    Esse tutorial ensina como fazer um conjunto de tilesets. Por exemplo: Eu tenho duas casas em imagens separadas, mas não quero colocar as duas separadas na pasta, então, eu junto as duas em uma imagem só. Eu usei coisas pequenas como exemplo, como casas, mas esse tutorial ajudará mais, caso queira juntar muitas tilesets, independete do tamanho

    Conteúdo:
    Pixels, Cores, e umas pequenas dicas em Photoshop que podem ajudar muito na hora de fazer tilesets.

    Vou postar o download de uma base na extensão .psd (extensão usada pelo photoshop)
    Spoiler:
    Download base.psd
    A base está no tamanho 288x11872 pixels. O normal é usar 256x"Altura que você quer". Elá está no tamanho 288x11872, porque precisei fazer algumas tilesets e deixei assim já.


    Bem, vamos ao tutorial.
    Vou basicamente explicar como usar esta base, e explicarei algumas coisas que algumas pessoas não sabem.


    Pixels:
    Esta imagem mostra um quadrado, na cor vermelha, de 32x32 pixels. Esse é o tamanho de cada quadrado no Editor de Mapa do Eclipse Origins. Prestem bem atenção que nas extremidades o quadrado termina, mas quando eles se juntam, na parte onde se tocam, a espessura é dobrada, pois são dois quadrados colados.

    Spoiler:

    Pixels²:
    Na imagem abaixo mostra a tileset colocada por cima da base, em uma layer diferente. Tiles como de piso e coisas do tipo, ocupam um quadrado inteiro, sem deixar nenhum espaço, já as outras, como plantas e pedras pequenas, ocupam um quadrado inteiro, só que deixando espaços; dá pra perceber isso, pois elas sempre acabam em um quadrado, sem deixar nenhum pedaço delas começarem em outro quadrado. Mas é claro que há exceções para começar em outro quadrado, caso a imagem seja muito grande.
    Procure sempre deixar suas tiles de um jeito que fiquei boa para seus players, como a entrada de uma porta ficar centralizada em um quadrado, pois será por ali que o player passará.

    Spoiler:

    Pixels³:
    Como eu já disse, os quadrados dos mapas são de 32x32 pixels, e os cálculos para saber o tamanho que vai usar não é tão complicado. O tamanho 256 pixels, é a mesma coisa que 8 quadrados. Para fazer esta conta é simples, basta dividir 256 por 32, ou seja, a largura da tileset divida pela largura de um quadrado.
    Vou dar um exemplo:
    Spoiler:
    Exemplo: Eu tenho duas tilesets, uma de 256x3583 pixels, e outra de 256x1727, e quero juntar as duas em uma. Os 256 pixels já estão certos, e para saber isso eu divido o 256 por 32, se der um numero redondo, nesse caso dá 8, eu posso usar este tamanho. Agora, para números como o 1127 e o 3583, eu tenho que fazer outro cálculo. Neste caso, eu vou pegar o 1127 e dividir por 32, vai dar um número quebrado: 35,21875. Agora eu preciso pegar o 35 e multiplicar por 32, que vai dar 1120. Então, o tamanho certo para usar é de 1120, e não de 1127. Eu tenho que fazer isso com os 3583 pixels também. Agora basta eu somar os resultados, e dividir por 32, se der um numero inteiro, eu uso o tamanho que eu dividi por 32 para criar a imagem e juntar as duas.

    Cores:
    As cores do fundo não fazem diferença, mas as melhores cores para se usar são:
    Esse tipo de rosa: #ff00ff, que é um dos mais comuns;
    Esse tipo de azul: #155471;
    E as cores Preta e Branca

    Esta imagem abaixo indica o pixel que deixará o fundo invisível quando a tile for adicionada ao mapa. Aquele pixel, o ponto em vermelho apontado pela minha "seta", deve ser da cor do resto do fundo, e não pode ter nada por cima, pois aquilo indica a cor que ficará invisível.

    Spoiler:

    Photoshop

    Downloads:
    Photoshop CS4 dividido em 6 partes:
    Spoiler:
    Parte 1
    Parte 2
    Parte 3
    Parte 4
    Parte 5
    Parte 6

    Photoshop CS5 Portátil (em português):
    Spoiler:
    Megaupload
    Hotfile
    Deposit Files

    Layers:
    Layers não são nada mais que camadas. Elas determinam qual imagem vai ficar por cima, e qual imagem ficará por baixo.
    Na imagem abaixo, eu coloquei nome nas camadas. A camada que está com o "olho" do lado esquerdo desmarcado, é a camada que não aparecerá. Toda vez que eu desmarcar um daqueles "olhos" a camada ficará invisível; a camada "Tile", são as tilesets, a camada "base" é a base.psd que postei aqui, e o "fundo" é apenas a cor.
    Na imagem 1 a "base" está por baixo da "Tile", e na imagem 2 está por cima.

    Spoiler:


    Canvas Size:
    Este comando serve para mudar o tamanho do documento sem alterar o tamanho das layers, ou seja, só vai alterar o tamanho total, mas suas imagens que estiverem no documento, continuarão intactas.
    Para usar este comando basta ir no menu de cima do Photoshop, e ir em Image>Canvas Size. Na tela que aparecer, coloque as medidas que deseja, em pixels, e pronto.


    Magic Wand Tool (Varinha Mágica):
    Caso você queira tirar o fundo azul, por exemplo, de uma tileset sem danificar as construções, árvores e outras coisas, basta usar esta ferramenta. Para usá-la, basta selecionar a ferramenta como na imagem abaixo, ou apertar a tecla W do teclado. Quando estiver selecionada, clique na imagem com o botão direito do mouse e escolha a opção Color Range. Abrirá uma nova tela, e basta você selecionar a cor do fundo que você quer remover com o "coletor de cores" que o mouse se tornará, e apertar em ok. Fazendo isso, tudo que estiver da cor que você escolheu, será selecionado, e basta você apertar delete para excluir o fundo.
    Spoiler:



    Bem, gente, é isso. Desculpa pelo tamanho do tutorial, mas é que eu gosto de explicar as coisas bastante. Este é meu primeiro tutorial e espero que gostem, qualquer dúvida, basta me perguntar, ajudarei em qualquer coisa que estiver ao meu alcance.

    Créditos:
    Spoiler:
    Eu, por ter feito o tutorial
    Aldeia, por liberar um espaço para este e muitos outros tutorias, duvidas e afins
    The Rebels, pelos downloads dos Photoshops

      Data/hora atual: Dom Out 21, 2018 5:45 pm