Raster and Vector Images

Raster and Vector

There are two different ways to generate images, Raster and Vector. They are both different ways to create images. Even though Raster is the more common of them both, Vector is actually a better method.

Raster (bitmap).

Raster images are made by pixels in a grid, each pixel is assigned a specific 

Example of what Raster images look
like normal & zoomed.

co-ordinate. Each pixel is also given an RGB colour (mixture of Red, Green & Blue, each colour ranging from 0-255) which is sent to the co-ordinated pixels, when all pixels have their colour, it creates an image on screen. The more pixels there are on the screen, the more precise the RGB can be so the image looks better.

When magnified far enough (depending on the image resolution), you can see each of the individual pixels that make up the image. This, when used in low resolutions on video games, can make the game look really bad.

Common file types that use Raster generation include JPEG, TIFF, GIF and BMP.


Vector.
Vector images use a very different method to create an image. Vector images use mathematical points in space as references, then connects them with lines.

This is the far superior method of generating images. This is because, for example, if it was scaled to the size of the world, it will still be as clear as if it was the size of a normal Full HD image (1920x1080).

Vector compared to Bitmap (Raster)

Vector images are mainly used in mobile devices, particularly touch screen. This is because the co-ordinate based image creation helps with the relation between the input device (touch screen) and the image displayed.

Common file types that use vector generation include PSD, WMF and FLA.

File extensions and file compression

File Extensions.

When saving a file on programs such as Adobe Photoshop, there are several different types of of files it can be saved as. Different file extensions have different properties, like:

JPEG - This does not have the best quality, but fairly good compression. It is a 'lossy' format, meaning it will lose quality each time it is saved. It is 24-bit colours (16.4 million colour possibilities). This format is still widely used because it's simple, anybody can view it, and it's small file size means it is quick to upload to websites and quick to load when viewing the website.

PNG - Improvement on the GIF and JPEG formats. Low compression, but it is a loss-less format means it retains it's full image quality no matter how many times it is saved. Supports 48-bit colours (1 billion colour possibilities). Does not support CMYK, so commercial printers cannot print this file type.

There are a lot more file extensions available for use, these include:

• PSD
• GIF
• TIFF
• EPS
• PDF

File Compression.

File compression does a number of things. The main function of compressing a file is to reduce the size of the file (e.g. from 1 GB to 78 MB) depending on the type of compression. However, in order to acheive high compression, image quality must be sacrificed.

If it is going to take a few days/weeks to complete an image, it is generally a good idea to save as a loss-less format while working on it and when the image is complete then save it as a format such as JPEG (unless it specifically has to be a different type of file).

Image Optimisation and storage

Image optimisation is very important for video games. There are a few different ways you can optimise an image, but there are 2 types of optimisation file types, 'Lossy' and 'Loss-Less'.

Lossy file types make the file size smaller, but at the cost of losing some pixels, which reduce the image resolution. Sometimes this resolution loss isn't very noticeable so in some cases lossy files are better. The most common file type that is lossy are JPEG images.

The other type of optimisation is loss-less. This is where none of the pixels are lost, meaning the image resolution is exactly the same as when the image was generated. Loss-less files are much better than lossy because the integrity if the image is not damaged, meaning if it was a texture for a game at 2048x2048 resolution, that texture will be applied to the 3D Model at exactly 2048x2048 pixels. A common loss-less file type is PNG.

Applications of digital graphics for computer games

There are several ways digital graphics are used in the production of video games, including (but not restricted to):

Advertisement

Computer Graphics are used to advertise video games for several reasons. The main reason advertisers use computer graphics to show off the game is because it is the most accurate representation of the actual game, this makes the audience see what the finished game will feel like.

Game Cover

Digital graphics are used on game covers to attract people to it. The cover also shows the 'feeling' of the game, meaning it shows what the game will be like if you play it. It does this by showing what part of the environment will be like, maybe the cover will show a main character or npc's etc.


Cover for Gears of War 3.

The cover of this game shows the main character at the centre of the image, npc's either side, with destroyed environment behind them all, this gives a very good impression on what the game will be like.



Logo's

Video game logo's use computer graphics because it is easy to generate and easy to change/alter during development. Also it is very easy to duplicate for multiple uses, like in advertisements, for in-game uses or for sequels in the series. The logo below was used for The Elder Scrolls V: Skyrim, but there was also a very similar logo used for The Elder Scrolls III: Morrowind.



Logo for The Elder Scrolls V: Skyrim.

Text/Subtitles

Text is made by digital graphics, this is so they can get the right font, size, colour etc. The text also has to fit with the theme and setting of the game, for example if the game is set in a futuristic environment you might want a more futuristic look like this.

Futuristic text example.

Textures

The most obvious use of digital graphics in computer games are the textures. The textures are what make the 3D Models look like what they're supposed to. Textures can come on a variety of sizes, but always stick to 'The Power of 2', meaning resolutions of 8x8, 16x16, 32x32, 64x64, 128x128 etc. The bigger the textures, the better the game will look but it will also run slightly slower if the textures are too big. So because of this game developers have to come to a compromise on textures. Also the bigger the texture sizes, the bigger the file size which will take up more memory to install and run.

Pixels and Image Resolution

Pixel & Image Resolution

A pixel is a very tiny square that uses colour to make a picture on a screen, and it is short for 'Picture Element'. The amount of pixels on the screen determines how clear and detailed the image is.

Earlier systems, such as game consoles in the 80's, could not get a higher resolution 128x64 because of the limits of the technology in those days.

More recent systems can achieve much greater resolutions, e.g. PlayStation 3 and Xbox 360 can go up to 1920x1080 (Full HD).

RGB Colour scale.

A pixel's colour on a screen is determined by RGB Colour, which is Red, Green & Blue. Each of these 3 colours has a scale ranging from 0-255. And using this scale, each pixel has a different colour using a combination of these colour's gradients.

Each pixel is given specific co-ordinates which do not change, the only thing that changes is the RGB colour 'code'. To get a very smooth game/video, these pixel 'codes' have to be updated 60 times per seconds.


Image resolution comes in lots of different sizes, which include (but not restricted to):

 

• 420x360
• 800x600
• 1080x720 (HD Ready)
• 1920x1080 (Full HD)

If you multiply the two numbers together, that is approximately the number of pixels there are on the screen. The higher the resolution of the image, the more pixels it has and therefore the more detailed it can be.


Example:

The Full HD resolutions are 1920x1080. When multiplied this equals to 2,073,600. This can also be reffered to as 2 Mega-Pixels (rounded), because 1,000,000 pixels is 1 mega-pixel.

Where-as

8K Resolution is 7680x4320, which equals to 33,177,600 pixels on the screen. This is also called 33.2 Mega-pixels (rounded).

Image Capture