Fade out frame near edge

Help and Feedback Scripting Support
#1

I am making a parallax sight for VR, and I am wondering how I would start to fade out an ImageLabel when it’s near the edge of the parenting Frame.

What I want to achieve:

What I have so far:

I just need to detect how close the reticle is to any edge of the frame.

#2

I figured it out with a bit of research, experimenting, and ChatGPT explaining some things

Here is the module I made for it:

local module = {}

function getClosestEdge(frame: ScreenGui, point)
	local framePos = frame.AbsolutePosition
	local frameSize = frame.AbsoluteSize

	local leftEdge = framePos
	local rightEdge = framePos + Vector2.new(frameSize.X, 0)
	local topEdge = framePos
	local bottomEdge = framePos + Vector2.new(0, frameSize.Y)

	local function distanceToPoint(edge, edgeVertical)
		if edgeVertical then
			return math.abs(point.X - edge.X)
		else
			return math.abs(point.Y - edge.Y)
		end
	end

	local function closestDistanceToEdge(edge, edgeVertical)
		if edgeVertical then
			return math.min(
				distanceToPoint(edge, true),
				distanceToPoint(edge + Vector2.new(frameSize.X, 0), true)
			)
		else
			return math.min(
				distanceToPoint(edge, false),
				distanceToPoint(edge + Vector2.new(0, frameSize.Y), false)
			)
		end
	end

	local minDistance = math.huge
	local closestEdge = nil
	local isVertical = true

	local leftDistance = closestDistanceToEdge(leftEdge, true)
	local rightDistance = closestDistanceToEdge(rightEdge, true)
	if leftDistance < minDistance then
		minDistance = leftDistance
		closestEdge = "Left"
		isVertical = true
	end
	if rightDistance < minDistance then
		minDistance = rightDistance
		closestEdge = "Right"
		isVertical = true
	end

	local topDistance = closestDistanceToEdge(topEdge, false)
	local bottomDistance = closestDistanceToEdge(bottomEdge, false)
	if topDistance < minDistance then
		minDistance = topDistance
		closestEdge = "Top"
		isVertical = false
	end
	if bottomDistance < minDistance then
		minDistance = bottomDistance
		closestEdge = "Bottom"
		isVertical = false
	end

	return closestEdge, minDistance
end

function module.new(frame: Frame,fadePoint: number,gui)
	local self = {}
	
	gui = gui or frame.Parent
	local size = gui.AbsoluteSize
	local sx,sy = size.X,size.Y
	local fadePoint = 0.2
	
	function self:Get()
		local pos = frame.AbsolutePosition
		local edge,distance = getClosestEdge(gui,pos)

		local percent = 0

		if edge == "Left" then
			local fadeDistance = sx*fadePoint
			if distance <= fadeDistance then
				percent = distance/fadeDistance
			end
			if distance >= (sx-fadeDistance) then
				percent = distance/(sx-fadeDistance)
			end
		else
			local fadeDistance = sy*fadePoint
			if distance <= fadeDistance then
				percent = distance/fadeDistance
			end
			if distance >= (sy-fadeDistance) then
				percent = distance/(sy-fadeDistance)
			end
		end
		
		local transparency = 0

		if percent ~= 0 then
			transparency = 1-percent
		else
			transparency = 0
		end
		
		return transparency
	end
	
	return self
end

return module
1 Like