CS 1666 www.cs.pitt.edu/~nlf4/cs1666/ Introduction to SDL and 2D computer graphics
Graphics history: Whirlwind/SAGE First real-time computer display ● 1950's, MIT/US Government development ● Used as an air defense system into the 1980's ● 2
CRTs - Cathode Ray Tubes 3
Vector/calligraphic displays 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 4
Asteroids 5
Laser light shows 6
Raster displays 7
Aspect ratios 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 ■ 8
Color CRT displays 9
LCD and OLED 10
Why RGB? 11
Memory utilization 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? ○ 12
Color depth 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 ■ 13
Color Channels 14
Back to memory needs... 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... ○ 15
Framebuffers 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 … ● 16
Vector vs. raster graphics 17
Transparency 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 ○ 18
SDL - Simple DirectMedia Layer 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! ○ 19
Hello world 20
Some definitions A sprite is a 2D bitmap that is a part of some larger scene ● We will end up adding sprites to the larger scene by blitting them ● on to a surface SDL blits essentially copy and instance of the sprite onto a ○ surface "You should call unless you know ■ exactly how SDL blitting works internally and how to use the other blit functions." 21
More definitions A texture is a driver-specific representation of pixel data ● Can be efficiently rendered into a scene using an ○ By rendering textures in SDL as opposed to blitting sprites, ● we'll be using the GPU for drawing instead of the CPU 22
Recommend
More recommend
