Unit 78: Digital graphics for computer games

Unit 78: Digital graphics for computer games

September 26th, 2018

Task 1

In unit 78 I am doing contextual research to understand the theory and applications of digital graphics used for computer games.

Some of the artistic styles used in computer games are as followed:

Photorealism

Photorealism is a style that would make a drawing or painting and even games look as realistic as possible using a lot of details to capture the realism. Making an image look realistic is a very difficult task as capturing reality can be difficult but the main issue would have to be the processing power.  The difficulty of rendering a photorealistic image is truly captured when Jill Scharr says "To make movies like "Avatar" and "Life of Pi" appear photorealistic, each frame of the movie was pre-rendered. That means that the digital models and scripted motion in a virtual scene are compiled into grames (usually up to 30 grames per second) and touched up a process that can take hours per frame."

Photorealism in games is practically here with some of the new gens looking extremely amazing, graphics wise. The real difficulty we are facing is that we do not have fast enough computers to render and process all the information in real time.

Since the 90s the graphics and equality of video games have drastically approved and will only get better as we find new ways to advance technology and find new ways to improve our processors that is needed to use such graphics.

Example of how video games have changed:

Spiderman 1 (1990)
 
In this example, we can see the quality of the gameplay is very low, even modern games that are played on the phone has much better quality than this old classic.

Spiderman (2018)

In this example it is different, it is much more clean cut and looks much more realistic so much so that without taking a second look people will assume it is a real life picture when in fact everything was made digitally. 

Cel-shading

Cel-shading is very different from photorealism, cel-shading doesn't really attempt to capture all the realism and instead rather keeps the comic style graphics. Whereas photorealism tries to capture the realistic details of real life and implement them in a digital game. Cel-shading typically starts off with a 3D model and adds a 2D texture then uses different shades to make the image appear 3D and outline the edges in black to make it stand out and give it that final 3D effect.

Abstraction

Abstraction within gaming is the process of adding details to a 3D model using shapes and lines to resemble the real version or to look as realistic as virtually possible.

In this image, abstraction is used to make this wall seem like a real wall. The design of this wall makes it seem as if it was made a long time ago and that all the scratches and deformity was made over time but in fact, it was probably textured in a day. The texture made it seem if the wall has aged. Abstraction in texture is very important as it gives the illusion and concept of time in the gaming universe. 

Exaggeration

The idea of exaggerating specific parts in a game changes the whole vibe in a scene. The most commonly exaggerated design in games would have to be the sword. The exaggeration of the height and width of the sword boosts specific perspectives in the game. The bigger the sword = The stronger the damage. This is done in many ways too, some examples of exaggeration in gaming is

The Berserker from Borderlands 2 is a big and muscular character, what they have exaggerated is his size. This is important as it represents his playstyle. The Berserker is a tank so he can take a lot of damage but at the price of being slow, that can be seen by how big he is as size also changes the speed of things.

The exaggeration in this game (God of war 4) is the emotion that Kratos (The character is shown above) is feeling. It is obvious that this character is extremely angry, which sets the tone in the game. Anger is normally associated with violence and power. To over exaggerate his anger emotion really sets the tone and mood of the scene within a game.

Exaggeration can be used to set a tone or mood through the game and is a key part of what makes a good game and should not be overlooked.

Some other kinds of graphics in gaming are computer graphics:

Pixel Art

Pixel art is a type of graphics that used to be evolutionary, one of the iconic and most recognizable characters of all time was made through pixel art, pixel art is also known as Spriting. 

Super Mario Bros is still one of the most popular games in history dating back since 1985, it truly set the popularity of gaming through the roof. Super Mario Bros was a 2D sprite game.

A sprite is just a cluster of dots that is designed to make a 2D object or character when viewed from afar. 

In the 1980s sprites was the standard graphics in gaming. Sprites are generally blocky but easy to process and create. To this day a lot of games are still being made with sprites and some great games have been published using this graphic design such as Undertale and Cuphead.

Sprites can be a static image or can be animated using premade sprite images. 

Sprites are not limited to 2D but can also be moved into 3D.

Sprites are good for making games with basic game mechanics. 

Concept Art

When designing to make a character or environment it is always good to make concept art, concept art allows the designer to visually show other people the character design. 

To make a concept art doesn't mean you require a Leonardo da Vinci level of art skills. The drawing skills have to be good enough to visually show the design.

This is important for any designer so that your peers are on the same page of the idea.

This allows easy communication of an idea and prevents misleading information. 

Texture Art

Texture art is the details and design on the surface of an object. Texture art is critical in video games to give the illusion of the realism in that object. Texture sets the tone of the atmosphere and the tone of an environment of the game. 

This is a sword from a game called Devil May Cry 4. This is the 3D Model with a before and after effect of the texture. 

In-game Interface

In-game interface is important in gaming to allow information to be shared with the player, the in-game interface normally come in several categories. The HUD (Head-up display) shares different information with a lot of different styles. Some of the information includes health, ammo, score. In Borderlands the HUD indicates where the mission is located using a campus including the player's health, shield, ammo, and power up cooldowns.

Play Field displays information within the game like how a character interacts with an NPC(Non-player character) These might change depending on level and area whereas the HUD is more constant throughout the entire game.

Interstitial information is viewed while in-game downtimes such as loading screens or any cinematic sequences. This information is usually bits of ideas or tips to intrigue the player's interests.

Options are normally displayed through a menu screen. This interface is generally used to set up the game to the suit the users playstyle. Also sometimes allows login access.

Print Media

Print media shares information through art which will be printed and advertised through multiple methods which will be used for marketing. Posters are old fashioned but still used at bus stops and cinemas. Box art is also another method used to show the art and provide information about the said game. Print media is essential for any information to a game in the form of a printed sheet. The aim of this graphic is to attract people through the art and design of the games. 

Pixel

Pixels is a cluster of dots with programmable colours on a computer screen to display an image. The physical size of each pixel can be changed depending on the resolution size. 

Within computing, the resolution is the number of pixels that can fit within a monitor. The sharpness of an image is dependent on the resolution and the size of the monitor. The bigger the monitor equals having higher resolution. Higher resolution means sharper images. A given monitor will have a maximum resolution that depends on its physical ability to focus light. 

Digital graphics

The word graphics is used when referring to any type of visual representation displayed on a digital system. There are three types of graphics; images, computer-generated graphics, and computer-generated images. There are different graphics and different files to suit those graphics.

Raster
Digital graphics can either be created as a raster or a vector image. Raster graphics use Bitmap to make an image. Bitmap uses dots to make an image. The dots turn into different colours so that when viewed from afar it will form an image.

Raster images are used on non-line art such as Photographs, scanned artwork or detailed graphics would be raster images. Raster images form a subtle chromatic gradation, undefined lines, and shapes.

Due to raster images being pixel-based, the images suffer when changing the scale. If making a raster image bigger than the ideal size, it will show each individual pixel which can make the image look blurry, jagged and or rough.

Raster images are resolution specific. This means that raster images are displayed at one specific resolution, and resolutions are DPI-based.

Higher DPI means better resolution and a clearer and crisper image.

Even though a better resolution image is better, it also comes with bigger file size. Raster images are slower to display and print but some images like photographs are best displayed in raster format.

Raster formats: TIFF, JPEG, GIF, PCX and BMP files. These formats are still widely used in web standards.

Vector

Vector Images, unlike raster images, are based on mathematical formulas. Vector graphics are composed of geometric patterns, vector images are best to represent structured images like line art graphics with flat, uniform colours. Vector images are quickly and perfectly scalable. There is no limit to how big or small the image can be, the crisp soft look will remain. Vector images are not resolution dependent like raster images.  Vector images usually use the format AI, WMF, FLA, EPS, SVG and sometimes PDF.

File Extensions

File extensions are what identifies the specifics of the file. It helps identify what type of file is in the operating system, normally shown at the end. After the filename followed by a period will be the file extension. Notepad on windows makes a file extension of Mywork.txt which is an extension associated with text files.

A file extension is normally 3 or 4 letters long but can be longer in length as long as there is a program that the operating system can identify and open.

There are thousands of file extensions that connect to one or more software, too many to name. Sometimes file extensions do not show up, that is because it is hidden but that can be changed by editing it in the properties.

What if you wanted to change the file type? It is possible to do so, but it is dangerous as this can cause you to lose work. Let us say that we have a Logo.jpeg file and we changed it to Logo.txt, the file will try to open to your default word software and a lot of gibberish will show up. 

For that reason, windows and mac always have a confirmation message before it completes this task.

Compression

Lossy and lossless determents if a file loses information or not. Files can be huge and too big to send through the Internet, a solution to this is to compress a file and make it smaller.

Lossless and lossy compression are terms used to describe if a file will lose some data or not. Lossless compression is when every bit of data will be restored, with nothing missing. Gif is an image format that uses lossless compression. 

Lossy deletes some data from a file, however, it is minimal data that the user won't even detect it missing. JPEG images and other still images normally use Lossy compression, the user can determine how much data to delete to reduce the file size.

Optimizing

Target image output

Always aim to get the best image output. It depends on the Monitor, TV and GPU, because of this the image output will vary. If the TV and monitor is HD and the GPU can handle the processing, the average best possible setting is 1080P.

Image bit depth

Bit depth is the colour information stored in an image. The more bits in an image equals more colours and a better quality image.

A 1-bit image can only show two colours, black and white.

Image resolution

An image resolution describes the amount of detail can be put on an image. A higher resolution image will always be clearer than a low-resolution image. However, image resolution is important because it always the size of the image to be quite large but the file size also gets infected and must be considered.

Image dimension

Image dimension is the length and width of a digital image. normally measured in pixels but some software allows it to be measured in inches or centimetres.

Compression

As mentioned before, there are two different types of compression, lossy and lossless. Lossy compression is a method used to compress files by permanently deleting bits of data when uncompressed but hardly noticeable. Lossless compresses data but when uncompressed it will have all the data as the original.

Image capture

Image capture is a tool on Mac that allows the user to connect with other devices that are connected to the mac without having to install a third party software to do so. 

Image capture allows users to set up a default photo application. By default Macs open iPhoto when plugging in an iPhone or Ipad into a mac but with Image capture, the default can be changed to whatever the user desires. 

Image capture also controls scanners if they are connected through USB or wi-fi to the Mac.

Using Image capture the user can use auto importer on any device connected to the map which allows the user to quickly import any image or video straight into the mac from said device. The auto importer also makes its own folder without having to open any other software to do so.

Image capture is normally overlooked but allows much more features than the standard Iphoto that everybody uses.

Storage of image assets

Image files are made from vector data, pixels or both of them, the image file size is shown in bytes the same as any other software. The more pixels being used and the greater the resolution equals a larger file size. 

The top most common image file formats that are important for printing, scanning and for web use are TIF, JPEG, and GIF. Tif, however, can't be used on the web.

File and asset management is extremely important for you and your peers, keeping work organized prevents the needs for you and your peers to look around for assets. Generally, when having two assets that are for the same project they will be placed in the same folder. This makes it easier to find and if another person is looking through your work they wouldn't have to look around to find the asset. This also improves productivity, as it depletes the need to have to look through all the files to find one asset.

Not only that, some files have to be in the same folder such as Adobe Illustrator. When making a project on Illustrator, it is important to have the assets in the same folder. This has to be done because if the project gets moved to another device and the assets did not get moved with the original project. The content of the project will become corrupt as it does not have the source block. This is why the assets and project must be put in the same folder and moved to another device together.