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

[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
Обновил атласы.

[den1s 57]

Когда-то делал иконки (50px сетка) для своего дополнения к NLC.

 

https://i.imgur.com/acKSejt.png

 

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

Всё узнавал методом научного тыка (та же билинейная интерполяция) и многочисленных жестоких, бесчеловечных опытов. Ну хоть выяснил, что даже первичное сжатие в dxt5 даёт заметные артефакты, потому в итоге сохранил всё готовое в argb.

 

Времена тогда были тёмные, средневековые, потому использовал milkshape для вывода obj, которые затем открывал в фотошопе, выставлял источники света (для каждого размера свои пресеты освещения вышли в итоге, и даже для разных пух были разные пресеты) и уменьшал под размер. Важный момент, которые кажется мелочью, - растрирование должно быть бОльшим размером, кратным конечному. 2х, 4х. - зависит от иконки. Т.е. если конечная иконка вписана в поле 300х100, то растрировать нужно 600х200 или 1200х400 и затем уже уменьшать билинейкой, не тягая за углы выделение, а точно на 50%, 25% соотв. Тогда такие штуки, например, как рёбра жёсткости на магазинах калашматов, насечки на рукоятках и прочая мелкая мелочь будут идеально чёткими и ровными, а не лесенками всякими или вообще размытым ничем. И, помнится, даже билинейка не везде нужный результат давала, приходилось экспериментировать.

 

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

 

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

 

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

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

[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

[Adm-RAL 2 312]

Эм... Да, кстати, для борцов за гиперкачество (избыточное) напоминаю, что как это не смешно, но Сталкер, в отличии от большого числа более свежих игр, УМЕЕТ РАБОТАТЬ СО ВСЕМИ ВАРИАНТАМИ ФОРМАТА DDS!
Это я к тому, что иконки (как и любую другую текстуру) можно сохранять в формате dxt8888. Ну, я его так называю... Этот формат не использует сжатия, вообще! А весит всего в 4 раза больше формата dxt5.
 

Также, хоть мне и говорили что это и так все знают и понимают, нельзя сохранять UI текстуры с MipMaр-уровнями. Иначе вы рискуете столкнуться с неприятностями, если игрок подвинет в настройках игры движок "качество текстур" хотя-бы на одно деление влево от максимума. Тогда, вместе с текстурами мира игры, текстура UI с ММ перейдёт на уровень ниже и будет размазана в игре.

 

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

[Hrust 21]

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

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

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

[Adm-RAL 2 312]

Только что, Hrust сказал:

bc7

Я использую старый плагин НВидиа и старые форматы. И мне старый плагин ГОРАЗДО больше нравится, т.к. имеет гораздо большее кол-во настроек, в которых я шарю и использую их.
Ставил как-то новый плагин, где форматы вот эти все BC... Сразу удалил.
Однако, если тащишь откуда-то текстуры в этих форматах, то новый плагин нужен, потому-что старый эти форматы понимает не всегда. Я столкнулся с этим, когда тащил 2К скайкубы из Эксодуса в Сталкер.

[Hrust 21]

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

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

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

[Adm-RAL 2 312]

Только что, Hrust сказал:

DXT5 это вот и есть bc3

Да я знаю. Просто говорю, что настроек в старом плагине гораздо больше. И есть возможности иногда ощутимо улучшить те же ММ, настроив плагин правильно для рендера определённой игры!
Это я уже не говорю, что в своё время решались такие задачи, от которых у меня волосы дыбом вставали! Не для сталкера... У меня проект ещё в ТДУ2, и вот там текстуры нужно сохранять очень хитрым образом, чтобы они правильно работали в игре. И новый плагин с этим бы не справился, к примеру...  https://youtu.be/PcNIOCPUehI

[UriZzz 1 004]

@Adm-RAL эм, нет, для новичков не пойдёт. Для новисов стоило бы упомянуть Джимп - который, к слову, может в dds, как грицо, из коробки. Ну, или раз уж пиратить фотопоп, стоило бы ещё доустановить плагин для работы с текстурами, а не ставить второй гр.редактор в пару к нему. А вырезать готовые иконки из полотна и размещать на атласе - тут проще использовать SIE.

 

21 час назад, Hrust сказал:

Второе - забудьте про Stalker Icon Editor

Чем он вам так не угодил? Sie это удобство, и никакого отношения к году это не имеет.

 

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

16 часов назад, Adm-RAL сказал:

Я лично всё из игры делаю. Там лучший рендер

Интересно. Хотелось бы подробностей

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

[Zander_driver 10 348]

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

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

Ну вот кстати да, еще немаловажный нюанс по теме иконок.

Бывает так, что для какого-то итема в игре, качественной и подходящей к нему модели - просто нету. Чаще всего это части мутантов, но бывает и что-нибудь другое.

(ИМХО) можно не стесняться в таких случаях "облагородить" иконку такого итема, сделав ее из фотореалистичных материалов вообще к игре не имеющих прямого отношения.

Для примера поделюсь своим опытом. Когда делал для своего мода трофей "лапа химеры" - убедился, что если рендерить вблизи лапу модели настоящей химеры из игры, получится мало-полигональное и неприглядное зрелище, которое смотрится убого как ни крути. Тогда я поступил следующим образом:

1) Нашел в интернете подходящую лапу. Детальную, с реальной фотографии. Это оказалась задняя лапа австралийского крокодила, снятого в очень хорошем качестве.

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

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

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

 

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

 

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

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

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

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

Как для игры, это очень много

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

[Hrust 21]

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

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

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

 

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

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

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

 

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

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

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

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

[UriZzz 1 004]

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

Также, хоть мне и говорили что это и так все знают и понимают, нельзя сохранять UI текстуры с MipMaр-уровнями

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

[Hrust 21]

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

[Adm-RAL 2 312]

9 минут назад, Hrust сказал:

ведь для UI текстур нет возможности их использования

В том то и дело, что работает это, как и должно. Я описал выше. Правда, может не во всех движках.
А в итоге мы получаем размазню в UI. И не только в иконках...

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

[Hrust 21]

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

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

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

[Adm-RAL 2 312]

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

[Hrust 21]

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

[Zander_driver 10 348]

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

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

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

[Hrust 21]

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

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

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

[UriZzz 1 004]

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

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

То есть можно в конфигах смело ставить размер клетки в инвентаре, допустим 50/50, и она будет квадратной на широкоформатном мониторе 16/9? Это на все окна распространяется, и на худ, главное меню и т.д?

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

[Zander_driver 10 348]

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

Это на все окна распространяется, и на худ, главное меню и т.д?

На все окна и все элементы, у которых в их xml-конфиге прописано as_is="1" (Поддерживается в OGSR & СЗ).

Если атрибут as_is равен нулю или отсутствует, то всё работает по старому, дабы не ломать обратную совместимость с оригиналом ТЧ и модами созданными на нем.