Localization system

Now that we have a complete UI, let's configure the localization system and add a pop-up list to change our UI's language.

Localization files

All our localized text strings must be contained in a .txt file for each language. For the purpose of this book, we will have English and French, and we will need the English.txt file and the French.txt file.

Let's create them right now in the following manner:

  1. Access your project's Assets folder with your file explorer and create a new folder named Localization.
  2. Inside this new folder, create a new text document named English.txt.
  3. Duplicate this new English.txt file and rename it as French.txt.
  4. Open them both in your favorite IDE or text editor.

Ok, now our localization files are ready to be used with the localization system.

Localization component

We can now configure the localization system to work with our UI. We need to have the localization component attached to a GameObject in the scene:

  1. Select our GameManager GameObject and attach a Localization component to it by navigating to Component | NGUI | Internal.
  2. In the Project view, navigate to Assets | Localization and drag our English.txt and French.txt files in the languages array.

The Starting Language is set to English, and we also have French available in the array.

Language selection box

The next step is to create a language selection box as shown in the following screenshot:

Language selection box

If we want to see what we're doing, we should first disable the Clipping of our Container by setting the Clipping parameter in its UIPanel to None.

Once the Clipping is disabled, follow these steps:

  1. Select the Popup GameObject from Difficulty:
    1. Check its Localized Boolean in UIPopup List.
    2. Rename its child Label GameObject as CurrentDifficulty.
  2. Select and duplicate our Difficulty GameObject in Container.
  3. Rename the new duplicate as Language.
  4. Select our new Background GameObject in Language and set its Pixel Offset in UIAnchor to {420, -90}.

    Note

    Sometimes, anchors don't update themselves. You may need to deactivate and then activate the Language GameObject for the Label's UIAnchor to update.

  5. Select our Label GameObject from Language and change its text to [AAFFFF]Language.
  6. Select our Popup GameObject from Language and perform the following steps:
    1. Change the Options text value to have the following two options:
      English
French
    2. Set its Position to Below.
    3. Check the Localized Boolean.
  7. Attach a Language Selection component by navigating to Component | NGUI | Interaction.
  8. Rename the Label, which is a child of Popup, as CurrentLanguage.

We can now reactivate Clipping in Container by setting the Clipping parameter in its UIPanel to Alpha Clip. The clipping Size has been saved.

That's it, our localization system is in place, and when the pop-up list changes value, the Language Selection.cs script automatically changes the localization's Current Language value.

Localizing a Label

We are now ready to localize our first Label using the UILocalize component and a Key that will define which string to use from our .txt files. Perform the following steps:

  1. Select our Label GameObject from Title.
  2. Attach a Localize component to it by navigating to Component | NGUI | UI.
  3. Set its Key parameter by typing MainMenu.
  4. Switch to our English.txt localization file and add the following line:
    MainMenu = [AAFFFF]Main Menu
  5. Switch to our French.txt localization file and add the following line:
    MainMenu = [AAFFFF]Menu Principal

Save both the .txt files and click on the play button. If you access options and change the language to French, our window's title changes from Main Menu to Menu Principal. That's because the UILocalize component updates the UILabel component it's attached to using the string present after the = in our .txt localization file. If you exit the play mode, the language will be saved and the UI will be initialized with the last selected language.

Now, we must add a UILocalize component with its specific Key to every Label in the scene, then add a localization string for each of them in both of our .txt files.

Don't be afraid; it isn't that long, and it will train you to use the Localization System:

  1. In the Hierarchy view, type Label inside the search box.
  2. Select all the Label GameObjects matching the search by pressing Ctrl + A and attach a Localize component to the selection by navigating to Component | NGUI | UI.
  3. Select our Label GameObject from Title and remove its second UILocalize component as it already had one!

Now, all of our Label GameObjects have a UILocalize component attached to them. One by one, select them and set their Key parameter based on their text set in the UILabel component.

You must ignore the Labels of Popup List; they don't need a UILocalize component since we checked their Localized Booleans. Simply add localization strings for their Options with the same names: Normal, Hard, English, and French.

Note

Don't forget to apply the same operations to labels included in our four different powers prefabs: Time, Bomb, SelectedTime, and SelectedBomb. New lines (return) are replaced by in the localization files. Colors work identically.

When you're done with setting their Key parameters, switch to our English.txt file and add every key you need, plus = followed by the corresponding localized text.

Now, copy all of these keys declarations and paste them in our French.txt file and then replace the English words with French words or any other language you choose.

By the time you're finished, our entire UI will be localized!

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.216.151.164