Jump to content

[HELP] Calculate a color red to yellow to green based on scroll 0 to 200


TrapiS

Recommended Posts

For starters, sorry for the mistakes in English, I'm from Brazil.

I am trying to create a Freeroam in DX with the theme of Forza Horizon, in this freeroam I am creating a system of reputation of the player, of standard the reputation will be 100 points a neutral reputation, as it makes friendships within the server the reputation of it will rise, being able go up to 200 points, but if he arranges many discussions between players, his reputation will be decreased and can reach up to 0.

https://prnt.sc/ktm4bc

I wanted to make the "neutral (100)" string change color according to its reputation, being 0 red, 100 yellow, and 200 green, and the space between 0 and 100 is a mixture between red and yellow and so on but I do not know where I could start to make it work.
Could someone help me by showing me some calculation bases or functions that I can use?

Note: I am not using anything gui in the panel, everything being done in dx.

Link to comment

Hi, I think the best option would be to use an image instead of dx function.. you can still create the arrow and text with dx functions, but the base gradient would be an image. If you really want to use pure dx, I put together some code that would create the same gradient effect using dxGetTexturePixelsdxSetPixelColorinterpolateBetween

See code below:

addEventHandler ("onClientResourceStart", resourceRoot, 
    function () 
        texture = dxCreateTexture (300, 25)
        local pixels = dxGetTexturePixels (texture)
        for i=0,300 do	 
			local progress = 100 / 300 * i / 100
			local r, g, b = interpolateBetween ( 255, 0, 0, 255, 255, 0, progress, "Linear")
            for j=0,25 do
                dxSetPixelColor (pixels, i, j, r, g, b, 255)
            end
        end
        dxSetTexturePixels (texture, pixels)
		texture2 = dxCreateTexture (600, 25)
        local pixels2 = dxGetTexturePixels (texture2)
        for i=0,300 do	 
			local progress = 100 / 300 * i / 100
			local r, g, b = interpolateBetween ( 255, 255, 0, 0, 255, 0, progress, "Linear")
            for j=0,25 do
                dxSetPixelColor (pixels2, i, j, r, g, b, 255)
            end
        end
        dxSetTexturePixels (texture2, pixels2)
	end)

addEventHandler ("onClientRender", root,
    function ()
         dxDrawImage (300, 300, 300, 25, texture)
		 dxDrawImage (600, 300, 300, 25, texture2)
    end)
	
	
	
	

If you need explanation let me know, I can go into detail, but I think it's pretty straight forward. 

Link to comment

Thanks for the answer.

I've already created the gradient texture for the reputation bar, but I'm not sure how to get it to see the color code in a specific position that would be the position where the bookmark would be, I'd have to use dxCreateTexture and dxGetTexturePixels for this?

Gradient Texture:

https://prnt.sc/ktpkoh

Part of the reputation code:


dxDrawText("Sua reputação: " .. localPlayer:getData("reputation_rank") .. "(" .. localPlayer:getData("reputation") .. ")", 1115 + 1, 440 + 1, 1605 + 1, 465 + 1, tocolor(50, 50, 50, 100), 0.60, g_MenuSettings['default']['text']['font_c'], "left", "center", false, false, true, true)
dxDrawText("Sua reputação: #FFC800" .. localPlayer:getData("reputation_rank") .. "(" .. localPlayer:getData("reputation") .. ")", 1115, 440, 1605, 465, tocolor(50, 50, 50), 0.60, g_MenuSettings['default']['text']['font_c'], "left", "center", false, false, true, true)
dxDrawLine(1110 - 1, 485 - 1, 1110 - 1, 500, tocolor(200, 200, 200), 1, true)
dxDrawLine(1590, 485 - 1, 1110 - 1, 485 - 1, tocolor(200, 200, 200), 1, true)
dxDrawLine(1110 - 1, 500, 1590, 500, tocolor(200, 200, 200), 1, true)
dxDrawLine(1590, 500, 1590, 485 - 1, tocolor(200, 200, 200), 1, true)
dxDrawImage(1110, 485, 480, 15, "assets/buttons/tab1_reputation.png", 0, 0, 0, tocolor(255, 255, 255), true)

 

Link to comment

I made function for you. so from this function you get both of red, green ( Use it with RGB System )
 

function netural( rep )
	local red, green;
	local m_rgb = 255;
	if( rep == 100 )then
		red = m_rgb
		green = m_rgb
	elseif( rep < 100 )then
		red = m_rgb
		green = math.ceil ( ( rep * 2.55 ) )
	elseif( rep > 100 )then
		red = 255 - math.ceil ( ( rep - 100 ) * 2.55 )
		green = m_rgb
	end
	return red, green;
end

 

Edited by iMr.WiFi..!
Link to comment

I'm not 100% sure I understand what you are looking for, but as far as I can understand, you want to get the color code of a specific percentage.. for example you have a scale of 0-500 reputation, you would need to know the color when the player for example has 350 reputation?

Link to comment
local screenX, screenY = guiGetScreenSize()

local repBarTexture = dxCreateTexture("reputation.png")
local barWidth, barHeight = dxGetMaterialSize(repBarTexture)

local maxRep = 200
local currentRep = 100
local repBarPosX = currentRep * (barWidth - 1) / maxRep

local repBarPixels = dxGetTexturePixels(repBarTexture)
local r, g, b = dxGetPixelColor(repBarPixels, math.floor(repBarPosX), barHeight / 2)

outputChatBox("HEX: " .. string.format("#%.2X%.2X%.2X", r, g, b) .. ", R: " .. r .. ", G: " .. g .. ", B: " .. b)

local barX = (screenX - barWidth) / 2
local barY = (screenY - barHeight) / 2

addEventHandler("onClientRender", getRootElement(),
	function ()
		dxDrawImage(barX, barY, barWidth, barHeight, repBarTexture)

		dxDrawRectangle(barX + repBarPosX - 2, barY - 3, 4, barHeight + 6, tocolor(255, 255, 255))
	end
)

 

Link to comment

Thanks everyone for the help, but I've already managed to achieve the result I expected using the interpolateBetween function to calculate the color values

local multiplier = sX/820
local scrollPosition = localPlayer:getData("reputation")*multiplier
local progress = 100 / (200*multiplier) * scrollPosition / 100
if progress <= 0.5 then
  rR, rG, rB = interpolateBetween(255, 0, 25, 255, 200, 0, progress*2, "Linear")
elseif progress > 0.5 then
  rR, rG, rB = interpolateBetween(255, 200, 0, 0, 255, 25, progress-0.5, "Linear")
end
local hex = RGBToHex(rR, rG, rB)

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...