Tiled para o CreateJS

Hamilton Lima2013

Definições• Tiled – Ferramenta para edição de

mapas e fases e outras coisas• CreateJS – Biblioteca Javascript para

criar jogos e visualizações interativas

Tiled em ação• Criar Camadas• Nomes fáceis• Evitar acentos nos nomes

como tiled fala com o

createJS ?

CreateJS

Tiled

JSON = Javascriptobject notation

<script>var pessoa = {

nome: "joao", idade: 34 };

alert(pessoa.nome);</script>

cuidadocódigo

complicado !!

level1.json

level1.js

var data = foi fácil,

cadê o resto do código ?

Resumo dos passos1. Converter arquivo JSON para JS2. Criar spritesheet com imagens usadas3. Percorrer lista de camadas e o array data

para desenhar cada camada4. Criar um BitmapAnimation para cada tile e

chamar gotoAndStop

Converter arquivo JSON para JS, ou em outras palavras colocar o conteúdo do JSON em uma variável

level1.jsonlevel1.js

passo 1

passo 2Criar spritesheet com imagens usadas. este exemplo considera o uso de somente um spritesheet no tiled, e monta um objeto spritesheetData para montar o objeto spritesheet.

var spritesheetData = { images: [map.tilesets[0].image],frames: {

width:map.tilesets[0].tilewidth, height:map.tilesets[0].tileheight

}};spriteSheet = new createjs.SpriteSheet(spritesheetData);spriteSheet.addEventListener("complete", processTiles);

Dica : processtiles somente é executado quando a criação do spritesheet é concluida.

passo 3Percorrer lista de camadas, se o tipo de camada é tilelayer, percorre data para desenhar.

for(n in map.layers){if( map.layers[n].type == 'tilelayer' ){

for(i in map.layers[n].data){var tid = map.layers[n].data[i];// passo 4 aqui

}}

}

passo 4Criar um BitmapAnimation para cada tile e chamar gotoAndStop, assim conseguimos exibir somente uma imagem do spritesheet, usando o identificador de tile (tid) para indicar que imagem exibir.

for(i in map.layers[n].data){var tid = map.layers[n].data[i];

var tile = new createjs.BitmapAnimation(spriteSheet);tile.gotoAndStop(tid -1);// outras coisas...

}

Acesse o exemplo completo em : http://goo.gl/gwjDK2

ou em : https://github.com/hamilton-lima/javascript-samples/blob/master/json/tiled/level1a.html

fim.