Белые точки на прозрачном фоне

Белые точки на прозрачном фоне

сроки белые точки и цветы

желтый белый точка один

Красивая белая точка

горшок с белыми точками и ручкой иконки

чайник с белыми точками иконы set

кастрюля с белыми точками иконы set

кастрюля с белыми точками набор иконок

чайник с белыми точками набор иконок

Желтый мультфильм белая точка кубовидная

Фиолетовая белая точка прямоугольная коробка

Красочная белая точка шар мешок элемент

красная турка с белыми точками значок плоский стиль

чайник с белыми точками значок простой стиль

кастрюля с белыми точками значок простой стиль

красный чайник с белыми точками значок плоский стиль

горшок с белыми точками и ручкой значок простой стиль

красный горшок с белыми точками и ручкой значок

кастрюля с белыми точками значок плоский стиль

черный горшок с белыми точками и ручкой значок

черный чайник с белыми точками значок простой стиль

черная кастрюля с белыми точками значок простой стиль

красная чашка с белыми точками значок плоский стиль

черная турка с белыми точками значок простой стиль

чайник с белыми точками значок плоский стиль

горшок с белыми точками и ручкой значок плоский стиль

Коммерческая черно белая точка украшения диалоговое окно настроение взрыв облако

горшок с белыми точками и ручкой набор иконок

розовые коробки люблю коробки белые точки лук украшения

красная кухонная перчатка с белыми точками значок плоский стиль

Исходный файл psd черный градиент белая точка дизайн визитной карточки

Свиток в китайском стиле Ручной обращается свиток Иллюстрация катушки Белая точка украшения

Ручная роспись зеленой окантовкой Прямоугольная граница Красные и белые точки носки границы Красная шляпа границы

pngtree предлагает более 33 белые точки png и векторных изображений а также прозрачные фоновые белые точки картинки и psd файлы. Загрузите бесплатные графические ресурсы в виде png eps ai или psd.

Присоединяйтесь к команде проектантов pngtree

Загрузите первый дизайн, защищенный авторским правом. получить пакет купонов дизайнера $5 + $88

Шесть один Детский день овсянка украшение

пустые слова пузыри с воспроизведение растровых точек

сроки белые точки и цветы

правая стрелка значок дизайн вектор

Читайте также:  0X80073712 windows 10 ошибка обновления как исправить

Коммерческая черно белая точка украшения диалоговое окно настроение взрыв облако

мультфильм милый воскрешение яйцо плавающая декорация

простой атмосфера круглый Сплит линия

кастрюля с белыми точками набор иконок

кастрюля с белыми точками иконы set

горшок с белыми точками и ручкой иконки

чайник с белыми точками набор иконок

чайник с белыми точками иконы set

Красочная белая точка шар мешок элемент

горшок с белыми точками и ручкой набор иконок

Спортивный шаблон в горошек

мультфильм красный бант

Розовая шапка Женская шляпа Девушка шляпа от солнца Иллюстрация шляпа принцессы

вправо икона дизайн вектор

кастрюля с белыми точками значок плоский стиль

розовые коробки люблю коробки белые точки лук украшения

рамка Красная граница Открой дверь Открытая дверь

кастрюля с белыми точками значок простой стиль

черная кастрюля с белыми точками значок простой стиль

черный горшок с белыми точками и ручкой значок

черный чайник с белыми точками значок простой стиль

черная турка с белыми точками значок простой стиль

чайник с белыми точками значок плоский стиль

желтый белый точка один

горшок с белыми точками и ручкой значок плоский стиль

красная турка с белыми точками значок плоский стиль

чайник с белыми точками значок простой стиль

красный чайник с белыми точками значок плоский стиль

горшок с белыми точками и ручкой значок простой стиль

красный горшок с белыми точками и ручкой значок

красная чашка с белыми точками значок плоский стиль

вправо икона дизайн вектор

Красивая белая точка

лук Рисованный мультфильм Ручной обращается лук Розовый бант

личность стрелка иллюстрацией красочные

карты и навигация иконы комплекс

красная кухонная перчатка с белыми точками значок плоский стиль

Фиолетовая белая точка прямоугольная коробка

Желтый мультфильм белая точка кубовидная

Свиток в китайском стиле Ручной обращается свиток Иллюстрация катушки Белая точка украшения

Ручная роспись зеленой окантовкой Прямоугольная граница Красные и белые точки носки границы Красная шляпа границы

Черный чемодан Мультфильм чемодан Иллюстрация вагонетки чемодан

Туристическая достопримечательность Простая карта Зеленая карта синий

Исходный файл psd черный градиент белая точка дизайн визитной карточки

Читайте также:  Adobe after effects english

Присоединяйтесь к команде проектантов pngtree

Загрузите первый дизайн, защищенный авторским правом. получить пакет купонов дизайнера $5 + $88

2017-2019 Шанхайская HuaiTu сетевая научная компания с ограниченной ответственностью . -Все права защищены.

Поделитесь и получите бесплатные загрузки

Вы приглашали один друг в каждом разе то получите 40 загрузок.

С вашей социальной сетью.

5,563,653+ Проектант присоединился к pngtree

Зарегистрируйтесь и начните скачивание

Уже зарегистрирован один аккаунт? авторизоваться

спасибо за выбор pngtree мы уже отправили вам электронное письмо с ссылкой для подтверждения нажмите на ссылку чтобы завершить регистрацию Если вы не получили письмо в течение 1 минуты нажмите кнопку «Отправить» и мы отправим вам другое письмо. Отправить снова Попробуй еще раз.

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

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

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

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

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

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

О прозрачности и PNG.

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

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

Читайте также:  Битовая глубина цвета равна 24 сколько различных

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

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

Прозрачность, GPU и масштабирование.

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

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

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

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

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

Как бороться?

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

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

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

Ссылка на основную публикацию
Adblock detector