The term graphic analyzer has already been used. Most of those are graphic performance analyzer which mainly analyzes graphic performance.

The graphic analyzer I want to represent here is fully on the visual side. It’s a tool that analyzes how well players gonna perceive the game graphics in a technical and scientific way.

Graphic analyzer will work like this.

Recording one screen and displaying insight information on another screen in real-time, also generate custom reports if needed.

Why Need Graphic Analyzer

If I’m not wrong, game graphics can be divided into two parts, the subjective part and the objective part.

The subjective part is the creative problems. Things like, what story is the game trying to tell, and what clothes character is wearing. The choice of those is purely subjective, there is no correct or wrong for this type of content.

The objective part is more like, does the details is being clamped due to overexposure? or whether the brightness of each elements is consistent throughout the entire gameplay.

Even experienced artists would toggle grayscale mode to examine the brightness of the artwork. It would be nice to have a tool that shows insightful information about the graphic in real-time.

Similarly, rendering pipeline reverse engineering can do graphic analysis too, but there is a difference between these two.

Reverse engineering reveals the technical pathway to achieve the rendering result. This didn’t answer the question of why some games look good or bad.

The graphic analyzer is trying to analyze the gap between art design and rendering implementation.

Traditional quality assurance is more focused on performance and gameplay bugs. Maybe in the future, graphic analysis can be included in quality assurance’s workflow.

Function Required for Graphic Analyzer

1. Screen recording
2. Display information in another window in real time
3. Image filter and analyzing mode
   1. Luminance mode
   2. Hue mode
   3. Saturation mode
   4. Contrast mode
   5. Color pick mode
   6. Motion mode
   7. …
4. Worst performance needs to reach 1 FPS
5. Flexible UI interaction

Picking Up The Framework

To meet the design requirements, a graphic analyzer needs to have two key functions.

1. Record and analyze in real-time
2. Custom image filter and analyzing display option

There are some software with similar functions: Davinci Resolve, OBS

Davinci Resolve is good at the image process, but still, its function may not meet my expectations.

And, since it’s not a recording software, it doesn’t support real time image record/refresh. This would be a big time sink if user have to prerecord videos for analysis.

OBS may be the best software for screen recording. However, its default effect filter is limited. Luckily, OBS support custom filter using Lua.

https://obsproject.com/wiki/Scripting-Tutorial-Halftone-Filter

I personally think there are two important concepts in video game graphic design. Consistency and Brightness Grading.

Consistent graphics, allow players to get the immersive feeling more easily. It creates the feeling that the game is well-polished. Make the content appear confident to the player.

Human eye is familiar with 3 dimension world. However, the computer screen is flat. So, creating a graphic that can easily be picked up and understood is important. Otherwise, the play process needs a lot more effort to recognize objects in the scene.

Today, I will give some examples to briefly demonstrate these two concepts.

Persona 5

What makes playing Persona 5 so enjoyable? I think one major reason for its success is its appealing graphics.

Example: Clear Brightness Grading

• Layer1: UI
• Layer2: Character / Light Source
• Layer3: NPC / Background

Elements in Persona 5 have a brightness level depending on their priority.

The first layer is UI. UI displays the most important information in Persona 5, which is the date under the current play state. Always showing UI at the brightest layer. Make players feel safe because they don’t need to constantly worry about missing the boss fight.

The second layer is the main character and light source. All the other objects(NPC and the background) are not involved in the game story. This helps the player to catch the main event going on the screen with less distraction.

Example: Consistency Makes Content Easy to Pickup

In grayscale mode, the brightness of the content is consistently presented.

The brightest objects are the UI, the characters, and the light source.

As long as the game graphic follows the same rule. Once the player is familiar with the different brightness levels of each element. Players will learn some kind of “vision memory” about the game. This make the game graphics feel predictable and reliable.

Overwatch

Overwatch is a well-designed multiple-player hero shooter game. The level design of overwatch is not only functional but also can be easily recognized visually.

Example: Clear Brightness Grading For Critical Area

This is a screenshot from map “Hanamura”. On the right side is the objective point. Players need to focus on this area to play against the opposite team.

Turn the screenshot into grayscale and lower the luminance down.

It’s easy to notice that the area with high luminance(marked with red) is where the entrance is located. The area marked with blue arrows is where the opposite team player may jump into the scene at any second.

I believe the developer is doing this intentionally, not by accident. The purpose is to have players’ attention on those areas, so they don’t need to dig around searching for enemies.

Example: Clear Brightness Grading For Critical Area

These two locations shown above have a similar “V” shape yellow lightbar.

After applying the same filter to those images. The “V” shape lightbar in the left screenshot completely disappeared. But, the right screenshot the “V” shape lightbar can be easily noticed.

Even the lighting condition variety is pretty much the same as the “V” shape lightbar. The lightbar marked with green has no brightness difference at all.

The purpose is the same as in example 1. Try to guide the players’ eyes to the important area of the screen which is marked with blue arrow. This contributes to the game’s playability.

Genshin Impact

Example: Consistency & Clear Brightness Grading

• Layer1: Character
• Layer2: Background

Obvious brightness grading between character and background, makes graphic easy to pick up.

Pokemon: Unite

Example: Consistency & Clear Brightness Grading

• Layer1: Goal Point / Character / Health Bar / Obstacle
• Layer2: Background

Same as Genshin Impact. Obvious brightness grading between character and background, makes graphic easy to pick up.

Human eye is binocular vision. We use two eyes facing the same direction to perceive a single three-dimensional image of the object.

When objects have distance differences from each other, one of those objects will appear duplicated. For duplicated visions, I guess, human brain will recognize those areas as blurry version(out of focus).

DOF creates a sense of depth within the flat image, adding a huge realism to the graphic. Because in some way, it replicates the feeling of binocular vision.

It’s common to see DOF in real-life photos produced by a camera or phone.

In cinematics, DOF is intentionally used to drive the audience’s focus around.

Lot of games use fog to create the sense of depth, not DOF.

DOF is such a great effect. It increases the realism of the graphics by add almost zero cost to the art production. But, why most in-game graphics don’t use it?

The short answer is to protect the playability.

When the player plays the game. The scene and the character are represented on the same screen. Most likely, there is some distance between distant objects and nearby objects.

But game software doesn’t know where the player is looking at. If the player’s eyesight is looking at something out of focus, this is problematic to the gameplay experience.

To avoid undesired blurry vision, game developers don’t use DOF effect in most in-game graphics. This makes In-game graphics feel less realistic compared to other digital graphic content like movie or general video.

However, VR game is a different story. Player’s view direction can be detected. Game software can use this information to implement DOF effects without hurting the player’s vision.

Mimicking Rather Than Mastering

Camera angle and scene sets in offline CG are fixed. Artists can carefully craft every detail inside the viewport.

A single complex CG frame can take hours to render.

But in 3D games, players can move around and freely change the view angle.

It’s impossible to create in-game visual fidelity to reach CG level. Otherwise, it will take forever to finish and ship the game.

Also, if too much detail is added to the game. Game software may not be able to run smoothly on average devices. Laggy gameplay hurts playability a lot.

So, It’s a workload and computing power limitation for what developers can put into the game.

This is why the game’s graphics is always try to mimic the real world rather than fully creating photo-realistic content like cinematics.

Photo-Realistic Doesn’t Guarantee A Good Game

Scenes in real life can be boring to our brain because we see realistic scene all the time.  Human brain love new graphic styles. Different visual styles bring a fresh feeling to the player.

Cinematic lighting takes a lot of effort to create the Cinematic feeling, it looks completely different from real life. But, it does look really good.

In fact, a lot of successful games have already been proven. Video games don’t necessarily have to be photo-realistic to be good. Stylized and cartoonish video games can be immersive too.

Photo-realistic is the only about the graphic. And, graphic is just a small aspect for developers to work with.

A good game has a lot more other important things to consider. Genre, narrative, concept design, sound, animation… Above all those tangible elements, providing a consistent gameplay experience is much more critical for a good game.