Yesterday, I spent a good chunk of my morning attempting to get staging slots set up for my Azure deployment of KittenVR.com, but I ran into too many challenges with accidentally failing at git branching, so I decided to take a risk and deploy straight to release. The mission? Get Kitten–, the non-VR version of KittenVR, up online and playable through Unity’s WebGL exporter, which is currently in beta.
If you haven’t done much web development (like me) or learned a lot about how to configure web servers (again… yours truly) you may be a bit stumped when it comes to taking that beautiful* game you’ve made and putting it on the internet. Fear not, weary game devs – I’m here to share my adventures with you!
After the break, I’ll explain the steps you need to take to get your content up and running on a local web server. This is part one of a two-part series: this post covers the local web server aspect, and part 2 will cover the process of getting the content hosted on Azure.
This blog posts assumes a few things:
- You have already built your game. Interested in learning end-to-end how to build something in Unity? There’s a post for that!
- You have used the Unity build manager to build and save a WebGL version of your app/game
- You’re building on a Windows PC
The second part of this post will go into detail about how to get this hosted on an Azure website, so if you’re interested in hosting a game but haven’t gotten set up with Azure, there are a lot of excellent resources online for creating a web app.
How the $@!( do I get this working on my machine?
So, you’ve excitedly built your game and you are ready to try it out in the browser. You click on the index.html file that Unity has generated for you -and you get something like this:
This error, if you aren’t familiar with web development, is a result of Chrome trying to protect your computer from malicious files. You could open and test in Firefox (which allows running WebGL content from file:// urls) and avoid the problem, but I figured I’d go ahead and set up a proper local web server so that I could feel good about actually testing before I pushed all this up to an actual web server. Since I use Azure as my hosting platform for all of my web apps, it worked out well that I could also run this on a Windows 8.1 laptop using IIS.
- Go to the start menu and type in “Turn Windows features on or off”. Launch the matching result.
- Select the box for ‘Internet Information Services’ to turn this feature on. This will allow you to start a local web server to host your games on.
- Install the feature. When finished, launch the newly added “Internet Information Services (IIS) Manager” application.
IIS Manager is a (judging by the UI, slightly old) application that turns your computer into a web server for testing your web applications locally. Instead of launching your Unity WebGL game from the index.html file directly, you can add it as a website to your IIS manager and navigate to localhost:<port> instead to play your game. This will solve your first error in Chrome, but is also helpful if you are testing other web applications that require being run on a web server.
To add your site to IIS Manager:
- On the left-hand side of the IIS Manager, select the ‘Sites’ header and on the right hand task list, choose ‘Add Website’.
- Give your site a name under the ‘Site Name’ field, choose the directory where your Unity WebGL game was exported to under the ‘Physical Path’ field, and pick a port number in the ‘Port’ field.
- Click OK. You now can navigate to localhost:<port> and your game will launch!
Except… now we have a new problem. By default, some types of files on web servers aren’t known by default, and our Unity game has two file types that our IIS server doesn’t recognize: a .data file, and a .mem file. We need to configure our web server to recognize and load these, so it’s back to IIS Manager for now.
When you double click your site to open the Home section of IIS, you should see a variety of options for configuring your site. Double click “MIME Types” to open the list of file types.
- Under ‘File name extension’, type “.mem”
- Under ‘MIME type’, enter “application/octet-stream”
- Click OK
- Repeat for “.data”, which is also “application/octet-stream”
When you refresh your localhost:<port> page in your browser, you should now have a fully functioning WebGL Unity game! Play around with it and make sure it’s working to your desire – there are some quirks with the WebGL export functionality right now that may make a few things wonky (for me, it was getting my level to reload properly).
Part 2 of this series will cover hosting the content you’ve created on Azure – stay tuned!
* I say ‘beautiful here, but take this with a grain of salt: the WebGL scenes are NOT as gorgeous as they would be running locally. My low-poly environment has artifacts and the shadows are a bit odd, but I expect this will get better in the future as Unity improves the WebGL exporter. Happy coding!