CSE 380 – Computer Game ProgrammingGUIs for Games

Game GUI Controls

• Stylistically fit in with game theme– drawn as artwork– careful font/color selection

• Same rules should apply as with other GUIs– align components– uniform style– balance– clarity (single word options are best)– keep it simple– minimize depth– don’t make assumptions about your player’s IQ

What are Game GUIs for?

• Starting/Stopping games

– New Game, Save Game, Load Game, Pause, Continue, Quit

• Game Options

– level of difficulty

– character selection & properties (RPG in particular)

– chapter selection

• Custom Controls Setup

• In-game Decisions (strategy in particular)

• Providing Help

Menu vs. In Game Controls

• Menu controls, typically– simple, elegant– textual– centered on screen– allows for menu tabbling– tied to game controllers as well

• In-game controls, typically– graphical– at bottom of screen– carefully grouped– tied to keystrokes for PC gaming (very important)

Halo’s Menu GUI

Starcraft’s In-game GUI

How might we make a GUI?

• We’ll build our own buttons

We know how do render images

• Use images to render:– buttons– cursor– other GUI images

• For buttons, use 2 images– mouse over– normal– each frame update the state based on mouse position

How do we test if the mouse is over a button?

void Button::updateMouseOver(POINT *mousePoint)

{

// IS THE CURSOR OVER THIS BUTTON?

if ((mousePoint->x >= x) &&

(mousePoint->x <= x + width) &&

(mousePoint->y >= y) &&

(mousePoint->y <= y + height) )

{

mouseOver = true;

}

else

{

mouseOver = false;

}

}

Render Lists• Common approach in games

• Each frame:

– make a list of items to render

– iterate through the list and render each item

– throw out the list

• RenderList is built and destroyed each frame

• We’ll use 2 render lists:

– one for the GUI

– one for the game world

Render List Cheating

• We’re not really going to use a list

• Why?– we don’t want to allocate memory dynamically

• Instead, we’ll use a giant array and pretend it’s a list– give the array a max size– don’t exceed that max size

A note about platform independence

• Today our game’s graphics are drawn using DirectX

• Tomorrow we may wish to use OpenGL

• How can we minimize the difficulty of switching?– virtual functions– See:

• GameGraphics & DirectXGameGraphics

• TextureManager & DirectXTextureManager

To maximize platform independence

• Confine technology-specific types and methods to technology-specific classes

• Don’t let DirectX spill over into your data management classes

How do we respond to input?

1. Get Input

1. If game state is in main menu• Process input for main menu screen components• Draw main menu screen

• Main Menu GUI

2. If game state is in game• Process input for game screen components• Draw game screen

• Game GUI & Game World

Getting Input

• We’ll use Windows methods

• To test if a key is currently pressed:– GetAsyncKeyState(key) & 0X8000

• To get the current mouse position:– GetCursorPos(mousePoint);

• To test if a mouse button is currently pressed:– GetAsyncKeyState(VK_LBUTTON) & 0X8000

Each Frame

• We update data for:– all keys

• first key press?

• fill out struct for each key

– mouse/cursor position– is mouse over buttons?

GameInput

• Each frame:

void GameInput::processInput(Game *game, WINDOWINFO wi)

{

updateCursorPosition(wi, game->getGUI()->getCursor());

updateInputState();

respondToKeyboardInput(game);

respondToMouseInput(game);

}

Custom Behavior

• In the example I’ve given you, I have:– a core library– a custom example game

• Customized behavior is loaded by key child classes:– DirectXGraphics– XButtonEventHandler– XKeyEventHandler– XTextGenerator

Questions for you to figure out

• Where is the programmed response to hitting SHIFT-C?

• In what order are the GUI items rendered?

• How can I speed up or slow down the frame rate?

• How can you render something as more transparent?

• How can we render changing text?

• How can we render a Mini Map?

Mini-Map Rendering

• Naive Approach 1:– scale and render images on the fly

• Naive Approach 2:– pre scale images, render individually on the fly

• Improved Approach– pre build mini-map image for each level– render as single image

Mini-Map Rendering – How?

• Build off-screen surface as render target– CreateRenderTarget

• Render scaled version of world to surface– StretchRect

• Save to File as Image– D3DXSaveSurfaceToFileA

• Refs: see schedule page for DirectX9 & Util APIs