Ana menü animasyonu - örnek proje

Düzenleyiciden açabileceğiniz veya GitHub’dan indirebileceğiniz bu örnek projede, bir ana menüyü göstermek için kullanılan efektleri gösteriyoruz. Menü, bir arka plan ve iki menü öğesi içerir. Bu proje, aşağıda gösterilen kodun uygulandığı menu.gui ve menu.gui_script dosyalarıyla hazır olarak sunulur. Görsel varlıklar (assets), images.atlas adlı bir atlasa eklenmiş ve menu.gui dosyasındaki düğümlere (nodes) uygulanmıştır.

Arka plana ve iki menü öğesinin her birine aynı animasyonlar farklı gecikmelerle uygulanır. Bu işlem, aşağıdaki init() işlevinde ayarlanır.

İlk animasyonlarda her düğüm, ölçeği %70’ten %110’a çıkarılırken yavaşça görünür hâle gelir. Bu işlem anim1() içinde yapılır.

Sonraki animasyonlarda ölçek, animasyonla önce %110’dan %98’e, ardından %106’ya ve son olarak %100’e değiştirilir. Bu, zıplama efektini oluşturur ve anim2(), anim3() ve anim4() içinde yapılır.

Arka plana son aşamada özel bir hafif saydamlaşma efekti uygulanır; bu işlem anim5() içinde yapılır.

-- file: menu.gui_script

-- the functions animX represents the animation time-line
-- first is anim1 executed, when finished anim2 is executed, etc
-- anim1 to anim4 creates a bouncing rubber effect.
-- anim5 fades down alpha and is only used for the background

local function anim5(self, node)
	if gui.get_node("background") == node then
		-- special case for background. animate alpha to 60%
		local to_color = gui.get_color(node)
		to_color.w = 0.6
		gui.animate(node, gui.PROP_COLOR, to_color, gui.EASING_OUTCUBIC, 2.4, 0.1)
	end
end

local function anim4(self, node)
	-- animate scale to 100%
	local s = 1
	gui.animate(node, gui.PROP_SCALE, vmath.vector4(s, s, s, 0), gui.EASING_INOUTCUBIC, 0.24, 0, anim5)
end

local function anim3(self, node)
	-- animate scale to 106%
	local s = 1.06
	gui.animate(node, gui.PROP_SCALE, vmath.vector4(s, s, s, 0), gui.EASING_INOUTCUBIC, 0.24, 0, anim4)
end

local function anim2(self, node)
	-- animate scale to 98%
	local s = 0.98
	gui.animate(node, gui.PROP_SCALE, vmath.vector4(s, s, s, 0), gui.EASING_INOUTCUBIC, 0.24, 0, anim3)
end

local function anim1(node, d)
	-- set scale to 70%
	local start_scale = 0.7
	gui.set_scale(node, vmath.vector4(start_scale, start_scale, start_scale, 0))

	-- get current color and set alpha to 0 to fade up
	local from_color = gui.get_color(node)
	local to_color = gui.get_color(node)
	from_color.w = 0
	gui.set_color(node, from_color)

	-- animate alpha value from 0 to 1
	gui.animate(node, gui.PROP_COLOR, to_color, gui.EASING_INOUTCUBIC, 0.4, d)

	-- animate scale from %70 to 110%
	local s = 1.1
	gui.animate(node, gui.PROP_SCALE, vmath.vector4(s, s, s, 0), gui.EASING_INOUTCUBIC, 0.4, d, anim2)
end

function init(self)
	-- start animations for all nodes
	-- background, button-boxes and text are animated equally
	-- d is the animation start delay
	local d = 0.4
	anim1(gui.get_node("new_game"), d)
	anim1(gui.get_node("new_game_shadow"), d)
	anim1(gui.get_node("new_game_button"), d)

	d = 0.3
	anim1(gui.get_node("quit"), d)
	anim1(gui.get_node("quit_shadow"), d)
	anim1(gui.get_node("quit_button"), d)

	d = 0.1
	anim1(gui.get_node("background"), d)
end