Skill level: Beginner
Tutorial time: 20 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 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
This tutorial series will show how you can quickly create the basic framework for a game using Game Framework.
This first part introduces some of the basic concepts and shows how to setup a simple title screen with audio, settings, basic navigation and localisation.
To begin, create a new Unity project and have the Game Framework asset downloaded and added as described here.
Game Manager Setup
First we will add a GameManager component. GameManager helps manage global state about your game and remains active across all scenes. It is also where you can configure the basic structure of your game and several other options.
Add a new scene into your project (Assets Menu->Create->Scene), and rename this to Title
Open this scene, add a new gameobject (GameObject Menu->Create Empty), and rename this to _GameScope
Add a GameManager component to _GameScope by selecting the _GameScope gameobject and then clicking the Add Component button in the inspector and selecting Game Framework->Game Structure->Game Manager (note: all Game Framework components are available this way so in future we will just give the path in the add component popup menu).
In the GameManager component that you just added, enable the Level Setup option to Automatic and Unlock Mode to Completion as shown below
We now have the basics for a game with 10 levels where the first level will be unlocked at startup and new levels can be unlocked by completing the previous one. You can run the scene at this point, but you won’t see anything at this stage. We will look more at how to use these setup levels in part 2 of this series.
There is audio support in the framework which includes managing background music, triggering audio effects and managing the volume through settings so we now add some of that functionality.
Add 2 AudioSource components to the _GameScope gameobject (Add Component->Audio->Audio Source). The first AudioSource is used for playing background music and the second audio effects. Set Play On Awake on both to false and on the first one set Loop to true as we will control starting and stopping the audio later through other scripts.
Find a background audio clip of your choosing, add it to your project and assign it to the AudioClip field of the first AudioSource. If you have Game Framework installed using the Extras Bundle then you can assign the audio clip /GameFrameworkTutorials/Shared/Audio/8-bit loop.
Finally we need to set the background clip playing. We could have just set the first AudioSources Play On Awake property to true, however we do it slightly differently to help introduce some of the other audio components.
Create a new gameobject in the root of your scene heirarchy and rename it _SceneScope. Drag the StartStopBackgroundMusic component (Add Component->Game Framework->Audio) onto _SceneScope. We will keep the default setting so that it will start the background music in the unity OnEnable state.
Run the scene again and you should have background music that plays. Still not very impressive, however next we will look at adding a settings window to control the volume.
Game Framework provides a settings window that by default supports setting background volume, sound effect volume, language selection and restoring purchases. It is very easy to extend or change this if you want to add additional features or customise the display.
First add a settings button to your scene root by going to GameObject Menu->UI->Button. Rename the newly added Button gameobject to SettingsButton and set the size and anchor the button to the top right by modifying the button’s Rect Transform as shown below.
At the moment, the button looks huge, so on the Canvas gameobject, 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. This is the resolution that the standard Prefabs and assets have been created using, but you don’t need to stick with this if you are modifying or creating your own.
On the SettingsButton add a OnButtonClickShowSettings component (Add Component->Game Framework->UI->Dialogs).
Finally on the Text gameobject change the Text contents to Settings and set Best Fit to true so the text is visible.
Add a DialogManager component (Add Component->Game Framework->UI->Dialogs) to the _SceneScope gameobject. DialogManager is another important component and is used for managing popup and other windows and allows for things like themed overrides and animated transitions.
Finally drag a Settings prefab (\FlipwebApps\GameFramework\Prefabs\UI or \FlipwebApps\GameFramework\Themes\Minimalist\Prefabs\UI) into the root of your hierarchy as shown below.
Unity Asset: If you have the Game Framework Extras Bundle then you can also use one of the other themed setting windows. Just drag the desired Prefab across from the corresponding theme folder (\FlipwebApps\GameFrameworkSamples\Themes\[Theme Name]\Prefabs\UI). We will look more into this in Part 5 of this tutorial series. Note: If you use one of these prefabs ensure you have enabled Beautiful Transitions from the Window Menu->Game Framework->Integrations Window as the themed prefabs include transition effects and will otherwise not show. See the instructions in setup for further details.
Now run the game and try out your new settings window. Adjust the volume and see how it is saved across restarts.
We will discuss rebranding, themes and use of the Beautiful Transitions asset later, however you can duplicate the settings prefab and modify as needed for your game. If you click on the added Settings prefab, you will see that it contains a Settings component – you can subclass this component and override the Show() and DoneCallback() methods to add support for your own game specific settings. See Air Hockey Dreams for an example.
Note: Always place modified copies of prefabs outside of the \FlipWebApps directory so they don’t get overwritten when you update Game Framework.
Next we will add some basic navigation so that we can quit and also move to the next scene when we extend our game in part 2.
Drag the OnEscapeQuit component (Add Component->Game Framework->Input->Components) onto _SceneScope. This will allow us to press escape, or the Android back button to exit our game.
Finally, drag the OnMouseClickOrTapLoadScene component (Add Component->Game Framework->Input->Components) onto _SceneScope. Set Scene Name to Menu. Now when we tap the screen, or press the mouse button we will move to a new Scene that we will create in Part 2.
If you run the game at this point, you will probably be pretty disappointed, quit doesn’t work in editor mode and if you click the mouse you get an error message that the scene can’t be loaded. We will create this new scene in the next part. There is also an issue that if you click the setting button, the click code still tries to load the next level. To get round this, on the OnMouseClickOrTapLoadScene component on _SceneScope set Blocking Game Objects->Size to 1 and then drag in the SettingsButton gameobject to indicate that this blocks input. Try running the game again and verify that clicking the settings button no longer causes an attempt to load a new scene.
We now have most of the basics in place and soon in part 2 we will look at more interesting bits including setting up the level menu and per level customisations.
Localisation and Overriding Default Texts
Game Framework allows you to easily Localise text and images in your game. The file \FlipwebApps\GameFramework\Resources\Default\Localisation contains a set of standard text key’s and their corresponding translation in various languages (please let us know if you can help translate to others).
You should never edit this file directly as changes will be overwritten if you update Game Framework (always take a backup before doing an update of any asset). Instead create your own \Resources\Localisation file. At run-time this will be appended to the default localisation file overwriting any existing entries with the same name, so here you can add text specific to you game or override key’s and values from the default localisation file.
You can use the GlobalLocalisation class from code to Get and Format localisation strings, or add the LocaliseText component (Add Component->Game Framework->Input->Components) to a gameobject containing a UI Text component to set the value based upon a specified key.
Here we will localise the text of our settings button.
In your project root create a new folder Resources. Right click the folder and chose Create->Game Framework->Localisation. In the newly created Localisation file, add the languages English and Norwegian under the Languages tab by clicking the ‘+’ button in the bottom right of the inspector. This will allow us to enter both English and Norwegian versions of our text.
Next move to the Entries tab. Each localisation entry is identified by a unique ‘tag’. We sill use the tag ‘Settings.Button’, so enter this into the input field at the bottom of the inspector and then click Add. You can now enter the corresponding text for both English and Norwegian as shown below (you can also use the ‘Translate’ button next to a field to get a google translated text, although it is a good idea to verify these translations).
Finally to our SettingButton->Text gameobject we want to add the LocaliseText component (Add Component->Game Framework->Input->Components) and set the Key property to Settings.Button. If you run the game now you will see that run-time the button text now reads Press Me.
When you start your game, the default language used is based upon the device settings with a fallback if that language isn’t present in the localisation file.
If you now run the game and open the settings window you will see we have an option to chose the language. Changing this updates the text in the settings window and on our Settings button and our choice is saved over restarts.
By default the languages available in the game will be conbimed from all available localisation files (including the dfault one). You can refine this further by creating a Language Configuration file in the Resources folder (right click and chose Create | Game Framework | Language Configuration). In this you can specify the languages that you would like to include in your game.
In the interest of simplicity we will not localise further during the following parts of this tutorial however we recommend you do this as you go along. Many default texts are provided for you in default Localisation file.
Resources Search Order: On the GameManager component there is a IdentifierBase that you can specify. We don’t use this in this tutorial, but if you have the examples as a part of the Extras Bundle you will notice it is used to allow us to have multiple tutorials and games in the same project. When loading an asset from resources Game Framework will first try loading the IdentifierBase asset e.g. Resources\<IdentifierBase>\Localisation, if that isn’t found, or no theme is present then we try without IdentifierBase e.g. Resources\Localisation Finally if that isn’t found then we try a default asset e.g. Resources\Default\Localisation
If you have either the Game Framework Extras Bundle or the Beautiful Transitions assets then you can easily add transitions to your scenes or gameobjects. Here we will fade in and out our scene (this section is only for those with one of the above assets).
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. That is all that is needed. The scene will now automatically fade in, and out. You can also play around with the transition types or use the Wipe Screen component instead of Fade Screen, selecting the desired wipe by assigning a texture from /FlipWebApps/BeautifulTransitions/Textures to the In / Out Config | Mask Texture field.
Note: Ensure you have enabled Beautiful Transitions in the integration window as described in the setup.
That wraps up the first part of this getting started guide. In the next part we will look at setting up a level select menu to show the levels that have been automatically created.
If you like the framework then please consider downloading the extras bundle. This package contains all the tutorial files and lots of other useful samples and assets. Doing 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.