나는 모든은 25ms를 다시 그리기되는 화면을했습니다

Question

을 깜박하지 않고 캔버스 HTML5를 다시 그리기, 이미지가 점멸, 여기 여기 renderMap() 함수

function renderMap(){ 
        var startX = playerX - (screenW/2); 
        var startY = playerY - (screenH/2); 

        maxX = playerX + (screenW/2); 
        maxY = playerY + (screenH/2); 
        $.getJSON('mapa3.json', function(json){ 
         for (x = startX; x < maxX; x=x+32){ 
          for (y = startY; y < maxY; y=y+32){ 
           intTile = json.layers[0].data[((y/32)* 100) + (x/32)]; 
           context.putImageData(getTile(intTile - 1), x - startX, y - startY); 
          } 
         } 
        }); 

        var imgCharacter = new Image(); 
        imgCharacter.src = 'char.png'; 

        var posX = (screenW - imgCharacter.width)/2; 
        var posY = (screenH - imgCharacter.height)/2; 
        imgCharacter.onload = function(){context.drawImage(imgCharacter, posX, posY)}  
       } 

어떤 변화가 내 코드

   var FRAME_RATE = 40; 
       var intervalTime = 1000/FRAME_RATE; 
       gameLoop(); 

       function gameLoop(){ 
        context.clearRect(0, 0, 640, 640); 
        renderMap(); 
        window.setTimeout(gameLoop, intervalTime); 
       } 

이며, 깜박임을 멈추기 위해 코드를 작성해야합니까?

Answer 1

저는 이미지가 반복 될 때마다 이미지가로드되기 때문이라고 생각합니다. renderMap의 외부 var imgCharacter... 다음 줄, 이미지의 onload 기능을 넣어보십시오 그래서

var imgCharacter = new Image();  
imgCharacter.onload = function() { 
    renderMap(); 
} 
imgCharacter.src = 'char.png'; 

function renderMap() { 
    var startX = playerX - (screenW/2); 
    var startY = playerY - (screenH/2); 

    maxX = playerX + (screenW/2); 
    maxY = playerY + (screenH/2); 
    $.getJSON('mapa3.json', function (json) { 
     for (x = startX; x < maxX; x = x + 32) { 
      for (y = startY; y < maxY; y = y + 32) { 
       intTile = json.layers[0].data[((y/32) * 100) + (x/32)]; 
       context.putImageData(getTile(intTile - 1), x - startX, y - startY); 
      } 
     } 
    }); 

    var posX = (screenW - imgCharacter.width)/2; 
    var posY = (screenH - imgCharacter.height)/2; 

    context.drawImage(imgCharacter, posX, posY) 
} 

이 나를 onload 기능도 외부 renderMap을 갈 필요을 알려 주셔서 마르크에게 감사 한 번 실행 전용, 내가 간과 처음으로

Answer 2

그리기 전에 모든 이미지와 다른 데이터를로드하고 배열에 저장하십시오.
더 나은 사용 requestAnimationFrame.
JSON (또는 다른 데이터)을 가져 오는 데는 다소 시간이 걸릴 수 있습니다.