1. Unit 78: Task 1
    Digital Graphics For Computer Games
2. 
   
3. 
   
4. Theory and applications of digital graphics used for computer games                                Artistic styles used in Computer games: 
5. 
   
6. -->Photorealism. The most predominant form of art in popular and biggest grossing computer games as their focus is on creating an environment most similar to what we would see in real life. To achieve this effect images are created in a wide colour scale that more closely reflects the spectrum of colours the human eye perceives. The images are also 3 Dimensional and Physiologically accurate rendered using engines such as Unreal engine, Octan (GPU- renders images using the graphic cards), Arnold (CPU - runs the rendering on the CPU meaning you can't really do anything else on your computer :'( shucks!) . This raises the suspense as unrealistic presentations of futures full of aliens or post-apocalyptic war zones appear real for the players and this allows them to completely immerse themselves in the games making them more engaging.
7. 
    To achieve a realistic image the light  is highly accented in the work as shown in the images above. As well the wide gradient of colours and shades that form gradient and add dimension to an image.
8. 
   
9. 
   In movies and games alike you could use VFX which integrates motion from live action footage with generated imagery to create a realistic effect. The motions and expressions are tracked on people who reproduce different emotions. This reduces the time spent and analysis that would artificially produce an expression. For the movie Avatar a programme that enables painting on a 3D image, meaning a realistic image can be made. In rendering a 3D character it can save time to use 3D models that already have actions programmed can be stored and reused in the future (Mixamo).
   

1. -->cel-shading. Used in art to flatten images and make them seem 2D is an non-photorealistic rendering design This is achieved by using less shading colour and instead of shade gradient using tint and shade fills making the image loose its depth.
2. 
   
   This art creates a unrealistic but equally beautiful environment in games as although the colour palette is limited more the colours can be much more saturated to create interesting colour schemes and style as the Legend of Zelda franchise. In fact this approach is very popular in the Japanese game industry on puzzle games such as Professor Layton or Ace Attorney that both adopt a cartoon style. This also saves resources and reduces the amount of processing that goes into the game make it accessible across different portals such as mobiles and consoles alike.    
   

1. The art style for games which include visual novel adventure, usually there is no need for photorealism as the game focuses on the plot and puzzle,  rather than action filled adventure type games which include a lot of movement. Although games as a whole have the goal of creating an environment  where you can feel completely immersed however, realistic designs usually are designed to build tension.
2. 
   
3. 
   
4. 
   
5. --->abstraction.  Is a scale that game designers tend to work with when creating a game. If they want the abstraction to be low they develop more texture and and realism into the characters to sell realistic effect. On the example of trees... 
6. 
   
7. 
8. 
   
9. The image directly above is a low polygon image with very simple colour scheme and shading. The image lacks texture but still effectively sells the image of a tree in a minimalistic style. It also has a limited variety of colour green for summer and orange for autumn. This makes the image look more abstract probably due to the fact the game designers would not focus of realism but rather tried to intentionally stylise the game to look abstract to save on resources and make it more accessible to to mobile or tablet users. One the other hand, the image on the left has a much wider and varied colour scheme and realistic composition. The image contains much more polygons and and the 3D effect is sold by the depth of field between the leaves. The structurally varied trees sell the biodiversity in the habitat adding extra context to it for example using a cherry blossom to signify the season Spring and the geographically the placement of the game like Japan. Contextually, Japans national flower is the sakura blossom and the months of March and April are usually reserved for cherry blossom viewing. Reducing the abstraction of the image, although increasing the complexity of the image, also adds a significant amount of detail as to the mood the game designer is trying to convey.      
10. 
    
11. -->exaggeration, eg anime, 
12. manga. Exaggeration in Games is a method of brining attention of the player to a specific feature of a character or setting. The feature is exaggerated by making it un-proportionate to the rest of the character or adding a lot of detail to it to make is pop out. 
13. Exaggeration for effect creates drastic contrasts in characters.
    
    
    
    The image on the right, presenting the girl with an exaggerated gun(Touhou),  is almost an oxymoronic image that juxtaposes a sweet girl stylised in a contemporary medieval witches costume with a modern machine gun. This sells the idea that she is insanely strong without the use of the classic exaggeration of muscles. She becomes appealing combining various eras. The viewers, are more likely to find something they like in the design and consequently play the game.

In anime, as in Lambo from Katekyo Hitman Reborn, exaggeration is used for humour to make something seem more comical. The baby thats head and and hair is massive with horns. The whole body is also covered with black patches to make the the character similar to cow. The big eyes make the character endearing and proportionally his head is the biggest making him seem fluffy and cute.   

1. In the more classical use exaggeration focuses on a few parts of the actual character.  in this case of a shard-bound character concept design, the entire arm is exaggerated and turned into a weapon. Similarly the gigantic thighs and metal shoes give the character a chunky build signifying a melee fighter possibly a tank with high defence. The character integrates tribal outfit similar to silky Chinese style clothing and gives it a technological twist with metal and LED light armour. 
2. 
   
3. 
   
4. Computer game graphics: 
5. 
   
6. Pixel art (2D sprites, 3D isometric sprites);  Pixel Art is a made by creating images on the pixel level. The aesthetic for this derives from 8-bit and 16-bit computers and video games. The 2D sprites are imbedded on 2D platform scroller.  Isometric landscapes can be classified in categories.
   
   
   
   

7. Dimetric projection/Isometric projection -        

8. All of the below rely on  Orthographic conventions to make the impression that a 2D image is 3D. Isometric and dimetric projection is usually used in strategy games as it allows a detailed view of the plain from a birds eye view. The image is only slightly tilted to indicate directions.  This type of projection can be seen in games like civilisation.
9. 
   

10. 

11. Trimetric projection -

12. Seen in Sim City less constrained then isometric projection and angles differently to build up dimension.

1. 
   
   
   
   

2. 
   

3. 
   

4. 
   

5. 
   

6. 
   

7. Perspective projection-

8. used in first person shooters. In perspective projections , parallel lines in 3D do not always stay parallel, but can instead go toward vanishing points. The mountains in the image go into the distance, while the gun feels close to you. This makes perspective projection more immersive, like you’re right there in the picture. Parallel projection on the other hand looks more distant, like you’re staring at the scene from far away.
9. 
   
10. Oblique projection-
11. "Orthographic rays hits the “canvas” at perpendicular angles, i.e., 90 degrees, whereas Oblique rays hit the canvas at angle between 0 and 180 that’s not 90 degrees. This results in completely arbitrary scaling of dimensions and angle proportions. Simply put, Oblique projections are not sticklers for rules, and the resulting images often appear distorted, e.g., a sphere projected obliquely will appear as an oval." as stated in the Layman's guide to projection in gaming. Consequently, oblique projections have a lot of flaws with scaling.
    

    

     the images are only slightly angled giving a impression of a birds eye view.

1. 
   
2. 
   
3. Concept art -
4. This is the process of creating sketches and props that give a first insight as to what the setting or character will look like. These usually stop at sketches and rough colour schemes that are later developed into full fledge drawings that finalise the concept. 
5. 
   

1. character, weapon, vehicle, environment are all adjusted in different stages of concept art. Drawing inspirations from different time periods, colour schemes as well as different fashions, you may alter the concept to create exactly what you desire to convey through the character.
2. 
   
3. Texture art - 
4. While building a realistic environment a game designer usually incorporates textures into the noticeable surfaces of the environment such as the walls and clothing of the npc's to make give them dimension and make them look better. 
   
5. The textures play a big role in making the images more photorealistic and imitate real life so that the gamer can be fully immersed in the game.
6.  
7.  Background graphics, eg walls, forests, clouds- 
8. Similarly, while creating the setting the background graphics are objects that are present in the game environment that you may or may not interact with. These objets may be natural such as 'trees', or man made such as "walls". 
9. 
   
10. 
    
11. 
    
12. 

1. In-game interface, eg head up display- 
2. These are the a type of menu that a player may access to check their Health, Mana or Inventory ect. Some interfaces are very developed giving the gamer control over a lot of aspects of the character.  Head up Display is essentially a status bar that is always visible to the player. These usually include a mini-map. 
4. 
   
5. Print media art, eg game packaging, box cover, manual, label, poster -
6. Print Media Art incorporates all the the things that will be physically published to the audience that are not the game. Since games are mostly influenced by visuals, the box cover and posters will act as summary of what the game wants to represent. They sell the art style and the colours that will be in the game itself drawing audience with the visuals.
7. 
   
8. Pixel: picture element, image resolution, intensity
9. A picture element is a physical point in a raster image, or the smallest addressable element in an all points addressable display device. The images resolution is determined by the amount of pixels in an image. 
10. 
    
11. 
    Types of digital graphics: raster images
12.  (bmp, gif, tiff, jpg) - Raster images are similar to bit maps and compromise of square pixels that differ in colour to create an image. These format is used best in art such as digital photographs as it encompasses a wider and more subtle tonal range.
13.  
14. Vector images 
15. (psd, wmf, fla, ai) - Unlike Raster images, vector graphics are based on mathematical formulas that define geometric primitives such as polygons, lines, curves, circles and rectangles. This makes them more useful in linear art that uses flat colours. A great advantage of using Vector images is that the images are quickly and perfectly scalable. 
    
    
    
    
    
16. 
    
17. 
    
18. 
    
19. 
    
20. File extensions:ile ex·ten·sion
    noun
    

    COMPUTING

    plural noun: file extensions
21. A group of letters occurring after a period in a file name, indicating the format of the file.
22. eg bmp, png, gif, tiff, jpg, psd
23. 
    
24. Compression:
25. -lossy- a form of irreversible compression that reduces the data size of the file as well as it handling but doesn't represent content.
26.  -lossless - a form of compression that uses algorithms that create a file that can reconstruct the original data from a compressed file.
27. 
    Image capture: 
28. scanner- a device that enables you to copy a physical piece of work and digitise it onto the computer.
29. digital camera- a device that records and stores digital images. 
30. tablet- a panel that imitates natural hand and pen movement and converts it into a digital form enabling drawing directly on the computer.

1. Optimising: target image output;
2. image bit depth- Bit depth is the number of bits used when representing the smallest unit of information
3.  image resolution-  pixels there are per inch. the more the higher the resolution.
4.  image dimensions- length and width of the digital image, if you are able to control the dimensions of the graphic you are then able to then make the image bigger or smaller depending on the purpose or location of the image.
5.  Compression 
6. Storage of image assets: 
7. file size- how much data the image has and consequently how much space it takes
8.  file-naming conventions - regulations that help catalogue similar file types together. Keeping the format constant means there is also a clear description of a file.
9. asset management -developing, operating, maintaining, upgrading, and disposing of assets cost-effectively.these assets maybe image storage of different plants that can be later accessed and reused.

Initially I had a problem with organising my work. I would work on different images without creating folders for them and often i'd get mixed up with what layer I'm working on.


To work on that, for every new image in bring into the composite I create a new folder

Photoshop Practice:

Adjustment layers

I noticed my image was too dark at the top as the light is shining from above. I needed to get rid of the shadows on the upper side of my hoodie . To do this I used a Marquee tool and selected my arms. Using a Curves Adjustment layer I lightened the arms. To get rid of the inconsistency between shades of the upper and lower body I used a Mixer brush tool and blended the shades together. I did the same with the lower half of the body darkening 

Finishing touches

After completing a composition there might still be a sense that the pictures are not really integrated. One way to solve this is to add a filter to the entire image. In this case I added Noise...




To do this I created a new layer which I filled with 50% grey (as shown below) and added added  25% Noise - Gaussian- Monochromatic (meaning no colour was in the filter only a scale of grey). To integrate the filter you may choose a soft-light in a panel above your filter layer.

To eliminate white lines that appeared between my own picture and the rough shadow I created two shadows using a low flow and low opacity brush. I drew one on the underneath my image and one on top, reducing the white lines that were visible between my picture and the background.

IMPROVEMENT

 After some improvement to the image with the help of my teacher my picture started to look more integrated by copying my image again and changing the mode to Luminosity on one of the images and played with the opacity.

Another way to create a shadow effect is to use a radial blur that creates rays of colour and blends them into the image.

To be able to change the filter later on you need to first convert it into  SMART FILTER and later you may adjust the intensity and length of the rays.

Using the spot healing tool brush I eliminated the logo from the original picture found on the internet and replicated the snake skin I sampled from other parts of the snake.

With a brush and an eye drop tool I sampled the darker areas of the water and with low flow airbrushed the underneath of the serpents throat to add the effect of a shadow.