COMPUTER GRAPHICS BITMAPS SPRITES CO 2409 Week 3

COMPUTER GRAPHICS BITMAPS & SPRITES CO 2409 Week 3

TODAY’S LECTURE 1. Bitmaps & File Formats 2. Sprites 3. Blending Methods 4. Transparency / Alpha Data 5. Alpha Blending

LIMITATIONS OF 2 D GEOMETRY Rendering 2 D geometry is simplistic, but can be effective for: Line drawings Vector-based work Simple graphic design But to render anything complex would need excessive detail We’ll use another method…

BITMAPS A bitmap is rectangle of pixels stored off-screen Bitmaps can come from several sources: Hand-drawn (e. g. using Photoshop, Maya or even last week’s Pixel. Plotter) A single capture from a camera, scanner or video Other 2 D data, e. g. satellite data An algorithm for generating pixels (procedural textures)

DISPLAYING BITMAPS The pixels of a bitmap are usually copied into a rectangular region of a viewport Can be the entire viewport (a background) If region copied to is same size as the bitmap this is a simple pixel-by-pixel copy Otherwise the bitmap will must be scaled Will see details this operation when we look at textures We can also copy a bitmap to a rotated or distorted region – a more complex process These operations can be done in hardware

BITMAP FILE FORMATS We usually need to store bitmaps for reuse There are many possible data formats, each with different benefits and drawbacks: BMP (Windows bitmap) JPEG (. jpg) (Joint Photographic Experts Group) GIF (Graphics Interchange Format) PNG (Portable Network Graphics) TGA (Truevision Targa) DDS (Direct. Draw Surface – bitmap for Direct. X) And many more… One of the example bitmaps earlier would not typically be stored in a file, which one?

GENERAL BITMAP FORMAT Most bitmap formats contain additional data apart from the pixels: Width and Height Colour space/range (e. g. RGB 0 -255) Other data can be stored: E. g. printing size, title, comments, pixel format etc. Pixel data may be stored in a range of formats: Raw pixel data (R, G & B values): TGA, BMP Compressed: GIF (zip), TGA, BMP (RLE) Lossy Compressed: JPEG

BITMAP COMPRESSION Pixel data can be compressed in most formats PNG format (Non-Lossy Compressed) Some compression methods only store an approximation of the pixels for better compression Called lossy compression The idea is that the eye does notice the inaccuracies Jpeg’s are a notable example Repeatedly saving in a lossy format will degrade quality Lossy compression schemes can reduce JPEG (Lossy)

SPRITES A sprite is a name given to a particular use of bitmaps Sprites are used as distinct elements in a larger scene, e. g: A character in a 2 D game A mouse cursor A letter in a font Sprites may be layered (perhaps with a background image) to create a complex picture. Example is from a game called Metal Slug 3

PIXEL DATA FOR SPRITES Sprites usually represent nonrectangular objects Cannot just copy data from bitmap to viewport as described above The bitmap rectangle will obscure any detail below Need to overlay the sprite with the background in some way: Using cutout or blending methods

PIXEL BLENDING Pixel blending are methods to combine the RGB colours in the bitmap with those already on the viewport We use a blending equation to precisely specify the method used Different blending equations give different effects Blending creates various forms of transparency: Semi-transparent objects: glass, plastic, membranes Effects that brighten the scene: fire, glow, lens flare Or obscure (darken) the scene: smoke, dust, shadows Plus other effects: e. g. user interface elements

MULTIPLICATIVE BLENDING The multiplicative blending equation is: Final. Red = Bitmap. Red * Viewport. Red Similar for green and blue, RGB range is [0 -1] Combine bitmap pixel colour with existing viewport pixel colour Final colour the new colour written to the viewport Do separately for R, G & B If RGB in range 0 -255, result would need to be divided by 255 This is a darkening effect, suitable for representation of glass, shadows, smoke etc If source pixel is white, destination colour stays same As source pixel tends to black, destination is darkened

MULTIPLICATIVE BLENDING EXAMPLE Test Pattern Multiplicative Smoke

ADDITIVE BLENDING AND OTHERS The additive blending equation is: Final. Red = Bitmap. Red + Viewport. Red Similar for green and blue, RGB range is [0 -1] or [0 -255] This is a lightening effect, mainly used for the representation of lights Bitmap black = no effect, brightens as bitmap becomes whiter Many other blending equations are possible, e. g. : Final. Red = 2 * (Bitmap. Red * Viewport. Red) Darkens & lightens depending on bitmap colour Final. Red = (Bitmap. Red + Viewport. Red) / 2 Average of bitmap and viewport colour

ADDITIVE BLENDING EXAMPLE Test Pattern Additive Flare

TRANSPARENCY / ALPHA DATA The previous examples used RGB data only For each pixel can store an extra value to identify if the pixel is transparent or not Can be a single bit: 1: visible, 0: transparent Or sometimes the other way round This is called Alpha data, or the alpha channel Using this data we can draw a cutout sprite: Only copy the pixels that have a non-zero alpha value

BLENDING USING ALPHA We can specify a range of alpha values for a pixel (not just 0 or 1) Allowing us to set a level of transparency for the pixel Allows semi-transparent pixels Alpha values are usually in the range 0 -255 or 0. 0 -1. 0 and are called A Treated just like R, G and B Packed together with RGB to make RGBA colours Can use this alpha channel in blending methods Usually only the bitmap alpha value is used Generally avoid use of viewport alpha

ALPHA BLENDING The usual alpha blending equation is: Final. Red = Bitmap. Red * Bitmap. Alpha + Destination. Red * (1 – Bitmap. Alpha) Similar for green and blue, RGBA range is [0 -1] [N. B. This formula is a linear interpolation between bitmap and viewport colour – we will see this formula again] Notice how only the bitmap alpha is used Alpha blending allows for variable transparency based on the alpha value Low alpha = very transparent, high alpha = very opaque It can be used for precise transparency effects

ALPHA BLENDING EXAMPLE Test Pattern RGB Channel Alpha allows variable transparency

PACKED PIXEL DATA WITH ALPHA So we have now identified four channels of data for a typical pixel: Red, Green, Blue and Alpha Such data is often called ARGB or RGBA data If each channel is a byte (0 -255) then a single pixel is a double-word (4 bytes) Efficient for hardware, called ARGB 8888 format There are other packing schemes: 1 bit for A, 5 bits for R, G & B: ARGB 1555 format 4 bits each for A, R, G & B: ARGB 4444 format 5 bits for R & B, 6 for G, 0 for A: RGB 565 32 bit floats for each: ARGB 32 F 32 F