The Anatomy of a Toggle Button

Posted: January 11, 2013 in Game Programming and Design

The Anatomy of a Toggle Button (1/10/2013)
Image
My next task is to create a button which will enable me to allow my unit of little men to move independent of each other.  Right now they have to move as a unit, which is great but not always desirable.

The first piece that I need to overcome is my OCD need for awesome graphics right off the bat.  The graphics I am creating are crappy photoshop graphics but will do what they need to do.

The Problem
First thing, I need to figure out how to represent my button, both graphically and in code.  So I broke out my trusty photoshop and created myself a couple of button images that would represent my new button.

ImageImage

The awesomeness of the graphics aside, those images represent the up and down version of the button.  So now that that was finished, I went ahead and in my project added it to my Content Pipeline.

I created a new folder called OrdersPanel which will allow me to organize my graphical UI elements by panel, instead of just throwing it into a folder without any organization, which will also serve to drive my OCD into a frenzy of annoyance.

Image

Once that was complete, I had to next think about how to implement the images.

Reuse being something that I am fond of, I wanted to go ahead and create an object that would represent a button in my game, as I am pretty sure that there will be many buttons when all is said and done.

So off I went to my main project and under my handy Utilities namespace I created a new namespace called “User Interface” which I would place class objects that would deal with that topic.

Under this I created a new class called “Button”.  A “button” is a simple little creature that requires little.

First, it needs to know what images represent an unpressed, and pressed state.  So I add a couple of properties to hold a pair of textures.

Next, it would be nice to know what the button sounded like when clicked (if anything), so I add a SoundEffect property (contained within XNA.Framework.Audio namespace) to hold its click.

From there I decide I may want to know where the button is located and the best place to store that data would be the button itself, so I create a POINT property called Location that I can set.

Next I realize that there are at least two types of buttons I may be creating… a normal press button, and a toggle switch button.  So I create an enum called UIButtonType which I then assign to a property in the button which lets me know if it’s a OneClick button, or a Toggle button.

Finally, if the button is pressed, I want to store that state, so I create a Toggled Boolean within the button that I can set.

And with that, my button class lives.  Now I need a place to put it.

Adding a New Panel

My User Interface creation skills are legendary even in Hell.  By that I mean I am not very good at it simply because I don’t really do well in Photoshop.  However, the idea in my head currently is that the panel on the main screen is going to be consistent of three informational panels on the bottom.  The first I’ve kind of implemented already (the black box that shows me unit information)

To the right of that is going to be an orders panel.  I envision some kind of awesome heavy metal design there with some buttons.  For now I have to scour the web for something kind of cool and with that implement the button I just created onto that.

When the user clicks that button, it shall be a toggle button, and that means the unit will be broken up into its component models and I will be able to move them freely around!

Inspiration
In my head, I want a backdrop image on the lower right hand panel.  This backdrop will be a panel looking image.  Inside of this I will have a set of buttons.

White buttons are unpressed.  Red buttons indicate that the button is pressed and toggled.

And so armed with this, I have but one last thing remaining, and that is to create the panel image that these will sit in with my deadly and potent Photoshopping skills…

Advertisements

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 )

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