Правильная работа с атласами иконок

[Hrust 21]

Правильная работа с атласами иконок

 

Приветствую, на связи товарищ Hrusteckiy — UI-программист, чьи плоды работы можно видеть в New Project, Last Fallout Overhaul, Забвение, Hike, и многих других, также сделавший 100x100 иконки для оригинальной игры.

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

Скрытый текст

 

Начнём с софта.

Первым делом - используем Photoshop CS5/CS6 или CC(я использую 2019).

Второе - забудьте про Stalker Icon Editor(2023 год на дворе всё-таки).

Третье - нужен PaintDotNet. То есть, мы используем всего две программы для работы с самими иконками, не считая программу для их рендеринга.

 

Далее, нужно работать с исходником - tga идеальный буферный формат для двух этих программ, сохраняем в 32-битном формате. 

 

Спойлер

 

Для добавления новых иконок, используем PaintDotNet. Делаем новый слой, на него вставляем нужную нам картинку и подгоняем под размер(билинейный метод), выделяем область, вырезаем и вставляем на основной слой, тем самым затерев предыдущую иконку, если таковая имеется. Сохраняем и переходим в Photoshop. Здесь включаем сетку (Ctrl+Э), её размеры настраиваются здесь, по умолчанию она 50 пикселей.

 

Спойлер

  

 

 

ВАЖНО!!! НЕ ИСПОЛЬЗУЙТЕ КРАЙНИЕ ПРАВЫЕ И КРАЙНИЕ НИЖНИЕ КЛЕТКИ, ОНИ НЕ ЯВЛЯЮТСЯ ЦЕЛЫМИ И МЕНЬШЕ ОСТАЛЬНЫХ НА НЕСКОЛЬКО ПИКСЕЛЕЙ.

 

Выделяем с шифтом цвет+альфу, и, если это требуется, подгоняем иконку в пределах клетки, сохраняем.
Для копирования иконок с одного атласа на другой, выделяем иконку на одном, копируем и вставляем на другом — удобнее всего делать с выделенным цветом и альфой, чтобы не приходилось по отдельности переносить.

Далее, переходим в "слои" и разблокируем слой - это нам открывает информацию в свойствах о выделенном элементе и его позиции. Именно здесь будем узнавать координаты, для 50x50 придётся пользоваться калькулятором, а для 100x100 всего лишь отсекаем по два нуля.

UPD: в CS5/CS6 получать координаты можно на F8(в новых версиях облегчили доступ и оно на вкладке свойств), при этом позицию выделения смотреть можно лишь от курсора, что не очень удобно.

 

Вот здесь позиция о иксу 950, разделим на 50 и получаем 19 - именно это число пишется в inv_grid_x. Аналогичная история с игреком. Ш - Ширина 50, делим на 50, получаем inv_grid_width равной единице. Так же и с высотой. ПОСЛЕ РАЗБЛОКИРОВКИ СЛОЯ НЕ СОХРАНЯЕМ АТЛАС, А ПРОСТО ЗАКРЫВАЕМ!

Открываем атлас в PaintDotNet или в Photoshop (нужен плагин dds).

 

Спойлер

 

Спойлер

 

 

Закрываем атлас и радуемся.

 

 

P.S. прилагаю свои атласы иконок ЧН, ЗП (названия кликабельны и содержат файлы).
P.P.S. https://youtu.be/5sU-B57OKRc записал ролик по рендерингу и добавлению новых иконок, blender-файл прилагается.

 

Изменено 31 Марта 2023 пользователем Hrust
Обновил атласы.

[Hrust 21]

@Опричник объясняю - в CS5/6 нет возможности смотреть позиции выделения. А чтобы PaintDotNet не делал грязь, необходимо пользоваться удалением выделения или заменой. Соглашусь, нужно было в статью добавить пару видео для наглядности. 

P.S. собственно, зачем использовать три софта, если можно обойтись двумя? 

Изменено 21 Марта 2023 пользователем Hrust

[Hrust 21]

@Adm-RAL давай, удиви, что же тут "ошибочного"?)

[Hrust 21]

3 минуты назад, Zander_driver сказал:

А координатную сетку использовать уже не модно?

Это которая сверху и слева? Разве это удобно, когда можно сходу получать цифры? 

[Hrust 21]

@Zander_driver я не вижу смысла объяснять, почему Stalker Icon Creator устаревшая софтина и что он портит иконки(как и все проги, редактирующие dds). Про ФШ объяснил, окей. PaintDotNet для "дидов" и так знаком, к нему вопросов нет. Или тут ещё остались те, кому нужно объяснять, зачем нужно работать через SDK, а не через ACDC?) Просто потому что так правильно и не возникнет проблем в будущем. 

[Hrust 21]

2 часа назад, nasar75 сказал:

Да и пайт.нет для иконок не нужен - всё делается в фотошопе...

 

А вот статью о рендере стволов для иконок я бы почитал...

В общем-то, будет видеогайд, и по рендеру, и по добавлению НОВЫХ иконок. PaintDotNet применим как раз в данном случае.

 

@Adm-RAL @Zander_driver прошу прощения, в CS5/CS6 я попросту не смог найти информацию о выделении, пообщался со знающими людьми, те и показали эти фокусы. 

Изменено 21 Марта 2023 пользователем Hrust

[Hrust 21]

@Adm-RAL @Zander_driver @nasar75 как выяснилось, на вкладке "инфо" нет возможности получения координат, только размеры выделения. Ролик прикрепил.
P.S. всё-таки можно узнавать позицию для иконки, но это костыль - выделяем область до начала нужной нам иконки. 

Изменено 21 Марта 2023 пользователем Hrust

[Hrust 21]

47 минут назад, den1s сказал:

Ну и ещё важное, с самими иконками не связанное, - параметры cell_width и cell_height в конфигах Ui-элементов. Они любую суперски отрисованную могут растянуть и замылить. Я заморочился как-то, чтобы высчитать размеры максимально близкие к оригинальным для форматов 1920х1200 и 1920х1080.  Вышло 26х32 и 26х35 соответственно. Получилось в игре почти пиксель в пиксель как на полотнах иконок. Но это речь про наш средневековый движок NLC и иже с ним, для современных, умеющих в большие иконки движков, может и неактуально, не знаю.

Да, в движке есть такая тема, что для широкоформатных разрешений при отношении ширины к высоте 1:1, элементы, которые выглядят квадратами на квадратных разрешениях, выглядят прямоугольниками и из-за этого нужно вписывать отношение ширины к высоте где-то 3:4 - Вышло 26х32 и 26х35 соответственно.
 

 

47 минут назад, den1s сказал:

Артефакты с прозрачностью, кстати, так и не заборол, не хватило терпения. Сделал просто нечто яркое-выделяющееся. Ну и части мутантов оставил прежние, они в НЛС рисованные и выглядят в 50 раз лучше того, что будет, если отрендерить игровой объект.

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

  

46 минут назад, den1s сказал:

А потом ещё была полировка напильником, в виде дорисовки руками светов-теней и общей тени иконки с помощью альфа-канала. Короче, как вспомнишь - так страшно.

Да, этим я также занимаюсь с некоторыми иконками.

Изменено 22 Марта 2023 пользователем Hrust

[Hrust 21]

7 минут назад, Adm-RAL сказал:

Этот формат не использует сжатия, вообще! А весит всего в 4 раза больше формата dxt5.

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

[Hrust 21]

1 минуту назад, Adm-RAL сказал:

Ставил как-то новый плагин, где форматы вот эти все BC... Сразу удалил.

DXT5 это вот и есть bc3, просто раньше (15 лет назад) не писали этого. Достаточно поизучать актуальную документацию.

[Hrust 21]

1 час назад, UriZzz сказал:

Пы.сы. ожидал статейку о создании иконки с нуля, а именно ту часть процесса что посвящена художественной обработке изображения.

В самом конце прикреплена ссылка на видео. Да, я в ФШ для некоторых иконок использую тонирование - таким образом можно сделать тень или из зелёного Эколога сделать жёлтый.

 

38 минут назад, Zander_driver сказал:

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

Пробовал эту правку - не понравилось, местами очень некорректно работало.

 

38 минут назад, Zander_driver сказал:

Ну опять же, для x64 движка, такие проблемы - уже не проблемы.

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

Изменено 22 Марта 2023 пользователем Hrust

[Hrust 21]

Никто не мешает сохранять с мип-мапами, попросту это не имеет смысла, ведь для UI текстур нет возможности их использования. 

[Hrust 21]

1 минуту назад, Adm-RAL сказал:

В том то и дело, что работает это, как и должно. Я описал выше.

Ого, не знал. Всё равно я не сохраняю с ними. 😂

[Hrust 21]

@Adm-RAL собственно, поэтому-то я и расписал, чтобы не допускать ошибок, использовать две программы. 

[Hrust 21]

13 минут назад, Zander_driver сказал:

А можно с этого места по-подробнее?

Столкнулся с какими-то проблемами. Это было года два назад, в общем-то не помню, что конкретно. Возможно, тогда у меня не хватило навыков.

[Hrust 21]

19 минут назад, bastor сказал:

Ну раз SIE шакалит качество просто сделать копию атласа и смотреть там координаты.

Тогда какой смысл использовать ещё больше софта?

Продолжая тему сравнения:

1 час назад, Adm-RAL сказал:

таскание не остановишь

Или авторы кладут в папку мода исходник(в случае с bc7 можно даже без исходника), или кому надо - выходят на контакт лично и получают этот исходник. Я так мыслю.

[Hrust 21]

3 часа назад, aromatizer сказал:

Сохранение в dds - это финальное действие, а все творчество происходит в других форматах.

Это как раз продвигаем, но некоторые упорно продолжают не использовать исходник и каждый раз открывать-редактировать-сохранять dds, думая, что плохо не станет...
Да, @dog19601?)

[Hrust 21]

Обновил ссылки на атласы, теперь обвесы оружия отображаются более корректно.

[Hrust 21]

16.04.2023 в 10:24, 2clip сказал:

Тот же бинт, альфа зашакаленая (подозреваю это оригинал, просто с увеличенным разрешением), а сама иконка "нулевая". Если уж затираешь про "правильность", то следует сказать и о качестве альфа-канала, который также влияет на качество иконки.

Нейросеть не идеальна. Альфу и цвет я раздельно прогонял. Изначально я все атласы нейронкой прогоняю, а что получается заменить -  заменяю.

[Hrust 21]

07.11.2023 в 14:02, tihik сказал:

альфа-канал в tga редактируется отдельно и совпадать с иконкой всегда не будет

Нет, это не проблема. В ролике я показал, как можно смещать альфу вместе с цветами. Колдун выше, к слову, меня так и не понял.