Developing the Game User Interface (UI)

Lesson 5

Exam Objective MatrixSkills/Concepts MTA Exam ObjectivesManaging 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)

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.

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.

Using Solution Explorer to Add Assets

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();}

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”);/;}

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;

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”);

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.

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

Detecting State of Keys1. 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.

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”);}

Detecting Mouse Position1. 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.

Detecting Xbox 360 Controller State1. 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.

Get Gamepad Statepublic 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); }}

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;}

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.

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.

Creating a Custom Menu1. 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.

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

Examining a Custom Menu

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.

Sample Save-Load Screen

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.

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.

GUI Controls and Event HandlersGUI 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

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.

Sample Checkbox Control

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