Фактически это все та же сцена из моего предыдущего руководства NZXT-CAM style overlay:
https://steamproxy.net/sharedfiles/filedetails/?id=3524842061 Изменение касается игрового оверлея, в который добавлен элемент сцены "Изображение", так сказать, своеобразный слой в виде картинки в формате PNG с полупрозрачным фоном, поверх которого и расположены основные элементы "Sysinfo 2.0".

---

Структура виджета для рабочего стола подробно расписана по ссылке выше, поэтому будет пропущена, да и в принципе виджет "Отображение на рабочем столе" по желанию можно отключить/удалить, а вот описание игрового оверлея повторю с небольшими дополнениями)

ㅤㅤㅤㅤㅤㅤㅤМелкие иконки №1ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤМелкие иконки №2 https://steamproxy.net/sharedfiles/filedetails/?id=3575743601 https://steamproxy.net/sharedfiles/filedetails/?id=3575743466 Два разных по дизайну набора иконок, высотой по 25 пикселей, как и высота строк с сенсорами, за исключением моника выстоой 30 пикселей и матернки - 35 пикселей, которые соответственно сдвинуты выше и ниже. А высота ОЗУ наоборот уменьшена до 15 пикселей)

---

ㅤㅤㅤㅤㅤㅤㅤСредние иконкиㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤСредние иконки - увеличенный CPU https://steamproxy.net/sharedfiles/filedetails/?id=3575743724 https://steamproxy.net/sharedfiles/filedetails/?id=3575743809 Одинаковые изображения, высотой по 45 пикселей, кроме ОЗУ и мамки, которые высотой 25 и 50 пикселей соответственно. А вариант с увеличенной иконкой проца высотой 50 пикселей, что вроде и незначительно, но смотрится чуть иначе, возможно даже более пропорционально...

---

ㅤㅤㅤㅤㅤㅤКрупные иконкиㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤКрупные иконки - вертикальная MB https://steamproxy.net/sharedfiles/filedetails/?id=3575743886 https://steamproxy.net/sharedfiles/filedetails/?id=3575743952 Иконки одни и те же, высота уже в основном по 55 пикселей, лишь вентилятор и FPS остались по 45, отличается так же память 35 высотой и доска, в горизонтальном варианте 65, а высотой 70 пикселей в вертикальном положении. Смотрится уже более солидно, и на мой взгляд при разрешения 2560×1080 даже громоздко, лучше видимо будет выглядеть с соотношением 16:9 и вертикальным разрешением 1440p, но это не точно))) Проверить то возможности нет...

---

В любом случае, в игре каждый вариант смотрится нормально, не могу выделить, так сказать, идеальный, мне больше нравятся "средние" наверное, но в левой верхней части дисплея (на скриншотах выше) все варианты перекрывают меню настроек игры, таким образом нужно или смещать в правый верхний угол (почти идеально), либо же в нижний левый, например:
https://steamproxy.net/sharedfiles/filedetails/?id=3575748197 ㅤㅤСредний и мелкий вариант в правом верхнем углу при входе в меню настроек игры:
https://steamproxy.net/sharedfiles/filedetails/?id=3575748171 https://steamproxy.net/sharedfiles/filedetails/?id=3575748128 ㅤㅤㅤㅤㅤㅤА вот крупный вариант слегка мешает "обзору" даже в этой позиции:
https://steamproxy.net/sharedfiles/filedetails/?id=3575748152 Но в меню не особо нужен оверлей, поэтому для утонченных эстетов лучшим решением будет отключать его во время изменения настроек игры, если уж очень возмущает такое безобразие)))

В диалоговом окне "Элементы сцены" в самом начале списка распложены 11 элементов, за отображение которых отвечает оверлей "Sysinfo 2.0" (overlay-simple), для удобства каждый имеет в первой части названия приставку "Game Overlay" и соответствующее предназначению окончание:

• TIME - системное время
• INFO - размер кадра и тип рендера игры
• FPS - мгновенный, максимальный, средний, минимальный и 1% Lov
• GPU - температура ядра, скорость вентиляторов, загрузка ядра, мощность и используемая видеопамять
• CPU - температура крышки, скорость кулера, средняя загрузка и среднее количество активных ядер
• RAM - используемая ОЗУ (количественное и процентное значение)
• PAGE FILE - используемый файл подкачки (количественное и процентное значение)
• FAN - скорость внешних вентиляторов (у меня их четыре)
• SYSTEM - температура системы
• CHIPSET - температура чипсета
• MOS - температура мосфетов

https://youtu.be/r9IQJMVkcfY?si=oNL4BRbGGAsro9_N Все это скомпоновано в семь строк, без фона, высотой 1,5 (что равно 25 пикселей), цвет ставим естественно белый (#FFFFFFFF), обрисовка текста отключена, шрифт Convection Condensed полужирный, так как оригинальный шрифт из игры не нашел, то что предлагает "гугол" и доступно для скачивания мне не понравилось, а Convection вполне нормально вписывается в данном случае.
Для первой строки (TIME & INFO) размер шрифта 16, для всех остальных значений размер шрифта 15. Отступы между сенсорами отличаются в строчках, также добавлены не включённые сенсоры и "пустые" сенсоры-пробелы ("dummy" или "---"), чтобы визуально выровнять значения, которые динамически изменяются в зависимости от величины показаний. По крайней мере в строках GPU и CPU одноименные сенсоры расположены друг над другом (конечно потребляемая мощность видла значительно превосходит энергопотребление проца, поэтому эти показатели наиболее подвижны и постоянно норовят съехать в сторону, но большую часть времени, при более менее интенсивной нагрузке, все выглядит нарядно, красиво и органично). В любом случае, всегда можно что-то убрать или добавить на свой вкус)

По сути этот раздел и является основным в данном руководстве! Так как все элементы игрового оверлея всегда остаются неизменными, то менять в сцене придется лишь один элемент и это Image Overlay, для этого понадобятся соответствующие файлы изображений в формате PNG:

---

ㅤㅤㅤㅤㅤㅤㅤㅤSmall_1.pngㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤSmall_2.png https://steamproxy.net/sharedfiles/filedetails/?id=3575744589 https://steamproxy.net/sharedfiles/filedetails/?id=3575744481

---

ㅤㅤㅤㅤㅤㅤㅤㅤㅤMid_1.pngㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤMid_2.png https://steamproxy.net/sharedfiles/filedetails/?id=3575744800 https://steamproxy.net/sharedfiles/filedetails/?id=3575744979

---

ㅤㅤㅤㅤㅤㅤㅤㅤㅤBig_1.pngㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤBig_2.png https://steamproxy.net/sharedfiles/filedetails/?id=3575745040 https://steamproxy.net/sharedfiles/filedetails/?id=3575745123

---

Все изображения сделаны по образу и подобию HUD'a игры, за основу взята как форма, так прозрачность элемента фона, что хорошо видно на светлых скриншотах. https://youtu.be/BUTZQ4LM0DU?si=uBQWxnBCOQdM2m7U В описании внешнего вида (в первом разделе) специально указаны размеры иконок для тех, кому не подходят подобранные мной иконки и не нравятся мои готовые варианты, но устраивает фон, например, да и сам игровой оверлей. Скачайте эти "чистые" слои, подберите и вставьте свои иконки, предварительно подогнав по размеру! Это очень легко сделать, например, добавляя каждую иконку отдельным элементом сцены "Изображение" прям в программе, выравнивая по сетке напротив соответствующего элемента оверлея, так как высота строки равна 25 пикселей, то трудностей возникнуть не должно: https://youtu.be/56lfkQ05gYc?si=eJFiyMKlFvFGOZ7Q Конечно, лучше добавить иконки прямо на фон в подходящем редакторе изображений (Photoshop или PaintNet), сохранив результат в формате PNG.

---

https://youtu.be/h-x4CPdmQNA?si=YODOJhioFeHbWIiF В "Общих настройках" в разделе "Редактор сцены" должны быть включены параметры - "Рисовать сетку" и "Рисовать сетку с шагом" значение "5", а правом углу "Размер кадра" = "Размеру рабочего стола", в моем случае совпадает с разрешением в игре 2560×1080.

---

В диалоговом окне "Элементы сцены" все элементы игрового оверлея "Sysinfo 2.0" и иконки, вставленные с помощью элементов "Изображение", должны быть расположены выше, чем элемент с фоном, иначе бэкграунд их затемнит! А если, на Ваш взгляд, иконки в принципе не нужны, то можно использовать эти изображения в элементе сцены Image Overlay, вместо тех, которые с иконками:

---

ㅤㅤㅤㅤㅤ‏‎‏‎‏‎ㅤSmall layer lines.pngㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤSmall layer clean.png

---

ㅤㅤㅤㅤ‏‎‏‎‏‎ㅤㅤMid layer lines.pngㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤMid layer clean.png

---

ㅤㅤㅤㅤㅤㅤBig layer lines.pngㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤBig layer clean.png

---

При желании можно создать совсем минималистичный оверлей допустим на несколько строк, который будет отображать лишь показатели частоты кадров, видухи и проца. Займет процесс буквально пару минут) Никаких особых навыков для этого не требуется, достаточно лишь установить ПО для редактирования изображений, например, тот же бесплатный PaintNet[www.getpaint.net]: https://youtu.be/7d5__1tZLls?si=nEeqA8Y3a8e67vjY Так как высота одной строки 25 пикселей, а длина 375 (достаточно посчитать количество ячеек по фоновой сетке), то три строчки оверлея займут 375×75 пикселей, таким образом нужно подогнать изображение фона к этому размеру. За основу возьмем, например, самое компактное изображение Mid layer clean.png, размер которого составляет 550×275 пикселей. Для начала нужно уменьшить его примерно раза в два по высоте: вкладка "Изображение", команда "Изменение размера" (или комбинация клавиш "Ctrl" + "R"), в открывшемся окошке уменьшаем высоту с 275 на 155 с сохранением пропорций, и получаем изображение длиной 310 пикселей, что слегка маловато для поставленной цели) Ок, тогда снова переходим во вкладку "Изображение", команда "Размер полотна" (или комбинация клавиш "Ctrl" + "Shift" + "R"), в открывшемся диалоговом окне увеличиваем длину полотна с 310 до 425 пикселей, но уже без сохранения пропорций! Таким образом получилось растянуть "прозрачный фон" самой картинки, но сам полупрозрачный элемент бэкграунда для оверлея остался без изменений. Для удобства увеличим масштаб с помощью ползунка в нижнем правом углу окна (или комбинация клавиш "Ctrl" + "+"). И применяем самый простой способ "удлинить" эту фигуру: используя инструмент "Выбор прямоугольной области" (панель инструментов в левом верхнем углу) выделяем с помощью левой (хотя можно и правой - разницы нет) кнопки мыши примерно половину фигуры с правой стороны, затем копируем выделение "Ctrl" + "C" и тут же вставляем обратно "Ctrl" + "V", после чего нажимая клавишу "→" (стрелочка вправо) перемещаем вставленный кусок до правого края полотна. Сохраняем результат в формате PNG перейдя во вкладку "Файл", потом "Сохранить как" (или комбинация клавиш "Ctrl" + "Shift" + "S"). Так как это не первый мой эксперимент, то назовем его Background custom 03.png:

---

После чего переходим в FPS Monitor и приступаем к редактированию оверлея, убирая / удаляя лишние элементы сцены. И вот такой компактный и симпатичный mini overlay получаем в итоге: https://steamproxy.net/sharedfiles/filedetails/?id=3575744046 https://steamproxy.net/sharedfiles/filedetails/?id=3563517331

---

Столь подробное описание сделано для тех, кто возможно не часто сталкивался с работой в графических редакторах, но хотел бы изменить внешний вид оверлея максимально приблизив к оригинальному HUD'у игры, к примеру, минимизировав количество выводимой информации до нескольких значений. Или наоборот понадобится увеличить изображение, для того чтобы еще больше добавить отображаемых сенсоров) Надеюсь, видео и подробное описание хоть немного помогут в успешной реализации Ваших идей и достижению желаемого результата)

Для удобства добавил несколько вариантов загрузки сцены и изображений! Удобно и быстро "без СМС и регистрации" на PCGamingWiki. Если интересно еще посмотреть на сцены других пользователей или поделиться своим опытом, то есть смысл чекнуть официальный Discord сервер программы — Game Overlays.
ㅤㅤㅤДля скачивания не нужно ни регистрироваться на ресурсе, ни логиниться!
Нажав на кнопку "Download this file" для загрузки будут доступны файл сцены и шесть изображений в формате PNG:
The Last of Us scene.JSON
Small_1.PNG
Small_2.PNG
Mid_1.PNG
Mid_2.PNG
Big_1.PNG
Big_2.PNG

---

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤТребуется учетная запись Discord!
Нажав на кнопку "⭳" для загрузки будут доступен файл сцены: The Last of Us scene.JSON
Изображения же легко скачать через браузер (правой кнопкой мыши и "Сохранить картинку как...", так же в принципе можно прямо и из этого руководства)

---

Бесплатное "приложение", но установка через Microsoft Store требует авторизации в учетной записи Microsoft!
Семейство шрифтов Convection разработано компанией Microsoft для Xbox, включает следующие стили:

• Convection
  
• Convection Medium
  
• Convection Italic
  
• Convection Bold
  
• Convection Extra Bold
  
• Convection Condensed

⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀Надеюсь информация была полезной, интересной и доступной!
⠀⠀⠀⠀Все вышеизложенное основано исключительно на субъективном восприятии автора)

---

⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀