Board game conversion tutorial – Part 4

Board game conversion tutorial – Part 4


In this video I’m going to layout the UI for
the game itself.
I’ll make player areas to show the player’s
chips and cards.
I’ll create a player dialog to hold their
place ribbon and turn marker.
Finally, I’ll add the gift draw deck, current
gift card and number of chips bid to the center
of the board.
Start by making the MainMenuCanvas inactive
and the GameCanvas active so that our changes
will be visible.
Then add a background image that fills the
canvas and has the felt sprite.
Start the player area by creating an image,
sizing it to 600 by 200 and positioning it
in the bottom right.
Give it the border_0 sprite and color it red.
These will eventually be colored to match
the player’s color.
Set the “tag” of this object to Player.
The player area needs to show the number of
chips the player has, the cards that they
have taken and their current score.
Create an image size 64×64 with the chip sprite.
Position the image on the left side of the
area.
Add a TextMesh child object.
Center the text, color it black and size the
font so that a large two digit number fits.
Make an area to hold the cards by creating
an empty object.
Size it to 500×128 and position it in the
upper right.
Give it a horizontal layout that controls
the width and height of its children and expands
the height.
This area is going to hold all the player’s
cards and will use a negative spacing to compress
sequential cards together and a spacer to
separate cards that aren’t in a sequence.
Now I’ll create a card.
Make an image and give it the card front sprite.
Its size is controlled by the horizontal layout
so we need to add a layout element with a
preferred width of 96 to tell the Horizontal
layout how wide the card should be.
Now add two TextMesh objects to the card to
display the value of the card.
One should be centered in the middle of the
card with a large outlined font.
To add the outline to the font, find the outline
material that we created earlier and drag
it into the font face section of the TextMesh
object.
The second text object should also contain
the value of the card, but display it in a
small non-outlined font in the top left.
This text is positioned to be visible when
sequential cards are compressed together.
Next I’ll work on the spacing for sequential
cards and a spacer object to separate sequences.
Duplicate the card a couple times and tweak
the spacing of the horizontal layout so that
the cards are separated just enough to read
the upper left text value.
Create an empty spacer object and add a layout
element behavior.
Set the preferred width to 160.
Add another card to see the effect of the
spacer object.
I’m going to show the player’s score along
the bottom of the player area as a formula
that will make it clear how the score is calculated.
Start with an empty object that fills the
bottom and has a height of 64.
Add a TextMesh object with the text “Score”
and orient it in the bottom left corner.
Add a second TextMesh object to display the
total.
Set the text to “=-99”, make it bold and
position it in the bottom right.
Make a copy of the chip count text in the
chip object.
Make the text white and move it down to the
score line.
Do the same with the upperLeft text in the
card object.
Set the text to -33, make it white and move
it down to the score line.
That’s it for the player area.
The script code is going to need to create
cards and spacers as the player takes cards.
To accommodate that, make the card and the
spacer a Prefab by dragging these objects
to the Prefab directory.
The player area itself will also be a prefab
so that if we need to make changes to it later,
we can make the change to one copy and apply
the change to the other six areas.
The players start without cards, so delete
the card and spacer objects before making
the player area a prefab.
Also add the PlayerAreaGUI behavior.
Make a copy of the player area for each player.
Arrange these just like we did on the main
menu.
Set the position member of the PlayerAreaGUI
script the same way we did for the PlayerLoginArea
on the main menu.
Next I’ll make the player dialogs.
In a more complex game, I use dialogs to get
responses from the players or to display extra
information that I can’t fit onto the main
UI.
For this game, I’ll put the player’s place
ribbon and the turn marker in the dialog.
The place ribbon is shown when the game is
over, and the turn marker highlights the player
who needs to pay a chip or take the card.
Create an empty playerDialogs object in the
DialogCanvas.
Size and position it to match the player area.
Add the PlayerDialogGUI behavior.
This re-use script requires a ribbon and a
help dialog.
We aren’t going to have a help dialog in this
game, so just create an empty object for that.
Next add an image object, name it ribbon and
set its size to 128×128.
Set the sprite to a ribbon sprite and position
it above the player area.
Then add another image object, name it turnMarker,
set its size to 128×128, set the sprite to
the gift icon and position it above the player
area.
Drag the empty help object and the ribbon
object into the PlayerDialogGUI behavior.
Make the playerDialogs object a prefab and
move it down below the screen area.
The re-use script code will instantiate a
playerDialogs prefab for each player and position
it over the player area on the DialogCanvas.
To do that, it needs to be able to find the
DialogCanvas.
The code does that by looking for the “dialogCanvas”
tag.
Add that tag to the DialogCanvas.
The game needs to display the gift deck, current
card and current chips in the center of the
screen.
I’ll start by making a container for these
UI elements called center and sizing it to
200×200.
Then I’ll add an image positioned in the upper
right with a sprite of deck back and a size
of 96×128.
The deck should show how many cards are left,
so I’ll add a TextMesh object that fills the
image, is outlined and has a font size that
will show “24” in parenthesis.
It is easy to forget how the deck is built
when the computer does it for you, so I’ll
also add some text below the deck that describes
what cards make up the deck at the start of
the game.
To display the current card up for bid, I’ll
use the drawnCard prefab that I made for the
player area.
Add that prefab to the upper right and size
it to 96×128.
Deactivate the score text.
Finally add a chip image and text at the bottom
of the card to show how many chips have been
bid so far.
Rotate the whole center area to -90 so that
it is not upside down for the players on the
top.
That concludes the Game UI.
In the next video I’ll write code to model
the game and draw the UI based on the model.

Leave a Reply

Your email address will not be published. Required fields are marked *