Unit 46 - 2D Digital Graphics for Computer Games
Context
Purpose of this assignment
This unit aims to develop your understanding of 2D digital graphics software and provide you with the skills required to use this software in creating graphics for computer games.
Scenario
The National Space Centre based in Leicester is the UK's Largest planetarium with a unique 3D Simulator Experience and an iconic 42m high Rocket Tower. Recently, the company's partners have negotiated with the owners of the rights to one of the earliest video games made, ‘Spacewar’ and Leicester University have set up a competition designed to draw new customers to the museum facilities. The competition is to make a video game which could be played in one of its six interactive galleries.
Spacewar! is one of the earliest video games and was developed on the PDP-1 computer at MIT in 1962, fifteen years before The Golden Age of Video Games. It was also an important early prototype of computer graphics techniques that later became standard in the industry.
Leicester University has set the competition on behalf of the Partners with a pre-entry qualifiers brief. It’s your job to produce a digital response for an up-to-date video game level using the 1962 retro video game Spacewar!" as your inspiration. The winner would then use a 2D game engine to build the game. The competition is designed to attract a new audience to ‘The National Space Centre’.
Theory of digital graphics for Computer Games
Introduction
In simple terms, a graphic is an image or visual representation of an object. Accordingly, computer graphics are images displayed on a computer screen. There are two main forms of 2D graphics, these are raster’s and vectors. Raster graphics are the most commonly used, displayed in digital photos, web graphics and other forms of imagery. We will go over Raster’s and Vectors in more detail later on.
In this article I will be displaying the basic and the more advanced forms of digital graphics. Varying from Graphic art styles to the different digital file types, this article will develop your understanding, giving you the right information to get you up to speed.
Graphic Art Styles
Photorealism – Photorealism in simple terms is a detailed visual representation, like that obtained in a photograph, in a non-photographic medium such as an animation or computer graphic. Furthermore, this art style is the most prominent in the video games industry, developing by the second as technology advances.
Cell Shading – Cell shading is a form of non-photorealistic rendering designed to make some 3D graphics appear flat. Furthermore, it is often used to mimic the style of a comic book or cartoon giving it a characteristic paper-like texture. Instead of the traditional, smooth, shading style, Cell shading uses solid shading which is divided into darker tones.
Abstraction – Abstraction can be seen as the complete opposite of photorealism. Instead of the artist trying to create an image that is symmetrical to reality, they create what their mind envisions.
Exaggeration – Exaggeration is the most self-explanatory form of art style. It concentrates on being melodramatic and rather extreme. Whilst it can be interpreted as silly and overly dramatic, it may still display a more serious story
Applications of digital graphics
Vector graphics refers to the method of using geometrical formulas to create or represent an image. This method is often used when an image needs to be made a lot larger than normal while still retaining an exceptionally high quality. The biggest advantage of using Vector Graphics is its power of scalability. In order for this to happen, the computer moves the coordinates of the points and adjusts the Vector equation.
The alternative method of creating and representing graphics is through Bitmapping, also known as Raster Graphics. This method uses tiny rectangular pixels/picture elements that are arranged in a grid formation to represent an image. Increasing the size of a bitmap image has the effect of making each individual pixel bigger, making shapes and lines appear jagged.
Picture Element
Image resolution describes the amount of detail that an image can hold. This term is used on raster images, higher resolution means more image detail.
Pixel resolution describes how many pixels are displayed in an image or video file. All digital images have a resolution. If I were to describe how resolution is displayed, the first number references to the quantity of pixels width ways, the second being the height. A simple example would look like this: 1920x1080
Digital Graphic file types
Bitmap - A bitmap, in simple terms, is an array of tiny dots which contributes in creating picture when viewed at 100%. Each dot is assigned with similar or different colour depending on what the greater image is trying to display.
GIF - a lossless format for image files that supports both animated and static images.
PNG – A Portable Network Graphics file (PNG) is a type of raster graphics file which supports lossless data compression. Because this file type is uncompressed, it allows for high image quality. A consequence of this is a larger file size, without compression, there is no limit on detail which means a higher strain on memory.
JPEG - A JPG is one of the most popular forms of image compression file types. It is commonly used for storing digital photos and used by most digital cameras to save images.
File compression
File compression is a data compression method in which the logical size of a file is reduced to save disk space for easier and faster transmission over a network or the Internet. It allows for the creation of a file type which displays the same data as its original, but at a substantially smaller file size.
File compression is enabled through a special software that creates a compressed version of each processed file. Typically, file compression works by scanning an entire file, identifying similar or repetitive data and patterns, replacing the duplicates with a unique identifier.
Although there is no exact measurement for the reduced size of a compressed file, file compression usually reduces a file's size by 50 to 90 percent.
Bibliography
http://computerdigitalgraphics.blogspot.co.uk/ (24 April 2018)
http://hayleyboothunit78.blogspot.co.uk/2012/11/styles-of-graphic-art-in-computer-games.html - Used for types of Art styles (24 April 2018)
https://upload.wikimedia.org/wikipedia/commons/b/b7/Toon-shader.jpg - Cell shading example (24 April 2018)
https://vector-conversions.com/vectorizing/raster_vs_vector.html - Raster’s and Vectors (25 April 2018)
https://georgepollboa.wordpress.com/year-12/term-1-2-cmpnmo1-digital-graphics/new-media/unit-54-digital-graphics-for-print/task-1/ - Applications of Digital Graphics (25 April 2018)
http://badboysmitty.blogspot.co.uk/2011/10/picture-element-and-image-resolution.html - Picture element (27 April 2018)
https://fileinfo.com/extension/jpg - What is a JPG (27 April 2018)
https://www.lifewire.com/png-file-2622803 - What is a PNG (27 April 2018)
https://techterms.com/definition/bitmap - What is a Bitmap (27 April 2018)
TASK 2
Ideas - How did you come to develop your final project?
References
Final project - developing concepts for a space orientated game
Game Title Screen
Teams
Environment
Black Hole
The image that you see below is the games "black hole". In the original game, a star would be visible in which the two space-crafts revolve around. This provided the game with some extra difficulty; if a player collided with said star, they would be eliminated.
Similarly to "Spacewar!", the star, which is now a black hole, will be situated in the middle of the playing area in which both teams should avoid whilst battling each other.
References
Below are a few of the images that influenced my final concepts. A common occurrence in the photos is the energy being stolen from it's surroundings.
Originally, I was going to use the first picture as a guideline towards how my black hole should look. After some unsuccessful editing and a lot of down-scaling, I decided to start from scratch. The final concept takes most of it's inspiration from the last two photos. It intrigued me that the last photo had detail inside the black hole, it can be perceived as a portal or as an object trapping the stars inside it.
Final concepts
Using the inspiration given by my references, I was able to create a pixel black hole which is believable, one that I am more than happy with.
Above is the first version of the black hole. It incorporates ideas from all the pictures that are displayed above in the "references" section.
As time went on, I decided to change the colour scheme. I feel that this change allows the image to fit nicely into the scene. Whilst compiling the title screen, I realised that the black hole was way too bright and didn't fit into it's surroundings. By adjusting the hue/saturation along with the colour curves, I was able to embed the image into the scene, making it more believable.