Corona SDK tutorial 02: Isometric Tile-Based

Criar jogos envolve, muitas vezes, enganar pessoas. E uma destas formas é o uso da visão isométrica que é um método de exibição usado para criar uma ilusão de 3D para um jogo em 2D.

Para este tutorial iremos utilizar uma técnica bastante conhecida nos vídeo games chamada de tile-based, que nada mais é do que criar uma área de jogo a partir de pequenos pedaços chamados de tiles. Estes por sua vez podem ser quadrados, losangos, hexágonos, etc.

isometric_tile_based_samples

Primeiramente, vamos construir nosso cenário, e para isso precisamos definir onde o personagem poderá ou não andar. Para este tutorial iremos adotar dois tiles: andável (0) e não andável (1):

Após definir o cenário, vamos desenha-lo. Para isso precisamos definir o tamanho e formato do tile, para então percorrer nosso tilemap. Vamos desenhar losangos com 56 pixels de largura e 28 de altura utilizando a função display.newPolygon(), porém você pode alterar isso para uma imagem depois.

Feito isso teremos algo semelhante a imagem abaixo. A parte verde representa onde o jogador pode andar e a parte azul onde ele não pode andar:

Agora que temos nosso mapa pronto, vamos adicionar o personagem, que por enquanto será um retângulo:

Pronto, falta apenas fazer o personagem andar através do nosso cenário. Neste tutorial irei mostrar como fazer isto movendo o personagem para um local tocado pelo jogador. Para isso vamos adicionar um listener que irá aguardar um toque. Assim que o evento de toque for disparado, verificamos qual tile foi tocado. Após isso devemos encontrar o caminho entre a posição do personagem e a desejada utilizando um algoritmo de pathfinding. Não vamos reinventar a roda, então recomendo utilizar esta biblioteca escrita em Lua que atende as nossas necessidades.

Parabéns! Você acaba de criar um retângulo personagem que anda para onde o jogador toca.

tutu_isometric

Para fins didáticos, mostrei o código em partes separadas sem seguir a ordem correta, para visualizar o projeto e a ordem correta do código acesse nosso Github. Depois disso é só alterar os pisos e o personagem e criar seu mundo isométrico.

Captura de Tela 2015-07-27 às 23.33.43

Referencias:

Creating Isometric Worlds: A Primer for Game Developers
Isometric Tiles Math

  • Eric Andrade

    Muito top!! 😀

  • mj

    hi
    i downloaded source code ,
    why i can not build it for testing on device?

    the console say its line #1 from lookuptable.lua.
    error ===> ‘)’ expected near ‘,’
    any help??

    thanks

    • mj

      if its possible please answer me by Email. thanks 🙂

    • Maicon Feldhaus

      Weird man! I downloaded the source code now and it’s worked.
      What’s this lookuptable.lua file?