don't click here

An Introduction to the basics of stage art in 2D Sonic games

MrLevRocks

Old, useless, bitter... Do I need to say more?
Aug 29, 2017
9
23
78
Deutschland
mrlevrocks.deviantart.com
Preface

This is a guide initially written for the Sonic Help Zone, a website owned by PVic, by me, MrLevRocks, upon his request. Due to change of plans, I shall post it here instead and it will be linked to from there. This is not a full tutorial or an end-all guide to Sonic art, but rather just pointers to things to try and avoid, most of which are usually beginner mistakes. I wish also to apologize for the formatting, the text was written with HTML in mind, BBCode is a little more limited than that.

Making a 2D Sonic game is tough, no doubt, but it shouldn't be done shabby. Having seen a large amount of Sonic fan games of varying quality in my time, I want to use this page to showcase the most common visual issues I see with them and what differs an ugly fan game from a visually appealing and interesting one.


Technical Foundations

Before we begin, I want to start with the basics. Generally, a stage is made out of 2 distinct parts, the background and the foreground, both of which I will seperately elaborate upon.
Traditionally, stages are made of tiles, placeable square graphics that can be reused. They come in various sizes, the most common ones are 16x16 (Sonic Mania), 128x128 (Sonic 2 and Sonic 3) and 256x256 (Sonic 1 and Sonic CD), for the purposes of this guide, we will be using 128x128 large tiles but you can pick any size you like. Generally, the smaller the tiles, the more variability you have when making stages, but the more tiles you need to place when creating a stage. I, myself, like to use 64x64 or 128x128 large tiles.
For ease of making it, each tile is made of sub-tiles. These are very small (usually 16x16 or smaller) images that can be repeated over and over to make the bigger tiles with. A small amount of sub-tiles is enough to create a large amount of varying tiles with.
Tiles were used in classic games due to their reusability. Instead of having to define a single image that is the stage, you define a grid of information that looks up what tile goes where. Despite technology having improved since 1989, there still are advantages to using a tile set to define stage graphics, rather than manually make each stage a single image.
This is a tile set. It includes an amount of unique tiles laid out on a square grid. This tileset in particular includes the most basic tiles with tops and edges and some slopes. This graphic can be imported into most modern game development programs and used to build a stage from. When importing, do make sure you have the values set up correctly, else your tileset will be read incorrectly.

The Basics of Tiling

The most basic thing you can look out for when creating a tile, is to make it loopable. This is a state in which the pattern in the graphic can be repeated without creating a seam, a line in which the border from one tile to another can be seen. A good way to avoid that is to pick a pattern that is a power of 2 in size, thus it can be repeated over and over without breaks.

Here, on the left top you can see a tile. It looks to be good, right? Well, if we extend it to 128x128 pixels in size and then loop it, you may see an issue.
Looking into it, the basic pattern is made of sub-tiles of 40x20 pixels in size, neither of these numbers are powers of 2, thus it does loop, but not at a nice value that makes it appealing to use as a pattern for Sonic stage tile sets.
Not all is lost, however, as the pattern, with a little adjustment, can be turned into a single sub-tile of 32x16 pixels in size, thus, repeating it, it fits a tile perfectly. When planning a stage, taking care that the basic pattern fits such values, can help you in the long run make your game appear a lot more pleasant.



Edges and other Structure Elements

Without edges, a stage looks flat. Take a look at both these screenshots and tell me which you think looks nicer?

Obviously, the one on the right has more depth to it and thus appears more pleasant to the eye and more sensible to the brain. This effect is achieved by shading and editing the ends of a tileset (the individual sub-tiles, if you'd like) to appear like they would in 3D space. This can take many forms, depending on light source, ground shape, pattern, envionment etc.
Remember to include edges in your tile set to (at least) end platforms with. These edge subtiles can however be used in more than just edges, e.g. Green Hill Zone uses them to create intendated level sections for visual variation, which leads us into...

Variation

Making a stage look good takes more than just the basics. Without variation in the tiles and the placement of the decorations, even a well-made stage can look bland.
This is a screenshot of Green Hill Zone of Sonic 1 that has been digitally edited as to remove all the indentations in the ground, with the original below. They're only decorative, aren't they, they serve no purpose. Yet, having them removed, you can see how boring the stage looks, with its repeated checkerboard pattern dominating the screen. Despite not coming into play at any time, the indentations help breaking up the ground and making it more appealing (and bearable) to look at.
When designing a stage, make sure to allow for variation to occur by adding detail to the tileset or decorations. This can reach from adding anti-aliasing (AA) to the graphics to adding more detail and texture to the tiles and assets. Which parts need what detail is up to you to decide.

Decorations

The edges are what give a stage structure but decorations are what give it life. Decorations are graphical elements that (usually) serve no practical purpose and cannot be interacted with, but look nice.

In this example, bushes and other plant life is used to give the stage a vivid and breathing feel, but other stage themes allow other decorations to exist, e.g. a city stage could have street signs and street lights as a decorative objects.
When placing decorations however, take care as not too overdo it, else it can make the stage look noisy, blurry and/or hard to make out, which is something you want to avoid as much as you can.

In this overdone example it's hard to tell what lies on what layer, i.e. what Sonic might walk in front of or behind. Additionally, by adding this amount of decoration, the stage begins looking regular again, which is something you would (generally) want to avoid when placing decorations, their purpose is to add further variety to the stage.

Background

A stage without a background is only half a stage, so here's some tips on how to bring out the best of your backgrounds.
Bring some life into your backgrounds! A stage is an environment and few environments exist on their own. A boring background appears flat and lifeless, so add some things to it that give it a bit of depth and define the environment around/behind the stage a bit better.
Here is a background. It's serviceable, using a single line of mountains and clouds to give the stage a bit more detail. When put into a possible screenshot, we realize that it looks a little bit empty, especially around the bottom parts of it. However, a few bushes and water would give it some depth, so simply adding those (with their colours adjusted) already makes the background appear a lot more lively.

Use parallax! I'm not talking about the Green Lantern villain, but the idea of differently scrolling layers. The most basic form of that is to have a single layer of background that scrolls at a different rate. However, using a static image as a background (usually) looks lifeless and flat, so if you want to bring life into your stage, split the background up into as many layers as you fancy. However, to be practical, I advise not to use more layers than would be needed, I usually got around with 8 distinct layers or less and could have probably simplified them further.

Advanced tips

There are many things that can be done to improve upon your art further. These include animated stage and background elements, working with colour palettes to achieve stylization and greater control over the stage's looks, better backgrounds, using layers to your advantage and more, but this guide would become too long listing them all. I might follow up this guide with one featuring more advanced tips and tricks but for now, I wish you good luck.

Credits

The assets used in this tutorial were made by MrLevRocks, edited from souptaels' and PVic's work, using assets taken from Sonic 1, Sonic CD and Sonic 3, ripped by SonicDash57, Sonic Level Creator ripped by Techokami and Sonic 2's Sonic sprites ripped by Yawackhary. The Green Hill screenshot is from SonicZone0.
 
Last edited: