Creating browser-based games in Unity WebGL can be quite rewarding – there are many game portal websites that will split ad revenue with you, or buy your games outright from you. If you’re talented, you can easily earn several thousand dollars per month in ad revenue share. Unity with WebGL is one of the best tools for this, and with WebVR plugins, you can also give your games VR support quite easily. So if you’re wondering how to create Unity WebGL games, read on!
Requirements
UnityHTML5 / JavaScript knowledge(Optional) A good text editor like NotePad++
To begin, download and install Unity, and make sure you install the WebGL support component.
When Unity starts for the first time, take a minute to get accustomed to the UI and menus, especially the Hierarchy panel – this contains all the current scene elements. It’s basically the main view of whatever you’re working on, be it a game level or the main menu. You also have the Game tab (for testing the game inside the editor), and on the right is the Inspector panel. This is where elements can be edited, for example, lights, actors, etc. If you click on the Directional Light button in the Hierarchy menu, it will give you a bunch of information about this particular light, and you’ll be able to enable / disable the shadows cast from it. Finally, you have the Project window at the bottom, which just keeps a tab of the files being used to create your project. After familiarizing yourself with the UI for a bit, go ahead and save the current scene. Go to File > Save Scene and it will open a dialog box for an “Assets” folder. It’s standard practice to keep things organized into subfolders when developing games, so create a subfolder named “Scenes” and save the scene into it. Now we’re going to create something really simple – a “platformer” type of game, where our character just hops around platforms. Falling means death. We’ll be doing this in 3D / first person view, so a character really doesn’t model – in fact, we’re just going to use a simple “sphere” object for our character, because it’s the simplest to create.
So in the Hierarchy panel, click “Create” and edit these properties: If you press the “Play” button, it should display a simple sphere in the camera view. Now we want to add gravity and jump physics to our “character”. So in the Inspector panel, add a component to the sphere and choose Rigidbody – also, we don’t want the sphere to rotate, so go to Constaints > choose all of the axes in the Rotation area. Now we need to create some kind of platform so that our character doesn’t fall endlessly through the game. So add a cube and set the Scale Y value to 0.1 – now if you “Play” the scene again, our character should “fall” on the cube. Now we’re going to add some physics, so that our character will “bounce” a little when he hits the cube platform. We need to create a new physics material and apply it to the sphere, to make our character have bouncy properties. Create a new subfolder in the Assets directory and name it something like “Materials”, and then create a new physics material. Call it “Bouncy_blob” or whatever you want. Now in the Inspection panel, add these values to the bouncy material: We should also add a physics material to the platform beneath our sphere – this will be so that our sphere will bounce with increasing height on every bounce. So create another material and name it something like “Platform_bouncing”, and give it the values of: Now when you press the “Play” button, you’ll notice that our character bounces higher on each bounce. To add some color / texture to the platform, create a new material and click the “Albedo” tab, then give it a color. You can drag and drop this material onto the platform, and it will change color.
For a first-person perspective, you just need to drag and drop the camera in the Hierarchy panel onto our sphere – this will cause the camera to follow our character at all times. This premise remains the same for any kind of first-person Unity game – but if you’re creating a multiplayer FPS game like Leader Strike, it becomes a little more advanced, as you’ll have several cameras set up per model. In any case, you need to edit the camera like so: Now to give us a sense of “perspective” on jumping height, we will add a spotlight. So tweak the spotlight values to: Rotation { X: 90, Y: 0, Z: 0 } Now we want to program the controls of the game, so that we can use our mouse to control the character’s movement. We need a script for this. In the Projects panel, add a new folder and name it “Scripts”. Now add a JavaScript to the Camera and name it “InputController”, and also add it to the “Scripts” folder you just created. Now when you double-click on the script, you can edit its properties. When you open the script in Unity’s default script editor, it should look like this:
So we want the “GameObject” variable to reference our character – for this, you can simply switch back to the Unity camera view, and drag / drop our sphere onto the input field. Now we want to assign half of the screen width and height to the Start function. So edit the script to look like this:
So now we just need the mouse values (for whenever its moved by the player). We will need to call on the Update function to achieve this. So tweak the script under the Update variable:
To explain a bit, the variables X and Z are for the controller axis – we want these to manipulate our character’s position when we send controller input to the game. We need to reference the Input.mousePosition variable, which gives us a 2D vector. This 2D vector needs to be added to our coordination tracking, so we’ll call a function setHeroPosition with the values as arguments. So create a new script, call it HeroController and attach it to our sphere / character. Edit the script to look like this:
Now when you press the “Play” button, you should be able to navigate the character around the platform using your mouse, and even fall off the platform! Our end goal is to create a platforming game similar to Short Life, so we’ll flesh this game out a bit more in the next guide. That concludes the very basics of creating a very simple gameplay in Unity – in the next part of this guide, we’ll go over how to add more scenery to the level, add a game menu, and export it all to a website using WebGL, for playing in a browser.
Creating Procedural Platforms
So in part one of this tutorial, we just made a basic platform that your character can bounce around on (and fall off to their doom) – but for a true platformer, we need to add additional platforms. But we don’t want to add a million platforms – we want Unity to automatically create platforms as our character bounces along. For this, we need a platform template – otherwise known as a “prefab”. Prefab is short for prefabricated, and it simply means “pre-made” – usually a copy of a game object that you can reuse over and over again. In fact, prefabs can contain hierarchies of game objects, which means you could “prefab” an entire scene of game objects.
So what you need to do is create a new assets folder named Prefabs, then drag and drop our platform from the Hierarchy panel into this new folder. Prefabs will be recognizable in the Hierarchy panel by the color blue. Now in order to instruct Unity to create procedural platforms, we need to create a script called GameManager, and attach it to the camera. GameManager scripts basically contain important instructions for the engine to relay to the gameplay – in this case, it will be generating platforms as our character hops along. The reason we attach it to the camera is because the camera is never destroyed, and it remains constant – so the script is never destroyed and remains constant by being attached to it. Here is what needs to be included in the script:
To explain this code a bit, it’s necessary for us to create a reference to both the prefab panel and the sphere (our character), so you need to drag and drop them into their specific slots in your editor. This code also contains three private variables – the lines that start with private var. These will instantiate (reference) the prefab panel in the following ways: In this next bit of script, we’re going to add a check for every frame whether or not our sphere (character) is above the boundary (that generates new platforms) – if our character is above the boundary, we will raise the boundary limit to create a new panel / platform higher than the last.
Our next step is adding code which determines the next panel position:
We’re using a do while loop in this code to ensure that the vector’s X and Z values (its position in the game world) is not identical to the previous platforms – so our procedurally generated platforms will always be increasing in height. Of course, we don’t want these values to be strictly placed – a little bit of randomness is a good thing, otherwise we’re just making a perfect staircase. So we’re using the Random.Range function, between values -1 and 2, to call random values for X and Z. You can play with these numbers a bit if you want to fool around.
Creating a Game Menu
So far, we’ve created a “game” where you can jump with increasing height and move the mouse around to control the direction. The problem is that if you fall off the platform, you’ll just fall endlessly – we need to script in a “death” / game menu to start over. So basically, we’ll write a script that checks if our sphere (character) falls below the first platform of the game. If so, the script will load a new scene. Our first step will be to check if the sphere has fallen below a specific threshold. Go into the GameManager script we made earlier and look to the if statement of the update function. We’re going to use an else if statement here, to check if our sphere’s position is below -2.0 units of the Y-position – if it is, our private function gameOver will…well, that bit of script is self-explanatory.
That last bit of script is the function to use for handling a “game over” state and load our game menu. This harkens to Unity’s Application class – we’re able to call the LoadLevel function to bring up a new scene, which in this case, is simply our game menu – remember that basically everything in Unity is “levels”. Main menus (Start Game – Options – Credits – Etc.) are basically just levels / scenes with bits of clickable text. Kind of like Skyrim’s loading screens, eh? They’re just 3D models in an empty worldspace with a loading bar. In any case, we need to create a scene through File > New Scene, and give it the name Menu while saving it. Then we’re going to add both scenes to the build process. This is done through File > Build Settings. Our menu scene should still be open, so just click the “Add Current” button and add the scene to your Build Settings – do this again with the level scene. When we die in the game, the script we created should transition us from the game level to the menu scene.
Add a “Start” Button for Players
Now, we’re able to play the game in a test-mode, but as of right now, players have no way of starting the game if we were to upload this game somewhere. So we need to create a game menu that has a button for starting the game. So switch to the game menu scene, and add this bit to the camera (in the Inspector panel, remember from pt. 1 of this tutorial?).Clear Flags: Solid ColorBackground: #000Width: 200Height: 60 This will give us a solid black background for our game menu – this is done in RGB values, not hex – so blue would be 001, green is 010, red is 100, etc. I could explain this for you, but all you need to do is Google “RGB picker” if you want a specific color. Moving on, we need to add our button to start the game. This is done through UI elements – basically, we can add UI elements the same way as we add 3D elements, through the Hierarchy panel. So go ahead and create a UI button, and you’ll see some new elements in the Hierarchy panel: To break this down – the canvas is our container for all UI elements, and we can make it responsive (by responsive I mean “scaling to screen size”, not responsive like it will answer questions you ask. That’s best left to AI scripts). In any case, we’re going to change the button’s position to this: To make this a bit more elegant, you can remove the button’s “source image”, and set a color for it. And to change the button’s text, just edit the Text element to something like “START GAME”, and give it a font-size around 16. To make the button clickable, we’ll add a function to the UIController script in the Button element. Just add this bit of code below:
Apply this function to the button’s Inspector settings, and in the Button (Script) component settings, we will simply add a function that executes when the player clicks our Start button. So just add a function to the On Click() event, and drag/drop the Start Game button to the input field. Finally, select the newly made function from the UIController script (UIController.StartGame) We can apply this function in the button’s Inspector settings. In the Button (Script)component settings, we can execute a function whenever a player clicks it. For this, we add a new function to the On Click () event, by clicking the + icon. Now we can drag and drop the button itself onto the input field. Then we select the function we just wrote from the UIController script (UIController.StartGame).
How to Export / Publish as a WebGL Browser Game
Open the build settings, and choose WebGL as your target platform. Now click the Switch Platform button, and finally, click the Build button and give your game a title. After it builds, it will be exported / saved as an .HTML file, which can be opened / viewed in any WebGL-enabled browser. Although if you want to publish your game, there are two methods to achieve this:
You can tweak those iframe values and do a number of different things with it. For example, adding iframe tags like allowfullscreen=true would allow your browser game to go full-screen. Additional Resources: I would recommend not trying to publish this game we made in this tutorial to a platform games portal; you’ll look really silly without polishing it up a bit first. One way of making your game look much better, especially if you aren’t particularly good at creating 3D models, is to utilize free (or paid) resources. Here are some libraries worth checking out: There’s really a ton of resources out there, you just to be careful and read the fine prints – some free assets are allowed to be used in commercial projects, others only let you utilize their resources if your game is free-to-play.
How to Create Basic Android Game with UnityHow to Create a Basic Android App in PhoneGapHow to Fix ‘Subscript Out of Range’ Error in Visual Basic for Applications?How to Convert a Basic Disk to a Dynamic Disk on Windows?
