2 Cents on MMOs

So what is the use of a web plugin if you can’t actually control what’s going on in the plugin from the web page it is part of? This is the first of a small series of articles on integration between the Unity 3D plugin and the web page it sits in.

Click Me

Background

After a long, day job induced, hiatus from Unity 3D, I wanted to put my first unity project to bed before moving onto my next project (a facebook unity integration). After much clean up and fuss it stabilized and has bee posted to it’s own web page. I wanted the game to look clean, which meant I wanted the following:

• The player’s score should be displayed in the web page, not within the unity client
• Starting a new game should be done from buttons on the web page
• Controlling the “view” (rotation & zoom)

So this meant that I needed to post data from Unity to the web page, and call functions within unity from the web page.

Putting out

The first thing to do was figure out how to get player’s score to be displayed on the web page itself. This turned out to be fairly simple. You need 2 basic things

• A function defined in the web page for Unity to call
• use the “Application.ExternalCall” function from within your unity projects

Well, you also need to know how to change text in a web page, which it turns out to be pretty simple.

Changing IDentities

Some fantasy series I once read used a plot device whereby if you knew a things name you could control it. Well, in the web, if you give a thing a name, you can do all sorts of strange and wonderful things to it.

In the web page, giving something a name, is done by using the id tag. The official definition of ID is found here.

This may be best explined in an example. In my game page I have a “Red player score” and a “Blue player score”. In the web page I highlight each score by bolding it.

<b id="RPSScoreTxt">Blue Player Score</b>

Just a rule in the fantasy land that is HTML, if you know the name of something you can completely change it. Everything in an HTML page is an object, or more specifically, and html page is represented programmatically within the web browser as an object hierarchy, or Document Object Model (DOM for short).

When the page loads (remember this detail)  the text “Blue Player Score” will be displayed in it’s location within the page.

if you know an object’s name you can get a handle to that object within the DOM. Once you have the handle to an object you can  fiddle with the attributes and data attached to that object.

Will it come when I call it?

Having an element with a named ID allows you to get a reference to that object within scripts. Within javascript the object “document” represents the web page within the javascript is running. getElementByID is a function attached to the document object.

What is all powerful in a name?

The next trick is know what to change.

In HTML there is an attribute to every object that is nearly all powerful. The innerHTML attribute allows you to modify or replace the contents of an object. In this the inner HTML of is just some text. (But I did an experiment where unity replaced a simple text entry with an entire table).

function SetRPScore(arg){
 document.getElementById('RPSScoreTxt').innerHTML = ' ' + arg;
 }

So, if you make the call

SetRPScore("i did i bla bla");

The text “Blue Player Score” would be changed to ” i did i bla bla”

Remember the above function needs to be defined within <script> </script> block.

<script language="javascript1.1" type="text/javascript">

function SetRPScore(arg){
 document.getElementById('RPSScoreTxt').innerHTML = ' ' + arg;
 }
</script>

That was the hard part

now you have an object with a name you can use to get a handle to. You have a way to change that object, you have a function that takes an argument. The only thing you need to know is the Application.ExternalCall.  That function takes 2 parameters, the name of the function, and a parameter to pass to the function.

Application.ExternalCall("SetRPScore", 22 );

Bottom line (of code)

so if you want your unity game to make a change, such as set score, in the web page just do the following

• In your HTML page, give a chunk of text (or anything else) an ID
• Create a function(again in your html plage) that changes the innerHTML of that ID
• Call that function from within your unity plug-in via Application.ExternalCall

And that’s how it is done. To see the full details look at the source of my Aqueme game

Come back later and read my next segment, which go through the more terror prone activity of making a call into the unity plugin from the web page.