[HELP] NFS:MW Selecting Effect

[Hydra]

Hello, can someone give me an example on how I could make this effect?

I tried to do it but without success, can't figure it out how to make it to be like in the video above

[FlorinSzasz]

Well i dont know if this might help you but if u mean something like this i can give u some ideas i think, also i used

dxDrawImage()
dxDrawRectangle()

https://drive.google.com/drive/folders/1vF7AlP8S1ggWoi7DZa60vZRxWRLnzDlQ?usp=sharing

 

Edited March 4, 2023 by FlorinSzasz

[Hydra]

43 minutes ago, FlorinSzasz said:

Well i dont know if this might help you but if u mean something like this i can give u some ideas i think, also i used

dxDrawImage()
dxDrawRectangle()

https://drive.google.com/drive/folders/1vF7AlP8S1ggWoi7DZa60vZRxWRLnzDlQ?usp=sharing

 

I know about drawing functions, i don't know how to make the effect to be exactly like in the video

[Molvine]

Hello! I tried to do something similar, but even without animation, the code came out hard to read. I'm sure it's not optimal, but at least it works.

Sorry, but my knowledge is hardly enough to create an animation. But I can try if you still need it!

Video: 

Code:

local image = dxCreateTexture(":nfsmw/assets/icon.png")
local selected = 1
local count = 5
local elementOffset = 10*scaleValue --padding between items in a menu list

local w, h = 100*scaleValue, 100*scaleValue
local offsetX, offsetY = 550*scaleValue, 50*scaleValue
local x, y = getScreenStartPositionFromBox(w, h, offsetX, offsetY, "right", "bottom")

function render()
	local selectedPos = x
	for i=1, count do
		local difference = i-selected --get the difference between the selected element and the rendered element
		local differenceCopy = difference


		if difference < 0 then differenceCopy = -difference end
		local height = h - (differenceCopy*20*scaleValue) --here we decrease the size as we move away from the selected element
		local width = w - (differenceCopy*20*scaleValue)

		local offset = 0
		local step = 1
		if difference < 0 then step = -step end
		if difference ~= 0 then
			for k=0, difference, step do --the loop calculates the offset using the width for each element. I didn't come up with a formula how to calculate it without a loop
				offset = offset + (20*scaleValue)*k
			end
		end
		if difference > 0 then offset = offset - 20*scaleValue*differenceCopy end --if the element is further than the selected one, then we decrease the offset by one point. without it, elements after the selected one have an offset one point less than required

		local xImage = selectedPos + (w*difference) - offset + 10*scaleValue*difference --the actual position of the x-axis of the element
		local yImage = y+(h-height)/2 --the actual y-axis position of the element

		local alpha = 255 - 100*(differenceCopy) --transparency decreases with distance from the selected element
		if alpha < 0 then alpha = 0 end

		dxDrawImage(xImage, yImage, width, height, image, _, _, tocolor(255,255,255,alpha)) --element rendering
	end
end

function startRender()
	addEventHandler("onClientRender", root, render)
end
startRender()

function selectElementInMenu(key, keyState, turn) --element select function
	if turn == "right" then
		if selected >= count then
			selected = count
			return
		end
		selected = selected + 1
	elseif turn == "left" then
		if selected <= 1 then
			selected = 1
			return
		end
		selected = selected - 1
	end
end
bindKey("o", "up", moveMenu, "right")
bindKey("i", "up", moveMenu, "left")

[Hydra]

10 hours ago, Molvine said:

Hello! I tried to do something similar, but even without animation, the code came out hard to read. I'm sure it's not optimal, but at least it works.

Sorry, but my knowledge is hardly enough to create an animation. But I can try if you still need it!

Video: 

Code:

local image = dxCreateTexture(":nfsmw/assets/icon.png")
local selected = 1
local count = 5
local elementOffset = 10*scaleValue --padding between items in a menu list

local w, h = 100*scaleValue, 100*scaleValue
local offsetX, offsetY = 550*scaleValue, 50*scaleValue
local x, y = getScreenStartPositionFromBox(w, h, offsetX, offsetY, "right", "bottom")

function render()
	local selectedPos = x
	for i=1, count do
		local difference = i-selected --get the difference between the selected element and the rendered element
		local differenceCopy = difference


		if difference < 0 then differenceCopy = -difference end
		local height = h - (differenceCopy*20*scaleValue) --here we decrease the size as we move away from the selected element
		local width = w - (differenceCopy*20*scaleValue)

		local offset = 0
		local step = 1
		if difference < 0 then step = -step end
		if difference ~= 0 then
			for k=0, difference, step do --the loop calculates the offset using the width for each element. I didn't come up with a formula how to calculate it without a loop
				offset = offset + (20*scaleValue)*k
			end
		end
		if difference > 0 then offset = offset - 20*scaleValue*differenceCopy end --if the element is further than the selected one, then we decrease the offset by one point. without it, elements after the selected one have an offset one point less than required

		local xImage = selectedPos + (w*difference) - offset + 10*scaleValue*difference --the actual position of the x-axis of the element
		local yImage = y+(h-height)/2 --the actual y-axis position of the element

		local alpha = 255 - 100*(differenceCopy) --transparency decreases with distance from the selected element
		if alpha < 0 then alpha = 0 end

		dxDrawImage(xImage, yImage, width, height, image, _, _, tocolor(255,255,255,alpha)) --element rendering
	end
end

function startRender()
	addEventHandler("onClientRender", root, render)
end
startRender()

function selectElementInMenu(key, keyState, turn) --element select function
	if turn == "right" then
		if selected >= count then
			selected = count
			return
		end
		selected = selected + 1
	elseif turn == "left" then
		if selected <= 1 then
			selected = 1
			return
		end
		selected = selected - 1
	end
end
bindKey("o", "up", moveMenu, "right")
bindKey("i", "up", moveMenu, "left")

Thank you so much!