Starting with the command bar manager, create a C# script called CommandBar in AssetsScripts and replace its contents with the following class definition and properties:

using UnityEngine;
using System.Collections;

public class CommandBar : MonoBehaviour {

  private CommandButton [] commandButtons;

  public float buttonSize = 1.28f;
  public float buttonRows = 1;
  public float buttonColumns = 6;
  public float buttonRowSpacing = 0;
  public float buttonColumnSpacing = 0;

  public Sprite DefaultButtonImage;
  public Sprite SelectedButtonImage;

  private float ScreenHeight;
  private float ScreenWidth;
}

The properties should speak for themselves: an array for the buttons that the bar is managing, settings related to button's positioning, two images to use for the base button backdrops, and finally a couple of properties to manage the screen's real estate that the command bar will be drawn in.

Next, we need a few controlled properties. These will be accessible in the code but not visible in the editor because they are not marked as [SerializeField]:

public int Layer
{
  get { return gameObject.layer; }
}

float Width
{
  get
  {
    return (buttonSize * buttonColumns) + Mathf.Clamp((buttonColumnSpacing * (buttonColumns - 1)), 0, int.MaxValue);
  }
}

float Height
{
  get
  {
    return (buttonSize * buttonRows) + Mathf.Clamp((buttonColumnSpacing * (buttonRows - 1)), 0, int.MaxValue);
  }
}

The preceding code just enables us to discover the layer the command bar is assigned to and ensure any child elements we add can be assigned to the same layer. The remaining expose the calculated width and height for the entire command bar.

If you create a public variable, it will be visible in the code and the editor, for example:

public float myPublicVariable;

If you create a private variable, it will only be visible within the current class in the code, for example:

private float myPrivateVariable;

If you create a variable property with a public property getter (get), it will be visible to any reference in the class but not in the editor, for example:

private float myPrivateVariable;

public float  myPublicProperty
{
  get { return  myPrivateVariable; }
}

The pattern you use is up to you, based on how you need to access/control the property.

You can also customize the visibility of the properties in the editor using the ([SerializeField] and [HideinInspector]} attributes; more information on this will be provided in Chapter 12, Deployment and Beyond, and Appendix, Additional Resources.

To ensure that we can also anchor the command bar to a region on the screen, we will enable it to be placed relative to a fixed position such as top-left and bottom-right. To do this, we will first need a new enum state for all the positions we are going to support. So, create a new script in AssetsScriptsClasses called ScreenPositionAnchorPoint and replace its contents with the following:

public enum ScreenPositionAnchorPoint 
{
    TopLeft,
    TopCenter,
    TopRight,
    MiddleLeft,
    MiddleCenter,
    MiddleRight,
    BottomLeft,
    BottomCenter,
    BottomRight
}

Now returning to the CommandBar script, we can add the following variables to the top of the script to track the desired anchor point on the screen using this new enum:

public bool anchor = true;
public Vector2 anchorOffset = Vector2.zero;
public ScreenPositionAnchorPoint  anchorPoint = ScreenPositionAnchorPoint.BottomCenter;

Then, to work out where exactly on the screen the command bar should be based on this anchor point, we just need a simple helper function. So, add the following to the bottom of the CommandBar script:

Vector2 CalculateAnchorScreenPosition()
{
  Vector2 position = Vector2.zero;

  switch (anchorPoint)
  {
    case ScreenPositionAnchorPoint.BottomLeft:
      position.y = -(ScreenHeight / 2) + Height;
      position.x = -(ScreenWidth / 2) + buttonSize;
      break;

    case ScreenPositionAnchorPoint.BottomCenter:
      position.y = -(ScreenHeight / 2) + Height;
      position.x = -(Width / 2);
      break;

    case ScreenPositionAnchorPoint.BottomRight:
      position.y = -(ScreenHeight / 2) + Height;
      position.x = (ScreenWidth / 2) - Width;
      break;

    case ScreenPositionAnchorPoint.MiddleLeft:
      position.y = (Height / 2);
      position.x = -(ScreenWidth / 2) + buttonSize;
      break;

    case ScreenPositionAnchorPoint.MiddleCenter:
      position.y = (Height / 2);
      position.x = -(Width / 2);
      break;

    case ScreenPositionAnchorPoint.MiddleRight:
      position.y = (Height / 2);
      position.x = (ScreenWidth / 2) - Width;
      break;
    case ScreenPositionAnchorPoint.TopLeft:
      position.y = (ScreenHeight / 2) - Height;
      position.x = -(ScreenWidth / 2) + buttonSize;
      break;

    case ScreenPositionAnchorPoint.TopCenter:
      position.y = (ScreenHeight / 2) - Height;
      position.x = -(Width / 2);
      break;

    case ScreenPositionAnchorPoint.TopRight:
      position.y = (ScreenHeight / 2) - Height;
      position.x = (ScreenWidth / 2) - Width;
      break;
  }
  return anchorOffset + position;
}

With all the settings in place for the command bar, we next need to initialize it. So, add an Awake function as follows:

void Awake()
{
  ScreenHeight = Camera.main.orthographicSize * 2;
  ScreenWidth = ScreenHeight * Screen.width / Screen.height;
}

This simply displays the current screen's size, which will be used to scale the command bar to the screen.

Finally, to complete the initialization, we need to set up the available buttons based on the settings for the command bar. This is done in three parts:

First we need to be able to create a button, so add the following function:

CommandButton CreateButton()
{
  // Create our new game object
  GameObject go = new GameObject("CommandButton");

  // Add components
  go.AddComponent<SpriteRenderer>();
  go.AddComponent<BoxCollider2D>();

  go.transform.parent = transform;

  // Init
  CommandButton button = go.AddComponent<CommandButton>();
  button.Init(this);

  return button;
}

This function performs the following:

Now we have the ability to create buttons; we will also need the ability to re-position them within the command bar. For this, we will add another function:

void InitButtonPositions()
{
  int i = 0;
  float xPos = 0;
  float yPos = 0;

  for (int r = 0; r < buttonRows; ++r)
  {
    xPos = 0;

    for (int c = 0; c < buttonColumns; ++c)
    {
      commandButtons[i].transform.localScale = new Vector3(buttonSize, buttonSize, 0);
      commandButtons[i].transform.localPosition = new Vector3(xPos, yPos, 0);

      i++;
      xPos += buttonSize + buttonColumnSpacing;
    }

    yPos -= buttonSize + buttonRowSpacing;
  }
}

This function will simply loop through all the buttons assigned to the command bar and then scale and position them accordingly. We then have a set of arranged buttons within the command bar according to the row and column settings we configured.

With all the helper functions defined, we can now actually complete the initialization of the CommandBar class. To do this, add the following function:

void InitCommandButtons()
{
  commandButtons = new CommandButton[(int)buttonRows * (int)buttonColumns];

  for (int i = 0; i < commandButtons.Length; i++)
  {
    var newButton = CreateButton();

    if (i < GameState.currentPlayer.Inventory.Count)
    {
      newButton.AddInventoryItem(GameState.currentPlayer.Inventory[i]);
    }

    commandButtons[i] = newButton;

  }

  InitButtonPositions();
}

Here, we simply set up the button array based on the configured rows and columns, and then added a new empty command bar button to each element using the preceding CreateButton function. Once all the buttons have been created, we then use the InitButtonPositions function to position them correctly within the command bar.

Then, if the player has any weapons in their inventory, it will add that item to the button using a simple helper function (which we'll add in the next section).

All that is left is to ensure that the command bar is positioned correctly on the screen according to the anchor point. To do this, we first need another helper function to set the position:

void SetPosition(float x, float y)
{
  transform.position = new Vector3(x, y, 0);
}

We put this in a separate function so that if we need to apply offsets for the CommandBar class for different platforms, we can do it from this central helper instead of doing it throughout the code.

With the new helper in place, we need to replace/add the Update function that will ensure the bar is drawn to the correct portion of the screen's space:

void Update () {
  Vector2 position = Vector2.zero;

  if (anchor)
  {
    position = CalculateAnchorScreenPosition();
  }
  else
  {
    position = transform.position;
  }
  SetPosition(position.x, position.y);
}

With this, each frame simply gets the intended position of the command bar, either from the anchor point or the position set in the editor, and uses our helper function to push it to the correct part of the screen.

Finishing off, we need to call our InitCommandButtons function in the preceding code when the script starts:

void Start () {
  InitCommandButtons();
}

We'll start by defining the CommandButton class, but we won't populate it yet; it's just a placeholder for now until the command bar is complete to manage it. So create a new C# script in AssetsScripts called CommandButton and replace its contents with the following:

using UnityEngine;
using System.Collections;

[RequireComponent(typeof(SpriteRenderer))]
[RequireComponent(typeof(BoxCollider2D))]
public class CommandButton : MonoBehaviour
{
  private CommandBar commandBar;
  public InventoryItem Item;
  bool selected;
}

We have defined a tight reference for the CommandBar class that the button is a child of so that the button knows what is controlling it and they can communicate accordingly. This enables the button to tell the CommandBar class when it is selected, and the CommandBar class will be able to clear its selection, if need be.

We also have a property for InventoryItem as we are going to use this bar to activate items for use in the battle (the player's sword), and lastly, a flag to track whether the button is selected or not.

Next, we'll add the Init function that we called earlier to the CreateButton function:

public void Init(CommandBar commandBar)
{
  this.commandBar = commandBar;
  gameObject.layer  = commandBar.Layer;

  var collider = gameObject.GetComponent<BoxCollider2D>();
  collider.size = new Vector2(1f, 1f);

  var renderer = gameObject.GetComponent<SpriteRenderer>();
  renderer.sprite = commandBar.DefaultButtonImage;
  renderer.sortingLayerName = "GUI";
  renderer.sortingOrder = 5;
}

When initializing the button's contents, we are setting up all the components this object has assigned to it; they are as follows:

So now we can manage what the InventoryItem button is managing; we'll add another function to do this in a controlled way. This is because there is a fair amount of setup required in order for us to display the item on top of the button:

public void AddInventoryItem(InventoryItem item)
{
  this.Item = item;
  var childGO = new GameObject("InventoryItemDisplayImage");
  var renderer = childGO.AddComponent<SpriteRenderer>();
  renderer.sprite = item.Sprite;
  renderer.sortingLayerName = "GUI";
  renderer.sortingOrder = 10;
  renderer.transform.parent = this.transform;
  renderer.transform.localScale *= 4;
}

So when the CommandBar class requests to put InventoryItem in a button, it creates a new empty game object and adds a sprite renderer to it with the relevant settings for it to display. We also keep a reference for the item being displayed so that we can reuse its properties later (like how much damage our sword would bring about).

Open up the Battle scene if you haven't done so already so that we can add the new command bar to the Battle scene. The command bar we have built is part of the battle controller, so we will add the new script to the BattleManager game object as a second script.

So, select the BattleManager game object and either drag the CommandBar script to it, or click on Add Component and navigate to Scripts | Command Bar; the inspector should now look as follows:

Next, we'll need the images for our buttons. In the assets that accompany this title, you will find a button1.png spritesheet that contains four button highlights, as shown in the following screenshot:

Add this to the project in the UI folder under AssetsSprites from the assets included with this title, set Sprite Mode to Multiple, and open up Sprite Editor. Next, use the Grid slicing mode and set both the pixel size settings for X and Y to 128; this gives us a nice 2 x 2 split of the sprite with our four button images as shown in the following screenshot:

Now if we return to the CommandBar script we added to our BattleManager script, we can configure it as shown in the following screenshot:

You can play with these settings if you wish to meet your own style and flavor. If you run the project now, six new buttons will appear floating at the top-right corner of our screen.

public InventoryItem debugItem;

  void Awake()
  {
  #if UNITY_EDITOR
    GameState.currentPlayer.AddinventoryItem(debugItem);
  #endif

To complete the story of the button, we need to add a couple of handlers to let it be clicked; change its selection state, the button's sprite, and a function to safely clear the button's selection state.

First, we'll add the UpdateSelection function to the CommandButton script:

void UpdateSelection()
{
  var renderer = gameObject.GetComponent<SpriteRenderer>();
  renderer.sprite = selected ? commandBar.SelectedButtonImage : commandBar.DefaultButtonImage;
}

Here, we simply get the SpriteRenderer component or the button itself (not its child item) and assign the correct button sprite, either the selected or unselected image configured for the command bar.

Next, we add the ClearSelection function:

public void ClearSelection()
{
  selected = false;
  UpdateSelection();
}

This simply sets the selected state to false and then calls the UpdateSelection function to set the button sprite appropriately.

Finally, we add the OnMouseDown function to react to the BoxCollider2D component we have on the button and receive clicked events:

void OnMouseDown()
{
  if (commandBar.CanSelectButton)
  {
    selected = !selected;
    UpdateSelection();

    commandBar.Selectbutton(selected ? this : null);
  }
}

So now when the user clicks, it will flip the selected state for the button and then call the UpdateSelection function to set the correct button sprite. You will note that this function depends on a property in the CommandBar script that doesn't exist yet. This is there so that if for some reason the command bar is disabled or input is not allowed, then we can ignore any clicks; we'll add this shortly.

Once the user has selected the button, we tell the command bar about it. We then let it manage what happens to the selection after that. We could handle it within the button itself, but this would mean lots of complicated code in this very simple class; it's best to leave it up to the manager. This function doesn't exist yet in the command bar, so let's add it now.

As the command bar manages all the buttons that can be selected and we only want one item to be selected at a time (in the weapon bar at least), we need a way to unselect all the buttons (if the player changes their mind and wants to select another button). The buttons do not know about each other; only the command bar knows about all its children. This might also be used to clear any selections once we move on to a different phase of the battle.

First we need some additional variables and properties to manage what is selected in the command bar, so open up the CommandBar script and add the following variables to the top of the script, just under the existing variables:

private bool canSelectButton = true;
private CommandButton selectedButton;

public bool CanSelectButton
{
  get
  {
    return canSelectButton;
  }
}

Now we can track which button is currently selected.

As we will need a way to clear the current selection (for the enemies turn or the player's next turn) to avoid having to duplicate the code everywhere, we will reuse the ResetSection function to set a new selection if we have one. So let's add the public this function as follows:

public void ResetSelection(CommandButton button)
{
  if (selectedButton != null)
  {
    selectedButton.ClearSelection();
  }
  selectedButton = button;
}

This will simply clear the existing selection if there is one and then track the new selection. If the user has simply cleared their last selection, then this would just be null.

Now we just need to be able to actually select a button, but first we need a few things.

Now that the command bar can select and deselect buttons, we need to be able to tell the BattleManager state that the player has selected a weapon. For this, we'll use messaging as there is no direct relationship between the command bar and the BattleManager state.

First we'll need to beef up the MessagingManager script with a new event we want to publish as we have done previously with the Dialog and UI events.

So, open up the MessagingManager script and add the following:

private List<Action<InventoryItem>> inventorySubscribers = new List<Action<InventoryItem>>();

// Subscribe method for Inventory manager
public void SubscribeInventoryEvent
(Action<InventoryItem> subscriber)
{
  if (inventorySubscribers != null)
  {
    inventorySubscribers.Add(subscriber);
  }
}

// Broadcast method for Inventory manager
public void BroadcastInventoryEvent(InventoryItem itemInUse)
{
  foreach (var subscriber in inventorySubscribers)
  {
    subscriber(itemInUse);
  }
}

// Unsubscribe method for Inventory manager
public void UnSubscribeInventoryEvent(Action<InventoryItem> subscriber)
{
  if (inventorySubscribers != null)
  {
    inventorySubscribers.Remove(subscriber);
  }
}

// Clear subscribers method for Inventory manager
public void ClearAllInventoryEventSubscribers()
{
  if (inventorySubscribers != null)
  {
    inventorySubscribers.Clear();
  }
}

With the message in place, we just need to broadcast this new message when the player selects a button. We will add a new SelectButton method to the CommandBar script to complete the journey, as follows:

public void Selectbutton(CommandButton button)
{
  if (selectedButton != null)
  {
    selectedButton.ClearSelection();
  }
  selectedButton = button;
  if (selectedButton != null)
  {
    MessagingManager.Instance.BroadcastInventoryEvent(selectedButton.Item);
  }
  else
  {
    MessagingManager.Instance.BroadcastInventoryEvent(null);
  }
}

To finish off the CommandBar script while we are updating its messaging, let's also subscribe to the UI event's message and link it to the canSelectbutton variable/property we added earlier.

So, create a new delegate method called SetCanSelectButton:

void SetCanSelectButton(bool state)
{
  canSelectButton = !state;
}

Then, update the Start function in the CommandBar script as follows:

void Start () {
  InitCommandButtons();
  MessagingManager.Instance.SubscribeUIEvent(SetCanSelectButton);
}

Don't forget to unsubscribe the event from it as well when the command bar is destroyed by adding the OnDestroy method:

void OnDestroy()
{
  if (MessagingManager.Instance != null)
  {
    MessagingManager.Instance.UnSubscribeUIEvent(SetCanSelectButton);
  }
}

Now whenever the UI is locked, we ensure that no further button presses are allowed, such as for events when the player has attacked the enemy.

Finally, we return to the BattleManager state and decide what to do with this new weapon the user has selected. First we need a variable to store the selected weapon in, so add the following to the top of the BattleManager script with the rest of the variables:

private InventoryItem selectedWeapon;

Next we need a handler function to store the new selected weapon:

private void InventoryItemSelect(InventoryItem item)
{
  selectedWeapon = item;
}

Then, we have to wire up this function to the event we are broadcasting from the BattleManager state in the Start method:

MessagingManager.Instance.SubscribeInventoryEvent(InventoryItemSelect);

Now we know what the player is fighting with, let's update the UI with some instructions.

So far, when the battle starts in the state machine, an intro is shown and then two seconds later, it is the player's turn; however, at the moment, the player is completely unaware of this, so let's update the OnGUI method in the BattleManager script as follows:

void OnGUI()
{
  switch (currentBattleState)
  {
    case BattleState.Begin_Battle:
      break;
    case BattleState.Intro:
      GUI.Box(new Rect((Screen.width / 2) - 150, 50, 300, 50), "Battle between Player and Goblins");
      break;
    case BattleState.Player_Move:
      if (GUI.Button(new Rect(10, 10, 100, 50), "Run Away"))
      {
        GameState.playerReturningHome = true;
        NavigationManager.NavigateTo("World");
      }

      if (selectedWeapon == null)
      {
        GUI.Box(new Rect((Screen.width / 2) - 50, 10, 100, 50), "Select Weapon");
      }
      break;
    case BattleState.Player_Attack:
      break;
    case BattleState.Change_Control:
      break;
    case BattleState.Enemy_Attack:
      break;
    case BattleState.Battle_Result:
      break;
    default:
      break;
  }
}

In the Intro part, we display a simple message to inform the player about the battle, and when it is the player's turn, we display the Select Weapon message until they have selected one.