Funcionamento do Exemplo
Clique sobre a imagem para fazer com que a joaninha apareça ou desapareça.
Informações úteis
Dê uma olhada no código fonte utilizado nessa página, pois ele serve de exemplo!
Scripts adicionais utilizados:
SpriteControl.js
Imagens utilizadas:
Joaninha
Fundo
Classes e Métodos
Aqui fica uma breve descrição da funcionalidade dos métodos e atributos das classes. Para mais informações, veja o código fonte dos scripts e dessa página.
Frame
A classe Frame representa um quadro da animação de um Sprite. Todo Sprite deve possuir ao menos um Frame.
Atributos
Todos os atributos dessa classe são somente para leitura.
- width: Largura do quadro
- height: Altura do quadro
- sourceX e sourceY: Posição do canto superior esquerdo do quadro dentro da imagem onde o quadro se encontra Coordenada que será considerada como centro do quadro (0,0 indica o canto superior esquerdo da imagem)
- originX e originY: Posição considerada como centro do quadro (0,0 indica o canto superior esquerdo do quadro)
- offsetX e offsetY: Complemento de originX e originY, dado como -originX e -originY
Construtor
- Frame(width, height, sourceX, sourceY, originX, originY): Todos os parâmetros do construtor são obrigatórios, e correspondem diretamente aos respectivos atributos explicados acima
SpriteUtils
SpriteUtils não é uma classe, mas um objeto com métodos auxiliares.
Métodos
- fullFrame(image, frameOriginX, frameOriginY): Retorna um array com um único Frame que ocupa a área total da imagem dada, considerando frameOriginX e frameOriginY como sendo o centro desse Frame
- singleFrame(frameWidth, frameHeight, sourceX, sourceY, frameOriginX, frameOriginY): Retorna um array com um único Frame, com as dimensões dadas, considerando frameOriginX e frameOriginY como sendo o centro desse Frame
- framesByColumns(frameWidth, frameHeight, totalFrameCount, columnCount, sourceX, sourceY, frameOriginX, frameOriginY): Retorna um array com totalFrameCount Frames, com as dimensões dadas, dispostos em linhas, onde cada linha possui columnCount Frames (dispostos da esquerda para direita), considerando frameOriginX e frameOriginY como sendo o centro desses Frames (a posição do primeiro Frame é dada por sourceX e sourceY)
- framesByRows(frameWidth, frameHeight, totalFrameCount, rowCount, sourceX, sourceY, frameOriginX, frameOriginY): Retorna um array com totalFrameCount Frames, com as dimensões dadas, dispostos em colunas, onde cada coluna possui rowCount Frames (dispostos de cima para baixo), considerando frameOriginX e frameOriginY como sendo o centro desses Frames (a posição do primeiro Frame é dada por sourceX e sourceY)
- loadImages(callback, images): Carrega as imagens fornecidas em images (que pode ser um array explícito de Strings ou várias Strings passadas como argumento) e conforme o carregamento for ocorrendo, a função callback é chamada (callback deve possuir dois parâmetros: percentDone e images, onde percentDone vai de 0 à 1, indicando o progresso, e images é um objeto com as imagens carregadas, ou null caso o processo ainda não esteja concluído)
Sprite
Atributos
- image: Imagem utilizada para desenhar os Frames do Sprite
- frames: Array com os Frames do Sprite
- fps: Velocidade da animação do Sprite, em Frames por segundo, caso o Sprite possua alguma animação
- currentFrame: Índice do Frame atual dentro do array frames
- x e y: Posição do Sprite, dada com relação ao espaço do Mundo
- rotationDeg: Ângulo de rotação do Sprite, em sentido anti-horário, variando de -360° até 360°
- rotation: Valor em radianos do atributo rotationDeg (rotation não deve ser alterado manualmente, ele é alterado sempre que rotationDeg for alterado)
- scaleX e scaleY: Valor do redimensionamento do Sprite, onde 1 é o tamanho original, 1.1 é 10% maior, e assim por diante
- opacity: Opacidade do Sprite, onde 0 é totalmente transparente e 1 é opaco
- animationType: Tipo de animação realizada pelo método animate(), e pode ser Sprite.AnimationLooping (valor padrão), Sprite.AnimationPingPong e Sprite.AnimationOneShot
Métodos
- createNew(): Retorna um novo Sprite, copiando deste Sprite apenas os atributos image, frames e animationType
- createCopy(): Retorna um novo Sprite, copiando todos os atributos deste Sprite
- containsPoint(worldX, worldY): Retorna true se o ponto (worldX, worldY) estiver dentro do Sprite, caso contrário, retorna false (o ponto deve ser dado com relação ao espaço do Mundo)
- toObjectSpace(worldX, worldY): Retorna um ponto (x, y) com as coordenadas (worldX, worldY) convertidas do espaço do Mundo para o espaço do Sprite
- toWorldSpace(objectX, objectY): Retorna um ponto (x, y) com as coordenadas (objectX, objectY) convertidas do espaço do Sprite para o espaço do Mundo
- animate(deltaTime): Atualiza o atributo currentFrame com base no intervalo de tempo deltaTime, dado em segundos, e conforme o tipo de animação especificado em animationType
Construtor
- Sprite(image, frames): Todos os parâmetros do construtor são obrigatórios, e correspondem diretamente aos respectivos atributos explicados acima
SpriteControl
Atributos
- viewX e viewY: Posição do Mundo no canto inferior esquerdo da Vista
- onclick: Função para ser chamada quando a Vista for clicada (deve ter três parâmetros: viewX, viewY e button)
- onmousedown: Função para ser chamada quando um botão for pressionado sobre a Vista (deve ter três parâmetros: viewX, viewY e button)
- onmouseup: Função para ser chamada quando um botão for solto (deve ter três parâmetros: viewX, viewY e button)
- onmousemove: Função para ser chamada quando o cursor se mover sobre a Vista (deve ter três parâmetros: viewX, viewY e button)
- onkeydown: Função para ser chamada quando um tecla do teclado for pressionada (deve ter um parâmetro: keyCode)
- onkeyup: Função para ser chamada quando um tecla do teclado for solta (deve ter um parâmetro: keyCode)
Métodos
- setLightMode(isLightMode): Altera o modo como os Sprites são desenhados (quando isLightMode é true, os Sprites são somados à imagem)
- toWorldSpace(viewX, viewY): Retorna um ponto (x, y) com as coordenadas (viewX, viewY) convertidas do espaço da Vista para o espaço do Mundo
- toViewSpace(worldX, worldY): Retorna um ponto (x, y) com as coordenadas (worldX, worldY) convertidas do espaço do Mundo para o espaço da Vista
- containsPoint(worldX, worldY): Retorna true se o ponto (worldX, worldY) estiver dentro do Sprite, caso contrário, retorna false (o ponto deve ser dado com relação ao espaço do Mundo)
- toObjectSpace(worldX, worldY): Retorna um ponto (x, y) com as coordenadas (worldX, worldY) convertidas do espaço do Mundo para o espaço do Sprite
- toWorldSpace(objectX, objectY): Retorna um ponto (x, y) com as coordenadas (objectX, objectY) convertidas do espaço do Sprite para o espaço do Mundo
- drawSprite(sprite): Desenha o Sprite sprite
- drawSpriteFrame(sprite, frameIndex): Desenha o quadro de índice frameIndex do Sprite sprite
- drawStatic(sprite): Desenha o Sprite sprite, ignorando os atributos viewX e viewY, ou seja, assumindo que a coordenada do canto inferior esquerdo da Vista seja (0, 0)
- drawStaticFrame(sprite, frameIndex): Desenha o quadro de índice frameIndex do Sprite sprite, ignorando os atributos viewX e viewY, ou seja, assumindo que a coordenada do canto inferior esquerdo da Vista seja (0, 0)
Construtor
- SpriteControl(placeholderId, width, height): Cria a área de desenho dos Sprites, com dimensões width x height, no lugar do elemento HTML com id palceholderId
Em todos os métodos mostrados acima, exceto no construtor da classe Frame, caso sourceX ou sourceY não sejam fornecidos, será considerado o valor padrão 0. Caso frameOriginX ou frameOriginY não sejam fornecidos, será considerado o valor padrão que é a metade da largura ou metade da altura do Frame.