Don't even know where to start

Hi,

The code in my crosshair module is so messy it’s making my head hurt and I don’t even know where to start to clean it. It is functional though just a big headache to look at, if anyone reading this could help me I would greatly appreciate it!

--!nocheck
local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local UserInputService = game:GetService("UserInputService")

local Packages = ReplicatedStorage.Packages
local Shared = ReplicatedStorage.Source.Shared

local Knit, Fusion = require(Packages.Knit), require(Packages.Fusion)

local Children, Scoped, Peek = Fusion.Children, Fusion.scoped, Fusion.peek
local Mouse = Players.LocalPlayer:GetMouse()
local Scope = Scoped(Fusion, {})

local Hovering = Scope:Value(nil)
local Indicate = Scope:Value(nil)
local Triggered = Scope:Value(nil)

local LastInstance, Thread = nil :: Instance?, nil :: thread?

local Character = Players.LocalPlayer.Character or Players.LocalPlayer.CharacterAdded:Wait()
local Params = RaycastParams.new()
Params.FilterDescendantsInstances = { workspace.CurrentCamera, Character }
Params.FilterType = Enum.RaycastFilterType.Exclude

local DISTANCE = 10
local TAG = "Interactable"
local ATTRIBUTE = "Interaction"

local CrosshairController = Knit.CreateController({
	Name = script.Name,
})

local Hitbox = Scope:New("Frame")({
	Name = "Hitbox",
	AnchorPoint = Vector2.new(0.5, 0.5),
	Position = UDim2.fromScale(0.5, 0.5),
	Size = UDim2.fromScale(0.052, 0.093),
	BackgroundTransparency = 1,
	BackgroundColor3 = Color3.fromRGB(255, 0, 0),
}) :: Frame

local function IndicateCrosshair(Color: string)
	Thread = task.spawn(function()
		Indicate:set(Color)
		task.wait(0.2)
		Indicate:set(nil)
		task.defer(task.cancel, Thread)
	end)
end

function onMouseMove()
	local HitboxPosition, HitboxSize = Hitbox.AbsolutePosition, Hitbox.AbsoluteSize
	local HitboxRay = workspace.CurrentCamera:ScreenPointToRay(
		HitboxPosition.X + (HitboxSize.X / 2),
		HitboxPosition.Y + (HitboxSize.Y / 2)
	)

	local Result = workspace:Raycast(HitboxRay.Origin, HitboxRay.Direction * DISTANCE, Params) :: RaycastResult?

	if not Result then
		Hovering:set(nil)
		return
	end

	if table.find(Result.Instance:GetTags(), TAG) or table.find(Result.Instance.Parent:GetTags(), TAG) then
		Hovering:set(true)
		LastInstance = Result.Instance
	else
		Hovering:set(nil)
	end
end

function onTriggered()
	if not Peek(Hovering) then
		return
	end

	if Peek(Triggered) then
		IndicateCrosshair("Red")
		return
	end

	IndicateCrosshair("Green")

	local Module = LastInstance:GetAttribute(ATTRIBUTE)

	if not Module then
		return
	end

	require(Shared.Interactions[Module])(Character, Triggered)
end

function onTouchTap(_: { any }, gameProcessedEvent: boolean)
	if gameProcessedEvent then
		return
	end

	onTriggered()
end

function onMouseClick(input: InputObject, gameProcessedEvent: boolean)
	if gameProcessedEvent then
		return
	end

	if input.UserInputType == Enum.UserInputType.MouseButton1 then
		onTriggered()
	end
end

function onCharacterAdded(character: Model)
	Character = character
end

function CrosshairController.KnitStart()
	Scope:New("ScreenGui")({
		Parent = Players.LocalPlayer.PlayerGui,

		Name = "Crosshair",
		IgnoreGuiInset = true,
		ResetOnSpawn = false,

		[Children] = {
			Scope:New("ImageLabel")({
				Image = "rbxassetid://73841793564647",
				AnchorPoint = Vector2.new(0.5, 0.5),
				Position = UDim2.fromScale(0.5, 0.5),

				ImageColor3 = Scope:Tween(
					Scope:Computed(function(use)
						if use(Indicate) == "Green" then
							return Color3.fromRGB(85, 255, 127)
						end

						if use(Indicate) == "Red" then
							return Color3.fromRGB(244, 63, 63)
						end

						if not use(Indicate) then
							return Color3.new(1, 1, 1)
						end
					end),
					TweenInfo.new(0.2, Enum.EasingStyle.Quint)
				),

				Size = Scope:Tween(
					Scope:Computed(function(use)
						if use(Hovering) then
							return UDim2.fromScale(0.019 + 0.005, 0.28 + 0.005)
						else
							return UDim2.fromScale(0.019, 0.28)
						end
					end),
					TweenInfo.new(0.3, Enum.EasingStyle.Quint)
				),

				BackgroundTransparency = 1,

				ImageTransparency = Scope:Tween(
					Scope:Computed(function(use)
						if use(Hovering) then
							return 0
						else
							return 0.7
						end
					end),
					TweenInfo.new(0.3, Enum.EasingStyle.Quint)
				),

				[Children] = Scope:New("UIAspectRatioConstraint")({
					AspectType = Enum.AspectType.FitWithinMaxSize,
					AspectRatio = 1,
				}),
			}),

			Hitbox,
		},
	})

	Mouse.Move:Connect(onMouseMove)
	UserInputService.InputBegan:Connect(onMouseClick)
	UserInputService.TouchTap:Connect(onTouchTap)
	Players.LocalPlayer.CharacterAdded:Connect(onCharacterAdded)
end

return CrosshairController

2 Likes

You didn’t write this code did you?

1 Like

I did write this code why? It looks better in devforum though I can’t lie, but in a editor it looks horrible

Well if you did then my apologies.

It was just that you are using both Knit and Fusion which are beyond your average beginner coder but then you’re asking for help on a pretty minor topic (that any dev who is using Knit/Fusion I wouldn’t expect to have any issues with).

The code itself seems pretty decently organized and tidy, so it’s very odd for you to say “The code in my crosshair module is so messy”, then it was even more odd when you said you didn’t even know where to start to clean it.

There are some issues with the code, but I wouldn’t call it messy.

Can you elaborate more on what you mean by messy?

2 Likes

The main thing I found messy was the organization of everything from the variables to the functions

And then you had functions so ugly like this;

local function IndicateCrosshair(Color: string)
	Thread = task.spawn(function()
		Indicate:set(Color)
		task.wait(0.2)
		Indicate:set(nil)
		task.defer(task.cancel, Thread)
	end)
end

next to a function like this:

function onMouseMove()
	local HitboxPosition, HitboxSize = Hitbox.AbsolutePosition, Hitbox.AbsoluteSize
	local HitboxRay = workspace.CurrentCamera:ScreenPointToRay(
		HitboxPosition.X + (HitboxSize.X / 2),
		HitboxPosition.Y + (HitboxSize.Y / 2)
	)

	local Result = workspace:Raycast(HitboxRay.Origin, HitboxRay.Direction * DISTANCE, Params) :: RaycastResult?

	if not Result then
		Hovering:set(nil)
		return
	end

	if table.find(Result.Instance:GetTags(), TAG) or table.find(Result.Instance.Parent:GetTags(), TAG) then
		Hovering:set(true)
		LastInstance = Result.Instance
	else
		Hovering:set(nil)
	end
end

It looks good reading it from here but to me it feels cluttered and my ocd kept biting at mebecause of Fusions uncapitalized :set method. Maybe I’m just too much of a perfectionist though

I just wanted to see how other people would change the script and see if I could learn from them.

Also when I posted this I was in like 5 hours of coding and did not feel like doing this my self today lmao

I built on to it and stacked the variables so it looked neat and it looks better even though I only did minor adjustments

--!nocheck

--[[
   CrosshairController.luau
   Sun Nov 02 2025 4:20:28 PM
--]]

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local UserInputService = game:GetService("UserInputService")

local Packages = ReplicatedStorage.Packages
local Controllers = ReplicatedStorage.Source.Controllers

local Knit, Fusion = require(Packages.Knit), require(Packages.Fusion)

local Children, Scoped, Peek = Fusion.Children, Fusion.scoped, Fusion.peek
local Mouse = Players.LocalPlayer:GetMouse()
local Scope = Scoped(Fusion, {})

local Hovering, Indicate, Triggered = Scope:Value(nil), Scope:Value(nil), Scope:Value(nil)
local LastInstance, Thread = nil :: Instance?, nil :: thread?

local Character = Players.LocalPlayer.Character or Players.LocalPlayer.CharacterAdded:Wait()

local Params = RaycastParams.new()
Params.FilterDescendantsInstances = { workspace.CurrentCamera, Character }
Params.FilterType = Enum.RaycastFilterType.Exclude

local DISTANCE = 10
local TAG, ATTRIBUTE, FUNCTION = "Interactable", "Interaction", "Interact"

local CrosshairController = Knit.CreateController({
	Name = script.Name,
})

local Hitbox = Scope:New("Frame")({
	Name = "Hitbox",
	AnchorPoint = Vector2.new(0.5, 0.5),
	Position = UDim2.fromScale(0.5, 0.5),
	Size = UDim2.fromScale(0.052, 0.093),
	BackgroundTransparency = 1,
	BackgroundColor3 = Color3.fromRGB(255, 0, 0),
}) :: Frame

local function IndicateCrosshair(Color: string)
	Thread = task.spawn(function()
		Indicate:set(Color)
		task.wait(0.2)
		Indicate:set(nil)
		task.defer(task.cancel, Thread)
	end)
end

function onMouseMove()
	local HitboxPosition, HitboxSize = Hitbox.AbsolutePosition, Hitbox.AbsoluteSize
	local HitboxRay = workspace.CurrentCamera:ScreenPointToRay(
		HitboxPosition.X + (HitboxSize.X / 2),
		HitboxPosition.Y + (HitboxSize.Y / 2)
	)

	local Result = workspace:Raycast(HitboxRay.Origin, HitboxRay.Direction * DISTANCE, Params) :: RaycastResult?
	
	if not Result then
		Hovering:set(nil)
		return
	end

	if table.find(Result.Instance:GetTags(), TAG) or table.find(Result.Instance.Parent:GetTags(), TAG) then
		Hovering:set(true)
		LastInstance = Result.Instance
		
		if table.find(Result.Instance.Parent:GetTags(), TAG) then
			LastInstance = Result.Instance.Parent
		end
	else
		Hovering:set(nil)
	end
end

function onTriggered()
	if not Peek(Hovering) then
		return
	end

	if Peek(Triggered) then
		IndicateCrosshair("Red")
		return
	end

	IndicateCrosshair("Green")
	
	local Controller = Knit.GetController(LastInstance:GetAttribute(ATTRIBUTE))
	
	for fnName, fnCode in pairs(Controller) do
		if type(Controller[fnName]) ~= "function" then
			continue
		end
		
		if fnName == FUNCTION then -- return instance, character and triggered fusion value.
			Controller[FUNCTION](Controller, LastInstance, Character, Triggered)
		end
	end
end

function onTouchTap(_: { any }, gameProcessedEvent: boolean)
	if gameProcessedEvent then
		return
	end

	onTriggered()
end

function onMouseClick(input: InputObject, gameProcessedEvent: boolean)
	if gameProcessedEvent then
		return
	end

	if input.UserInputType == Enum.UserInputType.MouseButton1 then
		onTriggered()
	end
end

function onCharacterAdded(character: Model)
	Character = character
end

function CrosshairController.KnitStart()
	Scope:New("ScreenGui")({
		Parent = Players.LocalPlayer.PlayerGui,

		Name = "Crosshair",
		IgnoreGuiInset = true,
		ResetOnSpawn = false,

		[Children] = {
			Scope:New("ImageLabel")({
				Image = "rbxassetid://73841793564647",
				AnchorPoint = Vector2.new(0.5, 0.5),
				Position = UDim2.fromScale(0.5, 0.5),

				ImageColor3 = Scope:Tween(
					Scope:Computed(function(use)
						if use(Indicate) == "Green" then
							return Color3.fromRGB(85, 255, 127)
						end

						if use(Indicate) == "Red" then
							return Color3.fromRGB(255, 85, 85)
						end

						if not use(Indicate) then
							return Color3.new(1, 1, 1)
						end
					end),
					TweenInfo.new(0.2, Enum.EasingStyle.Quint)
				),

				Size = Scope:Tween(
					Scope:Computed(function(use)
						if use(Hovering) then
							return UDim2.fromScale(0.019 + 0.005, 0.28 + 0.005)
						else
							return UDim2.fromScale(0.019, 0.28)
						end
					end),
					TweenInfo.new(0.3, Enum.EasingStyle.Quint)
				),

				BackgroundTransparency = 1,

				ImageTransparency = Scope:Tween(
					Scope:Computed(function(use)
						if use(Hovering) then
							return 0
						else
							return 0.7
						end
					end),
					TweenInfo.new(0.3, Enum.EasingStyle.Quint)
				),

				[Children] = Scope:New("UIAspectRatioConstraint")({
					AspectType = Enum.AspectType.FitWithinMaxSize,
					AspectRatio = 1,
				}),
			}),

			Hitbox,
		},
	})

	Mouse.Move:Connect(onMouseMove)
	UserInputService.InputBegan:Connect(onMouseClick)
	UserInputService.TouchTap:Connect(onTouchTap)
	Players.LocalPlayer.CharacterAdded:Connect(onCharacterAdded)
end

return CrosshairController

1 Like