Ich mache ein Spiel in HTML5 mit Leinwand.Fehler beim Entfernen von Bit der Textur in Bild
Wenn ich CanvasRenderingContext2D.drawImage verwende, um eine Textur zu zeichnen, die aus einem Bild geschnitten wird, kann man manchmal ein kleines bisschen der umgebenden Texturen im Bild sehen.
Ein Beispiel ist, wenn ich meinen eigenen Text von diesem Tileset render: font "tileset", wo abhängig von der Breite und Höhe des Browserfensters manchmal Einblicke in benachbarte Kacheln zu sehen sind. Hier sehen Sie ein paar Buchstaben darunter: text, und wenn ich die Browserhöhe um ein Pixel ändere, verschwindet es.
Es scheint, als ob der Grafikfehler von der Höhe/Breite des Browserfensters abhängt. Wenn Sie die Höhe um 1 Pixel ändern, verschwindet sie, wenn Sie sie um eins ändern, kommt sie zurück.
Kann jemand das beheben? Und wenn nicht, sollte ich versuchen, die Bilder manuell pixelweise oder ähnlich zu zeichnen, um einen Pixel-Rand zum Tileset hinzuzufügen?
Sie haben Ihre eigene Frage beantwortet. Verwenden Sie ein etwas größeres Spritesheet (Textbild), das einige Pixel Abstand zwischen Zeichen aufweist. – markE
@markE Nun, ich möchte das nicht wirklich machen, wenn es einen anderen Weg gibt, darum frage ich. – user79268
Schade, um die einfachste Lösung zu vermeiden, aber alternativ hat Canvas eine Halbpixel-Auflösung. Ich nehme an, Sie könnten Ihren Bildausschnitt um ein halbes Pixel vergrößern und sehen, ob das Rauschen wegfällt. Wenn das nicht funktioniert, verwenden Sie ein größeres Spritesheet. – markE