making 2D menus in openGL
Author
Hi, I need help making a game menu in OpenGL. To accomplish this, I need to capture the mouse''s screen coordinates and compare them to the button''s (a class I made) coordinates.
There''s alot of problems with this.
Windows and OpenGL have different scales. Windows is in pixels, OpenGL is in relative units.
The whole menu doesn''t work right at all if the camera isn''t at just the right height over the Z axis. The buttons would get smaller the farther away the camera is, their coordinates will stay the same, and therefore they''ll think the mouse is over them when they really aren''t.
I understand that Orthographic projection can help. Plus there''s a function called: glOrtho2D. ButI can''t find a single tutorial that gives an example of glOrtho or glOrtho2D being used for a 2D application.
try this
http://nehe.gamedev.net/data/lessons/lesson.asp?lesson=21
and this
http://gametutorials.com/Tutorials/opengl/OpenGL_Pg2.htm
http://nehe.gamedev.net/data/lessons/lesson.asp?lesson=21
and this
http://gametutorials.com/Tutorials/opengl/OpenGL_Pg2.htm
I wrote a 2D opengl GUI that you may be interested in..
For screen shots and source code download, go here and click around.
http://ready4dis.8m.com/GUI/
--- Edit ---
Changed this post tremendously for newcomers
[edited by - Ready4Dis on December 1, 2003 11:29:22 AM]
For screen shots and source code download, go here and click around.
http://ready4dis.8m.com/GUI/
--- Edit ---
Changed this post tremendously for newcomers
[edited by - Ready4Dis on December 1, 2003 11:29:22 AM]
Hey there. Input and interface happens to be one of my specialties.
glOrtho and gluOrtho2D (I think those are the correct function names) can be looked up in the help documentation that comes with Microsoft''s Visual Studio, or online at Microsoft.com in the developer''s library.
Now, on to the nitty gritty. One way of implementing a GUI within a 3D application is to simply render the scene as per usual. Next, set up the orthagonal projection matrix. Render the GUI to the screen, then reload the origional projection matrix, or simply load the identity matrix to the projection matrix.
When creating the orthagonal projeciton matrix with gluOrth2D, you can specify the height and width of the projection area that is displayed on the screen in relitive coordinates. For instance, you could specify the screen as an area ranging from 0.0 by 0.0 to 79.0 by 59.0 (this matches the X by Y relationship of standard screen the standard screen resolutions 320x240, 640x480, 1024x768, one here I can''t remember, and 1600x1200). Using this method, you can specify areas on the screen and keep the size of the interface constant regarless of the actual screen resolution.
A note on this method: When using this method with Windows bitmaped fonts using the OpenGL raster functions to display text, one must make adjustments to the font size and font weight (the amount of font thickness) relative to the actual screen resolution. I have found the following resolution / font sizes to work well.
(From memory, experimentation is needed)
640x480: size 6, weight 400 - 600
800x600: size 9, weight 600
1024x768: size 13, weight 900
That one I can''t remember: size 16, weight 400 - 600
1600x1200: size 24, weight 400 - 600
Using these font sizes and weights with the above orthagonal projection scheme, raster positions should start on the unit bounderies. For instance, 0.0 by 1.0, 1.0 by 1.0, 2.0 by 1.0. This will raster three letters in the top left corner of the screen.
Please note that will the above method, and the above font size and weight, the font characters are spaced too far appart with the 1024x768 screen resolution. I found no way to adjust the system to make the characters appear with the correct spacing in this one resolution whit not adversly effecting the spacing in the other resolutions.
A way around this odvious short comming of this GUI rendering system is to use texture fonts rendered from unit boundery to unit boundery. This would also make it easier to enlarge the font without on screen without doing very much in the code, and without adding extra instructions in the rendering and font printing code.
I hope this helps,
QBRADQ
glOrtho and gluOrtho2D (I think those are the correct function names) can be looked up in the help documentation that comes with Microsoft''s Visual Studio, or online at Microsoft.com in the developer''s library.
Now, on to the nitty gritty. One way of implementing a GUI within a 3D application is to simply render the scene as per usual. Next, set up the orthagonal projection matrix. Render the GUI to the screen, then reload the origional projection matrix, or simply load the identity matrix to the projection matrix.
When creating the orthagonal projeciton matrix with gluOrth2D, you can specify the height and width of the projection area that is displayed on the screen in relitive coordinates. For instance, you could specify the screen as an area ranging from 0.0 by 0.0 to 79.0 by 59.0 (this matches the X by Y relationship of standard screen the standard screen resolutions 320x240, 640x480, 1024x768, one here I can''t remember, and 1600x1200). Using this method, you can specify areas on the screen and keep the size of the interface constant regarless of the actual screen resolution.
A note on this method: When using this method with Windows bitmaped fonts using the OpenGL raster functions to display text, one must make adjustments to the font size and font weight (the amount of font thickness) relative to the actual screen resolution. I have found the following resolution / font sizes to work well.
(From memory, experimentation is needed)
640x480: size 6, weight 400 - 600
800x600: size 9, weight 600
1024x768: size 13, weight 900
That one I can''t remember: size 16, weight 400 - 600
1600x1200: size 24, weight 400 - 600
Using these font sizes and weights with the above orthagonal projection scheme, raster positions should start on the unit bounderies. For instance, 0.0 by 1.0, 1.0 by 1.0, 2.0 by 1.0. This will raster three letters in the top left corner of the screen.
Please note that will the above method, and the above font size and weight, the font characters are spaced too far appart with the 1024x768 screen resolution. I found no way to adjust the system to make the characters appear with the correct spacing in this one resolution whit not adversly effecting the spacing in the other resolutions.
A way around this odvious short comming of this GUI rendering system is to use texture fonts rendered from unit boundery to unit boundery. This would also make it easier to enlarge the font without on screen without doing very much in the code, and without adding extra instructions in the rendering and font printing code.
I hope this helps,
QBRADQ
I will fix up my code a tiny bit and release the sources. Also, I use font bitmaps for fonts, and the screen resolution can be of ANY size and appear exactly the same (on the same monitor of course). So running 1024x768 vs. 800x600, everything will appear the same size, just 1024x768 will look a bit sharper 
. I will come back and give you a download link sometime soon (tonight or tomorrow).
--- Edit ---
As promised...
http://ready4dis.8m.com/GUI/Gui_Src_112903.zip
If you have any problems, questions, and/or comments, please contact me via my email (available in my profile), or contact me on AIM (CrazyGuy4Eva), or MSN (Ready4Dis_1@hotmail.com)
You can manually edit the Config.cfg file... it's simply Width Height BitDepth and FullScreenFlag... for example:
1024 768 32 1 - This would set up 1024x768x32 full screen, while
640 480 16 0 - Would set up 640x480x16 windowed.
[edited by - Ready4Dis on November 30, 2003 1:50:27 AM]
. I will come back and give you a download link sometime soon (tonight or tomorrow).--- Edit ---
As promised...
http://ready4dis.8m.com/GUI/Gui_Src_112903.zip
If you have any problems, questions, and/or comments, please contact me via my email (available in my profile), or contact me on AIM (CrazyGuy4Eva), or MSN (Ready4Dis_1@hotmail.com)
You can manually edit the Config.cfg file... it's simply Width Height BitDepth and FullScreenFlag... for example:
1024 768 32 1 - This would set up 1024x768x32 full screen, while
640 480 16 0 - Would set up 640x480x16 windowed.
[edited by - Ready4Dis on November 30, 2003 1:50:27 AM]
i'll just add mine, though it doesnt have any default textures (figured they are pretty useless for most games anyway as they just never fit in).
demo: http://festini.device-zero.de/downloads/srcc.zip
source: http://festini.device-zero.de/downloads/ui.zip
pic: http://festini.device-zero.de/downloads/charbig.gif
in the demo, click on back, exit, new game to get a dialogue with a few different elements.
[edited by - Trienco on November 30, 2003 5:10:00 AM]
demo: http://festini.device-zero.de/downloads/srcc.zip
source: http://festini.device-zero.de/downloads/ui.zip
pic: http://festini.device-zero.de/downloads/charbig.gif
in the demo, click on back, exit, new game to get a dialogue with a few different elements.
[edited by - Trienco on November 30, 2003 5:10:00 AM]
Oh yeah, this was a demo of an in "game" menu using my current setup...
http://ready4dis.8m.com/ScreenShot_Menus.jpg
The menu''s are very simple as I didn''t get much implemented yet, but it shows that you can draw it over-top of a game interface, and even use tranlucencies so you can see the game through it still.
http://ready4dis.8m.com/ScreenShot_Menus.jpg
The menu''s are very simple as I didn''t get much implemented yet, but it shows that you can draw it over-top of a game interface, and even use tranlucencies so you can see the game through it still.
Author
Allright!! Thanks guys! I''ll be sure to check those out, starting with ready4Dis''s.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
