Lots of games have broken UI or text when it comes to playing in any language other than english, and the developers don’t even bother learning how to do it, but it’s actually really simple. This tutorial will show many useful tips for developers + UI designers.
1. First Problem: Text that shouldn’t be changed gets translated
This is the example of a X button that got translated into something else but shouldn’t have, if you play in a language that isn’t english you might also notice other pieces of text that shouldn’t be changed but they get translated
Fix
All UI elements have a property called “AutoLocalize”, by default it is true and automatically translates text if needed/possible. For certain pieces of UI you will want to disable this so that the UI stays unchanged no matter what, examples: Any Number TextLabel (a textlabel that displays a number only, such as number of coins, items, etc), Close (X) buttons, TextLabels that display symbols (such as $, !, etc).
2. Implementing translation inside code
Not all text is set beforehand in a way that studio’s text capture can catch, and sometimes english text gets processed inside the code when using TextLabel.Text, when it should actually take the translated text. To fix this, inside your UI code first get a Translator object for the Local Player by game:GetService("LocalizationService"):GetTranslatorForPlayerAsync(game.Players.LocalPlayer), this will yield until the game’s translations have loaded in the client, if you run this randomly the translations will probably already have loaded by then, to translate any text, use Translator:Translate(Context, stringToTranslate): string. Context is the instance where the text originated from (Example: workspace.EmilyNPC as context for workspace.EmilyNPC:GetAttribute("Dialog1")) so that the translation system can know if it should use the global translated text or the one with context, to provide no context, you can just provide game as the context.
Use case 1: Search
Sometimes games will have a search feature in an inventory, shop, etc. But most of the time the search only works if you input the english name for an item, to fix this, instead of just searching through each item’s name, you search through each item’s name AND the item’s translated name, that way, the player can either input the english name or the translated name and it still shows in the search results.
Use case 2: Fade-in text
Lots of game dialogs become visible by playing an animation where each character becomes visible one by one, but this NEVER works with translated text, players only get to see the translated text when the animation ends, but by the time the animation ends they probably only have 1 second to read before it skips to the next dialog line. To fix this, instead of applying the fade-in animation on the english text, apply it on the translated text instead (but make sure to keep the animation duration the same and not per-character, because the translated text will sometimes have longer text or shorter text, if you base the animation duration off the length of the string, measure the duration off the english text, but still play the animation on the translated text, this way the duration will be the same no matter the language)
3. Troubleshooting/FAQ
If you are having issues after implementing one of the tips above or just some questions, here are some answers for you:
-
I added translated search but if I search the translated term it doesn’t work
Make sure that the name of every item in your game is inside Creator Hub → Your Game → Localization. However, if you display the item’s name in a visible Text object, it should get added to the localization table unless auto-text-capture is disabled. You can still manually add every dialog line from your game to the Localization page. -
I added fade-in text but the text returned by :Translate() is still the english text
- Your dialog text might not be in Creator Hub → Your Game → Localization, this is likely because auto-text-capture is disabled or you never show the full dialog text in your game in a Text UI object. You can still manually add every dialog line from your game to the Localization page.
- You have to translate the full english dialog text at once, and not every time a letter gets added, this will either not work or be very glitchy. Make sure to get the full translated text beforehand and animate it from that
-
Can I translate new text in real time?
Roblox is working on a feature that translates user-inputted-text in real-time but it has not been released yet, the only text you can translate is text that the auto-text-capture or you added to the game’s Localization table (Creator Hub → Your Game → Localization) -
How do I enable auto-text-capture or manually text-capture?
In the new UI revamp, roblox has sadly disabled the Localization panel, you can still manually add the button, but it doesn’t open the panel. The only way to add some form of auto-text-capture, is to go in Creator Hub → Your Game → Localization → Settings → USER AUTO-TEXT-CAPTURE. This only enables auto-text-capture for players, not for you, and it its heavily more limited (it takes days to automatically add new entries). If you are planning a new update, add any new text to the localization page manually. -
Can I trust roblox’s auto translation?
Mid translation is better than no translation, for certain things like character names, you might want it disabled, but for tutorials, instructions and many other use-cases it’s better to have auto-translation enabled, if you use the tips I gave above, it will be much better. -
How can I manually translate/add people to translate
If you don’t trust auto-translation or you are getting help from contributors, you can head to Creator Hub → Your Game → Localization. In this page you can add translators, download/upload CSV files, and much more -
I can’t find the Localization page
First head to Creator Hub (create.roblox.com), then press Panel/Dashboard/Creations, and find your game, click on the game or press configure. You should see a bunch of options on the left (Overview, Configure, etc). If you don’t, press the 3 bars button. Scroll down in the options list until you find Localization, there you have it!
Probably not all questions or problems are covered here, if you have one, send a reply to this topic.
4. Learn More
If you wish to know more about roblox translation and you want to do more advanced things with it, the Creator Hub has a great page with lots of details on translation Translate Dynamic Content, along with a full category which goes more on detail with each aspect of translation: Localization