DOTA 2 - Создание пользовательского интерфейса (HUD).

В данном руководстве вы ознакомитесь с методикой создания собственного HUDа

Предисловие

Доброго времени суток, читатель! В данном руководстве оговорены технические требования к игровому интерфейсу и методика его создания.

Внимание! Данная руководство содержит некоторые изображения и информацию из оригинала написанного компанией Valve.

Что такое HUD?!

Внутри игровой интерфейс DOTA 2, известный под названием HUD (Heads-Up Display — индикатор для отображения важной информации непосредственно во время игры), может быть переработан пользователем, с целью придать игре новый вид. Переработка игрового интерфейса DOTA 2 - это отличный способ придать игре индивидуальности, а так же способ поделится своим опытом с сообществом.

Примеры интерфейсов

Изображение стандартного игрового интерфейса.



Перерисованный игровой интерфейс. Тема сил тьмы (Dire).

Основные правила создания интерфейса

При создании собственного игрового интерфейса стоит помнить следующее:
• Мини карта и изображения способностей не могут быть перемещены на другое место либо иметь изменённый размер;
• Интерфейс в целом так же не может быть уменьшен или увеличен;
• Динамические элементы интерфейса не должны перекрываться;
• Не стесняйтесь менять силуэт базового интерфейса. К примеру, вы можете дорисовывать горы и растительность к интерфейсу до тех пор, пока он не изменяет размер исходного изображения.

Так выглядит базовый интерфейс:


Так выглядит правильно нарисованный интерфейс:


А так выглядит не правильно нарисованный интерфейс:

Создание собственного игрового интерфейса

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



Следующим шаг – необходимо открыть файл «HUD_template.psd», который находится в скачанном вами архиве.



Для открытия данного файла вам понадобится Adobe Photoshop версии CS2 или выше. Формат PSD работает с Смарт-объектами, что позволяет использовать один и тот же объект в нескольких местах изображения, а так же изменять его до нужных нам размеров. Все части HUDа в шаблоне конвертированы в Смарт-объекты. Ниже изображение открытого «HUD_template.psd».



При создании игрового интерфейса следует помнить то, что HUD и все его составные части должны быть выполнены для трёх видов соотношений сторон: 4:3, 16:9 и 16:10. Это необходимо для того, что бы ваш интерфейс корректно отображался на экранах с другим разрешением.



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



В то же время изображение, которое обрамляет анимированный портрет персонажа, меняется для различных форматов изображения: 4:3, 16:9 и 16:10. Таким образом, стоит создать несколько слоёв, с изображением портрета в формате 4:3, и с изображением широкого портрета в формате 16:9 и 16:10.



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



Далее для редактирования определённого слоя или смарт объекта кликните по нему дважды левой кнопкой мыши в поле слоёв, или нажмите правую кнопку мыши и выберите «Редактировать содержимое»



После нажатия, откроется новое окно с вашим слоем.



Далее перерисуйте изображения для вашего скина. Размеры изображения должны оставаться те же. Не забудьте принять во внимание то, где будут располагаться текст и иконки интерфейса. После того как вы закончите, сохраните ваше изображение.
Для того чтобы ваш HUD работал в игре, необходимо все Смарт-объекты сохранить как отдельные PNG файлы, и они должны следовать заранее определённой структуре файла.
Чтобы автоматизировать данный процесс воспользуйтесь файлом «dota_HUD_export.jsx», который так же находится в архиве.



Это скрипт, который работает с Photoshop. Поместите данный файл в следующую папку: [photoshop]\Presets\Scripts\...



После того, как вы поместили файл «dota_HUD_export.jsx» в папке сценариев (скриптов), в Photoshop перейдите в меню «Файл» далее «Сценарии» и выберите пункт «Обзор». Далее укажите путь к данному скрипту. Этот скрипт будет создавать отдельный PNG файл для каждого вашего слоя.



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

Создание иконки для вашего интерфейса

Чтобы создать иконку для собственного интерфейса вы можете воспользоваться слоем «icon», который содержится в файле «HUD_template.psd», и перерисовать его в соответствии с вашим интерфейсом. Далее её необходимо сохранить с новым именем и префиксом «HUD_». Ниже представлены тематические иконки интерфейсов.

Базовая (черновая) иконка имеет такой вид:


Иконка сил тьмы:


Иконка сил света:

Результат проделанной работы

Теперь можно протестировать и отправить свой HUD. Для этого откройте DOTA2, перейдите в вкладку "Магазин".



Далее переходим в вкладку "Мастерская", и жмем на клавишу "Отправить новую работу"



После этого, нажмите на кнопку "Изображения"



Далее "Стиль интерфейса"



После этого в соответствующее поле впишите придуманное вами название HUDа и укажите путь к любому изображению, которое находится в папке c вашим интерфейсом. Следует выбирать папку, содержащую папки "actionpanel", " inventory" и " scoreboard". Родительская папка должна иметь такое имя: HUD_ your_skin_name. Вместо «your_skin_name» указываете имя своего интерфейса на английском языке.



После этого вы можете просмотреть свой HUD на тестовой карте. Для этого нажмите на изображение значка DOTA, который находится чуть ниже кнопки «Обзор». Это необходимо для того, что бы посмотреть хорошо ли сочетаются все части интерфейса друг с другом. Не забудьте проверить свой интерфейс для всех форматов изображений, т.е. сменяя его в настройках графики. Если все хорошо, смело жмите кнопку "Импорт" и отправляйте свою работу в Мастерскую.

Этапы разработки

Когда я начинал разрабатывать собственный игровой интерфейс, я разбил весь процесс на несколько важных этапов:
1. Необходимо определиться с тематикой интерфейса. Это может быть герой, какая либо игра, природа и т.д.
2. Название. Придумайте название, которое сможет объединить вашу задумку с выбранной тематикой.
3. Эскиз. Набросайте на листе эскиз иконки и игрового интерфейса. Посмотрите, какие особенности имеет ваша тематика, и обязательно отобразите их на вашем интерфейсе.
4. Работа в графическом редакторе. Далее в соответствии с вашим эскизом нарисуйте ваш интерфейс и иконку. Старайтесь использовать минимум и те цвета, которые соответствуют вашей тематике. К примеру, вы выбрали персонажа из игры. Посмотрите, в какие цвета разукрашен этот персонаж, а затем используйте те же цвета при создании собственного интерфейса.
5. Опубликуйте ваш интерфейс в мастерской.

[♡ stonesss ♡]

взаимные комментарии)
+rep хорошо играет
+rep good player
+rep nice player
+rep добрая
+rep хороший тиммейт
+rep солнышко
+rep nice teammate
+rep милая тян
+rep U BEST
+rep nice girl
+rep so good
+rep nice profile
+rep мяу)
+rep умничка
+rep very nice and non-toxic player
+rep хорошенькая
+rep хорошо играет
+rep давай сыграем как-нибудь

[вся эта кровь мне]

напишите в профиль что нибудь пж

[kerst]

парни накидайте любые комменты под профиль только не повторяйте уже написанное

[亗 𝚁 I K ☯]

https://steamcommunity.com/sharedfiles/filedetails/?id=2948747882

[strethrivespl]

|LIKE 4 LIKE| |REP 4 REP|

[RU]Поставьте лайк моим руководствам и я поставлю взамен, или оставлю комментарий у вас в профиле. Добавляйтесь в друзья, за лайк сделаю что попросите!

[EN]Like my guides and I'll reciprocally, or will commend your profile. Add me as a friend, for like I'll do what you need!

1. https://steamcommunity.com/sharedfiles/filedetails/?id=2851475655
2. https://steamcommunity.com/sharedfiles/filedetails/?id=2851471408
3. https://steamcommunity.com/sharedfiles/filedetails/?id=2851449116
4. https://steamcommunity.com/sharedfiles/filedetails/?id=2851073807

[Лучший в мире за работой]

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

[SanctusArtur]

Раньше интерфейс был лучше, чем нынешнее гoBно

[скотч]

обнова лишила нас интерфейса

[itsmental]

уже новый hud((

[yesworld]

Спасибо за статью!