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

avatar TerryFiery

11258

4

  • TerryFiery

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

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

    Сообщения: 1

    Рейтинг: 1

    TerryFiery

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

  • MrHerooo

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

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

    Сообщения: 2820

    Рейтинг: 1141

    MrHerooo

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

    Сообщения: 2820

    Рейтинг: 1141

    а где находится худ скин в папке доты, не хочу особо заморачиваться, только немного своего добавить)
  • Afroamericano

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

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

    Сообщения: 7184

    Рейтинг: 3181

    Afroamericano

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

    Сообщения: 7184

    Рейтинг: 3181

    По этому делу есть куча гайдов уже, кому надо тот бы нашел
  • 4eburek

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

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

    Сообщения: 2195

    Рейтинг: 1643

    4eburek

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

    Сообщения: 2195

    Рейтинг: 1643

    http://steamcommunity.com/sharedfiles/filedetails/?id=270975795
    молодец, не устал печатать?
  • KaapaTeelb

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

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

    Сообщения: 2

    Рейтинг: 0

    KaapaTeelb

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

    Сообщения: 2

    Рейтинг: 0

    Я вот сделал худ сохранил, а как его заного открыть?
    Ибо я не могу сохранить весь файл

Кто смотрит тему (Пользователи: 0, Гости: 0)