developing the game user interface (ui)
DESCRIPTION
Developing the Game User Interface (UI). Lesson 5. Exam Objective Matrix. Managing the UI Assets. UI is a collective term used to refer to the onscreen elements through which a player interacts with the game. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/1.jpg)
Developing the Game User Interface (UI)
Lesson 5
![Page 2: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/2.jpg)
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)
![Page 3: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/3.jpg)
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.
![Page 4: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/4.jpg)
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.
![Page 5: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/5.jpg)
Using Solution Explorer to Add Assets
![Page 6: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/6.jpg)
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();}
![Page 7: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/7.jpg)
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”);/;}
![Page 8: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/8.jpg)
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;
![Page 9: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/9.jpg)
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”);
![Page 10: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/10.jpg)
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.
![Page 11: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/11.jpg)
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
![Page 12: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/12.jpg)
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.
![Page 13: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/13.jpg)
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”);}
![Page 14: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/14.jpg)
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.
![Page 15: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/15.jpg)
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.
![Page 16: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/16.jpg)
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); }}
![Page 17: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/17.jpg)
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;}
![Page 18: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/18.jpg)
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.
![Page 19: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/19.jpg)
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.
![Page 20: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/20.jpg)
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.
![Page 21: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/21.jpg)
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
![Page 22: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/22.jpg)
Examining a Custom Menu
![Page 23: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/23.jpg)
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.
![Page 24: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/24.jpg)
Sample Save-Load Screen
![Page 25: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/25.jpg)
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.
![Page 26: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/26.jpg)
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.
![Page 27: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/27.jpg)
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
![Page 28: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/28.jpg)
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.
![Page 29: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/29.jpg)
Sample Checkbox Control
![Page 30: Developing the Game User Interface (UI)](https://reader035.vdocuments.net/reader035/viewer/2022062811/56815ed9550346895dcd7615/html5/thumbnails/30.jpg)
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