Visual Fundamentals in Games

Line:

Lines show you where an object starts and ends. It creates the illusion of form. Depending on the line quality (thick/thin), you can add different varieties of form to an object. In games, designers are very creative with how they use lines to express a certain art style, and to give shape to objects.

Okami is a very beautiful, Japanese calligraphy-styled game, which is expressed through painted illustrations and stunning visuals. bigger objects usually have thicker outlines, but every frame is able to be viewed as a beautiful painting.

Okami-HD-PS3-Rumor okami-beauty

On the other hand, LoZ: Windwaker lacks any form of line ‘quality’ whatsoever. However, this only adds to the style and visual effect of the game, and to this day is one of my favourite games, visually.

ib1yGGDWPyMbJO

Deponia is another game that uses line well, every scene looks like a picture, and even the characters moving throughout it don’t deter from the overall look and feel of the story.

003

Texture/Composition:

Composition is all about the way the viewer’s eye moves around the page. When deciding on the composition of a level, you’re deciding which direction to lead the eye in. Where to stop, where to follow onto next.

Composition plays a big part in the game experience. If the composition of a level is correct, the player will have an immersive, enjoyable experience. If not, the player will then feel disoriented, and not as though they are actually ‘in’ the game, resulting in an overall bad experience.

Texture for games refers to the way something looks as if it would feel if it were touched. For convincing, immersive experiences, artists need to create realistic textures for each object. Objects that would be rough in real life need to look rough in-game. This is done by normal maps, lighting and colour correction.

The one thing artists and designers have to keep in mind is how efficient everything is, so that the game can run more smoothly while still being visually appealing. So it’s better to use low-poly models with great normal maps and textures, as opposed to incredibly high-poly models with sup-par textures/maps.

20111129194044vaccaroAnthony_uncharted3_14vaccaroAnthony_uncharted3_09vaccaroAnthony_uncharted3_06vaccaroAnthony_uncharted3_04vaccaroAnthony_uncharted3_02

As you can see in this screenshot below of The Last of Us, the ground still looks convincing, even though it’s just a very well done material (comprised of textures and normal maps).uncharted32012022921212

The same goes here. As a viewer you can tell that the sand close to the bottom of the image isn’t high-poly, but it’s still done well enough to not detract fully from the visual experience. This is the usefulness of great texture.uncharted-3-drakes-deception-20110816001230248Skyrim

Once you play a game with these fundamentals in mind, it’s easier to see where designers have focused their attention, detail-wise, and where they’ve tried to optimise performance through poly count. However, due to their careful use of great textures and normal maps, everything is still effective at producing a great visual experience. 2011112919394820111129193224

A lot of these images highlight where designers have cut down on poly counts, however as you play through the games normally, these parts aren’t obvious. The main features that the designers wanted to be the focal point look fantastic, and these not-so-fantastic features are still enough to keep the viewer immersed. 201111291931542011112919224720111129192217

Player Composition:

Almost all recent games I’ve played compose their scenes really well. If it’s third person, the player character is to the side of the screen, allowing the viewer to fully see the rest of the scene composition. All designers lately have been paying close attention to detail in their composition setup, which allows for an incredible visual experience.

In this scene, the designers have cleverly used lighting to really focus the viewer’s eye to the mid-to-background area. It focuses on where the ‘alien spaceships’ are flying.

011

In Skyrim, this viewpoint can be achieved in game, from third person playing. Many of the areas in the game are well composed, allowing an almost film-like experience whenever you discover a new town, or a new major area in the plot line. 012

Foreground/Middle/Background:

When designing a level, it’s good to keep in mind that the human eye will separate environments into these three parts. To try and direct the player’s eye where you want it to go, it’s good to know how to highlight these different aspects effectively.

This article from Gamasutra is probably the best I’ve found to describe such elements. I’ll explain a small portion of what he explains here.

He says that levels must be designed in a Foreground, Centre of Interest and Background layout.

Compo_perspective

The Foreground layers are closest to the viewer. It’s used as a frame to focus the viewer on the dominant/important parts of the scene.

Compo_1_foregroundComposition_foreground-codg_1

The Centre of Interest is obviously where the player is meant to look. It has to still blend in well with the rest of the environment, but needs to be enough of a focal point that the player knows that this is where they need to go.

Compo_2_centerCounterpoint-dishonored_1

The background layer is used to just finish the scene. They close the composition but don’t detract from everything else. it helps the Centre of Interest remain so, and really helps to tie everything in. The colours are normally used to bring out the dominant aspect’s silhouette, create depth and eliminate scene isolation. Never use strong lines, bold colours or lots of detail.

Compo_3_backgroundBackground_rage_1

004005006007008Tomb-Raider-2013-review-screenshot-12TombRaider-2013-03-14-14-43-19-08TombRaider 2013-05-27 08-12-53-90

Colour/Lighting:

Lighting/Colour:

Lighting and Colour are both effective ways to draw the viewer’s attention. It highlights important parts, and makes the less important aspects less noticeable.

The Last of Us is quite a linear game, however, the way they get the player to continue along the story line is very clever. Every important part of the plot that the designers want you to focus on, are done with a great use of lighting and colour.

Here in this scene below, you as the viewer are distracted by something going on outside the building, which is achieved by this great use of bright, warm colour in such a cold environment.

013

As you continue playing, it’s clear that this use of lighting and colour will be a continuous effect throughout the game to lead you to the next stage. It keeps the player immersed with surrounding sounds and visuals, and even though it’s so obvious here, while you’re playing the game you can hardly tell you’re being lead around. 014

In Tomb Raider, designers cleverly used camera movements and mini-cut scenes to highlight where to go next in the plot line.

2013-03-07_00001

Tree canopies along bush paths are also a great way of directing the player’s attention to where the action is.010009

Lighting/Colour:

Lighting and Colour are both effective ways to draw the viewer’s attention. It highlights important parts, and makes the less important aspects less noticeable.

The Last of Us is quite a linear game, however, the way they get the player to continue along the story line is very clever. Every important part of the plot that the designers want you to focus on, are done with a great use of lighting and colour.

Here in this scene below, you as the viewer are distracted by something going on outside the building, which is achieved by this great use of bright, warm colour in such a cold environment.

013

As you continue playing, it’s clear that this use of lighting and colour will be a continuous effect throughout the game to lead you to the next stage. It keeps the player immersed with surrounding sounds and visuals, and even though it’s so obvious here, while you’re playing the game you can hardly tell you’re being lead around. 014

In Tomb Raider, designers cleverly used camera movements and mini-cut scenes to highlight where to go next in the plot line.

2013-03-07_00001

Tree canopies along bush paths are also a great way of directing the player’s attention to where the action is.010009

In Mirror’s Edge, the designers use colour really well in such a bright, fast-paced environment to alert the player of where to go next, and what actions should be performed leading up to that area.

Color_mirrorsedge_1

Using dramatic lighting in a dark scene is a great way of directing the player’s attention to important areas. Color_alanwake_1

These next few screenshots from CoD: Black Ops 2 and The Last of Us have used lighting and colour in a very effective way to direct the player throughout the levels. It’s very subtle when you’re playing it, which is amazing. COD_BO2_0068ccs-14074-0-92058000-1415809356 (1)

ccs-14074-0-01247800-1415972217

ccs-14074-0-06213200-1415809355

When lighting and colour don’t immediately show the player where to go, designers use events such as characters, etc., to let the player know where to go next. ccs-14074-0-34703300-1415809695

That link I pasted earlier has so much more information, it’s super interesting, please read it if you’re interested!!!

Overall, this was very eye-opening. I’ve learnt a little bit more about how to direct a player’s attention to where it needs to be, how to direct a player throughout the level subconsciously, and just overall how to design a level layout in the most effective way.

Woo!

Excuse the lack of correct citation, too many links, Dakota might cry.

———————————————————————————————————

http://www.gamasutra.com/blogs/MateuszPiaskiewicz/20140817/223513/Composition_in_Level_Design.php

http://www.mapcore.org/page/features/_/articles/level-design-in-the-last-of-us-part-one-r46

http://www.conceptart.org/forums/showthread.php/232819-The-Secret-to-Composition-tutorial

http://fox-orian.deviantart.com/art/Perspective-Composition-Pt-2-125042592

http://www.gamecareerguide.com/features/1310/level_design_using_the_elements_of_.php

http://thegame-pad.com/?p=510

http://www.diva-portal.se/smash/get/diva2:603788/FULLTEXT02.pdf

http://www.fdg2014.org/papers/fdg2014_paper_35.pdf

http://www.worldofleveldesign.com/categories/game_environments_design/11-things-i-learned-from-dream-worlds.php

http://normallyrascal.com/2014/11/29/final-fantasy-vii-camera-and-composition-part-1/

http://www.smashandpeas.com/the-five-basic-rules-of-shot-composition/

http://howtonotsuckatgamedesign.com/2014/11/color-theory-game-design-1-fundamentals/

http://thevirtualinstructor.com/artfundamentals.html

https://developer.valvesoftware.com/wiki/Color_Theory_in_Level_Design

http://www.gamasutra.com/view/feature/131581/lessons_in_color_theory_for_spyro_.php

http://www.gamesradar.com/why-okami-one-greatest-games-ever-made/?page=2

http://www.gamesradar.com/why-okami-one-greatest-games-ever-made/?page=2

http://fox-orian.deviantart.com/art/Perspective-Composition-Pt-1-118068853

Advertisements

One thought on “Visual Fundamentals in Games

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s