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.