Skip to main content
Commonmark migration
Fonte Link

[![Sprite exemplo][1]][1] [1]: https://i.sstatic.net/mc1P8.jpgSprite exemplo

[![Sprite exemplo][1]][1] [1]: https://i.sstatic.net/mc1P8.jpg

Sprite exemplo

Pergunta fechada como "Muito ampla" por Largato, gato, Marconcilio Souza, Thiago Luiz Domacoski, viana
Bumped by Community user
Bumped by Community user
Bumped by Community user
adicionou 1832 caracteres ao conteúdo; título editado
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

Movimentar sprite do personagem no canvas e mudar imagem

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][1]][1] [1]: https://i.sstatic.net/mc1P8.jpg

Movimentar personagem no canvas e mudar imagem

[![Sprite exemplo][1]][1] [1]: https://i.sstatic.net/mc1P8.jpg

Movimentar sprite do personagem no canvas e mudar imagem

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][1]][1] [1]: https://i.sstatic.net/mc1P8.jpg

Tweeted twitter.com/StackOverflowPT/status/744384718142058496
Fonte Link
Wladi Veras
  • 385
  • 2
  • 18

Movimentar personagem no canvas e mudar imagem

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?

[![Sprite exemplo][1]][1] [1]: https://i.sstatic.net/mc1P8.jpg