Lines vs. Pixels

Understanding and Emulating the Distinct Look of Retro Arcade Vectors

Introduction

Let’s go back into the dimly lit arcades of the early 1980s, a time when groundbreaking digital worlds flickered to life on glowing screens, capturing the imaginations of a generation. Beyond the symphony of bleeps and bloops, two distinct visual styles battled for dominance: the familiar, blocky characters built from grids of pixels, and the stark, luminous lines that seemed drawn directly onto the glass with pure light. Understanding the difference between these two approaches, which are raster and vector graphics, is important for appreciating the technological innovation and unique aesthetics of that golden age of gaming.

This article delves into the technical magic behind these competing display technologies, comparing the pixel-based world of raster classics like Pac-Man with the wireframe universes created by vector pioneers such as Asteroids and Star Wars. We'll explore what made each unique, uncover why those mesmerizing vector lines could sometimes appear distorted, and consider the challenges of preserving or recreating that look today. Finally, we'll explore how the spirit of vector graphics can be captured through emulation, leading into a practical example using Python to create a new pygame-based vector-styel game, "The Far Void," to life on contemporary screens.

Vector vs Raster

Raster graphics, the more common technology used in early arcade games, function much like a digital mosaic. The display screen is treated as a fixed grid of individual points called pixels. The game's hardware maintains a dedicated area of memory, often called a framebuffer, which stores the color value for every single pixel on the screen. To create the image, the monitor's electron beam systematically scans across the screen row by row, turning each pixel on or off and setting its color based on the data held in the framebuffer. This method was well-suited for displaying colorful characters and filled-in areas, leading to the characteristic, often blocky, look of many classics. Examples from the early 80s utilizing raster displays include Pac-Man (1980), Donkey Kong (1981), and Frogger (1981).

Is this your style/era of gaming and enjoy this content?
Consider a one-time tip to sonnik.

Vector graphics, in contrast, operate more like drawing with light. Instead of defining a grid of pixels, vector systems work by telling the monitor's electron beam precisely where to draw lines directly on the screen. The game's code sends commands defining the start and end coordinates (vectors) for each line segment. The beam then jumps directly to the starting point and traces the line to the endpoint, illuminating the phosphor on the screen only along that path. This "connect-the-dots" approach bypassed the need for a large framebuffer and allowed for incredibly sharp, bright, and smoothly moving lines, free from the pixelation inherent in raster displays of the era. This made it ideal for wireframe 3D simulations and abstract geometric designs, although complex colors and filled shapes were generally more difficult to achieve.

Famous early 80s examples of vector graphics hardware include Atari's Asteroids (1979), Battlezone (1980), Tempest (1981), and perhaps most famously Star Wars (1983, which was six years after the movie release).

I definitely recall seeing some Star Wars arcade cabinets where the displayed vector lines looked distorted, bent, or fuzzy compared to others. This visual inconsistency was likely due to the complex color vector monitors needing frequent, precise calibration or having aging electronic components affecting the beam control. Maintaining perfect focus, geometry, and color convergence on those specialized displays was a common maintenance challenge, leading to these variations in image quality between different machines.

In terms of home gaming, most systems have utilized raster graphics. The only exception I learned of was a system called Vectrex from 1982. Note this retro commercial from YouTube channel VideoGameAds; the images were likely a little more stable than the video camera was able to capture.

Recreating or Emulating the Effect

Perfectly recreating the authentic visual experience of arcade vector graphics on modern hardware, such as LCD or OLED displays, is fundamentally impossible because the underlying technologies operate entirely differently. Original vector monitors used an analog system where an electron beam was magnetically directed to physically draw lines on a phosphor screen, resulting in incredibly bright, sharp lines with unique properties like variable intensity and a characteristic glow, independent of any fixed pixel structure. Modern displays are inherently raster-based, composed of a rigid grid of discrete pixels that are digitally turned on or off; they cannot physically replicate the continuous path and analog nature of a steered electron beam on phosphor, nor its unique visual artifacts.

However, while exact physical recreation isn't feasible on modern screens, the appearance of vector graphics can be convincingly emulated. Using the processing power of modern computers, software can interpret the original game's vector commands (the instructions telling the beam where to draw) and then render those lines mathematically onto the modern display's pixel grid. Techniques like anti-aliasing help smooth the lines to combat the pixelated nature of the raster display, and sophisticated shaders can even simulate effects like phosphor glow or screen burn-in, allowing for a visual representation that can closely approximate the look and feel of the original vector hardware, even though it's ultimately a simulation on a fundamentally different type of screen.

Enter “The Far Void”

I wanted to explore the possibility of using Python to recreate a vector style game, via emulation. My initial test (a spinning cube) can be found on Github (this repository includes the final game as well).

(Note: To avoid cluttering this article, I am not including the whole program listing inline in this post as it is quite lengthy. Please refer to the Github link above for the code).

It may be difficult to see in this video, but I added CRT scanlines and glow effects. However, I avoided anti-aliasing. I've been cautious about overloading pygame's CPU performance, but it has held up well against my concerns. I ultimately dropped the CRT glow effect due to time constraints for the game's deadline for publishing this post.

Design and Gameplay Explanation

I was initially considering a variation of “Lunar Lander” (Atari, 1979). This game is often forgotten, but I recall a stand-up unit at a bowling alley my parents went to back in the 80s. Here’s a capture of it from YouTube channel vghchannel …

While brainstorming some ideas and testing some things, I ultimately settled on a concept that I call “The Far Void”. Essentially, you are flying through space and getting bombarded by enemy craft that are trying to take you out by crashing into you. I would not describe the premise as similar to Galaga; rather, it closely resembles a game called Vanguard, which I remember from the Atari 2600.

Initially, I considered implementing custom text rendering for the game. After reviewing various options with ChatGPT, I decided to utilize pygame’s capability to handle TrueType or OpenType fonts. This functionality was chosen for implementation. Download the "HyperSpace" font from DaFont.com and install "Hyperspace.otf" under assets/fonts (relative to main.py) as demonstrated below.

(Relative Location of hyperspace.otf font)

(Illustration of Hyperspace font)

• STAGES: You’ll progress through stages every 2000 points. Each stage increases difficulty by increasing the rate at which the enemy is spawned. This increase in spawn rate is subtle, but you’ll eventually notice it!

• LIVES: During development, I went back and forth between a “lives” and “shields” concept. I eventually went with shields. This saved me time to prevent “safe player respawn” logic and troubleshooting. You’ll gain a shield every 3000 points.

• BOSSES: Every third stage features a "boss" encounter, referred to as the "Death Sweep". This enemy becomes a formidable challenge (especially in later stages), akin to a doomsday weapon sent by your adversaries. While it is possible to destroy this enemy, it takes significantly more damage than the other enemy vehicles. Each successive appearance of the "Death Sweep" will exhibit increased speed and resilience. Note, the “Death Sweep” will likely deplete all of your shields.

Within the module engine.py, there is a variable named spawn_boss enabled. By setting this variable to True, you can enable the functionality to spawn a boss by pressing the "B" key. This feature may be useful for customizations and testing purposes. I implemented this to streamline the debugging process; I couldn’t afford time to play through a few stages to induce a boss.

spawn_boss_enabled = False

Check these variables in enemy.py if you want to tweak the difficulty of the game.

speed = 2
spawn_timer = 0
spawn_interval = 1000
score = 0
lives = 3
stage = 1
boss_hp = 0
boss_pos = [0, -100]
boss_speed = 1
SHIELD_REWARD_SCORE = 3000

Also of note, in draw.py, note the function apply_crt_effect…

def apply_crt_effect(screen):
    """
    Apply a CRT effect to the screen by drawing horizontal lines and a flickering overlay.
    :param screen:
    :return:
    """
    width, height = screen.get_size()
    overlay = pygame.Surface((width, height), pygame.SRCALPHA)
    for y in range(0, height, 4):
        pygame.draw.line(overlay, (0, 0, 0, 30), (0, y), (width, y))
    flicker_intensity = random.randint(0, 1)
    flicker_overlay = pygame.Surface((width, height), pygame.SRCALPHA)
    flicker_overlay.fill((0, 255, 0, flicker_intensity))
    overlay.blit(flicker_overlay, (0, 0), special_flags=pygame.BLEND_RGBA_ADD)
    screen.blit(overlay, (0, 0))

You can intensify the flicker by increasing the range for the random value.

flicker_intensity = random.randint(0, 3)

I tolerated a setting of about 3 for this flicker effect. Higher settings were excessive for me, but your experience may differ.

If the sound effects are not desirable, you can disable them via SOUND_ENABLED in the audio/sfx.py module (setting the value to false).

SOUND_ENABLED = True

I am planning on revisiting the sound effects, by generating some custom wavs, and possibly adding the capability to play a “tracker file” for music (as discussed in a recent post) to enhance the audio experience in the future.

Gameplay

To start the game…

python main.py

Keys:

• Q = Quit

• P = Pause (note: this was a late addition)

• Arrow Keys = Move Ship

• Space Bar = Fire Laser

When shields fail to zero, you’ll be promoted to either restart or quit the game.

(Note: "Overlaying text” bug on game over screen was fixed; I didn’t have time to play another 21 levels and record again!😄)

Code

You can perform a git clone on the repository at https://github.com/sonniks/substack.python.games or browse the code manually.

This game is located inside directory “the-far-void”.

(Note: As mentioned above - To avoid cluttering this article, I am not including the whole program listing inline in this post as it is quite lengthy. Please refer to the Github link above for the code).

Box Art

I’m continuing my efforts to recreate some of the styles of box art you may have seen when you walked into a computer store in the 1980s and browsed some of the computer games.

“Box Art” for The Far Void

Previous “Box Art” Entries … see home page for more

Conclusion

The era of true vector displays in arcades was relatively short-lived, but their sharp, luminous aesthetic left an indelible mark on video game history, offering a glimpse of futuristic wireframe worlds unlike anything else at the time. While we can't perfectly replicate that analog magic on modern screens, exploring emulation techniques allows us to appreciate the design principles and strive to capture some of that unique visual flair. This effort represents one such attempt – leveraging Python and Pygame not just to build a fun retro-style shooter, but to engage with the challenge of simulating that distinctive vector look, complete with added effects to evoke that CRT feel.

I encourage you to clone the repository, dive into the code, perhaps tweak the difficulty variables in enemy.py or the CRT effect in draw.py, and experience "The Far Void" for yourself. Whether you're battling the relentless "Death Sweep" or just chasing a new personal best, I'd love to see any high scores in the comments below!

It is my hope that exploring these classic technologies, whether through historical research or hands-on emulation projects like this one, deepens our appreciation for the creativity and engineering that paved the way for the complex and visually rich games we enjoy today.