Animated Crosshair Improvements

Help and Feedback Code Review
#1

Hello. I’ve made my first animated crosshair for the third-person gun game, It is really hardcoded in the game but I want to know some general improvements.

My system works on tweening crosshair parts when needed, it uses a module to know where to tween parts and when.

Main Code:

local Player = game.Players.LocalPlayer

local UserInputService = game:GetService("UserInputService")

local MouseStates = require(script.MouseStates)

local MouseCrosshairUI = Player.PlayerGui:WaitForChild("MouseCrosshair")

local UpLine = MouseCrosshairUI.UpLine
local DownLine = MouseCrosshairUI.DownLine
local RightLine = MouseCrosshairUI.RightLine
local LeftLine = MouseCrosshairUI.LeftLine

local tweenTime = 0.1

local currentState 

UserInputService.MouseIconEnabled = false


local isAiming = false


local function setMouseState(state)
	local Directions = MouseStates[state]
	currentState = state
	
	local TweenService = game:GetService("TweenService")
	
	TweenService:Create(UpLine, TweenInfo.new(tweenTime), {Position = Directions["UpLine"]}):Play()
	TweenService:Create(DownLine, TweenInfo.new(tweenTime), {Position = Directions["DownLine"]}):Play()
	TweenService:Create(RightLine, TweenInfo.new(tweenTime), {Position = Directions["RightLine"]}):Play()
	TweenService:Create(LeftLine, TweenInfo.new(tweenTime), {Position = Directions["LeftLine"]}):Play()
	
	if state == "NOT_AIMING" then
		TweenService:Create(MouseCrosshairUI.CenterPoint, TweenInfo.new(tweenTime),{Size = UDim2.new(0, 2,0, 2)}):Play()
	elseif state == "AIMING" then
		TweenService:Create(MouseCrosshairUI.CenterPoint, TweenInfo.new(tweenTime),{Size = UDim2.new(0, 1,0, 1)}):Play()
	end
	
	print("DONE")
end

local function shootEffect()
	if currentState == "AIMING" then
		
		local Directions = MouseStates["SHOOTING"]
		
		local TweenService = game:GetService("TweenService")
		
		local shootTweenTime = 0.1
		
		TweenService:Create(UpLine, TweenInfo.new(shootTweenTime), {Position = Directions["UpLine"]}):Play()
		TweenService:Create(DownLine, TweenInfo.new(shootTweenTime), {Position = Directions["DownLine"]}):Play()
		TweenService:Create(RightLine, TweenInfo.new(shootTweenTime), {Position = Directions["RightLine"]}):Play()
		TweenService:Create(LeftLine, TweenInfo.new(shootTweenTime), {Position = Directions["LeftLine"]}):Play()
		
		wait(0.1)
		
		if isAiming then
			setMouseState("AIMING")
		else
			setMouseState("NOT_AIMING")
		end
	else
		local Directions = MouseStates["SHOOTING_NOTAIMING"]

		local TweenService = game:GetService("TweenService")

		local shootTweenTime = 0.1

		TweenService:Create(UpLine, TweenInfo.new(shootTweenTime), {Position = Directions["UpLine"]}):Play()
		TweenService:Create(DownLine, TweenInfo.new(shootTweenTime), {Position = Directions["DownLine"]}):Play()
		TweenService:Create(RightLine, TweenInfo.new(shootTweenTime), {Position = Directions["RightLine"]}):Play()
		TweenService:Create(LeftLine, TweenInfo.new(shootTweenTime), {Position = Directions["LeftLine"]}):Play()

		wait(0.1)

		if isAiming then
			setMouseState("AIMING")
		else
			setMouseState("NOT_AIMING")
		end
	end
end


setMouseState("NOT_AIMING")

UserInputService.InputBegan:Connect(function(input,handledByGame)
	if handledByGame then return end
	
	if input.UserInputType == Enum.UserInputType.MouseButton2 then
		isAiming = true
		setMouseState("AIMING")
	elseif input.UserInputType == Enum.UserInputType.MouseButton1 then
		shootEffect()
	end
end)

UserInputService.InputEnded:Connect(function(input,handledByGame)
	if handledByGame then return end

	if input.UserInputType == Enum.UserInputType.MouseButton2 then
		isAiming = false
		setMouseState("NOT_AIMING")
	end
end)

Module Code:

return {
	["NOT_AIMING"] = {
		["DownLine"] = UDim2.new(0.5, 0,0.57, 0);
		["UpLine"] = UDim2.new(0.5, 0,0.43, 0);
		["RightLine"] = UDim2.new(0.53, 0,0.5, 0);
		["LeftLine"] = UDim2.new(0.47, 0,0.5, 0);
	};
	["AIMING"] = {
		["DownLine"] = UDim2.new(0.5, 0,0.51, 0);
		["UpLine"] = UDim2.new(0.5, 0,0.49, 0);
		["RightLine"] = UDim2.new(0.505, 0,0.5, 0);
		["LeftLine"] = UDim2.new(0.496, 0,0.5, 0);
	};
	["SHOOTING"] = {
		["DownLine"] = UDim2.new(0.5, 0,0.52, 0);
		["UpLine"] = UDim2.new(0.5, 0,0.48, 0);
		["RightLine"] = UDim2.new(0.51, 0,0.5, 0);
		["LeftLine"] = UDim2.new(0.49, 0,0.5, 0);
	};
	["SHOOTING_NOTAIMING"] = {
		["DownLine"] = UDim2.new(0.5, 0,0.59, 0);
		["UpLine"] = UDim2.new(0.5, 0,0.41, 0);
		["RightLine"] = UDim2.new(0.54, 0,0.5, 0);
		["LeftLine"] = UDim2.new(0.46, 0,0.5, 0);
	};
}

Video:
https://gyazo.com/892f6db6c1b477d1617655abd5df2f0a

Thanks for responding.

1 Like
#2

Do you designed the crosshair to be rectangle? I haven’t seen a game uses rectangle crosshair.
And it’s size will change with the screen size.

#3

What? I don’t understand you really

#4

Uhh, this is quite hard to describe how your crosshair is different than other game.

#5

Send image of another game crosshair?

#6

image
I mean the crosshair usually look like this, your crosshair looks 1.5 times wider than this picture.

And I bet your crosshair’s size changes with the shape of player’s screen, because you are using Scale instead off offset.

#7

Well I use my own graphics, I did not wanted this for my game I wanted some code improvemt

#9

This should be on code review since it works and not scripting support as you dont have bugs