Advertisement Jump to content
  • Advertisement
  • entries
  • comments
  • views


Sign in to follow this  


I'm still really interested in your input on the questions from my last post about game UIs.

For my system (for now), I've decided to just stick with a plain, texture-less implementation. HOWEVER, I have pretty much designed so that I could add textures at a later date (or even a skinning system <_< >_>.)
The system is really simple ATM; I've not implemented input-handling or anything of that razz-matazz. Basically, every control has a couple major items:
+ A list of Components
+ A list of Controls
+ A ClientMargin value

The list of components stores the control's non-client components. This could contain drag-bars, system-menu buttons, buttons on a scroll-bar, etc. This is actually a little more complex than what I'm looking for and as such, I've not actually implemented it. These items are rendered based on the control's top-left point and are not clipped. Non-client controls are considered during initial mouse-input processing.

The list of controls stores all of the control's children (except non-client ones.) These items are rendered based on the controls client rectangle and are clipped using that same rectangle. These controls are not considered during initial mouse-input processing.

The ClientMargin value is a System.Windows.Forms.Padding value that tells the system how to layout controls and how to calculate the client rect.

Here is an example (note that the background image is from DeviantArt; I did not make it. I downloaded it a while back because it works well for this exact scenario (testing how renderings do when rendered on top of something with varying colors and brightnesses.)):

The panel on the left has a ClientMargin value of { 3, Font.LineHeight + 2, 3, 3, 3 } (if ShowCaption is true and Font is not null), other wise it has a padding of 3. The text "Caption Text" would be a non-client control (a simple Label.) If I wanted to, I could implement a TitleBarComponent class that has all of the behavior code for dragging the panel around (just an example.)

The panel on the right is a plain panel with a padding of 3 and a label set to { Panel.ClientSize.Width, Font.LineHeight + 2 }.

Anyway, I like the system so far; it's flexible enough to allow me to implement any control I've thought up so far, yet simple enough to not be a PITA to develop.

For those interested, here's the code for the above. Please don't mind the mess; I've been back and forth on this code, changing all kinds of things, moving things around, adding things, removing things, etc. So, it's very hacked together, but it'll give you an idea:

renderer = new Render2D.Renderer(GraphicsDevice);
font = new Dubnium.UI.BitmapFont(GraphicsDevice, "CourierNew.fnt");
uiManager = new Dubnium.UI.UIManager(GraphicsDevice, renderer);

var Panel = new Dubnium.UI.Panel
Font = font,
Position = new Point(100, 100),
Size = new Size(300, 300),
BackColors = new Render2D.BackgroundColors(Color.FromArgb(192, Color.Black)),
BorderColors = new BorderColors(Color.Gold),
Text = "Caption Text",
TextColor = Color.Gold,
ShowCaption = true,

string LabelText = "Some Text";
Size labelSize = font.MeasureString(LabelText);
var Label = new Dubnium.UI.Label
Text = LabelText,
Position = new Point(0, 0),
Size = labelSize,
BackColors = new Render2D.BackgroundColors(Color.Transparent),
BorderColors = new Render2D.BorderColors(Color.Transparent),
TextColor = Color.Silver,

Panel = new Dubnium.UI.Panel
Font = font,
Position = new Point(500, 100),
Size = new Size(300, 300),
BorderColors = new BorderColors(Color.Black),
BackColors = new BackgroundColors(Color.FromArgb(192, Color.White)),

Label = new Dubnium.UI.Label
Text = LabelText,
Position = Point.Empty,
Size = new Size(Panel.ClientSize.Width, labelSize.Height),
BackColors = new Render2D.BackgroundColors(Color.Transparent),
BorderColors = new Render2D.BorderColors(Color.Black),
TextColor = Color.Black,


// In Update()

// In Frame()
renderer.DrawTexture(backTexture, 0.0f, 0.0f, 0.0f, 0.0f, new Rectangle(Point.Empty, backTexture.GetDimensions()), Render2D.RenderOptions.None, new Render2D.BackgroundColors(Color.White));

Render2D is my rendering library. Render2D.BackgroundColors works similar to Padding; I can supply one color value for all or values for the TopLeft, TopRight, BottomLeft, and BottomRight corners of a quad. This works much better than coding up a method for taking one variable and a method for taking all four. It also allows me to have that flexibility with my sprite system without having an array of Color values and worrying about which index is for which corner. BorderColors works in the same way except that instead of corners it works for sides (Left, Top, Right, and Bottom.)

I don't specify a font for every control because each control traverses up through it's parents until it finds a valid one.

Alrighty, long day ahead of me, so I'm off to bed. Any comments/suggestions are welcome on this post and my previous one.
Sign in to follow this  


Recommended Comments

There are no comments to display.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Advertisement

Important Information

By using, you agree to our community Guidelines, Terms of Use, and Privacy Policy. is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!