[stella] Interleaved Colour Sprite System - How it Works

Subject: [stella] Interleaved Colour Sprite System - How it Works
From: "Andrew Davie" <atari2600@xxxxxxxxxxxxx>
Date: Tue, 18 Feb 103 19:06:04 CST
I thought I'd document the method I've been using for the...
INTERLEAVED COLOUR SPRITE SYSTEM

Image Preparation...

First an original image must be converted into appropriate data for the system...

1. Load the original image into an image editing program.

2. Various image manipulation (brightening/enhancing contrast, etc) may be performed at this stage.

3. Resize the image to 48 (wide) x 128 (deep) pixels.  Either stretch image to size, or maintain aspect ratio and adjust canvas size appropriately.

4. Split the image to separate Red, Green, Blue channels (images).

5. Colour-reduce each of these to 2 colours (black/white) with appropriate dithering (weighted Stucki in Paint Shop Pro is my current preference).  The dithering is a crucial part of the operation, as this effectively gives the eye the impression of more colours than there actually are in the final image.  A random dither (or a non-patterned one) gives a much better final result - and much much better than a 'nearest colour' algorithm.

After the dither we have a red frame, a green frame, and a blue frame - even though the actual frame data is just two colour (black and white).  Conceptually, though, they're still the separated colour planes...

		FRAME 1    FRAME 2    FRAME 3

		RRRRRR     GGGGGG     BBBBBB
		RRRRRR     GGGGGG     BBBBBB
		RRRRRR     GGGGGG     BBBBBB
		RRRRRR     GGGGGG     BBBBBB
		RRRRRR     GGGGGG     BBBBBB
		RRRRRR     GGGGGG     BBBBBB
		RRRRRR     GGGGGG     BBBBBB
		RRRRRR     GGGGGG     BBBBBB
		RRRRRR     GGGGGG     BBBBBB

6. Run these images through my image conversion program ("Banker") which...

	6a. Interleaves the Red, Green and Blue on alternate scanlines to produce 3 'interlaced frames'...

		IFRAME 1   IFRAME 2   IFRAME 3

		RRRRRR     GGGGGG     BBBBBB
		GGGGGG     BBBBBB     RRRRRR
		BBBBBB     RRRRRR     GGGGGG
		RRRRRR     GGGGGG     BBBBBB
		GGGGGG     BBBBBB     RRRRRR
		BBBBBB     RRRRRR     GGGGGG
		RRRRRR     GGGGGG     BBBBBB
		GGGGGG     BBBBBB     RRRRRR
		BBBBBB     RRRRRR     GGGGGG

	6b. Converts these frames into 'strips' 8 pixels wide and 128 pixels deep, and packs these strips into multiple banks of < 2K in size each.  The frames are represented by a matrix of strip data.

7. Display each of these frames on the '2600 in successive TV frames, at the same time changing the colour on each scanline so it reflects the correct colour of the current interlaced frame for that scanline.

	7a.  IFRAME1 starts with line 0 red, line 1 green, line 2 blue, etc....
	7b.  IFRAME2 starts with line 0 green, line 1 blue, line 2 red, etc...
	7c.  IFRAME3 starts with line 0 blue, line 1 red, line 2 green, etc...



How it Works...

To get an interlaced colour image, we first interleave the red, green, blue component frames (as described above) to produce 3 'interlaced' frames with the red, green, blue scanlines alternating - ie: 3 frames, each starting with a different colour.  We then display those interlaced frames in a cyclic fashion (IFRAME 1, IFRAME 2, IFRAME3, IFRAME 1, IFRAME 2, ... etc) such that we will on any particular scanline see successively the red component line, the green component line, and the blue component line.   At the same time, the
colour of the sprites is changed on a per-scanline basis (ie: on the fly) to red, green or blue - such that the correct colour
is being used based on the subdivided (interlaced) colour for the current frame being displayed.  For example, when displaying
the third line of IFRAME 3, the sprite colours are set to green.  And the very next line the sprite colours are set to blue.

This 'double-interlacing', where the red, green, blue components are interlaced in the frames themselves and then the frames
are displayed in succession with line-by-line colour changes to give the appropriate red,green,blue component values is how the
sprite system manages to achieve the colours with minimal flicker.  More shimmer, than flicker.

If you watch an image carefully, you can see the bands of colour rolling up the screen - this is a result of successive changing of the scanline colours RGBRGBRGB... on one frame, GBRGBRGBRGB... on the next and BRGBRGBRG... on the next, etc.  It's a bit tricky, but if you manage to move your eye/focus up the screen at one scanline every 1/60th of a second, you actually see clear and distinct RGB bands.

So, that's how it's done.  The code was quite tricky, in the end - not a single cycle free :)  But it's elegant, and given all the odd manipulations of data going on... the result is quite pleasing.

Cheers
A

----------------------------------------------------------------------------------------------
Archives (includes files) at http://www.biglist.com/lists/stella/archives/
Unsub & more at http://www.biglist.com/lists/stella/


Current Thread