criação de animação com sprite com html canvas · criação de animação com sprite com html...
Post on 30-Nov-2018
212 Views
Preview:
TRANSCRIPT
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;
CPAN Prof. Andrea Garcia
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";
CPAN Prof. Andrea Garcia
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:
CPAN Prof. Andrea Garcia
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:
CPAN Prof. Andrea Garcia
<!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;
CPAN Prof. Andrea Garcia
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>
top related