[UB2] Анимация элементов

[BattleFrame]

[UB2] Анимация элементов

В данной теме мы рассмотрим простое анимирование элемента, добавление к элементу нескольких анимаций и взаимодействие нескольких анимированных элементов.

---

Часть 1. Куда вносить изменения.

Нам понадобится программа [ALL] MK Unpack Tool и немножко терпения. (как пользоваться программой можно прочитать в теме с ней, просто кладём в папку с игрой и запускаем)

С её помощью распаковываем папку "res\gui\unbound2" в которой находится  интерфейс игры. Далее определяемся где именно мы хотим отобразить наше творчество.

 

Например, я хочу разместить "мигающий квадратик" в порту, слева от кнопки "Отряды"

 

Как же мне узнать в какой файл вносить изменения? Способ, который можно применять в таких случаях подробно описан в следующей инструкции:

[FAQ] Пример поиска файлов для модифицирования в Unbound 2

Используя данную инструкцию мы выполняем все шаги до 5 пункта. Поиск приводит нас к файлу "gui\unbound2\pc\dock_header\division_button.unbound".

Как правило, то что мы искали уже находится внутри какого-то элемента. Мы же хотим создать новый элемент рядом с ним, значит нам необходимо узнать имя элемента в котором находится наш текст.

Листаем вверх по коду и ищем строку, начинающуюся с "(def"

(def element DivisionButtonPort ()

Находим и видим, что элемент называется DivisionButtonPort.

 

Теперь нам необходимо найти контроллер, который вызывает этот элемент. Попросту говоря, где-то в коде находится строка, которая как бы говорит "покажи мне вот это, вот здесь".

Ищем строку, в которую входит renderer='DivisionButtonPort' (вид кавычек может отличаться).

Сначала ищем данную строку в текущем файле, а если поиск не дал результатов то пользуемся уже известным нам способом для поиска по файлам

В нашем случае искомой строки не оказалось в найденном нами файле и пришлось повторить поиск по папкам.

Строка нашлась в файле "gui\unbound2\pc\dock_header\dock_header.unbound" и наш искомый "контроллер" выглядит вот так:

(controller $Instance renderer='DivisionButtonPort'
	(bind enabled "!isActiveTrainingBattle")
)

---

Часть 2. Что такое элемент с контроллером и как они связаны.

Под спойлером много текста, не пугаемся, это всё по большей части из-за примеров.

Скрытый текст

 

Итак. Мы нашли элемент DivisionButtonPort в котором находится нужный нам текст, нашли файл в котором он находится, а также файл в котором находится вызывающий его "контроллер".

Теперь немножко разберёмся в самих понятиях "элемент" и "контроллер".

• Элемент - это непосредственно сам блок кода в котором расположена вёрстка, то что увидит игрок. Именно в него мы будем вносить наши изменения
• Контроллер - небольшой блок кода, который располагается в том месте где необходимо отобразить тот или иной элемент.

 

Для большей наглядности представьте что вы готовите бутерброд по рецепту из книги. Основные ингредиенты (элементы бутерброда) это хлеб, колбаса и сыр.

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

Допустим мы видим в книге следующее:

1. Возьмите ломтик хлеба
2. Положите на него кусочек колбасы
3. Положите сверху ломтик сыра

Это наши контроллеры. Инструкции в книге говорящие, что и в каком порядке мы должны положить ингредиенты. Следовательно, в виде кода это будет выглядеть следующим образом:

(controller $Instance renderer='HLEB')
(controller $Instance renderer='KOLBASA')
(controller $Instance renderer='SIR')

Теперь что же такое элементы. Как уже упоминалось ранее, это непосредственно наши ингредиенты. Они могут быть где угодно, в холодильнике, на столе, в кладовке. Главное лишь то что они должны быть, поэтому в нашем коде их можно расположить в самом низу страницы после абсолютно всех символов.

(def element HLEB () layout=true
#....код элемента
)
(def element KOLBASA () layout=true
#....код элемента
)
(def element SIR () layout=true
#....код элемента
)

Ну и в финальном варианте код нашего "бутерброда" мы можем представить вот так:

(def element ButerBrod ()
	(block
		(controller $Instance renderer='HLEB')
		(controller $Instance renderer='KOLBASA')
		(controller $Instance renderer='SIR')
	)
)

(def element HLEB () layout=true
	#....код элемента
)
(def element KOLBASA () layout=true
	#....код элемента
)
(def element SIR () layout=true
	#....код элемента
)

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

 

Но допустим вы хотите добавить листик салата между колбасой и сыром. В таком случае вам необходимо дописать контроллер в нужное место, а вот элемент просто добавить в конец файла.

И получим уже следующий код:

(def element ButerBrod ()
	(block
		(controller $Instance renderer='HLEB')
		(controller $Instance renderer='KOLBASA')
		(controller $Instance renderer='SALAT')
		(controller $Instance renderer='SIR')
	)
)

(def element HLEB () layout=true
	#....код элемента
)
(def element KOLBASA () layout=true
	#....код элемента
)
(def element SIR () layout=true
	#....код элемента
)
(def element SALAT () layout=true
	#....код элемента
)

 

 

 

---

Часть 3. Подготовка файла модификации

Теперь вернёмся к нашему мигающему квадратику.

1. Копируем найденный нами файл dock_header.unbound в папку "..\bin\номер_версии\res_mods\gui\unbound2\mods" и переименовываем как душа желает.
2. Находим элемент в котором расположен наш контроллер DivisionButtonPort (в примере выше этот элемент мы называли ButerBrod)
3. После того как мы нашли элемент (в нашем случае это DockHeader), удаляем из файла все остальные блоки кода кроме тех что входят в данный элемент.
4. Вносим изменения:

   • После блока:

     (controller $Instance renderer='DivisionButtonPort'
     	(bind enabled "!isActiveTrainingBattle")
     )

   • Дописываем свой новый:

   • (controller $Instance renderer='Kvadrat'
     	(bind enabled "!isActiveTrainingBattle")
     )

     (bind enabled "!isActiveTrainingBattle") оставляем без изменений, он указывает на то что элемент не будет отображаться в тренировочной комнате

5. В самый конец файла добавляем наш элемент Kvadrat:

   • (def element Kvadrat ()
     
     )

      

6. Сохраняем файл

---

Часть 4. Создание модификации

Ну и непосредственно заполнение самого элемента. Нам необходимо изобразить сам квадрат и добавить к нему анимацию.

Первым делом нарисуем квадрат и зададим нашему элементу стили:

(def element Kvadrat ()
	(style
		(position = "absolute")
		(top = "10px")
		(left = "-100px")
	)
    (block
        (.graphics
            (beginFill "0xFFFFFF" "1")
			(drawRect 0 0 40 40)
            (endFill)
        )
    )
)

В данном коде (position = "absolute") позволяет изменять положение элемента независимо от остальных. Благодаря данному свойству мы можем перемещать наш квадрат при помощи свойств top, left, right и bottom. В нашем случае мы отступаем 10 пикселей от верхней границы окна и 100 пикселей влево относительно блока "Отряды". В результате получаем следующее:

 

Теперь нам необходимо анимировать этот элемент. Добавляем внутрь нашего элемента контроллер анимации. Подробнее о нём и других типах контроллеров можно узнать здесь

В финальном результате получаем следующий код элемента:

(def element Kvadrat ()
	(style
		(position = "absolute") 				# Задаём абсолютное позиционирование
		(top = "10px")          				# Смещаем наш квадрат на 10 пикселей вниз относительно верхнего края экрана
		(left = "-100px")       				# Смещаем наш квадрат на 100 пикселей влево относительно родительского
	)
    (block
        (.graphics
            (beginFill "0xFFFFFF" "1") 					# Заливаем квадрат белым цветом
			(drawRect 0 0 40 40) 				# Задаём размеры квадрата по ширине и высоте. В данном случае 40
            (endFill)
        )
    )
	(controller $Animation
		(play
			repeatCount=-1 					# Количество повторений анимации. -1 значит бесконечность
			duration=2	   				# Время в секундах за которое будет выполнен полный цикл анимации
			keyframes=     
			"[                                     		# Зависимость прозрачности относительно ключевых кадров.
				{percent:0%,	to:{alpha:0.2}},   	# установить непрозрачность 0.2 в начале анимации
				{percent:50%,	to:{alpha:1}}      	# установить непрозрачность 1 в середине анимации
				{percent:100%,	to:{alpha:0.2}},   	# установить непрозрачность 0.2 в конце анимации
			]"
			easing="Easing.sine_in" 			# настройка плавности анимации
			watch=false
		)
	)
)

В итоге мы получим вот такой результат:,

 

---

 

Ну и собственно архив с готовой модификацией для самостоятельного изучения: example_ub2_simple_animation.zip
Для установки необходимо распаковать содержимое архива в папку "..\bin\номер_версии\res_mods\"