Warum ist mein Sprite verschwommen, wenn Sie requestAnimationFrame verwenden, um es zu verschieben?

Question

Ich habe ein einfaches 2D-Spiel mit reinem JavaScript erstellt. Mein Problem ist, wenn das Sprite aufhört sich zu bewegen, ist es manchmal verschwommen, manchmal nicht. Ich verwende requestAnimationFrame, um die Sprite- und keydown/keyup Ereignisse zu verschieben. Wenn die Tastenbetätigung ausgelöst wird, hört das Sprite auf, sich zu bewegen, und die Standardkachel wird gesetzt, manchmal wird sie jedoch unscharf angezeigt.

Answer 1

Da Sie kein minimales Codebeispiel gepostet haben und ich nicht den rohen Code durchgehen möchte, den Sie verlinkt haben, bleibt dies eine Vermutung (ein gebildeter).

Dies passiert im Allgemeinen, wenn Sie Ihre Sprites auf schwebenden Koordinaten zeichnen.
Da es keine Möglichkeit gibt, auf einem halben Pixel zu zeichnen, ist das Pixel die kleinste Einheit in der Leinwand, um Zeichnungen zu glätten. Der Browser wird standardmäßig Antialias-Artefakte erzeugen, wodurch einige Pixel weniger opak werden, sodass Ihre Augen denken, dass es halbiert ist ein Pixel. Während das bei realistischen Fotos meistens gut funktioniert, geht es bei Pixel-Art überhaupt nicht.

Die Lösung ist dann entweder um alle Ihre Koordinaten zu runden, oder wenn Sie faul sind, um die imageSmoothingEnabled Eigenschaft Ihres Kontexts festzulegen.

var img = new Image(); 
 
img.onload = draw; 
 

 
function draw(){ 
 
    i = .316252; 
 
    blurred.width = round.width = noAntiAlias.width = img.width +20; 
 
    blurred.height = round.height = noAntiAlias.height = img.height +20; 
 
    blurred.getContext('2d').drawImage(img, 10+i, 20+i); 
 
    round.getContext('2d').drawImage(img, 10, 20); 
 
    var nA = noAntiAlias.getContext('2d'); 
 
    nA.mozImageSmoothingEnabled = nA.msImageSmoothingEnabled = nA.webkitImageSmoothingEnabled = nA.imageSmoothingEnabled = false; 
 
    noAntiAlias.getContext('2d').drawImage(img, 10+i, 20+i); 
 
}; 
 
img.src = "https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png";

<canvas id="blurred"></canvas> 
 
<canvas id="round"></canvas> 
 
<canvas id="noAntiAlias"></canvas>

Ps: das machte mir klar, dass irgendwie mein FF nicht dieses besondere Bild ist glatt ich verwenden ... Wenn jemand in den Kommentaren bestätigen kann, würde ich mich freuen, zu graben dies bei Bedarf weiter.