Image capture, Optimisation and Storage.

In this post, I'll be covering a wide range of topic. I'll be talking about the best way in which to capture or create 2D material. Which tasks are better off being done on using which particular methods. Then optimisation of content, how can one use specific file types, capture types and artistic methods to fit the scenario. And finally I'll talk about storage and which methods are best used for storing different forms of art.

Capturing a digital image is when light is recorded and then stored as a long line of numbers on a computer.

A scanner is a device that optically scans cards and paper placed in the machine to recreate the appearance of what it looks like digitally on computer.

It uses a lamp inside the machine to bounce light from mirror to mirror, illuminating the page inside and bouncing back to the lens. This is when an image is taken, and is converted into digital code to be stored on a computer.

The key features to look at in a scanner include the following:

Interface type (Is it compatible with USB cables). Colour depth; how much colour information is stored about each pixel. DPI (Dots per Inch); how high the resolution of the captured image will be. You will want a high DPI to capture detailed images.

There are a few key differences in the type of scanner that you can get. Flatbed scanners are stationary scanners. Flatbed photo scanners will have a higher DPI and colour depth to recreate the image almost exactly when it is converted into digital information. Document flatbed scanners don’t require the high specifications of photo scanners, so they are often cheaper.

Sheet fed scanners are even more compact than flatbed scanners. Instead of placing card or paper inside and shutting the lid, the user will insert the card or paper in the one end of the scanner and it will scan the photo or document as it rolls through and out the other side. This type of scanner generally doesn’t have the capture quality of flatbed scanners. Resolution and colour depth is sacrificed for desk space. This makes the sheet fed scanner more suitable for document capture than photo capture.

The final type of scanner is the portable scanner. This type of scanner is the most compact of scanners. They are small enough to carry to multiple locations. They are very convenient for scanning documents they do not have the resolution or colour depth to competently capture photos.

Digital Cameras

A digital camera is a camera that captures light in the form of images and video and translates them into digital code for use with computers.

To capture images, digital cameras need a lens. The lens focuses light into a sensor when it is revealed when the shutter opens. Before the light hits the sensor, it passes through the Bayer Array which senses and records the colour in the light. After this it goes through Bayer Demosiacing which records how intense these colours are in each pixel. Finally the image is saved as digital code.

The key features to look at in a camera include:

Megapixels; how high the resolution of the captured image will be. The higher, the more detailed. Battery Life; this dictates how long the camera will last when not plugged in. Card slot; this will let you know if your micro SD card is compatible with the camera. Lens; this dictates how long the optical zoom will be.

There are a few major types of camera. The first is the compact camera. This is generally seen as the budget option. They don’t offer as many high end features as DSLR cameras. Because the audience for this type of camera are generally newcomers, the focus is on ease of use and budget. This means that white balance, focus and other properties are set automatically. They have limited optical zoom and pixel density.

Digital SLR cameras are on the opposite end of this spectrum. They have large sensors and lenses capturing higher resolution images than other cameras. They allow the user to capture images totally manually. This makes the DSLR an enthusiast camera. It is also a lot more expensive than other cameras.

The final type of camera is the camera phone. This has become the most common way of taking photographs today. The main point of the phone is to communicate over long distances, so the camera is generally a secondary goal. The camera itself has to fit in a tiny corner of the phone itself, and the phone generally has to fit in a pocket. They don’t capture images at as high a resolution as dedicated cameras and all of their image capture is done automatically after pushing the button. All of this makes it an even more compact budget camera than a point and shoot.

Graphics Tablets

A graphics Tablet is a touchpad that represents the screen area. A plastic or electronic pen is used in conjunction with this pad to navigate the screen and draw with. They are designed this way so as to mimic traditional pen and paper drawing methods.

Despite being a fairly simple idea, the graphics tablet can vary in a few very important ways.

At the base budget level, graphics tablets are flat touchpads that sit on the desk and are connected through USB. Their touch pad is only usable with the pen. This is the very basic level, made for beginners. They can cost around £80 in the UK.

At higher levels, you can get tablets with displays on. This is getting nearer a professional level. It allows the artist to use refined hand-eye co-ordination. This will make art much quicker to draw. These displays often also have multi-touch displays, allowing the artist to quickly reposition to drawing to where they want to. The graphics tablets at this level will often need pens with batteries in, whereas the budget versions won’t. This might allow added features like shortcuts on the pen’s buttons, but comes at the cost of having to replace the battery after a while. Tablets at this high level can also have a wireless option, another small convenience. This kind of tablet can be over £400 and the batteries as a bit extra. So the user of this type of tablet is presumably more of an enthusiast or professional user. They are more likely to pay extra for minor conveniences.

The very best graphics tablets use large strong screens with a high resolution and highly accurate touch reception. They come with their very own stands, not laid flat on the desk. They can be a screen/tablet hybrid in which the tablet can be used on a regular basis as a regular computer monitor.

Graphics Optimisation

There are numerous ways in which graphics can be optimized. The first is through compression.

Lossy compression is a form of compression visibly reduces image quality in subtle ways. This form of compression is very useful for use on websites. Lossless compression is another form that does not reduce the quality of the image. This will yield a bigger file size, but can still be efficiently transferred over the internet. Compression is mainly to resolve an issue of size and bandwidth.

Another way of optimisation would be bit-depth. Older consoles like the Super Nintendo Entertainment System can only display 16-bit colour. This would mean that using textures and backgrounds that are only 16-bit would be optimal. Not only that, but bit-depth can also effect file size too. For example, displaying both a HD framebuffer and textures that are over 32bit in colour information would be very difficult to do on scratchpad memory like on the Xbox One.

Another form of graphics optimisation would be to alter the resolution. A game running at a low resolution natively doesn’t need to have very high texture resolution because it won’t be noticeable to the player. This will clear up some space on ram and disk space.

A less gaming related form of graphics optimisation would be the use of vector and raster images. This can have implications in games, a 2D game might be better off using vectors than bitmaps. But it also has implications for corporations and advertisement. A company logo for example is presumably a simple and memorable visual for the viewer, and it will need to be resized to fit on all things great and small. These logos are sometimes displayed as covers on websites or on tiny phones or handheld machines. This is where a vector would really come in handy. A vector will look very much the same no matter how largely it has been resized, whereas a raster image is stuck with an amount of pixel information.

Raster images aren’t a lost cause though. They are necessary for more complex visuals on billboards or even leaflets. Vectors are better at displaying simple shapes while raster images are better at high colour ratio and complexity.

A final thing to consider in graphics optimisation is whether your image will be displayed electronically or in print. If an image is going to be printed and distributed physically, the company doing so would be given a chance to ramp up the bit-depth and resolution and eliminate compression. Because transfer rate and disk space does not need to be considered like it does on computer.

Asset Management Software

Asset management software is great for working in a small team. It allows files and information to be added to a core space in which multiple users can access and amend. Most management software allows the users to give a reason for editing or adding a file in the core space. They also record the history of all files in the space and allow the user to go back in time and get an old file back. This is great if a team heads in the wrong direction or if poor communication leads to a mix up.

The software also allows a team to contribute to the core space from across the world. This is especially useful for small indie teams formed over the internet. It can also be used as a back-up in-case of a fire or other loss of data.

File Types

In this blog post I'm going to talk about the different file types that can be used for 2D art. The advantages and disadvantages of different types and where they are most suited. There are a lot of variables to talk about, so lets jump right in.

Properties of an image

An image on a computer screen is made up of many pixels. A pixel is a tiny coloured light that can realistically recreate an image on screen when paired with hundreds of other coloured pixels. It is the smallest controllable area of a screen, so the more pixels a screen has, the more control that can be had over the image, and the more realistically an image is recreated.

The amount of pixels a screen has is called the resolution. The current standard in the UK is generally 1080 vertical pixels and 1920 horizontal pixels. This adds up to over two million pixels on the screen. Two million controllable points of colour makes for a very sharp and detailed image. The pixels are so small in these displays that, providing the user is at an appropriate distance, they won’t be able notice any dots of colour that previous displays would have.

There are a few main types of pixel colour space. The modern standard is sRGB. This kind of colour space stores values for red, green and blue. This colour space can display all possible colour combinations made from red, blue and green. For example, if only red is on, an image will look red, but if red and green are on, it will probably look like different shades of yellow. This colour will change depending on the intensity of certain colours. For example, if the green colour is more intense than the red, the yellow will start looking like less of a pure yellow.

Another popular colour space is CMYK. However this isn’t used for pixels. It’s an adapted colour space for the different inks that need to be used to make the wide range of colours needed. CYMK stores values of cyan, magenta, yellow and black. Like RGB, these colours are mixed to create a wider availability of colours.

Compression

Image compression is the method that reduces the size of a file to save memory space or to make it easier to send over the internet.

There are two types of compression. Commonly referred to as lossy compression and lossless compression. Lossless compression is compression that does not tamper with the look of an image. PNG and TIFF file formats use lossless compression.

Lossy compression is a type of compression that could have negative impacts on the image quality. This is because it deletes information that plays a part in the look of the image. Images that use this compression technique will often still look very close to the original, but if zoomed in too far, start to look blurry. JPEG and GIF formats use lossy compression (Providing the GIF image had more than 256 colours before compression).

In this compressed image of Link from Wind Waker, you can see the effects of extreme lossy compression. The image has lost edge sharpness and and colours look faded.

Types of Digital Graphics

Raster file formats are formats that directly control a certain amount of pixels. It tells every pixel in the image exactly what colour it should be. However, unlike vector images, raster images can only display one resolution and aren’t easily scalable like vector images.

BMP

Bitmaps are very high quality image files with no compression. This makes them suboptimal for transfer over the internet. It is used mainly for Microsoft Paint and was the most popular texture file on PlayStation 1 and PlayStation 2. This was mainly due to the lack of processing power making it unable to decompress compressed image files quickly.

PNG

PNG is an image file that uses lossless compression. It’s a high quality image file with often quite high file sizes too. It’s most notable feature is its transparency options. It allows for opaque, transparent and semi-transparent images. This makes it the format of choice for 2D games. Other files like JPEG would bring with it white boxes around character sprites or textures.

GIF

GIF is a very common image file type on the internet. It has a very good compression technique, so is very useful for internet use. However it has a limit of 256 colours. This can have harsh effects on some kinds of image. A PNG or bitmap would be far more suitable for desktop wallpapers with a wide colour range. The main advantage of the GIF image format is that it allows for animations.

TIFF

Tagged image files are generally high quality images with large file sizes. It’s a very flexible file format that allows for lossy and lossless compression. It is capable of displaying raster or vector image types. It saves additional information along with the image file like layers.

JPG

JPEG is a very common image file type on the internet. This is thanks to its compression technique which can range from tame to severe. The creator of the image can set the severity of the compression, but the compression will always be lossy with this file format. This makes it very easy to transfer over the internet, but it is a lower quality than other formats. It’s perfect for display on websites.

Vector images are file types that contain mathematical information instead of pixel information. Instead of being built by an assembly of pixels, they are built from path and point information. This type of information generally doesn’t carry with it high file sizes like raster images do. It also makes image scaling far easier than raster images. This is because the paths and points remain the same regardless of resolution.

PSD

Photoshop image files are high quality images with large file sizes. They are used in the image editing software Photoshop. It can store vectors or raster images. It has a wide range of bits-per-pixel. It can go from 8 to 32bits. As it’s used in editing software, it saves a lot of additional information along with it like layers, masks and editing history. PSD files are used as base files that which other files can be made from. Photoshop users can create JPEG’s, TIFF’s, PNG’s and a lot more from this base file. This means that while the base PSD file does not use compression, it can save as other file and therefore other types of compression.

Fla

Fla files are files used with Adobe Flash. This file is similar to the Photoshop file, but instead stores additional information like animation instructions, Actionscript and even audio information. It can store both vector and raster graphics. It can store flash video games to play over the internet. It can be used as a base to save files as MP3’s and visual formats.

AI

Adobe Illustrator files are used to store vector based images made in Adobe Illustrator. Like PSD, it serves as a base that the user can use to create other files from.

All these file types (AI,FLA and PSD) are proprietary to Adobe software. This means that it would be difficult to open such files without Adobe software. This is less of a problem since the software and the file format are built for each other and wouldn’t work cohesively with other editing files/software. They are also often very large in size too. So they aren’t efficient for sending or saving in mass. This is also less of a problem since these files are only meant to be a base editing file on which other files more standard files and be made.

Graphic Types

In this blog post I'm going to talk about the different 2D images that convey information to the player or a possible consumer. The purposes of 2D graphics can very. Some graphic types are there simply to telegraph players or objects. Others are there to convey meaning and atmosphere. These graphics have different purposes too. Some are there purely to advertise and communicate the feel of the game and others to improve the player experience.

2D Sprites

A 2D Sprite is a small image used to represent a player, NPC or object in game. It is its own element in the game and isn’t stuck in position. They are purely visual representation, mechanics, collision and other behaviours are added separately. They can also be animated. Animations can be initiated when the player performs a certain move or presses a certain button. To animate a sprite, sprite strips are used.

Sprite strips contain every frame of a particular animation lined up in one picture. This makes it easier to import animations to 2D game engines like Construct and Gamemaker.

3D Isometric Sprites

3D Isometric sprites are sprites that are rendered in 3D software and then turned into 2D images. These sprite characters are often depicted at an angle that is neither a side view nor a top down view. This is an angle that is far easier to depict in 3D.

Donkey Kong uses 3D sprites at a side view angle in a 2D world. The background uses parallax scrolling. This method of sprite and animation was ground-breaking at the time and pushed the limits of the Super Nintendo Entertainment System.

Concept Art

The purpose of concept art in the video game industry is to have a visual representation of what the director or writer has in mind for the game design. It is there to represent the look, mood and ideas of the director. Its main use is to give an entire development team a unified vision, and sometimes as promotional material.

Concept art gives modellers an idea of what Characters, weapons, vehicles and environments will look like.

Different textures and UV maps

Textures are 2D images that are wrapped around 3D models. They are made up of many different maps than contribute to how it will look and react to the game world it will be placed in.

Colour Maps are maps that contain the basic colours of the model; this is like the base of the look of the model.

A normal map adds extra details to the model without adding extra polygons. This kind of map is particularly important on low polygon models.

Specular maps are maps that determine how and what areas of the map are shiny. The blackness or whiteness of an area determines how shiny the area is in the final texture.

Displacement maps are maps that allow the geometric positions of the map to displace. Unlike other techniques like bump mapping, this method actually adds depth to the object.  The designer can make certain areas protrude and others indent to create very realistic faces or landscapes. This technique draws a lot of processing power but allows for some optimization. The maps can flatten out depending on how far the player or camera is away from it. This allows the processor heavy details to appear only when necessary.

In-game Interface

The purpose of in-game interface is to give vital information on display nearly all the time. The best forms of user interface don’t distract from the game itself.

Dead Space is a good example of realistic visual feedback. It's interface is the hologram computer in the game world itself. It is generally better if a game can implement as much realistic feedback as possible.

To contrast I've made my own version of the Dead Space interface. It commits nearly all the sins an interface possibly could. It contains large cumbersome words and blocks. It's colour scheme is everywhere and contrasts greatly with the scene. It also uses English words when it would be far more efficient and broadly effective to use universal logo's.

(Original Image: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPh5zW0Py6wF0vTq-FaUNEsWLsx-C_ryZwFsmcBMnlSUkVTnDsm0Rh6tQ4aQZ2VX08N-8LSe1w40-c0T1BTWtcWjnRt7G0b3bnGyJCakgStPPvBgRY5tT3jss_usHIiCAkAt5KIbMhtNJC/s1600/deadspace1.jpg)

Printed Media

Printed Media is mainly about advertisement. It's to give the consumer an idea of what a game is like with very little information. The video game box art is the most notable example.

In this box art Naughty Dog portrays the serious nature of the game. Ellie and Joel are comparatively small compared to their surroundings and their expressions are that of dread and focus. Two humans having to trek through the long streets reclaimed by nature. They have cumbersome supplies and the weapons aren't being aimed at anything, this implies less of a focus on gun-play and more on exploration. Already there is a lot to being portrayed by printed media.

Another form of printed media is the video game manual. This serves as a good way to introduce the player to a game. This was especially important in the days before specific genre's had a standard for control scheme and before narrative could be conveyed quickly. Video game manuals need to be brief with their information. They are often read before the game has been played so they serve as vital first impressions. This also means that they need to be well written and well presented. Conveying the style and mood of the game. The Zelda manual does this effectively. The borders, font and character art all serves to convey the tone and feel of the game.

Graphic Styles

In this blog post I'm going to talk about the different visual styles that are often seen in video games. I'll talk about their different levels of complexity and features.

In video games it's vital for the visual style to match the gameplay and mechanics. For example, photo-realism will generally require more slow and realistic movement. Requiring many advanced animations. A photo-realistic game with retro plat-forming controls like Mario would create severe dissonance and the player wouldn't feel right when playing.

Photo realism

The aim of photo-realism is to create games that are as close to real life as possible. This art form generally has the smallest amount of artistic freedom. Photo-realism requires powerful processing power, a big budget, a lot of time and attention to detail. A high contrast ratio is also needed to recreate the nuances of colour found in real life. The result is often a lot of shades of grey and brown.

Metal Gear Solid Ground Zeroes is a good example of this. Human proportions are realistic, colours are subtly realistic and lighting is reflecting realistically off many parts of geometry.

Cel shading

Cel shading is a non-realistic rendering design that is often intended to make a 3D image appear as if drawn. This technique of shading often carries bright and bold colours with objects and characters being outlined in a thick black line.

XIII is a good example of this kind of art style. Colours are basic and bold and the boxes surrounding the picture are laid out in a comic book style.

Exaggeration

Exaggerated art styles are close to realistic art styles but with one or numerous elements of the visuals exaggerated. This could be characters proportions, sizes, colour pallet or lighting.

A good example of this would be Deus Ex: Human Revolution. In this game, nearly every aspect of the visuals are realistic, but lighting and colour pallet is exaggerated. The colours of light shafts are nearly always yellow, while the rest of the colour pallet is mostly black and grey.

(Image from:https://nambulous.files.wordpress.com/2011/08/deus-ex-human-revolution-0020.jpg)

Abstract

Abstract visual styles aren’t related to anything real or concrete. They are remote from reality. Proportions, lighting, physics and colours aren’t used realistically. They are used only to enhance the player experience, realistic or not.

A good example of an abstract game is Fl0w. The world in this game isn’t concrete. It acts a lot like the ocean or space, with creatures that are somewhat biomechanical. It’s like a separate reality, creatures are suspended in space and can only move on a 2D plane until they have eaten a red monster. None of this is realistic and is there only to enhance the player experience.

(Image from: http://farm1.static.flickr.com/160/397406094_a0efe8242e.jpg?v=0)

2D and 3D Graphics

Today I'm going to talk about the two major graphics types; 2D and 3D. The advantages and disadvantages of each type and the implications of gameplay.

2D Graphics are two-dimensional images generated on a computer. This means that the image is flat with no depth. In games, this limits players to moving left, right, up and down with no Z-axis.

In video games, 2D graphics were the norm from the early seventies to the early nineties. After this point, 2D games began to de-popularize substantially. Today, 2D games are often relegated to mobile gaming platforms. This is to both optimize for processing power and optimize for control restrictions of mobile gaming platforms.

This image is from the game Tempest. It imitates depth but still has 2D game limitations. For example, the perspective is stuck in place and the player can only move left and right.

(Image from: http://www.bringyourgameface.com/GameImgs/Arcade/Tempest-Screenshot-3.jpg)

3D Graphics are three-dimensional images generated on a computer. They have a Z-axis, giving the image depth. 3D graphics are used in many industries, particularly media industries, like Video-Games, Television and Movies. In order to run 3D graphics in real time, you will need powerful hardware like a modern computer or games console.

In the games industry, 3D-capable consoles were released in the early 90’s with the PlayStation and Sega Saturn. Since then most games consoles run 3D graphics. Earlier consoles would only be capable of running a limited number of sprites in a 2D scene. Running 2D graphics isn’t always a processing power restriction. For example, despite being fully capable of running 3D games, the iPhone is often given games with 2D graphics. This is due to their simplistic nature and the design of the iPhone architecture making 2D games easier to control than 3D.

A good example of the extra depth of 3D came with the release of Super Mario 64. Released on the Nintendo 64 in June 1996, Super Mario 64 was ground-breaking with its fully controllable 3D camera. This was perhaps the first time a 3D game had been released with intuitive control of 3D perspective and control.

(Image from: http://ilarge.listal.com/image/1276053/936full-super-mario-64-screenshot.jpg)

Tomb Raider, released in October 1996, is another good example of 3D graphics coming into their own on video game platforms. Tomb Raider offered a realistic art style that was able to transport the player into many different ancient location. While it didn’t have the intuitive and natural controls of the Super Mario 64 camera system, it offered an art style that was very realistic for the time and one of the first showcases of the possibilities of 3D graphics.

(Image from: http://www.hardmob.com.br/content/attachments/7468d1363453906-tomb-raider_1996_001.jpg.html)