[Solved] LegacyFuel - LUA - Draw Fuel Level

FiveM Resource Development & Modding Discussion
1

Hi,
First, I couldn’t decide between this category or ‘Server Dev / Resource Support’.

My Problem:

Drawing a ‘basic’ Vertical Fuel Level Bar & where to properly put it

My xP Level: Frankenstein’s Monster - The code just works. Thank you to those devs who explain what their lines of code do and the logic behind it.

I’m using Legacy Fuel and SimpleCarHUD - first thought is to ask in those particular topics for help related to the proper resource - but I don’t think this fits into either. Perhaps ask in SimpleCarHUD, but with the help being provided to other members this request seems a bit ‘out there’. Plus, the idea of a bar in the HUD somehow seemed to go directly against what that resource does (simple / text).

I’ve been trying to mess around with DrawRect and currentfuel; getfuel(vehicle); within the SimpleCarHUD resource ( 121 --Draw fuel gauge ), but I know I’m missing a lot for something so ‘simple’. I figured the resource had the info it needed since it draws the text.

My brain knows that this is probably an elementary task, so it shouldn’t be difficult for me, but if any clever individual has an idea how to go about this, I’d greatly appreciate it.

  • Brownie

Edit: Used FRFuel bar style as reference/clarification. A yellow bar that depletes and goes up when filling.
frfuel-alt

Edit: I understand the nuances with working around the mini-map and safezone area. The image is for reference to the end result. The UI element would not be contingent on the mini-map location.

1 Like
2

Were you able to get the Fuel Bar HUD working with Legacy Fuel?

3

No, I wasn’t able to ever figure this out yet. I haven’t had much focus on it either. Had to step away.
The best I can do is give you the only foundation I have which is drawing the Rectangle. Simple. :sweat_smile:

function drawRct(x, y, width, height, r, g, b, a)
    DrawRect(x + width/2, y + height/2, width, height, r, g, b, a)
end

Called inside your loop would be this.

drawRct(0.975, 0.789, 0.005,0.179,0,0,0,100)  -- Fuel Bar In Right Hand Corner

I know it isn’t much, but it’s all I currently have. I’ve picked up other things for creating scripts, but can’t seem to figure this out. I only use LF, so if and when I figure something I’ll let you know.

It might be a more ‘advanced’ LUA thing? But drawing a rectangle shouldn’t be difficult, right? :thinking:

1 Like
4

On what are you struggling exactly ? Drawing the two rectangles ?

5

Correct. I don’t seem to understand yet how to get and use the information with the function.
I’m trying to get the ‘currentFuel’ for the vehicle to be ‘height’. I figured I could ‘GetVehicleFuelLevel’ and draw the data. …I’ll attach what I was messing with.

function drawRct(x, y, width, height, r, g, b, a)
    DrawRect(x + width/2, y + height/2, width, height, r, g, b, a)
end

local inVehicle = false

Citizen.CreateThread(function()
    while true do Citizen.Wait(0)

        local player = GetPlayerPed(-1)
        local vehicle = GetVehiclePedIsIn(player, false)
        local currentFuel = GetVehicleFuelLevel(vehicle)

        if IsPedInAnyVehicle(player, true) then
            printIn()
            inVehicle = true
            drawRct(0.975, 0.789, 0.005,0.173,200,100,200,100)  -- Fuel Level Purple
            drawRct(0.975, 0.789, 0.005,0.050,0,0,0,100)  -- Fuel Bar Black
        else
            inVehicle = false
        end

    end
end)

function printIn()
    if true then
        print('Player is in a vehicle')
        print(currentFuel)
    end
end

This is what I was playing with but stepped away for a while. Currently, the script ‘works’ by drawing placeholders that I put in to see ‘where’ I wanted it at first. Beyond that, I haven’t made the next step.

Edit: Added in the ‘print(currentFuel)’ line. I also have that in, and it returns ‘nil’ after ‘Player is in a vehicle’

1 Like
6

Here is how I would have done it (I changed the way you draw rectangle as I prefer doing the calculus like that but you get the idea).

local barHeight = 0.173
local barWidth = 0.005
local barPos = { x = 0.975, y = 0.875 }

Citizen.CreateThread(function()
    while true do Citizen.Wait(0)

        local playerPed = PlayerPedId()
        local vehicle = GetVehiclePedIsIn(playerPed)

        if vehicle ~= 0 then
            local currentFuel = GetVehicleFuelLevel(vehicle)
            local fuelHeight = (barHeight * currentFuel) / 100

            DrawRect(barPos.x, barPos.y, barWidth, barHeight, 40, 40, 40, 150)  -- Full fuel bar (black)
            DrawRect(barPos.x, barPos.y + (barHeight - fuelHeight) / 2, barWidth, fuelHeight, 206, 145, 0, 255)  -- Curent fuel bar (yellow)
        else
            Wait(500)
        end

    end
end)
1 Like
7

Sweet! This is exactly the solution.

I understand the way you drew them, shouldn’t be too difficult to switch it around if need be. I’m currently testing it, but I don’t expect (and haven’t experienced) any issues yet.

And it’s interesting, I never considered that third calculation you made (bar, fuel, and (fuel height)). :key: Changes the way to approach it. :sunglasses:

But for cereal, it works and does what it needed to. This was the first simple script I wanted to figure out, so thanks for providing help. I’ve written other things since then, but this simple thing always plagued me haha.

Well, Thanks! :sun_behind_small_cloud:

Edit: I know it’s small, but solving this gave my weekend a nice boost! Thanks again. :fire:

1 Like
8

@Elio you mind if i implement that into my TXDPSRP Styled Screen Script?

9

No problem. Glad I can help the community.

1 Like
10

During testing, I quickly realized passengers could see a ‘dummy fuel bar’. I just put a check for ‘Driver only’ as well as ‘Ignore cycles’ while on bicycles.

local barHeight = 0.173
local barWidth = 0.005
local barPos = { x = 0.975, y = 0.875 }

Citizen.CreateThread(function()
    while true do Citizen.Wait(0)

        local playerPed = PlayerPedId()
        local vehicle = GetVehiclePedIsIn(playerPed)
        local driver = GetPedInVehicleSeat(vehicle, -1)
        local dead = IsPedDeadOrDying(playerPed, true)
        local class = GetVehicleClass(vehicle)

        if (vehicle ~= 0) and (class ~= 13) and (GetIsVehicleEngineRunning(vehicle)) then
            if driver and not dead then
                local currentFuel = GetVehicleFuelLevel(vehicle)
                local fuelHeight = (barHeight * currentFuel) / 100

                DrawRect(barPos.x, barPos.y, barWidth, barHeight, 40, 40, 40, 150)  -- Full fuel bar (black)
                DrawRect(barPos.x, barPos.y + (barHeight - fuelHeight) / 2, barWidth, fuelHeight, 206, 145, 0, 255)  -- Curent fuel bar (yellow)
            else
                Wait(500)
            end
        end
    end
end)
11

just curious how would i make it horizontal?

1 Like
12

Change the width and the height, the calculus that is done on the y parameter of the second DrawRect has to be done on the x parameter.

13

Any way to make the fuel bar Horizontal?

14

Yeah, pretty quick actually.

  1. Change ‘barHeight’ and ‘barWidth’ to what you need.
    Note: 0.005 ‘barWidth’ is not the same as 0.005 ‘barHeight’
  2. Change the ‘x’ and ‘y’ values in ‘barPos’ to adjust for the new orientation.

On ‘Current Fuel Bar’ DrawRect Line:

  1. Remove " + (barHeight - fuelHeight) / 2" from ‘barPos.y’
  2. Add " - (barWidth - fuelHeight) / 2" to ‘barPos.x’
  3. Change ‘fuelHeight’ to ‘barHeight’
  4. Change ‘barWidth’ to ‘fuelHeight’
  5. Done
    New line should read
DrawRect(barPos.x - (barWidth - fuelHeight) / 2, barPos.y, barWidth, fuelHeight, 206, 145, 0, 255)
15

Awesome thank you

16

fuelbar I’m stuck with this after multiple attempts lol

17

Share your code.

18

local barHeight = 0.173
local barWidth = 0.025
local barPos = { x = 0.150, y = 0.790 }

Citizen.CreateThread(function()
while true do Citizen.Wait(0)

    local playerPed = PlayerPedId()
    local vehicle = GetVehiclePedIsIn(playerPed)
    local driver = GetPedInVehicleSeat(vehicle, -1)
    local dead = IsPedDeadOrDying(playerPed, true)
    local class = GetVehicleClass(vehicle)

    if (vehicle ~= 0) and (class ~= 13) and (GetIsVehicleEngineRunning(vehicle)) then
        if driver and not dead then
            local currentFuel = GetVehicleFuelLevel(vehicle)
            local fuelHeight = (barWidth * currentFuel) / 100

            DrawRect(barPos.x - (barWidth - fuelHeight) / 1, barPos.y, barWidth, fuelHeight, 40, 40, 40, 150)  -- Full fuel bar (black)
            DrawRect(barPos.x - (barWidth - fuelHeight) / 1, barPos.y, barWidth, fuelHeight, 206, 145, 0, 255)  -- Curent fuel bar (yellow)
        else
            Wait(500)
        end
    end
end

end)

19

Focusing on one particular ‘issue’
[Fuel Bar Math]
Referencing the steps that I said to take for “On ‘Current Fuel Bar’ DrawRect Line”.
It seems you did ‘Step 2’ for both the Full Fuel Bar and Current Fuel Bar.
2. Add " - (barWidth - fuelHeight) / 2" to ‘barPos.x’

if driver and not dead then
    local currentFuel = GetVehicleFuelLevel(vehicle)
    local fuelWidth = (barWidth * currentFuel) / 100

    DrawRect(barPos.x, barPos.y, barWidth, barHeight, 40, 40, 40, 150)  -- Full fuel bar (black)
    DrawRect(barPos.x - (barWidth - fuelHeight) / 2, barPos.y, fuelWidth, barHeight, 206, 145, 0, 255)  -- Curent fuel bar (yellow)
else
    Wait(500)
end

So I changed a few things.

  1. ‘fuelHeight’ to >>> ‘fuelWidth’
  2. In ‘Full fuel bar’: Removed the calculations from ‘barPos.x’
  3. In ‘Full fuel bar’: Changed ‘fuelHeight’ to ‘barHeight’
  4. Lastly, I changed the ’ / 1’ to ’ / 2’
  5. Another edit :nerd_face: In ‘Curent fuel bar’, this changes the direction the bar ‘empties’.
    minus > barPos.x - (barWidth - fuelHeight) / 2
    plus > barPos.x + (barWidth - fuelHeight) / 2
20

could you post the full code i am confused…

1 Like