Как создать свой стиль интерфейса(hud)

TerryFiery

30 Jun 2014 в 22:54

11658

TerryFiery

Пользователь

Регистрация: 30.06.2014

Сообщения: 1

Рейтинг: 1

Регистрация: 30.06.2014

Сообщения: 1

Рейтинг: 1

Предисловие

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

Что такое HUD?!

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

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

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

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

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

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

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

Создание собственного игрового интерфейса
Первое что необходимо сделать, это получить шаблон игрового интерфейса. Его и оригинальную статью вы можете скачать перейдя по следующей ссылке:http://dfiles.ru/files/4pt4bnajp

Следующим шаг – необходимо открыть файл «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, который находится чуть ниже кнопки «Обзор». Это необходимо для того, что бы посмотреть хорошо ли сочетаются все части интерфейса друг с другом. Не забудьте проверить свой интерфейс для всех форматов изображений, т.е. сменяя его в настройках графики. Если все хорошо, смело жмите кнопку "Импорт" и отправляйте свою работу в Мастерскую.