One of the nice things about Tumult Hype is the ability to customize my work. Instead of waiting for Hype 4.0, or whatever the next major version is called, I can simply create my own features. As an example, what if Hype had built-in Multilingual support? Instead of creating multiple scenes or multiple projects, wouldn’t it be nice to have just one layout? Well, you can. That’s what this week’s template is all about. It shows how to manage multiple languages from a single location in a Hype project – or an HTML5 project in general.
First, an explanation is in order. The project has two cool features that might not be apparent. First, it detects the language that is set on the users computer. (HOW PERSONAL!) That’s a simple JavaScript command. Using “navigator.language” returns a code to represent the browser’s language setting. So, if the website visitor was using a computer set to United States English, the code “en-US” would be returned. For simplicity in using this template, that code is displayed in the top-right corner of the scene.
5 6 7 8 | // Get and display the Browser Language var nl = navigator.language; hypeDocument.getElementById('Language').innerHTML = "Browser Language: " + nl; |
The second feature is that a language can be specifically selected, by clicking / tapping one of the flags. Since I mainly speak English, and several other languages poorly, this project only uses English languages. However, the project can easily be modified to support additional languages. The key is understanding the two-dimensional array.
11 12 13 14 15 16 17 18 19 20 | // This is like a spreadsheet, with a header row (languages) and header column (elements) var data = [ ["ID","en-US","en-GB","en-AU"], ["Country","United States","Great Britain","Australia"], ["Welcome","Hey there!","Hello!","G’day mate!"], ["Message","This is an example of using multiple languages in Hype.","This posh Hype template is ready for your perusal.","I reckon this template could help some poor blokes learn JavaScript."], ["Emoji","👱🏻","💂🏻","🕵🏻"], ["Animal","🐻","🦁","🐨"] ]; |
That looks kinda messy, doesn’t it? Sure, it would be nicer if Hype did this natively, but some additional software can straighten things out. Instead of typing the text in Hype, I typed it in “Numbers” from Apple’s iWork apps. In other words, I used a spreadsheet. From there, the document is exported to a CSV file. That’s a Comma Separated Values file.
That by itself is close to what is needed for JavaScript, but Mr. Data Converter can get it even closer. The setting “JSON – Row Arrays” is used. Additionally, the “First row is the header” option is unchecked. Even though the first row is a header, I include it in my project. In general, I don’t like the whole “Arrays start on zero” thing, but having a header is actually crucial to this project.
If you look at the array, you can see the different country codes in the first row… en-US, en-GB and en-AU. Do you see where I’m going here? That’s the simplicity! If you want to add support for more languages, you simply add another column to your spreadsheet / 2D Array. You don’t need to create separate scenes, separate elements or separate Hype projects to manage multiple languages.
What’s even better is that this approach can be modified to work with other projects. Perhaps you’re creating a Role-Playing Game. This could be used to manage the Non-Playable character dialogue. It could also be used to display item data, such as stats on a sword. That includes images! The “Multilingual” project illustrates this by changing the emoji. A man is located at the top left, while an animal is located at the bottom left. It doesn’t have to be an emoji. A path to a picture can be used instead. There are lots of possibilities here. A lot can be done by changing an element’s innerHTML.
Download the Multilingual Template and open it up in Hype to see the rest of the code.
If you want to learn more about Hype, I wrote A Book About Hype. If you haven’t gotten your copy already, the book seems to have been very helpful to those in the Tumult Hype community. 🙂