Quale formato di immagine usare per gli sprite in un gioco HTML5?


8

In un gioco HTML5 2D, qual è il miglior formato di immagine da utilizzare e perché? Dovrei usare formati diversi in situazioni diverse? Ad esempio .png per l'immagine di sfondo, .jpeg per i frame di animazione e così via ...

La parte del "perché" è importante per me. Non deve essere localizzato in HTML5, può anche essere un consiglio generale.

Risposte:


9

Il formato dell'immagine è solo un modo per salvare i dati grezzi di pixel, quindi finché si utilizzano bitmap, il formato di solito non fa differenza nell'esecuzione dopo il passaggio di caricamento. Ciò che conta sono i dati pixel forniti all'API grafica. Esistono tre formati comunemente utilizzati nel Web:

.gif Il formato GIF (ora normalmente deprecato) viene utilizzato per le immagini con 256 colori o meno, portando a dimensioni molto ridotte. La GIF viene spesso utilizzata anche per le animazioni. Quando si utilizzano solo 256 o meno colori, si tratta di un formato senza perdita, il che significa che non viene persa la qualità in termini di compressione. In caso contrario, la varietà di colori deve essere ridotta a 256, con conseguente riduzione della qualità.

.png Il formato Portable Network Graphics è, a mio avviso, il formato di immagine più utilizzato in assoluto, poiché presenta un buon tasso di compressione pur essendo in grado di salvare più colori rispetto al GIF. PNG è anche in grado di traslucenza (o comunemente chiamato trasparenza, che è il nome sbagliato poiché un pixel deve essere 100% traslucido per essere chiamato trasparente). È anche un formato senza perdite e mirava a migliorare e sostituire GIF nel 2006 ( fonte , primo paragrafo). Lo uso personalmente come tipo di immagine su siti Web e giochi.

.jpeg Il formato JPEG è comunemente usato per le foto e cose del genere. Non è capace di traslucenza, né garantisce una compressione senza perdita. È comune specificare la qualità durante la compressione, portando a un compromesso tra spazio e qualità.

Analizziamo alcuni casi d'uso:

  • Opere d'arte o opere generalmente complesse sono buone per essere salvate in formato JPEG, poiché sono progettate per quel tipo di immagini.
  • Gli sprite sono i migliori da salvare in PNG, specialmente quando la varietà di colore è bassa.
  • È difficile definire in quali sfondi salvare. La regola generale sarebbe qualcosa di simile: se si tratta di un'immagine o di un'arte complessa che coinvolge una grande varietà di colori, prendere JPEG, altrimenti PNG.
  • Un icona dovrebbe probabilmente essere un'immagine PNG, anche se utilizza meno di 256 colori, dal GIF è, come detto in precedenza, sostituito da PNG.

Tieni presente che il consumo di memoria e le prestazioni dell'API grafica sono generalmente uguali tra questi formati. Ciò che conta sono le dimensioni e la velocità di caricamento (è possibile immergersi negli algoritmi di questi formati se si desidera stimare il costo di caricamento). Il consumo di memoria di qualsiasi immagine allo stato grezzo è generalmente definito dal width*height*4byte della regola generale per un formato pixel RGBA, che è il più comune.


In realtà .gif ha una perdita di immagini a colori (oltre 256 colori)
bobobobo,

Sì, perché GIF può usare solo 256 colori. Lo aggiungerò alla risposta per chiarezza.
Marco,

SVG non sta prendendo in considerazione?
tintinnio il

SVG di solito non è adatto per i giochi, in quanto non è stato realizzato per sprite o opere d'arte, ma icone e grafica matematica spiegabile, così semplice grafica. È prassi comune utilizzare immagini diverse per risoluzioni diverse anziché fare affidamento su SVG.
Marco,

12

Solo un paio di cose da aggiungere alla risposta di @ Marco:

.gif è gravemente obsoleto. Eviterei completamente di utilizzare i file .gif il più possibile. Penso che le persone li usino solo in questi giorni a causa delle animazioni nel browser e al momento i png animati non sono ben supportati .

Quindi tutto ciò che hai è jpg e png.

  • PNG: è senza perdita di dati . L'unica cosa che stai prendendo in considerazione qui è il tasso di compressione che ottieni. Generalmente fa un buon lavoro comprimendo blocchi di colori solidi , ma un cattivo lavoro comprime scene con molte variazioni.

  • JPG: Fa un lavoro orrendo con blocchi di colore solido (entrambi perde dettagli e occupa più spazio di png) ma un ottimo lavoro con immagini con molte variazioni (buona compressione, perdita di qualità dell'immagine quasi impercettibile).

Per esempio

4Kb Megaman, in formato PNG:

megaman png

Questa stessa immagine è di 36 KB in JPG

megaman jpg

E la perdita di dettagli (che viene GRATIS! Con la compressione jpg)

perdita di jpg

Quindi qui, con i solidi blocchi di immagine a colori, perdiamo i dettagli e subiamo ulteriori dimensioni utilizzando JPG . Conclusione: non utilizzare jPG per immagini con grandi blocchi di colore solido.

Ora, pensa a una scena dai colori intensi:

1.63 MB PNG:

png

Il 277 k JPG:

277 k jpg

perdite approssimative (ho usato jpg per caricare questo! ma ti mostra le perdite

diff

Quindi in breve

  • Usa PNG per le immagini con blocchi di colore solido, ad esempio sprite stile NES .
  • Usa JPG per immagini con molte variazioni di colore. È come qualsiasi altra immagine, in particolare gli sfondi .

Grazie per aver fornito esempi più chiari e sicuramente più chiari. Ho aggiunto la deprecazione GIF alla mia risposta. ;)
Marco,

che gioco è quello?
scaduto dal

È Warcraft 3!
Bobobobo,

1

Astraggiamo ulteriormente la domanda, quindi:

In un gioco in esecuzione sulla piattaforma designata, quali sono le considerazioni per i media che utilizza?

Considerazione n. 1: dimensioni, ovvero velocità di caricamento

Indipendentemente dalla piattaforma e dal gioco e dal tipo di media, il fatto è che deve essere inserito in un contesto per il rendering. Su una piattaforma basata sul Web, questo significa download. In un ambiente desktop o console, significa caricare da un supporto di archiviazione locale. Il caricamento dei file multimediali richiede tempo. Le piattaforme basate sul Web possono essere particolarmente paralizzate se è necessario scaricare molti media su una connessione lenta.

Considerazione n. 2: consumo di memoria

Correlato a, ma non uguale alla dimensione. Un pezzo di media può essere compresso su disco o in un pacchetto o altro, ma una volta caricato come texture o buffer audio per qualcosa potrebbe essere un po 'più grande. Il dispositivo su cui è in esecuzione il gioco non ha una quantità infinita di memoria.

Considerazione n. 3: qualità e stile

I media sono di qualità sufficiente? Questo può essere cruciale per il tuo gioco ed è spesso in contrasto con la considerazione delle dimensioni. Molto spesso è necessario un equilibrio tra i due. Alcuni giochi hanno una grafica incredibilmente semplice (minecraft) e tuttavia hanno molto successo. Altri hanno una grafica davvero fantastica che occupa grandi quantità di memoria, ma offre una qualità coinvolgente con sfondi dall'aspetto sorprendente. Alcuni giochi scappano con blip e bloop per effetti sonori, mentre altri devono avere musica stereo da 41k.

Quindi, in base alla più importante, prendi la decisione giusta per il tuo gioco. La decisione è per gioco, non una taglia adatta a tutti.


0

In genere, scegli la dimensione del file più piccola che fornisce ancora una qualità accettabile dell'immagine. Inoltre, png supporta l'alfa, quindi non è necessario gestire immagini aggiuntive per gestire un livello alfa.

Cosa / quando usare png per (in generale ):

  • quando è necessario utilizzare uno strato alfa
  • immagini da cartone animato / immagini simili a quelle di cui desideri conservare le linee nitide.
  • immagini con una piccola quantità di colori

PNG è senza perdita di dati, ma l'intensità del colore può essere modificata.

Usa jpg per i casi rimanenti - immagini fotografiche, dipinti, immagini con molti piccoli dettagli, colori e sfumature. Se provi a usare PNG per memorizzare queste immagini noterai che la dimensione del file è molto più grande del jpg.

Strumenti come Adobe Image Ready ti daranno un'anteprima dell'immagine insieme alla dimensione del file in una varietà di formati e impostazioni di qualità.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.