The New GUI

[LOrDo]

A WOP Definatly, but very cool nontheless.

[IceXuick]

graphics have been sent.... (sorry for the delay)

[Domipheus]

No probs.


Whats a 'WOP' lOrDo? that a typo of WIP? :)

Another note, the layout of all of this is user configurable via xml. If somone really wanted to, they could totally change the look of this.

[Dragon45]

Holy hell, did the new GUI just get completed, and did I just totally miss it? O_O

[Das Bruce]

Holy hell, did the new GUI just get completed, and did I just totally miss it? O_O

Dare we even hope?

[Domipheus]

I'm doing it piece by piece... but i'm certainly making progress :) but it is not complete yet.

[Das Bruce]

I'm doing it piece by piece... but i'm certainly making progress :) but it is not complete yet.

Woot! Awesome dude.

Reckon you could whip up a checklist or something?

[LOrDo]

Whats a 'WOP' lOrDo? that a typo of WIP? :).

Oops.

[TradeMark]

Some bug found: I doubleclicked something in the orders menu, and then it just closed the game.

And please, dont change the keys >_> i really confused when i couldnt cancel my building without moving or stopping the current action. (esc helped, but i dont want to press any keys when i do that). Just stay in the normal key actions... most of people are used to them.

[SjaakOnderkaak]

Hmmm, are total n00bs also allowed to submit their idea's? (no not a total TaSpring n00b)

I'm not really an c++ expert and not known with openGL / D3D but after grabbing the source I couldn't resist tinkering with the UI:

img199.imageshack.us/img199/2730/newuiza5.jpg

Don't know if you like it, but I think it looks a lot better and the changes aren't that complicated. For people knowing some c++ /w openGL: the camfered console with the slight dark/grey gradient is now drawn like this:

Code: Select all

glBegin(GL_POLYGON);

	// Upper left corner
	glColor4f(0.2f, 0.2f, 0.2f, 0.5f);
	glVertex3f(xpos, ypos - 0.005f, 0);
	glVertex3f(xpos + 0.005f, ypos, 0);

	// Upper right corner
	glVertex3f(xpos + width - 0.005f, ypos, 0);
	glVertex3f(xpos + width, ypos - 0.005f, 0);

	// Lower right corner
	glColor4f(0.0f, 0.0f, 0.0f, 0.5f);
	glVertex3f(xpos + width, ypos - height + 0.005f, 0);
	glVertex3f(xpos + width - 0.005f, ypos - height, 0);

	// Lower left corner
	glVertex3f(xpos + 0.005f, ypos - height, 0);
	glVertex3f(xpos, ypos - height + 0.005f, 0);
glEnd();

The metal and energy bars are also drawn with a gradient to give them a a bit more modern look:

Code: Select all

// Draw the metalbar background
glColor4f(1,1,1,0.2f);
glBegin(GL_QUADS);
glVertex2f(x1, y1);
glVertex2f(x2, y1);
glColor4f(0.5f,0.5f,0.5f,0.2f);
glVertex2f(x2, y2);
glVertex2f(x1, y2);
glEnd();

// Fill the metalbar
glColor4f(0.5f,0.5f,0.5f,1);
glBegin(GL_QUADS);
glVertex2f(x1, y1);
glVertex2f(x1+x, y1);
glColor4f(1.0f,1.0f,1.0f,1);
glVertex2f(x1+x, y2);
glVertex2f(x1, y2);
glEnd();

[Michilus_nimbus]

Seriously,
Who needs a new gui when people are turning this one into something sexy?

[j5mello]

BLASPHEMER!!!!!!

[TheBlasphemer]

To be honest, I think using an XML based GUI fits in better with the modding capabilities. It's awful being able to change virtually anything in the engine except that GUI

[TradeMark]

No please, no XML, im full of XML, it looks so ugly and messy to edit >_< just use the normal format which is in use already...

[Das Bruce]

No please, no XML, im full of XML, it looks so ugly and messy to edit >_< just use the normal format which is in use already...

Can you post an example of the old format?

[Maelstrom]

I think he means the tdf/fbi/smd format that Spring uses everywhere else.

[SinbadEV]

XML is Beautiful and you are stupid... or perhaps don't understand it... for an example of XML look at HTML... it's basically the same thing, you just need to make any self contained tags have a terminator (/>).

Code: Select all

<?xml version="1.0" ?>
<GUIScheme Name="MyScheme">
    <Imageset Name="MyImages" Filename="../datafiles/imagesets/MyImages.imageset" />
    <LookNFeel Filename="../datafiles/looknfeel/MySkin.looknfeel" />
    <WindowSet Filename="CEGUIFalagardBase">
        <WindowFactory Name="Falagard/Button" />
    </WindowSet>
    <FalagardMapping WindowType="My/Button" TargetType="Falagard/Button" LookNFeel="MyButton" />
</GUIScheme>

How is that ugly?

[TradeMark]

It is REALLY ugly, yes. i just cant read that shit you know, its much easier to read tdf files.

Here is the format what TAS uses in most cases:

Code: Select all

[GUIScheme]{
	Name=MyScheme;
	[Imageset]{
		Name=MyImages;
		Filename=../datafiles/imagesets/MyImages.imageset;
	}
	[LookNFeel]{
		Filename=../datafiles/looknfeel/MySkin.looknfeel;
	}
	[WindowSet]{
		Filename=CEGUIFalagardBase;
		[WindowFactory]{
			Name=Falagard/Button;
		}
	}
	[FalagardMapping]{
		WindowType=My/Button;
		TargetType=Falagard/Button;
		LookNFeel=MyButton;
	}
}

And its much easier to read the variables.
If you use XML and you have like 20 vars in some array, it looks like shit:

Code: Select all

<FalagardMapping WindowType="My/Button" TargetType="Falagard/Button" LookNFeel="MyButton" Filename="../datafiles/looknfeel/MySkin.looknfeel" name="common_keys" chat="return" names="page down" score="insert" next_chat_pos="page up" prev_chat_pos="undefined" next_view="home" prev_view="end" show_radar="delete" sound_pause="f1" sound_next="f2" sound_prev="f3" toggle_fullscreen="f4" pause="pause" step="f12" reset_gamma="f6" increase_gamma="f7" decrease_gamma="f8" quit="undefined" team_chat="enter" show_fps="f5" console="`" show_connections="backspace" disable_backgrounds="f10" screenshot="f11" /> 

You could ofcourse add some line feed, but then we became almost the same as "tdf" format is:

Code: Select all

<FalagardMapping 
	WindowType="My/Button" 
	TargetType="Falagard/Button"
	LookNFeel="MyButton"
	Filename="../datafiles/looknfeel/MySkin.looknfeel" 
	name="common_keys" 
	chat="return" 
	names="page down" 
	score="insert"
	next_chat_pos="page up" 
	prev_chat_pos="undefined"
	next_view="home" 
	prev_view="end" 
	show_radar="delete" 
	sound_pause="f1"
	sound_next="f2"
	sound_prev="f3"
	toggle_fullscreen="f4" 
	pause="pause"
	step="f12"
	reset_gamma="f6"
	increase_gamma="f7" 
	decrease_gamma="f8" 
	quit="undefined"
	team_chat="enter" 
	show_fps="f5" 
	console="`" 
	show_connections="backspace" 
	disable_backgrounds="f10"
	screenshot="f11" 
/> 

But this is even messy to read when we have enough many of this kind of arrays and single line arrays. (extra vars copied from other game XML file).

NO XML!!!

[Egarwaen]

If you use XML and you have like 20 vars in some array, it looks like shit:

Thank you for demonstrating that you have no clue how XML works.

[SinbadEV]

Not to mention I believe he is implimenting an already designed gui parser and redering engine called CEGui that has built in XML formats.

In any case, I know what you mean that well formatted XML is basically the same as a tdf file... I disagree, but I see what you mean.

Code: Select all

<GUIScheme
   name="MyScheme"> 
   <Imageset 
      Name="MyImages"
      Filename="../datafiles/imagesets/MyImages.imageset" 
   />
   <LookNFeel 
      Filename="../datafiles/looknfeel/MySkin.looknfeel" 
   />
   <WindowSet 
      Filename="CEGUIFalagardBase"> 
      <WindowFactory
         Name="Falagard/Button" 
      /> 
   </Windowset>
   <FalagardMapping 
      WindowType="My/Button"
      TargetType="Falagard/Button" 
      LookNFeel="MyButton" 
   />
</GUIScheme>

Code: Select all

[GUIScheme]{ 
   Name=MyScheme; 
   [Imageset]{ 
      Name=MyImages; 
      Filename=../datafiles/imagesets/MyImages.imageset; 
   } 
   [LookNFeel]{ 
      Filename=../datafiles/looknfeel/MySkin.looknfeel; 
   } 
   [WindowSet]{ 
      Filename=CEGUIFalagardBase; 
      [WindowFactory]{ 
         Name=Falagard/Button; 
      } 
   } 
   [FalagardMapping]{ 
      WindowType=My/Button; 
      TargetType=Falagard/Button; 
      LookNFeel=MyButton; 
   } 
}