Game Interface Design

233 Pages·2004·5.071 MB·English

by  Fox B.

Game Interface
Design
Brent Fox
© 2005 by Thomson Course Technology PTR.All rights reserved.No part ofthis book may be reproduced SVP,Thomson Course
or transmitted in any form or by any means,electronic or mechanical,including photocopying,record- Technology PTR:
ing,or by any information storage or retrieval system without written permission from Thomson Course Andy Shafran
Technology PTR,except for the inclusion ofbriefquotations in a review.
Publisher:
The Premier Press and Thomson Course Technology PTR logo and related trade dress are trademarks of Stacy L.Hiquet
Thomson Course Technology PTR and may not be used without written permission.
Senior Marketing Manager:
Trial version ofFlash MX 2004 is Copyright © Macromedia® Flash™ MX 2004.Macromedia,Inc.and its Sarah O’Donnell
suppliers.All rights reserved.
Marketing Manager:
All other trademarks are the property oftheir respective owners. Heather Hurley
Important:Thomson Course Technology PTR cannot provide software support.Please contact the appro- Manager ofEditorial Services:
priate software manufacturer’s technical support line or Web site for assistance. Heather Talbot
Thomson Course Technology PTR and the author have attempted throughout this book to distinguish Senior Acquisitions Editor:
proprietary trademarks from descriptive terms by following the capitalization style used by the manufac- Emi Smith
turer.
Senior Editor:
Information contained in this book has been obtained by Thomson Course Technology PTR from sources Mark Garvey
believed to be reliable.However,because ofthe possibility ofhuman or mechanical error by our sources,
Associate Marketing Manager:
Thomson Course Technology PTR,or others,the Publisher does not guarantee the accuracy,adequacy,or
Kristin Eisenzopf
completeness ofany information and is not responsible for any errors or omissions or the results obtained
Marketing Coordinator:
from use ofsuch information.Readers should be particularly aware ofthe fact that the Internet is an ever-
Jordan Casey
changing entity.Some facts may have changed since this book went to press.
Project Editor/Copy Editor:
Educational facilities,companies,and organizations interested in multiple copies or licensing ofthis book
Estelle Manticas
should contact the publisher for quantity discount information.Training manuals,CD-ROMs,and por-
tions ofthis book are also available individually or can be tailored for specific needs. Technical Reviewer:
Les Pardew
ISBN:1-59200-593-4
Library ofCongress Catalog Card Number:2004111222 PTR Editorial Services
Coordinator:
Printed in the United States ofAmerica
Elizabeth Furbish
04 05 06 07 08 BU 10 9 8 7 6 5 4 3 2 1
Interior Layout Tech:
William Hartman
Cover Designer:
Mike Tanamachi
CD-ROM Producer:
Brandon Penticuff
Indexer:
Kelly Talbot
Proofreader:
Thomson Course Technology PTR, a division of Thomson Course Technology
25 Thomson Place ■ Boston, MA 02210 ■ http://www.courseptr.com Gene Redding
For my wife Amy, a beautiful and intelligent woman.
Without her support and patience, I would not be the person I am today.
Acknowledgments
M I also want to give a special thanks to
any people worked hard
my family for their patience while I
to make this book possi-
spent many hours away from them
ble. Steve Taylor helped
working on this book.
immensely with the content; he pro-
vided technical information and even
some early editing.I thank my editor,
Estelle Manticas, for the many hours
she spent helping me through the
writing process. Thanks to Les
Pardew, my technical editor and an
all around good guy. Also, thanks
go to Emi Smith and the entire team
at Premier Press, who not only pro-
vided the opportunity to write this
book, but also shared their expertise
with me.
About the Author
B Brent has not only created art for the
rent Fox worked his way
games he has worked on, but he has
through college as an art
also served as project manager and art
director for a package design
director on many other games as well.
company.While in college,he took a
He has managed development teams
class in 3D animation and was
with up to 28 team members.He has
hooked. Brent received his degree
created artwork for games published
in Graphic Design from Brigham
by Blizzard, EA, Midway, 3DO, and
Young University, and shortly after
Konami,just to name a few.His pub-
graduation he began creating video
lished title list includes games such as
games. He has worked in the video
Brood War(aStarcraftexpansion set),
game industry for more than eight
Army Men: Sarge’s Heroes, and many
years, and he has worked on games
more.
for a wide variety of platforms.
His title list includes games on the
PC, Game Boy Color, PlayStation,
Nintendo 64,Dreamcast,PlayStation
2,and GameCube.
Contents at a Glance
Introduction..............................................................................................................xv
Chapter 1
Introduction to Video Games....................................................................................1
Chapter 2
Planning Menu Flow..................................................................................................7
Chapter 3
The Look and Feel of Your Interface......................................................................27
Chapter 4
Basic Design Principles.............................................................................................43
Chapter 5
Console or PC?.........................................................................................................61
Chapter 6
Button States............................................................................................................73
Chapter 7
Creating a Focal Point.............................................................................................81
Contents at a Glance vii
Chapter 8
Using Text in Your Interface....................................................................................87
Chapter 9
Technical Requirements and Tricks.........................................................................99
Chapter 10
Tools of the Trade..................................................................................................113
Chapter 11
Using Animation....................................................................................................125
Chapter 12
Icons, Icons, Icons...................................................................................................139
Chapter 13
Designing the HUD................................................................................................145
Chapter 14
Designing an Interface..........................................................................................155
Chapter 15
Creating an Interactive Mock-Up..........................................................................179
Index.......................................................................................................................199
Contents
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . .xv Game Design Goals . . . . . . . . . . . . . . . . . . . . . . . . . . . .10
Possible Game Goals . . . . . . . . . . . . . . . . . . . . . . .11
Chapter 1 Breaking Down Your Goal into Specifics . . . . . . .12
Introduction to Video Games . . . . . . . . . . . . . . .1 How Priorities Affect Decision-Making . . . . . . . . .12
The Importance of the Interface . . . . . . . . . . . . . . . . . . .1 Charting Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13
Real-Life Game Development . . . . . . . . . . . . . . . . . . . . .2 Button Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17
Working with a Team . . . . . . . . . . . . . . . . . . . . . . . . . . .3 Sliders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19
Listen to Others . . . . . . . . . . . . . . . . . . . . . . . . . . .4 Toggle Switches . . . . . . . . . . . . . . . . . . . . . . . . . . .19
Ask Questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4 Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20
A Career in Video Games . . . . . . . . . . . . . . . . . . . . . . . . .4 Input Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20
The Publisher / Developer Relationship . . . . . . . . . . . . . .5 Drop-Down Menus . . . . . . . . . . . . . . . . . . . . . . . .22
Other Variations . . . . . . . . . . . . . . . . . . . . . . . . . .22
Chapter 2 Common Menu Screens . . . . . . . . . . . . . . . . . . . . . . . . .23
Planning Menu Flow . . . . . . . . . . . . . . . . . . . . . .7 Simplicity versus Depth . . . . . . . . . . . . . . . . . . . . . . . . .23
Why Is Planning So Valuable? . . . . . . . . . . . . . . . . . . . . .7 Planning for HUD . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24
Creativity in Planning . . . . . . . . . . . . . . . . . . . . . . . . . . .8 Creativity versus Conventional Methods . . . . . . . . . . . .25
Getting Approval . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
Interface Planning Helps Game Design . . . . . . . . . . . . .10
Contents ix
Chapter 3 Finding Complementary Colors . . . . . . . . . . . . . . .45
The Look and Feel of Your Interface . . . . . . . . .27 Using More Than Two Colors . . . . . . . . . . . . . . . .47
Define a Look . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .27 Subjective Color . . . . . . . . . . . . . . . . . . . . . . . . . .48
Create a Mock-Up . . . . . . . . . . . . . . . . . . . . . . . . .27 Balancing Color Strength . . . . . . . . . . . . . . . . . . .49
Working with Logos . . . . . . . . . . . . . . . . . . . . . . .29 Warm and Cold Colors . . . . . . . . . . . . . . . . . . . . .49
Define a Color Scheme . . . . . . . . . . . . . . . . . . . . .29 Color on a Monitor or TV . . . . . . . . . . . . . . . . . . .50
Express Yourself in the Design . . . . . . . . . . . . . . . . . . . .31 Creating Digital Colors . . . . . . . . . . . . . . . . . . . . .51
Research and Inspiration . . . . . . . . . . . . . . . . . . . . . . . .32 Visual Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . .53
Make Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32 Unity and Variation . . . . . . . . . . . . . . . . . . . . . . . . . . . .54
Search for Images . . . . . . . . . . . . . . . . . . . . . . . . .32 Negative Space . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55
Thumbnails . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33 Movement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55
Work Quickly . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34 Eye Movement . . . . . . . . . . . . . . . . . . . . . . . . . . .56
Push for Variation . . . . . . . . . . . . . . . . . . . . . . . . .34 Balance and Weight . . . . . . . . . . . . . . . . . . . . . . . . . . .57
Creativity versus Standards . . . . . . . . . . . . . . . . . . . . . .35 Unbalancing Your Design to Create Tension . . . .58
Using Photographs . . . . . . . . . . . . . . . . . . . . . . . . . . . .35 Odd Numbers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59
Illustrations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37 Dividing an Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59
3D Solutions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38 Intersections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60
Pre-Rendered 2D Art . . . . . . . . . . . . . . . . . . . . . . .38 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60
Involve the Programmers . . . . . . . . . . . . . . . . . . .39
Chapter 5
Combining 3D and 2D . . . . . . . . . . . . . . . . . . . . . .39
Console or PC? . . . . . . . . . . . . . . . . . . . . . . . . . .61
3D Challenges . . . . . . . . . . . . . . . . . . . . . . . . . . . .39
Don’t Get Too Attached to Your Ideas . . . . . . . . . . . . .40 Bad Conversions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .61
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41 Console Development . . . . . . . . . . . . . . . . . . . . . . . . . .62
Console Hardware Manufacturers . . . . . . . . . . . .62
Chapter 4 Developer Approval . . . . . . . . . . . . . . . . . . . . . . .62
Basic Design Principles . . . . . . . . . . . . . . . . . . . .43 Concept Approval . . . . . . . . . . . . . . . . . . . . . . . . .63
Getting Back to Basics . . . . . . . . . . . . . . . . . . . . . . . . . .43 Technical Approval . . . . . . . . . . . . . . . . . . . . . . . .63
Really See Your Design . . . . . . . . . . . . . . . . . . . . .44 Console Game Cost . . . . . . . . . . . . . . . . . . . . . . . .64
Using Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .44 Effect on the Interface . . . . . . . . . . . . . . . . . . . . .64
Creating Color Harmony . . . . . . . . . . . . . . . . . . . .45 Handheld Development . . . . . . . . . . . . . . . . . . . . . . . . .65