Getting Started With Game Framework for Unity – Part 3 – Game Loop, Score and Coins


Skill level: Basic knowledge of Unity
Tutorial time: 15 minutes
Implementing in your projects: 5 minutes

Part 1 – The Basics, Audio, Settings and Localisation
Part 2 – Level Setup and Selection
Part 3 – Game Loop, Score and Coins
Part 4 – Unlocking, Level Configuration and In App Purchase
Part 5 – Applying a Theme
Part 6 – Worlds
Part 7 – GameItems, Lives, Health and Stars
Part 8 – Messaging essentials
Part 9 – A Better Game

In part one and two of the getting started tutorial we created title and level select screens. In this tutorial we will add a simple game loop with a Game Over dialog to complete the basic structure for our game.

Game Scene Setup

Create a new scene and rename it Game. Drag the _GameScope prefab we created previously into the root of your new Game scene.

Add another new gameobject to the root and name it _SceneScope. Add a DialogManager to this (Add Component->Game Framework->UI->Dialogs). Also add the OnEscapeLoadScene component (Add Component->Game Framework->Input->Components) and change Scene Name to Menu.

For this tutorial we choose not to have the background music playing on our game scene, so as we did previously add a StartStopBackgroundMusic component to _SceneScope, but this time set Enable to Stop.

Next add the LevelManager component (Add Component->Game Framework->GameStructure->Levels) to _SceneScope. LevelManager allows us access to information about the currently selected Level and also other state information such as number of seconds running, level high score etc. LevelManager also has methods that we can call to indicate when we start and finish a level. These can be triggered by your own code through LevelManager.Instance.xx(), however in this example just set the Auto Start property to True so that we start the Level immediately.

Pause Window

We need a way for the user to be able to exit the game back to the main menu. We could add a button as we did in part 2 (setting the Scene Name field to ‘Menu’ instead of ‘Title’). Instead we will use the pause menu which gives several different options (including exiting the level).

Add a button to your scene root by going to GameObject Menu->UI->Button. Rename the newly added Button gameobject to PauseButton, change the Text contents to Pause and anchor the button to the top left by modifying the button’s Rect Transform as shown below. As before if you have the Extras Bundle then you can customise the button with one of the provided themes.

pausebutton

On the Canvas gameobject that was automatically created, change the Canvas Scaler UI Scale Mode to Scale With Screen Size so that the UI expands and shrinks with the screen and set the Reference Resolution to 1920 x 1080.

Onto the PauseButton add the OnButtonClickPauseLevel component (Add Component->Game Framework->UI->Dialogs.

Next drag a PauseWindow prefab (\FlipwebApps\GameFramework\Prefabs\UI  or \FlipwebApps\GameFramework\Themes\Minimalist\Prefabs\UI) into the root of your hierarchy as shown below. Enable the Show Exit Level option and set Exit Level Scene to Menu

pausewindowsetup

Run your game and you should now be able to use the pause window and the other features we have added to navigate through all the scenes.

pausewindow

Game Loop and Game Over

In this tutorial, we will not actually create a functional game, but rather simulate the process.

Depending upon the win / lose criteria, a typical game loop might look something like the below where your functions IsWon and IsLost return a boolean if the game is won or lost. You can also just call LevelManager.Instance.GameOver() directly from something like a player script if that is where the condition is detected.

void Update ()
{
    if (LevelManager.Instance.IsLevelRunning && (IsWon() || IsLost()))
{
        LevelManager.Instance.GameOver(IsWon());
}
}

At the moment we just want to test out the general structure of our game so add the DummyGameLoop (Add Component->Game Framework->Debug->Components) to _SceneScope. DummyGameLoop simulates the above logic and gives us some onscreen buttons that we can press to signal the game is won or lost.

DummyGameLoop

The final step we need to do is drag a GameOver prefab into the root of our scene. You can either take the standard one from (\FlipwebApps\GameFramework\Prefabs\UI\ or \FlipwebApps\GameFramework\Themes\Minimalist\Prefabs\UI) or if you have the Extras Bundle installed then use one of the themed GameOver dialogs from (\FlipwebApps\GameFrameworkSamples\Themes\[Theme Name]\Prefabs\UI\).

Run the game and check out how everything works. As we set level unlock mode to Completion in GameManager you should notice that if you select the Win button then the next level becomes unlocked in the selection scene.

If you have the Facebook SDK installed and setup then a Facebook Post button will appear in the GameOver window. For this to work you will need enable the Facebook integration as mentioned in setup and add to _GameScope the FacebookManager component (Add Component->Game Framework->Facebook).

In the GameOver component on the GameOver prefab you can also configure after how many attempts to wait before displaying a rate button. You might only want this to appear after a user has played your game a certain amount of times as repeat users are more likely to give a higher rating. The Rate button requires that you enter the Game Name and URL’s into the GameManager that we added to _GameScope.

In a real example you might want to create your own copy of the GameOver prefab and customise it to your own needs like has been done below. The GameOver script uses the naming of the gameobjects to determine what values to update and show. If you are in doubt then take a look through the GameOver code.

GameOver1

Scores and Coins

A player can have a total score and number of collected coins. Game Framework also keep track of the score and how many coins you have for the current Level. Here we will add some code to display the players total coins to our Game scene.

Under Canvas add a new Text gameobject (GameObject menu->UI->Text). Rename it to TotalCoins and anchor it to the top right of the screen as shown below. Set Font Size to 50 so the text is a bit more visible.

TotalCoins

To have the score updated you need to add the ShowCoins component (Add Component->Game Framework->Game Structure->Player) onto the TotalCoins gameobject to show the total number of coins the player has. There is also a component ShowScore to show the players score, and then corresponding components under GameFramework | GameStructure | Level to show coin and scores gathered for a specific level.

We will also customise the display text for the component we added, so add the below key and value to Resources\Localisation and then in the ShowCoins component set Localisation Key to Game.TotalCoins.

 

Repeat the above steps to also display the number of TotalCoins on the Menu scene.

Run the game and you will see the players total coins are displayed at the top right.

Note: Your game logic can update the TotalCoins by calling GameManager.Instance.Player.AddCoins() or you can use things like the colliders to do this automatically as we will see in a later part of this tutorial.

If you have the Extras Bundle you can look at the full 2D runner sample Helicopter Blast example to see how this is done.

As we don’t have a real game loop at the moment then we will use the Cheat Window to change the score.

Cheat Functions

Ensure the cheat window is shown (Windows->Flip Web Apps->Cheat Window) and then run your game. Click Player->Coins->+10 and you should see the number of coins is increased and the display updated.

Showing the Level Name

As soon as a level is selected (typically on a level select screen) it is available through code via the GameManager.Instance.Levels.Selected property, and if a LevelManager is added, through LevelManager.Instance.Selected. As we have a level selected, we will add a component to show the level name at the top of our game scene.

On our game scene, right click the Canvas gameobject and select UI | Text to add a new Text component. Rename this LevelName and set the following values:

  • RectTransform | Anchors | Min | Y – 1
  • RectTransform | Anchors | Max | Y – 1
  • RectTransform | Anchors | Pivot | Y – 1
  • Text | Font Size – 70
  • Text | Alignment – Center / middle
  • Text | Horizontal Overflow – Overflow
  • Text | Vertical Overflow – Truncate

Finally on the LevelName gameobject click Add Component, type ShowLevelInfo and then click to add to your gameobject. We will leave the GameItem Context set to Selected as we want to show info for the selected level. Set Text to {1}. The {1} string is one of several parameters that will be substituted with details about the level (in this case the name). Hover the mouse over the Text label to see the tool tip with more information on other values.

You will also notice the grey globe icon next to the text field. This indicates that the value we entered is a fixed text string. Clicking the globe icon would indicate this is instead a localisation key and the text contents should be looked up through the localisation system using this key however here we won’t do this as we are just showing the level name.

Run our game again and you will see the level name shown.

Free Coins – Monetisation with Ads

The Free Coins button on the GameOver window lets your users get extra coins by watching adverts. This is a great, non-intrusive way of generating income from your games. To get this working all you need to do is enable the Unity Ads service. On the GameOver Free Coins button change the Coins property of the OnButtonClickWatchAdvertForCoins component if you want something other then the default of 10.

Transitions

As in part 1, if you have either the Game Framework Extras Bundle or the Beautiful Transitions assets then we will add a fade scene transition.

To _SceneScope add both a Transition Manager (/FlipWebApps/BeautifulTransitions/Scripts/Transitions/) and a Fade Screen component (/FlipWebApps/BeautifulTransitions/Scripts/Transitions/Screen). On Fade Screen set Auto Run to true to have a fade in run automatically when the scene loads. Fading will now automatically work.

Wrapup

We now have most bits in place for our game, and setting this up has not taken long. In the next part of this getting started series, we will add the final touches including looking at a different way to unlocking levels, custom per level configuration and in app purchase..

If you like the framework then please consider downloading the extras bundle for access to the tutorial files and lots of other useful samples and assets. This also helps support our efforts to develop and maintain this framework.

If you have any questions or feature requests then let us know below.

Further Information