Developing the Game User Interface (UI)
description
Transcript of Developing the Game User Interface (UI)
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