Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Пиксельные картинки png: пиксель PNG изображения с прозрачным фоном

У прозрачных пикселей тоже есть чувства или артефакты png’шек с прозрачностью / Хабр

Поговорим о 2D-играх. Независимо от платформы, на которой они разрабатываются — почти всегда они будут использовать 3D-акселлераторы для вывода 2D-спрайтов (iOS, Android, PC… даже Flash уже это учится делать).

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

Вы попытаетесь наложить тайлы внахлест, но швы все равно останутся… И вы начнете ломать голову.

А дело все в злосчастных прозрачных пикселях! Оказывается, у них тоже есть цвет.

Для того, чтобы понять, почему это происходит, вы должны понять, каким образом GPU масштабирует текстуры. Он это делает не совсем так, как это делают графредакторы. И дело тут касается прозрачности.

Оно и понятно, это простительно для 3D игр и тамошних текстур, но это будет вызывать артефакты в случае, если у вас на спрайтах будет ситуация, когда полностью непрозрачный пиксель будет соседствовать с полностью прозрачным (что с великой долей вероятности появится в случае пиксель-арта и т.

п.).

О прозрачности и PNG.
Допустим, у нас есть картинка синего квадрата, где присутствует условие бага — непрозрачные пиксели соседствуют с полностью прозрачными:

Это изображение состоит из двух каналов — канал цвета (RGB) и альфа-канал (прозрачность). Вся загвоздка в том, что полностью прозрачные пиксели все равно имеют какое-то значение в канале цвета. И какое именно это будет значение — известно только софтине, которая сжимала PNG. По сути, эти цвета могут быть любыми.

В ситуации с изображением выше запросто может получиться такая картина:

Т.е. прозрачные пиксели будут иметь белый цвет. Но т.к. они полностью прозрачны — мы этого никогда не увидим и все будет ок.

Прозрачность, GPU и масштабирование.
Теперь давайте посмотрим, как видеокарта масштабирует текстуры с прозрачностью.

Для упрощения этого дела, она масштабирует отдельно канал цвета и отдельно — альфа-канал. Например, при масштабировании вышеупомянутой текстуры на 80% (баг проявится при любом скейле), мы получим такую картину:

Видите?

GPU смешал пограничные синие пиксели с теми, что за границей прозрачности (т. к. он скейлил канал цвета отдельно от альфы и ему было все равно, прозрачные они или нет). В результате пограничные пиксели смешались с белым цветом и приобрели совсем непонятный цвет.

Очевидно, если попытаться затайлить такой спрайт, мы явно увидим швы.

И, думаю, очевидно, почему от таких артефактов избавлены спрайты, граница которых постепенно сходит в прозрачность, а не резко скачет с 1 до 0.

Как бороться?
Теперь, когда мы знаем в чем дело, мы знаем, как с этим бороться. Нам нужно, чтобы прозрачные пиксели, прилегающие к границам, имели цвет, схожий с пограничными. При чем, если мы будем уменьшать мастштаб спрайта более чем в 2 раза, то нужно позаботиться об «окантовке» изображения шириной в несколько пикселей. Но как это сделать?

Самый простой способ, который я нашел — это создать второй слой в фотошопе, положить его под основной, размыть его blur’ом и выставить прозрачность в 1%. В результате, пиксели вокруг нашего изображения будут почти невидимыми (1% прозрачности), но гарантировано иметь цвет, схожий с пограничными. Конечно, эффект блюра подойдет не для каждого спрайта. Где-то можно создать 4 таких (1%) слоя, но не блюрить их, а просто сдвинуть в разные стороны…

В общем, надеюсь, кому-то эта информация окажется полезной.

Импортирование изображений — Документация Godot Engine (stable) на русском языке

Поддерживаемые форматы изображения

Godot может импортировать данные форматы изображения:

  • BMP (.bmp) — не поддерживает изображения с разрешением 16 бит на пиксель. Поддерживаются только 1-битные, 4-битные, 8-битные, 24-битные и 32-битные.

  • DirectDraw Surface (.dds) — если MIP-карты присутствуют в текстуре, они будут загружены напрямую. Это можно использовать для достижения эффектов с помощью настраиваемых MIP-карт.

  • OpenEXR (.exr) — поддерживает HDR (настоятельно рекомендуется для панорамного неба).

  • OpenEXR (.exr) — поддерживает HDR (настоятельно рекомендуется для панорамного неба).

  • JPEG (.jpg, .jpeg) — не поддерживает прозрачность в соответствии с ограничениями формата.

  • PNG (.png) — точность при импорте ограничена 8 битами на канал (без изображений HDR).

  • Truevision Targa (.tga)

  • SVG (.svg, .svgz) — SVG растеризируются с использованием NanoSVG при их импорте. Поддержка ограничена; сложные векторы могут отображаться некорректно. Для сложных векторов их рендеринг в PNG с помощью Inkscape часто оказывается лучшим решением. Это можно автоматизировать благодаря интерфейсу командной строки.

  • WebP (.webp) — WebP файлы поддерживают прозрачность и могут быть сжаты с потерей качества или без. Точность лимитированна 8 битами на канал.

Примечание

Если вы скомпилировали редактор Godot из исходного кода с отключенными определенными модулями, некоторые форматы могут быть недоступны.

Импортирование текстур

Действие по умолчанию в Godot — импортировать изображения в виде текстур. Текстуры хранятся в видеопамяти и не могут быть доступны напрямую. Это то, что делает их рисование более эффективным.

Возможности импорта обширны:

Обнаружить 3D

Эта опция позволяет Godot знать, когда текстура (которая по умолчанию импортируется для 2D) используется в 3D. В этом случае настройки изменяются, поэтому флаги текстуры более удобны для 3D (MIP-карты, фильтр и повтор включаются, а сжатие изменяется на VRAM). Текстура также повторно импортируется автоматически.

Сжатие

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

Compress Mode (режим сжатия)

  • Сжатие VRAM: Это наиболее распространенный режим сжатия для 3D-ресурсов. Размер на диске уменьшается, и использование видеопамяти также значительно уменьшается (обычно в 4–6 раз). Этого режима следует избегать для 2D, поскольку он демонстрирует заметные артефакты.

  • Lossless Compression: (сжатие без потерь). Это наиболее распространенный режим сжатия для 2D-ресурсов. Он показывает активы без каких-либо артефактов, а сжатие на диске приличное. Однако он будет использовать значительно больше видеопамяти, чем сжатие VRAM. Это рекомендуемый параметр для пиксельной графики.

  • Lossy Compression: (сжатие с потерями). Это хороший выбор для больших 2D-ресурсов. Он имеет некоторые артефакты, но меньше, чем VRAM, а размер файла в несколько раз меньше, чем у файлов без потерь или без сжатия. Использование видеопамяти в этом режиме не уменьшается; это то же самое, что и со сжатием без потерь или без сжатия.

  • Uncompressed: (без сжатия). Полезно только для форматов, которые нельзя сжать (например, необработанные изображения RAW).

В этой таблице каждый из четырех вариантов описан вместе с их преимуществами и недостатками (|хорошее| = лучшее, |плохое| = худшее):

Несжатый

Compress Lossless

Compress Lossy

Compress VRAM

Описание

«Сырые» пиксели

Stored as Lossless WebP / PNG

Stored as Lossy WebP

Сохраняется как S3TC/BC или PVRTC/ETC в зависимости от платформы

Размер на диске

|плохо| Большой

|обычный| Маленький

|хороший| Очень маленький

|обычный| Маленький

Использование памяти

|плохо| Большой

|плохо| Большой

|плохо| Большой

|хорошо| Маленький

Производительность

|обычный| Нормальный

|обычный| Нормальный

|обычный| Нормальный

|хорошо| Быстрый

Потеря качества

|хорошо| Нет

|хорошо| Нет

|обычно| Незначительно

|плохо| Умеренно

Время загрузки

|обычный| Нормальный

|плохо| Медленно

|плохо| Медленно

|хорошо| Быстрый

Режим HDR

Godot поддерживает текстуры высокого динамического диапазона (такие, как . HDR или .EXR). Они, в основном, полезны, как равнопрямоугольные панорамы неба (в интернете есть много, если вы ищете их), которые заменяют Cubemaps в Godot 2.x. Современные ПК поддерживают формат BC6H VRAM, но есть еще много других.

Если вы хотите, чтобы Godot обеспечивал полную совместимость с точки зрения типов текстур, включите опцию «Force RGBE».

Карта нормалей

При использовании текстуры в качестве карты нормалей требуются только красный и зеленый каналы. Поскольку обычные алгоритмы сжатия текстур создают артефакты, которые не очень хорошо выглядят на картах нормалей, формат сжатия RGTC лучше всего подходит для этих данных. Если для этого параметра установлено значение «Enabled» (включено), Godot будет импортировать изображение как сжатое RGTC. По умолчанию он установлен на «Detect» (обнаружение), что означает, что если текстура когда-либо будет использоваться в качестве карты нормалей, она будет изменена на «Enabled» (включено) и повторно импортирована автоматически.

Обратите внимание, что сжатие RGTC влияет на результирующее изображение карты нормалей. Вам нужно будет настроить пользовательские шейдеры, которые используют карту нормалей, чтобы принять это во внимание.

Примечание

Godot requires the normal map to use the X+, Y+ and Z+ coordinates, this is known as OpenGL style. If you’ve imported a material made to be used with another engine it may be DirectX style, in which case the normal map needs to be converted so its Y axis is flipped.

Более подробную информацию о картах нормалей (включая таблицу порядка координат для популярных движков) можно найти здесь.

Флаги

Существует множество параметров, которые можно переключать при импорте изображения в качестве текстуры, в зависимости от варианта использования.

Повторить

Эта опция чаще всего используется в 3D, и обычно отключена в 2D. Она задает координатам UV за пределами области 0,0 -1,1 «цикл»(«loop»).

Повторение может быть дополнительно установлено в зеркальном режиме.

Фильтр

Когда пиксели становятся больше пикселей экрана, этот параметр включает для них линейную интерполяцию. В результате получается более гладкая (менее блочная) текстура. Этот параметр можно обычно использовать в 2D и 3D, но обычно он отключается при создании игр с идеальным пикселем.

Мип-карты

Когда пиксели становятся меньше экрана, срабатывают MIP-карты. Это помогает уменьшить эффект зернистости при сжатии текстур. Имейте в виду, что на более старом оборудовании (GLES2, в основном мобильное) есть некоторые требования для использования MIP-карт:

Помните о вышеизложенном при создании игр и приложений для телефона, стремитесь к полной совместимости и вам нужны MIP-карты.

При работе с 3D необходимо включать mipmap, так как это также улучшает производительность (для объектов, расположенных дальше, используются более компактные версии текстуры).

Анизотропный

Когда текстуры почти параллельны виду (например, полы), этот параметр делает их более детализированными за счет уменьшения размытости.

sRGВ

Godot uses Linear colorspace when rendering 3D. Textures mapped to albedo or detail channels need to have this option turned on in order for colors to look correct. When set to Detect mode, the texture will be marked as sRGB when used in albedo channels.

Предупреждение

Since the texture will have its data modified when sRGB is enabled, this means using the same texture in both 2D and 3D will make the texture display with incorrect colors in either 2D or 3D.

Чтобы обойти это, создайте копию текстуры в файловой системе и включите sRGB только в одной из копий. Используйте копию с включенным sRGB в 3D, а копию с отключенным sRGB — в 2D.

Процесс

Некоторые специальные процессы могут быть применены к изображениям при импорте в качестве текстур.

Исправить альфа-границу

Это переводит пиксели одного и того же окружающего цвета из состояния прозрачности в состояние непрозрачности. Это помогает смягчить эффект контура при экспорте изображений из Photoshop и т. п.

Если не требуются определенные значения, рекомендуется оставить его по умолчанию.

Предварительно умноженная альфа

Альтернативой исправлению затемненных границ является использование предварительно умноженного альфа-канала. При включении этой опции текстура будет преобразована в этот формат. Имейте в виду, что нужно будет создать материал, который использует режим наложения PREMULT ALPHA для элементов холста, которые в нём нуждаются.

HDR как sRGB

Некоторые файлы HDR повреждены и содержат данные о цвете sRGB. Рекомендуется не использовать их, но, в худшем случае, включение этой опции заставит их выглядеть правильно.

Обращенный цвет

Меняет цвет изображения на противоположное. Это полезно, например, для преобразования карты высот, созданной внешними программами, в карту глубины для использования с Spatial Material.

SVG

Масштабировать

Этот параметр применим только к файлам SVG. Он контролирует масштаб изображения SVG. Масштаб по умолчанию (1.0) заставит импортированный SVG соответствовать исходному масштабу проекта.

Редактирование PNG — Бесплатный онлайн-инструмент для рисования пиксельной графики

Популярные

Новые

Избранные

Частные

Назад

Далее

:

Размер пикселя (1)

Х:0, Y: 0

Ширина: 256px
Высота: 144px

Ширина: 0, Высота: 0

Загрузка..