Getting Started With Game Framework for Unity – Part 5 – Applying a Theme


Skill level: Beginner / Intermediate
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

We have the basics for our game, however it currently isn’t going to win any awards for it’s graphic. In this optional part of the Getting Started tutorial series we will look at how we can quickly get it looking a lot better using themes!

Note: The below is dependent on you having the Game Framework Extras Bundle package and is optional, however it is worth reading through even if you have the free version to understanding how themes work. The extras bundle includes files for all the tutorials as well as themes, other samples and resources. It also supports our effort in maintaining this framework. Future parts of this tutorial will use themed items as a basis, however you can still work along with the free version.

Title Scene

We will start by improving the title screen.

Title Before

First drag the CityBackground sprite (\FlipwebApps\GameFrameworkExtras\Shared\Sprites) into the root of the Title scene hierarchy.

To the Canvas gameobject, add a new Text UI gameobject. Set it’s Text property to Tap To Start, the Font to KOMIKAX_ (\FlipwebApps\GameFrameworkExtras\Themes\Cartoon\Fonts), Size to 100, Horizontal and Vertical Overflow to Overflow. Also drag the AttentionLegacy animation (\FlipwebApps\GameFramework\Animations\General) onto this new gameobject.

Next we will update the setting button.

Set SettingsButton->Image->Source Image to the RoundButtonMediumBlue sprite (\FlipwebApps\GameFrameworkExtras\Themes\Cartoon\Sprites\UI). Click the Set Native Size button on the Image component to correct the dimensions. Set SettingsButton->Button->Transition to Sprite Swap and set Highlighted Sprite and Pressed Sprite to RoundButtonMediumOrange

Right click SettingsButton and select UI->Image to add a child UI Image component. Drag the ButtonImagesMediumSettings sprite (\FlipwebApps\GameFrameworkExtras\Themes\Cartoon\UI) onto the new Image Components Source Image and click the Set Native Size button. Delete the Text gameobject.

Customised Button

Finally delete the Settings popup prefab that we added and instead drag across the themed version (\FlipwebApps\GameFrameworkExtras\Themes\Cartoon\Prefabs\UI).

Run the scene and it should look a lot better as shown below.

 

Menu Scene

Now, we will look at the menu scene.

Menu Before

Add the background as we did before by dragging the CityBackground sprite (\FlipwebApps\GameFrameworkExtras\Shared\Sprites) into the root of the Menu scene.

Next we will change the Home button. Find the RoundButtonMediumBlue sprite (\FlipwebApps\GameFrameworkExtras\Themes\Cartoon\Sprites\UI) and drag in to the HomeButton gameobject Image->Source Image. Click the Set Native Size button on the Image component to correct the dimensions.

Right click HomeButton and select UI->Image to add a child UI Image component. Drag the ButtonImagesMediumHome sprite (\FlipwebApps\GameFrameworkExtras\Themes\Cartoon\UI) onto the new Image Components Source Image and click the Set Native Size button. Delete the Text gameobject.

We will also update the TotalCoins gameobject. Change Font to KOMIKAX_ (\FlipwebApps\GameFrameworkExtras\Themes\Cartoon\Fonts) and Best Fit to true.

Open up the LevelButtons->Buttons game object and drag the themed LevelButton prefab (\FlipwebApps\GameFrameworkExtras\Themes\Cartoon\Prefabs\GameStructure) onto the gameobjects CreateLevelButton->Prefab field.

Select the Canvas->UnlockButton gameobject. Change Image->Source Image to SquareButtonLargeBlue \FlipwebApps\GameFrameworkExtras\Themes\Cartoon\Sprites\UI).

Select the Text gameobject under UnlockButton and change Font to KOMIKAX_ (\FlipwebApps\GameFrameworkExtras\Themes\Cartoon\Fonts) and set the Text Color to White.

If you click on a LevelButton that is locked we show a GeneralMessage dialog so we also need to let the framework know to use a customised version every time that is requested. Find the DialogManager on _SceneScope. Open the Dialog Prefab Overrides property and drag the themed GeneralMessage prefab (\FlipwebApps\GameFrameworkExtras\Themes\Cartoon\Prefabs\Dialog) onto the GeneralMessage->Prefab field.

Dialog Manager Override

Finally when we unlock a level we will play a nice animation. Drag the prefab UnlockLevelDialogContent (\flipwebapps\GameFrameworkExtras\GameStructure\Prefabs) onto the Content Prefab field of Canvas | Unlock Button and the Animation Controller UnlockDialogContent (\flipwebapps\GameFrameworkExtras\GameStructure\Animations) onto the Content Animator Controller field of Canvas | Unlock Button. Select also the Content Shows Buttons option. We have now added extra content into the popup window and an animation that is run to play some nice effects.

UnlockLevelButton

If you were to run the game now and use the unlock button you would not actually see the animation. This is because the UI elements are using a Canvas Render Mode of Screen Space – Overlay meaning that the UI will be rendered on top of all other elements in out scene, including out new animation. If we are mixing 2D and 3D content we will need to swap to a different UI Canvas type.

First add a new Camera gameobject to your scene (GameObject menu->Camera) and rename it UI Camera. Set it’s Position to0,0,-10, Clear Flags to Depth onlyCulling Mask to UI, Depth to 10 and remove the components Flare Layer, GUI Layer and Audio Listener. In _SceneScope set the DialogManager Ui Camera property to the new UI Camera gameobject.

UI Camera

We also need to tell the UI to use this camera so on the Canvas and LevelButtons gameobjects change the Canvas components Render Mode to Screen Space – Camera and add our new UI Camera to Render Camera. If you run the game now you should see the unlock animation works correctly

UnlockLevel

 

We are now done updating the Menu scene.

As a further exercise you could try adding a Panel background behind the Level Buttons and a Coin icon at the top right. Check out also the Free Prize tutorial for how you can quickly and simply add free prize functionality to our game. Some of these updates have been added to the picture above including custom images. The extras bundle contains all of these in addition in the tutorial files.

Game Scene

Game Before

Add the background as we did before by dragging the CityBackground sprite (\FlipwebApps\GameFrameworkExtras\Shared\Sprites) into the root of the scene.

Next we will change the Pause button. Find the RoundButtonMediumBlue sprite (\FlipwebApps\GameFrameworkExtras\Themes\Cartoon\Sprites\UI) and drag in to the PauseButton gameobject Image->Source Image. Click the Set Native Size button on the Image component to correct the dimensions.

Right click HomeButton and select UI->Image to add a child UI Image component. Drag the ButtonImagesMediumPause sprite (\FlipwebApps\GameFrameworkExtras\Themes\Cartoon\UI) onto the new Image Components Source Image and click the Set Native Size button. Delete the Text gameobject.

We will also update the TotalCoins gameobject. Change Font to KOMIKAX_ (\FlipwebApps\GameFrameworkExtras\Themes\Cartoon\Fonts) and Best Fit to true.

Delete the Pause Window prefab that we added and instead drag across the themed version (\FlipwebApps\GameFrameworkExtras\Themes\Cartoon\Prefabs\UI).

Delete the GameOver popup prefab that we added and instead drag across the themed version (\FlipwebApps\GameFrameworkExtras\Themes\Cartoon\Prefabs\UI).

Finally in DialogManager on _SceneScope. Open the Dialog Prefab Overrides property. Drag the themed GeneralMessage prefab (\FlipwebApps\GameFrameworkExtras\Themes\Cartoon\Prefabs\Dialog) onto the GeneralMessage->Prefab field and the themed GameFeedbackDialog prefab (\FlipwebApps\GameFrameworkExtras\Themes\Cartoon\Prefabs\Dialog) onto the GameFeedbackDialog->Prefab field.

Run the game and verify everything works.

Other Themes

To use one of the other themes then just use the corresponding files from the theme directory. The below is the same using the space and RPG themes (note we still use the same dummy level images on the Level Buttons).

Wrap Up

In a short amount of time we have created a complete basis for our game.

We will shortly start looking at some more advanced topics including how you can extend the framework including things such as custom level configuration. Be sure to also check out the Documentation Pages for more help and tutorials.

If you like the framework then please consider downloading the Extras Bundle for access to the tutorial files, themes 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.