9

Bom, gostaria de saber como eu poderia implementar uma sprite no meu canvas, sou muito leigo com canvas, a ideia é, ao apertar seta -> ele execute a sprite 1.png, ao aperta seta <- ele execute a sprite 2.png, e ao clicar com o botão esquerdo do mouse ele execute a sprite3.png mas quando n tiver apertando nem uma ele fique na sprite default. Sendo assim a ideia seria, correr pra direita e esquerda e atacar com o botão do mouse.

o meu canvas é o seguinte https://jsfiddle.net/jL09wvup/ como eu adicionaria ai?

var iw = 2000; //Image width
var ih = 643; //Image height
var sw = 968; //Canvas width
var sh = 643; //Canvas height
var cw = 80; //Character width
var ch = 80; //Character height
var speed = 10; //Character speed

var img = new Image(iw, ih);
var character = new Image(iw, ih);

img.src = "http://i.imgur.com/QnBufq4.jpg";
character.src = "http://i.imgur.com/QnBufq4.jpg";


var ctx = canvas.getContext("2d");
var pos = {x: 0, y: ih - 160};
var camera = {x: 0, y: 0}

function draw() {
 //Faz a esquerda da camera comecar meia tela antes do personagem, mas so se tiver imagem suficiente pra isso
 camera.x = Math.min(iw - sw, Math.max(0,pos.x - sw/2));
 //Reseta as transformacoes do canvas
 ctx.setTransform(1,0,0,1,0,0);
 //Limpa o canvas
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 //Desloca o mundo inteiro, simulando uma camera
 ctx.translate(-camera.x, -camera.y);
 //Desenha o fundo
 ctx.drawImage(img, 0, 0, sw, sh, 0, 0, iw, ih);
 //Desenha o personagem
 ctx.fillRect(pos.x, pos.y, cw, ch);

 window.requestAnimationFrame(draw);
}

document.addEventListener('keydown', function(e) {
 var key = e.which || e.key || e.keyCode;
 switch(key) {
  case 37: pos.x-=speed; break;
  case 39: pos.x+=speed; break;
 }
 pos.x = Math.max(0, Math.min(iw - cw,pos.x));
});

window.requestAnimationFrame(draw);
<canvas id="canvas" width="968" height="643" style="border;background:rgb(233,233,233)">
            O seu navegador não suporta o canvas
            </canvas>

Sprite exemplo

6
  • 1
    O que tu já tentou?
    – rcpinto
    Commented 19/06/2016 às 14:11
  • 1
    Olá Carlos. Eu acho que a sua pergunta tá um pouco ampla, já que você tem várias dúvidas ai e uma resposta essencialmente faria o trabalho todo pra você. Sugiro editar a pergunta para focar em algum aspecto (por exemplo, "Como animar um sprite (trocando quadros)?". Como você menciona ser "leigo em canvas", eu sugeriria utilizar alguma biblioteca de auxílio. O CreateJS é, na minha opinião, fantástica, e você encontra um exemplo de como criar um spritesheet com ela aqui: pt.stackoverflow.com/a/6550/73 Commented 19/06/2016 às 16:29
  • Bom, em css3 eu sou bom, se existir algum modo seu convocar uma sprite ja desenhada no css e manda-se para cada evento como citado acima, adiantaria o trabalho Commented 19/06/2016 às 16:52
  • alguem ajuda? ainda não sei como resolver Commented 26/06/2016 às 23:42
  • O que você quer fazer? Usar os quadros da spritesheet?
    – user37626
    Commented 30/06/2016 às 20:21

1 Resposta 1

1

os sprites não deveria ter a mesma área entre as animações, este teu sprite tá muito variado, até pq vc definiu altura e largura como 80px

fiz um ajuste base no seu arquivo no Fiddle e pelo menos consegui chamar a imagem do exemplo

https://jsfiddle.net/yadcw0pL/

de uma olhadinha neste arquivo talvez de uma luz do que vc está tentando http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .