Making a Click-Increase frame size battle system

Hello developers, I’ve been trying to make a system where the Player would battle an NPC based on their power (A UI pops that has a Red frame inside it a green frame that it’s size property is increased from right to the center). When the player clicks his mouse it would increase the frame size (based on the player power VS the NPC power on the green frame) and every 3 seconds the NPC would also decrease the green frame based on the NPC power VS the player power.

The problem I’m facing is calculating how much the frame would increase/decrease. My current code covers all the functions/events. If anyone could help me with the math system It’d be really appreciated.

I’m trying to replicate the bar system as this game.

Code:

local module = {}

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local RepModules = require(ReplicatedStorage:WaitForChild("Modules"))

local MainUI = script.Parent.Parent
local Formatter = require(RepModules:WaitForChild("Formatter"))

local RaceUI = MainUI.BottomUI.RaceUI

local Race = workspace:WaitForChild("Race")
local Camera = workspace.CurrentCamera


function module.StartRace(Player, NPC, NPCPower)
	 

	local PlayerClone = Player.Character:Clone()
	local NpcCharacter = NPC:Clone()

	PlayerClone.PrimaryPart.Position = Race:WaitForChild("PlayerPos").Position
	NpcCharacter.PrimaryPart.Position = Race:WaitForChild("NPCPos").Position
	
	
	NpcCharacter.Parent = workspace
	PlayerClone.Parent = workspace
	
	
	Camera.CameraType = Enum.CameraType.Scriptable
	Camera.CFrame = workspace.Race.CameraPos.CFrame
	
	MainUI.BottomUI.RaceUI.Visible = true
	MainUI.BottomUI.RaceUI.NPCHolder.BikeAmount.Text = Formatter:FormatNumber(tostring(NPC:WaitForChild("NPCPower").Value))
	
	MainUI.BottomUI.RaceUI.NPCHolder.BikeAmount.Text = Formatter:FormatNumber(tostring(Player:WaitForChild("leaderstats").Speed.Value))
	
	 
	Player:GetMouse().Button2Down:Connect(function()
		-- Increase the Frame 
	end)
	
	task.spawn(function()
		while task.wait(3) do
			-- Decrease the Frame
		end
	end)
end

 
return module

1 Like

Hey there!

I’d say the first few steps would be leaning towards Calculation functions. What you’ll need:

Player Power Percentage: (PlayerPower / MaxPower) * 100
NPC Power Percentage:(BotPower / MaxPower) * 100`

Creating a function for both, and assigning the decrease/Increase variable within your task.spawn respectively.

1 Like

Hello! Do you mean something like this?

function module.DecreaseFrame(PlayerPower, NPCPower)
	RaceUI.Green.Size -= UDim2.new((NPCPower/PlayerPower)*100,0,1,0)
end


function module.IncreaseFrame(PlayerPower, NPCPower)
	RaceUI.Green.Size += UDim2.new((PlayerPower/NPCPower)*100,0,1,0)
end

1 Like

That’s exactly what I mean!

Be sure to normalize the values before creating the UDim2 values.

local decreasePercentage = NPCPower/PlayerPower
RaceUI.Green.Size = RaceUI.Green.Size - UDim2.new(decreasePercentage, 0, 1, 0)
1 Like

Super sorry for the late response but it apparently breaks the UI, I printed the IncreasePercentage variable and it returned me a number bigger than 1:

Here is the code for the increasing system:

function module.IncreaseFrame(PlayerPower, NPCPower)
	local IncreasePercentage = PlayerPower/NPCPower
	
	print(IncreasePercentage)
	MainUI.RaceBar.Red.Green.Size = MainUI.RaceBar.Red.Green.Size + UDim2.new(IncreasePercentage, 0, 1, 0)
end
function module.IncreaseFrame(PlayerPower, NPCPower)
    local IncreasePercentage = PlayerPower / NPCPower
    IncreasePercentage = math.min(IncreasePercentage, 1) -- clamp the value to a maximum of 1
    
    print(IncreasePercentage)
    MainUI.RaceBar.Red.Green.Size = MainUI.RaceBar.Red.Green.Size + UDim2.new(IncreasePercentage, 0, 0, 0) -- Assuming you want to increase the width, change '1' to '0'
end

What does increasePercentage output?

1 Like

Now it prints exactly 1 and it’s size increased from left to right.
image

Any help would be appreciated.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.