Tiled para o
CreateJS
Hamilton Lima
2013
Definições
• Tiled – Ferramenta para edição de
mapas e fases e outras coisas
• CreateJS – Biblioteca Javascript para
criar...
Tiled em ação
• Criar Camadas
• Nomes fáceis
• Evitar acentos nos nomes
como tiled fala
com o
createJS ?
CreateJS
Tiled
JSON =
Javascript
object
notation
<script>
var pessoa = {
nome: "joao", idade: 34 };
alert(pessoa.nome);
</script>
cuidado
código
complicado !!
level1.json
level1.js
var data =
foi fácil,
cadê o resto
do código ?
Resumo dos passos
1. Converter arquivo JSON para JS
2. Criar spritesheet com imagens usadas
3. Percorrer lista de camadas ...
Converter arquivo JSON para JS, ou em
outras palavras colocar o conteúdo do
JSON em uma variável
level1.json
level1.js
pas...
passo 2
Criar spritesheet com imagens usadas. este exemplo considera o
uso de somente um spritesheet no tiled, e monta um ...
Dica :
processtiles somente é
executado quando a
criação do spritesheet é
concluida.
passo 3
Percorrer lista de camadas, se o tipo de camada
é tilelayer, percorre data para desenhar.
for(n in map.layers){
if...
passo 4
Criar um BitmapAnimation para cada tile e chamar
gotoAndStop, assim conseguimos exibir somente uma
imagem do sprit...
Acesse o exemplo
completo em :
http://goo.gl/gwjDK2
ou em : https://github.com/hamilton-lima/javascript-
samples/blob/mast...
fim.
Tiled para CreateJS
Tiled para CreateJS
Tiled para CreateJS
Próximos SlideShares
Carregando em…5
×

Tiled para CreateJS

557 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
557
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.

×