[Release | Utility] Minimap Anchor Script

When creating a HUD element around the minimap, there is always going to be differences is size, aspect ratio and safe-zone from player to player. This script eliminates that factor and calculates the exact position and details for the minimap.

Source and download: https://github.com/glitchdetector/fivem-minimap-anchor

Minimap Anchor

This is a utility script for FiveM that can calculate the position of the minimap.
Clashing aspect ratios and safe-zone settings are no longer an issue!

How to use:

Add the “MINIANCHOR.lua” file to your resource.
Add client_script ‘MINIANCHOR.lua’ to your __resouce.lua file before the script that uses this.
Honestly if you don’t know how to add a script like this, you will most likely not have a use for it.

Features:

Function GetMinimapAnchor() which returns an object with the following entries:

Key Description
x / left_x The X position of the left side of the minimap.
y / top_y The Y position of the top side of the minimap.
width The width of the minimap.
height The height of the minimap.
xunit, yunit Base units that should be the same for every screen. Use these for pixel measurement.
right_x The X position of the right side of the minimap. (Shortcut for x + width)
bottom_y The Y position of the bottom side of the minimap. (Shortcut for y + height)

Note that all of the values returned are in a range of 0.0 to 1.0

Example use:

This code example will draw a black border along the inner edge of the minimap.

function drawRct(x, y, width, height, r, g, b, a)
    DrawRect(x + width/2, y + height/2, width, height, r, g, b, a)
end
Citizen.CreateThread(function()
    while true do
        Wait(0)
        local ui = GetMinimapAnchor()
        local thickness = 4 -- Defines how many pixels wide the border is
        drawRct(ui.x, ui.y, ui.width, thickness * ui.yunit, 0, 0, 0, 255)
        drawRct(ui.x, ui.y + ui.height, ui.width, -thickness * ui.yunit, 0, 0, 0, 255)
        drawRct(ui.x, ui.y, thickness * ui.xunit, ui.height, 0, 0, 0, 255)
        drawRct(ui.x + ui.width, ui.y, -thickness * ui.xunit, ui.height, 0, 0, 0, 255)
    end
end)

Result:

Bordered Minimap

Possibilities:

Another example is a reworked Car HUD that will look exactly like this on every screen and properly scales with the minimap.
Revamped Car HUD
(Even at 800x600)

Disclaimer:

This script may still behave weirdly in extreme cases, such as multi-monitor setups,
although it has not yet been tested on as I have no friends and cannot test it myself.

29 Likes

Hmm might find a use for this soon. Good job!

1 Like

good stuff, while i personally dislike adding random bars to the minimap, it sure can be useful in a few cases.

7 Likes

Oh wow, actually this will be extremely useful.

3 Likes

I’m not the biggest fan of stuff around the minimap either, but seeing this horrible thing happen when I increased my safe-zone setting made me determined to find a more permanent solution.
https://i.imgur.com/kXYRTPZ.png

:smiley:

1 Like

This looks really useful and helpful. Nice job.

3 Likes

Feelsbadman, anyway great stuff, keep it up

3 Likes

Make sure you’re using the most recent resource manifest

how i can transform UI coords to JavaScript coords in pixels ? (to parse for nui gui)

You can use the width of the screen (in pixels) and multiply it with the UI coordinates (float values from 0 to 1)
So if the X of the UI is 0.02, and your screen is 1920px wide, the result would be (1920 * 0.02) = 38.4px (38px rounded)

1 Like

How can i use this with progressbar.js?

I could not make it work here.

Just wanted to pop in to tell you how great this resource is! :slight_smile:
Makes UI-creation a lot easier, and placement much more consistent. Still trying to figure out how to get placement inside the UI to be ligned up like in your CarHud example - but will keep going.

Managed to get the perfect placement off the rectangle containing the speedometer, scales perfectly.
The thing is, even when using the exact same x,y coordinates the text does not display at all. Even when using ui.x and ui.y as the values - it doesn’t show. Only when using my own written values, which are non-scaleable does it display.

Any clue how?
Could you perhaps show us a snippet of your CarHud variation, so I can see how that was done?

This is the code for the speed indicator that I use currently.

if HUD.SpeedIndicator then
    local speedPanelWidth = 0.046
    local speedPanelHeight = 0.03
    drawRct(Minimap.right_x - speedPanelWidth, Minimap.bottom_y - Minimap.height / 10 - speedPanelHeight, speedPanelWidth, speedPanelHeight,0,0,0,150) -- Speed panel
    local text_x = Minimap.right_x - speedPanelWidth
    local text_y = Minimap.bottom_y - Minimap.height / 10 - speedPanelHeight
    if speed_type == 'kmh' then
        drawTxt(text_x, text_y, 1.0,1.0,0.64 , "~w~" .. math.ceil(Speed), 255, 255, 255, 255)
        drawTxt(text_x + speedPanelWidth/2.1, text_y + 0.01, 1.0,1.0,0.4, "~w~ km/h", 255, 255, 255, 255)
    elseif speed_type == "knots" then
        drawTxt(text_x, text_y, 1.0,1.0,0.64 , "~w~" .. math.ceil(Speed), 255, 255, 255, 255)
        drawTxt(text_x + speedPanelWidth/2.1, text_y + 0.01, 1.0,1.0,0.4, "~w~ nm/h", 255, 255, 255, 255)
    elseif speed_type == 'mph' then
        drawTxt(text_x, text_y, 1.0,1.0,0.64 , "~w~" .. math.ceil(Speed), 255, 255, 255, 255)
        drawTxt(text_x + speedPanelWidth/2.1, text_y + 0.01, 1.0,1.0,0.4, "~w~ mph", 255, 255, 255, 255)
    else

    end
end

aww, i really hoped this would’ve worked on 21 by 9 aspect ratio, good stuff anyway :confused:

I get a nil value from GetAspectRatio(0)…

Does someone have the same issue?

Same (20 characters…)

@Piit3r @QuadCore Add one of these resource manifest versions to your __resource.lua file:

resource_manifest_version 'f15e72ec-3972-4fe4-9c7d-afc5394ae207'

or

resource_manifest_version '44febabe-d386-4d18-afbe-5e627f4af937'
1 Like

Does this work with esx_AdvancedFuel and esx_basicneeds (food and water)?

If so could you advise me on how I would do this?

Thanks