Let's start by creating the score counter's label:

Ok, we have our new label. Let's configure it now:

Ok, now that we have our label with its pivot set to the right side, we can add a background sprite that will wrap around it.

Let's add a dark transparent background sprite to make this score counter more visible:

Ok, now let's configure the background's anchor to make sure it wraps around the label:

If you add or remove numbers in the score counter label, you'll see that the background adjusts itself to wrap it accordingly.

We can now add a border to this sprite to have more visible edges.

Let's use the background sprite as a base to create a border sprite:

Great, we now have our score counter. We can now place it where it should be.

Let's make sure it's anchored at the top-right corner of the screen and rotate it slightly:

Now, for the newly attached UIAnchor component of Score:

That's it; we now have our 3D score counter at the top-right corner of the screen! Now, let's see how we can make our score increase when needed.

In order to control the score counter's behavior, we'll create a new ScoreController component that will update the score label when a player's current score is changed.

The score modification feedback must be obvious. We'll make sure it uses a simple scale animation; the score first scales up, increases its value over time, and goes back to its initial scale when it has reached its final value.

First, let's create our new ScoreController component:

Within this new ScoreController.cs script, declare the global variables, as shown in the following snippet:

// We'll need to store the score label
private UILabel label;
// We'll need to separate the displayed score
private int previousScore;
// The private _currentScore value
private int _currentScore;

Also, add a public currentScore variable with a custom setter method in order to make sure that each time the score is changed, the previousScore value is updated and the label's text is refreshed:

// The public currentscore with custom setter
public int currentScore
{
  get
  {
    return _currentScore;
  }
  set
  {
    // Update the previous score to current score
    previousScore = _currentScore;
    // Update the private _currentScore value
    _currentScore = value;
    // Update the label with new score
    UpdateLabel();
  }
}

Now, let's make sure variables are initialized correctly at the start. Replace the default Start() method with the following snippet:

// At start
private void Start ()
{
  // Get the score counter's label
  label = GetComponentInChildren<UILabel>();
  // Set the currentScore value to 0
  currentScore = 0;
}

Now that variables are initialized correctly, we can add the UpdateLabel() method, which is called at the last line of the currentScore getter method:

// Method to update the score label
public void UpdateLabel()

{
  // Launch the coroutine to update the label
  StartCoroutine(UpdateLabelRoutine());
}

The above Updat eLabel() method starts the UpdateLabelRoutine coroutine. Let's add this coroutine, which actually updates the label:

// Coroutine that updates the label
private IEnumerator UpdateLabelRoutine()
{
  // Scale up the score label to 1.2
  UITweener tween =
    TweenScale.Begin(label.gameObject, 0.1f, Vector3.one * 1.2f);
  
  // Wait for the scale tween to finish
  yield return new WaitForSeconds(0.1f);
  
  // Calculate difference between old and new score
  int scoreDelta = currentScore - previousScore;
  
  // While previous score is below current score...
  while(previousScore < currentScore)
  {
    // ...Increase the previousScore value
    previousScore += Mathf.CeilToInt(scoreDelta * Time.deltaTime * 3.5f);
    // Set the label to the previousScore value
    label.text = previousScore.ToString();
    // Wait for next frame
    yield return null;
  }
  
  // When score has reached final score value
  // Update the score label with current score
  label.text = currentScore.ToString();
  
  // Wait a little
  yield return new WaitForSeconds(0.3f);
  // Re-scale down the score label
  TweenScale.Begin(label.gameObject, 0.1f, Vector3.one);
}

The preceding method first scales up the label, increases its value until it reaches the currentScore value, and then scales it back down again.

We can now make sure the score increases when the player brings the power source's correct element. Open the PlayerController.cs script and add this line of code in the UseElement() method just below the targetFeed.Feed() instruction:

// Increase Score
ScoreController.Instance.currentScore += 1000;

Hit Unity's play button. Your score will increase by 1,000 points each time a power feed is fed; for example, if you collect and deliver the lightning element to the lightning power feed.

Ok, great! We are now ready to start working on an in-game pause menu.

First, we need to create a new panel to contain the pause menu's background and border:

We can now create the pause menu's background:

Now, let's add the box's border sprite:

Now that we have a nice yellow border, we can create the title bar.

Let's create the title bar that displays the Pause label:

The title bar's background is set up. Now, let's add the title bar's label:

Ok, good. You should now have a window like this with the following hierarchy:

We can now move on to creating the two pause menu's buttons.

In this section, we'll create the Resume and Exit 3D buttons.

Exit

Follow these steps to create the Exit button based on the Resume button:

1. Select our PauseMenu | Buttons | Resume GameObject.
2. Duplicate it by pressing Ctrl + D.
3. Rename this new duplicate button to Exit.
4. Change the Transform position to {270, -40, 0}.
5. Set the Normal color to {R: 255, G: 180, B: 160, A: 255}.
6. Set the Hover color to {R: 255, G: 85, B: 85, A: 255}.
7. Set the Pressed color to {R: 75, G: 0, B: 0, A: 255}.

We can now update the child label to red, similar to what we did in the background. Execute the following steps:

1. Select our PauseMenu | Buttons | Exit | Label GameObject.
2. Set Text to Exit.
3. Set Color Tint to {R: 255, G: 210, B: 210, A: 255}.

We must now change the icon and make sure it's red too:

1. Select our PauseMenu | Buttons | Exit | Icon GameObject.
2. Change Sprite to Icon_Exit.
3. Set Color Tint to {R: 255, G: 180, B: 180, A: 255}.

Good! Now, let's add a 3D effect to give the impression that our pause menu is displayed on the level's ground:

1. Select our InGame3DUI | PauseMenu GameObject.
2. Change the Transform rotation to {22, 0, 0}.

Great! Our pause menu is now ready. Your Game view and Hierarchy should look like this:

We can now see how to show this pause menu when required.

We need to display the pause menu when the pause button is pressed. Let's do this using an alpha tween to gradually change the pause menu's alpha value.

We'll first add the necessary methods, and then link our buttons to them.

// Method called when pause button is pressed
public void PausePressed()
{
  // Request pause
  SetPause(true);
}

// Method called when resume button is pressed
public void ResumePresssed()
{
  // Request unpause
  SetPause(false);
}

// Method called when Exit button is pressed
public void ExitPressed()
{
  // Request to return to main menu
  ReturnToMenu();
}

// Use this method to return to the main menu
public void ReturnToMenu()
{
  // Unpause the game
  ResumePresssed();
  // Destroy the player instance
  Destroy(PlayerController.Instance);

  Transform mainMenu = null;
  mainMenu = MenuManager.Instance.transform.FindChild("Main");
  if(mainMenu != null)
  {
    // Set the MenuManager | Main scale to 1
    mainMenu.localScale = Vector3.one;
  }
  // Launch the EnterMenu couroutine
StartCoroutine(EnterMenu());
}

// EnterMenu Coroutine
private IEnumerator EnterMenu()
{
  // Show the main menu UI by enabling cam
  MenuManager.Instance.uiCamera.enabled = true;
  // Fade in the UI background
  TweenAlpha.Begin(MenuManager.Instance.background, 0.5f, 1);
  // Wait for the tween to finish
  yield return new WaitForSeconds(0.5f);
  // Load the Menu scene now
  Application.LoadLevel("Menu");  
}

// Use this method to pause / unpause game
public void SetPause(bool state)
{
  // Set the timescale to appropriate value
  Time.timeScale = (state ? 0 : 1);
}

We can add a simple feature; when the player hits the Escape key, the game pauses or resumes. We'll do this using the UIKey Binding component:

You can now hit Unity's play button; you'll see that hitting Escape will pause and resume the game anytime!

Great! We have a slight problem; interactive elements are still active while the game is paused. We need to find a way to easily prevent the player from moving or right-clicking on a power source, or changing the character's destination while the game is paused.

We will create what can be referred to as an interaction override. Here, a trigger collider is placed over our game's interactive elements, which will prevent them from being hit by the interaction raycast of UICamera. Since the 3D UI with NGUI uses the Depth value to check collisions, we should also add the UIWidget component to the interaction override.

We can create it right now for the pause menu:

We now have a box collider and UI Widget on our Override GameObject. Configure them as follows in order to make sure they take up the entire screen:

Good! Hit Unity's play button. When you pause the game, interactive elements such as power sources and the ground become inactive because the raycast of UICamera first touches the collider of Override.

Now that we have our nice 3D pause menu, let's see how we can add a 3D text or sprites directly onto the environment's objects.