Computer GraphicsBitmaps & Sprites

CO2409 Computer Graphics

Week 3

Today’s LectureToday’s Lecture

1. Bitmaps & File Formats

2. Sprites

3. Blending Methods

4. Transparency / Alpha Data

5. Alpha Blending

Limitations of 2D GeometryLimitations of 2D Geometry

• Rendering 2D 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

• Use another method…

BitmapsBitmaps

• 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 PixelPlotter)– A single capture from a camera,

scanner or video– Other 2D data, e.g. satellite data– An algorithm for generating pixels

(procedural textures)

Displaying BitmapsDisplaying 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 FormatsBitmap 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 (DirectDraw Surface – bitmap for DirectX)– And many more…

• One of the example bitmaps earlier would not typically be stored in a file, which one?

General Bitmap FormatGeneral 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 CompressionBitmap Compression

• Pixel data can be compressed in most formats

• Some compression methods only store an approximation of the pixels for better compression– Called lossy compression– The idea is that the eye does not

notice the inaccuracies– Jpeg’s are a notable example– Repeatedly saving in a lossy format

will degrade quality

• Lossy compression schemes can reduce data size 100x or more JPEG

(Lossy)

PNG format(Non-Lossy

Compressed)

SpritesSprites

• 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 2D 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 Metal Slug 3

Pixel Data for Sprites Pixel Data for Sprites

• Sprites usually represent non-rectangular 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 BlendingPixel 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 BlendingMultiplicative 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 seperately 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 ExampleMultiplicative Blending Example

Test Pattern

Multiplicative Smoke

Additive Blending and OthersAdditive 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 ExampleAdditive Blending Example

Test Pattern

Additive Flare

Transparency / Alpha DataTransparency / 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 AlphaBlending 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 BlendingAlpha 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 ExampleAlpha Blending Example

Test PatternRGB Channel

Alpha Channel Alpha allows variable transparency

Packed Pixel Data with AlphaPacked 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 32F32F32F32F– These will be relevant for GPU-based graphics later…