Конвертируйте Png В Dds В Формате Dxt5 И Просматривайте Результаты На Лету С Помощью Python

Если вы уверены, что понимаете, чего ожидать от формата DXT5, то проверьте себя: в спойлере есть анимация - слева изображение PNG размером 4х4 пикселя, справа - конвертированное в DDS(DXT5) Если это вас не удивляет, смело идите дальше.

Да, я точно знаю, как происходит конвертация в DXT5.

Конвертируйте PNG в DDS в формате DXT5 и просматривайте результаты на лету с помощью Python

Если вы искали инструмент или возможность на лету увидеть, что произойдет с вашим PNG-изображением после конвертации в DXT5, добро пожаловать в статью.



Цель

Общий обзор формата DXT5 и инструмента, позволяющего «на лету» увидеть результат конвертации.

Статья не предназначена для профессионалов, носит исключительно ознакомительный характер.



Для кого

  • Кто не сталкивался с созданием текстур?
  • Рисуем растровые картинки: пиксельарт/2D
  • Кому интересно, что за зверь S3TC/DXT?
  • Кто не ищет простых способов создания игр?
  • Кто пытается создавать игры без известных фреймворков (Unity и т.п.

    )

  • Вы используете систему UNIX (поскольку инструмент, который мы рассмотрим далее, тестировался только под Ubuntu)


Что такое S3TC/DXT

Если коротко, то это сжатие изображения, при котором: а) используется меньше (v)ОЗУ; б) быстрее загружается в (v)RAM. Здесь я позволю себе оставить ссылку на таблицу, где есть краткое описание форматов и почему/когда их использовать.

Здесь .

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



Проблемы

DXT5 (я взял его для примера, потому что использую его в текущем проекте) — формат сжатия с потерями, поэтому мы жертвуем цветом.

Во-первых, цвета будут не в формате 8 бит на RGB, т.е.

не RGB888, а в формате RGB565. Это еще половина проблемы.

Но самая главная проблема (на мой взгляд) в том, что в пределах одного тексела, а это 4 на 4 пикселя, на выходе будет максимум 4 цвета: 2 основных и 2 дополнительных.

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

Мы взяли в руки мышку/планшет и рисовали.

Это кажется красивым (примем условность, что это красиво).



Конвертируйте PNG в DDS в формате DXT5 и просматривайте результаты на лету с помощью Python

Чтобы преобразовать его в DDS, вам нужно использовать GIMP, Photoshop с плагинами или что-то подобное.

Но результат вы увидите только после того, как откроете полученный файл.

Давайте посмотрим, что произошло (представим, что мы видим только правую часть изображения, в случае открытия файла DDS с помощью GIMP):

Конвертируйте PNG в DDS в формате DXT5 и просматривайте результаты на лету с помощью Python

Девушке окончательно стало грустно, цветы завяли, тиара превратилась в веревку.

«Хммм», — скажете вы.

Вот если бы я видел, что было бы раньше.

Но тут может помочь (условно помочь) тот инструмент, который я собрал для своих нужд - Редактор Pyglet PNG в DDS

За что

Редактировать/редактировать исходный файл, выбрать примерные цвета, составить примерную палитру.

Этот «редактор» преобразует изображение PNG в DDS на лету, и вы сразу можете увидеть, что происходит, когда вы конвертируете и вставляете спрайт в игру.



Почему

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



И все это?

На данном этапе да.

В такой «редактор» можно добавить много чего, но всему свое время.

Хотелось бы узнать больше от сообщества: как решать такие ситуации, когда нужно проверить, что будет с выходной текстурой.

P.S.: Редактор относительно хорошо работает с изображениями размером до 512*512. Утечки из памяти, но не сильно :) (этот метод можно найти в коде по комментарию "!!!ACHTUNG!!!").

Теги: #python #Графический дизайн #dds #convert #pyglet

Вместе с данным постом часто просматривают: