Tiled para CreateJS

528 visualizações

Publicada em

Processo de criar um mapa usando a ferramenta Tiled e exportar o conteúdo para ser apresentado usando a biblioteca javascript CreateJS

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
528
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
4
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Tiled para CreateJS

  1. 1. Tiled para o CreateJS Hamilton Lima 2013
  2. 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. 3. Tiled em ação • Criar Camadas • Nomes fáceis • Evitar acentos nos nomes
  4. 4. como tiled fala com o createJS ?
  5. 5. CreateJS Tiled
  6. 6. JSON = Javascript object notation
  7. 7. <script> var pessoa = { nome: "joao", idade: 34 }; alert(pessoa.nome); </script>
  8. 8. cuidado código complicado !!
  9. 9. level1.json level1.js
  10. 10. var data = foi fácil, cadê o resto do código ?
  11. 11. 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
  12. 12. 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
  13. 13. 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);
  14. 14. Dica : processtiles somente é executado quando a criação do spritesheet é concluida.
  15. 15. 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 } } }
  16. 16. 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... }
  17. 17. Acesse o exemplo completo em : http://goo.gl/gwjDK2 ou em : https://github.com/hamilton-lima/javascript- samples/blob/master/json/tiled/level1a.html
  18. 18. fim.

×