Trouble with creating a functional level bar

[pogh10]

Hello I am trying to make a level bar for this shitty leveling system I made. I was able to make the bar and everything. Yes, it works but not correctly. I am trying to make it widen more when you experience, but I am not sure how to mathmatically write this. I simply want the red filling (which represents the player's xp out of the amount of xp needed to level up) to widen more when you get xp. Below is the code for the bar:

	draw.RoundedBoxEx(4,ScrW() / 1.86,ScrH() - 13,235,10,Color(0,0,0,100), true, true, false, false)	


     local xp = 0

    if LocalPlayer():getChar() then
        xp = LocalPlayer():getChar():getData("EXP")
    end

    local lvl = 0

    if LocalPlayer():getChar() then
        lvl = LocalPlayer():getChar():getData("Level")
    end
	
	local curLvlXP = (200 * 4 * (lvl) + lvl * 200)
	local xprequired = 0
	if LocalPlayer():getChar() then
	xprequired = math.Clamp((xp - curLvlXP) / ((200 * 4 * (lvl + 1) + lvl * 200) - curLvlXP), 0, 1)

	end	
	
	local levelbar = {{ },{ },{ },{ }}


	--xprequired bar

	
	levelbar[1]["x"] = ScrW() / 1.83
	levelbar[1]["y"] = ScrH() - 11
	
	levelbar[2]["x"] = ScrW() / 1.83 + (xp / (200 * 4 * (lvl + 1) + lvl * 200) * 50)
	levelbar[2]["y"] = ScrH() - 11
 
	levelbar[3]["x"] = ScrW() / 1.83 + (xp / (200 * 4 * (lvl + 1) + lvl * 200) * 50)
	levelbar[3]["y"] = ScrH() - 5
	
	levelbar[4]["x"] = ScrW() / 1.83
	levelbar[4]["y"] = ScrH() - 5		


		surface.SetDrawColor(255,0,0,190)
		surface.DrawPoly(levelbar)
		draw.DrawText("EXP: " .. xp .. " / " .. (200 * 4 * (lvl + 1) + lvl * 200),"BudgetLabel",ScrW()/1.59,ScrH() - 17,Color(255,255,255,255),TEXT_ALIGN_CENTER)
		draw.DrawText("Level: " .. lvl,"BudgetLabel",ScrW()/2,ScrH() - 17,Color(255,255,255,255),TEXT_ALIGN_CENTER)

All help is well appreciated and thank you in advanced!

[Pyro-Fire]

Why are you using a poly to draw a box?

Anyway, it looks something like this

[lua]
local curXP = 5
local maxXPperLevel = 20

local maxlen = 50
local curlen = (curXP / maxXPperLevel) * maxlen

DrawBox( 0,0,maxlen,5 ) -- x,y,w,h
DrawBox( 0,0,curlen,5 ) -- x,y,w,h
[/lua]

[SirRanjid]

Can you specify the widening?

Does it refer to the progres bar being animated to the new value or do you want a widening animation that just visually indicates that you got xp or whatever?

Or can you make a quick and dirty screenshot with arrows in paint to show what you mean?

[pogh10]

[url]https://gyazo.com/7e3c009033cc680940faa5da58360487[/url]

The red bar is the level bar. It's not moving to the right very much. Keep in mind that it does move just not a lot.

[editline]6th June 2017[/editline]

[QUOTE=Pyro-Fire;52318127]Why are you using a poly to draw a box?

Anyway, it looks something like this

[lua]
local curXP = 5
local maxXPperLevel = 20

local maxlen = 50
local curlen = (curXP / maxXPperLevel) * maxlen

DrawBox( 0,0,maxlen,5 ) -- x,y,w,h
DrawBox( 0,0,curlen,5 ) -- x,y,w,h
[/lua][/QUOTE]

I am using poly to draw a box because roundbox was giving me issues. For some reason it was conflicting with something in the framework and not working properly.

[editline]6th June 2017[/editline]

Sorry to spam up the forum but I've made progress!

	draw.RoundedBoxEx(4,ScrW() / 1.86,ScrH() - 13,235,10,Color(0,0,0,100), true, true, false, false)	

		 local xp = 0

    if LocalPlayer():getChar() then
        xp = LocalPlayer():getChar():getData("EXP")
    end

    local lvl = 0

    if LocalPlayer():getChar() then
        lvl = LocalPlayer():getChar():getData("Level")
    end
	
	local curLvlXP = (200 * 4 * (lvl) + lvl * 200)
	local xprequired = 0
	if LocalPlayer():getChar() then
	xprequired = math.Clamp((xp - curLvlXP) / ((200 * 4 * (lvl + 1) + lvl * 200) - curLvlXP), 0, .9)

	end	


	local levelbar = {{ },{ },{ },{ }}



	
	levelbar[1]["x"] = ScrW() / 1.83
	levelbar[1]["y"] = ScrH() - 11
	
	levelbar[2]["x"] = ScrW() / 1.83 + (xp / xprequired)
	levelbar[2]["y"] = ScrH() - 11
 
	levelbar[3]["x"] = ScrW() / 1.83 + (xp / xprequired)
	levelbar[3]["y"] = ScrH() - 5
	
	levelbar[4]["x"] = ScrW() / 1.83
	levelbar[4]["y"] = ScrH() - 5	

The issue I'm having is the stupid level bar extending way past my screen for some reason. Below is a screenshot:

[url]https://gyazo.com/26b7d7a4e9ce77fb54d6ac99effe9909[/url]