informa
8 min read
Blogs

An analysis about identified patterns in classic sidescrolling games

Why in side scrollers games the character must move to the right of the screen? How I was able to play so many different games when I was a kid, without having someone to teach me? This blog post is a study, an attempt to answer those questions.

PART I: Going right

When I was a kid, I wondered, "Why Mario, Sonic, Mega Man, Samus, etc., go to the right of the screen?". 
Today, I would say for the mini-me that, in fact, is not by a mere arbitrary decision that this happens. I believe there is no right answer, but a combination of factors that help explain this fact.

 

The INCREDIBLE and uncontrollable HUMAN WILL: Organization

You, Human! I affirm: You like to organize and sort things! Even you, who's looking around and getting scared about the rat that just jumped out of that pile of dirty clothes, thrown a week, in the dark corner of your room.

In the book Casual Game Design, the author Gregory Trefry purpose us the following scene:


Humans seem to have a natural tendency to sort. Spread an array of different colored paper clips on a conference room table before a meeting, and I bet you by the end of the meeting, a significant portion of those paper clips will be grouped by color or strung into chains. We seem to have an almost subconscious need to produce order from chaos. [1]

No wonder that match-3 games work so well! It follows the same principle. But it is not only about organization and sorting colors that we are crazy about. We also want to organize things to keep balance.

I WANT TO FIX IT!

I WANT TO FIX IT!

We want, by instinct, sort or balance things. Even if this is not the goal.

In the field of Design we know balance as the equal distribution of visual weight. Since our sense of balance is innate as a bilateral creatures, when elements are not balanced the outcome effect is disturbing and unpleasant.

Let's take a look in two types of balance in Design:

Symmetrical Balance - is when an image appears the same on both sides of a central axis:

Symmetrical Balance in Architecture and Decoration

Assymetrical Balance - creates balance, but the images around a central axis are not the same:

Asymmetrical Balance in Art (Piet Mondrian)

The first scene in Mario, Mega Man, Sonic, sidescrollers and platform games is (usually) unbalanced. Look at Mario, lonely, all in red and blue contrasting with the green background, on the left corner of the screen. A perfect bait to your brain to want to find the balance. Just move him to the right!

GO RIGHT!

PHOTOGRAPHY: Techniques and Rule of Thirds

There are several types of shots in film and photography, for example: long shot, close up, pan, tilt, etc... Well used, each of these techniques can help tell a story. Do you remember the murder scene in Psycho? Then remember:

 

Note that, due to censorship of the time, they could not show a murder scene. Alfred Hitchcock used his knowledge of these techniques to only SUGGEST that there was a murder. And we can understand even without him showing us!

There is a technique in photography and cinema known as Rule of Thirds. It works like this: Make two parallel vertical lines and two horizontal parallel lines, equally spaced (in other words, create a tic-tac-toe board).

Roughly speaking, for a good and interesting shot you should position your target at the points where the lines crosses, or, on the top of the lines.

Through the rule of Rule of Thirds and his ability to tell stories, we can understand the following images this way:

The first image tell us: He is going somewhere (objective not reached yet!)While the second one could suggest: He is coming back!

How does this apply in sidescroller games? Well, as seen in The INCREDIBLE and uncontrollable HUMAN WILL topic, Mario begins in the far left corner and by instinct you move Mario to the right. Quite simple!

But there is also another question. The meaning of moving the character to the right is to brave the unknown. It is a meaning of reveal more pieces of the game and, little by little, feel that you're more and more near the end (which is a very good sensation).

Thinking about the meaning of going right, there's a theory designed by Alexandre Wollner that says the Brazilian flag (I'm a Brazilian by the way...) has a big design flaw. In his words:


[...]There exist a strong negative element, which intuitively population assimilates. The white band "Ordem e Progresso" (Order and Progress) is pointing down, as a negative statistic. [2]

Wollner suggests reversing the band vector, to increase the feeling of progress. And is worth remembering that, in Mario, progress means move to the right. By the way, guess what is the vector's trajectory the birds do in Angry Birds?

Let's see other examples. In mathematics, a vector in a Cartesian plane that starts in (0,0) and goes to the right (or up on the Y Axis) will get positive. A timeline starts from the left and will only advance in time by going to the right (as we can see in any Video and Audio software). 

Back to the videogames, in Mario games at the beginning of every stage (or change of scene) the camera will stand still, waiting for the player to move, and only when the character reaches the center of the screen, the camera begins to move along with it. It is a positive feedback saying "THAT'S IT, KEEP GOING, THE CAMERA WILL REVEAL MORE AND MORE OF THE GAME, AND YOU WILL REACH THE END!"

 

PART II: Not reading a manual

After years and more years playing SNES, N64, PS1, PS2, I had my second thought: "How I was able to play so many different games back then, not knowing english or having someone to teach me? Or even without reading a manual!".

 

GESTALT: Colors and shapes

Basically, Gestalt helps people assimilate information and understand the messages being passed through physical, biological, physiological or symbolic entities which together make up a concept, standard or unified configuration that is greater than the sum of its parts.

How does it apply in games? Take a look at the following silhouette of a character.

Focusing the shape, can you tell if this character is an enemy or a hero? Yes? How? If I never told you!?

The pointy part makes us understand as spikes, and we all know: spikes hurts and we don't want to get any closer.

Color is another good factor that can help the player to understand your game. With color contrast you can identify the right path of your level, differentiate enemies from heroes, tell the player what element is good and what is bad.

In this next picture, with colors and shapes, it's possible to identify the enemy, the player, what are the good things, what is background and what is interactive:

Again, in Mario the main character is easily identified: vibrant red and contrasting with his blue jumpsuit. Which also help us identify that Goomba is an enemy. Sober colors, brown and black, eyebrows pointing down, and it's triangle shaped body is almost an arrow showing us the top of his head saying "JUMP HERE!".

 

Also, the first few seconds of the Level Design in Mario suggest to the player he must jump to succeed in the game. How? Check the image below:

Let's keep it briefly and explain pacing in Level Design. Pacing is the rhythm of events being presented to the player.

As the player moves to the right he will face the Question Mark Block. The block catches the player's attention by blinking and having the question mark. This will make the player think "What it's supposed to do? I want to interact with it.", but, Mario begins the stage in his small form, and the ONLY WAY to reach that block is... by jumping.

This creates a message in the player's brain: "Jumping interacts with the game.". Jumping will break blocks, it will kill enemies, it will jump over pits and pipes, it will mount Yoshi.

The first thing that moves that is presented to the player in Mario games (after Mario) are the enemies. As you move to the right, the first element that will appear is an enemy. And the enemy is moving to the LEFT.

 

The CONCLUSION

Well, let's merge all information of this blog post. If going right is a positive feedback, meaning to get closer to the end and reach the objective, and by placing an element going to the opposite direction of your character, against your winning path, with dark colors and eyebrows pointing down, sorry, but this only can mean one thing: It's an enemy. Kill it!

 

References

[1] Trefry, G 2010, Casual Game Design: Designing Play for the Gamer in ALL of Us, Morgan Kaufmann, Burlington

[2] Wollner, A 2003, Design Visual 50 Anos, Cosac & Naify, São Paulo

More information: This article was based on Egoraptor videos, which is a Game and Level Design lesson. 

Latest Jobs

Treyarch

Playa Vista, California
6.20.22
Audio Engineer

Digital Extremes

London, Ontario, Canada
6.20.22
Communications Director

High Moon Studios

Carlsbad, California
6.20.22
Senior Producer

Build a Rocket Boy Games

Edinburgh, Scotland
6.20.22
Lead UI Programmer
More Jobs   

CONNECT WITH US

Register for a
Subscribe to
Follow us

Game Developer Account

Game Developer Newsletter

@gamedevdotcom

Register for a

Game Developer Account

Gain full access to resources (events, white paper, webinars, reports, etc)
Single sign-on to all Informa products

Register
Subscribe to

Game Developer Newsletter

Get daily Game Developer top stories every morning straight into your inbox

Subscribe
Follow us

@gamedevdotcom

Follow us @gamedevdotcom to stay up-to-date with the latest news & insider information about events & more