Board game programming tutorial – Part 2

This is the second part in my tutorial for converting a board game for a touch table using unity.

The first part covered all our reuse code and conventions, setup the project and created a main menu.

This part will build the game and player UIs for a very simple game called “No Thanks!”.

There is a set of videos to go along with this post which show all the steps that I perform in the Unity game builder.

• Part 4 – Game UI
• Part 5 – Coding the game model and UI

I’ve also saved my Unity project at a few points along the way so that you can skip ahead or make sure that your project matches mine.

• NoThanks-MainMenu (steps 1-6 complete)
• NoThanks-UIBuilt (steps 1-10 complete)

Step 7 – Create a player area

Follow along with the video

The player area sits right in front of the player on the screen and contains UI elements to display their pieces/cards/etc and also has controls that player can use to interact with the game.

In “No Thanks!” the player area needs to show how many chips the player has, the cards that they have taken, their current score, and (at the end of the game) what place (1st, 2nd, etc) they got. The player area needs to have controls so that the player can pay a chip or accept the card. It is also nice for the player area to show the player’s chosen color and an indicator that it is their turn to play.

Switch to the GameCanvas by deactivating the MainMenu and activating the GameCanvas. Make a background image like we did for the main menu by adding an Image with the “background” sprite and set it to fill the canvas.

To make the Player Area, I’ll start by making an image with the border_0 sprite the same size as the login area (~600×200). Then I’ll add an image with the chip sprite with a child TextMesh object to display the count. I’ll put that on the left side. Then I’ll add an area to show the cards. That will be on the right side, take up most of the space (~425×128), and have a horizontal layout. Set the “Child Force Expand” to just height and “Control Child Size” to Both. Set the alignment to “Middle Center”.

Next I’ll make a card to go into the card area. I have a card sprite asset to use for the image, and I’ll make the card 96×128. That should be very visible, but leave room for a player to take quite a few cards. I added a “Layout Element” with a preferred width of 96 to the card since I’m planning to add it to a Horizontal Layout.

I’ll put the value of the card in the center and upper left. The center text can be large so that it can be easily seen in the center of the table when players are bidding. The text on the upper left is so that the cards can be packed tightly together while the value is still visible.

Now I’ll make that card a prefab since I’m going to instantiate cards as needed during the game.

I want to group the cards that are part of a sequence together in the player area. To do this, I’m going to set the spacing of the horizontal layout to -68. This will push all the cards together. Then I’ll add a blank “spacer” element between groups of cards.

To make the spacer, simply create an empty object and add the “Layout Element” behavior and set the preferred width to 160.

Add a few cards and spacers to the card region of the player area to see if it looks right:

That is about what I was imagining. Next I want to show they player’s current score. This could just be a couple text elements, but I have plenty of space in this game, so I’m going to also display how the score is calculated. Below the chips and cards I’m going to add a score calculation. It will look something like:

“score: chips – lowest card of sequence 1 – sequence 2 – lowest card of sequence 3 = total”

The “Score” text on the left and the “= -99” text on the right are just TextMesh objects.

The only tricky part of this is to get the numbers for the cards to line up under the card itself, since I’m not manually positioning the cards. To accomplish this, I’ll just add the score text element to the Card object itself. I’ll turn off that text if the card is part of a sequence. Apply the changes to the card prefab after adding the score text.

So now the player area looks like this:

The final steps are to setup the scripting hooks for drawing this area dynamically. I set the “Tag” to “Player”, add the PlayerGUI behavior, remove all the cards and spacers from the card region, and make the area into a Prefab.

Now I copy the player area just like I did with the login area while building the main menu, arranging three pads on the bottom, one on the left and three on the top. I set the position member variable the same way as I did for the main menu.

Step 8 – Create the Player Dialogs

Follow along with the video.

In most games, I use dialogs to request information from the player and to display information that is situational and that I don’t have room for on the main display. I’ll typically make these dialogs draggable so that the player can move them out to show information on the board or player area.

The dialogs are created on the dialogCanvas which keeps them above the rest of the board elements. I normally have a prefab called the playerDialog that has the PlayerDialogGUI behavior attached. When the PlayerAreaGUI initializes, it instantiates the prefab on the “dialogCanvas”. Add the tag “dialogCanvas” and set the “dialogCanvas” Tag to “dialogCanvas”. This tag is how the PlayerGUI script finds the canvas in the scene.

For “No Thanks!” I’ll put the place ribbon and the turn marker in the dialog. The place ribbon is shown at the end of the game. The turn marker will use used to both mark the current player, and as a button to take the current card and chips.

To create the player dialog prefab, make an empty object the same size and position as the player area.  Add the behavior “PlayerDialogGUI” to this object.

The “PlayerDialogGUI” expects a ribbon object and a help dialog object. These are elements that I use in almost every game, so I leave the code to control them in the re-use. This game wont have a help dialog, so simply create an empty object as a child of the playerDialog and assign it to the helpDialog member.

For the ribbon, create an image with a ribbon sprite and position it in a reasonable place. Add the “Draggable” behavior so that the player can move it.

Finally, add another Image object as a child of the PlayerDialog for the turn marker. Use the present sprite. Eventually we will add a button behavior to this object so the player can tap the present icon to accept the current card and chips.

Drag the “playerDialogs” to the prefab directory and then move it down below the visible area of the screen. I leave a copy of the “playerDialogs” out of the way on the screen because I usually have to modify it frequently during development.

Step 9 – Create the Center UI

Follow along with the video.

In the center of the screen I need to show the gift card deck, the current card that players are bidding on and the number of chips already bid.

Create a container for all of these elements. Putting a set of objects into a parent container keeps the hierarchy cleaner and allows you to move and rotate a group of objects together. Make this object 200×175

Create an image object and name it “deck”. Set the sprite to the card back. Set the size to 96×128 (the same size we used for a card in the player area). Set the position and anchor to the upper left (use the ALT key).

Add a TextMesh child of the deck and make it white with a black outline by dragging the outline material that we created while making the title onto the TextMesh behavior. Set the font size as large as possible while still fitting the text “(33)” on the card. Make the text centered on the card.

Drag a card prefab object from the Prefab directory onto the center container. Set its position and anchor to upper right and hide the “scoreNumber” child.

Add an Image object, name it “chips” and give it the Chip sprite. Position it in the bottom right. Give it a child TextMesh object named “count”. Make the text black and large enough to show “22”. Why 22?

I’ll also add a “deck description” element to the center. This will be a TextMesh object positioned in the bottom left with the text “3-35 with 9 cards removed”. This is just a helpful reminder of how we built the deck at the start of the game.

Finally, move the parent object to the center of the screen and set its rotation to -90.

The “drawnCard” child is blue because it is a prefab. I’m using the same card prefab in both the center and in the player areas. If I want to change how the card looks, I can change it in the center and “apply” those changes to the prefab so that the player areas will display it the same way.

Step 10 – Add code to model the game and draw the UI

Follow along with the video.

Now that we have the UI laid out, it is time to add code to draw the UI based on the state of the game.

Game Model

Before I can write code to draw the UI, I need to add code to model the state of the game.

State that we need for “No Thanks!”:

• Game state (state that is non-player specific)
  • The shuffled deck of gift cards
  • The current card being bid on.
  • The number of chips already bid.
• Player state
  • Number of chips remaining.
  • Gift cards taken.

To model this state, I’ll add code to the re-use classes Game.cs and Player.cs

For Game.cs, I’m going to model both the deck of cards and the current card as a single List<int>. The only important thing about a card is its value, so I’m not going to make a class to represent a card. And there is always a card showing, so the first element of the list can be assumed to be the card we are currently bidding on. The number of chips in the center is just another int.

public List<int> GiftDeck = null;
public int NumCenterChips = -1;
public void init()
{
  // Reset any state here. When we undo, all the events are re-executed and the first event will
  // call this function to cleanup the old game state.
  GiftDeck = new List<int>();
  NumCenterChips = 0;
}

For  Player.cs, I’m also going to add a List<int> to represent the cards taken and an integer number of chips remaining. The PlayerGUI is also going to need to draw the total score, so I’ll add a function in the Player to calculate that:

public int NumChips = -1;
public List<int> AcceptedGifts = null;

public Player() {
  NumChips = 0;
  AcceptedGifts = new List<int>();

  for (int i = 0; i < (int)Statistic.NUM_TYPES; ++i)
    Statistics[(Statistic)i] = 0;
}
  public int totalScore()
  {
    int giftTotal = 0;
    int priorGift = -1;
    foreach ( int gift in AcceptedGifts )
    {
      if (gift != priorGift + 1)
        giftTotal += gift;
      priorGift = gift;
    }
    return NumChips - giftTotal;
  }

The totalScore() function assumes that the list of AcceptedGifts is sorted. I’ll also want to draw the cards in sorted order, so I’ll keep the AcceptedGifts list sorted:

public void TakeGift(int gift)
{
  AcceptedGifts.Add(gift);
  AcceptedGifts.Sort();
}

EInitialize

Next, I’ll initialize the game model. This is handled by the EInitialize event which is executed after the game has been created and the players have been added.

For “No Thanks!”, I need to build and shuffle the deck, remove 9 cards (or keep 24) and give the players chips. The number of chips the players get depends on the number of players in the game.

public void initializeModel()
{
  Player startPlayer = PlayerList.Players.GetRandom();
  PlayerList.setOrderToClockwiseWithStartAt(startPlayer);
  Game.theGame.CurrentPlayer = startPlayer;
  Game.theGame.CurrentGameState = Game.GameState.PLAY;

  List<int> allCards = Enumerable.Range(3, 33).ToList();
  allCards.Shuffle();
  Game.theGame.GiftDeck = allCards.Take(24).ToList();
  Game.theGame.NumCenterChips = 0;

  foreach (Player player in PlayerList.Players)
  {
    if (PlayerList.Players.Count == 7)
      player.NumChips = 7;
    else if (PlayerList.Players.Count == 6)
      player.NumChips = 9;
    else
      player.NumChips = 11;
  }
}

Card UI

Since I need to draw cards in both the player area and the main UI, I’ll create a CardGUI class that I can add to the card prefab to handle drawing.

In Unity, create a new script in the Assets/Scripts/gui directory called CardGUI.

This class is going to need to set the three text elements to match the value and will need to hide the “score” text element for some cards.

public class CardGUI : MonoBehaviour {

  public TMPro.TextMeshProUGUI CenterNumber;
  public TMPro.TextMeshProUGUI ULNumber;
  public TMPro.TextMeshProUGUI Score;
  public void draw( int number, bool showScore)
  {
    CenterNumber.text = ULNumber.text = number.ToString();
    Score.text = showScore ? "-" + number : "";
  }
}

Switch back to Unity and add this behavior to the Card in the center. Drag in the three text objects. Hit “apply” to save these changes to the prefab.

Game UI

The GameGUI script is going to need to draw the number of cards in the deck, the number of chips in the center and the card being bid on.
I’ll add those as members of the GameGUI:

  public TMPro.TextMeshProUGUI DeckSizeText;
  public GameObject OfferedChips;
  public CardGUI OfferedGift;

I’m now ready to write the code to draw the center area. I’ll add this to the GameGUI.draw() function:

  public void draw()
  {
    LoadOverlay.SetActive(Game.theGame.CurrentGameState == Game.GameState.LOGIN);
    GameCanvas.SetActive(Game.theGame.CurrentGameState != Game.GameState.LOGIN);

    OfferedChips.GetComponentOnChild<TMPro.TextMeshProUGUI>("count").text = Game.theGame.NumCenterChips.ToString();
    OfferedChips.SetActive(Game.theGame.NumCenterChips > 0);

    DeckSizeText.text = "(" + (Game.theGame.GiftDeck.Count - 1) + ")";

    if ( Game.theGame.GiftDeck.Count > 0 )
    {
      OfferedGift.gameObject.SetActive(true);
      OfferedGift.draw(Game.theGame.GiftDeck[0], false);
    }
    else
      OfferedGift.gameObject.SetActive(false);

    foreach (PlayerGUI pad in theGameGUI.PlayerPads)
    {
      pad.draw();
    }
  }

The function GetComponentOnChild<T>(name) that I use to find the TextMesh child of the chips is a convenient, but error prone way to locate an object in the scene. It saves having to create a variable and drag in each UI element that the script code is going to modify. However, it then constrains the naming and potentially the organization of the hierarchy. If the name of the object doesn’t match, or is changed later, the code will break. Make sure that you use the same name in the script code as you used on the UI.

Switch back to Unity and link up the deck size text, the “chips” image and the “drawnCard” to the members of the GameGUI behavior on the “Control” object. Also add all the “PlayerPad” objects to the GameGUI’s member “Player Pads”. Remember that you can lock the inspector and drag all the objects in at once.

PlayerPad UI

Like the GameGUI, the PlayerGUI will need to modify several UI elements. It is going to need links to the total score text element, the number of chips, the card container and both the card and spacer prefabs.

  public TMPro.TextMeshProUGUI TotalScore;
  public GameObject Chips;
  public GameObject CardPrefab;
  public GameObject SpacerPrefab;
  public Transform CardContainer;

Next I’ll add the custom draw code. I’ll set the color of the Image to the player’s color so that the player area shows their color.
I’ll set both child text elements of the chip to the number of chips (this is the text on the chip itself and the text in the score calculation). I’ll set the total score text to the current score.

Then, the tricky part is to draw the card area. I don’t want to re-draw this region if nothing has changed, so I’ll keep the list of cards that I last drew and if it hasn’t changed, I’ll leave the area alone. However, I’m going to be lazy about how I draw this region when things have changed. I’d really just need to add the new card in the correct location, but I’ll just re-create the whole region. draw() isn’t something that is called every frame. Instead it is just called to update the UI when it changes due to a player action.

  bool _isAnimating = false;
  List<int> _drawnCards = new List<int>();
  public void draw()
  {
    if (_isAnimating) return;
    if (Player == null) return;

    // Set the player area to match the player color
    GetComponent<Image>().color = Player.solidColor();

    foreach (var text in Chips.GetComponentsInChildren<TMPro.TextMeshProUGUI>())
      text.text = Player.NumChips.ToString();

    TotalScore.text = "= "+Player.totalScore();

    if (Player.AcceptedGifts.Count != _drawnCards.Count)
    {
      CardContainer.gameObject.DestroyChildrenImmediate();
      _drawnCards = new List<int>(Player.AcceptedGifts);
      int priorGift = -1;
      foreach (int gift in _drawnCards )
      {
        if ( priorGift != -1 && gift > priorGift+1 )
        {
          GameObject spacer = Instantiate(SpacerPrefab);
          spacer.transform.SetParent(CardContainer, false);
        }
        GameObject card = Instantiate(CardPrefab);
        card.GetComponent<CardGUI>().draw(gift, gift > priorGift + 1);
        card.transform.SetParent(CardContainer, false);

        priorGift = gift;
      }
    }

    DialogGUI.draw();
  }

Switch back to Unity and link up the parts of the player area with the new members that we have created. Also set the “Player Dialog Prefab” by dragging in the “playerDialogs” from the prefab directory. Remember to apply the changes to the prefab.

Player Dialog UI

The re-use code for the PlayerDialogGUI will draw the ribbon when the game state is GAME_OVER, but I need to add code to draw the Gift Icon when it is the player’s turn:

  public GameObject GiftIcon;

  public void draw()
  {
    gameObject.SetActive(true);
    Ribbon.gameObject.SetActive(Game.theGame.CurrentGameState == Game.GameState.GAME_OVER);
    Ribbon.sprite = GameGUI.ribbonSprite(ParentGUI.Player.Place);

    GiftIcon.SetActive(Game.theGame.CurrentGameState == Game.GameState.PLAY &&
                       ParentGUI.Player == Game.theGame.CurrentPlayer);
  }

The last line in the draw() function will make the Gift icon visible if it is the current player’s turn and we are playing the game (not GAME_OVER or INIT).

Switch back to Unity and set the Gift Icon member of the Player Dialog GUI. Apply the change to the prefab.

Run

You should now be able to hit play and see the UI drawn to match the initial state of the game. Running with the MainMenu Canvas turned off and the GameCanvas turned on will automatically load the last game as though you started on the MainMenu and hit the “Resume” button.

If something isn’t working and you can’t figure it out. You can download a zip of my project at this point: NoThanks-UIBuilt