Create a 2D Game

Introduction: Create a 2D Game

Tired of playing games? Why don't you make a game?

This instructable walks you through how to make a completely Simple 2D Game ...

We will Use Unity Game Engine to design and create our 2D Game... and also use Microsoft Visual Studio to Program and Create Some scripts.

Supplies

1- Unity Game Engine

2- Microsoft Visual Studio

Step 1: Download Unity Game Engine & Microsoft Visual Studio

To Create & Program our Game we need a Game Engine ("Unity") & Visual studio... So let's download them first:

1-Use This Link… or Search for “download Unity Hub”... To download “Unity Hub” first

3- Then use this Link… To download “Unity”

4- Choose a Unity version, Then Click on “Download(Win)” -> ”Unity installer”

Make Sure to Check on Unity & Microsoft Visual Studio Community 2019 as shown up in the second Picture

Step 2: Create New Project & Import New Assets

After Downloading "Unity Hub", "Unity" & "Microsoft Visual Studio Community 2019"... let's START

1- Open "Unity"... Then, it will automatically Run "Unity Hub"

2- Now we need to create new Project... Click on "NEW"

3- Choose 2D Template, Write your Project Name & Choose a suitable Location to your Project

4- Click on "Create"

After Clicking on "Create" Unity will Runs...

Now we need to Add Our Character, Background & Objects...

If you haven't any Thing to add... you can visit This Link, To Download Assets which you will need it.

And Now we want to add The Assets to Unity... To make this:

Simply you can Drag the Folder and Drop it on the Project Window in Unity.

OR

1- Go to Unity & Right click on Clear space in the "Project" window as shown in the second Picture

2- Choose the Background, Character & Objects that you Want to add from the Folder.

Step 3: Add Your Assets to the Scene

If you add any Thing to the Scene Window... it will appear in the Game window

To know more about Unity's Windows you can Visit This Link...

as you see in the first Picture there are a White Box in the Scene window and This is the box of the Camera... So any thing inside this Box, the camera will Display it.

Now let us first add the Background to the Scene Window...

1- Simply Drag the Background Image from the Project Window and drop it inside the Scene Window

and make sure the image fit the box of the Camera

you can edit any image Size by choosing the Rect Tool from Toolbar as shown in the Third Picture.

also add the objects and your Character that you want to the Scene... as Shown in the Last Image.

Step 4: Add Some Physics to the Character

Firstly, to test or Play your Game click on Play button in the Toolbar...

If you Play your Game now... the Character is not moving, there are no Gravity... every thing is static...

to add all Physics properties to our Character... we use theRigidbody2D Property This Property allow you to edit the Gravity Force, Weight, Mass & others...

So let's Add it to our Character...

1- Choose Your Character from Hierarchy

2- Go to the Inspector window press on "Add Component"

3- Search for Rigidbody2D

4- Choose it.

If you Play now.... Our Character is falling down Due to the gravity :D

Step 5: Add Collision to Our Character

Now we need to add Collider2D property to allow the Character collides with the Ground and other Objects...

To make that...We first need to add this property to our character and any other object that needs to collide with it.

First, let's add it in the Character...

1- Choose Your Character from Hierarchy

2- Go to the Inspector window press on "Add Component"

3- Search for BoxCollider2D

4- Choose it.

5- Click on the Box "Edit Collider" from the BoxCollider2D which appears in the Inspector, To be able to Resize the Green box that appears in the Scene

6- Drag one of the Green points That appears in the Green box to fit the Character



Second, let's add it to the Ground (Do the Same Steps)...

1- Choose Your Character from Hierarchy
2- Go to the Inspector window press on "Add Component"

3- Search for BoxCollider2D

4- Choose it.

5- Click on the Box "Edit Collider" from the BoxCollider2D which appears in the Inspector, To be able to Resize the Green box that appears in the Scene

6- Drag one of the Green points That appears in the Green box to fit the Character


Now if you Play the game you will see that the Character Stand on the Ground :>

Step 6: Move Our Character

To Make our Character do any Task, we need first to add to him a Script to tell him what to do...

Unity Uses C# Language... If you want to learn more about it you can visit this Link

So let's Create the script

1- Choose Your Character from Hierarchy

2- Go to the Inspector window press on "Add Component"

3- Write the name of the Script (for example motion)...

4- Click on "New script"

5- Click on "Create and Add"

Now Double tap on it to Edit the Script

6- Delete all Codes that are written automatically

7- Download the Text, Copy it and Past it in your Script (Don't Forget to write You script Name instead of #yourScriptName)

8- if you want to know how to Code this... Visit This Link

9- Save the Script and Go to the Character's Inspector, Look at your script

10- Choose the right and left buttons and set you Speed.

Now if You Play the Game the Character Will Moves... :D

Step 7: Make Our Character Jump

After adding the movement of our Character... now we are ready to make our Character Jumps...

So we need also to Create a new Script which makes our Character Jumps...

1- Choose Your Character from Hierarchy

2- Go to the Inspector window press on "Add Component"

3- Write the name of the Script (for example Jumping)...

4- Click on "New script"

5- Click on "Create and Add"

Before Editing the Jump Script... Let's add first a Layer to the Ground to make Unity know that this object is Ground...

1- Choose the Ground From The Hierarchy

2- Click on "Default" from the "Layer" which is at the Top of the Inspector

3- Choose "Add Layer"

4- Name the layer 8 to "Ground" (As Shown in the Second Picture)

5- Choose the Ground From The Hierarchy again

6- Click on "Default" from the "Layer" which is at the Top of the Inspector

7- Choose "Ground"

That's it... We finally Create a new Layer which is "Ground" and added it to our Ground

Before also Make our Character Jump, we need to make sure that he is touching the ground then, he jumps.

So let's create GroundCheck for our Character...

1- Right click on Your Character from Hierarchy

2- Choose "Create Empty" and Rename it "GroundCheck"

3- Choose the "Move Tool" from the toolbar and move the "GroundCheck" down to the Character base or Shoe (As shown in the Fifth Picture)

After that we are ready to Edit our Jumping Script

1- Open your Jumping Script (From the Project or Inspector)

2- Delete all Codes that are written automatically

3- Download the Text, Copy it and Past it in your Script (Don't Forget to write You script Name instead of #yourScriptName)

if you want to know how we Code this... Visit This Link

4- Save the Script and Go to the Character's Inspector, Look at your script (as Shown in the Sixth Image)

5- Set your Jump Force, add the "GroundCheck" to the Ground Check Point (by dragging it and drop it on the rectangle Box), Set your Ground Radius (For Example 0.1), Choose the Ground Layer "Ground" & Finally choose the Jump Button.

If you play the Game now.... He walks & Jumps... Hurraaaaay :)

Step 8: Animate the Character

After Making our Character Move & Jump... let's Animate him... It will make him looks very cool...

you need first a Sprite Image of Idling and Walking and Jumping (as Shown From first to fourth Pictures)

To animate the Character you need to work on Animation Window & Animator Window and in default the interface of Unity you don't displaying These Windows... to Get them:

1- Click on Ctrl+6 to get Animation window

2- Choose Window from the top left Drop-down Choices (As shown in the Fifth Picture)

Then, Choose "Animation" -> "Animator" then the two Windows Will open (Animation Window & Animator Window)

Now let's start Animate the Character when it's Idling...

1- Choose Your Character from Hierarchy

2- Click on "Create" Button on the Animation Windows

3- Choose a suitable place to save the animation in it

4- Then Select all Idling Photos from the Project & drag and Drop it in the Animation Window (as Shown in the Sixth Picture)

If you now Play The Character is Idling Wow... Very Cool...

Now let's Make him play Walk animation when he walks...

1- Go to Animation Window click on "New Animation"

2- Choose "Create new Clip"

3- Choose a suitable place to save the animation in it

4- Then Select all Walking Photos from the Project & drag and Drop it in the Animation Window

Now Open the Animator Window

1- Right Click on the Idle Box choose "make Transition" and click on Walk Box (as Shown in the Seventh Picture)

Note: There shouldn't be the Same name of animation Box it depends on what you have name it...

2- Right Click on the Walk Box choose "Make Transition" and click on Idle Box

3- In the Parameters Click on Plus Icon (+) Choose Bool (Name it for example Walk)

4- Choose the arrows that moves from Idle to Walk animation, Go to it'sInspector and set "Has Exit Time" to False, "Fixed Duration" to false, Set "transition Duration" to Zero, and Click on plus (+) That exist inside Condition and Set the "Walk" to "True" (As Shown in the eighth Picture)...

5- Choose the arrows that moves from Walk to Idle animation, Go to it's Inspector and set "Has Exit Time" to False, "Fixed Duration" to false, Set "transition Duration" to Zero, and Click on plus (+) That exist inside Condition and Set the "Walk" to "False"

6- Choose Your Character from Hierarchy

7- Go to the Inspector window press on "Add Component"

8- Write the name of the Script (for example AnimateWalk)...

9- Click on "New script"

10- Click on "Create and Add"

11- Delete all Codes that are written automatically

12- Download the Text, Copy it and Past it in your Script (Don't Forget to write You script Name instead of #yourScriptName, your motion Script Name instead of #YourMotionScriptName & also your Jumping Script Name instead of #YourJumpingScriptName, and Write Your Bool name instead of "Walk" That you created inside the Parameters in the Animator)

13- Save the Script and Go to the Character's Inspector, Look at your script

14- Drag your Character and Drop it inside the "Insertyour Motion Script" & "Insertyour Jump Script"


If you Play the Game now, The player is Idling and win he moves the Run Animation play... Cool :>

Now let's Make him play Jump animation when he Jumps...

1- Go to Animation Window click on "New Animation"

2- Choose "Create new Clip"

3- Choose a suitable place to save the animation in it

4- Then Select all Jumping Photos from the Project & drag and Drop it in the Animation Window

Now Open the Animator Window

1- Right Click on the Idle Box choose "make Transition" and click on Jump Box (as Shown in the Ninth Picture)

2- Right Click on the Jump Box choose "Make Transition" and click on Run Box

3- In the Parameters Click on Plus Icon (+) Choose Bool (Name it for example Jump)

4- Choose the arrows that moves from Idle to Jump animation, Go to it's Inspector and set "Has Exit Time" to False, "Fixed Duration" to false, Set "transition Duration" to Zero, and Click on plus (+) That exist inside Condition and Set the "Jump" to "True" (As Shown in the Tenth Picture)...

5- Choose the arrows that moves from Jump to Run animation, Go to it's Inspector and set "Has Exit Time" to False, "Fixed Duration" to false, Set "transition Duration" to Zero, and Click on plus (+) That exist inside Condition and Set the "Jump" to "False"

6- Double tap on the Jump animation box From the Animator and set the "Loop Time" to "False"

7- Choose Your Character from Hierarchy

8- Go to the Inspector window press on "Add Component"

9- Write the name of the Script (for example AnimateJump)...

10- Click on "New script"

11- Click on "Create and Add"

12- Delete all Codes that are written automatically

13- Download the Text, Copy it and Past it in your Script(Don't Forget to write You script Name instead of #yourScriptName & also your Jumping Script Name instead of #YourJumpingScriptName, and Write Your Bool name instead of "Walk" That you created inside the Parameters in the Animator)

14- Save the Script and Go to the Character's Inspector,Look at your script

15- Drag your Character and drop it inside the "Insertyour Jump Script"

If you Play your Game now the Player will Idle... Walk... and Jump ...hooohuuu! :D

but he needs to be flipped

Step 9: Flipping Your Character

First you need to add a new Script to Our Character:

1- Choose Your Character from Hierarchy

2- Go to the Inspector window press on "Add Component"

3- Write the name of the Script (for example Flip)...

4- Click on "New script"

5- Click on "Create and Add"

6- Delete all Codes that are written automatically

7- Download the Text, Copy it and Past it in your Script(Don't Forget to write You script Name instead of #yourScriptName & also your Motion Script Name instead of #YourMotionScriptName)

8- Save the Script and Go to the Character's Inspector, Look at your script

9- Drag your Character and drop it inside the "Insertyour Motion Script"

10-Copy your Character's Scale X from the (Transform) at the top of the Inspector and past it at the Scale_X at your script (As Shown in the Second & Third Picture)

11- Copy your Character's Scale Y from the (Transform) at the top of the Inspector and past it at the Scale_Y

Attachments

Step 10: Camera Follow Our Character

This Time you need to add a new Script to Our Camera:

1- Choose Your Camera from Hierarchy

2- Go to the Inspector window press on "Add Component"

3- Write the name of the Script (for example CameraFollow)...

4- Click on "New script"

5- Click on "Create and Add"

6- Delete all Codes that are written automatically

7- Download the Text, Copy it and Past it in your Script (Don't Forget to write You script Name instead of #yourScriptName)

8- Save the Script and Go to the Camera's Inspector, Look at your script 8- Drag your Character and drop it inside the "Target"

You can edit other setting if you want...

to put an edge to the Camera use the offset X & Y

Step 11: Add the Second Player (2 Players) & Camera Follow 2 Players

To make your Game more interesting.... You can make it 2, 3 ,4 ,10, 20.... Players... any Number of players you want... so to do that:

1- Choose Your Character from Hierarchy

2- Duplicate it (Pres on Ctrl + D)

now you added another Character

3- Move it by Move tool and drag it, put it in a suitable Place

4- Now We need to change Control settings so, Go to it's Inspector, Change the Right and Left Button of it's Motion Script

5- Also Change the Jump button...

But now The Camera follow one Player only, to Make it Follow More Than One player we need to add new script to it:

1- Choose Your Camera from Hierarchy
2- Go to the Inspector window press on "Add Component"

3- Write the name of the Script (for example CameraFollowMultipleTarget)...

4- Click on "New script"

5- Click on "Create and Add"

6- Delete all Codes that are written automatically

7- Download the Text, Copy it and Past it in your Script (Don't Forget to write You script Name instead of #yourScriptName)

8- Save the Script and Go to the Camera's Inspector, Look at your script

9- Set the "Target" 2

10- Drag your two Players inside this Target.

Make sure The offset Z of the Camera (-20)

You can Change or set another setting... if you want to make edge to the Camera Edit the Offset X & Y

Step 12: Adding Score and Dead Points

There are Many Great Ideas you can do in your Game, But The Most simple Idea is to create a simple Score Area if one of the Characters reach it first he Wins, and There are dead Area if the Player touch it he re-spawn to the Re-spawning Point now...

Let's Make the Score Area first:

1- But the a Ground and the Score object (As Shown in the first Picture)

don't forget to add Box Collider2D to it

Now we need to add to the scoring ground a Script

1- Choose Your scoring ground from Hierarchy

2- Go to the Inspector window press on "Add Component"

3- Write the name of the Script (for example ScoreGround)...

3- Click on "New script" 4- Click on "Create and Add"

5- Delete all Codes that are written automatically

6- Download the Text, Copy it and Past it in your Script (Don't Forget to write You script Name instead of #yourScriptName, & Rename the 2 Players Name instead of "YourPlayer1Name" & "YourPlayer2Name")

7- Save the Script and Go to the Camera's Inspector, Look at your script

We need now to create Text and Restart button

To create a text

1- Click on the Plus (+) in the Hierarchy

2- Choose "UI" -> "Text"

3- Rename the text from the inspector, and Edit it's Color....

4- create 2 Texts one which is for Player one(For Example "Player 1 Wins") and the other for Player 2

Now we nee To create Restart Button

To create a Button
1- Click on the Plus (+) in the Hierarchy

2- Choose "UI" -> "Button"

3- Rename the Button from the inspector, and Edit it's Color....

create only one Button

Now After creating Texts and buttons we need to add them to the Scoring Ground Inspector to do that:

1- Choose Your scoring ground from Hierarchy
2- Go to the Inspector window

3- Look at the script That you have added

4- Drag the Texts and drop it to "Win Text Of Player 1" & "Win Text Of Player 2"

5- Drag the button and Drop it to the "Restart Button"

if you Play now Every Thing Works except the Restart Button

To make it Work

1- Choose the File from the Drop down tools at the top left of Unity...

2- Choose the "Build Settings"

3- Drag your Scene From the Scene folder that found In the Project Window and Drop it in "Scene in Builds"

now Lets add New Script to the Button

4- Choose Your Button from Hierarchy

5- Go to the Inspector window press on "Add Component"

6- Write the name of the Script (for example SceneLoader)...

7- Click on "New script"

8- Click on "Create and Add"

9- Delete all Codes that are written automatically

10- Download the Text, Copy it and Past it in your Script (Don't Forget to write You script Name instead of #yourScriptName)

11- Save the Script go back to Unity

12- Choose Your Button from Hierarchy

13- Go to it's Inspector click on the Plus (+) From the "on Click"

14- drag and drop the bottun to the rectangular box

15- Click on "No function" Choose "SceneLoader" -> "Load Scene"

16- write zero... 0

now If you Play it Works..... Hurray :D

Lets Add The Dead Zone to Make this:

1- Click on Plus (+) on the Hierarchy

2-Choose "Create Empty", and go to it's Inspector

3- Add BoxCollider 2d....

4- Move It down, so when the Player Falls Down He Collids on it

Now Add New Script To this Game Object and Name it for Example DeadZone

5- Download the Text, Copy it and Past it in your Script (Don't Forget to write You script Name instead of #yourScriptName & and Write your Characters Names instead of "yourPlayer1 Name", "YourPlayer2 Name" )

Now Save and return Back to unity

We need to add An Empty Gameobject wich indicate where our Player will Re-Spawns

1- Click on Plus (+) on the Hierarchy

2- Choose "Create Empty"

3- Move the Position to the same Position that you need the players to re-spawn

4- look at The DeadZone Script from the inspector and add the Spawn Point (The Game object That you have created) to it.

If you Play now You will be Impressed :-O

Step 13: Freezing the Rotation

when you Play the Game There is a Bug which is the Character Rotates...

If you annoyed from this Bug... you Can fix it easily:

1- Just Select the Character from the Hierarchy

2- Look at Rigidbody2D from the Inspector

3- Open the "Constrains" and Set "Freeze Rotation" to True

Thats it ;)

Step 14: Creating Main Menu to Your Game

This is how to Create Your Main Menu

Step 15: Publishing and Share

Finally to upload your Game See This Video

Hope You Enjoy... Learn... Have Fum :)

Any Questions Ask me on:

alihefnawey@gmail.com

Toys and Games Challenge

Participated in the
Toys and Games Challenge

Be the First to Share

    Recommendations

    • Retro Tech Challenge

      Retro Tech Challenge
    • Back to School: Student Design Challenge

      Back to School: Student Design Challenge
    • Micro:bit Contest

      Micro:bit Contest

    Comments