Friday, March 27, 2015

Checkpoint: PAYDAY2

     Alright, now that it's the fourth post in this blog and there is a rudimentary base of information in the previous posts to work off of, let's put it to use in a real game.

     It's about time we played something, y'know?

PAYDAY2


     The game up for observation is Overkill Software's Payday 2. In the game, players take the roll of professional criminals knocking over banks, stores, museums, and more, all in the name of sweet sweet cash. Let's take a brief look at their visual vocabulary. All pictures are screenshots from the game taken by me.

     For starters, let's look at the main menu.

Yes, I am a gun-toting, blue and white striped, wicker unicorn. Shhhhhhh.
Screenshot by Marc Chea

     Immediately, it is noticed that there is a general cool color scheme featuring strong blues, whites, and greys. The background is navy blue overlayed with translucent white scrawls and curling smoke. The majority of text is blue with headers and essential information in white.

     The color scheme, due to it's low saturation and strong contrast between colors, conveys an air of serious business, like what one would expect from professional criminals (ignoring the whole unicorn mask thing), This helps to tell the (somewhat sparse) narrative of the game.

     The composition aids in this silent storytelling by being very simple and clean. It draws the viewer's eyes from top left to bottom right. The primary visual focus is on the character present. since there are no other physical elements to help place the character in a visual space it is akin to having a lone figure in an infinite void, which definitely helps to add a sense of importance, weight, and gravity.

     Next are pictures of screens seen before playing a game.

Me and some friends. I wish they wore weirder masks for this screenshot though.
Screenshot by Marc Chea

     This first screen is very similar to the main menu, but this time it shows the multiple characters used by different players. Notice that they are color coded for convenience. Additionally, scale is used as a subtle cue to show which character is me. I am set larger/closer to the camera and thus my importance is increased in relation to the other characters on screen, which is reasonable since my in game avatar is more important to myself than the others.

Screenshot by Marc Chea

     This next picture shows the mission select screen. Like before, it features strong color contrast between white and blue, but this time shape also plays a much larger role. Missions are represented by white squares with disappearing circles inside. Red and yellow are colors that are used to mark special missions and increased difficulties. The combination of bright, solid colors and sharp distinct shapes sets the selectable objects apart from the background which is so full of lines it simply fades from view, as it should.

     That's it for the boring menu stuff, now onto actual gameplay screenshots.

Repetition features in the minimalist pre-mission difficulty display.
The screen shows four skulls with the last having distinctive horns signifying something special about the mission.
(read: very very hard)
Screenshot by Marc Chea
Screenshot by Marc Chea

     Once out of the menus, the game is actually quite lively, with a prominent focus on shape and color to convey the majority of information that the player needs.

     The primary shapes used in this game to represent important events and actions are squares and circles respectively.

      Due to their solid nature, squares are often used to represent objects and places in the game. Think nouns and the like.

     The missions in the menus are represented by squares, places to put objects are square, doctor's bags, ammo bags, supply drops, and more are all roughly square.

Square drill areas.
Screenshot by Marc Chea
Square(ish) medic bags.
Screenshot by Marc Chea
Square ammo pickups.
Screenshot by Marc Chea
Square cash blocks.
Screenshot by Marc Chea
Square ammo bags.
Screenshot by Marc Chea
Square safes.
Screenshot by Marc Chea

     You get it. The game ties tangible physical stuff to square shapes and the like.

     On the other hand, actions are usually represented by circles since they imply movement.

     Placing, using, and interacting with objects always has a circle show up and complete itself as the action is done. Additionally, character stamina and health is show with small green circles at the bottom of the screen.

Bagging bodies.
Screenshot by Marc Chea
Grabbing ammo.
Screenshot by Marc Chea
Fiddling with locks.
Screenshot by Marc Chea
Using drills in illegal ways.
Screenshot by Marc Chea
Experience is also represented by a circle because, y'know, cycles and stuff.
Screenshot by Marc Chea

     Color plays just as big a role, if not bigger, as shape. In both the previous and following images, it can be noted that cool/neutral colors are never ever used to denote objects/entities that are harmful to player characters. For example, most beneficial pickups (like ammo and medic bags) are outlined in bright cyan, objectives, (like loot bags and jammed drills) are outlined in yellow, and enemies are outlined in deep saturated red. This color coding helps players rapidly identify stuff as well as find things in 3D space since the outlines can be seen through walls.

Special enemies can be spotted. When they are, they gain a bright red outline. Here's a sniper about to shoot my face off.
Screenshot by Marc Chea
When your armor breaks, the screen will flash red to tell you that you are now taking health damage. Here's a bunch of cops shooting me to death.
Screenshot by Marc Chea
Loot bags are lined in yellow. The orange flags represent alarmed civilians. Here's me enjoying the sight of bags full of stolen jewelry.
Screenshot by Marc Chea

     This is a look at the practical side of color in this game, but there is also the part of color that exists purely to help the game look good.

     Frequently, as seen in the previous pictures, the game world has very bright and vivid colors to create visual interest, but one part that seemingly lacks color are the base character models. Pretty much every character's outfit is black, grey, or brown. Taken by itself, outfit colors are pretty boring, but that's where the masks come in.

     The masks are the primary fashion with which players can customize and express their individual style in the game. As you saw earlier, my mask is a blue and white striped unicorn head made of wicker. There is a vast amount of combinations that can be made using masks, patterns, and colors.

     Indeed, I would say that the masks are the sole most important aesthetic element in the entire game since the game is done in a fairly realistic art style. They are what really tell the visual story of PAYDAY2. The masks aren't just a place for players to input their own personal flair, they also help to remind that technically, in this game you play as the bad guys. The mask are often grotesque, with faces contorted by deep wrinkles and lines. When looked at they cannot be thought of as pretty. They instead are made to look scary, creepy, or just plain odd. These masks are not meant to be worn by anything resembling the 'good guys'.

The Christmas themed Strinch mask.
Screenshot by Marc Chea
My unicorn mask.
Screenshot by Marc Chea
A classic hockey mask with a color and pattern applied.
Screenshot by Marc Chea
The Doctor Crime mask. Looks rather familiar.
Screenshot by Marc Chea
Hoxton's mask shows facial burns and an angry smile.
Screenshot by Marc Chea
Bonnie's mask depicts a Glasgow smile, where a victim's cheeks are cut. Think the Joker from the Batman movies.
Screenshot by Marc Chea
The happy Santa Claus mask.
Screenshot by Marc Chea
An angry Mrs. Claus
Screenshot by Marc Chea

     Looking back at this post, there's so much more to this game than what I talked about. I feel like I've only made a weak, shallow pass at everything that could be covered, but hey, there's only so much a single blog post can do. Maybe I'll get better at this. Eventually.

     -Marc

Wednesday, March 18, 2015

Space And Scale: Stepping On Level Design's Toes


     This time we'll cover the principles of space and size in relation to video games.


Space


     Space is the empty, well, space in which your player interacts with the game world. Depending on how you have your game space set up, you will get very different feels for your game.

     Naturally, small areas are claustrophobic, and large areas feel open and unconstricting. However, areas don't have to be small to feel small, and the inverse of this is true as well.

     You can make a large room/area seem small by scattering obstacles and visual suggestions like walls, and shrubbery around.

     A great example of this type of setup is a maze or maze-like area in a game. Such a layout forces the player to break up a large room into much smaller pieces of a whole in their minds (Taylor, 2013).


Tight corridors with zombies and dogs everywhere. Fun (if you have a shotgun).

     Inversely, you can make a small room seem larger by reducing obstacles and creating more 'open' visual elements.

     The Binding Of Issac (the first one, not Rebirth) features labyrinths made up of many, uniformly sized rooms. Yet each and every rooms feels larger or smaller than the last. How is this done? Again, it's the same process as breaking a larger room into a smaller one. Scattering obstacles around but in a different fashion than before. Standard rooms have rocks and pits that block your path and some of the ways these blockages are set up make rooms feel very small.

The rocks form chokepoints that make it hard for the player to maneuver. Some rooms are completely made of obstacles.
Screenshot by Marc Chea

Boss rooms feel large because they are mostly clear to allow for maximum player movement.
Screenshot by Marc Chea

     Different size spaces should elicit different kinds of responses (Taylor, 2013).

     Take for example a horror game.

     I consider for there to be two major types of horror games; the type where you can fight back, and the kind where the best you can do is run and hide.

     For a more shooty game, large dark spaces where you can't see are pretty spooky. It can be more calming in a way to be in a narrow corridor where you can easily see everything going on around you and have no unpleasant surprises jumping at your face.

     In games like the Dead Space series, I hate securing large open rooms with multiple entrances because then I have to cover multiple angles for monsters and that's how you get jumped from behind. The same idea lies behind the Five Nights At Freddy's series where you have to watch multiple areas creating a sense of vulnerable openness.

A vent AND a corner? It's gonna be a bad day.
Screenshot by Marc Chea

     Conversely, if you can't fight back against monsters, large open areas are the best because then you can really run. Like in the segments where you play as Ashley in Resident Evil 4.




Size/Scale


     Size is the physical volume which an object or element fills up. Scale is the relative size of one object compared to another (Bradley,2010). Yet these principles are more than just physical measurements.

     Size implies power.
     Size implies importance.
     Size grabs a viewer's attention.

     In relation to game aesthetics, size and scale can be used to make players feel a variety of different things. Feelings ranging from empowerment to helplessness to utter confusion.

     Scaling a player up relative to their surroundings and other entities indirectly implies and increase in power. Scaling down a player will have the opposite effect of making them feel weaker and smaller. The amount scaled is (usually) proportional to the additional strength given to the affected player.

     Objects in the game world can have their sizes scaled to achieve similar effects of power or weakness (Bradley, 2010). Additionally, scale can be used to confuse players by creating discrepancies in the relative sizes between objects. Imagine people having parts of their bodies randomly expanded or shrunk. Large heads, small hands, oversized feet. This kind of stuff implies confusion and oddity.


You're gonna have to kill that. Yes, you.

     Next time we'll actually look at a game instead of just design principals.

     -Marc

---


Sources



Bradley, S. (2010). How To Use Size, Scale, And Proportion In Web Design. Vanseo Design. Retrieved from http://www.vanseodesign.com/web-design/size-scale-proportion/

Taylor, D. (2013). Ten Principles of Good Level Design (Part 1). Gamasutra. Retrieved from http://www.gamasutra.com/blogs/DanTaylor/20130929/196791/Ten_Principles_of_Good_Level_Design_Part_1.php

Taylor, D. (2013). Ten Principles of Good Level Design (Part 2). Gamasutra. Retrieved from http://www.gamasutra.com/blogs/DanTaylor/20131006/197209/Ten_Principles_of_Good_Level_Design_Part_2.php



Image sources



[Image of Resident Evil 4's garden maze]. Retrieved March 18, 2015, from: http://vignette4.wikia.nocookie.net/residentevil/images/6/65/Castle_Garden.jpg/revision/latest?cb=20120113172159

[Image Ashley from Resident Evil 4]. Retrieved March 18, 2015, from: http://oyster.ignimgs.com/mediawiki/apis.ign.com/resident-evil-4/f/f3/Re4_04_03_04_05.jpg

[Image of player and a colossus]. Retrieved March 18, 2015, from: http://nerdreactor.com/wp-content/uploads/2014/07/Shadow-of-the-Colossus-SOTC-Wallpaper-Gaius-Earth-Knight-03.jpg

Wednesday, March 11, 2015

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


Image sources



[Poster image of the Medic]. Retrieved March 11, 2015, from: http://static.giantbomb.com/uploads/original/0/5536/1474648-medic_back_original.jpg

[Screenshot Pong]. Retrieved March 11, 2015, from: http://upload.wikimedia.org/wikipedia/commons/f/f8/Pong.png

[Image of a Halo 2 prophet]. Retrieved March 11, 2015, from: http://nikon.bungie.org/screenshots/forumscreens/jn/JesperNielsen_halo2_prophet_and_throne.jpg

Friday, March 6, 2015

Color: Not Just A Palette Swap

     This week let's talk about color usage in games.

     Colors serve a multi-function role in video games, from visual cues for as what to focus the eyes on, to separating similar but distinct onscreen elements, to aiding in the illusion of depth and space in a 2D plane. Additionally, colors can be used to unify the whole 'feel' of a game, carry over subtle meanings and messages, and (obviously) just help make things look good.


Focus


     Color is an additional layer to vision that allows us to have another available channel from which to glean information from the outside world. Take for example, trying to find a single apple in a basketball court full of oranges. It's simple enough with color, just look for something red. However, in black and white it's a completely different game (heh). The color red becomes a focal point for a person to look for.

     In video games, it's the same idea. Certain colors can be associated with points to go towards or hidden areas. For example, Mirror's Edge has certain objects turn red as the player approaches them to show that running along a pipe or steel girder is the way further forward in the game. Otherwise red objects are fairly rare in the game's mostly stark white environments, serving to reinforce this 'red means go' mentality (Madigan, 2013).


Notice the red objects forming a path to run through.
Screenshot by Marc Chea

Element Separation


     Along with directing the players' eyes towards important parts of the game, color can help to make distinct the differences between objects or places in game. The most obvious example is, of course, team color (Admin, 2014).

     Nobody wants to shoot the people on their own team (except griefers, but we hate those guys anyway), and color helps to prevent any sort of mix-up that could possibly happen due to similarities between opposing teams. Say that there are two players that are both playing a knight class or something similar in some sort of team based game. The character models are virtually identical save for one thing - color. This is enough to allow others to quickly recognize and assess most any situation.


Now, they aren't knights, but it's close enough, right? See the colored outlines denoting friend/foe.


Depth


     This is one more for 2D games but can also work with 3D stuff as well.

     Everything we see is an illusion. We think we view things in three dimensions but in actuality our vision is a two dimensional plane that we retrieve 3D information from by way of subtle cues in shadow, shape, and color.

     A very good way to give an illusion of depth is contrast. Edges where two colors or shades meet help us determine between foreground and background. It doesn't matter much as to whether the foreground is lighter or darker than the background because that is determined by the context in which the colors are presented. For example, a small dark dot (object) in a white plane (context) is seen to be in the foreground. The inverse is also true, a small white dot (object) in a dark plane (context) is seen to be closer in the foreground (Admin, 2014).


The darker areas are instinctively felt to be further back.



Theme


     Color is also a good influencer of the mood and feel of a game. I'm pretty sure this is already widely known but I'll write about it anyway.

     Colors have different meanings. You want a nice happy game, then use bright, light, and pastel colors. You want a dark game, use muted, low saturation, and darker shades. It's fairly straightforward. Here's a basic list of colors and their meanings:

  • Red - intensity, heat, passion, danger, aggression, power
  • Orange - aggression, energy, heat, enthusiasm, quality
  • Yellow - happiness, warmth, joy, energy, lightness
  • Green - growth, safety, fertility, restfulness
  • Blue - calm, stability, loyalty, intellect, truth, seriousness
  • Purple - luxury, power, mystery, royalty
  • White - purity, truth, clean, innocent
  • Black - power, mystery, evil, elegance, death ("Color Wheel," n.d)
     Additionally, color in games can be used as a metaphor depending on the decision of the designer. For example, in the game Deus Ex: Human Revolution, the overwhelming color scheme of the game is black and gold. The two colors represent a duality between man and machine. According to the game's director, the gold represents hope and a better future, while black grounds that thought in dystopian suffering (Westbrook, 2010).


Screenshot by Marc Chea

Screenshot by Marc Chea

Screenshot by Marc Chea

Screenshot by Marc Chea


     You get the idea.


     -Marc

---

Sources:



Admin. (2014). Color Theory For Game Design 1 of 4 - Fundamentals. How Not To Suck At Game Design. Retrieved from 
http://howtonotsuckatgamedesign.com/2014/11/color-theory-game-design-1-fundamentals/


Color Meaning. (n.d.) Color Wheel Pro. Retrieved from

Madigan, J. (2013). Why Do Color Coded Cues in Level Design Work?. The Psychology of Video Games. Retrieved from 
http://www.psychologyofgames.com/2013/09/why-do-color-coded-clues-in-level-design-work/

Westbrook, L. (2010). Deus Ex: Human Revolution Director Explains Game's Symbolic Colors. Escapist Magazine. Retrieved from


Image sources:



[Screenshot of a brute in Halo 3: ODST]. Retrieved March 6, 2015, from: http://www.thereviewcrew.com/wp-content/uploads/halo-3-odst-3.jpg

[Screenshot of a level in Spelunky]. Retrieved March 6, 2015, from: http://cdn.akamai.steamstatic.com/steam/apps/239350/ss_8fb56a4fb17d6c777c12952d6642652b063b5528.600x338.jpg?t=1397110636