Unity has some pretty cool stuff. It can build your app for a multitude of platforms to which they seem to be constantly adding to. One of the things you are able to do is build your game for the web using the Unity Web Player. When we first started, I was using LibGDX and by using it plus some other tools, I could export my project to WebGL. At that point in time, WebGL was not fully supported on all browser so our game did not have the compatibility that we wanted it to. Unity uses its own plugin and seems to be compatible with all major browsers. I’ve tried it on IE, Chrome, Firefox, Safari and Opera. It seems to work the same on all the browsers. Now, how exactly do we publish said game for others to access? We wanted a presence on Facebook with our games as well as on mobile platforms. Mobile being our primary target of course. I began to do some research into Facebook apps and how exactly they worked. So, I headed on over to https://developers.facebook.com to get started. I believe you have to register with them to become a developer…its been a while since I did that part.
Once you are logged in, the first thing to do is to create a new application, just select “Apps” from the top menu and then “Create New App”. Fill out the info as needed to get the skeleton of your app created.
At this point, we don’t have much, just that we’ve told Facebook we want to create an app and this is what it is going to be called. The next part is we need to figure out how we are going to host our game for Facebook to reference. Facebook doesn’t actually host the game itself, that is up to us in how we do it. There are two ways you can do this. If you have your own web server, you can point Facebook to where the main file resides or if you don’t, you can use Dropbox (or probably any number of other online storage) to host your game. I’ll cover both methods here. First I’ll talk about Dropbox, you’ll need an account if you don’t already have one. Once you have it setup and ready to go, log into your Dropbox account online and create a “Public” folder. You don’t have to have this, but it helps me to keep stuff separated. Inside there create another directory for your game you want to host. Once that is done, move your .unity3d and the .html file into this directory. Right click on your .html file and select “Copy public link”. This will give you a box with a link that looks something like:
Copy this link to use in your Facebook app. Going back over to Facebook, we need to start filling things out. Select your app from the “Apps” menu at the top if you haven’t already and start with the “App Details” from the menu on the left.
There is quite a bit of info here to fill out, but take your time and fill it out as detailed as possible. I usually use a lot of the same descriptions and info I use when I place our apps on iTunes, Google Play or Amazon.
For the “App Domains” section, use “dl.dropboxusercontent.com”.
Now, click the “Add Platform” button at the bottom and chose “Facebook Canvas” from the selections presented. There are quite a few others here you can use as well.
When the properties for the Facebook Canvas appears, you have a “Canvas URL” and a “Secure Canvas URL”. Remember that link I said to save from Dropbox? Yup, we use it here…with one small addition. Make sure to put a “?” at the end of the URL you get from Dropbox. The Facebook Canvas expects the URL to be “dynamic”, so I guess this appeases what it wants. Use HTTP for the “Canvas URL” and HTTPS for the “Secure Canvas URL”. Click “Save Changes” at the bottom and you are pretty much done! Look at the “Canvas Page” property at the top of the “Facebook Canvas” window there to get the URL of your Facebook app. Copy and paste that into your web browser and you should now have an application on Facebook. This was the simplest way I could see for getting our app on Facebook.
Now, if you have your own web server, the process is very similar to that of Dropbox. Copy your game files to your web server and follow the general directions above and that is pretty much it. I renamed the .html file to “index.html” so I wouldn’t have to specify an .html file and I renamed the .unity3d to something a bit more web server friendly (be sure to change the reference in your .html file). You will need an HTTPS server, however, since the Facebook Canvas operates on HTTPS and the browser will warn you that the connection is not secure if you attempt to just use the HTTP link. The only other change is to be sure the “App Domain” at the top of the settings is your domain and not Dropbox.
If Facebook was our primary target, I’d probably spend a lot more time actually integrating Facebook functions into our game along with using “Open Graph” more. Maybe further down the road we will do this, but for now, this works.