Dota 2 UI

aaa4xu
  • Думаю мододелы уже заметили, что UI Dota2 создан не на привычном для Source движка VGUI, а на Scaleform.
    Смысл технологии состоит в том, что движок воспроизводит Flash внутри себя, "общаясь" с ним через некий API.
    С точки зрения файлов, технология представляет собой зашифрованные (сжатые?) .swf файлы с расширением .gfx. В случае Dota2 они находятся в директории resource\flash3\ В этой же папке хранятся текстуры в формате .dds, которые используются в этих Flash файлах.

    Декомпиляция .gfx файлов
    Софт для работы
    • Hex редактор (например: Free Hex Editor Neo). Требуется для изменения заголовка .gfx файла, чтобы его можно было распаковать
    • Sothink SWF Decompiler. Разбирает .swf файл на составляющие (Фреймы, ActionScript, Спрайты и т.д.) и позволяет их отууда экспортировать
    • Dota 2 Slasher. Позволяет вшивать новые .gfx файлы в архивы Dota 2


    Алгоритм
    1. Переходим в директорию resource\flash3\ и выбираем интересующий нас .gfx файл
    2. Копируем его в удобную для нас папку
    3. Открываем в HEX редакторе. Первые 3 байта меняем на CWS (именно большими). Сохраняем. Закрываем файл в редакторе
    4. Переименовываем имя_файла.gfx в имя_файла.swf
    5. Открываем имя_файла.swf в Sothink SWF Decompiler. В списке справа выбираем интересующие нас ресурсы, ставим около них галочки, экспортируем


    Компиляция .gfx файлов
    Сорри за то, что долго не оформлял мануал по запаковке, но на это были свои причины. Во-первых учеба в универе стремится к сессии, а значит и напрягают все сильнее. Во-вторых нужно было однозначно выяснить, что из того, что я использовал вначале действительно нужно, а что можно отсечь. В третьих нужно было обновить Dota2Slasher, т.к. в случае в UI намного удобнее работать с файлом в папке, а не перепаковывать vpk файл каждый раз.
    Софт для работы
    • Flash Develop
    • Dota2Slasher
    • GFXExport + Scaleform Launcher
    • Adobe Flash (версии CS4 и выше) (На ранних стадиях не потребуется!)


    Алгоритм
    Вообще, алгоритм получается достаточно объемный, но легко автоматизируемый. Возможно, чуть позже я выложу свои .bat файлы для автоматизации.

    Для начала, требуется понять, как все работает. GFX файлы - скомпилированные через GFXExport .swf файлы. В теории для подготовки .swf файла нам нужен только Adobe Flash, одноко, из-за того, что Action Script редактор там просто ужасный, придётся извращатся: графику придется готовить в Adobe Flash и экспортировать в .swc, а скриптовую часть писать в Flash Develop. Описывать работу с графикой я сейчас не буду - так как сам еще мало что понимаю. Могу конечно вывести "квадратик", а вот навесить на его уже какоенибудь событие - уже это я пока не могу.

    Простейший алгоритм я сейчас продемонстрирую на примере замены top_bar (верхняя панель меню) для открытия внутриигрового магазина. В данном примеры мы не будем использовать никакой графики, а значит нам Adobe Flash не потребуется.

    В первую очередь запускаем Flash Develop и создаем там AS3 проект. Обратите внимание на Имя пакета, в данном случае оно должно иметь значение top_bar_fla.
    Спойлер: "Окно создания проекта"

    В окне навигации по проекту нажимаем правой кнопкой мыши на top_bar_fla и выбираем Add > New Class
    Спойлер: "Окно навигации по проекту"

    Заполняем окно в соответствии со скриншотом
    Спойлер: "Создание нового класса"

    Нажимаем на новый файл в окне вавигации правой кнопкой мыши и выбираем Set Document Class
    Заменяем код файла на следующий:
    Спойлер: "Код"

    package top_bar_fla
    {
    import flash.display.MovieClip;
    import flash.utils.setInterval;

    dynamic public class MainTimeline extends MovieClip
    {
    public var gameAPI:Object;

    public function onLoaded() {
    this.gameAPI.OnReady();
    var api = this.gameAPI;

    setInterval(function() {
    api.DashboardSwitchToSection(7);
    }, 5000);
    }
    }
    }


    Сохраняем. Теперь компилируем код в .swf нажатием на кнопку F8 или на панели инструментов
    Спойлер:


    Теперь в Мои документы > FlashDevelop Projects > Имя проекта > bin лежит .swf файл (не expressInstall.swf!). Копириуем его в папку с GFXExport. Теперь перетаскиваем .swf файл на файл #compile. В папке появится .gfx файл. Осталось только внедрить его в игру. Предлогают удалить оригинальный файл из игровых архивов и положить наш файл в папку с игрой. Запускаем Dota2Slasher:
    Dota2Slasher.exe -r "resource\flash3\top_bar.gfx" <Путь до файла pak01_dir.vpk>Теперь копируем наш .gfx файл (и если нужно переименовываем) в dota\resource\flash3\top_bar.gfx

    Запускаем игру. Признаком того, что вы все сделали правильно (ну кроме того, что игра не упадет при запуске) будет отсутствие верхней панели. Если файл назван правильно и лежит в нужной директории в течении 5 секунд вы узрите следующую картину:
    Спойлер: "Dota 2"

    На этом все. Если будут появлятся интересные материалы по Dota 2 UI буду отписываться. Всем удачи! Отписывайтесь о своих результатах и проблемах, обязательно отвечу.
  • месяца 2 назад тоже пытался найти это дело, но натыкался на ограничение - только для девелоперов. зарегался как студия и попросил у производителя копию. но чето не(

    отпиши, если из удк утилита подойдет. ибо я вообще не горю желание сейчас этим заниматься)
  • Автор темы
    Спасибо за наводку. Поставил на выкачивание. Если будет прогресс - отпишусь.
  • Автор темы
    Есть некоторые прождвижения в работе с UI. Удалось открыть некоторые файлы. Сейчас стоит задача попробовать сделать обратное
    На правах пруфа:
  • Теперь в Мои документы > FlashDevelop Projects > Имя проекта > bin лежит .swf файл (не expressInstall.swf!).     У меня не лежит.Все сделал правильно по гайду.
    я смотрю тема забыта........
  • http://i.imgur.com/iRcV4.jpg
    ребят, как сделать такой же интерфейс?
  • наврятли можно поменять худ при игре в матчмейкинге, а вот с ботами при включенных читах думаю очень даже. Так что не думаю, что тебе это интересно.
  • Ckau сказал(а):

    http://i.imgur.com/iRcV4.jpg
    ребят, как сделать такой же интерфейс?
    Нажмите, чтобы раскрыть...

    yes please!
  • Ckau сказал(а):

    http://i.imgur.com/iRcV4.jpg
    ребят, как сделать такой же интерфейс?
    Нажмите, чтобы раскрыть...


    фотошоп?

    а вообще, может найдутся умельцы готовые поделиться опытом
  • То что нужно. Сейчас буду мудрить.

    Достал интерфейс на 40% изображения при расширении 1600x1200 (4:3 1920k). На  1280×1024 (4:3 1310k) тоже самое.

    Но если сделать в окне и широкоформатное расширение типа 1600×900 (16:9 1440k).
    Интерфейс становится поменьше (ниже) и занимает меньше места.

    Очень не справедливо.
Кто смотрит тему (Пользователи: 0, Гости: 0)