Transcript
Unit 78: Digital Graphics for Computer Games Contents: Introduction……………………………………………………………………………………………………………………………………….. 1 Styles of Graphics Art in Computer Games………………………………………………………………………………………… 1 Application of Digital Graphics…………………………………………………………………………………………………………… 3 Picture Element and Image Resolution……………………………………………………………………………………………… 6 Types of Digital Graphics Used………………………………………………………………………………………………………….. 7 File Extensions and Compression……………………………………………………………………………………………………….. 9 Image Capture, Image Output and Storage………………………………………………………………………………………. 9 Conclusion………………………………………………………………………………………………………………………………………… 11 Bibliography……………………………………………………………………………………………………………………………………… 11
Introduction 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.
Styles of Graphics Art in Computer Games 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. [1]
Page 1
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. [2]
The Last of Us
[3] Beyond 2 Souls
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.
Page 2
[4]
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.
The Application of Digital Graphics 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.
Page 3
[5]
[6] 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. [7]
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
Page 4
world and this is brought together with the subtle background image that most people don’t even acknowledge. [8]
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.
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. [9]
Page 5
[8] The picture to the left shows the ‘Art Style: Aquia’ game with its themed graphics with matching menus and game interfaces.
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. [10]
Picture Element and Image Resolution 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.
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. [11]
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 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.
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.
[12]
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.
Page 8
File Extensions and Compression 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, Image Output and Storage 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.
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.
Conclusion 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.
Bibliography 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-styleinspired-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-rastervs-vetor : Vector and Raster Information.
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
