[Урок] 2D-графическая анимация

[Archange]

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

local Coords = {
	x = 50,
	y = 50,
	w = 100,
	h = 100
}

Собственно мы создали обычную таблицу со списком переменных. Вызывать каждый элемент можно таким образом - Coords.x, Coords.y, Coords.w, Coords.h. Эти переменные и будут предметом манипуляций. Теперь давайте создадим dx-изображение на экране.

addEventHandler("onClientRender", root, function()
	dxDrawImage(Coords.x, Coords.y, Coords.w, Coords.h, "pane.png")
end)

Можно было бы дальше расписывать углы поворота изображения, которые можно так-же использовать для анимации, но этим я займусь в следующий раз.
Итак. Мы создали изображение по табличным координатам. Теперь давайте приступим к анимированию. Для этого создадим переменную, отвечающую за анимирование. Я её создам в уже существующей таблице, и воспользуюсь типом integer, так как буду делать 2 анимации.

Coords.Animation = 0

Значения для анимации:
0 - Выключена анимация
1 - Первая анимация
2 - Вторая анимация

И давайте её заанимируем так-же, как и в прошлом уроке. Для проделывания сия операции нам понадобится тоже событие, что и при создании изображения - onClientRender

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)

Давайте теперь сделаем функцию для вызова анимации:

function startAnim(num)
	//Принцип работы точно такой-же, как и в прошлом уроке
	if num < 0 or num > 2 then return false end
	Coords.Animation = num
end

Вызов анимации мы сделаем по нажатию на клавишу m.

bindKey("m", "up", function() startAnim(math.random(0, 2)) end)

Я пожалуй на сегодня на этом остановлюсь, а завтра уже распишу, как можно будет сделать плавное ротирование (вылет изображения например), а так-же работа с цветами (RGBA), поддерживаемое DX.

Конечный результат:

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)

Автор: Arios Jentu​