Developing the Game User Interface (UI)

Lesson 5

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)

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 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.

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 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.

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.

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 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.

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

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