Welches Bildformat soll für Sprites in einem HTML5-Spiel verwendet werden?

Welches Bildformat ist in einem 2D-HTML5-Spiel am besten zu verwenden und warum? Sollte ich in verschiedenen Situationen unterschiedliche Formate verwenden? Zum Beispiel .png für das Hintergrundbild, .jpeg für die Animationsframes und so weiter ...

Das "Warum" ist mir wichtig. Es muss nicht unbedingt in HTML5 lokalisiert sein, es kann auch ein allgemeiner Rat sein.

Das Bildformat ist nur eine Möglichkeit, Rohdaten von Pixeln zu speichern. Solange Sie Bitmaps verwenden, spielt das Format nach dem Ladeschritt normalerweise keine Rolle bei der Ausführung. Was zählt, sind die Pixeldaten, die an die Grafik-API geliefert werden. Im Web werden üblicherweise drei Formate verwendet:

.gif Das (jetzt normalerweise veraltete) GIF-Format wird für Bilder mit 256 Farben oder weniger verwendet, was zu einer sehr geringen Größe führt. GIF wird auch häufig für Animationen verwendet. Wenn nur 256 oder weniger Farben verwendet werden, handelt es sich um ein verlustfreies Format, was bedeutet, dass bei der Komprimierung keine Qualität verloren geht. Andernfalls muss die Farbvielfalt auf 256 reduziert werden, was zu einer Qualitätsminderung führt.

.png Das Portable Network Graphics-Format ist meines Erachtens das am häufigsten verwendete Bildformat, da es eine gute Komprimierungsrate aufweist und gleichzeitig mehr Farben als GIF speichern kann. PNG kann auch durchscheinend sein (oder allgemein als Transparenz bezeichnet werden, was der falsche Name ist, da ein Pixel 100% durchscheinend sein muss, um als transparent bezeichnet zu werden). Es ist auch ein verlustfreies Format und zielt darauf ab, GIF 2006 zu verbessern und zu ersetzen ( Quelle , erster Absatz). Ich persönlich benutze es als Bildtyp auf Websites und in Spielen.

.jpeg Das JPEG-Format wird häufig für Fotos und ähnliches verwendet. Es ist weder durchscheinend noch garantiert es eine verlustfreie Komprimierung. Es ist üblich, die Qualität beim Komprimieren anzugeben, was zu einem Kompromiss zwischen Raum und Qualität führt.

Lassen Sie uns einige Anwendungsfälle durchgehen:

• Kunstwerke oder allgemein komplexe Kunstwerke lassen sich gut im JPEG-Format speichern, da sie für diese Art von Bildern entwickelt wurden.
• Sprites lassen sich am besten in PNG speichern, insbesondere wenn die Farbvielfalt gering ist.
• Es ist schwer zu definieren, in welchen Hintergründen gespeichert werden soll. Die allgemeine Regel lautet wie folgt : Wenn es sich um ein Bild oder eine komplexe Grafik mit einer großen Farbvielfalt handelt, nehmen Sie JPEG, andernfalls PNG.
• Ein Symbol sollte wahrscheinlich ein PNG-Bild sein, auch wenn es weniger als 256 Farben verwendet, da GIF, wie oben angegeben, durch PNG ersetzt wird.

Beachten Sie, dass der Speicherverbrauch und die Leistung der Grafik-API zwischen diesen Formaten normalerweise gleich sind. Was zählt, ist Größe und Ladegeschwindigkeit (Sie können in die Algorithmen dieser Formate eintauchen, wenn Sie die Ladekosten schätzen möchten). Der Speicherverbrauch eines Bildes im Rohzustand wird normalerweise durch das allgemeine width*height*4Regelbyte für ein RGBA-Pixelformat definiert, das am häufigsten verwendet wird.

Nur ein paar Dinge, die Sie zu @ Marcos Antwort hinzufügen sollten:

.gif ist schmerzlich veraltet. Ich würde die Verwendung von GIF-Dateien so weit wie möglich vermeiden. Ich denke, die Leute verwenden sie heutzutage nur aufgrund von Animationen im Browser, und animierte PNGs werden derzeit nicht gut unterstützt .

Alles was du hast ist jpg und png.

• PNG: Ist verlustfrei . Das einzige, was Sie hier berücksichtigen, ist die Komprimierungsrate, die Sie erhalten. Im Allgemeinen ist es gut, einfarbige Blöcke zu komprimieren , aber schlecht, Szenen mit vielen Variationen zu komprimieren.

• JPG: Erledigt einen schrecklichen Job mit Volltonblöcken (beide verlieren Details und benötigen mehr Platz als PNG), aber einen großartigen Job mit Bildern mit vielen Variationen (gute Komprimierung, fast unmerklicher Verlust der Bildqualität).

Zum Beispiel

4 KB Megaman im PNG-Format:

Das gleiche Bild ist 36 KB in JPG

Und der Detailverlust (das kommt KOSTENLOS! Mit JPG-Komprimierung)

Bei den Volltonblöcken mit Farbbildern verlieren wir Details und erhalten durch die Verwendung von JPG zusätzliche Größe . Fazit: Verwenden Sie jPG nicht für Bilder mit großen einfarbigen Blöcken.

Denken Sie jetzt an eine Szene mit hohen Farben:

1,63 MB PNG:

Das 277 k JPG:

ungefähre Verluste (ich habe jpg verwendet, um dies hochzuladen! aber es zeigt Ihnen die Verluste

Also in der Summe

• Verwenden Sie PNG für Bilder mit einfarbigen Blöcken, z. B. Sprites im NES-Stil .
• Verwenden Sie JPG für Bilder mit vielen Farbabweichungen. Dies ist wie jedes andere Bild, insbesondere Hintergründe .

Lassen Sie uns die Frage dann weiter abstrahieren:

Welche Überlegungen müssen in einem Spiel, das auf der angegebenen Plattform ausgeführt wird, für die Medien verwendet werden?

Überlegung Nr. 1: Größe, auch bekannt als Ladegeschwindigkeit

Unabhängig von der Plattform und dem Spiel und der Art der Medien muss sie zum Rendern in einen Kontext gebracht werden. Auf einer webbasierten Plattform bedeutet dies das Herunterladen. In einer Desktop-Umgebung oder Konsole bedeutet dies, dass von einem lokalen Speichermedium geladen wird. Das Laden Ihrer Medien braucht Zeit. Webbasierte Plattformen können besonders verkrüppelt sein, wenn viele Medien über eine langsame Verbindung heruntergeladen werden müssen.

Überlegung Nr. 2: Speicherverbrauch

Bezogen auf, aber nicht gleich Größe. Ein Medienstück kann auf der Festplatte oder in einem Paket oder was auch immer komprimiert werden, aber sobald es als Textur- oder Soundpuffer für etwas geladen ist, kann es etwas größer sein. Das Gerät, auf dem Ihr Spiel ausgeführt wird, verfügt nicht über unendlich viel Speicher.

Überlegung Nr. 3: Qualität und Stil

Sind die Medien von ausreichender Qualität? Dies kann für Ihr Spiel von entscheidender Bedeutung sein und steht häufig im Widerspruch zur Größenüberlegung. Sehr oft ist ein Gleichgewicht zwischen beiden erforderlich. Einige Spiele haben unglaublich einfache Grafiken (Minecraft) und sind dennoch sehr erfolgreich. Andere haben wirklich großartige Grafiken, die viel Gedächtnis in Anspruch nehmen, aber eine beeindruckende Qualität mit erstaunlich aussehenden Hintergründen bieten. Einige Spiele kommen mit Blips und Bloops für Soundeffekte davon, während andere 41k-Stereomusik benötigen.

Je nachdem, was am wichtigsten ist, treffen Sie die richtige Entscheidung für Ihr Spiel. Die Entscheidung ist pro Spiel, nicht eine Größe passt für alle.

Im Allgemeinen wählen Sie die kleinste Dateigröße, die dennoch eine akzeptable Bildqualität bietet. Darüber hinaus unterstützt png Alpha, sodass Sie sich nicht mit zusätzlichen Bildern befassen müssen, um eine Alpha-Ebene zu verarbeiten.

Wofür / wann soll png verwendet werden (im Allgemeinen ):

• wenn Sie eine Alpha-Ebene verwenden müssen
• Comicbilder / vektorähnliche Bilder, deren scharfe Linien erhalten bleiben sollen.
• Bilder mit kleinen Farben

PNG ist verlustfrei, aber die Farbtiefe kann geändert werden.

Verwenden Sie jpg für die verbleibenden Fälle - fotografische Bilder, Gemälde, Bilder mit vielen kleinen Details, Farben und Verläufen. Wenn Sie versuchen, diese Bilder mit PNG zu speichern, werden Sie feststellen, dass die Dateigröße viel größer ist als das JPG.

Tools wie Adobe Image Ready geben Ihnen eine Vorschau Ihres Bildes zusammen mit der Dateigröße in einer Vielzahl von Formaten und Qualitätseinstellungen.