Block Breaker – Unity 2D

Game Development

What we are expecting to do?

We are going to make Block Breaker wherein you can be more creative in your own way by
making your own level, make your own blocks, your own background, your own behaviors and
rules.
We are going to discuss Unity Physics Engine, about the collision when two things collide, also
the gravity all those things that are related to physics and physics objects that uses rigid bodies.

We are also adding, particles effects that gives life to most of the games and adding sound effects
and possibly adding music to the game.
The most important thing is we are going to discuss deeper to C#, explaining on how to put those
said effects to the game.

What we are expecting in the Gameplay Screen?

1. Moveable Paddle – move to left and right with the mouse.

2. Ball (to smash!) – need a ball to smash the blocks.
3. Unbreakable Blocks – no damage taken by the ball.
4. Flexible Level Design – wherein you have the control on making the level (ex. you can write
your name).
5. Blocks to smash – we need blocks to smash with the ball.
6. Damage Levels – different representation of damage levels after it breaks.
7. Aspect Ratio – we are using 4:3

Our Core Game Design

Player Experience: Quick Reaction

Core Mechanics: Breaking Blocks
Theme: Blocky, Colorful
Core Game Loop: Smash all blocks without letting ball drop, in order to progress to the next
level.

Export & Import Package

We are going to barrow Number Wizard UI

Downloadable link for Number Wizard UI:

https://drive.google.com/file/d/1UlkdsAi0tYvM6n_N0W32bN1wOYbn0Meb/view?usp=sharing
Steps on exporting Number Wizard UI:
Click 1. Assets > 2. Export Package.

3. Uncheck the following:

• Fonts
• NumberWizard.cs
• Benny Potter.png
• The-Wizard-Of-Aus.png
• TextMesh Pro
 3

Then, Click 4. Export (in lower right)

25,5sada
5. Save it to your Desktop, with file name: NWUI Scene export package then hit 6. Save.

After that close it , then open Unity Hub. Click 7. New > 8. Rename your Project Name (Block
Breaker > 9. Set location > 10. Template 2D > 11. Create Project

8
10

11
Click 12. Assets > 13. Import Package > 14. Custom Package

12

13 14
15. Locate NWUI Scene export package & double click on that

15

16. Click Import to import all

16
 Click 17. Scenes > 18. Start Menu > 19. Import TMP Essentials

19

18

17

After that close the TMP Importer tab, then 19. Double-Click on Canvas

19

20. Click Wizard Rick and press Delete

20
 Click 21. Start Button > 22. Start Text > 23. Font Settings > 24. Double click on Liberation Sans
SDF

21 22

23

24
25. Then after that, do the same thing on the Quit Button

25

26. Double Click the Win Screen > 27. Click White Image then press Delete

27

26
27. Change the aspect ration by clicking the canvas > 28. Reference Resolution make the X =
1440 & Y = 1080

27

28

29. Click Game > 30. 4:3 Ratio to change the Game aspect Ratio
29

30
31. Go to scene and move the Start Button, Quit Button and Intro Text to the center.

32. Change the text by Block Breaker and Change the font size

32. Press Ctrl + Shift + B to open Build Settings

33. Drag all the scenes to the Build Settings then 34. Right-Click Sample Scene > Remove
Selection then close that window.

34

33

34. Rename Core Game to Level 1

35. delete SampleScene
36. Rename Win Screen to Game Over

34 35 36
37. Go to scene Level 1, then change the Canvas > 38. Reference Resolution X= 1440 Y=1080

37

38

39. Delete the Higher Button, Lower Button, Heading Text and Guest Background.

39
40. Move the Success button to the lower Right > 41. Change the Correct Text to Next Level.

41
40

42. Delete Background and Dialogue Text

42
43. Go to Game Over scene > 44. change the canvas resolution to X=1440, Y=1080

44
43

45. Move the Play Again button and Text to the Center, 46. then change the text to Game Over!
with 47. font size 120

45

46

47
 48. Change the Well Done Text to Game Over Text

48

Steps on making World Units & Play Space:

1.On scene Level 1 delete Gameplay > 2. Create New folder on Assets folder and name it
“Sprites”

1
2

3. Download Block Breaker Starting Assets :

https://drive.google.com/file/d/1NBgETCbHEW_I6rQmA8i18G928cuYOCEG/view?usp=sharin
g
4. Drag all the Block Breaker Starting Assets to Sprites

4
 5. Click on Main Camera > 6. Projection: Orthographic > 7. Size: 6
5

6 7

8. Drag in the Blue Rocket Background to the scene > 9. Select the Blue Rocket Background
Sprite > 10. Click on Sprite Editor

10

9
8

11. Select Pivot: Bottom Left > 12. Once it done, hit apply > 13. Move the camera direct to the
Blue Rocket Background > 14. Click Blue Rocket BG Sprite > 15. Make Pixels Per Unit: 90 &
hit Apply

12
15
13

14

11
 15. Select Blue Rocket BG > 16. Change the Position Z to 5

16
15

17. Drag in the Paddle, Ball, Block Square to the Scene > 18. Select the Paddle and make the
Pixels Per Unit to 128 then Hit apply > 19. Select the Ball and make the Pixels Per Unit to 256
then Hit apply > 20. Select the Block Square and make the Pixels Per Unit to 256 then Hit apply

19
18

17

20
Steps on making Rigid Body:
1.Click on Ball, then Add Component > Search Rigid Body 2D then Select it > 2. Add
Component > Search Circle Collider 2D

3. Click the Edit Collider > 4. Adjust the Points exactly to the Ball > 5. Add Box Collider 2D to
the Block

3 4
Steps on adding Unity Physics Material:
1. Click the Paddle, then Add Component > Search Polygon Collider 2D then Select it > 2. Edit
Collider to fit exactly to the paddle

2
1

3. Create new folder (Materials) > 4. Create > 5. Physical Material 2D > 6. Name it Bounce.

7. Click the Bounce Physical Material 2D and bounciness: 1

7
 8. Click the ball, and check the Freeze Rotation Z. > 9. Right Click and Create Empty > 10.
rename it to Lose Collider >11. Reset the transform

10
11

9
8

12. Add Box Collider 2D Component, then edit the Collider > 13. Check the “Is trigger” > 14.
Add new script and name it LoseCollider > 15. Move the LoseCollider script to the Scripts
Folder

12
14
2
12 13
15

16. Double-Click the LoseCollider Script and type the code for on trigger game over.

16
When the ball 2
touches the lose
collider, the
scene will lead to
Game over scene
Linking mouse to paddle in order to move the paddle using the mouse
1.Add new script component to the paddle, then name it Paddle then drag it to the Script folder.

2. Double-Click on the Paddle Script and write the code on making it to move using mouse

The position of the mouse is linked to

the paddle, moving in X axis.

The MathF.Clamp, is needed in order

the paddle stop going off the screen

3. You can also change the limit and max of the X axis in the Paddle Script when you click on
the paddle.

16
2
Sticking the ball to the paddle while it moves and ready to shoot
1.Create new component script and name it “ball”, then drag it to the Script Folder.

This would be the representation; the ball must follow the paddle when it moves
 2. Double-Click the Ball Script, then write the code enabling the ball to stick with the paddle

Here is the first

part of the code
wherein the ball is
being connected to
the paddle.

Update is called
once per frame so
that there would
be no overlapping
scenario.

Next is we are going to add the “Launch the Ball Process”

1.Highlight the code under the Void Update then, > 2. right-click and press “Quick Action and
Refactorings...” > 3. Extract Method
2

1
 4. Write the LockBallToPaddle(); and LaunchOnMouseClick(); > 5. Highlight
LaunchOnMouseClick > 6. right-click and press “Quick Action and Refactorings...” > 7.
Generate Method… 6

4
5

8. Delete “throw new NotImplementedException();

8
 9. Write the code inside the private void LaunchOnMouseClick()

10. Add the code in below the state > 11. Add the code under the void Update > 12. Add another
line: hasStarted = true;
11
10

12
 Play Space and Gravity

1. Right-Click > 2. Create Empty Object and Name it “Play Space” > 3. Drag the Blue Rocket
BG and Lose Collider inside the Play Space. > 4. Create Empty inside the Play Space and Name
it “Left Wall > 5. Add Box Collider 2D to the Left Wall.

5
6. Adjust the Position of the Left Wall > 7. Change the Size Y to 12 > 8. Copy the wall and make
Top wall and Right wall > 9. Adjust it like in the picture with no gaps

8
 10. Change the overall gravity, Edit > 11. Project Settings > 12. Physics 2D > 13. Gravity X = 0
Y= 0

10

13

11

12
 Destroy Game Object
1.Make the Block 128 Pixels Per Unit > 2. Click the Color > 3. Select Dark Orange – Red > 4.
Create new component script and name it Block and Drag the Block Script to Script Folder

2
1

5. Double Click on the script, and erase all the void start and void update > 6. Type now the code
for Destroy (gameObject).

5 6

Destroy
(gameObject) is
used to destroy
Game Object for
ex. block, When
the ball collides to
the block, it will be
destroyed.
 Using Prefabs in Unity

1.Create new folder and name it Prefabs > 2. Drag the Block into the Prefabs > 3. Place the
Block from prefab to the scene > 4. Create Empty and name it blocks > 5. Place all the blocks
inside the Created Empty with name Blocks. > 6. Once you change one of the blocks, it will
change all of the prefab block.

1 2

6
7. You can now make your own tiles of blocks depending on your creativity for example is this,
Writing name Rick in the blocks.

Making Second Level

1. Drag all the objects in the scene to the prefab (Ball, EventSystem, Game Camera, Canvas,
Paddle, Play Space and Scene Loader) to make it all Prefabs
1
2. Go to Game Over scene and delete the Scene Loader, then place the Scene Loader in the
Prefab to the scene. > 3. Click the Play Again Button and Drag the Scene Loader to the On
Click function > 4. Click No Function > 5. Scene Loader > 6. LoadStartScene()

6 4

5
7. Go to Start Menu Scene, Delete the Scene Loader and Place the Scene Loader from Prefab. >
8. Click the Start Button and drag the Scene Loader to the On Click () > 9. No Function > Scene
Loader > LoadNextScene()

8
7

10. Go make another Scene and Rename it to Level 2 and place all the assets from prefab same
in the First Level and test your creativity to make your own design for the blocks > 11. Adjust
the friction of the ball, Go to Material > Bounce and change the value of Friction to 0

10
11
 GetComponent To Play Audio

Need To Download
Simple SFX Downloadable Link:
https://drive.google.com/file/d/1XnMnNUZwOczfOqyknTdH_9mdP1mPWiKD/view?usp=shari
ng

After you download it, proceed to the steps

1.Click the ball, add new component > Audio Source > 2. Create new folder and name it
“Audio” > 3. Drag all the downloaded SFX from the link above to the Audio folder > 4. Click
the audio selector from AudioClip > Select SFX_Click. > Uncheck Play on Awake

4
 5. Open the Ball Script, and add the code for the sound effects.

OnCollisionEnter2D –
when the ball collide
it will GetComponent
and Play the sound
effect in the Audio
Source of the Ball

If (hasStarted) –

It only plays the

sound if the player
starts to hit the ball

6. Create new empty object and name it “Level” > Drag to prefab folder to make it prefab > 7.
Add new component script and name it “Level” > drag it to the script folder and Open it.

7
8. Type the code for counting every block to know if all the block is already removed or
destroyed > 9. Proceed to the Block Script and type all of the updated codes for the block

9
 If you click the Level Object, you can see in the right side there would be “Breakable
Blocks” counts while the game starting. If the Breakable Blocks reach 0, the next Level should
start

Win the Level & Load

1.Open the Level Script > Update the code to detect if the blocks reach 0 it will proceed to the
next level > 2. Add level.BlockDestroyed(); to the Block Script

2
1
 3. Go to File > Build Settings > 4. Add Open Scenes (to add the Scene Level 2) > 5. Drag the
Scenes/Level 2 below the Scenes/Level > 6. Drag the Scene Loader script into the Level Object
component.

3
5

4
 Using Time.timeScale to change the Game Speed of the Game

1.Create new Empty Object and name it “Game Status” > make new Script Component and
name it “GameStatus”, put it to the Scripts folder > 2. Open it, put the code to manage the game
speed. > 3. Prefab Game Status.

if you encounter error, you must update all of your scene level with the prefab.

2 3

Range is for the slider

and limit the value of the
float

Time.timeScale is for the

speed of all inside the
scene

Because of this you can

now manage the game
speed of each level,
easy=slow hard = fast to
challenge the players for
every level.
 Add Player Score
1.Open the GameStatus Script, type the codes for the score once you’re done, you will see in the
inspector while the Game Status is selected > 2. Open the Block Script and update it to add to
score when the block is hit by the ball

You can now change your

points per blocks destroyed
in the inspector of the
Game Status, and you can
see the current score for
the destroyed blocks
You can now update it to
your other levels.
2

The Current
Score is now
adding once you
hit or destroyed
a block, it will
be used to
display the
player score
 Display Player Score
1.Right Click on Game Canvas > UI > TextMeshPro-Text > 2. Change Name Text to Score Text
> Move it to the top right corner > 3. Text input to 1234567890 > 4. New folder and name it
“Fonts” > 5. Go to Dafont.com and download Retro font, unzip it and paste to Font’s folder > 6.
Drag in the retro font to the font asset.

2
1

6
7. Open the GameStatus.cs, write down the codes to string the current score to the score text. > 8.
Copy and paste it inside the AddToScore() to show the score in the game. > 9. Lastly, click the
Game Status and drag the Score Text to the Score Text (Text Mesh Pro UGUI) to complete all
the steps.

Don’t forget to update the other level with the Score Text to avoid bugs and error

9
 Reset Game Session
1.Open GameStatus.cs, and write down the code for the ResetGame() > 2. Go to SceneLoader.cs,
write down the next code in order to retain the score after you game over to see what is your
score > 3. Test your game and you will see after you hit a block and gain points, the points that
you’ve got will be retain in order for you to see how many score you gained. > 4. Renaming
Class, go to Gamestatus.cs, Right click GameStatus > 5. Type GameSession and hit Enter/Apply
> 6. Also rename the file in the Script Folder, just right click GameStatus.cs and click rename
and type GameSession > 7. Proceed to Prefab and update the GameStatus to GameSession.

2
1

6
7
 Making Particle Effects! (Instantiate GameObject)
Need To Download
Impact VFX Downloadable Link: https://drive.google.com/file/d/1DH2BUts-
XRBbl1hKiYQ4by1TgpbMs-Ps/view?usp=sharing

1.After you download the Impact VFX, unzip it and drag the Impact VFX package in the Prefab
folder and click Import. > 2. Open now the Block.cs or Block Script, we are going to type a new
SerializeField > 3. Under the DestroyBlock() type in the code for TriggerSparklesVFX(). > 4.
Select the Block prefab and now drag in the downloaded Impact VFX to the SerializeField. > 5.
In the DestroBlock() type in the TriggerSparklesVFX();

New
1 serializeField
for the block
to drag the
Impact VFX in
the block

Instantiate or
simplest
meaning is to
clone object,
sparkles will
be
instantiated
3 in the position
of the block/s

Destroying
Cloned
Sparkle after
1s
4

When the
Block was
destroyed,
The
5 TriggerSparkle
sVFX(); will
activate.
 Using Tags in Unity
1.Select the block on prefab folder > click on the Untagged > Add Tag > “ + Add “ > go add “ Breakable”
and “Unbreakable” tags > 2. Go Duplicate the Block and Rename it to “ Breakable” and Unbreakable > 3.
Select the Breakable Block and tag it Breakable and same in the Unbreakable, tag it Unbreakable.

3
2
 4. Open now the Block.cs, go to void OnCollisionEnter2D and add the if / else statement with
tag. > 5. Rename the level.CountBreakableBlocks to level.countblocks, also add the if / else
statement for tag. > 6. Don’t forget to change the tag for the Unbreakable Blocks to Unbreakable,
and also its color, to easily identify the difference between the Breakable block and Unbreakable
Block.

Count only the

blocks that are
Tag ==
5
4 Breakable, it’s
also for the
score and
If the block is points
Tag ==
Breakable,
then it will be
destroyable

6
 Block Damage Level
1.Open the Block.cs, write down the new SerializeField for the maxHits, and also for the debug
purposes timesHit. > 2. Writing timesHit increment and the if/else statement. > 3. Click the block
and you can now modify the value of config parameters because of the SerializeField code.

SerializeField
for maxHits
so that you
will indicate
1 how many
hit/s does it You can see it
take to be in the
destroyed inspector but
you will not
change the
value of this
because it just
for debug
purposes only

If, else
2 statement – if
the timesHit is
greater than
equal to
maxHits, it will
be Destroy.

3
 Affordance – to know the display of the block if it’s going to break or not,
different sprite to display the different damage levels
1.Go to Block.cs, type new SerializeField for the hitSprites and also the Array for Sprite > 2.
Type now the else to show next hit sprite. > 3. Highlight the ShowNextSprite(); > Right Click >
Refactor to generate new method > 4. Type now the code to get the component and to render the
sprite depending on the array of hit sprites > 5. Duplicate now the Breakable Block and rename it
to “2 Hits Breakable Block” > 6. Click the 2 hits breakable block > size = 1 > click the element >
block broken 2 > max hits = 2 > change the color to orange. > 7. Duplicate it again and rename it
to “3 Hits Breakable Block” > change color to RED > max hits = 3 > Hit Sprites Size = 2 >
Element 0 = Block broken 1 > Element 1 = Block broken 2

1 2

3
4

7
 Make Levels
You can now simply duplicate any of the levels that you’ve made and you must
update the order of the levels in the Build Setting so that there would be no
problem on what next level will go on.

Simply drag
the new
levels and
line them up
accordingly

Examples of Levels
 Once its final, Build the game depending on what platform but for this its for the PC, just press
the Build button, just make sure that all of the scene is lined up correctly according to your game.

Express your Creativity!