Did you aver played to Pokemon or Zelda on GameBoy ? Surely yes, I'm trying to make a zelda like with canvas. This is the link of my work : whiteplay
As you can see, you are able to move. Actualy, when you press a key, your position is modifie (+1 or -1 etc ...) and I'm rewriting all of the map at any moves. So we have the impression you do small blinks, it's not what i want.
What i want is the map under my character slide, with a fluid mouvement translation you know ?
I tried, translate(), rewrite all of the images that compose the world at any pixel but it's lagging.
You can se an exemple of a fluid deplacement here : example. That's what i want.
This is my code and it might help you to understand how it works actualy :
window.onload = function(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.setGlobalAlpha;
var xPerso = 60;
var yPerso = 59;
var xCamera = xPerso-Math.round(nbCaseLongueur/2);
var yCamera = yPerso-Math.round(nbCaseHauteur/2);
setTimeout(function(){
initialiserMap(0);
ctx.drawImage(perso1, 0, 0, 17, 23, (Math.round(nbCaseLongueur/2))*32, (Math.round(nbCaseHauteur/2))*32-16, 32, 48);
}, 250);
function deplacementOk(sens){
var retour = false;
switch(sens){
case 1: // HAUT
if(map[yPerso-1][xPerso] == " ")
return true;
break;
case 2: // BAS
var bloc = map[yPerso+1][xPerso];
if(bloc == " " || bloc == "7" || bloc == "8")
return true;
break;
case 3: // DROITE
var bloc = map[yPerso][xPerso+1];
if(bloc == " " || bloc == "7" || bloc == "8")
return true;
break;
case 4: // GAUCHE
var bloc = map[yPerso][xPerso-1];
if(bloc == " " || bloc == "7" || bloc == "8")
return true;
break;
}
return retour;
}
onkeydown= function(e){
//alert(e.keyCode);
switch(e.keyCode){
case 38: // HAUT
case 90: // Z
if(deplacementOk(1)){
yCamera--;
yPerso--;
initialiserMap(1);
ctx.drawImage(perso2, 0, 0, 17, 23, (Math.round(nbCaseLongueur/2))*32, (Math.round(nbCaseHauteur/2))*32-16, 32, 48);
if(infoAffiche == true){
document.getElementById('boiteAInfoYPerso').innerHTML = "Position Y = "+yPerso+"<br/>";
}
}
break;
case 40: // BAS
case 83: // S
if(deplacementOk(2)){
yCamera++;
yPerso++;
initialiserMap(2);
ctx.drawImage(perso1, 0, 0, 17, 23, (Math.round(nbCaseLongueur/2))*32, (Math.round(nbCaseHauteur/2))*32-16, 32, 48);
if(infoAffiche == true){
document.getElementById('boiteAInfoYPerso').innerHTML = "Position Y = "+yPerso+"<br/>";
}
}
break;
case 68: // D
case 39: // DROITE
if(deplacementOk(3)){
xCamera++;
xPerso++;
initialiserMap(3);
ctx.drawImage(perso4, 0, 0, 17, 23, (Math.round(nbCaseLongueur/2))*32, (Math.round(nbCaseHauteur/2))*32-16, 32, 48);
if(infoAffiche == true){
document.getElementById('boiteAInfoXPerso').innerHTML = "Position X = "+xPerso+"<br/>";
}
}
break;
case 37: // GAUCHE
case 81: // Q
if(deplacementOk(4)){
xCamera--;
xPerso--;
initialiserMap(4);
ctx.drawImage(perso3, 0, 0, 17, 23, (Math.round(nbCaseLongueur/2))*32, (Math.round(nbCaseHauteur/2))*32-16, 32, 48);
if(infoAffiche == true){
document.getElementById('boiteAInfoXPerso').innerHTML = "Position X = "+xPerso+"<br/>";
}
}
break;
}
}
function translationMap(a,b){
ctx.save();
ctx.translate(a,b);
ctx.drawImage(canvas, 0, 0);
ctx.restore();
}
function animate() {
ctx.save();
setTimeout(function() {
animate();
// get the current image
// get the xy where the image will be drawn
var img=imgs[imageIndex];
var imgX=(canvas.width/2-img.width/2)*animPctComplete;
var imgY=(canvas.height/2)-img.height/2;
// set the current opacity
ctx.globalAlpha=animPctComplete;
// draw the image
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img,imgX,imgY);
// increment the animationPctComplete for next frame
animPctComplete+=.01; //100/fps;
// if the current animation is complete
// reset the animation with the next image
if(animPctComplete>=1.00){
animPctComplete=0.00;
imageIndex++;
if(imageIndex>=imgs.length){imageIndex=0;}
}
}, 1000 / fps);
}
animate();
function initialiserMap(sens){
for(var cpt=0;cpt<nbCaseHauteur;cpt++){
for(var cpt2=0;cpt2<nbCaseLongueur;cpt2++){
switch(map[yCamera+cpt][xCamera+cpt2]){
case " ":
ctx.drawImage(herbe, 0, 0, 32, 32, cpt2*32, cpt*32, 32, 32);
break;
case "#":
ctx.drawImage(wall1, 0, 0, 32, 32, cpt2*32, cpt*32, 32, 32);
break;
case "1":
ctx.drawImage(arbre1, 0, 0, 32, 32, cpt2*32, cpt*32, 32, 32);
break;
case "2":
ctx.drawImage(arbre2, 0, 0, 32, 32, cpt2*32, cpt*32, 32, 32);
break;
case "3":
ctx.drawImage(arbre3, 0, 0, 32, 32, cpt2*32, cpt*32, 32, 32);
break;
case "4":
ctx.drawImage(arbre4, 0, 0, 32, 32, cpt2*32, cpt*32, 32, 32);
break;
case "5":
ctx.drawImage(arbre5, 0, 0, 32, 32, cpt2*32, cpt*32, 32, 32);
break;
case "6":
ctx.drawImage(arbre6, 0, 0, 32, 32, cpt2*32, cpt*32, 32, 32);
break;
case "7":
ctx.drawImage(arbre7, 0, 0, 32, 32, cpt2*32, cpt*32, 32, 32);
break;
case "8":
ctx.drawImage(arbre8, 0, 0, 32, 32, cpt2*32, cpt*32, 32, 32);
break;
}
}
}
}
}
Hope i gave you what you need to help me, trust me when i say you i tryed before ask you, and also hope i don't make mistakes or any wrong things with the stackoverflow rules.
Thanks for all.
