[b][size=16]Hey Thrivers![/size][/b]


We need a Can-do attitude person with a nose for aesthetics for designing the GUI. Not necessarily drawing the GUI but actually putting it into a format the game can understand, specifically XML files! (http://en.wikipedia.org/wiki/XML). If you are unfamiliar with XML it is simply a text file formatted in a way meant for both a machine and a human to be able to read.

I (Crovea) has finished integrating the GUI "programming library" into the game called CEGUI (http://cegui.org.uk/) which is a very flexible framework that reads how the GUI should look, from these XML files, such as what images and fonts are used and how everything is positioned in relation to eachother. The files also define different kinds of GUI "elements" also called "Widgets" and "Windows" in CEGUI, examples are buttons, menus and images.
There is no requirement for previous experience or conrete skills other than basic knowledge of files and optionally artistic skills (If someone wants to do the art without doing the XML or the other way around that would  be possible).
It will involve learning, initially things might seem confusing but once you understand the structure of how it's done things should become easily managable.
There is a wiki with information about how the GUI is defined using the XML files and lots of examples to learn from will be avaliable. You will be given a folder containing the game files and a folder for each type of XML file that CEGUI needs (see below), you will simply need to rename one or more files and run the game to see how what you have made looks, and the same process applies to seeing what the examples look like.


The structure of a GUI consists of the following files (These are just XML files structured in a specific way):

[b]Font files:[/b] http://cegui.org.uk/wiki/Font_files
These are quite simple small XML files tell the game where to find font files (typically ttf files that you wont have to create) and what kind of resolution they are made for:

Note that while these examples are put in Code tags, they aren't actually code, this isn't programming!
[code]
<?xml version="1.0" ?>
<Font version="3" name="Jura-13" filename="Jura-DemiBold.ttf" type="FreeType" size="13" nativeHorzRes="1280" nativeVertRes="720" autoScaled="vertical"/>
[/code]


[b]Imageset files:[/b] http://cegui.org.uk/wiki/Imageset_files
These files tell the game what images to use for the game (typically all or atleast a number of the used images will be in different areas of a single image). The file format then gives names of each of the parts of the images used for each thing:
[code]
<Imageset autoScaled="vertical" imagefile="HUDDemo.png" name="HUDDemo" nativeHorzRes="1280" nativeVertRes="720" version="2">
    <Image height="146" name="Plate" width="483" xPos="779" yPos="1113" />
    <Image height="300" name="Bread" width="300" xPos="980" yPos="37" />
    <Image height="260" name="Prizza" width="260" xPos="35" yPos="283" />
    <Image height="13" name="LifeBarFill" width="361" xPos="906" yPos="19" />
    <Image height="60" name="Life" width="60" xPos="442" yPos="719" />
    <Image height="198" name="Logo" width="445" xPos="835" yPos="722" />
</Imageset>
[/code]


[b]LookNFeel files:[/b] http://cegui.org.uk/wiki/Creating_Skins
These will be the most complicated files and will be used to define some basic functionality of GUI elements as well as their appearance.
I (Crovea) will make sure I understand these files especially so we can work together to make them work as intended. However you wont be needing much of the complexity of these files for the first GUI you make for the microbe stage.
[code]
<?xml version="1.0" ?>
<Falagard version="7">
    <WidgetLook name="GameMenu/Editbox">
        <PropertyDefinition redrawOnWrite="true" initialValue="FFFFFFFF" type="ColourRect" name="NormalTextColour"/>
        <PropertyDefinition redrawOnWrite="true" initialValue="FF000000" type="ColourRect" name="SelectedTextColour"/>
        ...
       <NamedArea name="TextArea">
            <Area>
                <Dim type="LeftEdge">
                    <ImageDim name="GameMenuImages/EditboxLeft" dimension="Width"/>
                </Dim>
                ...
                <StateImagery name="Enabled">
                    <Layer>
                        <Section section="container_normal"/>
                    </Layer>
                 </StateImagery>
                 ...
    </WidgetLook>
</Falagard>
[/code]


[b]Scheme files:[/b] http://cegui.org.uk/wiki/Scheme_files
The Scheme files bring the LookNFeel and ImageSet files together to define specific GUI elements such as a button or a MenuItem:
[code]
<?xml version="1.0" ?>
<GUIScheme version="5" name="WindowsLookSkin">
 <Imageset filename="WindowsLook.imageset" />
 <LookNFeel filename="WindowsLook.looknfeel" />
 <WindowRendererSet filename="CEGUICoreWindowRendererSet" />
 <FalagardMapping windowType="WindowsLook/Label"       targetType="DefaultWindow"     renderer="Core/Default"      lookNFeel="WindowsLook/Label" />
 <FalagardMapping windowType="WindowsLook/Button"      targetType="CEGUI/PushButton"  renderer="Core/Button"       lookNFeel="WindowsLook/Button" />
 <FalagardMapping windowType="WindowsLook/Checkbox"    targetType="CEGUI/ToggleButton"    renderer="Core/ToggleButton" lookNFeel="WindowsLook/Checkbox" />
 <FalagardMapping windowType="WindowsLook/IconButton"  targetType="CEGUI/PushButton"  renderer="Core/Button"       lookNFeel="WindowsLook/IconButton" />
 <FalagardMapping windowType="WindowsLook/RadioButton" targetType="CEGUI/RadioButton" renderer="Core/ToggleButton" lookNFeel="WindowsLook/RadioButton" />
 <FalagardMapping windowType="WindowsLook/FrameWindow"  targetType="CEGUI/FrameWindow" renderer="Core/FrameWindow"  lookNFeel="WindowsLook/FrameWindow" />
 <FalagardMapping windowType="WindowsLook/Titlebar"     targetType="CEGUI/Titlebar"    renderer="Core/Titlebar"     lookNFeel="WindowsLook/Titlebar" />
        ...
</GUIScheme>
[/code]


[b]Layout files:[/b] http://cegui.org.uk/wiki/Layout_files
Finally Layout files which simply uses the different GUI elements defined in the Scheme file(s) to define the actual GUI setup! You define a button to be at one position and an image at another etc.
[code]
<?xml version="1.0" ?>
<GUILayout version="4">
    <Window name="Root" type="DefaultWindow">
        <Window name="MainWindow" type="WindowsLook/FrameWindow">
            <Property name="Area" value="{{0.25,0},{0.25,0},{0.75,0},{0.75,0}" />
            <Property name="Text" value="Drag and Drop Demo" />
            <Window name="Slot2" type="WindowsLook/Static">
                <Property name="Position" value="{{0.283,0},{0.05,0}}" />
                <Property name="Size" value="{{0.2,0},{0.26,0}}" />
            </Window>
            <Window name="Slot3" type="WindowsLook/Static">
                <Property name="Position" value="{{0.516,0},{0.05,0}}" />
                <Property name="Size" value="{{0.2,0},{0.26,0}}" />
            </Window>
            ...
        </Window>
    </Window>
</GUILayout>
[/code]


Some designs have already been made for how the GUI should look: http://thrivegame.forum-free.ca/t1323-microbe-gui-finalisation but you should just start simple and get the hang of things first!


So if you're willing to learn while working together with me (Crovea, preferably by writing on skype) and possibly artists let us know and make your contribution to Thrive![/code]