Rendering Mac OS - like buttons....

Started by
4 comments, last by dagbud 16 years, 3 months ago
hi all i am in the process of making some basic callback buttons in a GUI. the layout of the buttons will just be at the bottom of the GUI itself. i have 2 images for each button(which is a simple quad) and then those images , as textures, on the quad. pretty straight-forward. i would like to use the glutMouse functions to not only highlight the button(a different texture i created in gimp) when the mouse "hovers" over it but also bring the button to the forefront of the GUI(or the button "blows up")..much like buttons on the MAC OS does. the only thing that i can think of right now is a 2D->3D projection but maybe i am in the wrong line of thinking or maybe there is an easier way. any suggestions? thanks!
heh
Advertisement
There is no need for a 2D->3D projection unless you want your gui to be 3D. If it is 2D a simple test for a rect does it.

if(x > left && x < left + width && y > top && y < top + height)

Every time the mouse moves you have to check for those rects an fire of certain events, for example MouseHover, MouseOff, MouseClick etc.
http://3d.benjamin-thaut.de
Quote:Original post by Ingrater
There is no need for a 2D->3D projection unless you want your gui to be 3D. If it is 2D a simple test for a rect does it.

if(x > left && x < left + width && y > top && y < top + height)

Every time the mouse moves you have to check for those rects an fire of certain events, for example MouseHover, MouseOff, MouseClick etc.


yes i have the code to do this and it works but if that 'if'statement comes back true then i want the button to 'pop up' like it does on the mac. the button is 'emphasized'. does that make sense? i wish i knew the right word to describe what happens.


here is a
> video of someone using a mac mini . look around 1:26 to see what i mean. thanks!
heh
Well it looks as though the buttons get larger. It seems this is the behavior you wish to reproduce. So when the button is "hit" with your hover logic, simply resize the quad representing your button. You could do this in a couple of different ways. You could scale the geometry by a specific amount, or you could create a separate quad for the "popped" version of your button. Keep in mind that after you "pop up" your button, the hit rectangle will need to change to the size of your new button as well.

When the mouse leaves the new rectangle, either scale down or replace the rendered and hit quad with the old quad.

You could take it a step further and animate the button from the old size to the new size by scaling your quad by a specific amount over time.
Edmund Weese7-bit Games
Quote:Original post by dagbud
Well it looks as though the buttons get larger. It seems this is the behavior you wish to reproduce. So when the button is "hit" with your hover logic, simply resize the quad representing your button. You could do this in a couple of different ways. You could scale the geometry by a specific amount, or you could create a separate quad for the "popped" version of your button. Keep in mind that after you "pop up" your button, the hit rectangle will need to change to the size of your new button as well.

When the mouse leaves the new rectangle, either scale down or replace the rendered and hit quad with the old quad.

You could take it a step further and animate the button from the old size to the new size by scaling your quad by a specific amount over time.


would glScalef be sufficient if i were to scale down? seems to me scaling things down and up would be easier , especially if i did want to render a smooth animation of it increasing or decreasing over time... or in this case stop scaling down or up when it scales to a certain number then stop. does this make sense?

heh
It really depends on how you have things setup. I would say if you are just interested in rendering the new button size then glScalef would suffice. However, if you want your button to actually have the dimensions that you can test against, you may need to scale the geometry yourself.

This can be done by multiplying each component of your vector by a scalar value. Say you wanted the new button to be twice as big as the old button, just multiply each point in our quad by 2 then re-center the button.
Edmund Weese7-bit Games

This topic is closed to new replies.

Advertisement