Xna Controls (Buttons, labels, pictureboxes..)

 

Introduction

Controls can be very useful for any game. If you have ever programmed for winforms, or something of the sort, you know what these are. Controls are items on your screen that the user can interact with or see. Such as (from visual studio): picturebox, label, radio buttons, or textboxes, or buttons. We will not be using these from visual studio, you can’t unless you make a winforms project for xna. You can set what happens when they are selected, moved or anything that has to do with it. Well, it happens that yesterday I made my own control system. I thought everyone would like to see, so here is the article.

Also, I’m making this for windows phone, but the only difference is to use the keyboard or mouse instead of the touchpanel.

Also I am using the game state management sample, not changed in any way.

The classes we will be making include:

  • Control class  – All controls will inherit from this, it will include basic things about controls
  • ControlManager  – Class that will be used to manage controls. Have one for each of your game screens
  • Any custom controls  – We will make a button, label, and picturebox. It is very easy to make your own though

So, let’s get started!

The Control Class

Make a new class called “Control” and add these using statements:

using Microsoft.Xna.Framework;

using Microsoft.Xna.Framework.Graphics;

Now make it public. It should look like this:

 public class Control

Inside the class, add some fields:

string text;

string name;

bool enabled;

Color color;

Vector2 position;

Vector2 size;

SpriteFont font;

These will hold basic information about the control such as the text, name, enabled, color, position, size, and font. The controls that inherit this can use these any way they want. Since they are not public, add some properties for them:

public string Text

{

    get { return text; }

    set { text = value; }

}

public string Name

{

get { return name; }

set { name = value; }

}

public bool Enabled

{

    get { return enabled; }

    set { enabled = value; }

}

public Color Color

{

    get { return color; }

    set { color = value; }

}

public Vector2 Position

{

    get { return position; }

    set { position = value; }

}

public Vector2 Size

{

    get { return size; }

    set { size = value; }

}

public SpriteFont Font

{

    get { return font; }

    set { font = value; }

}

 

There is nothing new here. All the properties are are just linking to the variables themselves. Now for the constructors:

public Control()

    :this(Vector2.Zero)

{

}

public Control(Vector2 position)

{

    this.Position = position;

    text = ” “;

    name = ” “;

    enabled = true;

    color = Color.White;

}

 

The first will accept nothing and link to the second constructor. The second one will initialize all the variables to what they should start as. It accepts a position for where it should be.Add these virtual methods:

public virtual void Update(float elapsedTime)

{

}

public virtual void UpdateInput(InputState input)

{

}

public virtual void Draw(SpriteBatch spriteBatch)

{

}

 

They are just basic methods that we will override in inheriting controls. They will be called from the appropriate methods in your game screens. Notice the InputState parameter of UpdateInput(). That is within the game state sample.

The Control Manager Class

Now for this part. This class will hold all the controls you want. It will also update and draw them when necessary so you don’t have to update and draw each and every one of your controls in your game screen classes. You do not have to add any using statements for this class. But do make it public:

public class ControlManager

 

Now add this dictionary of controls:

Dictionary<string, Control> controls;

 

This dictionary will hold all of our controls. I will make some methods to do things like removing, adding, and getting controls. Now add the constructor:

public ControlManager()

{

    controls = new Dictionary<string, Control>();

}

 

This will just create the controls dictionary.  Add all of these methods now:

public void Update(float elapsedTime)

{

    foreach (var control in controls)

    {

        control.Value.Update(elapsedTime);

    }

}

public void UpdateInput(InputState input)

{

    foreach (var control in controls)

    {

        control.Value.UpdateInput(input);

    }

}

public void Draw(Microsoft.Xna.Framework.Graphics.SpriteBatch spriteBatch)

{

    foreach (var control in controls)

    {

        control.Value.Draw(spriteBatch);

    }

}

 

These methods can be called and will update and draw all of the controls, so you don’t have to in the main class. These foreach loops are different than normal. For dictionaries, you don’t only have a value, but also an id. So, for each object in controls dictionary, you call the value because you want the value. If you wanted to get the id, (the string name, in this case) then you would say ID instead of value.Now for some helper methods:

public Control GetControl(string key)

{

    return controls[key];

}

public void AddControl(string key, Control value)

{

    controls.Add(key, value);

}

public void RemoveControl(string key)

{

    controls.Remove(key);

}

 

The first will get a control with the key parameter, so you can manipulate it and such. The other two are very self explanatory (adding one, removing one).So, that is all for the control manager class. Next, we will be making some controls to go with it.

 Continued in Part 2!

Advertisements
    • Filip
    • January 8th, 2012

    hi there, i am trying your tutorial and so far had no problem with it, but somehow i can’t figure out what is InputState. I can’t find any references on web, so i think it must be your own class, but i don’t understand this: “Notice the InputState parameter of UpdateInput(). That is within the game state sample.” what is game state sample and where can i find it?
    thanks in advance.

    • The game state management sample is on the app hub site. You can go to create.msdn.com and look in the education catalog, or search for “xna game state management sample” and it should come up. The sample is a great thing to use to make screens in your game, such as menus, pause screens, etc. If you need any more help, just ask.

  1. No trackbacks yet.

Leave a Reply

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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s

Advertisements
%d bloggers like this: