2016-12-05 91 views
0

我使用純JavaScript創建了一個基本的2D遊戲。我的問題是當精靈停止移動時,有時候模糊有時候不會。我使用​​來移動精靈和觸發移動的事件。當鍵入被觸發時,精靈停止移動並且默認磁貼被設置,但有時它顯示模糊。 https://arpadvas.github.io/untitled_game_project/使用requestAnimationFrame移動它時,爲什麼我的精靈模糊了?

+0

哪個瀏覽器?在Firefox的64位工作正常 –

+0

這可能是你的顯示器的灰色到灰色的過渡 –

+0

你可以張貼問題的截圖? – qxz

回答

0

由於您沒有發佈最低代碼示例,並且我不想通過鏈接到的原始代碼,所以這將保留爲猜測(受過教育的代碼)。

通常情況下,當您在浮動座標上繪製精靈時會發生這種情況。
由於沒有辦法繪製半個像素,該像素是畫布中最小的單位,爲了平滑繪圖,瀏覽器將默認創建抗鋸齒僞像,將一些像素變得更不透明,以便您的眼睛認爲它是一半一個像素。 雖然這通常適用於逼真的照片,但它完全不符合像素藝術。

解決方案然後是將所有座標舍入,或者如果您懶惰,則設置您的上下文的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>

PS:這讓我意識到,不知我的FF不順利我用這個特定的圖像......如果有人能在註釋中確認,我會很高興挖成如果需要,可以進一步提供。

+0

我實際上發現FF在畫布上禁用imageSmoothing小於128 * 128像素,很奇怪。 – Kaiido