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