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

[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]

1 hour ago, Zander_driver said:

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

В старых движках (не помню точно, м.б. с оригинала ТЧ, а может правки Альпета) в некоторых статиках для сохранения пропорций работал heading="1".

Spoiler

На иконках не работает, конечно.

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

[dog19601 1 414]

Блин...Старческий маразм не позволяет освоить Фотошоп...Нету у меня...Делаю по стариковски....Наверное не правильно....И не всем нравится...Тока мне пофиг...

[Romann 623]

 

22.03.2023 в 13:23, UriZzz сказал:

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

Да проблема не в самом инструменте, я тоже его юзаю для удобства прописывания иконок в конфиге - и только для этого, но @Hrustне упомянул, да и вы камрады олды забыли видимо - что делает с текстурой/изображением формат dds при сжатии? - "Шакалит"  пиксели, каждое сохранение в dds шакалит качество изображения - а мы годами друг у друга иконки тягаем таким способом - и утешаем себя, что делаем это правильно и хорошо - найдите мне хоть один комплект иконок, где их из dds в dds неоднократно сохраняли и они остались в хорошем качестве... Все привыкли к иконкам 50х50, и ухудшения качества там тупо не заметно, ибо там итак пиксельное месиво - а сделай сейчас иконки 100х100 в качестве - уже после десятка таких сохранений ты увидишь "шакальные" пиксели...

По хорошему иконки нужно делать всегда с исходного полотна, с "девственным" сохранением в dds, либо в tga - а потом в СДК->dds. Так что - каждое сохранение в Sie - портит твои иконки, может на изображении в 50 пикселей ты этого не увидишь, т.к. это просто "разноцветная клякса", но это не отменяет этого факта...
Обратите внимание на иконки, ссылку на которые Hrust оставил в шапке - они там 100х100, оружие, и некоторые другие сделаны с рендеров.
П.С.: Разница между иконками 50х50 и 100х100:

 

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

Изменено 24 Марта 2023 пользователем Romann

[Adm-RAL 2 312]

@Romann, ну, таскание не остановишь. Каждый не будет делать через рендер или через скрин с игры.
Но, то что нужно работать в исходнике, хотя-бы в том что есть - это верно! И именно поэтому стоит работать именно в качественном редакторе изображений, который позволяет сохранять рабочее полотно без сжатия и в удобных форматах, с разбитием на каналы, слоями и т.д. И тут, думаю, ФШ замен нет.
А SIE, на сколько я помню, не имеет своего формата сохранения... Могу ошибаться, ибо прикасался к ней только в 15-16 году. Т.е. она сохраняет в dxt5 каждый раз, что жмёт RGB-каналы... А потом, если нужно что-то добавить, она открывает ранее сделанный dxt5, и после добавления ещё раз жмёт в dxt5... При каждом таком сохранении очень сильно страдают RGB-каналы! Например, если вы видете в редакторе площадку из пикселей цветом 128.128.128 (серый), то после сохранения в dxt1 или dxt5, обнаружите эту площадку зеленоватой, скорее-всего!  У меня сейчас в работе очень важна именно конкретная цветность, поэтому я в самом исходнике изначально задаю неправильный цвет, чтобы после сохранения в dxt, он стал правильным!  Мда, такая вот загагулина с этими dxt со сжатем...

[Romann 623]

Только что, Adm-RAL сказал:

А SIE, на сколько я помню, не имеет своего формата сохранения... Могу ошибаться

Есть - он ещё с png работает, но это если ты свою в исходнике будешь хранить в png, чтоб на неё кидать, а потом уже сохранять как нужно, да - продлит процесс ухудшения качества, но всё равно лучше начинать отходить от "костыльных" утилит, разве что тебе не важны "эти все 'качествы', а просто по быстрому накидать"...

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

Каждый не будет делать через рендер или через скрин с игры.

Тоже думал, что гемор и т.п., но увидев иконки от Hrust'а - "не, всё же заморочится стоит", на оружейку буду делать с рендеров, арты уже сделал человек с нашей команды -  - небо и земля, тут они сделаны со скринов в игре в 100х100, и в игре действительно выглядят достойно.

 

[bastor 133]

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

[Hrust 21]

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

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

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

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

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

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

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

[Zander_driver 10 348]

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

По хорошему иконки нужно делать всегда с исходного полотна, с "девственным" сохранением в dds

На языке крутился вопрос *А разве не всегда это так и делается?*

На самом деле понятно, что многим лень, и многие таскают друг у друга иконки с этим многократным копированием... таким совет - хотя бы не занимайтесь многократным копированием иконок 50*50. Возьмите из первоисточника, где иконка получена с исходного полотна, хотя бы.

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

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

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

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

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

Все привыкли к иконкам 50х50

Не все.
И слава богу.

[Romann 623]

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

*А разве не всегда это так и делается?*

В случае с использованием Sie - всегда не так. Т.к. атлас с иконками кидается в Sie прямо как есть в dds - ну а чего, так проще и быстрее, после работы с ним - сохраняется туда же - в dds, а потом нужно добавить иконку - и берётся та же текстура, и снова кидается в Sie, таким образом она снова и снова жмётся из dds в dds... Если иметь отдельный исходник, и только с ним и работать, ну так делают немногие, и думаю только те, кто имеет дело исключительно с одним проектом.

Я вот как-то инвентарь фотошопил, в стандартном разрешении, без всяких увеличений, были у меня там полоски толщиной в 1 пиксель - каким только способом я не пытался сохранить в dds, перебрал все форматы dds, чистый исходник, первое сохранение - эту полоску в 1 пиксель размазывало 3-5 пикселей, причём всеми цветами радуги - и это одно и первое сохранение в dds, не удивлюсь, что если текстуру деревянного забора пересохранить сотню раз - на заборе само-проявится всем известная надпись...

 

[Adm-RAL 2 312]

@Romann, ну если прям надо, то ещё раз, Сталкач наш древний понимает dxt8888...  В нём, я думаю, твоя полоска в 1 пиксель осталась бы идеальной, но... Про разные разрешения юзеров тоже забывать не стоит. И вот как наш Сталкач тянет и плющит текстуры... Но, это тоже уже не совсем тема топика, и вообще отдельная песня, часто с нецензурной бранью.  

[Zander_driver 10 348]

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

В случае с использованием Sie - всегда не так.

Да это понятно.

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

Я вот как-то инвентарь фотошопил, в стандартном разрешении, без всяких увеличений, были у меня там полоски толщиной в 1 пиксель - каким только способом я не пытался сохранить в dds, перебрал все форматы dds, чистый исходник, первое сохранение - эту полоску в 1 пиксель размазывало 3-5 пикселей

А вот тут я предположу, что формат dds совершенно не причем.

Просто в фотошопе есть такая опция как сглаживание. Бывает, иногда она оказывается включена когда юзер фотошопа этого не заметил)

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

[Romann 623]

Только что, Adm-RAL сказал:

Сталкач наш древний понимает dxt8888...  В нём, я думаю, твоя полоска в 1 пиксель осталась бы идеальной

Неа, размазывало. Перепробовал всё, все форматы dds, не считая bc4-bc7.

И кстати - если бы хоть какой либо формат dds не бил пиксели - сталкерский бамп был бы не нужен, юзалась бы напрямую нормал мап. Ты помнишь почему ПЫС придумали такой формат '_bump' + '_bump#'? - Именно из-за того, что dds шакалит, любой dds, даже bc7 и тот что нибудь да "выкинет"..

[Zander_driver 10 348]

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

И вот как наш Сталкач тянет и плющит текстуры... Но, это тоже уже не совсем тема топика

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

[Romann 623]

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

Просто в фотошопе есть такая опция как сглаживание

ФШ не причём, дополню немного - 'я перепробовал все возможные варианты', т.е. не только ФШ, другие конвертеры в dds, даже онлайн конвертеры, ФШ->tga->SDK, ну т.е. все доступные варианты, которыми можно сохранить из исходника в dds, разница была лишь в цветах размазанных пикселей...

Изменено 24 Марта 2023 пользователем Romann

[Zander_driver 10 348]

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

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

Ну очень "интересно", учитывая что у меня в текстурах в куче мест в dds сохранены линии толщиной в 1 пиксель без малейших намеков на размытие. Что я делаю не так?

 

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

Именно из-за того, что dds шакалит, любой dds, даже bc7 и тот что нибудь да "выкинет"

Нет плохих форматов и плохих инструментов. Просто у тех и других есть нюансы и особенности.

Если их учитывать и грамотно пользоваться инструментами (софтом). То проблем никаких не возникнет.

Изменено 24 Марта 2023 пользователем Zander_driver

[Romann 623]

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

Что я делаю не так?

Откопал тот инвентарь, полюбуйся:

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

-----------------------------------------

Для сравнения, как это выглядит в tga и dds:

 

  

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

А вот тут я предположу, что формат dds совершенно не причем.

Просто в фотошопе есть такая опция как сглаживание.

Опция сглаживания, которая работает исключительно при экспорте в dds? - Почему она не сглаживает при экспорте в tga, или в png? Интересная такая опция..

 

Изменено 25 Марта 2023 пользователем Romann

[Zander_driver 10 348]

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

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

Это такая шутка?

Я надеюсь что да. Потому что иначе как-то грустно и не смешно становится.

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

... отвечая на твой шуточный челлендж...
 

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

 

RGB

Alpha

dds. Цветность слегка пострадала (DXT 5), но размытие-то где? Нет его.

Скриншот из игры, где вышеуказанные текстуры натянуты в качестве границ элементов авто-статиком с растяжением по одной оси.

Блоки справа, и некоторые элементы в окне описания, имеют границы из этих текстур. Да они криво накладываются на углах (сырой конфиг), но на самих-то границах размытие где? Отсутствует.

 

...

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

Было бы смешно, если бы не было так грустно.

 

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

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

Даже если допустим, мы не умеем в фотошоп и не можем нарисовать линию в один пиксель. Допустим.

Что мешало сделать отдельно белую текстуру шириной в лапоть, и красную текстуру шириной в лапоть, а затем натянуть их на два отдельных авто-статика шириной по 1 пикселу каждый? И расположить их впритык, естественно.

Вместо этого, отказался от задуманного...

Изменено 25 Марта 2023 пользователем Zander_driver

[dog19601 1 414]

Гыы...А в Солянке иконки 200х200...Всегда вот удивляет показывание скринов с полотен с иконками...Эт чё типа меряются...В игре смотреть надо..Вот скриншотик с игры...Тока что...Стволы не рендеренные...Ничё не рендеренное...Без Фотошопа...

 

[Zander_driver 10 348]

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

Стволы не рендеренные...Ничё не рендеренное...

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

Если делать с душой, стараясь сделать хорошо - то и получится хорошо. Даже на малых ресурсах.

[dog19601 1 414]

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