Quickies – Breakout

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”:

Breakout
Breakout

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.

Level editor
Level editor

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!

Leave a Reply

Your email address will not be published. Required fields are marked *