Isometric Grid – Criando uma grade isométrica em menos de 2 minutos

/, Criação de Jogos/Isometric Grid – Criando uma grade isométrica em menos de 2 minutos

Isometric Grid

Nesse artigo rápido irei explicar uma forma bem rápida de construir uma grade Isométrica popularmente conhecida como isometric grid. A isometric grid foi bastante utilizada em games da década de 80 e 90 para simular o 3D e hoje é bastante utilizada na criação de assets para jogos 2D e concept arts para assets de jogos em 3D.

A grande maioria de jogos mobiles que encontramos principalmente na categoria de estratégia são isométricos podemos dizer assim, muitos deles utilizam o 3d para renderizar os seus assets mas muitos jogos ainda utilizam o bom e fiel 2d do início ao fim.

Coloquei abaixo alguns exemplos de assets construídos com a Isometric Grid:

Criando uma isometric-grid

Bom, então depois de ter mostrado para você a utilização e importância da Isometric Grid vamos aprender como construir uma, vamos lá?

1º Passo – Criar um novo arquivo

Crie um novo arquivo com as configurações abaixo:

Criando uma isometric-grid

 

2º Passo – Criação das colunas na Isometric Grid

Selecione a ferramenta Line Tool (u) e faça uma linha vertical pressionando o shift de cima a baixo da folha com a cor de preenchimento preta. Após fazer a linha duplique a camada apertando Ctrl + j por 30 vezes para criar 30 linhas. Pegue a última layer duplicada e com o shift pressionado arraste-a para o lado direito do papel, como na imagem abaixo:

Criando uma isometric-grid

3º Passo

Selecione todas as layers das linhas e com a ferramenta selection tool selecionada vá na barra de propriedades no topo e selecione a opção “Distribute horizontal centers” distribuindo todas as linhas horizontalmente com o mesmo espaçamento entre elas.

Criando uma isometric-grid

4º Passo

Após ter feito isso, clique com o botão direito do mouse sobre as layers selecionadas e selecione a opção Merge Shapes e duplique mais duas vezes essa camada.

Criando uma isometric-grid

5º Passo

Com a Layer do meio selecionada (linhas copy) vá no menu Edit > Transform > Rotate e rotacione para a esquerda 60º.

Criando uma isometric-grid

6º Passo

Selecione agora a layer de cima (linhas copy 2) e faça o mesmo que fez no passo anterior, porém para o lado direito 60º.

Criando uma isometric-grid

7º Passo

Agora selecione as 3 layers e clique com o botão direito do mouse e selecione a opção Merge Shapes, redimensione na tela para que pegue de uma ponta a outra com o shift pressionado e pronto, sua isometric grid está feita e agora você poderá começar a criar os seus próprios assets para o seu jogo!

Criando uma isometric-grid

Criando uma isometric grid

Você gostou desse artigo, ele foi importante para você? Comenta aqui embaixo nos comentários o que achou e compartilha com seus amigos para que possamos continuar a fazer mais artigos interessantes sobre criação de jogos.

Grande abraço e até o próximo artigo!

 

 

Por | 2017-10-25T22:00:13+00:00 14/03/2016|Artigos, Criação de Jogos|

13 Comentários

  1. Victor Oliveira 17/02/2016 at 7:36 am - Reply

    Diemano,

    Parabéns pelo artigo, realmente muito interessante especialmente para quem precisa de uma maior noção de design! Eu tenho uma dúvida (sobre os próximos capítulos) bem simples referente à animação e sobre o modo como você escutará eventos (cliques nos botões) – que tipo de tecnologia você irá utilizar? (Ex: AS3, Flash, Click Event – Unity); Não ficou claro pra mim se você irá entrar nesse assunto nos próximos artigos ou se a ideia aqui é somente passar conhecimento relativo à parte de design.

    Obrigado pela atenção ^^

    • Diemano 17/02/2016 at 10:13 am - Reply

      Olá Victor que bom que gostou do artigo, especificamente nessa série irei abordar a interface gráfica (design) da tela inicial de um jogo de forma simples até mesmo para a galera que não conhece nada de design possa começar a criar o seu jogo. Essa é a ideia! 🙂

      Em breve estarei aprofundando mais em outros temas, inclusive implementando o design na Engine!

      Qualquer dúvida é só falar!!

  2. Mikhael 17/02/2016 at 5:55 pm - Reply

    Gostei Muito desse artigo, me ajudou a tirar umas duvidas e aprender coisas novas
    espero pelos próximos.

    • Diemano 17/02/2016 at 6:22 pm - Reply

      Que bom Mikhael que gostou, em breve estarei postando mais 🙂

  3. Maycon Deivid Deivid 21/02/2016 at 8:46 am - Reply

    Show…. Sou um apaixonado por tecnologias e fico super feliz quando encontro pessoas dispostas a repassar conhecimentos, irei acompanhar ate o fim..

    • Diemano 21/02/2016 at 9:00 am - Reply

      É isso ai Maycon estamos juntos! 🙂

  4. Mario Felipp 26/02/2016 at 10:24 pm - Reply

    ola estou acompanha sua aula estou me interesando no assunto eu queria sabe qual o photoshop que voce utiliza

    • Diemano 27/02/2016 at 12:08 am - Reply

      Fala Mario tudo blz? Eu utilizo o Photoshop CC!

  5. Alessandro Silva Dos Santos 15/03/2016 at 2:09 pm - Reply

    Mais uma vez parabéns pelo tutorial, que venha mais vou usar no meu dia a dia, nas ilustrações técnicas que faço também. Muito obrigado!

    • Diemano 15/03/2016 at 2:15 pm - Reply

      😉 Valeu! Grande abraço!!

  6. João Victor 16/03/2016 at 1:53 pm - Reply

    Eu gostaria de fazer uma pergunta, a aula sera gravada ? É que eu tenho um problema de esquecer as coisas muito facilmente, então seria de uma grande ajuda se ela fosse gravada 😀 e parabéns pelo seu tutorial 😉 , Te Vejo na aula 😉

    • Diemano 16/03/2016 at 1:59 pm - Reply

      Olá João Victor, não se preocupe que lhe avisaremos no dia e na hora que vai começar para não esquecer 😉

      • João Victor 16/03/2016 at 2:01 pm - Reply

        Bom, mas o que eu estou falando é que eu possa esquecer o conteúdo :/

Deixe um comentário