Howdy folks,
As you know, I’ve been ranting and raving about Unity. Unity is a popular game engine utilized by developers of all levels; including hobbyists, indie-developers, and AAA game studios. It’s popularity is largely due to it’s low-barrier to entry and expansive build options. One of the build options is WebGL, we’re going to be going over how we can embed our WebGL game into our React Web Application.
The WebGL build option allows Unity to publish content as JavaScript programs which use HTML5 technologies and the WebGL rendering.
Before going on, It is worth noting that exporting a Unity project with a WebGL build requires that your project be compressed.
For the CPU side, all your code is translated into asm.js JavaScript. So the kind of performance you can expect depends a lot on the JavaScript engine of the web browser used, and there are some pretty significant differences there currently. For the GPU side, as the WebGLgraphics API uses your GPU for hardware accelerated rendering.
It would behoove you to develop your game with 2D graphics or with very simple 3D models. Also, Unity has spectacular documentation on deploying WebGL builds, I’ll leave a link at the bottom of the article.
Alright, so let’s get to it.
So after you’ve finished making your game, you’re going to want to navigate to File>Build Settings you’ll see a small menu with a bunch of different export options. Select WebGL, make sure Development Build is unchecked and export to a directory of your choosing.
After your build is exported you should have a Build folder, a Template Data folder and an index.html file
Move the Build Folder and the Template Data folder to the public directory within your React Web Application; make sure these two folders are in the same directory path as your index.html within your React Web Application.
The Build Folder contains the file with the compressed data and written instructions of your game and how to render as playable. This file is called UnityLoader.js
Now, in a text editor of your choice; open the index.html provided to you in the directory of your recently built project.
You’re going to want to copy code from lines 6–13 and paste that code into the head of your React projects html file.
These lines of code basically tell your html file where the game is.
Copy the code on line 17 into the body of your React html file, this line of code tells your html file where to display your game on the web page.
Your game should load onto your webpage now.
Now with these steps, you should be able to see your Unity built game in your React Web Application. With some nice CSS you can design something sleek with whatever you have planned.
o\0taku_overdose 