Difference between revisions of "Color Graphics Adapter"

From TheAlmightyGuru
Jump to: navigation, search
(Graphic Mode: 320x240, 2-bit Color)
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
[[Image:CGA - IBM Card.jpg|thumb|256x256px|An IBM CGA card.]]
 
[[Image:CGA - IBM Card.jpg|thumb|256x256px|An IBM CGA card.]]
  
The '''''Color Graphics Adapter (CGA)''''' is a graphics display adapter developed by [[IBM]] and released in 1981. It gives IBM personal computers limited color graphics capabilities. It was superseded in 1984 by the [[Enhanced Graphics Adapter]] (EGA) which added superior color graphic capabilities. Though the card was developed and sold by IBM, competing companies quickly reverse-engineered it and sold clones.  
+
The '''Color Graphics Adapter (CGA)''' is a graphics display adapter developed by [[IBM]] and released in 1981. It gives IBM personal computers limited color graphics capabilities. It was superseded in 1984 by the [[Enhanced Graphics Adapter]] (EGA) which added superior color graphic capabilities. Though the card was developed and sold by IBM, competing companies quickly reverse-engineered it and sold clones.  
  
 
By the time I got into computers, EGA was already standard, and VGA graphics had just been introduced, so the [[MS-DOS]] games I played that used CGA looked pretty dated to me, and I wasn't very interested in them. However, there were some that were just so fun, I saw past the poor color quality.
 
By the time I got into computers, EGA was already standard, and VGA graphics had just been introduced, so the [[MS-DOS]] games I played that used CGA looked pretty dated to me, and I wasn't very interested in them. However, there were some that were just so fun, I saw past the poor color quality.
  
I did a little bit of programming with CGA graphics in [[QuickBASIC]] where it was screen 1, but I mostly preferred the superior screens I had access to, 7, 12, and 13.
+
I did a small amount of programming with CGA graphics in [[QuickBASIC]] where it was screen 1, but I mostly preferred the superior screens I had access to: 7, 12, and 13.
  
 
==Colors==
 
==Colors==
Line 15: Line 15:
 
This gives the 16 colors seen to the right. The actual RGB values of each color are determined by setting the color to 0 if the bit is off, and 170 if it is on. If the intensity bit is on, 85 is added to each value.
 
This gives the 16 colors seen to the right. The actual RGB values of each color are determined by setting the color to 0 if the bit is off, and 170 if it is on. If the intensity bit is on, 85 is added to each value.
  
The only color that doesn't follow this system is yellow, which should have an RGB of (170, 170, 0) when the intensity bit is off, but instead has an RGB of (170, 85, 0). The decision to treat yellow differently was most likely made because dark yellow isn't a common color, but brown is very popular. For example, if yellow followed the equation, this screenshot from [[Bionic Commando]] would look considerably different.
+
The only color that doesn't follow this system is yellow, which should have an RGB of (170, 170, 0) when the intensity bit is off, but instead has an RGB of (170, 85, 0). The decision to treat yellow differently was most likely made because dark yellow isn't a common color, but brown is very popular. For example, if yellow followed the equation, this screenshot from ''[[Bionic Commando]]'' would look considerably different.
  
 
{|
 
{|
Line 77: Line 77:
  
 
{|
 
{|
| <p style="text-align:center;">[[Image:CGA Example - Pal 1 - High.png]]<br/>Actual screen data of [[Prince of Persia]].</p>
+
| <p style="text-align:center;">[[Image:CGA Example - Pal 1 - High.png]]<br/>Actual screen data of ''[[Prince of Persia]]''.</p>
 
| <p style="text-align:center;">[[Image:CGA Example - Simulated 320x200.png|320px]]<br/>Simulated monitor.</p>
 
| <p style="text-align:center;">[[Image:CGA Example - Simulated 320x200.png|320px]]<br/>Simulated monitor.</p>
 
|}
 
|}
Line 95: Line 95:
 
{|
 
{|
 
| <p style="text-align:center;">[[Image:CGA Example - Simulated 320x200 - Alternate Black.png|320px]]<br/>A simulation with black replaced by blue.</p>
 
| <p style="text-align:center;">[[Image:CGA Example - Simulated 320x200 - Alternate Black.png|320px]]<br/>A simulation with black replaced by blue.</p>
| <p style="text-align:center;">[[Image:CGA Example - 320x200 - Alternate Black.png]]<br/>[[Street Fighter]] in CGA mode used this feature in the player select screen.</p>
+
| <p style="text-align:center;">[[Image:CGA Example - 320x200 - Alternate Black.png]]<br/>''[[Street Fighter]]'' in CGA mode used this feature in the player select screen.</p>
 
|}
 
|}
  
Line 108: Line 108:
  
 
{|
 
{|
| <p style="text-align:center;">[[Image:CGA Example - 320x200 - Palette Swap.png]]<br/>Mid-screen palette swapping in [[California Games]].</p>
+
| <p style="text-align:center;">[[Image:CGA Example - 320x200 - Palette Swap.png]]<br/>Mid-screen palette swapping in ''[[California Games]]''.</p>
 
|}
 
|}
  
 
===Graphic Mode: 640x200, 1-bit Color===
 
===Graphic Mode: 640x200, 1-bit Color===
Few programs used this mode because it was monochrome, but the higher resolution allowed for more detailed interfaces. The resolution is 640x200 pixels, but has a dramatic pixel ratio of 1:2.4 (visually 640x480). When displayed on a CRT monitor, the display was visibly stretched in height, scanlines would be present, and a curved distortion would be noticeable near the edges of the display. Games like [[SimCity]] supported this mode.
+
Few programs used this mode because it was monochrome, but the higher resolution allowed for more detailed interfaces. The resolution is 640x200 pixels, but has a dramatic pixel ratio of 1:2.4 (visually 640x480). When displayed on a CRT monitor, the display was visibly stretched in height, scanlines would be present, and a curved distortion would be noticeable near the edges of the display. Games like ''[[SimCity]]'' supported this mode.
  
 
{|
 
{|
 
| <p style="text-align:center;">[[Image:CGA Example - 640x200.png|320px]]<br/>Actual screen data.</p>
 
| <p style="text-align:center;">[[Image:CGA Example - 640x200.png|320px]]<br/>Actual screen data.</p>
| <p style="text-align:center;">[[Image:CGA Example - Simulated 640x200.png|320px]]<br/>Simulated monitor for [[Space Racer]].</p>
+
| <p style="text-align:center;">[[Image:CGA Example - Simulated 640x200.png|320px]]<br/>Simulated monitor for ''[[Space Racer]]''.</p>
 
|}
 
|}
  
Line 146: Line 146:
 
These are programs that I think made good use of CGA graphics:
 
These are programs that I think made good use of CGA graphics:
  
* [[4x4 Off-Road Racing]]
+
* ''[[4x4 Off-Road Racing]]''
* [[King's Quest III: To Heir Is Human]]
+
* ''[[King's Quest III: To Heir Is Human]]''
* [[Space Quest II: Vohaul's Revenge]]
+
* ''[[Space Quest II: Vohaul's Revenge]]''
* [[Where In the U.S.A. Is Carmen Sandiego?]]
+
* ''[[Where In the U.S.A. Is Carmen Sandiego?]]''
* [[Where In the World Is Carmen Sandiego?]]
+
* ''[[Where In the World Is Carmen Sandiego?]]''
  
 
==Media==
 
==Media==
Line 161: Line 161:
  
 
===Videos===
 
===Videos===
 +
* [https://www.youtube.com/watch?v=niKblgZupOc youtube.com/watch?v=niKblgZupOc] - 8-Bit Guy.
 
* [https://www.youtube.com/watch?v=hNRO7lno_DM youtube.com/watch?v=hNRO7lno_DM] - 8088 MPH Demo.
 
* [https://www.youtube.com/watch?v=hNRO7lno_DM youtube.com/watch?v=hNRO7lno_DM] - 8088 MPH Demo.
  
 
==Links==
 
==Links==
* [https://en.wikipedia.org/wiki/Color_Graphics_Adapter en.wikipedia.org/wiki/Color_Graphics_Adapter] - Wikipedia.
+
{{Link|Wikipedia|https://en.wikipedia.org/wiki/Color_Graphics_Adapter}}
* [http://www.mobygames.com/attribute/sheet/attributeId,1 mobygames.com/attribute/sheet/attributeId,1] - MobyGames.
+
{{Link|MobyGames|http://www.mobygames.com/attribute/sheet/attributeId,1}}
* [http://www.shikadi.net/moddingwiki/Raw_CGA_Data shikadi.net/moddingwiki/Raw_CGA_Data] - Modding Wiki.
+
{{Link|ModdingWiki|http://www.shikadi.net/moddingwiki/Raw_CGA_Data}}
 +
 
 
* [https://trixter.oldskool.org/2015/04/07/8088-mph-we-break-all-your-emulators trixter.oldskool.org/2015/04/07/8088-mph-we-break-all-your-emulators] - 8088 MPH CGA demo explanation.
 
* [https://trixter.oldskool.org/2015/04/07/8088-mph-we-break-all-your-emulators trixter.oldskool.org/2015/04/07/8088-mph-we-break-all-your-emulators] - 8088 MPH CGA demo explanation.
  

Revision as of 21:57, 16 May 2019

An IBM CGA card.

The Color Graphics Adapter (CGA) is a graphics display adapter developed by IBM and released in 1981. It gives IBM personal computers limited color graphics capabilities. It was superseded in 1984 by the Enhanced Graphics Adapter (EGA) which added superior color graphic capabilities. Though the card was developed and sold by IBM, competing companies quickly reverse-engineered it and sold clones.

By the time I got into computers, EGA was already standard, and VGA graphics had just been introduced, so the MS-DOS games I played that used CGA looked pretty dated to me, and I wasn't very interested in them. However, there were some that were just so fun, I saw past the poor color quality.

I did a small amount of programming with CGA graphics in QuickBASIC where it was screen 1, but I mostly preferred the superior screens I had access to: 7, 12, and 13.

Colors

CGA supports 4-bit, 2-bit, and 1-bit color depending on which display mode is active. At 4-bit color, it uses one bit each for red, green, and blue, and a fourth bit for intensity. Depending on whether the output was sent to an RGB or composite monitor, these colors could look noticeably different.

RGB Output

Colors using RGB output.

This gives the 16 colors seen to the right. The actual RGB values of each color are determined by setting the color to 0 if the bit is off, and 170 if it is on. If the intensity bit is on, 85 is added to each value.

The only color that doesn't follow this system is yellow, which should have an RGB of (170, 170, 0) when the intensity bit is off, but instead has an RGB of (170, 85, 0). The decision to treat yellow differently was most likely made because dark yellow isn't a common color, but brown is very popular. For example, if yellow followed the equation, this screenshot from Bionic Commando would look considerably different.

CGA Example - Brown to Yellow - Spec.png
Using the CGA specification.

CGA Example - Brown to Yellow - Equation.png
How it would look without the modified yellow.

Although the EGA standard wisely followed the CGA specification to used brown instead of dark yellow, the VGA specification for 4-bit colors did not. This can be seen in many graphics in Windows 3 games where anything that should be brown is dark yellow.

Composite Output

Although the same 16 colors used in RGB output were available in composite output, they looked noticeably different.

Also, when pixels of different colors were next to each other they tended to "bleed" into each other forming a thin band of a color not available on the CGA card. The way the colors bleed is predictable, and many programmers used them to display more than the typical 4 colors that would be available in RGB mode. In the example below, by alternating colors, 16 colors can be simulated in a 2-bit mode. However, this causes the graphics to become slightly blurred and effectively cuts the horizontal resolution in half.

Space Quest II - Vohaul's Revenge - Screenshot - Vohaul - CGA Behind.png
Actual data from Space Quest II: Vohaul's Revenge.

CGA Example - 320x200 - Simulated Composite Fake 4-bit.png
How it appears on a composite monitor.

Display Modes

The CGA supports two primary display modes, text or graphic. Both modes could use RGB or composite output. RGB was usually sent to computer monitors while composite was usually sent to televisions. It is actually possible to simulate additional colors using composite output, but by sacrificing visual clarity.

Text Modes

CGA supports two text modes; 40x25 characters and 80x25 characters. In a text mode, the programmer can place an 8x8 pixel character tile at a fixed row and column at intervals of 8 pixels. Characters must be chosen from a pre-made set of 256 characters from code page 437 which are stored on the card's ROM, and, therefore, cannot be altered. However, the card stores a normal and narrow version of the character set. Unfortunately, the character set cannot be changed programmatically, it can only be changed with a jumper on the board. The two sets are displayed below.

CGA Example - Character ROM.png
The default character set.

CGA Example - Character ROM - Thin.png
The narrow set (jumper removed).

Text can be displayed with a custom foreground and background color chosen from a pre-made set of 16 colors. The intensity bit on the background color doubles as the blinking bit for the foreground color, so it is not possible to have blinking backgrounds. Below is every foreground and background color combination that can exist in CGA text mode.

CGA Example - 80x25 Text - Colors.png
All foreground/background color combinations.

Graphics Modes

CGA supports two graphics modes, 320x200 at 2-bit color, or 620x200 at 1-bit color. The graphic modes had lower resolution and/or fewer colors than the text modes, but with the benefit of allowing the programmer to address every pixel individually, and thus draw complex graphics. With clever tweaks, a special mode with a 160x100 resolution and 4-bit color is possible and is described below.

Modes In Detail

Text Mode: 40x25, 4-bit Color

This mode run at 40x25 characters of 8x8 pixel characters. This yields a resolution of 320x200, with a pixel ratio of 1:1.2 (visually 320x240). Users who outputted to a low resolution monitor or a television had to use this display, but those with high resolution monitors could still use this mode if they preferred larger text.

When displayed on a 4:3 CRT monitor of the day, the display was stretched in height, scanlines would be present, and a curved distortion would be noticeable near the edges of the display.

CGA Example - 40x25.gif
Actual screen data.

CGA Example - Simulated 40x25.gif
Simulated monitor (click to see).

Text Mode: 80x25, 4-bit Color

This text mode has 80x25 characters, each made up from the same 8x8 pixel data as the 40x25 mode. This yields a resolution of 640x200 with a pixel ratio of 1:2.4 (visually 640x480). Most programs that were written for CGA and relied on text output used this resolution.

CGA Example - 80x25 Text - QuickBASIC.png
Actual screen data of QuickBASIC.

CGA Example - Simulated 80x25 Text - QuickBASIC.png
Simulated monitor.

Graphic Mode: 320x200, 2-bit Color

This was the most popular CGA mode used for graphics. The display resolution is 320x200 pixels with a pixel ratio of 1:1.2 (visually 320x240). Only four colors could be displayed on the screen at a time, and they were mostly fixed, which is why so many CGA games look the same.

CGA Example - Pal 1 - High.png
Actual screen data of Prince of Persia.

CGA Example - Simulated 320x200.png
Simulated monitor.

A programmer could switch between one of two palettes, each with four colors. Palette 0 is black, green, red, yellow, palette 1 is black, cyan, magenta, white. Neither is very useful for displaying realistic images, but each color effectively contrasts with each other. Each palette could be displayed at high or low intensity, shifting the entire screen's brightness.

CGA Example - Pal 0 - High.png
Palette 0, high intensity.

CGA Example - Pal 0 - Low.png
Palette 0, low intensity.

CGA Example - Pal 1 - High.png
Palette 1, high intensity.

CGA Example - Pal 1 - Low.png
Palette 1, low intensity.

In either palette mode, color 0 is black, but it is customizable and can be replaced with any of the 16 colors from the text mode. This gives the benefit of adding a custom color, provided no black exists on the screen (as it would be replaced as well). Color 0 is always the background color which displays in the overscan region (or border) of the screen, so changing the color sometimes caused unwanted results near the edges of the screen.

CGA Example - Simulated 320x200 - Alternate Black.png
A simulation with black replaced by blue.

CGA Example - 320x200 - Alternate Black.png
Street Fighter in CGA mode used this feature in the player select screen.

Through a simple trick, an alternate palette can be attained. This is possible by changing settings on the board that normally only function in composite output when the output is actually set to RGB output. The result is an additional palette using the colors black cyan, red, and white. This palette also supports high and low intensity, but it can only be attained on RGB monitors.

CGA Example - Pal Alt - High.png
Alternate palette, high intensity.

CGA Example - Pal Alt - Low.png
Alternate palette, low intensity.

With very accurate timing, a programmer can switch between palettes as the screen is drawing to allow more than the typical 4 colors on the screen. Since the screen draws vertically, this trick is only possible in horizontal bands. In the example below, the view on the top uses palette 0, the mountains and sky are the alternate palette, and the ground and status bar are palette 0 again.

CGA Example - 320x200 - Palette Swap.png
Mid-screen palette swapping in California Games.

Graphic Mode: 640x200, 1-bit Color

Few programs used this mode because it was monochrome, but the higher resolution allowed for more detailed interfaces. The resolution is 640x200 pixels, but has a dramatic pixel ratio of 1:2.4 (visually 640x480). When displayed on a CRT monitor, the display was visibly stretched in height, scanlines would be present, and a curved distortion would be noticeable near the edges of the display. Games like SimCity supported this mode.

CGA Example - 640x200.png
Actual screen data.

CGA Example - Simulated 640x200.png
Simulated monitor for Space Racer.

Unlike in the 320x200 mode, in this mode, color 0 must remain black, but color 1 can be customized to any of the 16 text mode colors. It wasn't common practice to program in this way because most programs that were written in monochrome mode assumed the user had a monochrome display. However, for those who owned a color monitor, and wanted high resolution, you could get a display like this:

CGA Example - 640x200 - Alternate White.png
Custom foreground color.

Graphic Mode: 160x100, 4-bit Color

This is not technically a graphic mode, but a clever tweak of text mode 80x25. The row height in text mode could be increased by cutting off the bottom lines of each row. By setting a row height to only 2 pixels, a programmer would get a text resolution of 80x100 instead of 80x25, but all display would still have to be made up from the existing 256 possible characters in ROM. By drawing character 222 (which is half the fore color and half the back color), and changing the foreground and background colors after each character, you effectively get 160x100 pixels, each with any color from the palette of 16. This mode is mentioned in the CGA manual, but it does not go into detail on how to achieve it. Below is an example of a game which used this mode:

CGA Example - 160x100.png
Actual screen data.

CGA Example - Simulated 160x100.png
Simulated monitor.

Technically, this trick can be done in the 40x25 text mode, but it would result in a more-blocky 40x100 resolution, so few, if any, programs ever used it.

More Than 16 Colors

By using composite output and a display system similar to that of the 160x100 resolution display, it's possible to show more than the 16 color maximum by taking advantage of the color bleeding in composite output. The 8088 MPH demo shows an example of this.

Light Pen

The CGA also makes it possible to program for a light pen, but I've never used one, so I don't have much to say about it.

Software

All software that used 2-bit Color

These are programs that I think made good use of CGA graphics:

Media

Package

Videos

Links

Link-Wikipedia.png  Link-MobyGames.png  Link-ModdingWiki.png