Hackernoon logoHow I Built and Deployed a WebGL Game to a New Website in 35m by@rocco-balsamo

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

Author profile picture

@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.

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.