Какой формат изображения использовать для спрайтов в игре HTML5?

8

В 2D HTML5-игре, какой формат изображения лучше всего использовать и почему? Должен ли я использовать разные форматы в разных ситуациях? Например, .png для фонового изображения, .jpeg для кадров анимации и так далее ...

Часть «почему» важна для меня. Он не должен быть локализован на HTML5, это может быть и общий совет.

jcora
источник

Ответы:

9

Формат изображения - это только способ сохранения необработанных данных пикселей, поэтому, пока вы используете растровые изображения, формат обычно не имеет значения в выполнении после этапа загрузки. Важны пиксельные данные, передаваемые в графический API. В Интернете обычно используются три формата:

.gif Формат GIF (теперь обычно не рекомендуется) используется для изображений с 256 цветами или менее, что приводит к очень маленькому размеру. GIF также часто используется для анимации. При использовании только 256 или менее цветов это формат без потерь, что означает, что при сжатии качество не теряется. В противном случае цветовая гамма должна быть уменьшена до 256, что приведет к снижению качества.

.png Формат Portable Network Graphics, как мне кажется, является наиболее используемым форматом изображений вообще, поскольку он имеет хорошую степень сжатия и позволяет сохранять больше цветов, чем GIF. PNG также способен к прозрачности (или обычно называется прозрачностью, что является неправильным названием, поскольку пиксель должен быть на 100% прозрачным, чтобы называться прозрачным). Это также формат без потерь, направленный на улучшение и замену GIF в 2006 году ( источник , первый абзац). Я лично использую это как тип изображения на сайтах и ​​в играх.

.jpeg Формат JPEG обычно используется для фотографий и тому подобного. Он не способен к прозрачности и не гарантирует сжатие без потерь. Обычно при сжатии указывается качество, что приводит к компромиссу между пространством и качеством.

Давайте рассмотрим некоторые варианты использования:

  • Произведения искусства или вообще сложные рисунки можно сохранить в формате JPEG, так как они предназначены для изображений такого типа.
  • Спрайты лучше всего сохранять в формате PNG, особенно когда цветовые различия невелики.
  • Трудно определить, в каких фонах следует сохранять. Общее правило будет выглядеть примерно так: если это рисунок или сложный рисунок, в котором много цветов, возьмите JPEG, иначе PNG.
  • Значок должен вероятно быть PNG изображения, даже если он использует менее 256 цветов, так как GIF является, как указано выше, заменены PNG.

Имейте в виду, что потребление памяти и производительность графического API обычно одинаковы между этими форматами. Важен размер и скорость загрузки (вы можете погрузиться в алгоритмы этих форматов, если хотите оценить стоимость загрузки). Потребление памяти любым изображением в необработанном состоянии обычно определяется width*height*4байтом общего правила для формата пикселей RGBA, который является наиболее распространенным.

Marco
источник
На самом деле .gif является потерями для высоких цветных изображений (более 256 цветов)
bobobobo
Да, это потому, что GIF может использовать только 256 цветов. Я добавлю это к ответу для ясности.
Марко
SVG не принимает во внимание?
звон
SVG обычно не подходит для игр, так как он был сделан не для спрайтов или художественных работ, а для значков и математически понятной графики, поэтому простая графика. Обычная практика - использовать разные изображения для разных разрешений, а не полагаться на SVG.
Марко
12

Еще пара вещей, которые можно добавить к ответу @ Marco:

.gif сильно устарел. Я бы полностью избегал использования файлов .gif в максимально возможной степени. Я думаю, что люди используют их в наши дни только из-за анимации в браузере, и анимированные PNG не очень хорошо поддерживаются в настоящее время.

Так что все, что у вас есть, это JPG и PNG.

  • PNG: без потерь . Единственное, что вы рассматриваете здесь, это скорость сжатия, которую вы получаете. Обычно хорошо сжимает блоки сплошного цвета , но плохо сжимает сцены с большим количеством вариаций.

  • JPG: выполняет ужасную работу с однотонными блоками (оба теряют детализацию и занимают больше места, чем png), но отлично работают с изображениями с большим количеством вариаций (хорошее сжатие, почти незаметная потеря качества изображения).

Например

4Kb Megaman, в формате PNG:

Megaman PNG

Это же изображение 36Kb в JPG

мегамен jpg

И потеря детализации (это БЕСПЛАТНО! Со сжатием JPG)

JPG потеря

Так что здесь, со сплошными блоками цветного изображения, мы теряем детали и получаем дополнительный размер, используя JPG . Вывод: не используйте jPG для изображений с большими блоками сплошного цвета.

Теперь подумайте о сцене высокого цвета:

1,63 МБ PNG:

PNG

277 к JPG:

277 тыс. Jpg

приблизительные потери (я использовал JPG, чтобы загрузить это! но он показывает вам потери

разница

Итак, в сумме

  • Используйте PNG для изображений с блоками сплошного цвета, т.е. спрайтами в стиле NES .
  • Используйте JPG для изображений с большим количеством вариаций цвета. Это как любое другое изображение, особенно фон .
bobobobo
источник
Спасибо за предоставление больше и, конечно, более четких примеров. Я добавил амортизацию GIF к своему ответу. ;)
Марко
что это за игра?
expiredninja
Это Warcraft 3!
бобобо
1

Давайте дополнительно абстрагируем вопрос, а затем:

В игре, работающей на назначенной платформе, каковы соображения относительно средств массовой информации, которые она использует?

Замечание № 1: размер, он же скорость загрузки

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

Вопрос № 2: потребление памяти

Связанный, но не такой же, как размер. Куски мультимедиа могут быть сжаты в то время как на диске или в пакете или чем-то еще, но как только это загружено как буфер текстуры или звука для чего-то, это может быть немного больше. Устройство, на котором выполняется ваша игра, не имеет бесконечного количества памяти.

Соображение № 3: качество и стиль

Являются ли СМИ достаточно качественными? Это может иметь решающее значение для вашей игры, и часто противоречит размеру. Очень часто требуется баланс между двумя. Некоторые игры имеют невероятно простую графику (майнкрафт) и все же очень успешны. У других действительно потрясающая графика, которая поглощает большие объемы памяти, но дает захватывающее качество с потрясающим фоном. Некоторые игры обходятся без бликов и пятен для звуковых эффектов, в то время как другие должны иметь стереофоническую музыку 41k.

Итак, исходя из того, что является наиболее важным, вы принимаете правильное решение для своей игры. Решение принимается за игру, а не для всех.

PlayDeezGames
источник
0

Как правило, вы выбираете самый маленький размер файла, который по-прежнему обеспечивает приемлемое качество изображения. Кроме того, png поддерживает альфа, поэтому вам не нужно иметь дело с дополнительными изображениями для обработки альфа-слоя.

Что / когда использовать png для ( вообще говоря ):

  • когда вам нужно использовать альфа-слой
  • мультяшные изображения / векторные изображения, которые вы хотите сохранить четкими линиями.
  • изображения с небольшим количеством цветов

PNG без потерь, но глубина цвета может быть изменена.

Используйте jpg для остальных случаев - фотографические изображения, картины, картинки с множеством мелких деталей, цветов и градиентов. Если вы попытаетесь использовать PNG для хранения этих изображений, вы заметите, что размер файла намного больше, чем в JPG.

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

CiscoIPPhone
источник