 So recently you may have noticed I posted some videos because I had a chance to speak up at FawcettCon in Orlando. That's the free and open source software enthusiast and technology conference, I think is what it stands for. Had a great time. I was hoping to see some of you there, but I didn't have anyone go, hey, are you Chris? From Films by Chris. So if you were there and I missed you, next time say something to me. Anyway, as I said, I got to talk and I talked on the topic of HTML5 game development. And so this is my presentation. I'm just uploading it so you guys who couldn't make it to the conference don't miss out. So I hope you enjoy this talk. It's not really a tutorial, just an overview on what's possible and what your options are when it comes to HTML5 game development. Okay, it's a little intro that I kind of am reusing for my YouTube channel. My name is Chris. My website is FilmsByChris.com. And this is me. This is my daughter, Amber, who just turned two. This is my wife, Jennifer, and we live here in Naples down south near the Everglades basically in the swamps. I'm a firefighter by day and that in no way qualifies me to talk to anybody about technology or game programming. But what does is that computers are a hobby of mine, whether they're blowing them up or breaking them or fixing them. And I do do YouTube videos, tutorials, most of which look like this, usually bash scripts, Python scripts, but a lot of programming. But I also do videos on special effects, video editing, image editing, music creation, all using open source tools on Linux. So I've been doing that for a couple of years. I like to fix computers with hammers. That's something I do. And today I'm going to be talking to you about game design and HTML5. I'm mainly going to be looking at 3D stuff, but then towards the end we'll have a quick look at some 2D stuff. So the game design using HTML5, when you're doing 3D stuff in HTML5, you basically have three options when it comes to rendering. Oh, well, first off, let me talk about this. This is a game that I was working on a few months ago. I haven't worked on it much lately. It has some bugs and glitches that definitely need to be fixed, and I might fix it someday. It's a first person shooter and I spent a month replaying all the old Doom and Quake and Duke Nukem games and a bunch of mods for them to get me in the mood for designing this because I'm not much of a gamer, but I wanted to have that kind of feel to the game. And so of course we've got explosions, we've got barrels you can shoot and they explode and fall, and you've got health packs. And all this is being done in a browser. I also want to mention that everything in this talk that has screenshots like this, usually on my desktop I'm getting 60 frames per second, but I recorded it at 15 frames a second, so it's really smoother than it might look in this video. But as I was saying earlier with HTML5 game development, you mainly have three options when it comes to rendering for 3D stuff. You have CSS, Canvas, and WebGL, and we're going to talk about all of them a little bit, but first we're going to look at CSS. CSS is probably the least used and the least powerful, but the most compatible, at least it was, the other two options are becoming much more common in pretty much all major browsers. But we're going to look at some examples here of CSS from the 3JS website because they have a few examples there. Here's a simple little molecule in 3D. Here's a panorama view. We're going to be looking at a lot of panorama views in this talk, but you can see there's glitches in there where the seams, where the images go together, and you're not going to get that with the other two options. So as you'll see as we move on, here's a basic little periodic table for you breaking bad fans. If you wanted to have this in your browser without any plugins, you can do CSS. Not only do you have the table that flew together and shaped the table, and you can move around to the mouse and highlight different objects, but there's also buttons down at the bottom of this example where you can have it go to a sphere or a helix, which is kind of like a cylinder type or a grid. And as I'll talk more later on, the 3JS website has a bunch of examples on their website, all with the source code easily viewable by clicking the button up in the top right corner. This is view source code. And if we quickly look at the code for that example we just saw, it's just over 450 lines of code, which really isn't that bad considering that a third of that is just the array of elements, as you can see right there. And a lot of that code is repeat, and it also has all the code for all the formations that they went into during that demonstration. Here's another basic example, some flat planes that are translucent. And here we have sprites. If you've done any type of video game programming in the past, you probably know what sprites are. 2D sprites can be used in 2D games, and also in 3D environments such as this. It's basically just using a 2D image inside, whether it's animated or still, inside a 3D world. Here we're looking at, again, we're still just looking at CSS. This is CSS, an example of doing a YouTube search. So I searched for Metal X 1000, which is my YouTube username, the channel name of my channel. And as you can see, we can click on and play any of these YouTube videos. And in a second here, you're going to see how I accidentally highlighted some of those objects. Because you have to remember, when you're working with CSS, all these 3D elements, they're not really 3D, they're still the regular HTML tags. They're the elements. So they can still be highlighted. They still can act like they would on a page, such as these embedded YouTube videos. So you might want to disable some default events, such as dragging and highlighting. But here, you know, there is sound. I didn't record sound for this presentation, but there's an example of me and my buddy Gabe doing a talk on my YouTube channel. And yeah, there's sound there as well, because it's just an embedded element, just like an embedded video on a regular HTML page. This option for rendering 3D stuff would be Canvas. And many of you probably have heard of Canvas, especially if you're doing 2D stuff. Well, it can do 3D stuff, or at least fake 3D stuff. Here's a basic example, again, from a 3JS website of a basic cube with different color sides. And there's a flat plane down at the bottom that creates the shadow effect. Here's the code for that. Again, you can see there's two objects, a cube and a plane. And I want to point out that when you're using something like 3JS, a lot of this code that we're looking at, it's not very long. It's very simple. A lot of it's repeats. So here's, you got mouse down, mouse move, mouse up, touch start, touch move. You know, a lot of this stuff will be repeated depending on what you're creating. So the code is actually even shorter than what you would think, because you're going to reuse a lot of it. Again, another basic example of that, only with a sphere and a texture and different type of shadow, we're actually moving the camera there and not the object. Here's another panorama. Now it looks like there's a line going across the screen when I'm moving around. And you don't actually see that in the rendering in the browser. That's just, I believe, due to the frame rate of my screen recorder causing that. Definitely a lot better performance than the CSS. Here's basic cubes. You can click on. Of course, if you're going to create a game, you want to be able to interact with the objects. Here's a voxel painting. Another interactive. If you like voxel stuff, like Minecraft, there are projects out there that use 3JS that are sole goals, are making games kind of like Minecraft. Next we're going to be looking at, again, 2D sprites. 2D sprites, again, can be very useful. They can lower system resources as opposed to using some 3D elements in certain cases. And you can do nice looking particle stuff like this, all with 2D images. And again, it's better for performance in a lot of cases. And also, lots of times, it's just easier to do. Next we're going to be looking at video. Before we looked at YouTube elements in CSS, here on the canvas, not only do we have a plane with a nice video plane, but you've looked at the ground. You can see real-time reflections. There is sound to this. It's being rendered by the browser. So you do want to pick the proper formats for different browsers. And of course, you can throw them in arrays to have multiple formats for different browsers. And here's just a basic 3D model that's Walt Disney's head. If you don't recognize him, they use that model a lot on the 3JS site. Here's just showing you basic metallic-type texture, nothing too fancy there. So we looked at CSS. We looked at Canvas for 3D rendering. And now we're going to look at WebGL, which is where the money's at. It's what you want to use when you can. And again, in most cases, you can use it. And so WebGL allows hardware rendering, which we'll talk about more in just a little bit. And we're going to look at some examples, again, on the 3JS website, which there are a lot of. Not just of 3JS examples, but just a lot of 3JS examples for WebGL. So if you look on the left here, as I'm scrolling up and down, this whole section up here is for WebGL. Excuse me. So another panorama. This one's real nice. A lot of images stitched together. Very smooth. And again, if you're a real estate agent or you want to design some sort of game where you're standing in a realistic room like this, again, you can do it now without any plugins where before you would need flash or some other plugin to create something like that. But not only do we have still images like that, here is a 3D video panorama. Video quality is not the highest because it's doing a lot of rendering. But again, no seams. The only place it kind of looks like there's a seam is on that guy's helmet there. But I think it's not really a seam. I think it's just two cameras have different exposures. The colors were different there. So it's not so much the rendering, but how it was filmed. Again, 2D sprites can be done in WebGL, which can be important in a lot of times when you're creating stuff. Next, we're going to be looking at some translucent material, glass-like material. And if you're like me and you've done 3D rendering for the last 15 or more years, back in the 90s I used to use 3D Studio Max and Bryce 3D, rendering glass stuff like that was crazy time, hardware, time for rendering, and we're doing it real time now, which just blows my mind. Here, again, we're looking at the same video we were looking at when we were looking at the canvas rendering, but instead of just on a basic plane, we have it on multiple cubes, which are going to preset positions and then back to where they were. You notice the colors are different because it's adding layer effects real time, and I'm moving the camera around, which is just, again, it's great that we can do this. Again, in the browser without any plug-ins. And of course, we're going to be looking at a lot of car models today because cars always look cool in 3D. And again, look at the reflections real time on the textures of this car. Again, I just think it's great that we can do this not only real time, but we're doing it in a web browser. Now you can change the color and the models of the car. In a second here, I'm going to click on the Ferrari and you're going to see it takes a second for it to load right here. Now, I want to point out this. A lot of people are concerned when we talk about doing stuff in HTML5, they're concerned that you need a web server and that if your internet connection runs slow, it's going to mess up the program. Once everything loads, it's running locally, just like any other program. It's just like when you have something on your hard drive, you load it to RAM before you run it. Here, you're just loading it from online and some of it can be stored on your hard drive and then load it into RAM. Now, let's talk about getting it working. So you want to get it working in your browser. We're going to look at two main browsers. We're going to be looking at Firefox. If you have a current version of Firefox, you don't have to do anything to enable it. If your hardware can handle it, it will work. If not, it'll probably crash. But there's nothing you need to do to get it to work. And that's both on mobile and desktop, tablets, phones, whatever. Next, we're going to look at Chrome and Chromium. All you need to do is enable it in most cases. It's the same on both mobile and desktop. Last time, you'll go someplace and you'll try to access a WebGL site and, let's say, an Android tablet and it's not working. You just need to enable it. So if you do open up your Chrome browser, go to chrome colon forward slash forward slash flags and hit Enter. It's going to bring up an options menu for you. And again, this is the same on Android devices as it is on your desktop. The first option in the list here is override software rendering list. Click enable that, relaunch now, which restarts your browser. And then you can go to the website that's utilizing WebGL. And it should work. Again, two things you need to have to get WebGL to work is a browser that supports it and hardware that's accepted. And from my testing, going to Best Buy and playing around with the tablets, pretty much all modern tablets will allow WebGL once it's enabled in the web browser. So again, there's just an example. After I enabled it, I went to my Metal Bullets game and it's working. So what about performance on tablets, desktops, hardware, how well does it perform? Well, I've made a little test for myself, but I'm going to share it with you. You can go to filmsbychrist.com, forward slash scripts, forward slash game basics, forward slash BabylonJS4 slash tests, or I made a tiny URL for you. It's tinyurl.com, forward slash WebGL tests, all one word, all lower case. And I'll bring you to scripts that I created, mainly because I just recently bought my wife a Samsung tablet. I'm hoping to get one for Christmas. I wanted to go to Best Buy and be able to compare them. And so that's why I created these scripts. And they're on my website, so you can go there. The first one is just a basic, it creates a bunch of random cubes. You can click on the screen to make the camera jump and you can also drag and look around. I want to point out, always ignore the first output because what it does is it creates a bunch of meshes and every 50 meshes, every 50 cubes it creates, it gives you an output of the frames per second. Now my desktop, I'm actually getting 60 frames per second, but the first readout will pretty much always say 60 frames per second, because it takes a little while to calculate that. But as you can see on my desktop, getting pretty good performance. A lot better than you're going to get on most tablets, but even on cheaper tablets, like I tried the Barnes and Noble Nook, that's like $130, I think I was getting out of the box right off the bat, 15 to 20 frames a second for those first two tests, which the second one was the same just with textures, which made no difference. Here we're looking at the same tests, but with physics. And now this is going to slow down your system a lot more. Again, here we're recording on my desktop, pretty good performance. Here's the same thing, physics, but with the textures. And the thing is the rendering is done with the GPU, but the physics are going to be using some CPUs, and I'll talk about that in a little bit. Here's the same tests, but instead of cubes, we're looking at spheres. You would think that it would affect performance because there's a lot more polygons. As far as, again, when we're just doing the static cubes without any physics, pretty much get the same amount of performance. Now, with the physics, though, when the spheres are falling and bouncing and rolling, you would think that that's going to take a lot more power than a basic cube with six sides. But actually, every machine I've tested on, I get better performance with the spheres than I do with the cubes. And I haven't looked at the code, but it just goes to show something like that where you think of more system resources. You can see I'm getting a steady 60 frames per second here. Whoever designed the physics for that, the physics engine, which was Canon JS, and I'll talk more about that in a little bit, obviously did a great job of writing it, which brings me to a point of not only is it your hardware, but if you write out the code well, it will run better, so good code outputs, good performance. So again, with this, are using the GPU or CPU. So with CSS and Canvas, you're using the CPU for rendering. With WebGL, you're using the GPU for rendering. Now, the rest of your code, since we're working with HTML5, you're writing in JavaScript. That will start using the CPU. So again, here, I'm using Babylon.js framework to work with WebGL to create the scene and the spheres. But we're using Canon JS to calculate the physics, the falling, the bouncing, and the rolling. And that's going to be a JavaScript that uses your CPU. So when you're looking at the static stuff rendering out, it's using a GPU. You should GPU go up, but if you do the others with the physics, you'll see your CPU go up. So now, again, it's JavaScript. It's a scripting language and that's not good, right? Well, if you create a game in Blender, which is fun, you're using Python, which is scripting language. And really, if you look out there a lot, a lot of the game engines out there, a lot of them use scripting languages. Yes, binary languages theoretically will give you better performance. But again, how you write the code is important. And if you are using WebGL, then WebGL should be using the GPU for the rendering at least. So let's talk a little bit about what WebGL is. WebGL is basically OpenGL crammed inside a browser that can talk with JavaScript. So let's talk about what is OpenGL? OpenGL, well, it's a cross language, multi-platform API for both 2D and 3D graphics. It's basically for rendering graphics, 2D and 3D. It's been around since 1992. It's not new. It's been around for a long time. It's widely accepted and widely used. In fact, it's used a lot. And we're gonna look here at a short list of some of the more popular notable programs and games that use OpenGL, Alien Arena, America's Army, American McGee's Alice, which is a great game if you've never played it. Angry Birds is on the list. Doom 3, Counter-Strike, Fretz on Fire, which is a fun game if you've never played it, that you pick up the keyboard and pretend like you're playing a guitar. Heretic, Hexic, Half-Life, Max Payne. Now, I'm, as I think I mentioned earlier, I'm not a gamer. I much rather make games and play games. I do, like, an occasional game, but I don't have any gaming systems. But I recognize a lot of these game names. So if I recognize the names, like all these Star Wars games, that means that they're probably pretty popular. And as you can see, a lot of them are using OpenGL. Now, that's just a list of notable games. There's also a list here on Wikipedia of some open source games. This is, again, just some of them. You've probably seen some of them. And not only are there proprietary games and open source games that use OpenGL, but there's also a lot of applications such as Adobe After Effects, Photoshop, Adobe Premiere, 3D Studio Max. I think some of those give you options on how you want to render and you can choose to use OpenGL or something else. Anyway, what about support? So as I mentioned, you need a browser that is supports WebGL. And right now, most major browsers do Chrome, Firefox have for a long time. Internet Explorer has for like a year. Safari just recently, just one of the last few months finally started supporting it. I was really surprised. Not that I'm a big fan of Apple, but usually they're a little bit ahead of Microsoft, but they were way behind. Mobile, pretty much all mobile browsers. And if you're running an older iPhone and you want to use Safari, you're gonna have to jailbreak it. I'm thinking maybe you can install Chrome. I'm not sure about that exactly. So how do you get started? If you want to design something in HTML5 and you want to use WebGL, well, you could learn the WebGL API. Obviously, that's an option. And there's definitely documentation out there. Here's a website that has examples and tutorials. So there's a basic pyramid and cube with gradient colors through them spinning around. And this is the code. And it's really, it's not that long, but it's a little more, I don't hate to say, but complicated if you're not, you know, here, we're setting the points for each vertices and where the faces are. And yeah, you could go that route. I haven't really played around that without myself. So you could also use some other APIs that work with WebGL, some frameworks. And again, we've mentioned both BabylonJS and 3JS. Those are the two main options. I couldn't even name some others, although there might be some out there. So if you don't want to write every little bit out, you can use these packages. First, we're gonna look at the 3JS, which I've really looked at some of the examples from their website. It's been around since 2010, so four years or so. It's an MIT license and has lots of examples. So far, we've looked at examples from their website that's created by the creators of 3JS. Well, here we're gonna start looking at some other websites outside of the actual developers. So here, like Batman, Arkham Knight, the game, the game isn't necessarily using 3JS, but their website has a view of the 3D Batmobile that you can go through. Seems like a lot of musicians like having interactive sites. This is a website, I cranked up the music, it started playing, pulled out a keyboard, and I'm actually playing along on that piano with the music, and there was, again, actual sound. I didn't record sounds for the presentation. I mentioned that I'm working on a third person, or I'm sorry, a first-person shooter. Here's somebody else who's doing it. I've actually talked to this guy in the forums. He went more of a voxel look for it. Google. Google has used 3JS a lot. I think they somehow have supported 3JS. I'm not sure we're sure of their involvement, but they have used it a lot, and I think that they have helped out with it a bit in some ways. This is a website that this band released their entire album on the website, and every song does this little, it's like a 3D MIDI track. Every instrument is displayed there as it plays real time. I don't remember this company, but this was a green tea company, and they just made this whole serene underwater, you know, move around. I don't really know if there's a point to it. I couldn't find any point to it other than move around. It was The Great and Powerful, it was a movie that came out a little over a year ago, year and a half ago, and you can go through basically the whole movie in the 3D world, and it utilized 3JS. And again, as I said, cars always look good in 3D, nice and shiny. Here's just an example of some 3D models. Again, you can change the models and the colors, and move all around. So, those were just looking at stuff. They were environments to move around, but what about some actual games made with 3JS? We'll hear some again, some of the examples that are linked to on the 3JS website. This one's called Kid Disco, and of course, you know, when you talk about games, one of the very popular style of games is a side-scroller game, and this is a, you know, a running, jumping, side-scrolling game with some music, and you just jump, avoid the spikes and falling. I mentioned CanonJS earlier. Here's another JavaScript that's for physics. They have a little Jenga example. Here's a game, it's like a Podbracer. Games like this are fun and a little addicting. They got some layer effects there over the image. This right here isn't necessarily a game, but I am controlling that car with my keyboard, and the camera changes so often, depending on where the car is placed. This game is pretty addicting. It's very simple. Music's playing. You can see the colored lights are blinking. They're actually blinking along with the music, real-time, and the game has two buttons, up and down, and the point is not to crash into these force fields in all the doors. If the opening's up, you go up. If it's down, it's down, and if it's in the middle, you go in the middle. 3JS supports all three canvases, the CSS and WebGL, and it also makes it very easy for you to go from one to another as far as rendering, which is nice, because it will allow you to do some fallback stuff. Basically, right in your code, I want to render this with WebGL, or I want to render this with Canvas, but if you want, you can say I want to render this with WebGL if available. If not, then use Canvas. So, like I said, most browsers nowadays, most major browsers, support WebGL, but if your hardware doesn't support it, Canvas might still be an option and it will automatically fall back to it if you write it out like that with a basic if-then statement. So again, 3JS and BabylonJS are the two big players when it comes to helping you out make 3D games in the web browser. Now we're going to look at some BabylonJS. BabylonJS hasn't been around as long. It's been around since 2013, so over a year, it's simple. I find it's a little simpler to use than 3JS and it's under an Apache II license. So I prefer the MIT, I prefer GPL, but either way, they're open licenses. You got to take into account your feelings on those matters. Here's a basic example of a motor. We've got some animations here. Here's a basic presentation that you can go through and you can click like a slideshow. You can move the camera around, which is something I want to talk about. With BabylonJS, it makes creating cameras very simple and you have three basic types that are in there by default. You have what's called a fly-through camera, which obviously allows you to fly through. It's kind of like a first-person shooter, but not necessarily with gravity unless you add gravity. You also have the arcing camera, which basically means the camera is stationary in one point and when you move the mouse or the arrow keys, it arcs around looking around it, but the camera stays in one position and the third, I can't remember, I think it's called an orbiting camera, where basically you give it a point to look at and then when you move the mouse or use the keyboard, the camera rotates around that point, continuously looking at it and basically you just say, when you create a Babylon scene, you say create scene add this type of camera. Here's basically like a fly-through type of camera. It's another example on their website of a lab here and you get just to walk around and look at stuff and you can see it's very clearly rendered, got some reflective stuff there, which I think is fake reflective stuff, not real reflective material. Here's a walk-through, kind of like a first-person shooter, it's not a shooter though, so a first-person view of fly-through here with physics, the walls and stuff, stop me, I don't go through them, although you can turn that on and off. And right now, WebGL is and stuff, 3D stuff like this is great for games, but in the future you might have websites where you can walk through and look at the data. I don't really see that happening, but it could. Wouldn't recommend designing a website that's for useful stuff like that in WebGL now. Anyway, here's another car. Look, you got rays of lights coming through the sky, reflective material, a very detailed car, even has a GPS unit in the dash if you look in the window there. So again, cars are always fun to look at in 3D and the lighting affects real time in the browser. So again, WebGL, I'm sorry, BabylonJS has plenty of examples on their site. I don't feel like it's as organized as well as the 3JS. 3JS definitely has it all cleared out. You can look at the source code for each example. We're here, it's all in one page. You kind of have to pick apart the code to find the code for each example, but the creator of it is fast to answer questions. If you go to HTML5 Game Devs, it's a website not just for BabylonJS, but for HTML5 games in general, there's a BabylonJS section, which is considered the official BabylonJS forum. If you go in there, if you ask a question, everyone's very helpful. And usually within 24 hours, if no one else has answered, the actual creator of 3JS will answer your question. Downside, in my opinion, of BabylonJS, and I didn't know this when I first started using it, is it is owned by Microsoft. The lead developer works for Microsoft, but it is still under an Apache license. So again, take into account what licenses things are under that you are using and what you're gonna wanna release your code as and if it's compatible. So you might ask, do I have to write out every little code for every little thing? For example, when we were looking at the WebGL API, you had to put all the vertices and where the faces were, and the answer is you can, but you don't have to, and really you're probably not going to in most cases. Both 3JS and BabylonJS have their own JSON formats for both models and scenes. If you've done JavaScript stuff, you're familiar with JSON most likely. It's a very easy to use plain text. You might be a little more familiar with XML. It's kind of like that only I like it better. And if you actually look at a lot of the common formats out there for 3D models and you open up in text editors, a lot of them are already in a text format, which makes it easy to convert from one to another format. And really 3JS can actually import a lot of those models because it just does a conversion there real time, but both 3JS and BabylonJS have their own Python add-ons for Blender 3D. So you download this little Python script, put it in your add-ons folder for Blender, restart Blender, and now you can export for either of those and then you just import it with your code. It's, again, a plain text file. And Blender can import most common model formats. So that's how I would do it, import whatever model. And you can design a game in Blender, but you would basically do the programming in JavaScript. Again, my project, Metal Bullets, one of the points of it was so that you can create a full first-person shooter in Blender with doing little to no coding. Basically you label a gun, this is a shotgun and it works as a shotgun. You label something as a door, it wrecks the door. You label it a robot, it acts as a robot and you just import it with my code. Other HTML5 features that can be useful if you're creative, if you keep up with HTML5, HTML5 gives us a lot more access to hardware that we didn't have before in the web browser without plugins, webcams, microphones, gamepads, web sockets. So here's an example. Very basic game I made, 2D game with Phaser 2D, which I'll talk about in a little bit. Plug in a game controller, wrote my code, look for the game controller and use it if available. And now I can use a game controller. Game controller's really no security there, so it doesn't even ask the user, do you want to use the game controller? Do you want to allow that? It just does. Another option, this is a game that I was working on that uses the Google Speech to Text API. Now, this Google Speech to Text API isn't necessarily free or open source, it's free and cost, and anyway you can use it, it gives you 60 seconds at a time of voice to text, real time translation, without a half a second delay, maybe less. So basically this game that I created starts up, asks the browser, asks the user, do you want to allow this website to access your microphone? If you click yes, then you can say commands like forward, basically there's commands forward, back, left, right, stop and jump. And you can use those incentives as well because it just looks for the keywords. So I can say, can you please jump? Will you please move forward? Player, move back. And when it detects those words, it does it. And the little Ninja Turtle art I stole from another video game, but basically you have 60 seconds to collect as many pizzas as you can. Of course there's that slight delay with the voice recognition and that's what makes the game difficult. So another option that I haven't played with but since you can access a webcam with HTML5, you could probably do some motion detecting. Now when it comes to 2D stuff, we're gonna look at this really quick here. There's lots of frameworks to choose from. I haven't really messed with most of them. The only one I've really played with and I've played with it a lot is Phaser 2D. Why did I choose Phaser 2D to be what I go with? Well, it has great documentation and examples. Currently on their website, or at least the time of recording this, they have an example website, examples.phaser.io. And when you go there, they have 341 examples, all organized in the categories. So I'm gonna scroll through here, let you see different categories, how many examples there are in there. And so I haven't even had to go into the forum, just like 3JS, neither of them, I've had to go and ask anybody for help because everything I've needed has pretty much been in the examples they offer. So here's one of the examples on their website, basically a little physics character bouncing around with some output. There's the code. This is the entire JavaScript code for that. Here's another example with different types of gravity and sprites. This is the entire code for what you were just looking at above. Just throw that into your JavaScript there. You wanna create a basic, you wanna create your new version of Angry Birds. Well, they already have code to help you at least get the slingshot going there. And again, the code's down below. Here's another example. This just moves the sprite where I click and increases its speed. It has some physics to where it bounces off the walls. Here's a game where I'm using the keyboard and you can see the physics of the two objects acting upon each other. And I also wanna show that you not only have square bounding boxes. You can also have other shapes for bounding boxes. You can see here there's a slant and the box will slide down the slant. So those are just a few of the many 341 examples on the Phaser website. It uses both WebGL and Canvas. You can tell it to do auto. Use that in your script and it'll fall back to Canvas if WebGL's not available. So even on older iPads that don't accept WebGL, it should work. Its Phaser 2D is under an MIT license and that's pretty much for this talk. I only had 40 minutes to talk and I wanna have some time for some questions. Here is some of my information to get ahold of me. My name is Chris Acapinti. My username on most websites and on YouTube is Medilex1000. My website is filmsbychris.com. That's Chris at the K. Anything I write and code, we'll usually go up on my GitHub account, github.com forward slash Medilex1000. Most of those projects I have on GitHub are in every hour synced with my website. So if you go to filmsbychris.com forward slash scripts, you can see any of my HTML5 stuff displayed real time in the browser and see how it works. And then if you like it, you can download the code from GitHub. If you wanna talk to me, filmsbychris on FreeNode. And if you did enjoy my talk on this presentation, you end up going to my website, watching my videos and wanna help support my work. I do have a Patreon account, patreon.com forward slash Medilex1000. I thank you for coming to my talk and thank you and I hope that you all have a great day.