Jump to content
Denz

Help on Lua GUI's?

Recommended Posts

Hi,

I have not been able to find tutorials on making GUI's, UI's and HUD's. I want to create a very simple GUI on the main menu for my game which some text you click on starts the game, goes to the options menu, credits, or exits the game. Also, for when you hover over the text it goes to for instance, the colour red (but not entirely needed, but would be great!).

 

I hope someone can help me out here, it would make my day smile.pngsmile.png

 

EDIT:

 

This is what it should look like (just quickly done in paint):

 

fa02ed6225.jpg

Share this post


Link to post

Probably the easiest answer is to say buy Aggror's FlowGui and incorporate that.

 

I did do a small tutorial showing a text input box which has some of the basic hud pasting elements. It can be found here

 

If you are highlighting on mouse over then for each option create two textures, normal and highlighted, You know the top left corner and the size of each texture so in the PostRender stage use window:GetMousePosition() to find out the current mouse location. If the mouse maps within any of the three texture areas then for that texture choose the highlighted version.

Share this post


Link to post

Thanks for your reply, I will experiment with this tomorrow. I would happily buy Aggror's FlowGUI if I had the money.

Share this post


Link to post

Also, if you were going for a 3D menu, you can use raycasts to select a menu item (like if start, exit, options were actually 3D meshes or textures on those boxes).

Share this post


Link to post

Thanks for your replies. I hardly even know LUA so I don't know where to begin with this. What I've done so far is drawn the text "Start, Options, Exit" onto the screen. If I could get help on where about to start this and some code to start from it'd be great.

 

Share this post


Link to post

Ive been playign with Aggrors FlowGUI a bit and here is something I threw together as an experiment. The great thing about the flowgui is that it is basically a map that a player would play. This allow me the easiest ability to make it my own with out a lot of coding which im unable to do very well.

 

Im still trying to figure out how to make the start button and the quit button work but once I do, Ill rebuild this to make it smaller as size is apparently extremely important.

https://www.youtube.com/watch?v=I2sBI40GEpA

Share this post


Link to post

Unfortunately I do not have the money ATM for FlowGUI, hence why I am asked for help on a simple click drawn text that takes you to the start of the game.

Share this post


Link to post

Take a look at the following code:

 

--Retrieve mouse coordinates
local mousePos = App.window:GetMousePosition()

--Check if the mouse.x is higher then the x position of the start text AND lower then the x position of the text end x.
-- this also needs to be done for y axis
if mousePos.x > button1.x and mousePos.x < (button1.x + button1Width) then
   System:Print("the position of the mouse is within the button ")
end

 

This image represent the code above.

 

post-45-0-87347200-1420023110_thumb.jpg

 

Since you want to check if the mouse is inside the button boundry, we have to perform these steps every frame.

 

So the code needs to be placed either in UpdateWorld or in PostRender. For instance

function Script:PostRender(context)
   local mousePos = App.window:GetMousePosition()
   if mousePos.x > 460 and mousePos.x < (460 + 100) then
       System:Print("the position of the mouse is within the button ")
   end

   App.context:SetColor(255, 255, 255)
   App.context:SetBlendMode(Blend.Alpha)
   App.context:DrawText("Start", 460, 280)
   App.context:SetBlendMode(Blend.Solid)
end

Share this post


Link to post

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...