Lack of contrast: Difference between revisions

From Henry's personal library
Created page with "= <center>Prey 2006</center> = <div class="jcarousel-wrapper"> <div class="jcarousel"> <div class="jcarousel-list"> <div class="jcarousel-item"> <center>900px</center> <center>''Level 16''</center> </div> <div class="jcarousel-item"> <center>900px</center> <center>''Level 16''</center> </div> </div> </div> <span class="jcarousel-control-prev"></span> <..."
 
No edit summary
 
Line 5: Line 5:
     <div class="jcarousel-list">
     <div class="jcarousel-list">
         <div class="jcarousel-item">
         <div class="jcarousel-item">
<center>[[image:prey2006_contrast1.jpg|900px]]</center>
<center>[[image:prey2006_contrast3.jpg|900px]]</center>
<center>''Level 16''</center>
         </div>
         </div>
         <div class="jcarousel-item">
         <div class="jcarousel-item">
<center>[[image:prey2006_contrast2.jpg|900px]]</center>
<center>[[image:prey2006_contrast4.jpg|900px]]</center>
<center>''Level 16''</center>
         </div>
         </div>
     </div>
     </div>
Line 19: Line 17:
</div>
</div>


In here which light is brighter? The tubes with white energy. The blue glow on the floor is much less bright, while the white energy over shines everything else. There is a red light indicating a door but it just can't compete with the brightness of the white energy. It may look cool and produce a cinema like environment but it's really bad to guide the player in the game.
This game suffers from lack of contrast. The environments are excessively monotonic, monochromatic. Everything is too flat, making it hard to recognize and identify objects and paths. There isn't a good contrast between light and dark which makes it hard to have perception of depth.


The control panel to open the door is placed on a square on the wall that makes sense. However, the bright energy light is too powerful and the control panel very small, making it hard to spot.
One solution is to use lights that highlight some parts, such as the pipes on the walls for example. Another technique is having good contrast of the textures themselves so that the player can easily "read" them.


= <center>Path of Exile</center> =
= <center>Dark Forces</center> =


<div class="jcarousel-wrapper">
<div class="jcarousel-wrapper">
Line 29: Line 27:
     <div class="jcarousel-list">
     <div class="jcarousel-list">
         <div class="jcarousel-item">
         <div class="jcarousel-item">
<center>[[image:poe_contrast1.jpg|900px]]</center>
<center>[[image:darkforces_contrast1.jpg|900px]]</center>
<center>''Robotics Facility mission''</center>
         </div>
         </div>
         <div class="jcarousel-item">
         <div class="jcarousel-item">
<center>[[image:poe_contrast2.jpg|900px]]</center>
<center>[[image:darkforces_contrast2.jpg|900px]]</center>
<center>''Robotics Facility mission''</center>
        </div>
        <div class="jcarousel-item">
<center>[[image:darkforces_contrast3.jpg|900px]]</center>
<center>''Imperial City mission''</center>
         </div>
         </div>
     </div>
     </div>
Line 41: Line 45:
</div>
</div>


This game has some bad design decisions. Every spell and ability has a unique visual identity. Each power is distinguished from the others with visual clues. The problem with that is that when you have a large numbers of enemies, players and each power has its own unique visual identity, the screen becomes polluted. How to solve visual pollution in this game? Lowering the number of enemies? Lowering the number of active skills? Restricting the spells themselves? It's hard to solve because any of those changes would mean changing the gameplay itself. The visual effects cannot be turned off because the player has to see them to play in the first place.
'''Robotics Facility mission.''' Can you notice the staircase there? It's almost invisible due to the low contrast of it. The player can very well run in circles for a long time before noticing that there is a staircase there.


The same concept applies to sounds. Noise pollution and visual pollution are sides of the same coin.
'''Imperial City mission.''' The path to follow is this lift, but the low contrast prevents the player from noticing it. It's hard to notice the lift in this corner.


= <center>Open Arena</center> =
= <center>Rise of The Triad 2013</center> =


<div class="jcarousel-wrapper">
<div class="jcarousel-wrapper">
Line 51: Line 55:
     <div class="jcarousel-list">
     <div class="jcarousel-list">
         <div class="jcarousel-item">
         <div class="jcarousel-item">
<center>[[image:oa_contrast1.jpg|900px]]</center>
<center>[[image:rott2013_contrast1.jpg|900px]]</center>
<center>''Image credits: [https://www.youtube.com/watch?v=-7OOGaThz3k| World of Longplays]''</center>
        </div>
        <div class="jcarousel-item">
<center>[[image:rott2013_contrast2.jpg|900px]]</center>
<center>''Image credits: [https://www.youtube.com/watch?v=-7OOGaThz3k| World of Longplays]''</center>
         </div>
         </div>
         <div class="jcarousel-item">
         <div class="jcarousel-item">
<center>[[image:oa_contrast2.jpg|900px]]</center>
<center>[[image:rott2013_contrast3.jpg|900px]]</center>
<center>''Image credits: [https://www.youtube.com/watch?v=-7OOGaThz3k| World of Longplays]''</center>
        </div>
        <div class="jcarousel-item">
<center>[[image:rott2013_contrast4.jpg|900px]]</center>
<center>''Image credits: [https://www.youtube.com/watch?v=-7OOGaThz3k| World of Longplays]''</center>
        </div>
        <div class="jcarousel-item">
<center>[[image:rott2013_contrast5.jpg|900px]]</center>
<center>''Image credits: [https://www.youtube.com/watch?v=-7OOGaThz3k| World of Longplays]''</center>
        </div>
        <div class="jcarousel-item">
<center>[[image:rott2013_contrast6.jpg|900px]]</center>
<center>''Image credits: [https://www.youtube.com/watch?v=-7OOGaThz3k| World of Longplays]''</center>
        </div>
        <div class="jcarousel-item">
<center>[[image:rott2013_contrast6.jpg|900px]]</center>
<center>''Image credits: [https://www.youtube.com/watch?v=-7OOGaThz3k| World of Longplays]''</center>
         </div>
         </div>
    </div>
</div>
<span class="jcarousel-control-prev">[[#|&lsaquo;]]</span>
<span class="jcarousel-control-next">[[#|&rsaquo;]]</span>
<p class="jcarousel-pagination"></p>
</div>
In this map (self made), not included in the game, the colorful lights cause visual pollution. There is too much contrast. The problem here is that all lights have the same brightness and there are too many colors that make it hard to focus on one direction or another.
= <center>Shadow Warrior</center> =
<div class="jcarousel-wrapper">
<div class="jcarousel">
    <div class="jcarousel-list">
         <div class="jcarousel-item">
         <div class="jcarousel-item">
<center>[[image:sw_contrast1.jpg|900px]]</center>
<center>[[image:rott2013_contrast7.jpg|900px]]</center>
<center>''Chapter 9''</center>
<center>''Image credits: [https://www.youtube.com/watch?v=-7OOGaThz3k| World of Longplays]''</center>
         </div>
         </div>
         <div class="jcarousel-item">
         <div class="jcarousel-item">
<center>[[image:sw_contrast2.jpg|900px]]</center>
<center>[[image:rott2013_contrast8.jpg|900px]]</center>
<center>''Chapter 9''</center>
<center>''Image credits: [https://www.youtube.com/watch?v=-7OOGaThz3k| World of Longplays]''</center>
         </div>
         </div>
     </div>
     </div>
Line 85: Line 97:
</div>
</div>


The white spotlight pointing down highlights the lever that the player has to activate. The same spotlight is used everywhere in the game to highlight objectives. The spotlight's idea is right but the execution is poor. Every other light on the environment is so bright that the spotlight becomes overshadowed and hard to spot. On other parts of the same level the levers, control panels and buttons are always hard to spot. Notice how bright the blue light coming from the light pole is. That combined with the red lights on the background draw the player's eyes away from the lever that is right in front of him or her. This is further worsened by having the control panels small, whereas the surrounding structures are much larger. The game does highlight important objects with a yellow glow but it just can't compete with the brightness of the background. The object being so small doesn't help either.
This game was made with Unreal Engine 3, but compare it to Bioshock Infinite for example. Bioshock Infinite had a much better art direction. ROTT 2013 is a remake of the game of the same name from 1995. Compare ROTT 2013 with Prey 2006. They run on different engines, yet they suffer from the same low contrast issue. This is to say that the art direction plays a much more important role in how the game looks and how its environments are read than the technology itself. For example: red lights meant to signal something important are very much saturated. If the red lights are desaturated as in ROTT 2013's second level, they lose their importance.
 
The excess of colors create too much contrast and becomes confusing to the player's eyes. The extreme opposite, the same color everywhere, creates a boring scene and uninteresting places.

Latest revision as of 02:16, 11 February 2025

Prey 2006

This game suffers from lack of contrast. The environments are excessively monotonic, monochromatic. Everything is too flat, making it hard to recognize and identify objects and paths. There isn't a good contrast between light and dark which makes it hard to have perception of depth.

One solution is to use lights that highlight some parts, such as the pipes on the walls for example. Another technique is having good contrast of the textures themselves so that the player can easily "read" them.

Dark Forces

Robotics Facility mission
Robotics Facility mission
Imperial City mission

Robotics Facility mission. Can you notice the staircase there? It's almost invisible due to the low contrast of it. The player can very well run in circles for a long time before noticing that there is a staircase there.

Imperial City mission. The path to follow is this lift, but the low contrast prevents the player from noticing it. It's hard to notice the lift in this corner.

Rise of The Triad 2013

Image credits: World of Longplays
Image credits: World of Longplays
Image credits: World of Longplays
Image credits: World of Longplays
Image credits: World of Longplays
Image credits: World of Longplays
Image credits: World of Longplays
Image credits: World of Longplays
Image credits: World of Longplays

This game was made with Unreal Engine 3, but compare it to Bioshock Infinite for example. Bioshock Infinite had a much better art direction. ROTT 2013 is a remake of the game of the same name from 1995. Compare ROTT 2013 with Prey 2006. They run on different engines, yet they suffer from the same low contrast issue. This is to say that the art direction plays a much more important role in how the game looks and how its environments are read than the technology itself. For example: red lights meant to signal something important are very much saturated. If the red lights are desaturated as in ROTT 2013's second level, they lose their importance.

The excess of colors create too much contrast and becomes confusing to the player's eyes. The extreme opposite, the same color everywhere, creates a boring scene and uninteresting places.