RPG, как продвигать мир (сцена)

Question

Вы играли в Покемон или Зельду на GameBoy? Конечно, да, я пытаюсь сделать zelda как с холстом. Это ссылка моей работы: whiteplay

Как вы можете видеть, вы можете перемещаться. Фактически, когда вы нажимаете клавишу, ваша позиция является модификацией (+1 или -1 и т. Д.), И я переписываю всю карту при любых перемещениях. Итак, у нас создается впечатление, что вы делаете небольшие мигания, это не то, что я хочу.

Что я хочу, это карта под моим персональным слайдом, с переводом на перевод с переводом, который вы знаете?

Я попробовал, перевел(), переписал все изображения, которые составляют мир на любом пикселе, но он отстает.

Здесь вы можете привести пример замены жидкости: example. Вот что я хочу.

Это мой код, и это может помочь вам понять, как это работает 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; 
      } 
     } 
    } 
} 

}

Надежда я дал вам то, что вам нужно, чтобы помочь мне, поверьте мне, когда я говорю вам, что я попробовал, прежде чем спросить вас, а также надеюсь, что я не ошибаюсь и не ошибаюсь в правилах stackoverflow.

Спасибо за все.

Answer 1

Я не профессионал в холсте, но, возможно, вы можете попробовать использовать 2 холста. На первом вы рисуете мир, а на втором вы рисуете своего персонажа.

Холст мира может быть немного больше и шире вашей сцены. Когда вы хотите переместить своего персонажа, вы можете попытаться переместить холст всего мира.

Некоторые интересные ссылки об этой технике и Somes, которые могут быть полезны для вас:

• Optimize HTML5 canvas rendering with layering
• Improving HTML5 Canvas Performance

Успехов в вашем проекте! :-)