Добавлен , опубликован
Раздел:
5. Пользовательский интерфейс
Awaken my child and embrace the glory of XML-UI birthright.

Данные игрового интерфейса. Starcraft 2 XML UI layout.

Кому можно читать - тем кто уже освоил базовые способности ск2ге и хочет поменять интерфейс карты.
Уровень необходимых знаний - Средний;
Что можно делать:

Предисловие.

Многие видели что для ск2 уже есть карты которые обладают нестандартным интерфейсом, сделанном на диалогах. Но диалоговая система работает только с триггерами, отсюда вытекают некоторые сложности, например, если вы задумали полностью изменить UI, то вам придется построить все абилки на триггерах (или хотя бы их отлавливать)
Собственно это основной минус. Делать кулдаун для триггерных абилок = ад и погибель.
Еще трудно сделать миникарту, рюшечки, типа выделения групп, рожицы чуваков и т. д.
Отдельным минусом идут хоткеи - их делаем отдельно (- к производительности) и желательно в одном триггере. Для всех хоткеев! Это ужас.
(Еще всплывающие подсказки, дада ^^)
И тогда к нам приходит волшебный XML-UI или как говорят еще - лэйауты (sc2 layouts)
Что он позволяет?
С помощью XMLUI можно полностью поменять интерфейс карты, при этом, не городя никаких хитроумных систем для того, что уже создано! Все настройки делаются через дата-едитор.
Грубо говоря, вы можете поставить кнопки абилок в ряд, но при этом триггеры менять не придется! Т.е. все абилки будут также настраиваться из дата-эдитора, их кулдаун, подсказки и т. д., и т. п.
Что дает очень большие возможности по перелопачиванию игрового интерфейса под себя

Часть 1. Теория. Устройство XML/SC2Layout файлов

Q&A XML Batch №13

Что такое UI?
UI = User Interface = Интерфейс.
Нижняя большая панелька, сверху менюшка, справа сверху панелька ресурсов - все вместе - UI
по отдельности - элементы UI
Что за элементы UI?
В ск2 их 2 типа - картинки и фреймы
фрейм - такое окошко, куда могут запихиваться другие окошки-фреймы и где выводиться различная информация.
Весь интерфейс ск2 состоит из них
проще говоря - панелька ресурсов = фрейм
или вот плеер выделил морпеха - снизу показывается его рожица - это фрейм!
он находится во фрейме "нижняя панелька"
которая находится во фрейме "весь интерфейс"
Что за расширение *.SC2Layout?
Это обычный XML файл
А что такое XML?
Предполагается, что вы знаете - если нет, то можно погуглить ;)
Вкратце - это особым образом записанный текстовый файл, по типу эээ, бб кодов на форуме или вики разметки -_-
Как их редактировать?
Обычным блокнотом, после чего сохраняем и заново импортируем в ск2 (не забывая сохраниться после импорта!!)

Подготовка

Весь интерфейс карты хранится в специальных XML файлах, где прописан каждый элемент, а также его положение, привязка, размеры и т. д.
Это файлы с расширением SC2Layout.
Итак, для начала скачаем эти файлы
Положите их на видном месте и пока не трогайте

XML файлы

Состоят из фраз типа:
<окошко> </окошко>
Вот посложнее:
<окошко>
	<кнопка/>
</окошко>
(я надеюсь все поняли, что этот код описывает просто окошко с кнопкой внутри)
Этот же код в другом варианте:
<окошко>
	<кнопка>
		
	</кнопка>
</окошко>
И применяются такие штуки для записи данных. Т.е. весь интерфейс ск2карты - это набор таких вот таблиц.
Еще пример - допустим мы хотим отобразить в xml виде небольшой лес, с деревьями и пеньками. Вот как это будет выглядеть:
<Лес>
	<Березы количество="3"/>
	<Дубы количество="2"/>
	<ТОПОЛЯ количество="1"/>
	<Пеньки>
		<Березовые количество="5"/>
		<Дубовые количество="2"/>
		<Тополиные количество="3"/
	</Пеньки>
</Лес>

SC2Layout файлы

Как уже говорилось - это тупо xml
В этом разделе все еще теория, ни один пример из него не будет работать у вас в карте =)
Итак - делаем безымянное тупое окошко с привязкой к нижнему правому краю дисплея
<Frame type="123" name="123">
	<Anchor side="Right" relative="$parent" pos="Max" offset="0"/>
	<Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
</Frame>  
Непонятные слова:
Frame - Весь UI состоит из Окошек (Frame), который могут находится друг в друге
type / name - тип и имя окошка, в идеале мы их пока что не трогаем и оставляем какие есть
Очень важно понять что весь интерфейс состоит из бесчисленных фреймов, которые находятся друг в дружке!
Anchor - это "якорь" окошка. Например, миникарту можно прицепить этим "якорем" к правой верхней стороне монитора (или другого окошка), чтобы она там висела и радовала нас своим необычным местоположением
Для якоря очень важны параметры:
side - Сторона на которой находится якорь бывает Top, Left, Right, Bottom - сверху, слева, справа, снизу
Представьте, что у вас есть квадратик, одну сторону которого нужно намазать клеем. side указывает эту сторону.
relative - тут стоит $parent - что обозначает - Клеится к окошку_в_котором_я_нахожусь. Подробнее - чуть ниже.
pos - Min, Max, Mid - Величина к которой прикрепляется якорь. side='Left' pos='Min' - это левый край, side='Top' pos='Mid' - это верх нашего окошка будет по центру relative-окошка
offset - отступ, в пикселях.
Представьте себе такой код, который описывает форум.
В ФОРУМЕ есть один ТОПИК в котором сразу виден один ПОСТ и один КОММЕНТ к нему
<frame name='FORUM'>
	<frame name='TOPIC'>
		<frame name='POST'>
		</frame>
		<frame name='KOMMENT'>
			<Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
			<Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
		</frame>
	</frame>
</frame>
К какому окошку будет крепиться фрейм "КОММЕНТ" и в каком положении?
Ответ
Итак, смотрим - фрейм "Коммент" у нас во фрейме Топик, значит $parent будет Топик
Вычисляем:
Берем Нижний(Bottom) край Коммента и прикрепляем к Нижнему(Max) краю Топика
Потом берем Левый(Left) край Коммента и прикрепляем к Левому (Min) краю Топика
(Если в комменте поменять 2 якорь на
<Anchor side="Right" relative="$parent" pos="Min" offset="0"/>)
то он будет крепиться справа от Топика и будет как нашлепка такая
Все, еще немного теории и ринемся в бой!
Вот примерная структура обычного SC2Layout файла
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Desc>
	<Frame type="GameUI" name="GameUI">
		<Anchor relative="$parent"/>
		<!-- UI Container - for all ui elements above the world -->
		<Frame type="Frame" name="UIContainer">
			<Anchor relative="$parent"/>
			<!-- Fullscreen lower UI elements - below the console -->
			<Frame type="Frame" name="FullscreenLowerContainer">
				<Anchor relative="$parent"/>
				<Frame type="PausePanel" name="PausePanel" template="PausePanel/PausePanelTemplate">
					<Anchor side="Top" relative="$parent" pos="Min" offset="0"/>
					<Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
					<Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
					<Anchor side="Right" relative="$parent" pos="Max" offset="0"/>
				</Frame>                         
			</Frame>
		</Frame>
	</Frame>
</Desc>
Итак, что тут написано?
Вначале идёт стандартная надпись о том, что это вообще-то xml файл
Дальше идет тег <Desc> - очень важный тег, все sc2layout файлы "заключаются" в него
Дальше - фрейм GameUI - Игровой Интерфейс, по сути такой мегаобщий фрейм.
Но! И он привязан к Мега Божественному Общему Фрейму.
об этом нам говорит строчка - <Anchor relative="$parent"/>
Все фреймы должны иметь якорь, иначе они просто не будут показываться на экране!!!
Дальше идет коммент - <! UI Container - for all ui elements above the world > - для всех UI элементов в мире, близзы поставили, чтобы не запутаться самим ^^
И идет таки как раз еще один глобальный фрейм - UIContainer
Он, как вы, надеюсь, догадались, находится во фрейме GameUI и привязан к нему
Следующие 3 строчки повторяется та же история для нижней панельки
и вот, наконец - <Frame type="PausePanel" name="PausePanel" template="PausePanel/PausePanelTemplate">
фрейм панели паузы!!! (если кто не знает – теперь, когда жмешь паузу, появляется такое окошко сверху меню где написано кто запаузил)
собственно остальные внутренности этой панели описаны в файле - PausePanelTemplate.sc2layout, но в них пока лезть не надо
Сейчас самое время чуть передохнуть и усвоить все эти знания, а также открыть скачанный архивчик с sc2layout файлами и, например, просмотреть GameUI.SC2layout
Это будет наш основной файл, и именно там мы будем все менять.

Часть 2. Практика. Курочим интерфейс карты

Заповеди

Прежде чем начать практиковаться прочитайте и запомните 3 заповеди UI-мейкера
  1. Если поменять местами фреймы в SC2Layout файле - старкрафт 2 вылетит!
  2. Если поменять тип фрейма в SC2Layout файле - старкрафт 2 вылетит!
  3. Если удалить фрейм в SC2Layout файле - старкрафт 2 вылетит!

Импорт файлов

Распаковываем наш архивчик.
Перемещаем файлы над которыми будем работать в отдельную папку (в данной статье это GameUI.sc2layout).
открываем карту, открываем менеджер импорта (F9)
жмем Ctrl+I и указываем папку, где лежат наши файлы
выделяем нужные галочкой (конкретно сейчас лучше добавить только GameUI.SC2Layout), ОК
(Заметьте, что справа высвечивается состояние файла - сейчас оно added)
Выделяем все файлы > Ctrl+M > New Path - UI/Layout/UI
Ctrl+S - Обязательно надо сохранятся сразу после каждого изменения файла
Заменили/добавили - сохранились сразу же, иначе файлы сбросятся до первоначального состояния.

Миникарта

Итакссс, давайте для начала переместим миникарту в верхний левый угол.
Открываем наш GameUI.sc2layout блокнотом
Находим строчку: <Frame type="MinimapPanel" name="MinimapPanel" template="MinimapPanel/MinimapPanelTemplate">
Что она означает вы уже должны знать. Если не знаете - лучше перечитать теорию до просветления
Фрейм типа MInimapPanel с именем MinimapPanel, все дальнейшее описание которого находится в файле MinimapPanel.SC2Layout
Дальше идет такой код:
<Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
<Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
<Width val="395"/>
<Height val="327"/>
по строчкам:
Миникарта прикреплена левой стороной (side="left") к родительскому фрейму (relative="$parent") к самому левому краю (pos="Min") с отступом 0
Миникарта прикреплена нижней стороной к родительскому фрейму к самому нижнему краю с отступом 0
Миникарта имеет ширину 395
Миникарта имеет высоту 327
Мы собрались переставить ее вверх, поэтому нам нужно поменять эту строчку
<Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
на эту
<Anchor side="Top" relative="$parent" pos="Min" offset="0"/>
Сохраняем файл, импортируем в карту, сохраняем карту, тестируем:
Отлично!
Но теперь некрасиво смотрятся иконки справа от миникарты, давайте поставим их вниз.
Если они переместились вместе с миникартой и о них ничего в *GameUI.SC2Layout* не указано, то тогда открываем файл *MinimapPanel.SC2Layout* и смотрим в нём.
Нас интересует что-нибудь про кнопки.
(Вообще если переделывать интерфейс под карту надо переделать там всё, но я ограничусь кнопками)
<Frame type="Button" name="PingButton" template="MinimapPanel/MinimapButtonTemplate">
Агааа, это кнопка чтобы сделать пинг на миникарте!
Смотрим сюда:
<Anchor side="Right" relative="$parent" pos="Max" offset="-6"/>
<Anchor side="Bottom" relative="$parent" pos="Max" offset="-226"/>
На этом месте лучше самим поэкспериментировать, чтобы добиться такого эффекта:
Ответ
заменяем на
<Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
<Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
Дальше в
<Frame type="Button" name="TerrainButton" template="MinimapPanel/MinimapButtonTemplate">
Меняем
<Anchor side="Right" relative="$parent" pos="Max" offset="-6"/>
<Anchor side="Bottom" relative="$parent" pos="Max" offset="-176"/>
на
<Anchor side="Left" relative="$parent" pos="Min" offset="54"/>
<Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
и в
<Frame type="Button" name="ColorButton" template="MinimapPanel/MinimapButtonTemplate">
Меняем так же на
<Anchor side="Left" relative="$parent" pos="Min" offset="108"/>
<Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
и чуть выше всего этого меняем в <Frame type="Minimap" name="Minimap">
<Anchor side="Top" relative="$parent" pos="Min" offset="0"/>
<Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
Отлично, но все же как-то не очень красиво. Сделаем подложку к нашей миникарте.
В GameUI.SC2Layout переписываем код нашей миникарты:
<Frame type="MinimapPanel" name="MinimapPanel" template="MinimapPanel/MinimapPanelTemplate">
	<Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
	<Anchor side="Top" relative="$parent" pos="Min" offset="0"/>
	<Width val="395"/>
	<Height val="327"/>
	<Frame type="Image" name="MinimapPanelFrame">
		<Anchor side="Top" relative="$parent" pos="Min" offset="0"/>
		<Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
		<Width val="395"/>
		<Height val="327"/>
		<Texture val="@@UI/TimerWindowBackground" layer="0"/>
		<TextureType val="Border" layer="0"/>
		<Tiled val="true" layer="0"/>
		<LayerColor val="StandardBorder" layer="0"/>
		<RenderPriority val="500"/>
	</Frame>
</Frame>
Как видите, добавился фрейм-картинка с именем MinimapPanelFrame (имя я написал сам, можно было менее понтово назвать ^.^)
Про текстуры сейчас не буду писать, это очень большая тема.
У нас получилась такая картинка:
Теперь самое интересное - необходимо всеми anchor'ами и offset'ами выровнять это.
Т.е. порядок действий такой: думаем, меняем, загружаем игру, смотрим, думаем, меняем, и т. д.
5-10 перезапусков - и успех, обратите внимание что миникарта не зарезала тестовых мариков по краям
Что надо поменять для такого же
  1. GameUI.SC2Layout
<Frame type="MinimapPanel" name="MinimapPanel" template="MinimapPanel/MinimapPanelTemplate">
                    <Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
                    <Anchor side="Top" relative="$parent" pos="Min" offset="30"/>
                    <Width val="395"/>
                    <Height val="390"/>
                    <Frame type="Image" name="MinimapPanelFrame">
						<Anchor side="Top" relative="$parent" pos="Min" offset="0"/>
						<Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
						<Width val="360"/>
						<Height val="350"/>
						<Texture val="@@UI/TimerWindowBackground" layer="0"/>
						<TextureType val="Border" layer="0"/>
						<Tiled val="true" layer="0"/>
						<LayerColor val="StandardBorder" layer="0"/>
						<RenderPriority val="500"/>
					</Frame>
                </Frame>
  1. MinimapPanel.SC2Layout
        <Frame type="Minimap" name="Minimap">
            <Anchor side="Top" relative="$parent" pos="Min" offset="32"/>
            <Anchor side="Left" relative="$parent" pos="Min" offset="32"/>
            <Width val="291"/>
            <Height val="286"/>
            <TooltipFrame val="MinimapPanelTooltip"/>
        </Frame>

        <Frame type="Button" name="PingButton" template="MinimapPanel/MinimapButtonTemplate">
            <Anchor side="Left" relative="$parent" pos="Min" offset="32"/>
            <Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
            <Frame type="Image" name="Icon">
                <Texture val="@UI/MinimapPing"/>
            </Frame>
        </Frame>

        <Frame type="Button" name="TerrainButton" template="MinimapPanel/MinimapButtonTemplate">
            <Anchor side="Left" relative="$parent/PingButton" pos="Min" offset="54"/>
            <Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
            <Frame type="Image" name="Icon">
                <Texture val="@UI/MinimapTerrain"/>
            </Frame>
        </Frame>

        <Frame type="Button" name="ColorButton" template="MinimapPanel/MinimapButtonTemplate">
            <Anchor side="Left" relative="$parent/TerrainButton" pos="Min" offset="54"/>
            <Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
            <Frame type="Image" name="Icon">
                <Texture val="@UI/MinimapColor"/>
            </Frame>
        </Frame>
Внимательный читатель мог заметить, что я привязал кнопки друг к дружке т.к. менять по 3 числа сразу мне было лень
Если вы сделали это, то задачу с миникартой можно считать решенной, цель была показать базовые взаимодействия с UI, а не сделать за вас карту
и напоследок мини-туториал:

Убираем UI

Делается это очень хитрым методом, путем убирания всей консоли далеко вниз :D
Открываем GameUI.SC2Layout
Заменяем
<Frame type="ConsolePanel" name="ConsolePanel" template="ConsolePanel/ConsolePanelTemplate">
    <Anchor relative="$parent"/>
</Frame>
на
<Frame type="ConsolePanel" name="ConsolePanel" template="ConsolePanel/ConsolePanelTemplate">
    <Anchor side="Top" relative="$parent" pos="Max" offset="500"/>
</Frame>
Будет все вот так, останется почистить от всяких таймеров и т. д. – главное, что убрали консоль.
Черная полоска внизу убирается так:
Редактор Объектов > Game UI Data > Default SC2 UI Settings > World Console Bottom = 0
Вот собственно и всё О-о
`
ОЖИДАНИЕ РЕКЛАМЫ...
2
28
13 лет назад
2
круто чё. гж ! <3
1
20
13 лет назад
1
Хорошая статья! Спасибо, узнал много нового
0
10
13 лет назад
0
Быдло статья с кучей школьных ошибок... баяны баянами + ужасные интерфейсы. OneTwo делает подобное шикарнее. И за текстуру не правильно сказал...
Ненужные части интерфейса можно убирать триггерами, чтобы не лазить в 100500 мест для их восстановления.
Ах да... это можно на свалку т.к.
"In a future patch we will be disabling the ability to replace UI layout files in this manner completely as it results in undesirable behavior."
Будет новая система (1.3 уже лайв кстати - вероятно это уже в нем)... замена путем одного файла GameUIOverride.SC2Layout, где нужно вписывать только то что меняется ссылаясь на нужный лэйаут.
0
12
13 лет назад
0
Ненужные части интерфейса можно убирать триггерами, чтобы не лазить в 100500 мест для их восстановления.
Убери же мне миникарту триггерами :3
Быдло статья с кучей школьных ошибок... баяны баянами + ужасные интерфейсы. OneTwo делает подобное шикарнее. И за текстуру не правильно сказал...
Пруфы можно? Лучше в личку конечно
Будет новая система (1.3 уже лайв кстати)
ты бы помог еслиб протестил метод на 1.3 и отписался, а так твой коммент как бы критика, но жуть неадекватна, я тебя обил чем бро?
PS: #1,#2 <3
0
10
13 лет назад
0
Убери же мне миникарту триггерами :3
Кстати она ими как раз и может убираться... речь не оней... речь о World Console Bottom = 0
Пруфы можно? Лучше в личку конечно
Школьные ашипки при перечтении найдешь
ты бы помог еслиб протестил метод на 1.3
Он прост и шикарен - без тоны говнолэйаутов, которые нужно запихивать в импорт.
зы: на сколько я помню у тебя статьи были полуше, а эта написана из разряда "Я первый написал эту статью, я первый".. никаких обид
0
12
13 лет назад
0
Кстати она ими как раз и может убираться... речь не оней... речь о World Console Bottom = 0
не шаришь, hide game ui прячет весь ui а world console bottom убирает подложку из под спрятанной картинки консоли.
Школьные ашипки при перечтении найдешь
manner up, см в конец коммента
Он прост и шикарен - без тоны говнолэйаутов, которые нужно запихивать в импорт.
Пруф пруф скорей же
на сколько я помню у тебя статьи были
на сколько я помню это моя первая статья на xgm, тут ты зафейлился
и бонус:
Кстати она - нет запятой
речь не оней - пропущен пробел
без тоны - тонны с 2 н
на сколько - слитно
помню у тебя - перед у запятая
полуше - пропущена Ч
0
25
13 лет назад
0
пиши без всего этого мусора, а названия на английском
0
10
13 лет назад
0
Комментарий != статья. Взялся писать, сканируй. У тебя этой гадости в каждой строке (буквально).
По оверрайду - гугли Customizing UI Changes by Blizzard
Хотя ладно... снизойду с небес us.battle.net/sc2/en/forum/topic/2267589748
Этот комментарий удален
0
15
12 лет назад
Отредактирован Харгард
0
О как. Оказывается, такая статья уже есть. Правда на звание истины в последней инстанции она не претендует.
0
12
11 лет назад
0
Харгард:
О как. Оказывается, такая статья уже есть. Правда на звание истины в последней инстанции она не претендует.
Это для старой версии ск2, её бы удалить как-нибудь
Чтобы оставить комментарий, пожалуйста, войдите на сайт.