Bom tenho uma duvida, gostaria de saber como eu poderia usar a imagem em tamanho normal, mas que eu possa navegar nela com as direcionais esquerda e direita, exemplo, tenho um canvas de tamanho 968 largura e 643 altura, e tenho uma imagem de 643 de altura e 2000 largura(https://i.sstatic.net/Y7gE6.jpg), como eu faria para movimentar um personagem(sprite) dentro dela e movimentando ele sobre o mapa? sem que ele ultrapasse o limite da imagem mãe
2 Respostas
Tu precisa de um sistema de câmera ou viewport. Usa o translate
do canvas, que já move todos os objetos desenhados de acordo e não precisamos ficar calculando posições relativas, e depois desenha tudo com coordenadas em relação ao mundo (a imagem):
var iw = 2000; //Image width
var ih = 643; //Image height
var sw = 968; //Canvas width
var sh = 643; //Canvas height
var cw = 50; //Character width
var ch = 50; //Character height
var speed = 10; //Character speed
var img = new Image(iw, ih);
img.src = "http://i.imgur.com/QnBufq4.jpg";
var ctx = canvas.getContext("2d");
var pos = {x: 0, y: ih - 140};
var camera = {x: 0, y: 0}
function draw() {
//Faz a esquerda da câmera começar meia tela antes do personagem, mas só se tiver imagem suficiente pra isso
camera.x = Math.min(iw - sw, Math.max(0,pos.x - sw/2));
//Reseta as transformações 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 câmera
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 style="border: 1px solid black;" id="canvas" width="968" height="643">
</canvas>
E aqui, se quiser, um tutorial mais aprofundado: Panning and scrolling background images using the canvas element
-
Exatamente isso que eu precisava, muito obrigado meu amigo, salvo minha vida, não deu uma simples resposta, você resolveu tudo de uma vez ^^ Commented 18/06/2016 às 21:17
-
poderia me enviar um zip? não estou conseguindo aplicar o mesmo no meu code :P Commented 18/06/2016 às 22:08
Boa noite meu querido. Não estou te dando uma solução em código, mas já lhe adianto que a solução não é movimentar o personagem e sim a imagem por trás utilizando paralax.
um exemplo do funcionamento da paralax http://tableless.com.br/parallax-simples-com-jquery-e-css/
Caso veja solução nisso, lhe ajudo na procedência da situação.
-
Não é bem isso, bom vou dar um exemplo, digamos super mario, você vai andando e vai aparecendo novos obstáculos etc mas o width e height e igual na tela entende? Commented 18/06/2016 às 2:58
-
Você está usando autoAjuste? Eu uso auto ajuste com javascript para ele se adequar a tela independente da resolução. Não sei se estou pegando seu raciocínio corretamente. Mas tenho um jogo que fiz de curiosidade para caso queira consultar atualgeek.com/jogo Commented 18/06/2016 às 3:01
-
O jogo não precisa ja que ele está dentro de uma div canvas, o que eu preciso e colocar a imagem dentro da div( scontent-gru2-1.xx.fbcdn.net/v/t1.0-9/… ) Commented 18/06/2016 às 3:06
-
e colocar para movimentar o mapa ja que o canvas tem 940 de largura e a imagem tem que fica dentro dele teria 2000 entendeu, ai com as direcionais ao pressionar movimente, dando o efeito de movimento ao personagem Commented 18/06/2016 às 3:07
-
acho que entendi, mostraria apenas 940px do cenário inicialmente e de acordo com o movimento do personagem ele explorar até o px 2000? Seria algo do tipo? Se for realmente é paralax que vai lhe ajudar, pois o canvas e o personagem permanecem intactos e somente a imagem que vai movimentando de acordo com o pressionamento da tecla para o lado correspondente. Commented 18/06/2016 às 3:12