Episode 1: Character Graphics!

Where we lay out the main elements of the game and have some fun with PETSCII graphics.

A major part of the fun of doing an arcade-style game in character graphics is in figuring out how you may put a viable visual representation of that game onto the screen using the rather restrained means of the hardware. And you really have to start with figuring out the graphics, since they are defining already much of the constraints of the game and what your code will actually have to do.

Title Graphics

So, let's start with the title graphics. The original arcade game didn't have those, but we definitely want to have one for our home version, since this is an invariable part of the home computing experience. While Computer Space may have lacked a flashy title screen, it had a flyer with glossy graphics — and we may borrow some inspiration from this one:

Display graphics of the flyer for the 2-players version of Computer Space

Playing around on the screen we come up with this PETSCII version of ours:

Of course, we want to include a hint to the PET 2001 series — just in case you were ignorant of the fact which machine you're facing at the moment. ;-)

Moreover, in the 1970s, everthying flashy and spacey inevitably had a "2000" attached to its name, indicating that it was proclaiming a prosperous future that wasn't only shiny, but was sure to come and which would be full of things like this one. On the other hand, Kubrick's "2001: A Space Odyssey" (1968), which allegedly had inspired the original PET's serial name, had probably chosen "2001" for its title by iterating the magical number of the millennium to indicate that this was a story told of an age when a future of this kind already had been established, quite like Chuck Peddle may have wanted his computer to be perceived. — Put this way, our title works out really nicely, bringing home the point of what the home computer and the PET were all about.

And here is our title screen complete, this time as anticipated for the green phosphor version and adjusted for the 1:1.2 pixel ratio of the PET's screen:

Sprites Game Graphics

So — to the all-important game graphics! And you may bet, I started with these one first, as they are defining the whole look & feel of the game.

Computer Space features amazing pixel graphics in a crude-but-not-so-bad resolution, which the flyer typography, we have inspected and shamelessly copied earlier, is rather reminiscent of. The visual are produced by two graphics planes, a background plane with all those stars and a second plane superimposing the scores, the player's rocket ship, the two saucers and any missiles/torpedoes:

For sure, we won't be able to recrate this unique look of spaced out pixel pointillism using character graphics. But this is, where all the fun is, as we have to come up with some of a charm of its own.

For the ship, there will be only 8 angles, while the original game features 24 32, but we're unable to come up with anything that matches the shape at a different angle. Moreover, there will be no way to align the ship perfectly horizontally or vertically, but this is the case with the original game, too. As we can see from the layout of the diode matrices of the original game, as provided in the schematics, the rocket will always be "drifting" at somewhat of an angle:

For the saucers we will pertain the center animation, as provided by a series of "rotating" dots in the original game, but in our version, it will be a scanning vertical line:

And here we figure out, how to ~~draw~~ type the 7-segment-style score numerals:

Finally, we anticipate to use the 4 quadrant-block characters (◰ ◱ ◲ ◳) for the player's torpedo, thus boosting the resolution to a whopping 80 × 50 possible positions. Also, this will separate the torpedo nicely from the tinier dots of the background stars made of periods (stops). In contrast, the saucers' torpedoe will probably just be a simple hash mark (pound) or asterisk. Depending on this decision, the exhaust flame of the rocket ship will be either an at-sign (@) or an asterisks — anything matching the various angles of the ship with proper alignment.

From Mockup to Code

In the good old days™, we would have proceded so far as we've done above. But, then, we would have to copy our designs from the screen using a pen and a pad of square paper, we would have to look up the screen codes for each of these characters, and finally would have type them in — 1000 character codes (40 × 25) in hex, just for the title screen.

Doing character graphics in the 'good old days' using penicl & quad-ruled paper

In modern times, where anything isn't working properly anymore and things aren't done the right way™, things are a little different: First, we already modded our humble emulator to export an images of what's currently on the screen, so it's easy to come up with the screenshots, you've seen above. But, what about the screen codes, any conversions involved, and thousands of key strokes required just to encode a single screen?

Earlier, I had added a facility to convert the contents of the video RAM to Unicode (that is, for some PETSCII characters just a smart guess, because there isn't a suitable equivalent in Unicode) and export it for copy & paste. Now, I revisited this piece of the emulation code again in order to export a hex-dump of the screen contents. Thus, you just shift-click the "copy" button below the screen, and — BAM! — there you go with your code, already nicely prefixed by a dollar sign ($) as commonly used as a prefix to hexadecimal numerals by 8-bit assemblers.

Hence, being deprived of the "fun" part of the pencil & paper & lookup & type-in part, we have already arrived at a reasonable portion of the code. Here is the code for the title screen:

$20,$20,$20,$20,$20,$20,$20,$20 ;0
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$4F,$63,$A0,$20 ;1
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$6C,$61
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$65,$20,$77,$20 ;2
$A0,$50,$67,$63,$A0,$63,$A0,$20
$A0,$50,$20,$A0,$67,$20,$FB,$EC
$20,$4F,$A0,$20,$A0,$50,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$65,$20,$6F,$20 ;3
$A0,$67,$67,$20,$A0,$20,$A0,$20
$A0,$67,$20,$A0,$67,$20,$E1,$61
$20,$4F,$63,$20,$A0,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$4C,$64,$A0,$20 ;4
$A0,$7A,$67,$20,$A0,$20,$A0,$20
$A0,$7A,$20,$A0,$7A,$20,$E1,$61
$20,$4C,$A0,$20,$A0,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20 ;5
$20,$20,$20,$20,$20,$20,$20,$20
$A0,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$62,$20,$20,$20 ;6
$20,$20,$20,$20,$A0,$63,$50,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$6C,$A0,$A0,$FB,$7B,$20 ;7
$20,$20,$20,$20,$A0,$64,$64,$20
$A0,$50,$20,$A0,$50,$20,$4F,$A0
$20,$4F,$A0,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$A0,$FE,$FB,$A0,$A0,$20 ;8
$20,$20,$20,$20,$20,$20,$A0,$20
$A0,$67,$20,$64,$7A,$20,$65,$20
$20,$4F,$63,$20,$20,$20,$20,$03
$0F,$0E,$14,$12,$0F,$0C,$13,$20
$20,$20,$A0,$FE,$A0,$FB,$A0,$20 ;9
$20,$20,$20,$20,$4C,$64,$A0,$20
$A0,$7A,$20,$4C,$A0,$20,$4C,$A0
$20,$4C,$A0,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$7C,$A0,$A0,$A0,$7E,$20 ;10
$20,$20,$20,$20,$20,$20,$20,$20
$A0,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$81
$20,$14,$08,$12,$15,$13,$14,$20
$20,$20,$20,$20,$E2,$20,$20,$20 ;11
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20 ;12
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$93
$20,$06,$09,$12,$05,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20 ;13
$20,$20,$20,$20,$20,$20,$20,$20
$4F,$A0,$20,$4F,$50,$20,$4F,$50
$20,$7A,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20 ;14
$20,$20,$20,$20,$20,$20,$20,$20
$64,$A0,$20,$65,$67,$20,$65,$67
$20,$67,$20,$20,$20,$20,$20,$8B
$20,$0C,$05,$06,$14,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20 ;15
$20,$20,$20,$20,$20,$20,$20,$20
$65,$20,$20,$A0,$67,$20,$A0,$67
$20,$67,$62,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20 ;16
$20,$20,$20,$20,$20,$20,$20,$20
$4C,$A0,$20,$A0,$7A,$20,$A0,$7A
$20,$7A,$A0,$20,$20,$20,$20,$8C
$20,$12,$09,$07,$08,$14,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20 ;17
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20 ;18
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20 ;19
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$22,$03,$0F,$0D,$10,$15,$14 ;20
$05,$12,$20,$13,$10,$01,$03,$05
$22,$20,$0F,$12,$09,$07,$09,$0E
$01,$0C,$20,$01,$12,$03,$01,$04
$05,$20,$07,$01,$0D,$05,$20,$20
$20,$28,$03,$29,$20,$31,$39,$37 ;21
$31,$20,$0E,$15,$14,$14,$09,$0E
$07,$20,$01,$13,$13,$0F,$03,$09
$01,$14,$05,$13,$2C,$20,$09,$0E
$03,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$02,$19,$20 ;22
$0E,$0F,$0C,$01,$0E,$20,$02,$15
$13,$08,$0E,$05,$0C,$0C,$20,$01
$0E,$04,$20,$14,$05,$04,$20,$04
$01,$02,$0E,$05,$19,$3B,$20,$20
$20,$10,$05,$14,$20,$32,$30,$30 ;23
$31,$20,$07,$01,$0D,$05,$20,$02
$19,$20,$0E,$2E,$20,$0C,$01,$0E
$04,$13,$14,$05,$09,$0E,$05,$12
$2C,$20,$32,$30,$31,$37,$2E,$20
$20,$20,$20,$20,$20,$20,$20,$20 ;24
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20
$20,$20,$20,$20,$20,$20,$20,$20

As an observant reader may have already noticed, these are already 1K (1,000 bytes representing 40 × 25 screen characters) of codes, while the PET 2001 features just 4K of RAM in its minimal configuration. However, the code actually running the game will be of managable size. But we'll have to be careful when adding any further data resources to the game.

This provides also the way to go for the background stars. In principle, there are two ways how we could implement them: First, we could have them either hard coded or assembled on-the-fly in a background screen buffer and whenever there's a piece of screen to be cleared from any of the "sprites", we'll copy the respective pieces from this background buffer. But this would add another K of bytes to the game and, provided we want to be runnable with just 4K, we may run out of RAM eventually. So, secondly, we may want to produce the background algorithmically.

Again, we have two options: Either to randomly or procedurally assign the stars at the beginning of a game and use dedicated character buffers for any screen position currently occupied by a moving object, just as the operating system does it for the cursor. Or, we could resolve for any given screen position, whether there's a star or not, based on its unique x- and y-coordinates. With the cursor-like approach, we may run into some sorts of race conditions (think of the background behind any scores, overlapped by a saucer or the rocket) and managing all those different character buffers won't be as much fun as we expect to gain from this project. So, we'll probably settle for the algorithmic solution based on screen coordinates, what also seems to be, what the original arcade game is doing in TTL logic (while I haven't verified this, yet). But this is another episode…

That's all for now, see you next time, stay tuned …

▶ Next: Episode 2: (Re)cherchez la Machine

▲ Back to the index.

Norbert Landsteiner
April 2017, Vienna, Austria
www.masswerk.at – contact me.

— This series is part of Retrochallenge 2017/04. —

Retrochallenge 2017/04:Personal Computer Space Transactor 2001

Episode 1: Character Graphics!

Title Graphics

Sprites Game Graphics

From Mockup to Code

Retrochallenge 2017/04:
Personal Computer Space Transactor 2001