home
The Eighth Annual Game Design Think Tank
Project Horseshoe 2013
horseshoe Group Report: Exploring Non-pictographic Symbologies for Games
   
Participants: A.K.A.
Thom Robertson, Incandescent Workshop LLC Erich Meyr, Insomniac Games
Ray Holmes, MunkyFun John Welch, Making Fun
 
  download the PDF

Brief statement of the problems on which the group worked

The dragon model may be big, complex, and beautiful, but it’s also fantastically expensive, and surprisingly uninformative to the player trying to kill it. Glyphs can represent that dragon, and offer the opportunity for much greater information density.  Substituting information-rich symbols for beautiful but informationally-poor artwork in a screen completely full of information-dense gameplay can utterly transform the game in interesting ways.


Brief statement of the group’s solutions to those problems

We propose that developers can choose a non-realistic, non-pictographic visual paradigm for their games.  We describe findings of cognitive science that help us make smart choices about how glyphs are constructed and perceived.

We describe a simple work-flow for defining your presented game data, defining a data taxonomy,  matching the taxonomy to the well-defined hierarchy of visual channels, and generating finished glyphs.

When the tactical system is presented in a more information-dense way, a great variety of statistical data can be quickly obvious to players.  The interface becomes more clear and vastly cheaper to implement, and the designer may make the game more complex, more strategic, and more difficult. Ultimately, a glyph-based visual representation can help us create games where player choice is more important and meaningful.


Expanded problem statement

At the beginning monsters were tiny jumbles of pixels that vaguely looked like wizards or dragons. Early computers were graphical enough, though, and we didn’t NEED much.  Games like Telengard, Temple of Apshai, and Ultima let us see the fiery dragons and the gleaming swords in our minds’ eye.

Looking back, where did all the beautiful graphics go?  What we were seeing on the screen was not what we were SEEING in our head.  We saw SYMBOLS (more specifically, Glyphs).  Humans do this exceptionally well.  We, as a species, are just fine with symbols.  We use them all the time.  The characters you're reading right now are a complex semiology of words and ideas, one of many humans have created and used for communication

Back then, even a 16x16 lump of pixels was SUPPOSED to look a bit like a dragon, with identifiable wings and legs.  Today's graphics are still, to a degree, symbolic and pictographic.  A flying monster must still be depicted with wings.

But beautiful artwork is always expensive, and keeps getting MORE expensive all the time.  3D cameras suck.  And computer screens can still only show 256 shades of red, green, and blue (though we now have loads of tricks to "expand" that)

Rogue-alike games have taught us that an alternate symbology represents a learning curve, and many players simply don't want to climb it.  But, when players finish climbing the learning curve, the glyphs become nearly invisible, translated into the "real thing". Remember the line in the Matrix movie: "I don't even see the code anymore, all I see is a brunette, red head..."


Expanded Solution Description

Contents:

  1. Hierarchy of visual channels available to implement Glyphs
  2. Design (incredibly high level) for Sample Game design assuming knowledge of the classic roguelike
  3. Taxonomy of the Sample Game’s data
  4. Mapping of visual channels to taxonomic elements of our game data
  5. Example gameplay screen

1. Visual Channels

The human eye interprets an image in two steps; pre-attentive (looking at the entire image at once), followed by attentive (parsing through the image).  Many image aspects (visual channels) exist, and their relative visibilities are well known.

“Guideline on Pop-out Effects. Many classic studies in perception also established the “power” of different visual channels in terms of pop-out effect (pre-attentive search), and fixation (during attentive search)[19]. The pop-out effect is one which allows identification of a target within a few nanoseconds of initial exposure to the visual search space. A result of several milestone studies focusing on observed response times, the ordering of the four commonly used visual channels follows the consensus: color ≺ size ≺ shape ≺ orientation (e.g.,[61, 44, 48]). The symbol ≺ reads as precedes. However, the strength of color over the other three channels is generally much more noticeable.

“Guideline on Visual Hierarchy. Visual hierarchy, with which the environment and objects around us are arranged is a well documented theoretical framework [38, 35, 30, 24, 5]. However, the literature contains a debate over the ways in which the visual system traverses this hierarchy. There are four possible ways: top-down (also called global processing) [35]; bottom-up (also called local processing); middle-out 24]; and salient features (e.g., edges, points, colors) [49]. Because glyphs are relatively small in comparison with a whole visualization, we consider at such a “localized level”, the top-down and salient features may play more significant roles. The top-down assumption suggests that when consider a glyph in isolation, its global feature will affect visual search more than its local features. Salient features are partly addressed by the pop-out effects.”
From Taxonomy-Based Glyph Design — with a Case Study on Visualizing Workflows of Biological Experiments

Visual Channel Hierarchy Review

  1. Color
  2. Size (game design dependant - grid might keep all elements the same size with a different size)
  3. Shape
  4. Orientation
  5. Texture
  6. Position

Channels to Consider outside of static visual comprehension

  • Motion / Changes over time
  • Contextual Interaction

Regions

Visual Channels

Levels of Organization

Popout Effect

Hierarchy Effect

Strength

Convention & Metaphor

 

 

Associative

Selective

Ordered

Quanti- tative

 

 

 

 

a) Main

1. Color

Yes

Yes

Yes

 

*****

Strong

*****

application specific

 

2. Size

 

Yes

Yes

Yes

***

 

****

 

 

3. Shape

Yes

Yes

 

 

***

 

***

 

 

4. Orientation

Yes

Yes

 

 

***

 

***

 

 

5.Texture

Yes

Yes

Yes

 

**

 

**

 

b) Supple- mentary

6-10 (same as 1-5)

 

 

 

 

 

Medium

 

 

 

11. Planar

Yes

Yes

 

Yes

***

 

***

 

c) Interior

Contains (a+b))

 

 

 

 

 

Low

 

 


From Taxonomy-Based Glyph Design — with a Case Study on Visualizing Workflows of Biological Experiments

 

Geometric Channels

Optical Channels

Topological and Relational Channels

Semantic Channels

size / length / width / depth / area / volume

intensity / brightness

spatial location

number

orientation / slope

color / hue / saturation

connection

text

angle

opacity / transparency

node / internal node / terminator

symbol / ideogram

shape

texture (partly geometric)

intersection / overlap

sign / icon / logo / glyph / pictogram

curvature

line styles (partly geometric)

depth ordering / partial occlusion

isotype

smoothness

focus / blur / fading

closure / containment

 

 

shading and lighting effects

distance / density

 

 

shadow

 

 

 

depth (implicit / explicit cues)

 

 

 

implicit motion/motion blur

 

 

 

explicit motion / animation / flicker

 

 

From Glyph-based Visualization: Foundations, Design Guidelines,Techniques and Applications


WHEN your taxonomy of game information is complete, you can sort the taxonomic branches by importance, then match them up to the visual channels you choose to express.  It’s possible to express one game value with multiple visual channels, and also possible to express multiple game values with just one visual channel.  It’s reasonable to assume that you least important game values will not be able to be reflected in the glyph at all, depending on size, clarity, etc.

This suggests that, as your simplistic game system becomes more complex, the glyphs become more complex, up to the perceptual limit of the glyph presentation.


2. Game Design

This sample concept is a tweak on the classic roguelike, utilizing the same basic premise but differentiated by greater player choice provided by the richer symbolic interface. Specific attributes of the design:

  • 16x12 grid squares (e.g.,. 1024 x 768 screen on an old iPad)
  • non-scrolling screen; screen is refreshed when player exits  door, climbs a ladder, etc.
  • fog of war / visibility
  • monsters to kill: from measly swamp rats to epic dragons
  • treasures to loot
  • complex inventory and items
    • typical modern devices (found in Diablo but not found in the original Rogue) such as:
      • equipping a vast diversity of items (armor, weapon)
      • using containers to hold/limit a collection of items
      • crafting to combine items into new items
      • items with elemental attributes
      • items with special abilities that are charged
    • but differentiated by visually showing the resulting powers and attributes on the screen during gameplay so players can instantly understand how their present state matches up against the enemy currently on-screen and make decisions accordingly
    • more precise information about the state of the player character and enemies allows for more nuanced, evenly balanced encounters with greater penalty for failure, such as permadeath.
  • environmental interactions
    • The best (only?) way to kill the dragon is to collapse a weak wall on him
    • If time (# of moves elapsed) is introduced as a point of tension, diverse environmental attributes can be used to inform the player as to how (s)he might intelligently invest in exploring the environment for secret encounters, treasure chambers, etc.

Our intention is to improve upon both the classic roguelike and the modern Diablo-like game. For example, we can offer more evenly balanced encounters (resulting in “close calls”) AND a greater penalty for failure than the Diablo genre (e.g., permadeath), thereby increasing the excitement of battle. We can justify this because providing more precise information about the state of the player character and enemies allows players to deploy more nuanced battle strategies and meta-game play (player ability management, item selection/crafting/leveling/charging, etc.), giving the player a greater sense of agency in the execution and outcome of the battle.


3. Taxonomy of Game Data

Key Attributes, Sorted by Importance

  1. Active Objects
    1. player/NPC/enemy
    2. hit points
    3. armor
    4. speed
    5. innate elemental (defense)
    6. attack power
    7. attack speed
    8. attack elemental (attack)
    9. size (probably not relevant to gameplay, but could be; further discussed in H.4)
  2. Inactive Objects
    1. item (something you can pick up, throwable, pushable, stackable, craftable)
    2. door (open/closed, can block you)
    3. treasure chest (open / closed, traps, is container)
    4. traps (what triggers, damage, damage modifiers)
  3. Environment
    1. walls: you can’t move into them, but you might be able to destroy them
    2. floor: you can move into, but there might be a ramification, e.g., lava, water, pit, stairs

We need to express the most important information first.  Since we have so much information to display, several items that seemed natural on our initial taxonomy fell off when we sorted it and designed the glyph system. The following are not directly actionable, but rather convenient ways to imply things that we show directly via the more detailed glyph system:

  • Race
  • Name - might be accessible via an informational menu as non-essential flavor text
  • Class (could be implemented as the shape of the hero)

4. Mapping of Visual Channels to Taxonomic Elements

Section H.1 enumerated the visual channels available to convey information to players visually. Section H.2 described what our game is, and Section H.3 listed the specific information that is important in our game. This section H.4 details how our game will use the available channels to visually convey key information to our players.

An extraordinary amount of information can be displayed in a small amount of space using glyphs. The following is a glyph for a Creature unit (Player Character, NPC, Monsters), in this case the Player Character herself, which is uniquely blue in color.

In our design, differentiating a threat from anything else is of utmost importance. The fact that there is an enemy, or multiple enemies, must instantly pop in the pre-attentive phase of visual processing. Therefore we use the #1 most powerful pre-attentive visual channel, color, to identify friend from foe. We color all enemies RED, leveraging the real-world understanding that red implies “danger”, and because red really pops in the interface. We use the remainder of the elements to show the differences between one enemy and another:

Treasures are GOLD squares, again leveraging the correlation between the color gold and the valuable nature of treasures.

Items are still in development, probably a different shape from treasure and perhaps GREEN in color.

Environment is the only category of elements that does not utilize a “supplementary” area but instead occupies the full grid square and also uniquely utilizes texture to differentiate terrain.

Key Take-away: Understanding the nuances of the specific game design are critical to determining the best mapping of channels to object attributes, as informed by the sorted attribute importance in the taxonomy. For our design, we determined that “innate elemental nature” of a creature is relevant but the game is not about that. If we were creating a game where elemental forces were central to the design we might invert the color of the triangle (red indicating enemy) with the inner circle indicating the elemental alignment so the elemental alignment popped out instantly on the display. Of course, we would also have to change the depiction of the player character from being a blue triangle to, perhaps, some other geometric shape (because too many enemies are also triangles) with a different color and potentially other differences to reinforce things because shape alone may not be enough to differentiate.

Other examples where design of the symbolism of the interface to communicate information should follow the design of the game, and not vice versa:

  • How important it is to convey exact hit points vs. “strong” / “weak” could be critical for a card game, but not important at all for a hack-n-slash.
  • Orientation of units would be critically important in a tank or battleship game, but in a roguelike game that is irrelevant and is most likely not presented at all in the symbology.
  • For games where both long- and short-range distances matter, and the overall scale of space is more vast, one could use non-standard spatial maps such as a radar screen to compact less important information to the edge of the screen. Or use color swatches to indicate areas of difficulty in the distance.

As we utilized our own methodology we discovered the tension between what seems most pure from a theoretical perspective and what is practical and logical when the rubber meets the road. For example, Attack Speed seems important to convey in a roguelike. However, without a detailed design showing its importance we couldn’t justify potentially mucking up the visual clarity of the glyphs for questionable return. This showcases how game design and glyph design are iterative - if everything is important then nothing is, so what is most important?

Similarly, Size of an enemy seems logically necessary to convey - isn’t fighting a swamp rat completely different than fighting a dragon? Well, only if that emerges in the battle mechanic, which so far it hasn’t in our design - the battle mechanic is dominated by the various attributes of the creatures, none of which include size, even if it is easily imaginable that there could be designs where “size matters”. Nonetheless, we represent size of an enemy with the powerful visual channel of “size” in a central location in the glyph. Why? Partly an artifact of iterative design, and partly based on the supposition that even in a symbolic interface aesthetics play a role: there should be a difference in the way players experience fighting a “swamp rat” vs. a “dragon”, and with all attributes being the same, it might be nice to give the player a bit of a surprise to encounter a super powerful small creature.

A note to show we could replace or overloaded channels to help color-blind people, for example:

  • overload color with texture to depict the elemental alignment
  • replace color with more extreme shapes to differentiate between player, enemies and items

 

5. Sample Gameplay Screen

Here the eye is immediately drawn to the hero (blue triangle) as the central unit in the game. We also see several threats and rewards:

  • A slow-moving creature with some armor and two ranged attacks is very close by.
  • Two weak creatures guard a small treasure behind a locked door.
  • The ultimate prize is a highly secure and valuable treasure chest closely guarded by a fast, massive, high-hit-point fire-breathing dragon employing a powerful range attack with splash damage as well as two powerful slashing attacks.

 

Primary reference material:

Survey of Glyph-based Visualization Techniques
for Spatial Multivariate Medical Data
http://www.voreen.org/Publication-2011-ROP11.html

Glyph-based Visualization: Foundations, Design Guidelines,
Techniques and Applications
http://cs.swan.ac.uk/~csbob/research/star/glyph/borgo13glyph.pdf

Taxonomy-based Glyph Design - with a Case Study on Visualizing Workflows of Biological Experiments
http://www.cs.ox.ac.uk/publications/publication6179-abstract.html

 

For Further Consideration
 
While we used a rogue-like as an example of how a game would be affected by using glyphs, we feel that there are limitless possibilities in reexamining how games represent their data.

Understanding how information can be packed into glyphs doesn’t stop anyone from making beautiful and evocative glyphs.  While a glyph can be designed and programmed by an engineer, it would take an artist’s eye to find the outright beauty in a glyph design.  Currently beautiful and information-rich glyphs hardly appear in modern videogames at all, so any dev team which designs a data representation that’s both info-dense and evocative will be playing in a wide-open space.

As discussed above, a new glyph is a new learning curve for players, and most won’t want to climb it.  In the industry, our knee-jerk reaction is to knock down any wall that might limit our player base size.  But games like Dwarf Fortress show that there IS a market for games with a challenging learning curve, and if you can make a case to the users that the learning curve is appropriate, then you WILL get customers, and those customers can often be extremely loyal.

 

Image References

Take the Red Pill
Cypher: Whoa, Neo. You scared the bejeezus out of me.
Neo: Sorry.
Cypher: It's okay.
Neo: Is that...
Cypher: The Matrix? Yeah.
Neo: Do you always look at it encoded?
Cypher: Well you have to. The image translators work for the construct program. But there's way too much information to decode the Matrix. You get used to it. I...I don't even see the code. All I see is blonde, brunette, red-head. Hey, you a... want a drink?

 


Copy protection for the game Pool of Radiance. The wheel “translates” Dwarven D&D runes into the English alphabet.

 


Common architectural symbols (for various materials) used in drawing sections and elevations.

These could be an inspiration for density of materials, to allow the player to quickly glance at a wall or obstacle to see if they can break or destroy it. For example, if the player sees a wood grain they know their fireball spell can affect the monster on the other side of the wall, but will have little effect to the monster on the other side of the stone wall.

 


Symbols to indicate types of plants.

As with the materials image above, these symbols can be used for inspiration in creating a set of glyphs to indicate the types of static organic objects in the game.

 

Shadowhunter runes from the Mortal Instruments book series.

These artistic glyphs show how the sweeps and curves of simple images could be made to be more evocative. A path for exploration.

 


Runes of the Elder Futhark. These are Viking runes, evocative of magical power. Each rune has a traditional meaning. For example, Fehu means Cattle, which means Wealth.

“I trow I hung on that windy Tree
nine whole days and nights,
stabbed with a spear, offered to Odin,
myself to mine own self given,
high on that Tree of which none hath heard
from what roots it rises to heaven.”

The wisdom Odin gained by sacrificing himself.

 


The Runes of the paper RPG Runequest. From playing that game for many years, these runes have direct meaning to fans.

 


Glyphs in the game Journey. The game did not have any speech.

 

 
A fairly typical rogue-like screen.