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.

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.

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

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.

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.

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.

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.

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.

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.

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

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.

A small personal note from the author of Game Framework:

“Hi.

My name is Mark. I hope that you are liking Game Framework and am really keen to hear if there are things you are missing or would like to see added. FlipWebApps as a company and Game Framework is something I run and develop alone, mostly during my free time. It would be really appreciated if you could take 1 minute to leave a rating or comment on the asset store to show your support. Good reviews / ratings encourage me to continue developing and supporting Game Framework as a free offering with the reward being the knowledge that people are enjoying and using my framework for great things. This feeds back to all users through the improvements and new features that are being constantly added. For other issues you can also get in touch directly through the contact form on this site.