I've been using Unity3D for a while now and I would like to share some of my discoveries starting by this post. In case you don't know unity3D yet, you should check out their website: unity3d.com and make sure you'll see the tropical paradise and shadows demo. Unity3D is a very promising 3D engine with the possibility to publish for the web by using a browser plugin (just around 3MB) with extreme good results. Personally I'm not a big fan of using browser plugins which aren't as adopted as Flash is. Flash projects like Papervision3D/Away3D/Alternativa/etc are very impressive and I love to use them. But in case you want to go more advanced, this is all to limited and you have to look at a browser plugin. Unity3D is then the best option.
Okay, enough introduction. As a web oriented developer I want Unity3D elements on my page to completely integrate with other elements in an easy way. Basically, I want to be able to have cross communication between Unity3D, Flash and javascript on a page. Building GUI's using Unity3D is very limited when you compare it with Flash. So why not using best of both worlds together on a page?
While starting with this I found a chat demo build by FlashBangStudios which does cross communication between Unity3D, Flash and a browser. Unfortunately it isn't open sourced, so we can't see everything about what's going on under the hood. So I've build a Unity3D chat myself based on communication within the browser. (Source files are included in the download at the end of this article)
To achieve this I used something similar like SWFObject, called UnityObject, to embed unity files in a clean way on my page. The coded posted there seems to a bit out dated and showed some problems in Internet Explorer 7. So I've tweaked their version a little bit and it now should be working perfectly (Tested with Firefox 3.0.3, Internet Explorer 7, Safari 3.1.2 and Chrome).
With unityobject, embedding is very easy:
var uniObj = new UnityObject("UnityObject.unity3d", "Unity3D", "640", "480");
uniObj.setAttribute("altHTML", "Alternative content when player is not installed");
uniObj.write();
To call a function on a gameObject in unity we can use the following code:
uniObj.msg( "GameObjectName", "FunctionInGameObject", "ParameterToSendToUnity" );
All this does is calling a special function on the unityObject within your page called SendMessage(...); and delegates your call to the object and function which you described in the call. In case from above we will trigger FunctionInGameObject in GameObjectName. We can only pass 1 parameter to the triggered Unity function. The most advanced parameter you can use in this case is an array. Using an object isn't supported. So when you want to pass an object as a parameter you need to serialize and deserialize your object. This is however not supported by default in Unity. When you want to do this, you could use JSON for example, which is offcourse supported in javascript, but there are good C# libraries as well. Maybe I'll dedicate a future blog post to this.
Now we have successfully called a function in Unity, it's time to send something back to the browser. This is very simple as well:
//Unity3D js code:
Application.ExternalCall("javascriptFunction", "Parameter1");
//Javascript code in browser:
function javascriptFunction( param ){
alert( param );
}
Instead of alerting the function call, we can send this parameter to Flash and show the value in a Flash text field for example. This requires just a 1 line more code compared to calling a Unity3D function. First we need to define in Flash which function are allowed to be called by the browser.
ExternalInterface.addCallback("functionNameInBrowser", functionNameInFlash );
Now we can call functionNameInBrowser by the browser on a Flash object, which calls functionNameInFlash in Flash. To achieve this I use the following code in javascript:
//Cross browser function to get a movie on a page.
function getFlashMovie(movieName) {
var isIE = navigator.appName.indexOf("Microsoft") != -1;
return (isIE) ? window[movieName] : document[movieName];
}
//Call function in flash
function javascriptFunction( param ){
getFlashMovie('flashMovieIdOnPage').functionNameInBrowser( param );
}
By executing the code from above, the function functionNameInFlash will be called like a regular function call. A sample function might look like the following code:
function functionNameInFlash( param:String ):void{
message.text = param;
}
This is all you need to communicate between a browser, Unity3D and Flash. Once you know this trick you can for example:
All examples are bundled in one download, which includes all the Unity3D, Flash, Flex, Actionscript and Javascript files.
I hope this will help anybody. Please let me know your feedback!
Tags: Actionscript, Javascript, Unity3D by Paul Tondeur
14 Comments »
