Publishing to WebGL (itch.io)
00:00:00:05 - 00:00:29:19
Peter
In this video, we're going to see how we can build our game so we can upload it to Itch.io and play the game. Currently, this bill has no music, but basically we're going to build it and try to upload it to Itch.io to see if we can make it work. Okay, so in your game, in your project to make sure that you go to your scenes and the, for example, farm scene and make sure that you have your music on because otherwise you will have the bills like I had without any music.
00:00:30:02 - 00:00:51:14
Peter
Now when you have that done, we need to go to the top menu file and build settings. A new tab will appear and here we're going to be able to specify what we want to build. Now, we do not see the list of scenes, but basically we have entered this previously when we have added the scenes to our build so that we can load them up.
00:00:51:25 - 00:01:14:15
Peter
So make sure that your main menu is the first scene as this one will be the scene that is loaded first in your game. Okay, next I'm going to build for web GL, so I will select the plot from WebGL in these in this list. And we are going to switch the platform. Now, if you do not have the WebGL installed, you will be prompted to install it with Unity Hub.
00:01:14:23 - 00:01:35:28
Peter
So do that or you can use the Windows MAC Linux setup. But some steps that I will show will not apply and some will be easier because it is easier to build for Windows. But basically I want to build for WebGL because it is much easier to share with people your built in WebGL format so someone can just click the link, open the browser and play the game.
00:01:36:07 - 00:02:00:18
Peter
Comparing to compared to the windows. Build, which, to be honest, not many people download your windows build, especially when you publish it for a game gym. It is much better to select the web. Jill. Okay. And now we're going to switch our platform, so we need to click this button switch platform. It will take some time. Our screws will be compiled again for the WebGL built.
00:02:00:25 - 00:02:19:21
Peter
So let's wait a bit. Okay. After the loading both bar finishes or after everything is switched, you will see that the scripts are being compiled and there is this yellow sign that our scripts are being compiled. So again, we need to wait until that is done and we are going to see in the console if we have any errors or not.
00:02:20:05 - 00:02:54:23
Peter
Now, I do not see any errors, but if you have some errors, make sure to post a question on our discord. But basically, if there are no errors or clearing the errors doesn't fix them, make sure to ask question. Otherwise we can go forward. And there are two things that we need to do here. First one is in the build settings we are going to find in the bottom left corner the player settings and we are going to click it to open our project settings tab and we are interested in that player tab because here we can define some additional information for our build.
00:02:55:15 - 00:03:17:01
Peter
Now there are many settings, so feel free to visit a documentation of unity to read what each property does and you can have all of those described here. What we are interested in, of course, we could pass the type, the name of the company and so on, but we are interested in their resolution. First, we want to specify what is their resolution of our game.
00:03:17:07 - 00:03:39:18
Peter
I'm going to just type 1280 by 720 and I will use this resolution so that we can play in a windowed mode on a full HD monitor and we can also maximize it to the full resolution by basically this is the reason. Feel free to type any resolution that you want. If it is six in by nine, it should work.
00:03:40:06 - 00:04:14:19
Peter
And after we do this, we are going to go to the bottom tab to the publishing settings, and here is the more important setting compression format. Now, by default each I almost threw in error if I use any of those. I'm not sure exactly why, but it is best to set disabled for now for the first build and after you build it and you know that it runs, you can try modifying those settings to optimize your build, but for now we want to disable that compression and this should be it for the settings that are the most important ones for our build.
00:04:15:06 - 00:04:38:03
Peter
But there is one more thing that we should do, and that's to go to our project, step to our scripts folder and let's open any script. Although I would prefer if we open the player input form, great. If we have it opened, you will see at the top that we have those using statement, basically those import specific libraries that we are using in our script.
00:04:38:20 - 00:04:59:22
Peter
But there might be instances where some libraries were added for me have created our mono behavior and we are not using those. And very often it happens. And if we type something and use all to completion, the libraries will be added. So what we may want to do is try to click on those using statements on the valid one or the invalid one.
00:05:00:00 - 00:05:24:18
Peter
Let's click on the values. One quick action error should see remove unnecessary using, but we do not want the copied to click it just yet because we want to go to this extra window and we want to select fix all occurrences in the project. This will fix all those issues, all those extra libraries that we don't need in all of our scripts, in our project and we want to apply now.
00:05:24:22 - 00:05:48:10
Peter
Again, those are added because we are using auto completion and the IntelliSense of Visual Studio, but some of those will actually block our build from being successful because we are importing libraries that cannot be included in our build. So this is why we need to perform this step to secure ourselves from being a building, something that fails. And we need to rebuild again by removing those.
00:05:48:28 - 00:06:15:00
Peter
Now, one more thing that might happen is that you are using Unity editor for a custom editor and you have some customized or implemented that this will fail to build and you will have to use the preprocessor directives. So if Unity editor and and if and you would put some code that is only meant for the editor inside this preprocessor directive.
00:06:15:15 - 00:06:36:04
Peter
Again, you can read more about the conditional compilation inside the documentation. I will post both links in the description of this video. So basically this is something that happened to me a few times. So this is why we do those things. But I do not think that we are creating any custom editor in this course, so we should be able to just go back to Unity.
00:06:36:20 - 00:06:56:15
Peter
Okay. And if we have completed all those steps, we should be able to go back to the build settings and we are going to click build button. Now here, make sure that you select the folder where you want to create your build. I will select mine and just click on the select folder button. And now I have this missing project ID.
00:06:56:22 - 00:07:27:21
Peter
No worries about that. I want to just continue. And now the build process will commence. The first build will take longer than the consecutive builds. So do not worry about it. Just be patient and let it run. It can take up to 10 minutes to create a build. So let's see how it goes. And we are done. In my case, it took me about 15 minutes to build our project and I can see the message build completed with the result of succeeded.
00:07:28:01 - 00:07:50:14
Peter
Now if you have some errors here, you will be able to check out the console log to see what is causing those errors. You can search on in Google, what can cause it or you can ask questions or discard. If this is our script, it causes this issue. Now, if you go to the folder we have build your project, you will see all the files that were created.
00:07:51:01 - 00:08:14:16
Peter
We are going to write bulk and compress them to the zip file because otherwise we are not going to be able to upload them to the equal page. Feel free to change the name of the zip file to the name of the game and the version, for example. And let's go to the actual page. Okay. What I did was clicked on my account and selected upload a new project and here is our project.
00:08:14:29 - 00:08:42:01
Peter
We need to provide a title so far. Test two because I have already created one and we are going to slide down to the kind of project HTML. Now below here we have this uploads button upload file selected and select our zip file. Okay, here it is and just wait until it completes uploading it. During the time we can go down and select our embedded options and I'm going to select the manual size.
00:08:42:01 - 00:09:04:03
Peter
So I'm going to just input a 1280 by 720 as the resolution. If we take a look at the uploaded file, we will want to check the this file will be played in the browser and this will cause this to work in our as our game to be played as our eight year old game. Let's stay down and everything else can stay the same.
00:09:04:13 - 00:09:26:14
Peter
Let's save and view the page. Okay, now the game will be loaded into each. Let's run the game and let's see if everything works correctly. Now, if something breaks, you will see this in this screen. This will not load or some errors will be thrown if that is the case. We can right click into Google Chrome and inspect our Google Chrome.
00:09:26:14 - 00:09:51:16
Peter
And in the console you should see some arrows popping up here if there are any. But if everything worked correctly, you should see your game playing. You can start a new game and everything should work as intended. Our ACL should load up and we should be able to pick up objects. So everything should work as intended. Hopefully, if there are any errors, I will address them in future videos.
00:09:51:16 - 00:10:15:27
Peter
But for now, I think everything here works correctly. Now, here I found a screenshot of how it looks like in the console word. There are errors and those errors should give you some idea of what went wrong. We can see here at the top I think there is unity loader that Jesus didn't work correctly here in this instance, but possibly there should be a reference to your script, for example.
00:10:16:03 - 00:10:39:06
Peter
But this will only work if this is a debug built for your game. So back in our project, what we can do is select this development builder and this should produce a bigger file, but this should give us options to debug our game to see what went wrong in our build. But basically we have succeeded with our builder and everything worked correctly.
00:10:39:12 - 00:10:59:05
Peter
And if we introduce some changes and build again the build should take much less than the first to build. So make sure that you build your game before some deadline. Like for example, in a game gym, you want to build your scene or your project was before publishing the final version because very often you have only a few minutes left to build your game.
00:10:59:12 - 00:11:08:03
Peter
And the first build always takes longer and you need to test it and set everything here to be able to uploaded to each page and test it.