criação de animação com sprite com html canvas · criação de animação com sprite com html...

CPAN Prof. Andrea Garcia

Criação de Animação com Sprite com HTML CANVAS

Para executar estes exemplos utilizaremos nosso navegador, por causa dos arquivos de imagem.

Exemplo 2

Sprites

A sequência de Sprite utilizada neste exemplo foi extraída da internet:

Esta imagem tem 8 colunas por 2 linhas. Na primeira linha armazena vários momentos do

deslocamento do personagem indo para a direita e na segunda linha para a esquerda. Quando nosso

personagem está se movendo para a direita, temos que exibir todos os 8 sprites, um por um,

repetidamente. E então criará uma animação. Então vamos começar.

Coloque a imagem do Sprite na mesma pasta que estiver sua programação. Agora crie um arquivo

HTML chamado index.html. E crie a estrutura HTML básica da seguinte maneira

Listagem 1: index.html

<!DOCTYPE html> <html> <head> <title>JavaScript Sprite Animation Tutorial</title> </head> <body> <canvas id='canvas'></canvas> </body> </html>

LIstagem 2: script de desenvolvimento

<script> //Altura e largura do Canvas var canvasWidth = 650; var canvasHeight = 350; //A altura e largura do Spritesheet var spriteWidth = 864; var spriteHeight = 280; //Temos 2 linhas por 8 colunas no sprite sheet var rows = 2;


var cols = 8; //A linha 0 (primeira) é para o movimento da direita var trackRight = 0; //A linha 1 (segunda) é para o movimento da esquerda var trackLeft = 1; //Para obter a coluna de um sprite único dividiremos a coluna do sprite pelo número de colunas //porque todas as sprites são iguais na largura e altura var width = spriteWidth/cols; //O mesmo para a altura dividiremos a altura pelo número de linhas var height = spriteHeight/rows; //Cada linha contêm 8 frames e começará a mostrar o primeiro frame (assumindo o indexo 0) var curFrame = 0; //O total de frames é 8 var frameCount = 8; //x and y coordenadas para renderizar o sprite var x=0; var y=0; //x and y coordenadas do oanvas para obter um único frame var srcX=0; var srcY=0; //ajustando o movimento esquerdo var left = false; //Assumindo que movimento iniciará para o lado direito var right = true; //Velocidade do movimento var speed = 12; //Getting the canvas var canvas = document.getElementById('canvas'); //Configurando largura e altura do canvas canvas.width = canvasWidth; canvas.height = canvasHeight; //Estabelecendo conexão com canvas var ctx = canvas.getContext("2d"); //Criando um objeto da imagem de seu personagem var character = new Image(); //Informando o nome do arquivo sprite character.src = "character.png";


Agora vamos criar uma função para atualizar o índice de quadros. Como você pode ver uma variável

chamada curFrame que é inicializada com 0. Temos que atualizá-la toda vez que renderizarmos o

sprite. Então crie uma função chamada updateFrame ().

Listagem 3: Função de atualização do Frame

function updateFrame(){ //Updating the frame index curFrame = ++curFrame % frameCount; //Calculating the x coordinate for spritesheet srcX = curFrame * width; }

Agora amos criar a função para renderizar o sprite. Renderizamos a imagem usando o método

drawImage () com o contexto que foi estabelecido para a tela.

Listagem 4: Função draw()

function draw(){ //Updating the frame updateFrame(); //Drawing the image ctx.drawImage(character,srcX,srcY,width,height,x,y,width,height); } Precisamos chamar a função draw () repetidamente para continuar renderizando os sprites na tela. Isso pode ser feito facilmente usando o método setInterval. setInterval(draw,100); Primeiro parâmetro é o nome da função (draw) e o segundo parâmetro é o intervalo para chamar a função. Deverá ficar assim, um sprite por cima do outro:

Teremos que limpar o sprite já desenhado antes de renderizar o novo sprite. Para isso, vamos usar o método clearRect (). Basta colocar essa linha dentro da função updateFrame (). ctx.clearRect(x,y,width,height); Para adicionar a esquerda e escrever movimento, precisamos criar dois métodos de movimentação. Escreva o seguinte código:


Listagem 5: Função de movimento

function moveLeft(){ left = true; right = false; } function moveRight(){ left = false; right = true; }

Precisaremos modificar o método updateFrame () da seguinte forma:

function updateFrame(){ //Atualizando o frame index curFrame = ++curFrame % frameCount; //Calculando a coordenada x do spritesheet srcX = curFrame * width; //Limpando o frame desenhado ctx.clearRect(x,y,width,height); //Se esquerda for verdadeira o caractere não tiver atingido a borda esquerda if(left && x>0){ //calculate srcY srcY = trackLeft * height; //decreasing the x coordinate x-=speed; } // Se direita for verdadeira o caractere não tiver atingido a borda direita if(right && x<canvasWidth-width){ //calculating y coordinate for spritesheet srcY = trackRight * height; //increasing the x coordinate x+=speed; } }

Por fim, precisamos criar dois botões para a esquerda e para a direita, para alterar o movimento e dentro do atributo onClick, chamaremos o método moveLeft () e moveRight (). Listagem 6: Inserindo os botões de controle

<canvas id='canvas'></canvas><br /> <button onclick='moveLeft()'>Esquerda</button> <button onclick='moveRight()'>Direita</button> O código final (completo) ficará assim:


<!DOCTYPE html> <html> <head> <title>Tutorial Animação Sprite</title> </head> <body> <canvas id='canvas'></canvas><br /> <button onclick='moveLeft()'>Left</button> <button onclick='moveRight()'>Right</button> <script> var canvasWidth = 650; var canvasHeight = 350; var spriteWidth = 864; var spriteHeight = 280; var rows = 2; var cols = 8; var trackRight = 0; var trackLeft = 1; var width = spriteWidth/cols; var height = spriteHeight/rows; var curFrame = 0; var frameCount = 8; var x=0; var y=200; var srcX; var srcY; var left = false; var right = true; var speed = 12; var canvas = document.getElementById('canvas'); canvas.width = canvasWidth; canvas.height = canvasHeight; var ctx = canvas.getContext("2d"); var character = new Image(); character.src = "character.png"; function updateFrame(){ curFrame = ++curFrame % frameCount;


srcX = curFrame * width; ctx.clearRect(x,y,width,height); if(left && x>0){ srcY = trackLeft * height; x-=speed; } if(right && x<canvasWidth-width){ srcY = trackRight * height; x+=speed; } } function draw(){ updateFrame(); ctx.drawImage(character,srcX,srcY,width,height,x,y,width,height); } function moveLeft(){ left = true; right = false; } function moveRight(){ left = false; right = true; } setInterval(draw,100); </script> </body> </html>

criação de animação com sprite com html canvas · criação de animação com sprite com html...

Documents