The Menu

In this blog entry I want to give you a short introduction on how I did the 3D-Menu.

When you know, how it's done, you will see, that it is easy.

Let's start with the parts of one of the Panels:
- It consists of several automatically generated quads. These are surrounded by a simple model for the curves. This model is just drawn 4 times, each rotated by 90 degree on the Z-Axis. The number of quads is generated in a loop. For each menu-item of the panel some qauds are used. These quads are drawn with the help of several shaders
- One of the quad is used for the graphic and the text, that represents the item. This is simply done by creating dynamically a texture for each menu item. On this texture I just draw the left orientated image and a text (using simple text-drawing functions). This texture is assigned to the qaud by using a shader.

Placing the Panels in the 3D-World
I have created a model class for the panel, that hides all the things that has to be done for creating such a menu-panel. So I instantiate this panel-model, assign all the items (text and pictures) to it and let it draw as I would do it with a normal 3D model. So I can positionate this panel like any other 3D model in my 3D-Space. The trick is now, that I have assigned the camera to the actual active panel and there to the actual selected menu-item. So everytime I choose another menu-item the camera follows it. This gives an nice effect.

When I select a menu item, so that another menu would be selected in the 3D-Space. I let the camera fly to the new position. The flying is very easy done by just subtracting the destination coordinates by the actual coordinates and divide the result by a factor (the greater, the slower it will fly). The divided result is added to the actual position, example:

float factor = 10.0f;
actCamPos = actCamPos + ((destCamPos-actCamPos)/factor);

Some Details
- The pulsating of the actual menu-item is done by a shader, where a color-parameter is changed with a sine-wave.
- I used a little bit blur , so that it looks more shiny.

I thought of putting in a demo here, but the whole menu uses parts of my engine, and I didn't want to post the whole code here (it would not be so good unterstandable). Maybe I will put some code-fragments for a better unterstanding.

Let me know, If somebody wants to know more!