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:
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:
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:
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.
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.
5º Passo
Com a Layer do meio selecionada (linhas copy) vá no menu Edit > Transform > Rotate e rotacione para a esquerda 60º.
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º.
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!
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!
Professor, empreendedor e idealizador do Congames. É apaixonado por Criação de Jogos e quer ajudar você a construir o seu primeiro game.
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 ^^
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!!
Gostei Muito desse artigo, me ajudou a tirar umas duvidas e aprender coisas novas
espero pelos próximos.
Que bom Mikhael que gostou, em breve estarei postando mais 🙂
Show…. Sou um apaixonado por tecnologias e fico super feliz quando encontro pessoas dispostas a repassar conhecimentos, irei acompanhar ate o fim..
É isso ai Maycon estamos juntos! 🙂
ola estou acompanha sua aula estou me interesando no assunto eu queria sabe qual o photoshop que voce utiliza
Fala Mario tudo blz? Eu utilizo o Photoshop CC!
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!
😉 Valeu! Grande abraço!!
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 😉
Olá João Victor, não se preocupe que lhe avisaremos no dia e na hora que vai começar para não esquecer 😉
Bom, mas o que eu estou falando é que eu possa esquecer o conteúdo :/