Deploying to WebGL

[00:00:00]
>> We're at the last part here where we're gonna deploy this to WebGL. And like I said, this is hopefully going to be perhaps the easiest part of this. This is a script that is already in the project we don't need to write this because frankly this is kind of beyond the scope of a beginner lesson.

[00:00:27]
But it was something that was necessary because of MacOS Monterrey, I had to add this to make it build on Mac. If you're on Windows it should be fine and even if the script is in the project it shouldn't affect Windows builds. But I will explain it, because it is there.

[00:00:45]
So, in unity, you can add scripts that pre process your build. So as you're building something, or creating a build and outputting it, you can process that build in a number of different ways. And this actually uses the Unity editor name-space rather than the Unity engine name space.

[00:01:10]
And anytime we're using the Unity editor name-space we need to wrap that in some pre processing directives. Or a compilation directive I should say so that that doesn't get included in our builds otherwise unity is gonna throw an error. And this only needs to happen on os 10 so that's why it says Unity Editor OS 10, so if this is OS10.

[00:01:37]
Then we need to do this pre processing step. So what is the step? Well, it turns out in macOS monterey and possibly later if you're watching this in the future, you'll need to add this build preprocessor because it points to the location of python three. In macOS Monterey, they didn't include python 2, and that's what unity is looking for.

[00:02:03]
And we need Python in order to do a WebGL build. Right now I am not set to create a WebGL build. So I'm going to go to file, build settings and, I need to switch my platform, over to WebGL. So I'm gonna choose, switch platform, and, that just needs to convert all of the raw assets that we have, into a format that webgl is going to understand.

[00:02:34]
So any time you switch platforms. There is going to be a little bit of a step here where everything has to transfer over, and that should be finished momentarily. Okay, and it's going to continue doing the script compilation. We might get a few materials here that are still processing, okay?

[00:03:07]
Cool, let's hit play here to see what that looks like. Make sure these came in okay. Yep, l did, just the previews that look kind of funky there? So now if I hit build and run. I'm going to put this in my builds folder. And I'll say unity for a web developers WebGL, and I'll create a new folder there.

[00:03:42]
And well, actually I don't wanna do that. That's what I wanted to name the project. So I have a build folder, I'll say unity for web developers, WebGL. And that's what it will save it as. And this build step could take anywhere between 30 seconds to several minutes or maybe even longer.

[00:04:10]
It depends on the size of your project. It depends on the speed of your computer, and depends on all manner of different settings that you might have set in unity. And it also depends on how recently you compile the project because a lot of things do get cached, and that can help shader compilation happen a little bit faster.

[00:04:34]
So we're just waiting for this to finish.
>> So with you in particular about unity that are not unity but WebGL that causes the compilation time to take a little bit longer.
>> I don't know and that's kind of the beauty of unity is all that is abstracted away.

[00:04:54]
I'm sure there's a reason, but I couldn't explain the entire software stack. [LAUGH] I assume it's probably doing some kind of intermediary language stuff there. Unity has a system called ILSSTTP which allows it to basically compile a lot of stuff to C++, in this case, it's not doing that because we're going to WebGL.

[00:05:29]
But on other platforms, especially, say console that allows you to run unity code much faster than you could with just C sharp scripts. And now if we switch over to the web browser, I can see that it opened a port on our local hosts. And so this is just running with Python without us having to set up a server or anything like that.

[00:05:55]
So it's doing it all on its own, and press Start to start playing Browser. And now, yeah, you can see the game running in a web browser and you can even hit it to go full screen. The UI is a little bit small here. I think that's because of the resolution that this is being captured at.

[00:06:21]
Just perhaps some of Apple's magical retina technology taking over there and giving us a really weird screen resolution that unity is picking up on. But other than that, everything looks pretty good here. All the materials are responding to the lighting in the way I'd expect. If the player or the opponent falls off the side we're getting reset So we're able to grab the collectibles.

[00:06:47]
The timer is ticking down, the scores are being calculated. And once we get to the end here, we should see the end game screen. I definitely lost. You lose and you can press space to restart the game.