0

Javascript o poder da animaçao em Sprite Sheets

Vagner Bellacosa
Vagner Bellacosa

Animação 2D em JavaScript


Salve padawan, veja que funções bacana o Javascrip tem para animações, vamos falar do Sprite sheets, a tecnologia por trás dos jogos 2D, hoje será apenas uma palhinha, deixo um exemplo para voce brincar um pouco.



O que é sprite sheets?


Uma técnica de ler uma imagem e interpreta-la por linha e coluna, onde temos imagens estáticas, simulando movimentos, que ao nosso olho simulam uma animação, lembra dos primeiros desenhos da Disney? Mesmo principio


Em resumo Sprite sheets são arquivos que contém sequências inteiras de imagens que, nos games, se transformam nas animações de cenários e personagens que vemos na tela.



O Html é muito simples uma DIV e um Canvas


 <body>  
	 <div>  <canvas id="canvas" width="1000" height="340" style="background:rgb(233,233,233)"> 
		 		Se você visualizar esse texto, seu browser não suporta a tag canvas.  			
			</canvas>  
	</div>  
	<script type="text/javascript" src="js/andarilho.js"></script>   
</body>


O Javascript dara um pouco mais de trabalho


// Declaraçao de variaveis

var canvas;//o elemento canvas sobre o qual desenharemos
var ctx;//o "contexto" da canvas que será utilizado (2D ou 3D)
var dx = 50;//a taxa de variação (velocidade) horizontal do objeto
var x = 30;//posição horizontal do objeto (com valor inicial)
var y = 0;//posição vertical do objeto (com valor inicial)
var WIDTH = 1000;//largura da área retangular
var HEIGHT = 340;//altura da área retangular
var tile1 = new Image();//Imagem que será carregada e desenhada na canvas
var posicao = 0;//Indicador da posição atual do personagem
var NUM_POSICOES = 7;//Quantidade de imagens que compõem o movimento


// Funçao para ler o tecladdo e converter o movimento do andarilho
function KeyDown(evt){
    switch (evt.keyCode) {
        case 39:  /*seta para direita*/
            if (x + dx < WIDTH){
                x += dx;
                posicao++;
                if(posicao == NUM_POSICOES)
                    posicao = 1;
            }
            break;           
    }
}


// aqui dinamicamente criar a imagem com o movimento do personagem
function Desenhar() {   
    tile1.src = "image/andarilho" + posicao + ".png";
    ctx.drawImage(tile1, x, y);
}


// Limpa a tela e deixa o tablado pronto para o show
function LimparTela() {
    ctx.fillStyle = "rgb(233,233,233)";   
    ctx.beginPath();
    ctx.rect(0, 0, WIDTH, HEIGHT);
    ctx.closePath();
    ctx.fill();   
}

// apaga o movimento anterior e exibe o proximo
function Atualizar() {
    LimparTela();    
    Desenhar();
}

// inicialiaza o tablado
function Iniciar() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    return setInterval(Atualizar, 100);
}

// faz a magica acontecer, lendo as teclas e iniciando
window.addEventListener('keydown', KeyDown);
Iniciar();


Uma diversaozita com o Pikachu https://www.youtube.com/watch?v=m16DmWE1kD0


Espero ter ajudado, lembre-se que é um trabalho continuo.


 https://www.linkedin.com/in/vagnerbellacosa/


 https://github.com/VagnerBellacosa/


Pode me dar uma ajudinha no YouTube?


 https://www.youtube.com/user/vagnerbellacosa



#Desafio21DiasNaDIO 


0
0

Comentários (0)

Analista Programador dinossauro IBM Mainframe

Brasil