Easy way to make menus?

Blitz3D Forums/Blitz3D Programming/Easy way to make menus?

EpicElrod(Posted 2015) [#1]
I want to make "Beautiful" menus for my game. The kind with real buttons and things. Any idea how to do this easily?


Matty(Posted 2015) [#2]
Buttons and menus are easy enough from a technical stand point however for beauty you may need the services of an artist....


EpicElrod(Posted 2015) [#3]
Buttons and menus are easy enough from a technical stand point however for beauty you may need the services of an artist...
I know how to do the beauty, can you tell me how to make them? Not the dang Up/down select kind, the kind with buttons you click with the mouse.


Matty(Posted 2015) [#4]
I'm not sure how much experience or knowledge you have with programming/blitz etc...but

You will need to at least create a number of images with either a mask (2d) or an alpha channel (2d in 3d) and display them at the appropriate coordinates (x,y) as a first step.

Second step would be to do have a method for handling mouse input. So in the game loop you would have a function or similar that checks every frame if the mouse position (x,y) and the mouse button states have changed.

Then if the mouse button state changes to a left click you would compare the x and y position of the mouse cursor with the rectangle (x,y,width and height) of each button on the screen. If there is a match then the button has been clicked.


That is the basic outline....


RemiD(Posted 2015) [#5]
There are 3 ways to make buttons/guielements :
You can use images, then check if the cursor is over a button or not by comparing 2d coordinates.
You can use rectangle textured meshes (2 triangles for each + one texture for each), then check if the cursor is over a button or not by using camerapick or linepick.
You can use 3d textured meshes, then check if the cursor is over a button or not by using camerapick or linepick.

You can find some examples in the code archives and some discussions about this in the forum.

https://www.google.fr/?gws_rd=ssl#q=buttons+menu+site:blitzbasic.com


EpicElrod(Posted 2015) [#6]
Ok, thanks for the help


EpicElrod(Posted 2015) [#7]
You can use images, then check if the cursor is over a button or not by comparing 2d coordinates.


Can you give a little example code? the link is really outdated and does not provide the results I need. I want to make my bmp image a button. It is 300 pixels wide and 75 tall.


RemiD(Posted 2015) [#8]
double post


RemiD(Posted 2015) [#9]
There are already several examples in the codes archives and many discussions about this in the forum... Just search and you will find.

Some quick explanations :
The mouse cursor has coordinates (X%,Y%) (% is to represent an integer)
The image has coordinates (X%,Y%) and size (Width%,Height%)
The area of the image is between X,Y, and X+Width,Y+Height
Knowing this, you can calculate if the cursor is inside or oustide each area (image)
With this, you know if the cursor is over a button or not. (you can decide to display another image to show the user that he can interact with this button)
If the user clicks the mouse button, and if the cursor is over a button, you can decide to go to another menu screen (with others buttons) or run/update the game.

I also suggest to learn about "states", this is a variable which stores a value which represents the state of your program/screen and allows you to know how to update the program/screen.


EpicElrod(Posted 2015) [#10]
Thanks. Can you share a little bit of code for it? I understand that part, I just need some code samples


Dan(Posted 2015) [#11]
here is a functional demo for some buttons: Scroll down to my second post for the demo (click there on the 'bit flip' button, to see more buttons)

It Draws Rectangles with text in it, and returns the Number of the pressed Button.

Here is the Code: