Twine and Unity sitting in a tree…

I made a small adventure-like game using both Twine and the Unity Web player together. Since it took me some time I figured I might as well share how it works (it’s not terribly complicated, but I had to do a bit of trial and error).

The game itself is a weird little thing, the story didn’t make much sense, but I hope it gives a nice atmospheric little experience. The mechanics, however, seem rather solid and I hope I can use it for later projects when I want to combine lots of text with some animation/graphical interaction.

Twine + Unity sitting in a tree...
Twine + Unity sitting in a tree…

¬†You’re more than welcome to go give it a try

I tried following the instructions given here, but it didn’t work straight away, and as I have only little experience with Javascript/Html and zero with Twine it took a bit of throwing stuff together until something would fit. I couldn’t find any other sources for this particular combination. Others have used Unity to parse Twine files, The Maker’s Eden is one example (which seems really promising). But that wasn’t what I wanted :)

(Here’s another LD entry using Twine and Unity, but not quite like this: First Encounter)

How to

Basically the Unity Webplayer can send and receive messages to/from scripts on the page it’s embedded in:

Application.ExternalCall() to send from any Unity script and SendMessage() on the Unity object from Javascript. As for Twine, a javascript function in the html page can call the Twine ‘engine’s own functions. The trick is getting the two to find each other.

Adding the webplayer to the Twine generated webpage

I use Twine’s built in story formats to play the game. Twine has a number of different ways to present the stories described in html header files. So adding the changes needed to this file will make sure the game loads the Unity web object each time you rebuild the story in Twine. I simply copied the relevant lines from the html file Unity generates into this file. Everything in the < script > tags in the Unity file I copied in just after the < script > tags in the header file. I then added a table with two columns at the end of the file, adding all the lines from the Unity html file in one column, and all the existing lines for Twine in the other (This is definitely a part where someone more experienced with HTML could do a much better job of making it look good)

Now, loading it up should display the Twine story and the Unity game side by side, but it needs a little more for them to become  best friends.

Twine talking to Unity

Twine needs to ‘see’ Unity so at the very end of the <script> tag, right after the stuff that describes the size etc. of the webplayer, add the following function:

function GetUnity() {
    if (typeof unityObject != "undefined") {
        return unityObject.getUnity();
    }
    return null;
}

Then we need a macro we can call from our Twine passages to tell Unity something. Add a passage with the tag ‘script’ and the code:

macros.unity={
    handler: function(place, macroName, params) {
        GetUnity().SendMessage(params[0], params[1], params[2]);
    }
};

Then to send your Unity game a message just add a line like the following to any relevant passage:

 <<unity GameObjectName methodName parameter>>

(just write “” if the method takes no parameters)

This could be enough for lots of projects! But there’s more.

Unity talking to Twine

Add this little function at the end of the <script> tag after the GetUnity one:


 function TwineDisplay(a) {
     state.display(a);
 };
 

You can call it anything, but remember the name because you simply call this from your Unity scripts with Application.ExternalCall. Eg:

Application.ExternalCall("TwineDisplay", "PassageName");

And that’s all there is to it really. Figuring out the state.display(a) call took me a while, and if you want more functionality (passing parameters to twine e.g.) you’ll need a little more than this, and I’m not sure if or how it’s possible.

I’ve added the sourcecode for my game at the Ludum Dare submission page here.

Questions or comments, other games doing something similar, let me know! :)

Leave a Reply

Your email address will not be published. Required fields are marked *