MTA Game Development

1. Developing the Game User Interface (UI)
Lesson 5

2. Exam Objective Matrix
Skills/Concepts MTA Exam Objectives
Managing the UI Assets Plan for game state (3.2)
Design the user interface (1.4)
Capture user data (1.6)
Work with XNA (1.7)
Programming the UI Game
States
Design the user interface (1.4)
Work with XNA (1.7)
Programming the UI Access
Mechanisms
Design the user interface (1.4)
Work with XNA (1.7)

3. Managing the UI Assets
• UI is a collective term used to refer to the
onscreen elements through which a player
interacts with the game.
– The UI helps the player access information
about the game world and the status of his or
her character.
• The UI assets designed previously—such as
menu, sprites, and GUI controls—need to be
created or loaded in the XNA Framework before
you can add code to make them functional in
your game.

4. Loading UI Assets
• To access game assets at run time for
immediate use, XNA Framework 4.0
provides you with the content pipeline.
– The content pipeline allows you to include
the necessary game assets in the form of
managed code object in the game’s
executable.
– To make your game assets available to the
content pipeline, you need to load the
required asset to the game content project.

5. Using Solution Explorer to Add Assets

6. Loading Assets Into the Game
• Load assets into the game code by
overriding the LoadContent method.
protected override void LoadContent()
{
/* the Content.Load method loads a game asset
that has been processed by the content
pipeline */
Texture2D backgroundScreen =
Content.Load<Texture2D>(@”Background”);
Base.LoadContent();
}

7. Configuring Audio
• Playing a loaded audio file when a menu is
displayed.
protected override void LoadContent()
{
/* Create a new SpriteBatch, which can be used to
draw textures.*/
spriteBatch = new SpriteBatch(GraphicsDevice);
soundOnMenuDisplay =
Content.Load<SoundEffect>(@”your sound file
name”);
/;
}

8. Configuring Video
• First create an object of Video class to
represent the file.
/*Define an object for video player and video .*/
Microsoft.Xna.Framework.Media.VideoPlayer
videoPlayer;
Microsoft.Xna.Framework.Media.Video videoObject;

9. Configuring Video
• Next, create a VideoPlayer object to
provide the player controls.
/*.Initialize video player in Game.Initialize()*/
videoPlayer = new
Microsoft.Xna.Framework.Media.VideoPlayer();
/*Load the media file you want to play in video
player in Game.LoadContent()*/
videoObject=
content.Load<Microsoft.Xna.Framework.Media.Video>(
@”your video file path”);

10. Configuring Player Inputs
• You can retrieve user inputs from the respective
input device such as a mouse or a keyboard to
map the captured data to the desired UI asset.
• XNA 4.0 includes all the functionalities required
to capture the current state of the input devices,
such as the keyboard, mouse, and joystick.
– You simply need to access the specific classes
and structures provided in the
Microsoft.Xna.Framework.Input
namespace.

11. Input Namespace Structures
• GamePadButtons
– Identifies whether buttons on the Xbox controller are pressed or
released
• GamePadCapabilities
– Identifies the capabilities and type of Xbox controller
• GamePadState
– Describes the current state of Xbox controller
• GamePadThumbSticks
– Represents the position of left and right sticks
• MouseState
– Represents the current state of the mouse
• Keyboardstate
– Represents the state of keystrokes recorded by a keyboard

12. Detecting State of Keys
1. Declare instances of KeyboardState class to hold the
last and current state value of the keyboard
(LastKeyBoardState, CurrentKeyBoardState).
2. Assign a value to LastKeyboardState in the game
constructor.
3. Call the GetState method to hold the current
keyboard state.
4. Compare the values of the two keyboard states.
5. Update the LastKeyboardState to hold the current
keyboard state.

13. Play a Sound on Keyboard Key Press
/* declare an object of SoundEffect and an object of
KeyboardHandler in your Game class in the
XNAKeyboardHandler project */
SoundEffect soundOnKeyPressA;
KeyboardHandler keyHandler;
/* modify the LoadContent method as shown below */
protected override void LoadContent()
{
/* create a new SpriteBatch, which can be used to draw
textures */
spriteBatch = new SpriteBatch(GraphicsDevice);
soundOnKeyPressA = Content.Load<SoundEffect>(@”your
sound file name”);
}

14. Detecting Mouse Position
1. Call Mouse.GetState to get the current
state of the mouse.
2. Use MouseState.X and
MouseState.Y to get the position of the
mouse in pixels.

15. Detecting Xbox 360 Controller State
1. Use GetState to determine the current
state of the Xbox.
2. Verify whether the Xbox is connected
using the IsConnected property.
3. Get the values of the buttons you want to
check if pressed currently. For any
button, if the value is Pressed, it means
the button is currently pressed by the
player.

16. Get Gamepad State
public XNAGamePad()
{
/ To get the state of GamePad you need PlayerIndex that
specifies which GamePad’s state is queried. XBOX supports
multiple GamePads at same time */
currentGamepadState = GamePad.GetState(PlayerIndex.One);
}
public void update(GameTime gameTime)
{
if (GamePad.GetState(PlayerIndex.One) != currentGamepadState)
{
previousGamepadState = currentGamepadState;
currentGamepadState = GamePad.GetState(PlayerIndex.One);
}
}

17. Check For Specific Button Press
/* Check for specific button press */
public bool isButtonPressed(Buttons btn )
{
currentGamepadState = GamePad.GetState(PlayerIndex.One);
if (currentGamepadState.IsConnected &&
currentGamepadState.IsButtonDown(btn))
{
return true;
}
return false;
}

18. Creating Menus
• You can use menus to provide players
with a list of options.
– You can use menus as part of the game
story or the game space.
– You can also use menus as a nondiegetic
component on a welcome or opening
screen, where players can select the
activity they want to perform.

19. Menus as Drawable Game Components
• You can create menus as drawable game
components and then add them to your game’s
content solution to access it in the code.
– This provides a modular approach to adding graphics
content to your game.
– Register the component with your game class by
passing the component to the
Game.Components.Add method.
– Use the Game.Initialize, Game.Draw and
Game.Update methods for updates.

20. Creating a Custom Menu
1. Create a MenuItem class to hold each menu item.
2. Create the structure to hold the menu items in the
MenuComponent class item.
3. In the MenuComponent class, add the addMenuItem
and CheckKey methods. Also add the update and
draw methods.
4. Declare an object of MenuComponent.
MenuComponent menuSystem.
5. Load the required sprite font using LoadContent and
add the menu items.
6. Use the Game.Update method to add an Exit event.
7. Override the Draw method to include the sprite
batches.

21. Creating the Custom Menu
• The sample code in the textbook creates a class named
MenuItem to hold the information of each of the menu
item, such as the item name and its position on the
screen.
• The code then creates a DrawableGameComponent
class type called MenuComponent.
• This MenuComponent class performs the following
tasks:
– Creates the list of menu items
– Tracks the key press generated from the keyboard
and accordingly selects a particular menu
– Draws each menu item and displays the selected
menu item in a different color

22. Examining a Custom Menu

23. Managing Save-Load
• Managing save-load involves providing the
player with an option for saving and
loading the game from a specific point or
level.
– Allows the player can replay the current
level with a new inventory.
– Allows the player can use to save and/or
load the game from a specific point or
level.

24. Sample Save-Load Screen

25. Defining UI Behavior Using States
• Defining the various valid states for your
UI objects helps your game to decide what
action to perform when in that state.
– You can declare a variable to store the
value of the game state at any point in the
game.
– The game state variable can assume
Boolean values or custom-enumerated
values.
– The game state variable is instrumental in
managing the game states.

26. Programming the UI Access Mechanisms
• Programming UI access mechanisms
involve creating the required GUI controls
for your game.
– For example, a player can save or load a
game with the click of a button or select the
required tools for his inventory by selecting
the options given in a check box.
– GUI controls have become an integral part
of game programming.

27. GUI Controls and Event Handlers
GUI Controls
• Button
• Label
• Textbox
• Check box
• Radio button
• Picture box
• Form
Event Handlers
• Mouse click
• Mouse enter
• Mouse leave
• Mouse move
• Mouse down
• Toggle
• Close
• Button press
• Key press

28. Example: Creating a Check Box
• Steps required:
– Create a check box control.
– Create the method that contains the code
to be executed when the check box is
selected.
– Create an OnClick event handler that
maps the check box control with its
corresponding method.

29. Sample Checkbox Control

30. Recap
• Managing the UI Assets
• Loading UI Assets
• Using Solution Explorer to Add
Assets
• Loading Assets Into the Game
• Configuring Audio
• Configuring Video
• Configuring Player Inputs
• Input namespace structures
• Detecting State of Keys
• Play a Sound on Keyboard Key
Press
• Detecting Mouse Position
• Detecting Xbox 360 Controller
State
• Get Gamepad State
• Check For Specific Button Press
• Creating Menus
• Menus as Drawable Game
Components
• Creating a Custom Menu
• Managing Save-Load
• Defining UI Behavior Using
States
• Programming the UI Access
Mechanisms