Creating Gameplay UI

Submitted by: 
Operating System: 
Visitors have accessed this post 169 times.

Creating Gameplay UI

Create a GameObject that will hold the image for the background and name it as Background. Then drag all the necessary image to fit the desire image for the background just like as shown below.
tut35

Then duplicate the Background GameObject then adjust x axis to widen the background like this.
tut36

For the Ground GameObject add a Box Collider 2D to make the gameobject stand above the ground.
tut37Note: All the needed Sprites is already included in the sourcecode just locate the file inside the Sprites Directory.

Next create a UI Canvas by going in the menu clicking the GameObject , and UI then select Canvas. Rename the Canvas as Gameplay UI and set the component values as show in the image below.
tut38

After that we will add a buttons to be able to pause the game.

Pause Button
tut39

Gameplay UI – Game Over Panel

We will now create Game Over Panel, this panel will show if the player is already defeated. Create a panel then name it as Game Over Panel Background. And create another panel by just right clicking the GameObject then set its name as Game Over Panel and set the components as shown in the inspector below.

Game Over Panel Background
tut40

Game Over Panel
tut41

Then add a several children (Text, Buttons) for the Game Over Panel. Then set the values of each component as shown below.

Text
tut42

Buttons
tut43

Gameplay UI – Game Win Panel

We will now create Game Win Panel, this panel will show if the player is already won the level. Create a panel then name it as Game Win Panel Background. And create another panel by just right clicking the GameObject then set its name as Game Win Panel and set the components as shown in the inspector below.

Game Win Panel Background
tut44

Game Win Panel
tut45

Then add a several children (Text, Buttons) for the Game Win Panel. Then set the values of each component as shown below.

Text
tut46

Buttons
tut47

Gameplay UI – Pause Panel Panel

We will now create Game Win Panel, this panel will show if the player is already won the level. Create a panel then name it as Pause Panel Background. And create another panel by just right clicking the GameObject then set its name as Pause Panel and set the components as shown in the inspector below.

Pause Panel Panel Background
tut48

Pause Panel Panel
tut49

Then add a several children (Text, Buttons) for the Pause Panel. Then set the values of each component as shown below.

Text
tut50

Buttons
tut51


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.