ShadowDragonSC2
StarCraft 2

Начало работы с анимациями интерфейса

Добавлен , опубликован
Статья
Раздел:
5. Пользовательский интерфейс
Доброго времени суток всем читателям данной статьи, на сегодня поговорим об интерфейсе игры, и раз уж уже есть хоть какие-то статьи по основам UI, то я пожалуй начну как всегда с темы, которая толком нигде не освещена, а именно поговорим мы об Анимациях интерфейса
Сразу заранее скажу, НЕ ПЫТАЙТЕСЬ ИСПОЛЬЗОВАТЬ СТАНДАРТНЫЙ МОДУЛЬ ИНТЕРФЕЙСА. ОН УЖАСЕН. Вместо этого лучше сразу разбирайте свою карту или модификацию на компоненты и работайте со своим проектом в разобранном виде с помощью редактора кода Visual Studio Code.
VSCode вы можете скачать тут. И после того как вы его скачаете вам нужно поставить на него 1 (или если хотите можете 2) плагин
После вы сможете прямо в VSCode забросить папку компонентов вашей карты и работать над картой в Visual Studio Code

Начинаем начинать работать с интерфейсом

Перед тем как работать с интерфейсом внутри компонентов, нужно сделать ещё пару действий в самом редакторе, это:
  1. Открыть модуль интерфейса
  2. Создать в нем новый Layout (Макет)
  3. Сохранить карту
Если вы всё сделали правильно у вас в компонентах карты должны появится папки Base.SC2Data/UI/Layout/<Ваш созданный лайоут>
Вот теперь мы точно с первоначальной настройкой закончили и можем приступать к верстке своего интерфейса и его анимированию.
И для начала напишем в наш созданный лайоут вот такой заготовочный код
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Desc>
    <Frame type="Frame" name="GameUI/UIContainer" file="GameUI">
        <Frame type="Frame" name="MyFirstFrame">
            <Anchor side="Top" relative="$parent" pos="Mid" offset="0"/>
            <Anchor side="Left" relative="$parent" pos="Mid" offset="0"/>
            <Anchor side="Right" relative="$parent" pos="Mid" offset="0"/>
            <Anchor side="Bottom" relative="$parent" pos="Mid" offset="0"/>
            <Width val="300"/>
            <Height val="100"/>

			<Frame type="Image" name="FrameBG">
                <Anchor relative="$parent"/>
                <Texture val="Assets\Textures\ui_glue_listboxselection_selected_terran.dds"/>
                <TextureType val="Border"/>
            </Frame>

		</Frame>
	</Frame>
</Desc>
Если мы на данном этапе если мы попробуем запустить игру, то мы увидим такую картину
Теперь давайте попробуем анимировать этот фрейм. Чтобы при нажатии на кнопку на экране, наш зелёный фрейм немного расширялся по вертикали.
Для этого мы сначала добавим кнопку снизу экрана таким образом
<Frame type="Button" name="MyButton" template="StandardBattlenetTemplates/BattlenetStandardButtonTemplate">
	<Anchor side="Left" relative="$parent" pos="Mid" offset="0"/>
	<Anchor side="Right" relative="$parent" pos="Mid" offset="0"/>
	<Anchor side="Bottom" relative="$parent" pos="Max" offset="-100"/>
	<Handle val="ButtonAnim"/>
	<Height val="70"/>
	<Width val="350"/>
	<Text val="Нажми меня!"/>
</Frame>
Пояснение кода
В этой разметке мы добавили новую кнопку type="Button" внизу экрана <Anchor side="Buttom" .../>, по стандартному шаблону кнопки интерфейса Батлнета, которую чуть сместили вверху на 100 пикселей offset="-100"
Отдельно стоит сказать про поле Handle - Это скажем так, присвоение ссылки на этот фрейм. Это нужно для того чтобы из любого другого места интерфейса, из любого фрейма, не зависимо в каком файле он находится, можно было обратится именно к этому фрейму через символ "$"
Вот пример как это работает:
После этого мы добавим новую анимацию на наш зелёный фрейм вот с помощью такого кода
<Frame type="Frame" name="MyFirstFrame">

	<-- Выше описание написанное ранее -->

	<Animation name="HeightAnim">
		<Event event="OnClick" action="Reset,Play" frame="$ButtonAnim"/>

		<Controller type="Dimension" end="Pause" frame="$this" dimension="Height" relative="True">
		    <Key type="Curve" time="0.0" value="0"/>
	 	   	<Key type="Curve" time="0.4" value="300"/>
		</Controller>
	</Animation>
</Frame>
Пояснение кода
Здесь мы добавили анимацию под названием HeightAnim.
Анимации работают по какому-то событию, что происходят с интерфейсом (А также это событие можно вызвать и из триггеров на определенном элементе)
В данном случае указано событие OnClick, которое из название понятно запускает анимацию после того как была нажата кнопка, указанная в атрибуте frame=""
После события идёт контроллер, который собственно и исполняет то, что должно произойти за анимацию. Сейчас контроллер настроен на изменение высоты dimension="Heigh" фрейма, в котором находится анимация frame="$this". А сам контроллер работает по принципу "Ключевых точек" - вы прописываете ключ, и для него в задаёте за какое время нужно применить свойство фрейма, до указанно значения. и указываете само значение
ВАЖНО: Первый ключ всегда должен иметь время на 0.0
и ещё момент...
к ключу контролера вы можете задать насколько плавно будет переход между ключами. Чтобы например анимация началась резко, а закончила плавно
Делается это через такой атрибут в ключе как in, out, inout
<Key type="Curve" time="0.0" inout="Slow" value="0"/>
Атрибут Описание
in с этим атрибутом при входе в этот ключ будет применятся указанный "модификатор"
out с этим атрибутом при выходе из этого ключ будет применятся указанный "модификатор"
inout с этим атрибутом при входе и выходе в этот ключ будет применятся указанный "модификатор"
Модификатор Описание
Auto Модификатор при котором анимация ключа будет слегка плавнее
Linear Модификатор при котором анимация не будет плавной вообще. Он стоит во всех ключах по умолчанию
Slow Модификатор при котором анимация ключа будет более медленной и плавной
Fast Модификатор при котором анимация ключа более быстра и дерганная. Мало применима
Smooth Модификатор при котором анимация ключа плавно переходит в следующий ключ. Лучше использовать когда присутствуют 3 и более ключа
Step Модификатор при котором анимация ключа моментально достигнет указанного значения через время указанное в time
30 мар 2025
128
`
ОЖИДАНИЕ РЕКЛАМЫ...
Чтобы оставить комментарий, пожалуйста, войдите на сайт.