Gamasutra: The Art & Business of Making Gamesspacer
View All     RSS
October 26, 2014
arrowPress Releases
October 26, 2014
PR Newswire
View All
View All     Submit Event

If you enjoy reading this site, you might also want to check out these UBM Tech sites:

Using Twine to teach English as a Foreign Language: Implementing the Plan
by Lena LeRay on 05/03/14 05:40:00 am   Featured Blogs

The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.
The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.


In my last post, I talked about being a JET Program ALT, teaching English in Japan, and how and why I hit upon using Twine to make games for my students. The TL;DR version of what I said before is that they don't have enough fun, supplementary reading material and Twine solves some of the challenges I had been facing in trying to write stories for them on paper. In this post, I'm going to talk a bit about how I've gone about starting to implement my plan.

Before I get too far into this, I'd like to give a shoutout to the people on the Twine forums. They answer questions with great speed, but there's also a great deal of knowledge built up and being freely shared on the forums. A few searches and browsing through the currently active threads kept me from having to ask many questions at all.

Designing Twine Passages

Twine is organized as a series of linked passages. A passage is like a page of text in a choose your own adventure book, except that instead of having all the pages bound together in a set order, Twine can load up any passage at whim with the help of hyperlinks.

My goal is to write easy-to-read, enjoyable English text games for my students to play. In the pursuit of that goal, one thing I wanted to be able to do from the outset was make words the students are unfamiliar with into hyperlinks which, when clicked, would reload the passage with a glossary translation of the word inserted at the top. In order to make translation links clearly separate from links that would lead to new parts of the story, I opted to make story continuation links be the last few lines in every passage and be full sentences answering a direct question such as "What do you do?"

Implementing Translation

Implementing translation turned out to be a bit trickier than I anticipated, though it still wasn't that difficult. I encountered two problems, the first of which was a blesssing in disguise and the second of which was just based on a lack of understanding of how Twine's wiki underlayer interacts with the DOM.

That first problem was an inability to type in Japanese in Twine. I don't know if that is specific to the Mac version or not, but after a moment of panic I realized that it was probably for the best, anyway. Rather than translating every word individually, I would have to create a translation engine in JavaScript. In loading the Japanese text in from a file, I would create a central glossary which could be edited with far greater ease in case of a mistake and could be reused across multiple games.

I later realized that although I can't type in Japanese in Twine, I can copy Japanese from another program to Twine without any problems. That didn't change my mind about building the translation engine, though.

The second problem I encountered was trouble with actually inserting the glossary text into a passage. I created an HTML paragraph tag with the id "translationDisplayField" into my test passage, but couldn't get the text to insert into it properly. This was an instance in which the Twine forum goers came to my rescue. It turns out that Twine being built on a wiki framework complicates the interactions between functions and the DOM.

About the Translation Engine

It works for my purposes, but it's still a work in progress. Right now, I have one text file with English words/phrases each on their own lines and another text file with their corresponding meanings in Japanese on corresponding lines. I've buit some functions and macros that could be dropped into any Twine game for use, but I would like to make it easier/less clunky to use as well as more generalized so that multiple languages could be included in a game.

In its current state, the author must use an initialization macro which takes no parameters and assumes they are using exactly the file names I have for dictionary building. The initialization macro creates an object that contains the target and source text lists as arrays, a flag for whether or not to display translation text, what text should be displayed, and a function to look up a word's translation and insert it into the display field at the top of the passage. To actually use the translation engine, the author must create a hyperlink for each instance to be translated, making use of the linking syntax's ability to run JavaScript at the same time to perform translation. For any passage that they want to allow translation in, there is a chunk of code that must be inserted into the passage somewhere -- in my case, I'm putting it at the top, though that's not required.

This works for my purposes, but I am hoping there's a way to make it easier to use and require less copy-pasting of display field code. Until I get that to a happier state, I won't bother generalizing the code for other languages. I have planned for doing so, however, and it should be easy enough to implement.

Another thing I want to do eventually is have the initialization code sort the glossary after loading it in so that I can employ a binary search instead of going through everything manually. Right now I'm not working with large enough word lists for that to be critical, though, so I'm focusing more on designing the first game the engine will be used for.

The Game!

The story's current draft is available here, but is not yet complete. There are a couple of early endings in place and I know where I want to take it, but I'vr just not finished it yet.

Besides writing the story itself (which is time comsuming because I'm aiming it at first-year students and regularly have to check the textbook to make sure I'm sticking to grammatical structures they've learned), I'm still working on how exactly I want to present the material. I mentioned earlier that I had decided on having links to translations in the passage text itself with story-affecting choices as full-sentence answers to some kind of question; after showing the game draft to some other ALTs and listening to their feedback, however, I'm thinking that maybe I should move translation hyperlinks out of the text, perhaps to the bottom of the passage, to encourage the students to try to figure out meaning from context.

I also did a Twine game for Ludum Dare this past weekend (shameless plug), and in so doing learned more about CSS in Twine. I haven't messed with the look of the student game much yet because getting it completed was my main priority, but now that I know more, I'm thinking that if I pulled the translations/definitions down to the bottom, it would be easy to make those links all a different color, which would help distinguish them from the choice hyperlinks. For the occasional shocker word, such as "naked" as employed in the game so far, I could throw it into the main passage anyway, if I so choose.

School Computer Security

I tried to show my progress on the game to the main English teacher at my junior high school, but it failed to load properly. A quick look at the developer console confirmed my guess that scripts are being blocked on the school computers. I can register my web site as a trusted site with less stringent security, but only if I set up secured hosting. That's a thing I've kinda been meaning to do for a while anyway, so I will.

I mention it here because it was a hiccup in my plans, and one that could affect the ability of other ALTs to use this and other games I make in the future with their own students.


Progress is being made! It's very satisfying.

Related Jobs

Digital Extremes
Digital Extremes — LONDON, Ontario, Canada

University of Central Florida, School of Visual Arts and Design
University of Central Florida, School of Visual Arts and Design — Orlando, Florida, United States

Assistant Professor in Digital Media (Game Design)
The College of New Jersey
The College of New Jersey — Ewing, New Jersey, United States

Assistant Professor - Interactive Multi Media - Tenure Track
Bohemia Interactive Simulations
Bohemia Interactive Simulations — Prague, Czech Republic

Game Designer


Aiden Eades
profile image
I will say a few friends of mine taught themselves japanese in a very similar way. Although rather than twine, through visual novels (basically PC version of create your own adventure style books, with images, sometimes minigames etc. )

Bought the visual novels in Japanese, and using a couple applications I forget the names of, they could read the Japanese version of the text, hover over a sentence for an English translation etc. I think the first was called AGTH (anime game text hook) and the tool they used to translate was something called atlas. Definitely worked for them since both can read Japanese almost fluently.

I tried it myself but due to studying at the time didn't get very far. In about an hour of attempting to translate a visual novel I was playing, I'd managed to make about 5 minutes of progress... most of the words from that five minutes of progress were "Nya!"

Definitely a good way to learn to read the language though. Especially with the popularity of VNs over there, perhaps in the future you could try and find some talented student to put images to your story, and then re-write it in a VN engine like KiriKiri.

Lena LeRay
profile image
If your foreign language skills are good enough, you can play any game in that language. Until you reach that point, it's usually a slog, as you experienced. That's why I'm trying to tailor games (starting with one, but want to do more) to my students' abilities.