Creating a simple button

[Phodex Games]

Hi,

 

I was wondering that I couldn't find any tutorial about creating simple UI elements. I searched the web and the forum for a while, and because I couldnt find anything useful I started this thread.

 

The problem is I dont get how to check whether my mouse cursor is hovering over an element or not. To give you an more exact example: I just finished a simple inventory generation system where you can choose how many columns and slots it has and some other stuff. This works very well. However now I want to implement that, if you click on one of the items collected and shown in the inventory, that they get used/activated.

 

The method I know from previous game developing experience is that you cast a ray from your camera origin through the mouse position and grab the UI elements which get intersected.

 

My questions so far:

 

Info: I only code in LUA.

 

- How to check if my mouse hovers an context object (for example an image drawn with context:DrawImage())

- How to unlock my mouse so that I can move it around freely

 

You would do me a great favor, if you tell me how this works in Leadwerks.

 

Phoenix

[Thirsty Panther]

Have you tried Hankinators UI in the workshop?

 

http://steamcommunity.com/sharedfiles/filedetails/?id=653673604&searchtext=

 

I haven't tried it myself as I use Aggrors FlowGui.

 

http://www.aggror.com/

[Rick]

Check if over a 2D rectangle would involve first getting the mouse position from the window object like:

 

Window:GetCurrent():GetMousePosition()

 

Then checking that mouse x & y to see if it's inside the button rectangle with a function like:

 

function IsPointInRect(point, rect)
  if point.x < rect.left then return false end
  if point.x > rect.left + rect.width then return false end
  if point.y < rect.top then return false end
  if point.y > rect.top + rect.height then return false end

  return true
end

 

 

In this function you are doing "negative" checks first to see if the mouse position is outside of the rectangle and if any of those are the case you return false to tell you that the point is NOT in the rectangle. If all checks pass then the point must be in the rectangle so you then return true. This is your basic way to tell if the mouse pointer is inside a rectangle, which would be your button or other UI elements. With this it implies that your button has a rectangle table with it but you can get the idea if your x, y, w, h values of your button are different names.

 

I don't get the question about unlocking the mouse so it can move freely. Nothing should be locking the mouse so I'm not following this

one.

 

 

 

Just a note that once you solve this you're going to have an issue with your 2D UI drawing being resolution independent. Hank and Aggror's UI's both address that. I have a UI library I'm working on that I'm using for our urWorld game as well that I'll release at some point, but this is a big topic because if you coded your positions and sizes of your UI elements in pixels and just draw at those same pixels in any screen resolution you aren't going to get the look you want on any resolution.

[Phodex Games]

I will give that a try. I also could try to get some scripting logic out of Hankinators UI after downloading it. Thank you guys. I will reply again if I tried it out.

[thehankinator]

I will give that a try. I also could try to get some scripting logic out of Hankinators UI after downloading it. Thank you guys. I will reply again if I tried it out.

My library does a look up in a quadtree that contains all widgets that are visible. If there is something there, it sets a hover flag on the widget so it can draw a hover effect(or whatever).

[Phodex Games]

Thank you Rick it worked very well just tested it out.