Analyzing the Spatial Construction of Super C

Taxonomy of Virtual Spaces Part II

The Super Mario Bros. World 1-1 replica is working well in my project, but the original game doesn't have much of a sense of depth into screen space. There are some hills, clouds, bushes, castles, fences, and horsehair plants in the background, but it is difficult to get a sense of how far these objects are from the player's path. I am able to infer some implied depth from objects like warp pipes, but the game's orthographic projection makes everything appear very flat.

For my second game world, I turn to another NES classic, Super C (Konami, 1988), the sequel to the original Contra and a port of Konami's arcade game Super Contra (1988). [Why did Konami name this game Super C instead of Super Contra in the USA? It is assumed that it was to avoid comparison to Ronald Reagan's Iran-Contra scandal that had recently been exposed.] I have written about Super C before as an example of a game with elevation oblique projection. The game actually has a wide variety of visuo-spatial configurations with different styles of gameplay in different levels, but I want to concentrate on Area 1, Fort Firestorm.

Super C Area 1, Fort Firestorm

What is Oblique Projection?

With an oblique projection, the front face of an object that is parallel to the picture plane (in this case, the dark wall below the ground plane) is represented in its true shape, just like an orthographic projection. However, unlike orthographic projections where the projectors are perpendicular to the picture plane, oblique projectors are at an oblique angle to the picture plane (remember that this uses the Primary Geometry projection model). Therefore, two other sides of the object are also visible, but their shapes are distorted (read my other posts for more on the historic confusion between axonometric and oblique terminology).

The receding lines of the object are foreshortened (or not) by a certain amount depending on the angle of the projectors from the picture plane. Cavalier Projection is when the projectors are at 45° and the foreshortening ratio is 1:1 (in other words, no foreshortening). Cabinet Projection is when the projectors are at arccot(1/2) (about 64°) and the foreshortening ratio is 1:2 (receding lines are drawn at 1/2 normal length. These are older methods of creating technical drawings for the military (cavalier) or furniture industry (cabinet) and are designed for preserving object measurements, not for their aesthetic qualities. For a less distorted image, a foreshortening ratio of 2/3 or 3/4 would be more pleasing to the eye ("Planar Geometric Projections and Viewing Transformations" by Ingrid Carlbom and Joseph Paciorek, Computing Surveys, vol. 10, no. 4 (1978) pg. 482).

What Kind of Oblique Projection is Fort Firestorm?

What would these floor sections look like from an overhead view?

The game's imagery must be analyzed before I can determine how to recreate the world with 3-D models. How wide is the player's path? Characters are about the same size on the screen as in Super Mario Bros. so I can keep the general scale the same (measured in 16 x 16 pixel "blocks" that translate to Unity square meters).

In the image above, the large gray rhombus shapes on the player path look like they are obliquely distorted square shapes to me, reminiscent of the square slabs of a sidewalk. The long edge of each rhombus (the non-foreshortened edge) is exactly 64 pixels. The short edge (the foreshortened edge) is almost exactly 32 pixels. This gives a 1:2 foreshortening ratio, which is a Cabinet Projection. The exact type of oblique projection is not important, but this gives me a ratio to determine the size of the "gutters" and projections along the edge of the player path. On the right of the above image, I show what an overhead view of the player path would look like if seen from directly overhead.

With these measurements, I can easily recreate the main player path of the level in 3-D.

Changing Projections Mid-Game

Taxonomy of Virtual Spaces Part II

My latest update added functionality of varying levels of importance to my project. First, the level will reset if the player character falls off of the screen, adding some challenge of avoiding the "death fall" pits in the game world. Second, I can now take screen shots from the editor play window by pressing the "I" key. Most importantly, third, the game's projection method can be dynamically changed during play. 

This represents a "minimum viable product" of my project for visualizing different visuo-spatial configurations within the same game world. The following examples are taken from my "family tree" of projection methods that define the graphic techniques used to render images onto the screen. All of the following projection methods may be cycled through without interrupting gameplay.

Orthogonal Projections

Orthographic Projection

2-Faced Oblique Projections

Vertical Oblique Projection

Horizontal Oblique Projection

Elevation Oblique Projections

Cabinet Oblique Right Projection

Cabinet Oblique Left Projection

Cavalier Oblique Right Projection

Cavalier Oblique Left Projection

Perspectival (Linear) Projection 

One-Point Perspective

Summer 2023 Summary and "Cartoony" Game Conclusions

I am happy to say that I was able to wrap up summer with some hands-on research at a terrific pinball parlor and video arcade while on an out-of-state road trip.

The author on a research trip to Spinners Pinball Arcade

I always prefer to experience these works on original hardware and in their proper context, and this location did not disappoint. There was a lot of machines, including many that I've recently been writing about. Also, I got to play some rare finds like Hercules (1979), the largest production-model pinball table and Atari's swan song in the pinball industry. 

This summer, I completed a digital project prototype and researched the evolution of game structures in the 1979-1982 period.

Taxonomy of Virtual Spaces Project

In-browser itch.io link to the prototype here.

I completed a prototype of my project to explore different spatial paradigms seen in digital games (spatial paradigm defined as the visuo-spatial configuration of a virtual space and the player's affordances for navigating that space). My first test paradigm is the "Filmation" paradigm that became popular on the ZX Spectrum in the 1980s and is still used in games to this day (such as in Elephantasy: Flipside). My prototype approximates the environment and navigation of Knight Lore, probably the first game to use this spatial construction.

"Filmation" games use a pixel dimetric method of screen projection, common for "isometric" games of the era (such as Zaxxon and Q*bert). The prototype allows the player to press the "T" key to change projection method to true isometric (like Monument Valley) or pixel trimetric (like Crystal Castles). Some room arrangements become unclear or ambiguous with certain projection methods, making the spaces difficult for the player to comprehend or navigate. This may or may not be intended, as the level designer may use an ambiguous layout to trick the player with an illusion or create a difficult navigational puzzle to solve.

In true isometric projection, my character appears to be in the corner of the room...

...but it turns out that there is space between the top platform and the walls

My development blog posts:

Initial plans and research

New Digital Project Research and Notes

Summer 2023 Plans

Refinement of terms

Axonometry Part One: Defining

Axonometry Part Two: History

Axonometry Part Three: Clarifying

Planar Geometric Projections

Preproduction

Digital Project Plans

Cartesio: A Spatial Tool

The "Filmation" Spatial Paradigm

Production

Towards a Digital Simulacrum of the "Filmation" Spatial Paradigm

Reconstructing the Virtual Spatial Configuration

Incorporating the Player Avatar and Navigation

Conclusions:

I have been able to replicate the "fake 3-D" environment from and older computer game and replicated it fully 3-D, polygonal game data. Reconstructing in this manner allows me to quickly test different projection systems (three options so far) without having to redraw or recalculate all of the art assets needed to display the space.

Next steps:

In the future, I need to expand my project to project other types of spatial constructions and navigation methods. My work on researching a "cartoony" spatial paradigm (see below) gives guidelines for what types of projections, "camera" angles, and types of environments would be best to start with.

The intent is to create a tool for testing and remixing different game qualities on the fly to see how these options change the player's phenomenological experiences of the same virtual spaces (say, playing a 2-D platformer game in first person). The point is not to replicate an entire game experience, but focus on the spatial qualities and navigation affordances. This type of tool is helpful in game development and other forms of research. This will also serve as a "museum piece" of various spatial paradigms in games, not dissimilar to Traversing Virtual Dimensions, my other project presenting the early development of digital avatar navigation.

Toward a "Cartoony" Spatial Paradigm

Pac-Man (Namco, 1980) paragon of cartoony gaming

Additionally, I performed some research on the 1979-1982 game era when what I call "cartoony" graphics developed and became popular both in the USA and Japan.

Part One: Origins (Cutie Q to Pac-Man)

Part Two: Maze Games Beyond Pac-Man

Part Three: Maze Shooters and Maze Looters

Part Four: Early Evolution of Platformers

Part Five: Maze Tunnelers

I see a lot of correlation between the visual techniques of early digital games and traditional cel animation, so I feel there is something to uncover at this point where games started to hew closer to cartoons (and I don't just mean Dragon's Lair). Both forms of media can use similar techniques to create a sense of space and enhance visuals.

Parallax motion conveying deep space in Lupin III: The Castle of Cagliostro (1979)

Parallax motion conveying deep space in Moon Patrol (1982)

Both examples above use scrolling graphics on layered planes to create hybrid, yet cohesive, images. In each case, the vehicle appears to move through deep space, yet the two vehicles never change their x positions in the respective images.

Many other techniques are common to both cel animation and game graphics: limited color palettes, simple shapes, repeated animation cycles, characters with big heads to show facial details, etc.

Conclusions:

My research uncovered that there is not one but several "cartoony" spatial paradigms that evolved from one another during this golden era of arcade games with character. These will be directly useful in expanding my own lexicon of paradigm variations and options to incorporate into my digital project.

Also, even though my work specifically does not deal with game genres, I found myself coining new terms to understand these related families of games ("maze looter," "maze tunneler," "ladder/digger platformer").

This work is closer to the diachronic "art history" of evolving aesthetic styles I seek to create and I feel that my taxonomy of virtual spaces successfully conveys the exact spatial changes between game styles. 

How did digital games get a "cartoony" look? Part of the reason is because of technological advancement was required before detailed player avatar graphics and animations (think sprites) could convey a sense of character. ROM chips allowed far more detailed graphics than earlier diode-based images. ROM chips started to be used in arcade games by 1974 but the first "cartoony" game Cutie Q wasn't made until 1979. Toru Iwatani was likely inspired by the immensely popular anime Obake no Q-Tarō that he watched as a kid when he made an aesthetic decision to incorporate big-eyed, round, ghost-like characters in the game (he admits it was his influence for Pac-Man). Note also the similar "Q" designs in the titles of both:

Obake no Q-Tarō title card with upside-down smiling obake "Q" from the 1965 anime series

Japanese Cutie Q arcade instructions with similar "smiling Q" logo at top

It seems clear from my research that platformer games evolved from maze games. This is not surprising as "ladder" games have been considered a type of maze game. What is interesting is that Heiankyo Alien*, a little-known game here in the USA, may have been an influence on the biggest games of 1980 and 1981: Pac-Man and Donkey Kong (through influence on Space Panic).

*Fun fact: I bought my copy of Heiankyo Alien for Game Boy from fellow Drexel instructor and game history researcher Adrian Sandoval.

This section of study ends at 1982, which means there are plenty of other important examples that followed. 1983 would bring Bag Man, Bomberman, Congo Bongo, Crystal Castles, Mappy, Mario Bros., Tapper, Track & Field, and more. All this in the midst of an arcade market slump and an outright crash of the home game market in the USA. I plan to continue developing this series in the future.

Defining: Axonometry, pt. 1

Taxonomy of Virtual Spaces

Part of my research is in defining a framework and vocabulary for analyzing and describing the concept of spatiality in digital media (especially in digital game environments). This "Taxonomy of Virtual Spaces" (Rowe, unpublished) is a tool for recognizing and clearly defining the aesthetic styles of digital games that I call spatial paradigms. How are these virtual spaces of the game world projected as 2-D images onto the display screen?

One might think that many of the terms used in the creation of graphic spaces would be well-defined and agreed upon. In truth, there are a number of terms that are used in different ways and may have conflicting definitions in computer graphics, engineering, and architecture. Because of this game developers, journalists, academics, and critics may end up picking and choosing the meanings behind these words from different sources.

One particularly troublesome word is axonometric.

Axonometry defined

An axonometric (taken from the Ancient Greek roots axon (axis) + metron (measure)) drawing is one in which a rendered object can be measured across all three axes (x axis, y axis, and z axis). The object's axes are not parallel and not orthogonal to the projection plane, allowing three faces of the object to be seen in the image.

"An axonometric projection usually represents an object so that three adjacent faces are visible, in order to get a three-dimensional representation in one view." from "Planar Geometric Projections and Viewing Transformations" by Ingrid Carlbom and Joseph Paciorek, Computing Surveys, vol. 10, no. 4 (1978) pg. 473

"Axonometric projection is a method of parallel projection in which the axes of the object represented are not parallel to the projective plane in order to represent all three points of views (x, y and z)." from "A New Angle on Parallel Languages" by Audrey Larochelle, GAME: The Italian Journal of Game Studies, vol. 1, no. 2 (2013) pg. 35

Axonometric projection of an object from 3-D space to 2-D screen, from Engineering Drawing for Manufacture by Brian Griffiths (2002), pg. 26

An axonometric drawing is a type of parallel projection in which a 3-D object is transformed into a 2-D image on the projection plane (a.k.a. screen or picture plane or projective plane). This is an affine (from Latin affinis "connected with") transformation, meaning that the angles on the object may differ, but straight lines remain straight and parallel lines remain parallel. Being a parallel projection (or a paraline drawing), lines do not converge and objects do not reduce in size with distance from the projection plane (as seen in perspectival projections (a.k.a. linear projections).

"... allow angles to differ, so long as all straight lines remain straight and all parallels remain parallel. Such transformations are known as 'affine.'" from Drawing Distinctions by Patrick Maynard (2005) pg. 24

"[An] important property of axonometry is its fixed relation between sizes of objects in world space and those on projected space, independent of the positions of the objects in projected space. In linear perspective, objects become smaller when they move farther away; not so in axonometric perspective. This means that you can measure the size of an object of a axonometric drawing and know how big the real object is (you need to know the scale of the drawing and the properties of the projection, but nothing else), something that cannot be done with linear perspective. This leads to the name of the projection: the word 'axonometry' means 'measurable from the axes.'" from "Axonometric Projections - A Technical Overview" by Thiadmer Riemersma (2009)

Testing the Definition

So far, so good. The above defining qualities are valid for any use of the word "axonometric" with regard to rendering an object to a 2-D surface. Well, almost any use, that is:

"3/4 view" here classified as "axonometric," even though it only shows two faces of an object, from "Game Developer's Guide to Graphic Projections, Part 1" by Matej Jan (2017)

Other than that previous exception, axonometric always means a parallel projection in which all three main faces of an object can be seen in one image.

Now, how axonometric renderings developed through history?

Next blog post...