Skill level: Basic knowledge of Unity
Tutorial time: 30 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 of the getting started tutorial we created a basic title screen. In this tutorial we will add a level select screen.
Menu Scene Setup
Create a new scene and rename it Menu. Next create a prefab of the _GameScope gameobject from the Title scene by creating a new folder called Prefab in your project and then dragging the _GameScope gameobject from the Title scene into this folder. Finally drag the prefab into the root of your new Menu scene. We perform this step so that we can run our Menu scene directly and save time.
Add another new gameobject to the root and name it _SceneScope and add a DialogManager to this (Add Component->Game Framework->UI->Dialogs).
For this tutorial we only want the music to play on the Title and Menu scenes, not the Game scene (that we will create later). We need something to start the music again if we exit back from the Game scene to the Menu scene, so as we did for the Title scene add a StartStopBackgroundMusic component (Add Component->Game Framework->Audio) to _SceneScope and set Enable to Play.
We can get from Title to menu, but not back. To fix that add the OnEscapeLoadScene component (Add Component->Game Framework->Input->Components) onto _SceneScope and change Scene Name to Title.
Go to File->Build Settings to open the build settings window and drag both Menu and Title across into the build settings Scenes In Build field.
You should now be able to run the Menu scene directly and have music played, or run the Title scene and be able to click through to menu. Pressing escape (or the Android back button) on the Menu scene will return you to the Title screen.
We also want a home button, so add this to your scene root by going to GameObject Menu->UI->Button. Rename the newly added Button gameobject to HomeButton, change the Text contents to Home and anchor the button to the top left by modifying the button’s Rect Transform as shown below.
(note: set Width to 200 and Height to 100 of hte text doesn’t fit)
As we did previously, 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.
Extras Bundle: As before you can customise the button with one of the provided themes. Just set the button up to use an image and using the ButtonImagesMediumHome icon from the themes folder. We will look more into this in Part 5 of this tutorial series.
Finally onto the HomeButton add the OnButtonClickLoadScene component (Add Component->Game Framework->UI->Buttons). As with the OnEscapeLoadScene component, change Scene Name to Title
Run the game and you can now also click back and forth between the two scenes.
The GameManager we added in part 1 has already created 10 levels for us so we now need to show something so the user can select them. We will explore a few different options in this part of the tutorial.
Add a new Canvas to the root of your scene (GameObject Menu->UI->Canvas). Rename it to LevelButtons. Change the Canvas Scaler UI Scale Mode to Scale With Screen Size and set the Reference Resolution to 1920 x 1080. This is the resolution that the standard Prefabs have been created using, but you don’t need to stick with this if you are modifying or creating your own.
Now find the LevelButton prefab (\FlipwebApps\GameFramework\Prefabs\GameStructure\LevelButton or \FlipwebApps\GameFramework\Themes\Minimalist\Prefabs\GameStructure\LevelButton) and drag it onto LevelButtons so it is added as a child gameobject. You can also use one of the themed versions instead if you have the Extras Bundle (under \FlipwebApps\GameFrameworkSamples\Themes\[Theme Name]\Prefabs\GameStructure.
You should see a button appear in the middle of the screen. On the LevelButton gameobject you just added, find the LevelButton component and change GameItem Context to By Number and then set Number to 1 to reflect that this will represent the first level.
GameItem context is something that you will come across on a number of components. It allows you to specify what Game Item (Level, Character, etc…) you are working with. The most common options are to specify by number as we have done, reference the currently selected item, or to get this information from a reference to a difference context. If referencing the selected item then the display will update to reflect selection changes (e.g. a component displaying the level name will show new level names as the selection changes).
Add one more LevelButton prefab to LevelButtons, position it anywhere on the screen so it doesn’t overlap the first. Similar to the previous button, find the LevelButton component and change Number to 2 as this will be for the second level. In the below diagram we have used one standard and one themed button from the Extras Bundle.
We could also attach an image to each LevelButton‘s Sprite gameobject to make each level button more unique however we won’t do that as shortly we will look at a slightly different way of setting things up.
If you run the game at this stage you should have 2 level buttons where the first is unlocked. You can click this level but will get an error as we haven’t created our game scene yet (that comes in the next part). We will later see how we can setup what should occur if we click the other locked buttons including coin locking and in app purchasing.
We could further create buttons for all our levels and position them as needed to create a non-linear design. This setup approach is used in A Bird Called Mike with a customised button design as shown below. Creating your own customised design buttons is as simple as copying the existing prefab. The LevelButton script uses the gameobject names within the prefab to know what values to set where.
A Different Way Of Showing Buttons
The above way of setting up buttons is great if we want to create some sort of non-linear setup such as along a path. Often however we simply want the level buttons displayed in some form of grid pattern and we will cover that scenario here.
Delete (or disable) the 2 LevelButtons that you created as we won’t be using them any more and create a new gameobject under LevelButtons called Buttons. To this new gameobject add a Grid Layout Group (Add Component->Layout) and also a CreateLevelButtons component (Add Component->Game Framework->Game Structure->Levels).
Set the following properties on the Buttons gameobject:
Grid Layout Group
Padding (Left, Right, Top, Botton): 10
Spacing (X, Y): 20
Cell Size (X, Y): 300
Finally on the Create Level Buttons component select the LevelButtons prefab that you would like to use, either the standard one or one of the themed ones as mentioned above. For now ignore the other options on this component however they can be used to customise the behaviour even further.
Run your game again and you will see that all 10 levels are now shown. Finally we want to add some images to the buttons. With the current automatic setup, buttons will be loaded from the Resources folder under a subfolder called Level. Create the folder Resources\Level in your project root if it doesn’t already exist. Next find some images suited to your game and the levels and place them in this folder with names in the format Level_[Number] e.g. Level_1.png. Set the Texture Type of these to Sprite (2D and UI). Run the game again and you will now see the level images are picked up and shown.
If you have many levels then you can easily put the buttons within a scrollable display as shown in the “Basic Demo” in the Extras Bundle.
Overriding Level Names
Currently the displayed level names assume a standard format based upon the GameItem type and number which may or may not be sufficient for our needs. We will revisit more advanced per-level configuration in part 4, however even using the basic setup we can easily customise and localise the level names through the localisation files introduced in part 1. For each Level, GameFramework will look for a name and description in the localisation file with a key in the format L[Number].Name and L[Number].Desc respectively (e.g. L1.Name). (The same holds true for all GameItem types but with different prefixes).
Add the following entries to the localisation file that we created in part 1 (we won’t be using the descriptions at this point so haven’t added those).
Run the game again and you should see that our level names are shown on the Level Buttons and now also update to localisation changes. You can customise the level names as you see fit but be sure to keep the keys the same.
To _SceneScope add both a Transition Manager (drag from /FlipWebApps/BeautifulTransitions/Scripts/Transitions/) and a Fade Screen component (Add Component->Beautiful 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.
That wraps up the second part of this getting started guide. We now have a good basis for our game. There is still some missing functionality including how we can unlock and purchase levels. For more advanced games, we also need to know how to extend and customise the Level functionality and include other concepts such as worlds and characters. We will revisit the level select menu in part 4 of this getting started tutorial. In the next part we will look at the actual game portion.
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.