Qual formato de imagem usar para sprites em um jogo HTML5?

8

Em um jogo 2D em HTML5, qual é o melhor formato de imagem a ser usado e por quê? Devo usar diferentes formatos em diferentes situações? Por exemplo, .png para a imagem de fundo, .jpeg para os quadros de animação e assim por diante ...

A parte "por que" é importante para mim. Realmente não precisa ser localizado no HTML5, mas também pode ser um conselho geral.

jcora
fonte

Respostas:

9

O formato da imagem é apenas uma maneira de salvar dados brutos de pixels, desde que você use bitmaps, o formato geralmente não faz diferença na execução após a etapa de carregamento. O que importa são os dados de pixel fornecidos à API de gráficos. Existem três formatos comumente usados ​​na web:

.gif O formato GIF (agora normalmente obsoleto) é usado para imagens com 256 cores ou menos, resultando em um tamanho muito pequeno. O GIF também é frequentemente usado para animações. Ao usar apenas 256 ou menos cores, é um formato sem perdas, o que significa que nenhuma qualidade é perdida em termos de compactação. Caso contrário, a variedade de cores deve ser reduzida para 256, levando à redução da qualidade.

.png O formato Portable Network Graphics é, na minha opinião, o formato de imagem mais usado, pois possui uma boa taxa de compactação, além de poder salvar mais cores que o GIF. PNG também é capaz de translucidez (ou normalmente chamado de transparência, que é o nome errado, pois um pixel precisa ser 100% translúcido para ser chamado de transparente). É também um formato sem perdas e teve como objetivo melhorar e substituir o GIF em 2006 ( fonte , primeiro parágrafo). Eu pessoalmente o uso como um tipo de imagem em sites e jogos.

.jpeg O formato JPEG é comumente usado para fotos e outras coisas. Não é capaz de translucidez, nem garante a compactação sem perdas. É comum especificar a qualidade ao compactar, levando a uma troca entre espaço e qualidade.

Vamos ver alguns casos de uso:

  • Obras de arte ou geralmente complexa são boas para serem salvas no formato JPEG, pois foram projetadas para esse tipo de imagem.
  • É melhor salvar os sprites em PNG, especialmente quando a variedade de cores é baixa.
  • É difícil definir em que Fundos os fundos devem ser salvos. A regra geral seria algo como: Se for uma imagem ou arte complexa que envolva uma grande variedade de cores, use JPEG, caso contrário, PNG.
  • Um ícone provavelmente deve ser uma imagem PNG, mesmo que use menos de 256 cores, pois o GIF é, conforme indicado acima, substituído por PNG.

Lembre-se de que o consumo de memória e o desempenho da API de gráficos geralmente são iguais entre esses formatos. O que importa é tamanho e velocidade de carregamento (você pode mergulhar nos algoritmos desses formatos se desejar estimar o custo de carregamento). O consumo de memória de qualquer imagem no estado bruto é geralmente definido pelo width*height*4byte de regra geral para um formato de pixel RGBA, que é o mais comum.

Marco
fonte
Na verdade .gif é com perdas para imagens de cor elevada (mais de 256 cores)
bobobobo
Sim, isso ocorre porque o GIF pode usar apenas 256 cores. Vou acrescentar isso à resposta para maior clareza.
Marco
SVG não está levando em consideração?
zinking
O SVG geralmente não é adequado para jogos, pois não foi feito para sprites ou obras de arte, mas ícones e gráficos matemáticos explicáveis, gráficos simples. É prática comum usar imagens diferentes para diferentes resoluções, em vez de confiar no SVG.
Marco
12

Apenas algumas coisas a acrescentar à resposta de @ Marco:

.gif está desatualizado. Eu evitaria completamente o uso de arquivos .gif, tanto quanto possível. Acho que as pessoas só as usam hoje em dia por causa de animações no navegador e pngs animados não são bem suportados no momento.

Então, tudo o que você tem é jpg e png.

  • PNG: É sem perdas . A única coisa que você está considerando aqui é a taxa de compressão que você obtém. Geralmente, um bom trabalho é compactar blocos de cores sólidas , mas um trabalho ruim é compactar cenas com muita variação.

  • JPG: faz um trabalho horrendo com blocos de cores sólidas (perde detalhes e ocupa mais espaço que png), mas faz um ótimo trabalho com fotos com muita variação (boa compactação, perda quase imperceptível da qualidade da imagem).

Por exemplo

4Kb Megaman, em formato PNG:

megaman png

Esta mesma imagem tem 36 KB em JPG

megaman jpg

E a perda de detalhes (que vem GRATUITAMENTE com compressão jpg)

perda de jpg

Portanto, aqui, com os blocos sólidos da imagem colorida, perdemos detalhes e incorremos em tamanho adicional usando o JPG . Conclusão: não use jPG para imagens com grandes blocos de cores sólidas.

Agora, pense em uma cena colorida:

1,63 MB PNG:

png

O JPG de 277 k :

277 k jpg

perdas aproximadas (usei jpg para fazer upload disso! mas mostra as perdas

diff

Então, em suma

  • Use PNG para imagens com blocos de cores sólidas, ou seja, sprites no estilo NES .
  • Use JPG para imagens com muitas variações de cores. É como qualquer outra imagem, especialmente fundos .
bobobobo
fonte
Obrigado por fornecer mais e certamente exemplos mais claros. Adicionei a reprovação de GIF à minha resposta. ;)
Marco
que jogo é esse?
precisa saber é o seguinte
É Warcraft 3!
precisa saber é o seguinte
1

Vamos abstrair ainda mais a questão:

Em um jogo rodando em sua plataforma designada, quais são as considerações para a mídia que ela usa?

Consideração nº 1: tamanho, também conhecido como velocidade de carregamento

Independentemente da plataforma, do jogo e do tipo de mídia, o fato é que ele precisa ser trazido para um contexto de renderização. Em uma plataforma baseada na Web, isso significa fazer o download. Em um ambiente de desktop ou console, significa carregar de uma mídia de armazenamento local. Carregar sua mídia leva tempo. As plataformas baseadas na Web podem ser especialmente prejudicadas se for necessário fazer o download de muita mídia em uma conexão lenta.

Consideração # 2: consumo de memória

Relacionado a, mas não o mesmo que tamanho. Uma mídia pode ser compactada enquanto estiver no disco ou em um pacote ou qualquer outra coisa, mas depois de carregada como uma textura ou buffer de som para algo, pode ser um pouco maior. O dispositivo no qual o jogo está sendo executado não possui uma quantidade infinita de memória.

Consideração # 3: qualidade e estilo

A mídia é de qualidade suficiente? Isso pode ser crucial para o seu jogo e geralmente está em desacordo com a consideração do tamanho. Muitas vezes é necessário um equilíbrio entre os dois. Alguns jogos têm gráficos incrivelmente simples (minecraft) e ainda são muito bem-sucedidos. Outros têm gráficos realmente impressionantes que ocupam muito e muito da memória, mas oferecem uma qualidade imersiva com fundos incríveis. Alguns jogos se destacam com blips e bloops para efeitos sonoros, enquanto outros precisam ter 41k de música estéreo.

Portanto, com base no que é mais importante, você toma a decisão certa para o seu jogo. A decisão é por jogo, não um tamanho único.

PlayDeezGames
fonte
0

Geralmente, você escolhe o menor tamanho de arquivo que ainda oferece uma qualidade de imagem aceitável. Além disso, o png suporta alfa, para que você não precise lidar com imagens adicionais para lidar com uma camada alfa.

Para que / quando usar png (em geral ):

  • quando você precisa usar uma camada alfa
  • imagens de desenho animado / imagens vetoriais das quais você deseja preservar as linhas nítidas.
  • imagens com pequenas quantidades de cores

PNG é sem perdas, mas a profundidade da cor pode ser alterada.

Use jpg para os demais casos - imagens fotográficas, pinturas, fotos com muitos pequenos detalhes, cores e gradientes. Se você tentar usar PNG para armazenar essas imagens, notará que o tamanho do arquivo é muito maior que o jpg.

Ferramentas como o Adobe Image Ready oferecem uma visualização da sua imagem junto com o tamanho do arquivo em uma variedade de formatos e configurações de qualidade.

CiscoIPPhone
fonte