Developing the Game User Interface (UI) Lesson 5

Exam Objective Matrix Skills/ConceptsMTA Exam Objectives Managing the UI AssetsPlan 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 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 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 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 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 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); }

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