Приветствую всех, дорогие пользователи сия портала.
Сегодня давайте поговорим об анимации 2D-DX элементов. Мне кажется, что это будет гораздо проще, чем gui-анимация
Такими элементами будут являться dxImage и dxText.
Что нам понадобится:
1) Руки из плеч, а ещё лучше, когда они подключены к мозгу
2) Базовые знания MTA Lua (строение функции, события, ресурса, работа с переменными, таблицами, ООП)
Начнём:
Для текста или изображения (я выберу именно изображение, но ещё рассмотрим пример и с текстом) нам понадобятся собственно координаты. Для этого можно создать несколько переменных, ну а я лучше воспользуюсь таблицей:
PHP код:
local Coords = {
x = 50,
y = 50,
w = 100,
h = 100
}
Собственно мы создали обычную таблицу со списком переменных. Вызывать каждый элемент можно таким образом - Coords.x, Coords.y, Coords.w, Coords.h. Эти переменные и будут предметом манипуляций. Теперь давайте создадим dx-изображение на экране.
PHP код:
addEventHandler("onClientRender", root, function()
dxDrawImage(Coords.x, Coords.y, Coords.w, Coords.h, "pane.png")
end)
Можно было бы дальше расписывать углы поворота изображения, которые можно так-же использовать для анимации, но этим я займусь в следующий раз.
Итак. Мы создали изображение по табличным координатам. Теперь давайте приступим к анимированию. Для этого создадим переменную, отвечающую за анимирование. Я её создам в уже существующей таблице, и воспользуюсь типом integer, так как буду делать 2 анимации.
PHP код:
Coords.Animation = 0
Значения для анимации:
0 - Выключена анимация
1 - Первая анимация
2 - Вторая анимация
И давайте её заанимируем так-же, как и в прошлом уроке. Для проделывания сия операции нам понадобится тоже событие, что и при создании изображения - onClientRender
PHP код:
addEventHandler("onClientRender", root, function()
if Coords.Animation == 1 then //Принцип работы точно такой-же, как и с GUI, тут проверка на использование первой анимации
//Так как позиции и размеры у нас находятся в таблице, а изображение на них базируется, то сразу можем переходить к редактированию координат
Coords.x, Coords.y = Coords.x+1, Coords.y-1
Coords.w, Coords.h = Coords.w-2, Coords.h-2
//И остаётся только проверить на координаты для завершения цикла
if Coords.h <= 0 then
//Для остановки анимации воспользуемся значением 0, ну а я сразу начну вторую анимацию
Coords.Animation = 2
end
elseif Coords.Animation == 2 then //Если используется вторая анимация
//Точно таким-же образом возвращаем изображение на место
Coords.x, Coords.y = Coords.x-1, Coords.y+1
Coords.w, Coords.h = Coords.w+2, Coords.h+2
//И теперь, чтобы координаты не были больше оригинального изображения, сделаем проверки
if Coords.x <= 50 then Coords.x = 50 end
if Coords.y >= 50 then Coords.y = 50 end
if Coords.w >= 100 then Coords.w = 100 end
if Coords.h >= 100 then Coords.h = 100 end
//Так как это dx-элемент, он отображается в рендере, следовательно ему не нужно присваивать размеры через дополнительные функции, он обновится сразу
//Теперь закроем цикл
if Coords.h == 100 then
Coords.Animation = 0
end
end
end)
Давайте теперь сделаем функцию для вызова анимации:
PHP код:
function startAnim(num)
//Принцип работы точно такой-же, как и в прошлом уроке
if num < 0 or num > 2 then return false end
Coords.Animation = num
end
Вызов анимации мы сделаем по нажатию на клавишу m.
PHP код:
bindKey("m", "up", function() startAnim(math.random(0, 2)) end)
Я пожалуй на сегодня на этом остановлюсь, а завтра уже распишу, как можно будет сделать плавное ротирование (вылет изображения например), а так-же работа с цветами (RGBA), поддерживаемое DX.
Конечный результат:
PHP код:
local Coords = {
x = 50,
y = 50,
w = 100,
h = 100
}
addEventHandler("onClientRender", root, function()
dxDrawImage(Coords.x, Coords.y, Coords.w, Coords.h, "pane.png")
if Coords.Animation == 1 then
Coords.x, Coords.y = Coords.x+1, Coords.y-1
Coords.w, Coords.h = Coords.w-2, Coords.h-2
if Coords.h <= 0 then
Coords.Animation = 2
end
elseif Coords.Animation == 2 then
Coords.x, Coords.y = Coords.x-1, Coords.y+1
Coords.w, Coords.h = Coords.w+2, Coords.h+2
if Coords.x <= 50 then Coords.x = 50 end
if Coords.y >= 50 then Coords.y = 50 end
if Coords.w >= 100 then Coords.w = 100 end
if Coords.h >= 100 then Coords.h = 100 end
if Coords.h == 100 then
Coords.Animation = 0
end
end
end)
function startAnim(num)
if num < 0 or num > 2 then return false end
Coords.Animation = num
end
bindKey("m", "up", function() startAnim(math.random(0, 2)) end)
Спасибо за прочтение, и, если будут вопросы, прошу задавать, можете даже в эту тему