Arkandroid: Let’s make a Breakout Game with Unity3D! – Part 1

Since I got to make an Arkanoid style game for my Game Development class, I was thinking “why not do it as a part of the #100DaysCode Challenge which I recently started?”

But instead of just making the game and talk about the progress on Twitter, I could actually do something even better!

Let’s make it together!

So in the next few days, I plan to post in detail how I made -and you can make too!- a simple Arkanoid style game with Unity3D. I’ll be writing these articles while making the game for my class. So if you have any ideas on how it could be improved, let me know in the comments.

Alright! Let’s get started!

Project Setup

First of all, we have to create a new 2D Unity3D Project. And I know, making a 2D project inside a game engine literally named Unity3D is an oxymoron but truth is that Unity3D is great for making 2D games too!

Once we create the project, we should be greeted by the Unity Editor window!

Okay, that’s not too exciting so let’s go ahead and create the folders on which all of our assets and source code will live on.

We will need 3 folders:

  • Scripts
  • Sprites and
  • Prefabs

In order to make a new folder, simply right-click the empty box on the bottom part of the screen, go to “Create” and then select “Folder”. A new folder will be created and you can set the name to whatever you want.

The Project section should now look like this:

Sprites

Next, we are going to need a few sprites to use for things like the paddle, the ball and the blocks. You can download the sprites I’ll be using for this project here.

Unzip the files and place them into the Sprites folder.

Paddle

The paddle is the only control Arkanoid. It is used to bounce the ball onto the blocks and keep it from leaving the screen from the bottom, which is how you lose on this game. Okay, you’ve all played the game before, no need to explain how it works… Let’s make our paddle!

But first…

Arkandroid? I thought the game was called Arkanoid!

And you’d be totally correct! But for this project, we will make the game also work on Android! So let’s change the scene size so it would fit on a normal 9:16 mobile device.

On the game tab click on “Free Aspect”

Then click on the + button on the bottom of the menu and create a new aspect ratio:

Now we will be able to see the game the way it’d look on a mobile device in portrait view.

Ummm, the paddle?

Oh, right, the paddle, the paddle!

Let’s go back to the Scene tab. Now in order to create the paddle, open the Sprites folder and drag-n-drop the paddle sprite on the scene.

Collision

So now that we added the paddle, it’s time to add collision to it. What’s a paddle in a game like that without collision?! The ball would just pass right through and the game would be totally out of control!

After clicking on the newly added paddle, click on the Add Component button on the left and then search for “Box Collision 2D” and click on it.

Cool, now we can know when something collides to the paddle. But the problem is that there won’t be any physics simulation on that object and again, the ball would pass right through the paddle! That’s why we need to add a Rigidbody.

Same with the Box Collider, click on the Add Component button and search for “Rigidbody 2D”. Add to the paddle object.

Oh no! The paddle is gone!

If you click on the Play button to run the game, you will witness the paddle falling out of the scene! Oh no, what a disaster!

Okay, hold on! Let me explain!

When we added the rigidbody to the paddle, what we actually did was adding physics simulation for that object. Which means that now we are also simulating the mass of the object. As a result, the gravitational pull is pulling the object downwards.

But we don’t want that! We want the paddle to stay at the same height at all times, just floating there and being able to move left and right. In order to do that, all we have to do is change the “Gravity Scale” value to 0.

Now if we run the game again, the paddle will stay right where it should. Awesome!

Okay, we are doing some progress but this is still boring. I WANNA PLAY ARKANOID!

Alright, alright!

You’re right, we can’t do much on this game yet. All there is is a paddle on an empty screen, just sitting there, doing nothing! But it doesn’t have to be this way! It’s finally time to change that! It’s time to add some…

Controls

That’s right, we will finally be able to control the paddle! Whooo!

But first, we will need a script. So let’s create one.

On the scripts folder right-click, go to Create and click on “C# Script”.

This will add a new script file to our project. Name it “PaddleController”.

Double-click the file we just created. This should open it in your default editor. I’ll be using Visual Studio.

Get ready for some coding!

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PaddleController : MonoBehaviour {

    [Range(1, 20)]
    public int speed = 5;
    public float moveStep = 0.5f;
    private Rigidbody2D rigidbody = null;

    // Use this for initialization
    void Start () {
        rigidbody = GetComponent<Rigidbody2D>();
    }

    // Update is called once per frame
    void Update () {
        float moveXY = Input.GetAxis("Horizontal");
        float x = moveXY * speed * moveStep;
        rigidbody.velocity = new Vector2(x, 0);
    }
}

Okay, let me explain what is going on here:

  • At first, we created a few variables. These are speed, moveStep and rigidbody. All of them except for rigidbody are public, which means we will be able to change them from the Unity Editor. [Range1, 20)] tells the Editor that speed can take values from 1 to 20. So after we attach the script to the paddle, instead of a text box we will get a slider within that range:Cool, right?
  • speed will determine, well, the speed of the paddle and moveStep the distance the paddle will move for each step.
  • rigidbody is just a variable on which we will store the Rigidbody2D propery of the paddle on the Start() method which is called once the game hass started.
  • The Update() method is called once each frame so that’s a good place to move the paddle (that is if we got any input on that frame). We get the input with Input.GetAxis("Horizontal") and store it to moveXY.
  • Then we calculate the velocity the paddle should have based on the input we got, the set speed of the paddle and the distance we set it to move on each step.
  • Lastly, we set the velocity of the paddle to that value.
    (Note that we only want the paddle to move on the X axis. Vector2() takes two arguments, x and y. So that’s why we only set the x to the value we calculated and the y to 0)

Great, the script is ready! But it’s not gonna be any good if it just lives there, doing nothing! Let’s attach it to the paddle!

Back on Unity, click the paddle. On the right side, on the Inspector, scroll to the bottom and click the Add Component once more. Then search for PaddleController. The script we just created will show up. Click it!

IT’S ALIVE!

Run the game! Use the left-right arrows and…. the paddle is moving! Awesome! 😃

Stay tuned for Part 2!

You can also follow me on Twitter to get updates about new posts and my #100DaysOfCode Challenge!