backyard-dev

About and brief history

In Breakout the player controls a paddle to shoot a ball at bricks which are then destroyed. Depending on the clone/version you play there might be bricks with different colors, powerups etc. It is sometimes considered to be a bit like a singleplayer Pong.

Breakout was created in 1976 by Atari. The creation of the game involved big names like Steve Wozniak and Steve Jobs and the whole story is quite interesting. You should read it: wikipedia

The game was officially ported to several systems and countless unofficial clones exist – like this one 🙂
You surely also know Arkanoid which is one of the more well known clones or “expansions” of the original Breakout.

Plans

Since there are so many different versions of the game I had to do some planning on the features I wanted (to be honest I decided about features during development but I will act as if I did proper planning):

• Diffent Bricks (with different numbers of hits it takes to destroy them)
• PowerUps and PowerDowns
• A design-time level editor
• Multiple levels
• A somewhat realistically moving ball

Breakout was somewhat more complex than the previous Snake and it’s interesting how many bugs you can have in such simple game.
As you can see I again used this cool art style called “Programmer art”:

Challenges

Custom Editor
As stated above I wanted to have a level editor but actually it wasn’t about having that editor – it was about getting into unity editor scripting.
Just to make that clear: This editor is not for the player but for the developer to be used inside unity. I will not talk much about the editor itself but more about how to get something like this started (check out the source code on the project page for implementation details).

Ok, so we want to create levels and we want them to be persisted. We could use something like a text file but we would need to handle saving and loading of our data. Luckily there are Scriptable objects in unity. Scriptable objects are scripts that can be saved and used as an asset and they are automatically persisted as long as everything we put into them is serializable.

Lets have a look at our Level class first.

[System.Serializable]
public class Level
{
    public string name;
    public int width;
    public int height;
    public int levelIndex;
    public int[] levelStructure;
//details omitted
}

The levelStructure array holds the information about the level. A 0 means no block, a 1 means a 1 hp block and so on. You may wonder why I used a one dimensional array instead of a more suitable two dimensional array. This is because unity can not serialize multi dimensional arrays but it can serialize one dimensional ones.

Our scriptable object derives from ScriptableObject and only contains a list of (serializable) levels.

[CreateAssetMenu()]
public class LevelsSO : ScriptableObject {
    public List<Level> levels;
}

Important: It is not so obvious how to save the scriptable object as an asset. To do this we annotate the class with the [CreateAssetMenu()] Attribute. Now inside the project tab (where your scripts, assets etc are) we can right click, chose ‘Create’ and at the top of the list we got our ScriptableObject. Click on that and you got the asset. When you select it you will get the unity default inspector which is not very convenient to actually create levels. Thats why we create a custom Editor.

For that we create a class that derives from EditorWindow.

Inside this class I created the following function which handles the creation of a new EditorWindow.

public class LevelEditor : EditorWindow
{
    public LevelsSO levels;

    private Level selectedLevel;

    [MenuItem("Custom/Level Editor")]
    public static void Init()
    {
        LevelEditor editor = EditorWindow.GetWindow<LevelEditor>("Level Editor");
        editor.minSize = new Vector2(800, 600);
        
    }

    void OnGUI()
    {
[...]

The annotation above the Init() function tells unity to create a new menu item called “Custom” with a child element called “Level Editor”. When you click this in unity the Init() function gets executed.
The LevelEditor class also holds a reference to the scriptableObject asset so that it can save to and load from the asset.

The drawing of the actual level editor happens inside the OnGui() method.

The rest of the editor are simple gui controls, mainly buttons. I will not go into detail here. You can have a look at the source code if you want to know the details.

ToDo’s

There are still some things to do (besides the terrible graphics) but I wanted to move on to the next project.
So for example it would be nice to have some sort of message about powerups/powerdowns. A more serious problem is that the ball can get “glued” to the left or right boundaries and it needs some serious breakout skills to get it off those walls. Additional sounds would have been nice (I’m sure you noticed the awesome ‘beep’ when you destroy a brick and the incredible soundtrack – special thanks to my good friend DJEJ for that track.). The editor is in a very raw state and could use some polish. And so on…

Link

The project page contains everything related to this game. It includes a playable WebGL version as well as a downloadable version for windows. The source code is also provided and can be downloaded.

That’s it for this quickie. Stay tuned for the next one!

About Quickies

Quickies are little game projects (usually clones of classic games) I mainly do as a practice for myself. Besides that I want to write about the challenges the project provided. On the respective project page you can also find playable builds of the game and the complete source code.
I try to do them in a rather short period of time so there might be bugs and rough edges. Please also notice that the source code is not perfect and I usually make some compromises in favor of a faster development time.

About and brief history

I guess I don’t have to say alot about the mechanics of snake. You control a snake within a fixed area and try to collect food. With every food “eaten” the snake grows. If you collide with the level boundaries or the snake itself you lose.

Snake originates from the game Blockade which was developed and published by Gremlin in 1976. It then was cloned and realeased by multiple companies. The first PC version, titled Worm, was programmed in 1978 by Perter Trefonas. (Source: wikipedia)

Creating the initial playable prototype took me about an hour or so. In total I spend something like two to three hours. The game looks pretty ugly I guess (programmer art)…

Challenges

Snake is a pretty simple game of course but there are still some things to consider.

Movement
So the first “problem” was the movement of the snake. How do we make sure that each part of the snake gets the correct position in each frame? My solution was to iterate over each part but backwards. So starting with the last part of the snake, I simply assign the position of it’s predecessor. I iterate over all parts and do exactly the same – always assign the position of the part with index = index – 1. For the head of course there is no predecessor. So the head just get’s moved one unit depending on the user input.

for (int i = parts.Count - 1; i > 0; i--)
{
GameObject prev = parts[i - 1];
parts[i].transform.position = prev.transform.position;
}
parts[0].transform.position += dir;

Growth
The second thing I had to think about was increasing the size of the snake whenever the player collects food. What position do I assign to the new part? This can easily be achieved by calculating the position of last part – the position of the second last and then adding this to the position of the last part.

Vector3 newPos;
[...]
Vector3 diff = lastPart.transform.position - lastPartMinusOne.transform.position;
newPos = lastPart.transform.position + diff;

Link

The project page contains everything related to this game. It includes a playable WebGL version as well as a downloadable version for windows. The source code is also provided and can be downloaded.

That’s it for this quickie. Stay tuned for the next one!