Slides

Tiled para CreateJS

Description
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…
Categories
Published
of 21
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Related Documents
Share
Transcript
  • 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
  • 4. como tiled fala com o createJS ?
  • 5. CreateJS Tiled
  • 6. JSON = Javascript object notation
  • 7. <script> var pessoa = { nome: "joao", idade: 34 }; alert(pessoa.nome); </script>
  • 8. cuidado código complicado !!
  • 9. level1.json level1.js
  • 10. var data = foi fácil, cadê o resto do código ?
  • 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. 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. 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. Dica : processtiles somente é executado quando a criação do spritesheet é concluida.
  • 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. 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. 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. fim.
  • We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks