Raster and Vector images

Raster and Vector images

Raster and Vector are the two different types of computer graphics. The difference between the two is that Raster Images are made up of pixels, raster images are also known as bitmap images. Vector images are made up of paths and are also known as .esp files. They use points and paths and create an image when they connect together. Vector images are generally higher quality than raster images because they appear the same at any resolution whereas with raster images, it would look smooth at a larger resolution, but when zoomed in, you can easily notice all the individual pixels and colours in the image.

Comparison of Raster and Vector graphics

Raster images are more suited for digital photos and game textures. As Vector graphics are made up of paths and smooth lines, it is suited for things like logos. As whatever size it is, it appears the same in quality. 

With game graphics (specifically in Flash games), Vector images are better suited because as they are mathematical equations (the paths and points joining up together) they are smaller and is faster to download. Also, depending on the resolution of the user's browser, the game graphics would stay the same and not pixelated. Raster images, as they are made up of many individual pixels in one picture, they are larger and slower to download. Therefore, vector images are best when it comes to flash games. You will often notice how most flash games have smooth, 2D graphics and never appear blocky, this is because they are indeed, using vector graphics.

Example of a Flash game using vector graphics

In photoshop, you can convert raster images into vector images. A way to do this would be to import a silhouette into photoshop. When the silhouette is first imported in you will notice the pixels in it when you zoom in. This is because images imported into photoshop become raster images. In order to turn the raster silhouette into a vector you must make a selection around it using the magnetic lasso tool and then make the same silhouette but as a vector. On the layers, select a new path and use the pen tool to draw around the silhouette and then change the colour of the silhouette whilst the path is still selected on the layer. It's now been converted into a silhouette.

Image Capture

Image Capture

An example of image capture would be scanning a picture onto the computer. Its sorta like printing, but in reverse. An amateur way to get a physical picture/drawing onto a computer would be to take a picture of the drawing with a camera, then copy the image onto the computer. However, the picture quality is not as good on the drawing when shot with a camera so the proper way to do it would be to use a scanner to scan the picture onto the computer.

A Scanner

In the games industry, image capture is very helpful as having a real life image in digital form on a computer is very helpful for development. For example, taking pictures of outdoor scenery could help contribute to designing an environment for the game. As you have the picture to refer to as help for inspiration for the environment. Images on digital cameras are very easily transferable to a computer as you can just connect the camera to the computer and copy the images over. Or just take the SD card where the pictures are saved out of the camera and put it into the computer and so the same thing.

Real life images could also be implemented into the game aswell as you could take a picture of lets say a brick wall and use the picture you took as an actual texture within the game. Of course the image would have to match a pattern so the texture wouldn't have lines running through the sides of it on the object and the image would have to be optimised (power of two) in order for the texture to display properly on the 3D model.

Scenery in Germany. Taking pictures of good scenery which could inspire an environment/level for your game could be very helpful as you have the picture saved so you can always look back to it for help whilst designing the environment.

There is also image capturing software which can capture images from your computer screen. One of the simple methods which is available to every one is pressing the 'PrtScr' (print screen) key, this takes a screenshot of whatever was displaying on your computer at the time.You can use an image editing software (like paint, as every windows computer has this) and paste the picture onto it and save, thus successfully saving a screenshot from your computer. This is really helpful for when your doing a written tutorial for someone and you need images showing the process to accompany it. There is also software which can record footage on your computer (e.g. hypercam, camstudio), this software is called screencasting software. It can capture footage from a computer screen and convert it into a video file such as AVI or WMV. It is very helpful for video tutorials or recording game footage on your computer.

HyperCam, a popular screencasting program

File extensions and File compression

File extensions and File compression

A file extension is the last 3 or 4 words which make up a file name. This is also known as a suffix. If you were to change the name of a file extension (e.g. accidentally changing it when renaming a file). Then the file will not work. However, changing the file extension back to it's original name would make it work as normal again. An example of a file extension would be .exe or .avi. These letters determine what program it would open in. So an avi extension would tell the operating system to open it up as a video file.

A list showing the icons of various file extensions.

Examples of file extensions:
JPEG- Image file
avi- video file
txt- Text file
doc-Word document
exe-executable (program)
mp3-music file
wav-sound file

These are just some examples of file extensions. There are many file extensions each for different programs for example, a .gmk file would be a file opened with Game Maker. However, you would need Game Maker installed on your computer in order for the file to be used. Because as the extension determines that the .gmk file is to be opened with Game Maker, if you don't have Game Maker on your computer the file cant be accessed.

File Compression is the process of reducing the size of a file to save disk space. A common way of compressing data is adding it to a 'zipped' folder. The file extension for a zipped folder is known ad .zip and when the contents of the file are zipped, they can be uploaded onto the internet for other users to download (this is known as file sharing). A regular folder cannot be downloaded just by itself, it can when being downloaded as a torrent file but besides this, multiple items which are in a file to be downloaded off the internet are always in a compressed state such as a zip file or a RAR (a RAR file is one of the other compression file extensions. RAR and zip are the most common compressed folders.).
There are two different types of file compression. Lossless and lossy. Lossless file compression is for mainly text and image files. This is a conviniant way to save file space as you don't lose any data with Lossless compression. Lossy on the other hand, can lose data when files are being compressed. 
Extraction is the process of uncompressing the compressed files. Its very easy, you often just right click and click on 'extract files' and all of the files are returned to their original uncompressed state. When a user downloads a zip or rar file, they often extract it before using any files contained within as there are limitations will compressed files, especially those of lossy compression.

WinRAR. A popular program used for extracting RAR,ZIP and other compressed files.

Image Optimization and Storage

Image Optimization and Storage

Image optimization is when you compress the image to the most compressed but visually acceptable image for saving memory. Image optimization is also referred to as 'the power of two'. The power of two is when the width and height of an image is at the same value (e.g. 256,256 or 512,512), when applying a texture to a 3D model, the power of two rule is a must use. Ever worked with applying your own textures to 3D models only to find out the texture doesn't display correctly on the model? Chances are you didn't use the power of two rule. You have to use the power of two rule because if the width and height of a texture aren't the same and you applied the texture to the model then the result would be the texture wont be on it properly. Parts of the texture would be missing and it wouldn't fully cover the model.

A brick wall texture. This has been optimized to the size of 256 x 256

When a the size of a texture is stretched to fit a model by the program this is called interpolation. When interpolation is taking place with applying the texture to a bigger model it interprets how the image would look if it were bigger and by doing so, it would add whatever different colours it can from the image to fill the blank parts of the model. Of course if a texture is too small for an object/model, then the result would be the texture would appear very pixelated or blurred on the model. And textures of bigger sizes would use up more space on the hard drive. This is why we optimize the images using the power of two rule so we can save space as well as the information being processed on the computer faster meaning the program wont slow down when applying the optimized texture.

Another thing to consider would be the file type of the image. A JPEG file is known as a 'lossy' in this term because when an image file is being converted to a JPEG, some data is lost in the process and when the size is smaller, the optimization also decreased. A better alternative would be to use a PNG format image file. A PNG is known as a 'lossless' file because when an image file is converted to a PNG, no data is lost. And as no data is lost during compression, this makes it a much better file for optimization and a better format for a texture rather than a JPEG.

Taken from Wikipedia: A comparison of the differences between JPEG and PNG

Applications of Digital Graphics For Computer Games

Applications of Digital Graphics For Computer Games

Cel -Shaded graphics in
the Legend of Zelda: The Wind Waker gave
the game a cartoony feeling

Fur rendering on Fox in StarFox Adventures

Computer Graphics are one of the defining features of video games. Now-days, visuals can make or break a game in sales. If a game has flashy, high quality graphics, that will catch the consumers eye. However, if a modern game is released with dated graphics, even if the gameplay is fantastic the overall sales might suffer because of the dated graphics making the game look inferior to other games on the market. Graphics give the game an atmosphere, effects like fur rendering (fur rendering is used on game characters, often animals to make the fur look realistic) can make the game more realistic or cel-shading, which gives the game a 2D look but plays in 3D. 

Textures

Textures are possibly, the most important feature for 3D models (aswell as the overall design of the model + the poly count) because without textures, the models would have no detail. They would just be white (or possibly another basic colour) all over. An example of this would be on Wii64, the Nintendo 64 emulator on the Wii. On the current version, Wii64 beta 1.1 'Honey' when Banjo-Tooie is played on the emulator, as the emulator currently has compatibility issues with the game, the environment textures are completely blank (all white). The character models retain their textures but due to the lack of textures in the levels, the game is practically unplayable on the emulator. However, on the emulator settings, when FB textures is turned on, the textures in the environment are now here, thus making the game more playable but slowing down the overall gameplay.

Banjo-Tooie displaying texture issues on the Wii64 emulator

Texture Mapping

Texture Mapping is an application used in digital graphics. It's application to 3D graphics was pioneered by Walt Disney Animation Studios and Pixar Animation Studios President Edwin Catmull. As well as 3D animation, Texture mapping is a method used in 3D games. It's a method of adding detail to a 3D model via adding a texture to a 3D model. Either Bitmap or Raster images are suitable image files to use for texture mapping. A texture map can be compared to the method of a cube net when you make a 3D cube out of paper. As the 3D cube has a net which you fold around in order to create the cube, if the 3D model happens to be a head, the texture map would wrap around the model in order for the texture to be completely applied to the head, thus texturing the model. When applying a texture, it is recommended for the pixel width/height to be a combination from 32, 64, 128, 256 or 512. the reason for this is so the textures can be equal because if the width/height were at random values, the texture wouldn't appear correctly when applied to a 3D object.

A texture map of a head

As hardware has improved over the years, textures can now be more detailed. Graphics Cards cannot render texture maps that exceed the limitations of it's hardware. It requires a certain amount of RAM and graphics memory in order to be rendered.

Text Graphics

Text graphics would be the font of the text used in-game. For example, a game like Banjo-Kazooie (you've probably established I am a big fan of the game!) would use a more cartoon-ish font like Comic Sans due to it be a cartoony platform game. A war game like would use a stencil font as that fits in with the theme of a game. Text graphics also serve an important purpose because if a very basic font was used it would make the game look rather basic and unprofessional and if a cartoony font were to be used in a more serious action game, it would look out of place and ridiculous. It is important for the developer to choose the right text graphics for a game.

Game Packaging Textures

This is for the packaging of the game (box art, etc). Generally, artists specializing in programs such as photoshop would be working in this field. The game packaging is important in terms of looks. For example, the box art for Uncharted 2 is appealing. It is a rendition of a scene in the beginning of the game where Nathan Drake is hanging onto a railing of a train which is hanging off a cliff. This is an appealing and exciting image for the box art which will catch a customer's eye. For example, you could be in a game shop and notice a copy of Uncharted 2 and decide to take a look at it because the front cover of the game looks cool and implies that this is an exciting action-adventure game. The customer may think "hmm this looks like a good game! i might give it a shot!" and they go ahead and buy the game. Even something like the packaging of a game is important to sales because if the box art was just the Uncharted 2 logo with a blank background it wouldn't be eye-catching thus a customer wouldn't bother having a closer look at it, meaning less sales.

Custom Textures in Homebrew gaming

 We live in a day and age where computers can emulate consoles from yesteryear and not just that, Homebrew developers and hackers have developed software and tools for editing games (like AdvanceMap which allows users to hack and edit Pokemon games and Toad's Tool 64 which allows users to hack and edit Super Mario 64). Whilst this is copyright infringement and therefore, illegal it doesn't stop many hobbyists from doing playing ROMS on emulators. Toad's Tool 64 is a software specifically developed to edit a Super Mario 64 ROM and the edited ROM can be played via an emulator. One of the defining features of this software is the texture modifying. You can change the textures of the models in the game which can even create a different atmosphere in the game even if everything is the same except from the edited textures.

Mario 64 with normal textures replaced by classic 8-bit textures on Toad's Tool 64

Pixels and Image resolution

Resolution

Different Resolutions of an image

Most references to resolution are in the form of dots per inch or pixels per inch. The accurate description for pixels per inch would be Pixel Density. Pixel is short for pixel element (Pix stands for picture and el stands for element). With films, pixels are rectangular and with stills, you get square pixels. Really, all pixels are are coloured squares (or black and white pixels if the image or film has no colour).

As for resolution, a computer screen would typically have 72 PPI (Pixels Per Inch) and for printed images, they usually have 300 PPI. For game developers developing for mobile platforms, knowing the resolution for the mobile device they are working on is crucial. As they would be developing the game on a computer, they would need to render it in a lower resolution for the mobile device as the computer screen has a much larger resolution than a mobile screen. A resolution of 420 x 360 would have 420 PPI horizontally and 360 PPI vertically.

Bits

Bit is short for Binary Digit. It is the basic unit of information in computing and telecommunications.
The first mention of the term "bit" was written by John W. Tukey on a bells labs memo on January 9 1947 in which he contracted "binary digit" to "bit" thus creating the term "bit".

Bits have two possible values:

0 or 1, yes or no

+ or -, true or false

In popular culture, the Tron chartacter, Bit was based off a real bit. And it could only respond yes or no, or true or false just like the values of a bit.

Bytes
A byte is a group of 8 bits. Back in the day, 4 bits were often reffered to as a nibble. However, this term is no longer needed as technology has become much more powerful since 4 bit hardware like the Atari 2600. Linking consoles to bits, consoles are always constrained to the amount of bits they can hold (e.g. SNES- 16 Bits, Sega Dreamcast- 128 bits).



Binary Codes

Basically, a binary code is the language the PC uses. It is a coding system using the two binary digits 0 and 1 to represent a letter, digit, or other character in a computer or electronic device.