Tutorial Buttons

One of my recent tasks was to design a way for buttons to pop up onto the screen.  This would be used to help players use the proper abilities in a tutorial level.


My first task was to design how I wanted to show these buttons exactly. Since this is an XBOX 360 game, I decided using the actual buttons from that pad would be suitable for these popups.  I then decided to add a
small animation that looped between the button being unpressed to the button being pressed; that way it both draws the players attention (since movement catches the eye), and gives the proper information to continue. Here are the two pictures I used for the buttons being unpressed and pressed.

You might notice I altered the perspective on the second picture so it looked like the buttons were being pressed down.


With that done, I needed to design the class that would support this functionality.  Thus, I made the PopupButton class.  Since this could be called from anywhere from within the mechanics of the game, I made it a static class.  I made a simple function called DisplayButton which took in the button to be displayed.  It then loops between the unpressed and pressed state until the RemoveButton function is called.  It's very simple to use, and works as intended.


Finally, I had to add the ability for the button to have text to explain what it was going to do.  For this, I had to delve into the UI that one of our other members had implemented.  By implementing an inheritance class for the tutorial text, I was able to create a UI functionality that displayed a button and text to go alongside it.

At the moment, the tutorial buttons are working great!  Here's a short video showing it in action.