Como criar telhas em seu jogo html5

Um mundo baseado em azulejo é uma técnica usada em jogos HTML5 para fornecer fundos flexíveis interessantes, sem custos de memória enormes. A idéia básica é a de tomar uma série de pequenas imagens e utilizá-los em conjunto para construir uma imagem de fundo completa.

Normalmente, você vai construir um objeto azulejo, que contém uma série de imagens pequenas (32 x 32 pixels). Cada objeto telha pode exibir qualquer uma das imagens no comando. Este esquema tem uma série de vantagens interessantes:

• Os requisitos de memória pode ser muito pequena. Cada imagem é carregada na memória apenas uma vez, para que você possa criar um mundo muito grande, com uma pequena pegada de memória.

• Você pode usar muitas peças diferentes. Você pode construir um mundo extremamente complexo com qualquer um dos belos conjuntos de azulejos você pode baixar a partir de sites como o OpenGameArt.org.

• O mapa é dinâmico. A imagem exibida em cada telha pode ser modificada em tempo de execução.

• As telhas podem ter efeitos de jogo. Você pode usar telhas para criar situações táticas interessantes, como a água que não pode ser ultrapassado ou montanhas que lhe dão uma vantagem para um defensor.

• Os mapas são simplesmente conjuntos de números inteiros. Para armazenar um mapa baseado em azulejo, você não precisa armazenar as telhas em tudo. Em vez disso, você simplesmente manter o controle dos estados de azulejos.

• Os mapas podem ser muito maior do que a tela. Um mapa telha pode ser qualquer matriz bidimensional de inteiros.

• Rolagem de um tileset é simples. É fácil de fazer grandes mundos de rolagem com um sistema de azulejo, porque o ecrã é separado dos dados. Os próprios azulejos raramente se mover.

• As telhas são adequados para vários tipos de jogos. As telhas são frequentemente usados ​​para jogos de RPG, bem como jogos de tabuleiro, jogos táticos e jogos de plataforma side-scrolling.

Como criar um objeto Tile

o Telha objeto é a base de mapas baseados em azulejo. Aqui está o código para um protótipo telha simples:

 var GRAMA = 0-var SUJIDADE = 1-var ÁGUA = 2-var NUMSTATES = 3-função da telha () {= tTile novo sprite (cena, "grass.jpg", 32, 32) -tTile.setSpeed ​​(0) -tTile.state = GRAMA-tTile.images = new Array ("grass.jpg", "dirt.jpg", "water.jpg") = 0 -tTile.row-tTile.col = 0-tTile.setState = função (estado) {= this.state estado-this.setImage (this.images [this.state]) -} // setStatetTile.getRow extremidade = função () {return this.row-} // final getRowtTile.getCol = função () {return this.col-} // final getCol-tTile.getState = função () {return this.state-} // extremidade getStatetTile.checkMouse = função () {if (this.isClicked ()) {newState = this.state-newState ++ - se (newState gt; = NUMSTATES) {newState = 0-} // ifthis.setState final (newState) -} // final se} // final ifreturn tTile-} // construtor telha extremidade

A parte mais significativa de uma telha é a sua natureza multi-estado. Tem vários estados. Cada estado exibe uma imagem diferente. Aqui está como escrevê-lo:

1. Prepare suas imagens.

   As partes mais visíveis do sistema baseado em azulejo são as várias imagens. Construir ou obter (com as permissões necessárias, é claro) algumas peças que você pode usar.

2. Construir constantes para os estados.

   A maneira mais fácil de trabalhar com estados é atribuir constantes para eles. Constantes têm a vantagem de ser facilmente legível por seres humanos e inteiros simples para o computador.

3. Construir um sprite padrão.

   A telha ainda é essencialmente um sprite. Ele normalmente não se movem, para que você possa definir a sua velocidade para 0. Use qualquer uma das imagens de sprite que você quer como padrão.

4. Atribuir um estado padrão.

   
   
   
   

   o Estado propriedade é o aspecto mais importante de uma telha. Ele indica que o estado de telha está a ser apresentado. o Estado valor deve ser sempre uma das constantes do estado.

5. Criar uma matriz de imagens.

   Cada peça terá acesso a todas as imagens possíveis. Armazená-los em uma matriz. Certifique-se de linhas da ordem gama acima com os valores constantes.

6. Definir uma linha e coluna.

   As telhas são geralmente colocados em uma grade bidimensional, por isso pode ser muito útil para rastrear linha e coluna da telha atual.

7. Adicionar um setState () método.

   Este método permite que você altere facilmente uma telha a qualquer um dos valores de estado. Use uma constante para assegurar o estado é reconhecido por suas telhas. o Estado propriedade é modificada para refletir o estado atual, e a imagem também é alterado, de modo a imagem correta será exibido na próxima atualização.

8. Proporcionar técnicas de recuperação de dados.

   Estas funções retornar a linha, coluna e estado atual da telha.

9. Permitir um comportamento edição.

   o checkMouse () método determina se o azulejo foi clicado. Se assim for, o estado é incrementado e o novo estado é exibido.

Como construir um mapa do jogo de telhas

Cada peça é uma ferramenta poderosa, mas o poder real da estrutura baseada em azulejo é como telhas são combinados para criar um mapa completo. o tileset é uma matriz de duas dimensões de objectos de cerâmica. Como a maioria das matrizes de duas dimensões, é normalmente administrada por um par de loops aninhados. Aqui está o código para a criação do tileset:

 setupTiles função () {= Tileset nova matriz (linhas) -para (linha = 0- fileira lt; linha ROWS- ++) {Trow = new Array (COLS) -Para (col = 0- col lt; col COLS- ++) {TROW [col] = new telha () - xPos = 16 + 32 * (col) -yPos = 16 + (32 * fileira) -tRow [col] .setPosition (xPos, ypos) -tRow [col ] .Row = linha-TROW [col] .col = COL-} // final col para looptileset [row] = tRow-} // extremidade da fileira para loop-} // setupTiles finais

Há apenas alguns pontos a ter em mente aqui:

• O conjunto de tiras é uma matriz. Cada membro da tileset matriz é na realidade uma fileira. Construir uma matriz de comprimento ROWS.

• Passo através de cada fileira. Use um padrão para lacete para o passo através de todas as linhas.

• Cada linha representa um conjunto de comprimento COLS. Uma matriz de duas dimensões é, na verdade, uma matriz de matrizes. Faça uma matriz de comprimento COLS para cada linha.

• Passo através das colunas. fazer uma para loop que acontece uma vez por coluna. Agora você tem duas variáveis ​​de contagem (linha e col), Que em conjunto descrevem a posição de cada telha na estrutura de duas dimensões.

• Criar uma nova telha. Basta usar o construtor da telha para construir uma nova telha.

• Definir a posição do azulejo. Você pode multiplicar a linha e coluna, a largura ea altura da célula para determinar uma colocação áspero.

• Atribuir os dados de linha e coluna para o sprite. Basta copiar o linha e col dados para as propriedades do sprite.