How I Built and Deployed a WebGL Game to a New Website in 35m

Originally published by Rocco Balsamo on April 19th 2017 11,215 reads

@rocco-balsamoRocco Balsamo

Note: it also has a CDN, a custom domain, and I had time to grab a slice of pizza while waiting for some progress bars! Here’s how I did it.

First, See the results. (no mobile support yet, sorry!)

I used two awesome pieces of technology to accomplish this — Unity3d and Amazon Web Services.

10/14/17: Just a quick note before we get started… I recently launched a site called SIMMER.io that makes the process of getting a game on the web much simpler than using AWS. Check it out!

Here we go: I fired up my copy of Unity and created a new 2D project

Then I found the Flappy Bird demo on Unity’s asset store and imported it.

Next, I opened up the “Main” scene in the assets folder

Then I selected “Build and Run” from the File menu:

Next I selected “WebGL” as the target platform, and started the build:

After typing in a folder name, I waited for a while for Unity to “Convert managed assemblies to C++” …whatever that means

While that was going, I fired up my AWS (Amazon Web Services) account and selected “Host a static website”.

As a side note AWS, has gotten WAY friendlier in the past year. Great Job @awscloud!

… and I created a new website:

Ok! Unity has finished converting the Managed Gigawatt Capacitors to C++. And, they must be awesome capacitors, because now I have flappy running on a local server!

I opened up the build folder that I had selected in Unity earlier and tweaked the HTML output to my liking.

Then I compressed that contents of folder to .zip and dropped it into AWS.

Back in AWS, I clicked “Get a sneak peek at your website”

And dayyyyum, there it was on the internet!

Time spent so far… 15m. But I didn’t really like the crazy aws-website-flappy-xyz-yada-yada-website-us.amazonaws.com address very much, so I bought a domain name ($12), right from the Amazon interface:

I filled out a few forms and got the domain for less than the price of my dinner.

And that’s it. I had to wait 20 minutes for Amazon Cloudfront and the domain name to propagate. So I started eating pizza with my favorite topping:

I came back and lost very quickly at flappy bird on my new site: http://unitywebgl.com/. I gotta hand it to both AWS and Unity. They have made the internet way easier than flap flap.

Are you interested in learning more about WebGL with Unity? I’m now offering a four hour 60+ lecture course on Udemy. WebGL with Unity the Ultimate guide is available to my Medium readers at over 90% off. Just click the link in this paragraph!

Part 2 is now available: Secure Flappy Bird. HTTPS in 10 minutes.