Como criar Tiles 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 de azulejo, que contém uma série de imagens pequenas (32 x 32 pixels). Cada objeto da 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 carrega 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 peça pode ser modificado 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 azulejo pode ser qualquer matriz bidimensional de inteiros.

• Rolagem de um tileset é simples. É fácil de fazer grandes mundos desdobramento com um sistema de telha, porque a tela é separado a partir dos dados. Os próprios azulejos raramente mover.

• As telhas são adequados para vários tipos de jogos. As telhas são frequentemente utilizados 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 DIRT = 1-var ÁGUA = 2-var NUMSTATES = 3-função Tile () {tTile = new Sprite (cena ", grass.png", 32, 32) -tTile.setSpeed ​​(0) - tTile.state = GRAMA-tTile.images = new array ( "grass.png", "dirt.png", "water.png") - tTile.row = 0-tTile.col = 0-tTile.setState = function ( estatais) {this.state = state-this.setImage (this.images [this.state]) -} // setStatetTile.getRow final = function () {return this.row-} // getRowtTile.getCol final = function ( ) {return this.col-} // getCol-tTile.getState final = function () {return this.state-} // fim getStatetTile.checkMouse = function () {if (this.isClicked ()) {newState = esta .state-newState ++ - if (newState> = NUMSTATES) {newState = 0-} // ifthis.setState final (newState) -} // fim do if} // fim ifreturn tTile-} // construtor Tile final

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 à base de cerâmica 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 tem 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 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 estado o azulejo 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 de matriz para cima com os valores constantes.

6. Definir uma linha e coluna.

   Os azulejos são geralmente colocados numa grelha bidimensional, de modo que pode ser muito útil para controlar linha e coluna do azulejo corrente.

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, ea imagem também é alterado, de modo a imagem correta será exibido na próxima atualização.

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

   Essas funções retornam 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 azulejos

Cada peça é uma ferramenta poderosa, mas o poder real da estrutura baseado em azulejo é como telhas são combinados para criar um mapa completo. o tileset é uma matriz bidimensional de objetos 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 function () {Tileset = new Array (linhas) -para (linha = 0- fileira lt; linha ROWS- ++) {Trow = new Array (COLS) -para (col = 0- col lt; col COLS- ++) {Trow [col] = new Tile () - xPos = 16 + (32 * COL) -yPos = 16 + (32 * linha) -tRow [col] .setPosition (xPos, yPos) -tRow [col ] .Row = row-Trow [col] .col = col-} // fim do col para looptileset [linha] = tRow-} // fim de linha para loop-} // setupTiles finais

Há apenas alguns pontos a ter em mente aqui:

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

• Passar por cada linha. Use um padrão para loop para percorrer todas as linhas.

• Cada linha é uma matriz de comprimento COLS. Uma matriz de duas dimensões é realmente um array de arrays. Realizar uma matriz de comprimento COLS para cada linha.

• Passo pelas 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 ladrilho. É possível multiplicar a linha e a coluna pela largura e altura da célula para determinar um posicionamento áspera.

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