Penny Pixel Platformer – Part 2 – Localised Text


Note: This tutorial is a work in progress. Please let us know if you have any comments. You might also want to see the Getting Started tutorial series to get a jump start on some of the features whilst this tutorial is completed.

This tutorial will build upon the Unity “Live Session: 2D World building w/ Tilemap & Cinemachine for 2D” platformer tutorial and show how you can use Game Framework to turn the tutorial project into a real multi level game ready for release.

In this second part we will look at showing the level name and improving and localising the gem count text before moving back to improving out game further in the next section

Showing the Level Name

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 & Max Y: 0.5
  • RectTransform | Pos X: 0
  • RectTransform | Pos Y: 400
  • Text | Font Size: 70
  • Text | Alignment: Center / middle
  • Text | Horizontal & Vertical Overflow: Overflow

On the LevelName gameobject click Add Component, type ShowLevelInfo (or under Game Framework | Game Structure | Levels) 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. We won’t do this here as we are just showing the level name but will look more at this feature shortly.

Run our game again and you will see the level name shown. At this stage this is just the default text “Level 1” but we will change that shortly.

We probably also don’t want the level name displayed the whole time. To the LevelName game object add a Run Game Actions component (Game Framework | Game Structure). Set Automatically Run to On Start and add a Hierarchy | Disable GameObject action setting delay to 2.

The level name will now disappear after 2 seconds.

Transitioning Level Name

We can make the display and hiding of the level name a bit nicer by fading it in / out using Beautiful Transitions that is included as a part of the extras bundle or available separately. If you don’t have this then feel free to skip to the next part.

Ensure Beautiful transitions is added to your project and enabled through the Window Menu | Game Framework | Integrations Window.

Delete the Run Game Actions component as we will instead add a Fade Transition component (Beautiful Transitions | GameObject & UI) with the following settings.

  • Auto Run: Enabled to make the text fade in on start.
  • Transition In settings | Delay: 0.5
  • Transition In settings | Duration: 0.5
  • Transition In settings | Complete Actions: Add Action : Beautiful Transitions | Component Interaction | Transition Out – Same Component
  • Transition Out settings | Delay: 2
  • Transition Out settings | Duration: 0.3
  • Transition Out settings | Complete Actions: Add Action : Hierarchy | Destroy GameObject

Click to enlarge

We now have a nice fade in / out effect on our level name.

Localisation overview

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 however never edit this file directly as changes will be overwritten if you update Game Framework (note: always take a backup of your project before doing an update of any asset). Instead you should create your own \Resources\Localisation file. At run-time this will be merged with 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 the specified key.

A custom (localised) level name

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 level name.

Next move to the Entries tab. Each localisation entry is identified by a unique ‘tag’. With the automatic setup used, ‘GameItems’ such as Levels, Players, Worlds, Characters will try and get their name from a localisation tag in the format <type abbreviated><number>.Name, falling back to the default <type> Number if no localisation entry is found. In the case of our Level this will be L1.Name

Enter L1.Name into the input field at the bottom of the entries 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).

Run the game and our localised level name is shown instead of the default

When we later setup the menu screen we will add options for changing the language. For now you can use the Localisation tab in the cheat functions window (Unreleased – Game Framework version 5.0.3 +) to change the language and see the different text displayed (note the level name won’t dynamically change unlike many other texts so select a language before running the scene).

Localising the gems display

In a similar fashion as above, add a localisation entry with the tag ‘Gems.UI’ and the text ‘Gems: {0}’ for English and ‘Perle: {0}’ for Norwegian. Go back to the Show Coins component on the Canvas | TotalGems gameobject and enter the same Localisation Key (Gems.UI). If you hover the mouse over the Localisation Key label you will see a tooltip that explains what the {0} placeholder in teh actual text will be substituted with.

Run the game again now and we have our localised gems total displayed and we can swap the display text dynamically.