requestAnimationFrameを使用して移動するときにスプライトがぼやけているのはなぜですか？

Question

純粋なJavaScriptを使用して基本的な2Dゲームを作成しました。私の問題は、スプライトが動かなくなったときに時々ぼやけてしまうことがあることです。私は​​を使用してスプライトを移動し、keydown/keyupイベントトリガーの移動を使用します。キーアップがトリガされると、スプライトの移動が停止し、デフォルトのタイルが設定されますが、ぼかしが表示されることがあります。 https://arpadvas.github.io/untitled_game_project/

Answer 1

あなたは最小限のコード例を掲載していない、と私はあなたがにリンクされた生コードを通過する必要はありませんので、これは推測（教育を受けたもの）としてご利用いただけますので。

一般的に、スプライトを浮動座標に描画すると発生します。
キャンバスの最小単位であるピクセルの半分を描画する方法がないため、ブラウザはデフォルトでアンチエイリアスアーチファクトを作成し、一部のピクセルを不透明にすることで目が半分になると考えますピクセル。 これは通常、現実的な写真ではうまくいきますが、ピクセルアートでは全くありません。

ソリューションは、すべての座標を丸めたり、怠惰な場合は、コンテキストのimageSmoothingEnabledプロパティを設定します。

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>

シモンズ：これは私が何とか私のFFは、私が使用し、この特定の画像を滑らかにしないことを実感しました...誰かがコメントで確認することができる場合、私は掘り下げて喜んでいると思いますこれはさらに必要ならばこれです。