Download - Tiled para CreateJS
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.