Wednesday, January 19, 2011

End Course Project 11: Graphical User Interface (GUI) layout

The general GUI concept for our game was an ongoing process. Generally as a good design practice we have created a clean cut, between the GUI and the Game model. This turned out to be a good idea, since we changed the GUI layout several times during out process. With the GUI clearly decoupled for the model, we could easily experiment and change the without interrupting those working on the game model.

A GUI was quickly necessary to run different kinds of test, for the widgets, the video streaming, the timer, etc. So we ended up with a first version, still buggy but efficient in its tasks.

Picture 34 : Our early stage layout


In order to achieve a nice layout we have used layout managers. This is always a little troublesome to get right, but there is a well written set of official articles on how to achieve the goals that we wanted[1][2].

We mainly used two types of layout managers.
  • Box Layout to achieve the Horizontal layout or the Vertical layout.
  • Flow Layout as the std. layout. Where nothing particular was requested
The final layout ended like the sketch below, mainly based on the BoxLayout.

Picture 35 : Sketch for the final layout



Orange Color is Vertical BoxLayout JPanel

Yellow Color is Horizontal BoxLayout JPanel

1.        Obstacle RadarWidget
2.       Streaming Component Widget
3.       IR Radar Widget
4.       Time Panel
5.        Info Panel
6.       Map Panel
7.       Wirecut Widget

The final result of the layout is as shown below, based on the layout above.

Picture 36 : Final layout in action

No comments:

Post a Comment