Aesthetic Design In Games: Line and Shape: Not Really The Kind You Get With Exercise

Next principle up is shape. This includes lines, angles, curves, holistic views, and partial portions of present visual elements.

Line

Let's start with the basic meanings of different line orientations (yes this is a thing).

Thin - weak, frail, elegant, short lived
Thick - power, boldness, emphasis
Horizontal - stability, quiet, peace
Vertical - strength, immovability, formal
Diagonal - energetic, movement, tension
Curved - calmness, movement, organic
Zigzags - movement, intensity, confusion, danger (Bradley, 2010)

Thus you can see why things like angular cars (and robots) seem so fast and aggressive. It's due to the heavy diagonal and horizontal lines used in their construction. While lighter characters that are supposed to be less 'dangerous' are given more curves and lighter line weights.

Compare the characters below.

The front armor plate is angled and suggests aggression and speed.
Screenshot by Marc Chea

Round. Innocent. Harmless.
Screenshot by Marc Chea

The Medic's lines are a bit heavier than you'd expect. This is because he's a COMBAT medic.

Lines aren't just for conveying meaning obviously. They can also be used to direct attention, link separate elements together, divide separate elements, and simply decorate things.

A multitude of vertical lines forces the eyes upward, to the sight of a dead man. Yum.
Screenshot by Marc Chea

The goo balls are literally connected by lines.
Screenshot by Marc Chea

A real simple line to divide the field and give a sense of space.
Game: Pong
Source: http://upload.wikimedia.org/wikipedia/commons/f/f8/Pong.png
Image is part of public domain.

It's subtle, but there are hatchmarks all over, giving the game a more hand drawn feel.
Screenshot by Marc Chea

Shapes

All shapes are composed of lines, thus much of the meaning carries over, but the addition of area into the mix allows for an additional layer of meaning to be placed in visuals.

Now let's do shape meanings.

Squares/ Rectangles - balance, stability, solidity, common
Circles - completeness, whole, unity, softness
Triangles - energy, power, motion
Crosses/ X's - balance, strength
Spirals/ Swirls - growth, movement, creativity (Cousins, 2014)

These meanings make sense since we innately feel them even if we don't formally know them. This is why we can get a feeling of what kind of person a character is simply by way of their visual design. It's a very good shorthand to effectively communicate meaning without blatantly stating the fact that a character is a good or bad guy.

For example, take the prophets from the Halo series. They are comprised of many shapes, but there are distinct and obvious triangles in the way their bodies are built, and triangles are usually reserved for bad guy type characters. Their heads are roughly triangular, the gold... thing behind then forms a triangle shape, and their floating pods are inverted triangles. Triangles are everywhere to tell you that something's up with this guy (Ekström, 2013)..

There are hidden triangles all over this guy.

Now for the opposite end, characters made up of circles and more circles (and curves and stuff). QP Shooting - Dangerous!!'s characters, QP and Syura are the complete opposite of triangles. Everywhere in their figures are rounded edges from the eyes to the clothing to the hair. This all screams softness and cute and stuff like that. Yeah. (Ekström, 2013).

Yeah, I do play anime games.
Screenshot by Marc Chea

I think that's about all I have for now.

-Marc

---

Sources

Bradley, S. (2010). The Meaning of Lines: Developing A Visual Grammar. Vanseo Design. Retrieved from http://www.vanseodesign.com/web-design/visual-grammar-lines/

Cousins, C. (2014). The (Sometimes Hidden) Meaning of Shapes. design shack. Retrieved from http://designshack.net/articles/layouts/the-sometimes-hidden-meaning-of-shapes/

Ekström, H. (2013). How Can A Character's Personality be Conveyed Visually, Through Shape. Retrieved from http://www.diva-portal.org/smash/get/diva2:637902/FULLTEXT01.pdf