Introduction to SDL and 2D computer graphics CS 1666 www ...

CS 1666www.cs.pitt.edu/~nlf4/cs1666/

Introduction to SDL and2D computer graphics

● First real-time computer display

● 1950's, MIT/US Government development

● Used as an air defense system into the 1980's

Graphics history: Whirlwind/SAGE

2

CRTs - Cathode Ray Tubes

3

● Pass list of objects to display to the hardware

● Once each object in the list is drawn, start over with a

new/revised list

● Each object could simply be a list of points to trace a

polygon

Vector/calligraphic displays

4

Asteroids

5

Laser light shows

6

Raster displays

7

● Frame aspect ratio:

○ Horizontal pixel count / vertical pixel count

■ E.g.,

● 16:9

● 4:3

● Pixel aspect ratio:

○ Pixel width / pixel height

■ At this point in time, almost always 1

Aspect ratios

8

Color CRT displays

9

Mario

10

LCD and OLED

11

Why RGB?

12

● How much memory needed to store the object list for a vector

display?

● How much memory is needed to store a raster image?

○ … How much space is needed per pixel?

Memory utilization

13

● Number of bits used to express the color of a pixel○ Or a single color component of a pixel (i.e., R, G, or B)

● 8-bit○ 256 total colors available○ Normally 3 bits R, 3 bits G, 2 bits B

● 16-bit "High color"○ Up to 65536 colors available○ Commonly 5R, 6G, 5B

● 24-bit "True color"○ 16,777,216 colors available○ 8R, 8G, 8B

■ 256 options for each channel● "Deep color"

○ 1.07 billion+ colors○ 30/36/48 bits per pixel

■ 10/12/16 bits per color

Color depth

14

Color Channels

15

● Assuming only 8-bit color, a 256x240 raster image would need

61,440 bytes of memory to store

○ 60KiB!

○ The NES only had 2KiB of RAM...

Back to memory needs...

16

● With the availability of cheaper RAM, became feasible to store an

entire "frame" of output in memory

● Allows us to decouple presentation of the image from compilation

of a raster image frame

● Also leads very easily to double buffering to avoid flickering

○ One buffer used to render the frame

○ Other is presented to the display

● FYI, "framebuffer" is somewhat of an overloaded term…

Framebuffers

17

Vector vs. raster graphics

18

● May want to blend pixel colors with images being drawn "behind"

the current image

● The alpha channel can be used to accomplish this

● 16-bit:

○ 5R, 5G, 5B, 1 bit for transparent or not

● 32-bit:

○ 8R, 8G, 8B, 8a

○ Another 256 steps for level of transparency

● Deep color:

○ 30/36/48 bit RGB -> 40/48/64 bit RGBa

Transparency

19

● Cross-platform library○ Linux○ Windows○ macOS○ iOS○ Android

● Abstracts multimedia hardware○ E.g.:

■ Video■ Audio■ Input devices

● We'll be using SDL 2.0 in this class○ Not backwards-compatible with SDL 1.2!

SDL - Simple DirectMedia Layer

20

Hello world

21

● A sprite is a 2D bitmap that is a part of some larger scene

● We could add sprites to the larger scene by having the CPU blit

them on to a surface

○ SDL blits essentially copy and instance of the sprite onto a

surface

Some definitions

22

● A texture is a driver-specific representation of pixel data

○ Can be efficiently rendered into a scene

● By rendering textures in SDL as opposed to blitting sprites,

we'll be using the GPU for drawing instead of the CPU

○ All of the examples for this class will be set up to use this

approach

Or we could let the GPU do it...

23