UI and mouse position

FiveM Resource Development & Modding Discussion
1

Hey, when I use DrawSprite() to create my UI, is there a way to know when the mouse goes over a sprite, like the airspeed indicator in this resource? Getting the position of the mouse with GetControlNormal() and then doing calculations to check if the position is within the bounds of the sprite seems to be way too resource-intensive.

I plan to have a button users can interact with that is not drawn by HTML but with DrawSprite

2

I mean… afaik there is no other way to check this. Not sure how are you using GetControlNormal() to get the mouse coords. I would get the coords using either GetNuiCursorPosition - FiveM Natives @ Cfx.re Docs or GetPauseMenuCursorPosition - FiveM Natives @ Cfx.re Docs (depending on how you draw the cursor).

@Warxander 's vein does a coord check for this and it works ok: vein/src/core/types.ts at b6a7781327b7f7eb77cb10eb6c27da0ee1f43f4d · warxander/vein · GitHub

Also, how do you define resource intensive?

3

No, as far as I am aware, you have to manually check things like that. Some time ago I’ve written a small UI library for my ContextMenu that does the same calculation @CritteR already linked in vein.
It also uses GetControlNormal inside a small function:

function GetCursorScreenPosition()
	if (not IsControlEnabled(0, 239)) then
		EnableControlAction(0, 239, true)
	end
	if (not IsControlEnabled(0, 240)) then
		EnableControlAction(0, 240, true)
	end

	return vector2(GetControlNormal(0, 239), GetControlNormal(0, 240))
end

The resource is usually running at 0.20ms when in use but it really depends on the amount of rect/text/sprite present at the time. There is not a lot you can do apart from optimizing the sheer amount of Draw calls. Only draw what’s necessary and save things like the cursor position in a variable for reuse.

1 Like