Showing posts with label UI. Show all posts
Showing posts with label UI. Show all posts

Monday, 23 November 2015

UI Card Game part 3

The final stage of the game, was the actual game mechanic itself. With the cards randomly shuffling upon starting the game, all I had to do was set the card backs to display as opposed to the front. I needed to set cards to flip upon being clicked and check if it matched the ID of the next card being flipped. If so then the cards needed to remain upright, otherwise flip them back.

To do this I needed a method in the card behaviour that passed the cards information to the game manager upon it being clicked. When two cards have been clicked and passed their information, a co-routine to compare the cards is started. If the two cards match, the tally for pairs needed to win increased, bringing the player one step closer to finishing and they then remain unclickable. If they don't match, both cards are flipped back and made clickable again.
Card game partway through

The final thing to do was provide a win screen when the player matched every card. This was easily done by checking if the pair tally equaled 8 or not. If so then a delegate message is sent to display the win overlay image and I even added music to make it more of a celebration.
Finished game with win display

Monday, 16 November 2015

UI Card Game Part 2

With the main menu sorted from last week, the next objective was actually adding cards to the game scene. Rather than layout every card individually and be limited to the space available, we were taught a clever way to set up the scene so that cards are generated upon playing the game. In order to do this I needed to add a background to the game scene, which is what would control the card position and generation for me. The component that allows me to preset the positions and spacing of the cards is a 'Grid Layout Group', which has cell sizing and spacing values. I needed to add a few cards initially and set the cell size to fit the card, then adjust the spacing to my liking. From there I set the starting position (top left), alignment (middle centre) and constraint count i.e. number of rows(4).
Components in the background object

Once the card layout was done I could clear all cards off the scene and start on the generating scripts. To start a card face is needed so we created a card model class that creates the variables, then a behaviour class which assigns them to the card. The next step was having a game controller that creates a grid list for cards to be generated into and then fills it. However this on it's own would put each matching pair together, so we need something to shuffle the cards around. We were provided with a complex method that made use of the generics we were taught two weeks ago by Richard. The method uses the 'RNGCryptoServiceProvider' class which is essentially a random number generator. From what I can gather, it uses this to generate a byte for a box position and then assign a card to that space. The finished product of this week is a game screen filled with shuffled cards.
Shuffled cards in game

Shuffling code

Monday, 9 November 2015

UI Card Game

Over the next 3 weeks I'm going to be taught how to use the UI system in Unity to it's full capabilities. The game is a simple copy of a card matching game where you flip the cards to try and find the pairs. This first week covered the basics of the new Unity canvas system and how to make a menu from it. The first step was to add the background for our menu that everything else will be laid on top of. I needed to play around with the anchoring to make sure the background covered the whole screen upon playing the game.

The next focus was adding buttons so the player can navigate from the main menu to the actual game.
Buttons in Unity 5 are far easier to use because they come with a preset OnClick() section. All I had to do in order to make a working button was create a script containing no more than:

public void LoadLevel(int _levelIndex)
    {
        Application.LoadLevel (_levelIndex);
    }

This is all that is needed to create a loading button. I checked the build settings so I new which scene had which number, then added the script and game number into the button script. When I started up the game and pressed play, it took me straight into the game scene. I then just needed to position the button using anchors again then add a title and I had finished the main menu.
Finished menu screen