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.

https://docs.unity3d.com/Manual/webgl-gettingstarted.html

I love video games, many (including my relatives and significant other ) would consider it an obsession. The vicarious experience felt when exploring an exotic world through the eyes of another persona is as indescribable as it is satisfying and I aspire to recreate that same feeling in others.

In this generation it is now more accessible than ever to dive into the world of Game Development through handy software development tools (Game Engines). While there are a plethora of game development applications out there, we’re going to focus on two of my favorites; GameMaker Studio 2 and Unity.

GameMaker Studio 2 is a cross-platform game engine developed by YoYo Games. Originally, GameMaker was designed to allow users develop games without programming knowledge; recent versions of this software include features to appeal to advance developers.

GameMaker comes with a variety of tools in the box. Equipped with an interactive user interface and many new features including: Real-Time Animation Editing and cross-platform development which seamlessly exports to Windows OS, Mac, Most Current Gen-Consoles and even Ubuntu.

In addition to the helpful features. GameMaker Studio 2 includes a new innovative workflow which combines from Drag and Drop functionality with actual scripting.

One drawback of GameMaker Studio 2 is the proprietary GameMaker Langauge (GML). There is very hard ceiling on how graphics intensive your program is allowed to be when compared to lower level languages like C#.

GameMaker Studio 2 has both free and paid options.

Unity is a cross-platform game engine developed by Unity Technologies. This engine can be used to create both three-dimensional and two-dimensional games. Unity is marketed to programmers of all levels; emphasizing accessibility while boasting advanced development features.

Like GameMaker, Unity comes with a lot of functionality. What sets Unity apart is that you have much more control under the hood.

Within 2D games, Unity allows importation of sprites and an advanced 2D world renderer. For 3D games, Unity has all sorts of neat stuff; specification of texture compression, and resolution settings for each platform that the game engine supports, and provides support for bump mapping, reflection mapping, parallax mapping, screen space ambient occlusion (SSAO), dynamic shadows using shadow maps, render-to-texture and full-screen post-processing effects.

Unity allows utilization of three different programming languages of your choice All development is done using your choice of C#, Boo (the proprietary language of Unity), or a dialect of JavaScript called UnityScript.

Unity has a higher barrier of entry due to the vast amount of control you have over your project.

Breakdown

GameMaker Studio 2

• Low barrier to entry
• Streamlines the development process
• Many features which appeal to both novice and advance developers
• Supports multiple platforms
• There are limits to graphical performance

Unity

• Powerful game engine, can contend with AAA developers
• Advanced 3D model rendering
• Supports three programming languages (C#, Boo, Unityscript)
• Supports multiple platforms
• Higher barrier to entry

If you are new to programming and game development. I would recommend starting out with GameMaker Studio 2 to get your feet wet with the process of game development before moving on to Unity.