How to publish your Unity3D WebGL/HTML5 application or game to AWS
The intended audience for this article is for users who are either new or already familiar with Unity3D and are looking for a way to publish their HTML5/WebGL application or game to AWS. Prior AWS experience in Amazon S3 and Amazon CloudFront would be preferred but is not required!
What is Unity3D?
Unity3D is a multi-platform game engine that is widely adopted by all kinds of organizations from startups to large enterprises. It supports a wide number of uses cases including video production, game development, and simulation.
Unity3D allows you to write code once and deploy it to multiple platforms including Xbox, Playstation, PC, Mac, Linux, and to the Web as HTML5.
What is HTML5 and WebGL?
HTML5 is a new version of HTML that provides websites with a large number of powerful features and capabilities that weren’t available before such as 2D or 3D graphics.
HTML5 has been widely available by major web browsers including Chrome, Opera, Safari, Firefox, and many more.
HTML5 unlocks the power to deliver highly interactive, immersive, and engaging experiences on your website through WebGL.
WebGL is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins.
What are the benefits of deploying your application or game to HTML5/WebGL?
By far the biggest benefit is the wide reach and accessibility you open up your application or game to.
If you take a moment and think about how many phones, tablets, computers, and smart displays are out there that have a WebGL-capable web browser you will be quite astonished with what you find. To put it into perspective, there is about 2.2 billion iPhones sold worldwide since production began. Now imagine how many Android phones are out there, and how many tablets and computers are out there.
If you have built and published applications or games before you would know that you before you can publish it you have to give the AppStore a cut (30%) of every sale and have to follow their guidelines to the dot otherwise you risk getting your application or game removed from the AppStore.
Web applications or games don’t have that requirement and are free to publish their game however they like without having to share their revenue with others.
From the user experience side of things, you will be able to deliver your experience to your users without any friction in the experience. No more applications to download.
Why publish to Amazon S3/Amazon CloudFront?
Amazon S3 stands for Simple Storage Service. Amazon S3 is a managed service and its primary function is to store content. It is one of the oldest services provided by Amazon Web Services. It has many features and integrates really well with the rest of the AWS ecosystem.
Primarily, Amazon S3 allows you to easily host and scale your web application to handle a large number of users without worrying about managing servers or infrastructure.
Amazon CloudFront is also a managed AWS service that provides CDN capabilities to your origins. It allows you to significantly improve the access time of your website by caching the content at the nearest edge location to your users. Also, Amazon CloudFront easily integrates with Amazon S3 as an origin.
With both Amazon S3 and Amazon CloudFront, you don’t have to worry about managing the underlying infrastructure or figuring out how to handle scalability. And the best part of it all is you only pay for what you use and store. If you don’t have that many users there is no need to scale up or down any infrastructure, it is automatically handled by AWS. This is the power of server-less technology at work.
Let’s do this!
Okay great so now that we understand the benefits of building Unity3D WebGL games and deploying them to AWS, let’s walkthrough an example together.
At the time of this writing, the latest public version of Unity is 2020.1.10f1. The step-by-step tasks we will perform shouldn’t change much from version to version but if it does please let me know and I will make sure to update this article.
Step 1: Build the Unity3D game to WebGL
- Either create a new Unity3D project or use an existing one.
- Go to the Build Settings page and make sure WebGL is selected.
- Hit the Player Settings button and select the Player menu option.
- Under the Publishing Settings panel, set Compression Format to Brotli (more optimized than gzip but takes longer to build).
- Hit Build and Run first to run it locally on your machine and make sure it loads fine.
- Once the build completes you should a file structure similar to this:
- Inside the Build folder you should see files that end with .br (brotli) and .js (javascript).
Step 2: Upload the assets to Amazon S3 and update their metadata
- Log into your AWS Console.
- Go to Amazon S3.
- Create a bucket and give it a unique name.
- Once the bucket is created, upload all the three assets above (Build folder, index.html, TemplateData folder) to the S3 Bucket at the root level.
- Navigate inside the Build folder in the S3 bucket. You should see something similar to the following files:
- For each file that ends with a .br you have to modify the metadata for it and set the Content-Encoding header to be br. This allows Amazon S3 to serve this file as a brotli compressed file. Here’s an example:
Note: If you used the GZIP compression then make sure to set the Content-Encoding header to gzip for all files ending with .gz
- For the file that ends with .wasm.br make sure to set the Content-Type to application/wasm as well.
Step 3: Setup CloudFront to serve the S3 bucket
- In the AWS Console, go to Amazon CloudFront
- Create a Web distribution
- In the Origin Domain Name field type in your S3 bucket’s name and you should see the S3 bucket you created. Make sure to select it.
- Set Restrict Bucket Access to Yes
- Select Create a New Identity for Origin Access Identity
- Select Yes, Update Bucket Policy for Grant Read Permissions on Bucket
- Under Default Cache Behavior Settings, select Redirect HTTP to HTTPS for Viewer Protocol Policy
- Under Distribution Settings, make sure to set the Default Root Object to index.html
- You can leave the remaining values as the defaults.
- Hit Create Distribution
- Now you can go have a coffee or a 15minute break until the CloudFront distribution status changes from InProgress to Deployed. Once it’s deployed you can copy and paste the Domain Name into your web browser and you should see this:
Conclusion
Hope this article helps you on your journey in publishing applications or games built in Unity3D on AWS.
If you’d like to see more articles like this, let me know!
Thank you!
