Visual Design of Games
Cheese or font? Cheesy or fun?
Graphic Design for Game Designers Exercises:
1. ELEMENTS of “Cheese or Font?”
Core — Play button, Cheese or Font prompt, Text entry box (with correct or incorrect indicator), Score keeper (X/50)
Supportive — Text entry box feedback (if incorrect answer entered), Countdown timer
Extraneous — Total percent correct indicator, Final score witty feedback text
2. Sketch of CORE Elements
3. Revised Sketch with HUGE Thumbnail
4. Revised Sketch with additional COLOR
5. Revised Sketches leveraging TYPE
6. PROXIMITY in Design
Proximity in all the designs above ensures that everything the player needs to see/interact with is grouped together.
The Play Button sits next to the Score Indicator so that players can see before starting how many answers they need to get right to ace the test or so that they may quickly assess their score before trying again.
The “Cheese or Font” Prompts and Text Input Boxes are next to each other for quick moving through the test–your eyes can focus on them together so all you need to do is move your eyes down the list, not from side to side.
All four of the elements are grouped together to streamline the process of running through a test, checking your score, and then going again (much like my firsthand experience playing the game).
Graphic Design Elements of Risk of Rain:
Risk of Rain is one of my all-time favorite looking games. You can see a typical in-game scene here below:
Although it may look like a bit of a mess in this picture, I selected this picture as an extreme case of what Risk of Rain generally looks like.
In standard situations, the most you’ll really have to see are the 6 boxes and the health bar at the center bottom, the money indicator at the top left, and the difficulty indicator at the top right. Nonetheless, I used this picture as my example and so I’ll break this version down instead.
Graphic Design choices made:
- Maintains a uniform font throughout that plays to the game’s deliberate sci-fi/engineer/pixel-art feel
- Keeps the center part of the screen mostly clear, maintaining the player’s primary focus point centered on the action (and hit points that give essential feedback for whether that Direseeker you’re trying to kill is actually dying)
- Keeps the most important information (weapons, special abilities, health, stamina) confined to the bottom of the screen where it doesn’t obstruct any of the action and (more importantly) is never obstructed by any of the action either–it’s always there when you need it but never in the way
- Not only is weapons, special abilities, health, and stamina information all centered at the bottom, weapons, health, and stamina (which are most pressing at any given time) are stacked together
- Stretches enemy health bar across the top so that it’s large and highly noticeable, not drawing so much attention that its distracting but enough so that you can keep track of it
