Contents:

Introduction………………………………………………………………………………………………………………………………………..

Styles of Graphics Art in Computer Games…………………………………………………………………………………………

Application of Digital Graphics……………………………………………………………………………………………………………

Picture Element and Image Resolution………………………………………………………………………………………………

Types of Digital Graphics Used…………………………………………………………………………………………………………..

File Extensions and Compression………………………………………………………………………………………………………..

Image Capture, Image Output and Storage……………………………………………………………………………………….

Conclusion…………………………………………………………………………………………………………………………………………

Bibliography………………………………………………………………………………………………………………………………………

In this assignment I will be explaining the theory and application of graphics for computer games.

The article will focus on styles of graphics, the application of digital graphics, picture elements and

resolution, types of digital graphics; file extensions, compressions and optimisation and image

capture, image output and storage of images.

There are a large variety of styles for computer games graphics to suit different themes and moods

that the developers are trying to capture when creating their game. Developers use different types

of graphics to not only capture a specific mood but to make the game stand out and give it a certain

character that can make it fit into a specific category of game styles or to make it stand out from

other games styles. An example of this is the Walking Dead Game created by Telltale games. It uses a

‘cel shaded’ art style for the textures and graphics of the game which makes it look sketchy and hand

drawn. This creates a bridge between realism and comic book styles as the game contains a complex

and meaningful story but is told in a book that seems so innocently drawn by the author.

Unit 78: Digital Graphics for Computer

Games

Introduction

Styles of Graphics Art in Computer Games

Page 1

[1]

1

1

3

6

7

9

9

11

11

The other well-known graphics style is photorealism which is mostly used by games trying to achieve

the most realistic experience possible from their game. Games such as LA Noire, The Last of Us and

Beyond 2 Souls use the highest quality images and photorealistic textures for their models. Most of

the big titles use motion capture to increase the realism of the game and when put with high quality

texturing and modelling it enhances the general feel of the game.

However creating a believable atmosphere doesn’t just come from photorealism. There are other

graphic styles such as abstract, which is useful for creating cartoony or surreal games. Abstract art is

when an artist creates a visual representation of something such that it doesn’t create an immediate

copy. An example of a game with this art style is the Rayman games by Ubisoft, which are based

around a fictional version of the real world. The use of this art style means that the developers

adopted a quirky and fun visual style for their computer games that made them stand out from

other cartoon games like it.

Another game with this abstract style is Don’t Starve by Klei which is “An uncompromising

wilderness survival game full of science and magic!” (1). The game’s art style resembles artist Tim

Burton’s quirky and gothic look which creates an interesting abstract atmosphere for the game. It

contains mystery and fear, and this is communicated to the player through the art style of the game.

Again, the game has a quirky look to it which makes it seem fun but with the fear aspects of the

game creates a certain level of creepiness before you have even started to play.

The Last of Us

Beyond 2 Souls

Page 2

[2]

[3]

The last art style I am going to discuss is exaggeration which over-hypes the characters, objects and

scenery. An example of this is the Final Fantasy games which exaggerate features on the characters

and events during the game play. The attack animations are quite big and colourful and the apparel

that the characters wear is also quite large and overly detailed. Games with a manga art style often

contain these features to exaggerate the hair and eyes on the characters, and the predicament or

events during the game.

Digital graphics is not only about the art style and overall appearance of the game in the final

product. Games developers use digital graphics as a way of determining the style of the game such

as the multiple examples in the previous section of this assignment. During the early stages of the

development of a game, concept artists draw up concepts for the different art styles they could use

for the game. Artists sketch the characters, weapons, vehicles and the environments in different

ways and styles to show the wide variety of choice the developers have for the game’s graphics

style. This is an important decision because the choice of art style will affect the experience and

impression that the player will have during the game.

An example of this is the change of style that the developers at Gearbox Software decided on during

the development of Borderlands. In late stages the developers changed the art style to a cel shaded

one rather than a realistic look because they wanted the game to make a different impact on the

player and wanted it to match their original, quirky concept designs. The new art style was inspired

by a short film because the film gave the atmosphere they were trying to achieve in the game. The

art style seemed to give the game a unique aspect to it that made it different from other first person

shooters.

The Application of Digital Graphics

Page 3

[4]

Team Fortress 2, a game made by Valve Software, went through a change in graphic style in late

development too. Originally Team Fortress was styled for a classic shooter but later the developers

changed the style of Team Fortress 2 for more of a humorous style. The characters are all very wacky

and different shapes and sizes to give each character a personality and also to make each one more

recognisable on the battle field. This change in the overall style made the game a lot more

interesting and fun, which is why it is so incredibly popular. Without this late change the game

certainly wouldn’t be as popular and unique as it is now.

Digital graphics can also be put into practise in the saving of hard drive space on the platform the

game is built on. In two dimensional games such as platformers, background graphics are used as a

way of covering a large space of the screen with one picture. Usually the graphic will either scroll as

the player moves along the screen or change to match the different aspects and areas of the level.

An example of background graphics is the Mario games (mostly the earlier games although some of

the more modern versions are still 2D games). These games contain background graphics that are

designed to follow the art style of the game and the mood that each level contains. During earlier

Mario games developers created each level and world with their own unique personalities that give

each section of the game its own character. The tiles, enemies and objects are all in uniform in each

[5] [6]

[7]

Page 4

world and this is brought together with the subtle background image that most people don’t even

acknowledge.

Other uses of digital graphics are the Graphic User Interface (GUI) and the Heads Up Display (HUD).

The GUI is the menus for the game such as the main menu, the inventory menu, trade menus etc

and usually has some artwork in the background or pictures of the game. Even the buttons, boxes

and text fonts are designed around the theme of the game but have to be simple and functional as

well as aesthetically pleasing.

An example of designed GUIs is the ‘Art Style’ puzzle games by a Japanese developer named Skip;

the art style of each ‘Art Style’ game is an important part of development as each game uses

different colour combinations to convey the theme of the game. ‘Art Style: Aquia’ is an ocean

themed game and he designed the background image, puzzle elements and the puzzles themselves

to follow this theme.

The green bushes image at the back of

this image is the background graphic

that scrolls as Mario moves across the

screen. As you can see it matches the

grass on the floor, the green Yoshi

character and the mushroom. This is

what sets the mood for the level and

one of the reasons why the games were

successful.

[8]

[8] The picture to the left shows the ‘Art Style: Aquia’

game with its themed graphics with matching menus and

game interfaces.

[9]

Page 5

Another strong example of HUD and menu graphics are the menu screens in the computer game

Dead Space by Electronic Arts. In this game the menus have not only been designed and developed

so they fit with the game, but also incorporated into the actual game play so that the menus become

part of the in game world. With this technique the game has been able to maintain momentum and

immersion that other games can lack when opening menus. Sometimes when in a game operating

menus can take you from the game world and therefore ruining the immersion that the game has so

far built up for you. Below is an image showing the inventory menu. As you can see the holographic

projection menu fits with the environment and this picture also shows the character looking at it

showing it is an actual, interactive menu within the game world. What makes the menu more

interesting is that the different sections in the menu correspond with the character’s attire and

equipment – For example the blue spinal cord on the suit is connected to the health indicators in the

in game HUD.

The simplest element of an image is a pixel or picture element. A pixel is represented as a collection

of components such as the colour of the pixel which is a designated mix of red, green and blue.

Other factors include the intensity of a pixel which is the amount of lighting or how much light is

added to the pixel or image as a whole. Pixels are usually dots or tiny squares placed into a miniscule

grid on the screen. The amount of pixels in this grid at any one time is known as the image

resolution. The larger the amount of pixels on the screen at any one time determines the quality of

the image being represented.

Picture Element and Image Resolution

[10]

Page 6

A constraint in the early stages of game development was the image resolution. In older games

platforms the memory capacity was considerably lower than it is now resulting in an 8 bit display

which meant that less pixels could be used to represent objects and characters on a screen. This is

why when you look at old games such as the Mario games you can see that Mario is less

recognisable because it is harder to represent him in such a small space. The 1987 to 1991 Mario are

pixelated images but he is a recognisable character because more pixels have been put in to detail

his face, hat, clothes etc. In later games platforms the hardware was upgraded meaning more

memory space and processing power so developers could introduce 16 and 32 bit resolution for

their computer games.

There are two main types of file used in the games development industry; Raster and Vector.

Raster files keep a fixed scale of the image that is being developed by a digital artist on screen. These

images are made up of a set grid of pixels each with its own set colour value. Raster images are

useful if you want to edit them because they are made up of lot of pixels which is very easy to edit

and change. Raster images however, have very large file sizes. Because of all of the pixels and their

colour values, a raster image will carry a lot of memory with it.

When changing the scale of a raster image you stretch or shrink the pixels causing blurriness and

making the image grainy and unclear. Photoshop will try to fill in the gaps with extra pixels if you

resize images which can also cause distortion in the image.

Examples of raster programs are Adobe Photoshop and GIMP. Photoshop and GIMP are raster based

so that users can do precise editing to photos, since photos are created as raster images too. Every

time you change the colour of a pixel in a raster image, the numerical value of the pixel changes.

An image showing the

evolution of the Mario

character. Later versions show

a more recognisable and

distinct character because he is

built up out of more pixels.

Types of Digital Graphics Used

[11]

Page 7

Over time this can make the file size larger if you’re adding information to the photo, and can also

cause the editor to slow down.

Vector images are different as they do not contain pixels in a grid. Instead they have vector points

telling the computer how to connect them when the image is open. In a raster image of a shape,

thousands of pixels would make up the image. In contrast, a vector image of a shape would only

contain the points on the edge of the shape which would each contain information on the way to

attach and colour each one. This means that vector images can scale to bigger or smaller sizes with

no distortion or repair needed because when you resize the image the computer can calculate the

best way of scaling up the information given in each vector point.

If the image was printed however, the vector points would be invisible and so you would achieve the

same level of quality as a raster image if not better. It’s very easy to edit a vector image (using some

of the examples below) because the computer will record the changes you make in the appropriate

vector points on the image. (In contrast to a raster image which would change and record each and

every pixel you edit.)

Drawbacks include the inability to achieve the colour depth of a raster image, as raster images

contain a greater amount of information for the colour of each tiny piece of the image. Also vector

images work better with straight lines and curves so you may not be able to achieve some other

lines and edges that you might be able to create with a raster image.

An example for use of vector images is a logo because a logo needs to be changed to fit the size of

posters, handouts and the game’s slip case. Examples of Vector programs are Adobe Illustrator,

Inkscape and CorelDRAW.

Lots of raster images would exceed the assigned memory space for the game and more importantly

slow the game down on the platform. Vector images are preferred for parts of the game that aren’t

looked at closely or are less important parts of the scenery or object because they have a much

smaller file size.

[12]

Page 8

File extensions can determine the type of file the image will be (raster or vector). When you save an

image as a .PNG file, it looks for areas of the picture that follow a pattern so it can blend colours and

shades together to reduce the file size. Areas of similar shades or colours will be taken out and

replaced with one colour which can reduce the file size without degrading the image. Most images

on the internet are stored as a .JPG file because it is the perfect file type for photographs. A .JPG file

allows very high quality images while keeping the file size low as it takes out pieces of the image that

the human eye is least likely to pick up.

There are two types of compression, lossy and lossless. A lossless compression algorithm will never

take information out of an image. It tries to determine a high quality image without damaging it. An

example of lossless compression is when patterns are found in the image and are represented as

one piece of data rather than many. This was mentioned previously about .PNG files. A .PNG goes

through a lossless algorithm to keep quality high and memory space low. Lossy compression is when

the algorithm takes out information in order to reduce file size. This method is useful when you need

low file sizes but not so useful for high quality images.

Image Capture:

There are many different ways of capturing images particularly recently since enhanced technology

and software have been developed. Examples of capturing images on screen are; print screen, when

pressing the print screen button to capture a still image of everything displayed on screen at the

time. Cameras can be used to capture images in the real world and scanners are used to take

pictures of documentation for use on a computer (a little like a reverse printer). Nowadays tablets

have become more of a common way of capturing images with high quality cameras and the ability

to download image editing software and a connection to a computer.

You can also capture moving images on a screen with screen recording software such as Fraps. With

this you can record videos of everything happening on screen much like print screen but for moving

images. You can also use a capture card for this method of recording which works much like Fraps

yet it is a piece of hardware connected to a computer or console.

Image Output:

Optimising an image is to make the image right for the purpose. You can optimise an image in its

size, using the right file type for a specific requirement (for example a Game Design Document

(GGD)). In the recent increase in gaming on the mobile market developers have had to create

smaller assets as the hardware inside a phone has not yet caught up with the quality inside a

modern day desktop personal computer.

File Extensions and Compression

Image Capture, Image Output and Storage

Page 9

Storage of Assets:

Storage of assets in a development team must be tidy, efficient and accessible. All members of the

team must be able to work with the management of files in order to work efficiently. This is

particularly important when on a tight deadline. How you organise your assets for the game can

determine the overall outcome of the game and team collaboration.

In summary; there are lots of different styles of computer games graphics to give the player a

different emotion or experience when playing the game. The look of the game is a first impression,

and will often determine the way a player will play the game and for how long. Concept art is an

important part of the initial development process as ideas and choices must be sketched in order to

allow the game several routes of completion. The art style must match original ideas and concepts

among the development team to create a successful game. Images are made up of picture elements

or pixels, and the file type and type of compression may decide the quality of that image in the

game. There are many ways to capture pictures and record moving images. For a successful and

efficient development team the assets created must be stored in a basic and understandable

structure to allow high levels of team collaboration.

Information:

www.dontstarvegame.com : Information about ‘Don’t Starve’.

www.dontstarvegame.com : (1) ‘Don’t Starve’ quotes about the game.

www.dsogaming.com/news/this-is-what-borderlands-was-originally-meant-to-look-like-art-style-

inspired-by-short-film-codehunters/ : Information about the Borderlands cel shaded art style.

Multiplayerblog.mtv.com : Borderlands’ new art style.

En.wikipedia.org/wiki/Pixel : Research into Picture Elements.

Users.wfu.edu/Matthews/misc/graphics/formats/formats.html : File types and compression

research.

99designs.co.uk/help/what-are-vector-and-raster-images-when-should-i-use-them : Vector and

Raster Information.

www.graphicdesignforum.com/forum/forum/graphic-design/resources/89-an-explanation-of-raster-

vs-vetor : Vector and Raster Information.

Conclusion

Bibliography

Page 10

Pictures:

[1] Multiversitycomics.com : Walking Dead Game picture.

[2] www.digitalspy.co.uk : Last Of Us image.

[3] www.giantbomb.com : Beyond Two Souls picture.

[4] Gotogames.net : Don’t Starve picture.

[5] www.dsogaming.com : Borderlands old at style.

[6] www.ign.com : Borderlands new art style.

[7] http://www.killergametips.com/wp-content/uploads/2013/08/tf2.jpg : TF2 Image.

[7] wall.alphacoders.com : Mario background image.

[8] dsmedia.ign.com : Art Style Aquia.

[9]http://cloud.steampowered.com/ugc/576705344618799030/07837980C56602798DA8A24C6B58

D1FF25DFEFCD/ : Dead Space Menu.

[10] www.imisstheoldschool.com : Mario evolution.

[11] www.extremetech.com : Car image.

Research in Official Nintendo Magazines

Official Nintendo Magazine, ONM, 2010, Art Attack, Issue #51, p.014

- ‘Art Style’ games by Skip.

Also researched in ONM issue #49 and #59.

Page 11