Como usar um sprite?
O crafty possui um componente nativo chamado Sprite. Mas ao invés dele iremos usar o método Crafty.sprite, que serve para configurar com mais facilidade o componente Sprite. Ele possui a seguinte sintaxe:
Crafty.sprite( largura , altura , endereço_da_imagem , objeto_mapa);
Os argumentos "largura" e "altura" são a largura e altura de "cada sprite". O endereço é nada mais do que aonde a imagem está. E o "objecto_mapa" é um objeto onde cada membro será o nome do sprite com uma Array com dois numeros representando o X e Y relativos do sprite na imagem. Antes que você pense que é complicado, vamos ao exemplo:
A imagem acima possui largura de 256 pixels e uma altura de 256 pixels também. Vamos agora dividir ela em vários quadradinhos de 32x32 pixels:
Notamos agora que podemos ver cada sprite em seu espaço de 32x32 pixels. Isso que está vendo é um spritesheet ou mapa de sprites. Agora vamos montar um sistema de 2 coordenadas (colunas x e linhas y), veja:
- No X0 e Y0 temos uma "poção com liquido verde".
- No X3 e Y6 temos uma "cruz vermelha".
- No X5 e Y0 temos "chave dourada".
No crafty podemos usar esse mesmo sistema para configurar nossos sprites.
Sprites no Crafty
Agora vamos usar na prática o Crafty.sprite. Veja o código:
No codigo acima montei um mapa de sprites na váriavel "mapa". Cada membro do objeto possui uma Array com dois números o X e Y de coordenas. Veja que a chave dourada ficava no X5 e Y0, então criei uma Array com os números 5 e 0. Note que a nossa imagem possuía vários sprites, mas configurei apenas 3 deles. Depois que uso o Crafty.sprite os 3 sprites escolhidos agora são "componentes" do jogo. Então para usar eles você precisa apenas adiciona-los numa entidade desejada, como fiz no código. Para visualizar o resultado do código acima, clique em RESULT no canto superior direito do JSFiddle. Assim você verá os 3 sprites que escolhi. Aconselho você clicar no "+" perto do result e modificar o mapa de sprite para tentar colocar outros sprites da imagem. Tente, é fácil!
Caso você tenha ficado com alguma dúvida, por favor fale sobre ela no fórum. Irei te ajudar com maior prazer. O tópico para esse post é:
https://groups.google.com/forum/#!topic/upanddraw/IpnkdRqZEuE
Até a próxima!
