aaa4xu

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

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

Сообщения: 14

Рейтинг: 15

aaa4xu

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

Сообщения: 14

Рейтинг: 15

Думаю мододелы уже заметили, что 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 буду отписываться. Всем удачи! Отписывайтесь о своих результатах и проблемах, обязательно отвечу.

perfect.Flick

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

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

Сообщения: 615

Рейтинг: 360

perfect.Flick

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

Сообщения: 615

Рейтинг: 360

месяца 2 назад тоже пытался найти это дело, но натыкался на ограничение - только для девелоперов. зарегался как студия и попросил у производителя копию. но чето не(

отпиши, если из удк утилита подойдет. ибо я вообще не горю желание сейчас этим заниматься)

aaa4xu

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

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

Сообщения: 14

Рейтинг: 15

aaa4xu

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

Сообщения: 14

Рейтинг: 15

Спасибо за наводку. Поставил на выкачивание. Если будет прогресс - отпишусь.

aaa4xu

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

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

Сообщения: 14

Рейтинг: 15

aaa4xu

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

Сообщения: 14

Рейтинг: 15

Есть некоторые прождвижения в работе с UI. Удалось открыть некоторые файлы. Сейчас стоит задача попробовать сделать обратное

На правах пруфа:

Stif21

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

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

Сообщения: 31

Рейтинг: 2

Stif21

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

Сообщения: 31

Рейтинг: 2

Теперь в Мои документы > FlashDevelop Projects > Имя проекта > bin лежит .swf файл (не expressInstall.swf!).     У меня не лежит.Все сделал правильно по гайду.

я смотрю тема забыта........

Ckau

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

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

Сообщения: 1

Рейтинг: 0

Ckau

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

Сообщения: 1

Рейтинг: 0

http://i.imgur.com/iRcV4.jpg

ребят, как сделать такой же интерфейс?

Crashko

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

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

Сообщения: 1384

Рейтинг: 865

Crashko

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

Сообщения: 1384

Рейтинг: 865

img
наврятли можно поменять худ при игре в матчмейкинге, а вот с ботами при включенных читах думаю очень даже. Так что не думаю, что тебе это интересно.

yurisupreme

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

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

Сообщения: 8

Рейтинг: 0

yurisupreme

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

Сообщения: 8

Рейтинг: 0

Ckau сказал(а):↑

http://i.imgur.com/iRcV4.jpg

ребят, как сделать такой же интерфейс?

Нажмите, чтобы раскрыть...

yes please!

AzazZelle

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

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

Сообщения: 247

Рейтинг: 101

AzazZelle

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

Сообщения: 247

Рейтинг: 101

Ckau сказал(а):↑

http://i.imgur.com/iRcV4.jpg

ребят, как сделать такой же интерфейс?

Нажмите, чтобы раскрыть...

фотошоп?

а вообще, может найдутся умельцы готовые поделиться опытом

SergeyOvD

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

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

Сообщения: 37

Рейтинг: 3

SergeyOvD

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

Сообщения: 37

Рейтинг: 3

То что нужно. Сейчас буду мудрить.

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

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

Интерфейс становится поменьше (ниже) и занимает меньше места.

Очень не справедливо.