2016-05-01 2 views
0

Я делаю игру в HTML5 с использованием холста.Проблема с удалением фрагментов текстуры на изображении

Когда я использую CanvasRenderingContext2D.drawImage, чтобы нарисовать текстуру, которая обрезана из изображения, вы можете иногда видеть небольшую часть окружающих текстур на изображении.

Примером является, когда я создаю свой собственный текст из этого набора плиток: font "tileset", где в зависимости от ширины и высоты окна браузера вы можете иногда видеть проблески соседних плит. Здесь вы можете увидеть несколько букв внизу: text, и если я изменю высоту браузера на один пиксель, он исчезнет.

Похоже, что графический сбой зависит от высоты и ширины окна браузера. Если вы измените высоту на 1 пиксель, она исчезнет, ​​если вы измените ее на еще одну, она вернется.

Кто-нибудь знает, как это исправить? И если нет, должен ли я попытаться вручную нарисовать пиксели изображения по пикселям или добавить один пиксель на плиточный набор?

+0

Вы ответили на свой вопрос. Используйте небольшой большой спрайт (текстовое изображение), который имеет пару пикселей разделения между символами. – markE

+0

@markE Ну, я действительно не хочу этого делать, если есть другой способ сделать это, вот почему я спрашиваю. – user79268

+0

Позор, чтобы избежать простейшего решения, но в качестве альтернативы, холст имеет полупиксельное разрешение, поэтому, я думаю, вы могли бы увеличить область урожая на половину пикселя и посмотреть, не пропускает ли этот шум. Если это не сработает, вы вернетесь к использованию большего спрайта. – markE

ответ

0

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

Если это не сработает, вы вернетесь к использованию большего спрайта.

Если вы решите использовать более крупный спрайт, here's двухместную версию вашего спрайта, которую я сделал в Photoshop.

Смежные вопросы