Home > FuchsGUI, Games Programming, Graphics, Programming, XNA > XNA FuchsGUI Part I

XNA FuchsGUI Part I

___________________________________________________

1-Introduction to the GUI.
2-Hello control :D.
3-Hello form.
4-Exporting forms easily from Microsoft Visual Studio Designer to FuchsGUI :D.
5-The future of FuchsGUI & some notes.

___________________________________________________

Disclaimer :

-Please before reading note that this gui is for PC only, with some changes it might become runnable at the XBOX360

-The tutorials are for the XNA4.0 version, it’s just a matter of default parameters ( which are not -AFAIK- permitted in .NET3 c# ) , if you’re still using XNA3.1 maybe it’s time to move on :).

-This post doesn’t contain the FuchsGUI dll, please wait for the next post, but I really recommend reading this post if you’re willing to use my gui :).



Introduction:

An important thing any game or simulation needs is a good, reliable & simple graphical user interface (GUI), of course you can use System.Windows.Forms to create a gui for your XNA game but to me I prefer a gui from within the game, XNA code only :D, with this you can place the gui controls anywhere in the game window (I don’t know if it’s possible with Windows forms).

-ALRIGHT get to the the point already!!!
The point is that I’ve recently programmed a simple yet powerful gui library for both XNA3.1 and XNA4.0, The project started with XNA3.1 then was completed in XNA4.0

Here’s a teaser screenshot where I used my gui for an artillery simulation I programmed with two of my colleagues :D

GUIDemo

Please note that blurry text issue is now fixed, check the last part of the tutorial to download the fixed version

might not be that eye-catching cuz I created the textures in a hurry & using only mspaint



The beginning of the project started with my 2D game Space Defender, back then I created two controls classes : a Button class & a Label class.
I didn’t use delegates but rather used a pooling approach where the main game Update method asks each button whether it was clicked this frame or not.

But now I’m using delegates which made using the gui much easier!



What controls do you have?

At first my intention was to program classes for many many controls! with features similar to the controls  of System.Windows.Forms, but then I remembered :D! I need a gui for a game for god’s sake! why make it complex? so I only programmed the most common controls for a game\simulation which are:

-Button: Standered button that is animated on mouse hover\click.

-CircleButton: Just a button with a circular shape to demonstrate how building custom controls is easy (Although the current controls should be enough).

-Label: Basic label supports text wrapping.

-TextBox: Basic Textbox that supports some features like max length allowed for the textbox to contain, char set that contains allowed chars in this textbox… This TextBox doesn’t support multi lines (for now maybe), neither text selection, you can only type\delete chars at the end of the textbox (which is in my humble opinion enough for a game).

-CheckBox: a checkbox that you can check or uncheck ;)

-RadioButton: a radio button that you can radio or…just kidding haha :D, of course the difference between checkboxes and radio buttons is that within a single group only one of the radio buttons can be checked at a time.

-DomainLeftRight: Named after the System.Windows.Forms.DomainUpDown , this control works as a list of objects that you can view by clicking one of the arrows of this control to show the previous\next object in the list.

- PictureBox: A simple control that can display an image stretched, centered, or normal.

-Form: A little similar to the well know form, but you can say that FuchsGUI.Form is a hybrid control between a Form & a GroupBox, A form can contain controls & other forms as well, using forms makes working with gui much much easier, for instance instead of updating & drawing each control individually you can just add them to a form and then call the Update\Draw method of the form, then all children are updated\drawn.



Events supported by FuchsGUI controls:



Events Table

Click : Most obvious event :D , triggered when the controls is clicked (after the mouse button is released).

Mouse Enter : Triggered when the mouse cursor enters the control.

Mouse Leave : Triggered when the mouse cursor leaves the control.

Mouse Move : Triggered when the mouse cursor moves over the control.

Mouse Down : Triggered when the left mouse button is down & the cursor is over the control (before releasing the button).

Change : Triggered when the text in the textbox is changed or when you select another object from the DomainLeftRight.

Toggle : Triggered when the CheckBox “Checked” property is changed either by clicking on the control or from within the code, for the RadioButton it’s triggered when the radio button becomes checked.

Close : Triggered when the form is closed using myForm.Close() where myForm is the name of a FuchsGUI.Form object.

Note : The names of these events are something like “onSomeEvent” eg: onClick, onMouseMove, onChange and so on..

Controls I’m willing to add in the next release are  : ProgressBar, ScrollBar but it’s too early to talk about that :D.
Sorry if there’s no coding in the post but it’s necessary to know the above…The next post will contain the dll and some code samples :D…

About these ads
  1. Fab
    19/04/2011 at 3:56 pm | #1

    Hi,
    Nice library!

    Just a quick feeback :
    Some text look blurry, because their position is a non-integer vector2.
    I use to have the same problem and found a solution there :
    http://forums.create.msdn.com/forums/p/13315/70214.aspx

    • Fuchs
      19/04/2011 at 4:22 pm | #2

      Thanks a lot :D
      Never thought that Vector2 is what causing the problem

  2. 28/01/2012 at 5:03 am | #3

    nice library :)
    add it to http://github.com to collaborate with other developers
    any one could see your code , fix bugs and update issues without accessing your code directly (forking)

    • Fuchs
      28/01/2012 at 7:39 am | #4

      Thanks Mohammad :)
      I’m not yet familiar with with github and such stuff, but I must learn how to use them :)

  3. yaman
    29/01/2012 at 6:59 pm | #5

    Thanks to the library ^_^
    But there is a problem in three-dimensional drawing of the model appear when the application library

    What caused ? And how it can be solved ?

  4. 16/03/2012 at 11:24 pm | #10

    Hey Fuchs! I just wanted to say thank you very much for this library. I will be chronicling my journey’s with it on my own blog.

    • Fuchs
      18/03/2012 at 1:19 am | #11

      Glad you liked it :D

      • 19/03/2012 at 6:24 pm | #12

        I just wanted to check with you. I would like to make some changes to the library, namely the way it deals with the button change. I would like to load a transparent PNG and change color with the Color attribute instead of the method you are using. Would you have a problem with me attempting to do that? And If not it looks like the majority of the button rendering code is in the Button class correct?

        • Fuchs
          19/03/2012 at 6:43 pm | #13

          First of all it’s okay to modify what ever you want just don’t claim that you wrote the code from scratch :)
          About the button color, do you mean when the mouse enters or leaves the button? like having a single image (instead of three) and draw it in different colors depending on the button state? if so then you just need to override the Draw in the button instead of using Control.Draw, you can check the code of Control.Draw and write a similar one in Button.Draw with the changes you need, you’ll also ignore using sourceRectangles if you want to draw the full image of the button.

          About the second question: No, the Button class doesn’t have any rendering code at all, it uses the Draw method defined in its parent class Control.cs

          If I got anything wrong please add more explanation, I’m here to help :).

          • 19/03/2012 at 6:55 pm | #14

            Yes that is what i mean, using one image and changing the button color / hover / click color using Color.Whatever when drawing the button instead of the 3 source rectangles.
            I would not dream of claiming credit for anything other than what I actually do, and plan on giving full credit to every one in my projects when, and if, they are released.

            Thank you very much!

          • Fuchs
            19/03/2012 at 7:50 pm | #15

            You’re welcome!

  5. Fuchs
    06/05/2012 at 10:27 pm | #16

    Code is now also available at CodePlex :D:
    http://fuchsgui.codeplex.com/

  1. 12/02/2011 at 2:49 am | #1
  2. 15/02/2011 at 12:00 am | #2
  3. 15/02/2011 at 6:29 pm | #3
  4. 16/02/2011 at 11:36 pm | #4
  5. 09/04/2011 at 8:11 pm | #5

What do you think?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 191 other followers

%d bloggers like this: