Working on a 2D Panel

Aug 4, 2016


Last week, we built a basic 3D orbital menu with most of the existing 2D elements successfully ported to 3D. Sliding in 3D is still a bit of a problem, and we are exploring ways to do it. For the time being 3D sliding has been pushed back to later.

The next component of the project is building a panel. A panel is a collection of (for now) 2D elements. It is synonymous to a window.

Implementation

We used a 2D rectangle to give the panel a background. The panel has an add_element function that takes in a 2D UI element and its relative position as arguments. If the size of the panel is 200x200 pixels and if I specify the relative position of the 2D UI element as (0.4, 0.4), then the position of the element inside the panel (with the panel’s lower left corner as the origin) will be (0.4*200, 0.4*200). Applying appropriate transformations will get the element to the position where we want it to be.

The Result

Here’s how the panel currently looks like:

The 2D Panel

What Next

Next, certain issues with the panel are to be fixed and certain enhancements are to be done, for example, we want to click and drag the panel around. Also, we want the panel to be left aligned or right aligned.