Developing the Game User Interface (UI)

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

2. Exam Objective Matrix

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 LoadContentmethod. 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.VideoPlayervideoPlayer; Microsoft.Xna.Framework.Media.VideovideoObject;

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 • Declare instances of KeyboardState class to hold the last and current state value of the keyboard (LastKeyBoardState, CurrentKeyBoardState). • Assign a value to LastKeyboardState in the game constructor. • Call the GetState method to hold the current keyboard state. • Compare the values of the two keyboard states. • 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 */ SoundEffectsoundOnKeyPressA; KeyboardHandlerkeyHandler; /* 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 • Call Mouse.GetState to get the current state of the mouse. • Use MouseState.X and MouseState.Y to get the position of the mouse in pixels.

15. Detecting Xbox 360 Controller State • Use GetState to determine the current state of the Xbox. • Verify whether the Xbox is connected using the IsConnected property. • 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(GameTimegameTime) { 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 boolisButtonPressed(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 drawablegame 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.Updatemethods for updates.

20. Creating a Custom Menu • Create a MenuItemclass to hold each menu item. • Create the structure to hold the menu items in the MenuComponentclass item. • In the MenuComponentclass, add the addMenuItem and CheckKey methods. Also add the update and draw methods. • Declare an object of MenuComponent.MenuComponentmenuSystem. • Load the required sprite font using LoadContent and add the menu items. • Use the Game.Update method to add an Exit event. • 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 Event Handlers Mouse click Mouse enter Mouse leave Mouse move Mouse down Toggle Close Button press Key press • Button • Label • Textbox • Check box • Radio button • Picture box • Form

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