LECTURE 9Announcements

Platformer3 feedback• Not many handins with

pathfinding• Platformer4 is all

gameplay (and a bit of UI)– Due after spring break

• Week after is *just* final design– No coding due that week– Use it to catch up!

Final Idea handins• Some of you have yet to hand in a

final idea document• You will receive an NC (with no retries)

unless you do so by 5pm• Please submit using <cs1972_handin

finalidea>• Pitches later today in class!

UTA info session• We should be done by around 4pm• If you *need* to go (i.e. you are

presenting something), let us know– You can do your final pitch first

• For those of you who have taken CS1971, apply to UTA!

No more design checks!• Platformer4 doesn’t have any design

checks• Only one more design meeting– Final group – these will be after spring

break

• Enjoy your extra 15 minutes a week!

LECTURE 9User Interfaces

(Common Engine)

USER INTERFACESUser Interfaces (Common Engine)

Many shades of UI• Heads-up display (HUD)

– Persistent 2D elements drawn over the game• Ex. your health & resources, minimap, available actions/cooldowns

• Separate screens/overlays– Inventory, menus, shops, dialog

• Orthographic UI– 2D elements drawn in the 3D scene

• Ex. entity health bars, tips, popup dialog, 2D special effects• Usually doesn’t scale with camera distance

Heads-Up Display

HUD(League of Legends)

Game stats (KDA)

Minimap

Player stats & inventory

Player health & abilities

(most important)

HUD Clarity

• The HUD takes up minimal screen space• Each different type of information is placed

in a distinct and isolated area of the screen

HUD Clarity• Deciding where to put information

(and how to group it) is very important– In League, there can be many passive

effects on your character at once‘Battle’ effects

go here‘Other’ effects go here

HUD Clarity• But League is a battle arena (MOBA) game,

so almost every effect is battle-related– The developers had to split them somewhat

arbitrarily, which caused a lot of confusion

‘Battle’ effects go here‘Other’ effects go here

Orthographic UI

Tooltips(Guild Wars)

Health bars & Damage(World of Warcraft)

Orthographic UI

Dialog(Runescape)

“MEDIC!”(Team Fortress 2)

Basic orthographic UIGLint view[4];glGetIntegerv(GL_VIEWPORT, view);glMatrixMode(GL_PROJECTION); glPushMatrix();glLoadIdentity();// below is just one way to set up the view, see GL docsglOrtho(view[0], view[2], view[1], view[3], -1, 1);glMatrixMode(GL_MODELVIEW); glPushMatrix();glLoadIdentity();//... drawing codeglMatrixMode(GL_PROJECTION); glPopMatrix();glMatrixMode(GL_VIEWPORT); glPopMatrix();

How to Orthographic UIint view[4]; double model[16], proj[16];

glGetDoublev(GL_MODELVIEW_MATRIX, model);glGetDoublev(GL_PROJECTION_MATRIX, proj);glGetIntegerv(GL_VIEWPORT, view);

double sx, sy, sz; // screen-space coordinatesgluProject(pos.x, pos.y, pos.z, model, proj, view, &sx, &sy, &sz);

// 2D drawing code using sx & sy// If sz > 1, the object is behind you!

Integrating this?• Remember the basic application?

class Application {public:

void onTick(long nanos);void onDraw(Graphics *g);void onUI(Graphics *g); // same thing in Screen,

etc…void onKeyPressed(QKeyEvent *event);// more device and event types here...void onMouseDragged(QMouseEvent *event);

}

Your Orthographic UI• You are required to implement some

use of orthographic UI in platformer 4– Try to think of something unique and

interesting to your game concept!• (Health bars are still acceptable)

• You could also make even more awesome UI…

3D-Integrated UI

Minimap(Far Cry 2)

Instructions(Splinter Cell)

3D-Integrated UI

All user interfaces as in-game holograms(Dead Space)

QUESTIONS?User Interfaces

GAME DESIGNWith Zach Davis!

UNSTRUCTURED TALK TIME

Game Design

FINAL IDEAS!You have 60 seconds…

Presentation order:• dollymsq • mthiesme• mjm9• iebaker • jts1 • vmorgowi • ltbarnes • parosenb • sj4

• bmost • lfraker • vhwu • ayousufi • vvignale • nvirdy• jr51 • sgondelm

PLATFORMER3PLAYTESTING!