Este documento descreve como usar o editor de mapas Tiled junto com a biblioteca JavaScript CreateJS para criar jogos e visualizações interativas. Ele explica como Tiled gera arquivos JSON e como CreateJS lê esses arquivos para renderizar os mapas, incluindo a criação de spritesheets e animações de tiles.

1. Tiled para o
CreateJS
Hamilton Lima
2013

2. Definições
• Tiled – Ferramenta para edição de
mapas e fases e outras coisas
• CreateJS – Biblioteca Javascript para
criar jogos e visualizações interativas

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

5. como tiled fala
com o
createJS ?

7. CreateJS
Tiled

9. JSON =
Javascript
object
notation

10. <script>
var pessoa = {
nome: "joao", idade: 34 };
alert(pessoa.nome);
</script>

11. cuidado
código
complicado !!

12. level1.json
level1.js

13. var data =
foi fácil,
cadê o resto
do código ?

14. Resumo dos passos
1. Converter arquivo JSON para JS
2. Criar spritesheet com imagens usadas
3. Percorrer lista de camadas e o array data
para desenhar cada camada
4. Criar um BitmapAnimation para cada tile e
chamar gotoAndStop

15. Converter arquivo JSON para JS, ou em
outras palavras colocar o conteúdo do
JSON em uma variável
level1.json
level1.js
passo 1

16. passo 2
Criar 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);

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

18. passo 3
Percorrer 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
}
}
}

19. passo 4
Criar 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...
}

20. Acesse o exemplo
completo em :
http://goo.gl/gwjDK2
ou em : https://github.com/hamilton-lima/javascript-
samples/blob/master/json/tiled/level1a.html

21. fim.