Game on: Developing HTML5 games
Norås, Anders
The marketshare of HTML5 capabale browsers in combination with bowsers being part of phones, TV-sets and other gadgets, HTML5 has grown into an interesting platform for game development. In this talk Anders Norås will show you how to build a professional quality game, playable on desktop computers, phones, tablets and more using the Quintus gaming engine. Along the way you'll learn how to program games, central game design concepts and get a few ideas for becoming a millionaire selling $1 games of your own.
 Okay guys, good afternoon. We're sort of halfway through the conference. Have you guys been having a good time so far? No? No? Is it all that boring? Yeah, there's one thumb up at the back there anyway. So, welcome to this talk. I'm Anders Nouros. This is where you find me on the intwebs. This is going to be a talk about HTML5 game programming. And speaking of games, I do work for ITERRA as their CTO. We get a booth down there and we got this awesome little flipper pinball game, all ITERRA themed. So, I suggest you guys go down there and play a couple of rounds. There are some pretty awesome prizes for you if you've managed to get the high score on. So yeah, game on. Now, most of you guys who have seen me talk before, always see me doing talks about like enterprise style web development and things like that. And that's mainly what I do at work. But once in a while, I actually get the opportunity to do something fun and something different. And a while back, I actually worked with one of our clients who wanted to do something with mobile web. And one of their ideas they had was creating some games. So, that's basically where all this started. And that sort of fits nicely in with where I'm coming from. Now, the day before the conference, I don't know if you guys know, but the NDC did something really, really awesome this year. They had this kids code club here in Oslo. And they hosted a hackathon for kids aged 8 to 18 over at the top floor at Oslo Plus. And there were like 150 kids in there learning how to code. And I think that is a brilliant thing to do. It's a good thing to do for the community. And you also have something called Riverside down in the expo area, which is a youth club. And they're also working with NDC and working with companies here in Oslo to teach kids how to actually use computers in a creative way. So, I figured this is a good opportunity to show you guys what I was up to when I was a kid. So, I'm actually going to start off by showing you something that I created back in 1991, I believe. So, I was part of the demo scene. So, this was built on an Atari ST computer. I don't know if any of you guys have ever seen that. Yeah. That's a classic computer. I just have to hit play again here. So, this was built in 1991. I think I was like 14 at the time or something like that. And this is where I started out programming. So, while back this was all Motorola 68000 K assembler. And this was kind of hard to do at the time. So, we had to teach ourselves maths and all that stuff. And many of the guys I used to hang out with and do this stuff with went on to start in the game industry. Like one of my friends from the time, he actually failed in maths at high school because he insisted on doing maths with 512 degrees in the circle. It didn't really matter much to him if he failed in maths because he actually got picked up by Sony and started working on the PlayStation team as soon as he was finished high school. So, this was the kind of stuff we did back then. And I always had this little fascination with doing things with low tech stuff. So, these days, if you look at the demo scene, you can actually do just about anything. So, what fascinates me these days is what amazing things people managed to squeeze into like 64 kilobytes of code. That's less than your average web page. So, what you can do with limited means is kind of interesting. And that sort of brings us to developing games in the browser. Because the browser has always been also kind of limited. So, I think for today, we're going to do something a bit retro and kick it all school. So, we're going to be using a gaming engine called Quintus. You'll find it here on the web. And it's actually a very simple little thing. So, the first thing we have to do when we're going to create a game is that we have to create our world to actually have our game in. So, let's just dive right into the code. So, what we need to do is that we need to actually listen for the load event on the window. So, let's do that. Hook up this and just pass in a function. I'm not using jQuery for this because this is actually the only thing that we need to do the stuff that jQuery would help us with. So, I'm kicking it all school this way as well. And let's just go and create an instance of the Quintus. Let's assign that to window key as well. And create the actual gaming engine. Now, we're going to need a couple of things. And the Quintus is very module-based. So, we have to include the modules that we're going to be using. And I'm just going to get them all straight away. So, we're going to be working with sprites. And, actually, what we're building right now is the scene. So, we're going to need scenes. We're going to need a way to interact. So, we're going to need inputs. We're going to make a two-dimensional platform of games. So, let's bring in the 2D module, the animation module. The touch module will come nicely in. And the UI. And maybe some audio towards the end as well. Let's add that. We have to set up the engine as well. So, let's just do maximize and true. So, it runs full screen. And then, start to controls. Oh, snap. Okay. Seems like... Well, seems like Chrome is acting up. Let's just bring it back in. The magical thing when Chrome crashes is that it writes all the code for you. So, yeah. So, I was somewhere in this area writing some code. And then Chrome went ahead and did this for me. So, I'm just going to walk you through what Chrome did. So, up here, we set up our engine that we're going to be using. And then Chrome added this thing down here, whether it's actually loading the assets that we're going to need throughout the game. So, the tiles ping file is a set of small little bits that we can build the scene from. And the level one collision JSON file is the actual map. We're going to look at this in a moment. And the next thing Chrome did was that it went in here and compiled a spreadsheet for the tiles. And that is going to be known as tiles from now on. It uses the tiles ping file. And it just tells the engine the size of each of the sprites in there. And then I think it went ahead and did this thing, which is creating an actual scene object. So, this scene is going to be known as level one. And it's going to have a collision layer. Now, collision layer is something that detects if something collides with it. So, it goes with the name. And that is going to be a tile layer. And it has a data asset, which is this little JSON file. And it's going to use the tiles sheet. Finally, Chrome went ahead and staged the scene. So, let's just go ahead and look at what it made. So, we have this. We have sort of something that could resemble ground. I think this kind of looks like a classic Commodore 64 game called Boulder Dash. More or less. Anyone play that? Oh, yeah. Oh, lots of old-school gamers in the house. You guys like that? Because I remember when that game came out, it was like, wow, the graphics in this thing is awesome. So, now that's the key for you guys to say, wow, the graphics up there are awesome. Yeah. So, yeah, the spreadsheets. So, the spreadsheet for this actually looks like this. This is something that I picked up from an online resource for creating RPG games. There are lots of communities there who share creative commons, licensed stuff. It's a good place to go if you're a bit wishy-washy inclined and not that good at drawing, where you can get awesome graphics. So, this is what the spreadsheet for this looks like. And that is actually built into this little map that we're seeing by using a tile map. Now, I know the text is real small. And that's because I wanted to show a whole lot of stuff on her at the same time. But whenever there's a zero in here, so this is an array of arrays. And whenever there's a zero, it's going to be a blank space. But whenever there's something different, it's going to be something there. And all these numbers, like 160, that corresponds with that little sprite which is shown here, which incidentally is at location 160 in this file. So, it's just numbers. Creating these tile maps, it's kind of tedious. What you do is set it around. You tweak this, hit reload, and sort of build this up. If you're thinking about building something serious like a big game, you probably won't be doing this for too long before you actually find it a good time to sit down and write a little tool to actually build these things. So, if you guys are looking to pick up on this afterwards and create your own little game, tell me how far into the process you got before you actually took time to do that. Yeah, so that's the tile map. Well, no game is really any good without someone to control around on the board. So, let's go ahead here. And I think that actually Chrome has gone in here and actually written some code for us here as well now. So, I'm not going to rewrite all of this for you. Instead, I'm going to just walk you through the process of this. So, we have like all of the things from before. So, the main new thing that's on here is this one that we actually create a sprite. And this is the first place where you actually get to meet the object system of Quintus. So, Quintus borrows that little concept from underscore.js, but it's not using underscore with using an extend method. Now, there is one thing for those of you who are... So, where did my picture go? I have video here. So, my Mac has a blue screen, but this thing has. Could we get some visuals back? Something happened. It detected. Yeah. There it is. Okay. Thanks. Wherever that technician is. Okay. So, yeah. The way that the object system in Quintus works is that when I specify a string here with the name, that actually becomes the name of the JavaScript object later. So, that's a bit odd. That was the first for me. I haven't seen anyone do it in a similar way. So, it's a nice thing to be aware of. Apart from that, this is the old JavaScript extends object orientation pattern. So, I just pass in a hash here, which is where I implement my different methods. And for this one, I'm just implementing the init thing, which is where I set up all of the controls for this thing. Another thing is that I've also added here a hero ping file, which is the actual sprite, and compile the sprite sheet for that. So, when this sets up, Quintus uses the convention of underscore super to call the super class. And I can delegate everything up to the Quintus framework for setting this up. So, I just pass in the sprite and tell Quintus which sprite sheet to use, which is the hero sprite sheet, which we loaded for the down. And the position in our world, the x, y coordinates to where to place this one. And finally, I go in and add a couple of modules to that sprite element. Now, these two modules will give me a couple of things. Let's start with the last one here. The platformer controls is actually going to enable me to move this thing around in the world. And the first one gives us all of the 2D controls. So, things like gravity, which is sort of essential. Otherwise, you'll fly up in there, or you need negative gravity to do that, so you'll be standing still. It's handled by that module. And finally, we do this thing by creating an instance of our hero and just insert that into the stage. So, here you can see that we're referencing the hero object or the hero class, which we created by using a string further up. So, this is a bit odd. As I said, this is the only place I've seen this done this way in JavaScript. There might be others doing it similarly. And finally, I'm adding a viewport to our stage. And I'm telling that viewport to follow the hero around. So, just go in here. I'm going to reload this frame. There. So, we have this little guy on there. And I'm actually able to control them around and jump and do all of those things. So, you can see that when I jump, we got this nice little curve, which is all handled by the 2D module, which this is where gravity comes into the picture. So, yeah. But he was a bit static. So, we need to add some animation to this. And we're not going to be using an animated gift for that. So, we're going to do it in that way that I've seen a lot of websites do to actually get embedded animation within web pages. You see this at the Apple website all the time. So, whenever they want to have video, which is not video, they actually do this image manipulation where they play, where they have this of the images and just move things around on a canvas. And it's basically the same technique that we're going to be using here. So, and this is where this little animation module comes into play. So, what we do is that I've set up this little scheme of animations. So, I create a set of different animations for something called People. And I do that by passing in a hash. Now, we're going to have four different modes for this little hero character of ours. It's going to be able to run to the left, run to the right, and stand facing left, and stand facing right. Now, all I need to do to make that happen is that I need to reference some frames. And if you recall when we looked at that tile sheet, this broad sheet for our hero character looks exactly the same. There are just little boxes with different versions of that sprite in there. So, when running left, we're going to be showing in order, sprite 0, 1, and 2, and then looping it around again. And we're going to be animating this at the rate of 1 divided by 8, which is going to be the animation speed of this. This is usually a property that you need to fiddle around a little bit with, depending on how many frames you have for your animation, how fast it's going to be moving, and things like that, for it to look natural, more or less. Similarly, to run right, we go for frames 3, 4, and 5. So, these are stacked on top of each other. And we're just showing one frame when it's standing still. For a bit more advanced game, you probably would like to have some animation there. So, you see, like, sprite standing like that's ready to move, like, real ego. But here, we're not doing that, and then we're setting the loop property to false. So, it's just going to play this and not loop around. The only things that I've done with the actual sprite object here is to add a reference to this animation configuration that we just saw, and then also go here and add in the animation module, so that this sprite has this. One fun thing, though, is that I've added a new method called step. This method here is going to be called by Quintus whenever it redraws the world. So, whenever there is an animation step, this is going to be called. And what's happening here is that we reference the actual player object or the sprite object, and we look at the velocity on the vertical axis. So, the VX property here is the vertical velocity of this sprite. If that is larger than zero, we know this sprite to be moving to the right. So, then we queue the run right animation by calling the play method and passing that in. Otherwise, if it's less than zero, we notice it's moving right. Otherwise, in which case it would be zero, we want this to stand still. If it's not moving, we need to know which way it's going to be facing, if it's left or right. We actually have that as a property as well. So, we have a direction property on here. And since I named these things stand left and stand right, we know this property to return left or right. So, we just concatenate that with a stand string there. And that's just about it. So, if I go here, I'm going to have to reload this frame again. There it is. Just click in here. And as you might notice, it's kind of subtle, but it's moving. It's moving its little, tiny little arms and legs around. So, starting to look like something, but it's not much of a game. So, we need some opponents as well. And we're sort of getting into this little wizard-send fantasy kind of thing here. So, let's add a little knight sprite to this. So, this is going to be the same thing all over again as we did with our hero. So, we're having, including another sprite asset and creating a sprite sheet for that. And creating a new class called knight. There's one more thing here because this guy is not going to be controlled by us. He's going to have a mind of his own. So, we're adding some AI for this little character. And for a game like this, it's really an easy way to just make him think is to include the AI bounce module. Now, the way that works is that whenever he's walking over and he's going to hit something, he's going to turn around and then just continue walking straight ahead until he hits something and turns around. So, it's going to create some life, but it's going to be kind of simple. And again, he has the exact same step animation feature here. One more thing that we need to do is that this guy has got to hit the ground running. So, we're specifying the vertical velocity as soon as this thing is created just to have them moving straight away. So, inserting this into the stage is just like inserting the hero sprite. We just create an instance, specify the location where it's going to be, and insert it using the stage insert. One final thing is that we... This is a really, really evil night. So, whenever our wizard bumps into him, we sort of have a game over situation. So, that is handled by this little hit event handler here. So, the Quintus game engine has tons of different events that are related to what you want to be doing in the game. And what events you have are really defined by what modules you include. Now, since I have the 2D and platformer things in here, I'm going to have a hit event. So, this is whenever the hero object hits something else. This event is going to be invoked. We get paused in a collision object, which is whatever he bumps into. And then we can just go ahead and ask if the collision object is a night. So, it's got this nice little very readable interface. So, it has a fluency to it. Kind of like that. And if that is the case, for now, we'll just grab hold of the stage and pause that. So, the game sort of ends. You're going to have to hit reload again here. There. You can see the bad guy down there heading away from us. But we really don't have any way to beat him up at the moment. So, I'll try to jump over him. Ah, no. I didn't manage to jump over him, which made this hit event occur and our game stopped. Ah, game over. Okay. We need to be able to give this guy a bit of a beating, I think. So, for next step, let's, since we have a wizard, I think wizards are pretty cool if you throw fireballs. So, for that, we are going to create yet another sprite. And we have fireball ping. This is a bit different size than the other one. And that goes for night as well. So, even if the tiles in the background are like 32 times 32 pixels, you can actually have sprites who don't fit in with that pattern. The only thing you have to think about is, like, when I had this rocky roof, you need to be able to place things in your tile sheet in a way that you actually have room for the sprites to pass through. Because the collision detection is going to bump into anything. It uses a masking algorithm to see if this thing hits something else. So, again, the fireball is a bit smaller. For creating the fireball object, it's yet another case of extending the sprite object and creating a fireball. For this, we actually go ahead and set the gravity to zero. Because otherwise, whenever this wizard throws the fireball, and that could be a bit cool as well, it drops down into the floor. But we want to have this really powerful fireball thing. So, when it throws it away, it's going to fly ahead. So, and for it not to drop to the floor, because everything is affected by gravity, we set the gravity to zero. Now, this is something that you would need to do if you are creating something like Mario. So, whenever Mario wants to jump up and pick up those coins, you want to have these little coins flying around in there, you need to set the gravity to zero and all those things as well. Okay. So, similar to how we handled bumping into that wizard, we also had a hit event for our fireball object. So, this is going to be cool whenever the fireball hits something, where we can can wreak havoc and have massive destruction of things. And in this case, we're just checking if we if we hit the night. And destruction is handled through destroy. So, what basically happens here is that we take our collision object, refer to the actual object within it, and which is going to be the sprite, and that is going to be a night in this instant, and destroy that sprite, which will remove it from our play field. Otherwise, if this hits something different, and in most cases here, that would be a wall or some kind of brick, we just destroy the sprite itself. And similar to the animation step for this one, it's going to be a bit simpler, because this is going to be moving all the time, so we don't need to stand still. So, it's either going to fly right or fly left. But the mats behind this is just the same thing. But that's just a fireball. It's our hero who's going to throw this fireball. So, let's head on down here to our hero class. Now, we included the input module, and that is going to have events as well. So, fire is an event that will fire whenever I hit the spacebar here. But this also handles things like dpad controls, if you have something that I hooked up. So, it sort of abstracts that. So, whenever this fires, it's going to run this function. And what we're going to do then is, on the stage, we're going to insert a new fireball. And the position is going to be the position of our hero added based on the direction we're either going to add this to the left or the right-hand side of them. So, if our hero is facing left, we're going to subtract a little, like 32 pixels. So, we do that by adding minus 32. Otherwise, we add 32. And since this sprite is a bit smaller than our really tall wizard, we add a little to the Y coordinates as well to sort of center this. And finally, based on the direction again, we're going to set the velocity of this. And we're having a fairly high number here to have this thing fly across. And that's basically it. So, let's go ahead and reload the frame again. It just takes a little while. There we go. And I'm going to be able to jump and should be able to fire fireballs. Yeah, well, pretty awesome, isn't it? And we actually managed to kill our opponent. So, the knight is gone. I'm going to be just filming a couple more. Yeah. And as you might notice, you have that little spinning animation to that as well. But I think one of the things that is missing here is that we should probably have some sound. And we have an audio module that we can add to this, which takes care of playing sounds for us. This is one of the things where you need to think about what browsers you're going to be supporting. Because this is the HTML5 audio API. And different browsers don't really support the same types of files. So, I've taken the simple way out here and just using mp3s. They're actually missing. So, I'm going to go and add those. I'm going to add jump, mp3, and fireball, mp3, to have those resources loaded for me by the Quintus resource loader. And, but for if you want this to work in Safari, you can't use those mp3 assets. So, you would have to use something like an Agwarpis file. So, you would also have to have an Ag asset for that. So, since those who are missing us suspect that we're going to be missing a couple of other things as well. So, we had two sound effects. We have jump and fireball. So, the first one is our hero sprite. So, whenever he jumps, we are going to play a little sound. So, we're going to, oops, input, jump. We're going to have queue and ask the audio module to play our jump mp3. And the Quintus engine actually has this little mixer running there. So, you can layer sounds on top of each other. Which is probably something that if you would want to have some really good atmospheric background music for this, you could set that up whenever you stage the scene for the level down here and just start playing that music which would probably loop over and over and over. And still just use the play thing to play the sound effects. And let's also do something whenever he fires a fireball. So, let's do the play the fireball mp3. There. Apart from that, this is basically all the same thing as it was earlier. While this is loading, I'm going to crank up the sound a little. You can't, it seems like I don't have audio. Is there a possibility to get audio on the, there? No, if you just keep real, real quiet, you can hear this down there. That's a nice sound, isn't it? And there's no awesome fireball sound. So, it goes with that big fireball. So, adding sound effects is super easy with this. So, we sort of have like a complete game now, but to be honest, it doesn't really look like much. So, it's time to add a bit of polish. Now, and if we go way back here to our little spreadsheet, there are so many goodies in here that we haven't used yet. So, basically, we're only using these things here. So, let's add some of the other stuff. And this is where the real tedious work comes in. And I'm not going to do that live for you. But if you recall that we had that tile layer that we created to create the collision layer, what we do to add more depth to our play field is that we just add in a bunch of other tile layers. So, we have a background and then we have the collision, which is one we've been using all the time. And we also create a foreground. So, we can stack this on top of each other. Order matters here because the set index of things is going to be the order that you're added to the stage in. So, that's why we're adding the background to first, to have that first back. Then we add the collision layer, which is this one. This is the background. And then we add all of our sprites. And then we add the foreground to have those rendered in front of the sprites as well. There is one more thing that we're doing here is that we're adding also something called a repeater. And a repeater is something that takes one of these tile blocks and just repeats it vertically and horizontally and vertically. You can also control that. But you can also set the horizontal and vertical speeds of that. Now, the value here, one, would correspond with the foreground and the viewport. But setting that to a smaller number than one is going to add this quite nice parallax scrolling effect so that things move in different speeds, adding depth to our little game. One more thing that I figured that we could add is that if you recall, whenever I bumped into this night, the game just stopped. And it would be really good if we could say that the game has ended. So, game over. Just bring the bad news to the player. And the way you do that is that you create another scene for the game. And here I've created one called game over. And for this stage, I'm going to just insert a bit of text. And that is done by creating a Quintus UI text object for creating all the different elements. This is probably something that you want to do if you want to keep track of scores or things like that. Have that up in the left-hand corner or something like that. You would use a similar stage to have a heads-up display. And then you just place this using X and Y coordinates. You tell it what kind of fun family you want, the size, and what message you want to show. So, to actually show this thing, I've altered the hit event handler for our hero object a little. So, if our hero bumps into a night, we're going to stage the game over scene as scene number one. So, that is going to be displayed on top of the other one. You can stack scenes on top of each other. And as we did earlier, we're going to grab hold of the stage zero and just pause that. And if I go ahead here and reload this, this, we have something that is more visually appealing. And if I actually go move around here, you see that little parallax scrolling effect. And I'm sort of tempted to throw fireballs at this guy, but that one then enabled me to show you that little game over scene. So, I'm going to run away. There's actually something blocking my path. Oh, no. Game over. So, yeah, we sort of have not very entertaining, but still a playable and more or less complete game. We could probably just continue ahead adding like little charms and things that we could go around pick up. We could probably place a princess on here and have our little wizard run along to save the princess from all of the evil knights. But I'm not going to do that. I'm going to leave that up to you. You can go and grab this code at GitHub. Because all of that, adding that stuff, you've already seen what you need to do. It's all about basically going into here, creating sprites. So, if we wanted to have a princess on here, you could more or less copy this code. Create a princess sprite. Create a little princess sprite sheet. Add that to the resources that's loaded here. Compile it. And then when you set the scene, just add that sprite onto there. And if you want to have her in the cage, you can do that. That's just editing the tile layer behind the scenes. And that's really the tedious work. So, the thing is, when creating games, it's not something that is at least not these kinds of games. It's not something that is taxing on you as a developer. It's not hard to write the code. The real work is actually creating all the graphics and actually coming up with a good idea for things. Probably a better idea than what I have now, which is sort of basic. But one thing which is kind of nice with all this being HTML is that it's good to play on your phone. And I was actually planning to create a native iOS app for this. But then yesterday, I was stupid enough to update Xcode. And there is a bug in the Apache library that I would be using to do that. So, Xcode actually doesn't compile anything now. But this is HTML5. So, that doesn't really matter. Let's bring up Safari. And I'll go to go up here and reload this. So, probably rotate this device. And I want to surrender properly. So, let's go this way. And you can see Quintus knows about phones. I want that to go away. So, when this runs on something like an iPhone, you get these little control pads down here. Now, naturally, this is much better if you have thumbs to play around with. But you do have controls. And it runs straight away on the phone. I have to kill them. And this is going to work regardless of what phone you have. So, whatever, if what you have supports HTML5, it's going to run straight away. And if, as soon as the Apache Quartival guys gets their libraries sorted out, you can actually very simply compile this into a mobile application. Now, that is not going to work. But since we have like 50 minutes time, I don't know, we could show you how we would go about doing that. You guys up for that? Yeah? Okay. I'm just going to clear this. And probably just up the font size and my, uh, change font and my terminal a bit. Okay. So, I'm just going to see where I am. Beauty. Okay. So, I was spending some time with Chris Hardy and Jonas trying to get Xcode to behave properly earlier. So, we're no luck. So, I have to remove what stuff that we did. So, just going to go back in time a little. I'm probably not on the right tab. Just give me a second. Wait a minute. Tab is open. Yeah. Okay. So, the first thing that I'm going to do is I'm going to use the code of create command to just create a new project for me. And I'm going to have to remove that. Boom. It all goes away. Okay. Then I'm going to open the game Xcode project. So, we now I'm going to just have to clean this to tidy up whatever stuff we did earlier. This is actually going to compile the default application that we got. And I'm running the iPad now. So, yeah, it starts an app on iOS. I'm just going to switch this to a iPhone device instead. Okay. Let's go start it again. But that doesn't really do much. So, let's just go into our game folder here and look at what's in there. We have a folder called dub, dub, dub. So, let's go in there. And that's actually our little web app. Or the web app that Cordova created for us. So, I'm going to do away with all of the default files here. I'm going to remove the CSS, the images, and the index HTML. The JS things, let me resource is be and then take away the specs. So, this is now kind of empty. I'm going to head on over to GitHub and go to my undersea demo. Just copy that thing from there and go here and do a git clone on that into the undersea demo. You guys can go to GitHub as well to get all of the source code for this game. So, I'm going to put that link out on Twitter as well. So, now we have that. I'm going to just move anything within our undersea demo to our current directory. And let's get rid of our undersea demo folder. So, if we head on back to Xcode now, we should see all of the files in here. Unfortunately, it's not going to build it. But there are a couple of things that we need to do. So, let's open the index HTML file. Probably increase the font sizes a bit here as well. That's a nice thing with there is no easy way to change all of the text in. We'll do this a different way. So, this is the HTML code for the game that you just saw. So, to get this running on iOS, we're going to need to have a reference to Cordova. Apache Cordova, which is the tool that I was intending to use to get this to run on iOS. So, we have to do that there. That's one little change that we need to make. And we also need to go into our JavaScript folder. This looks like crap after I changed that font setting. So, originally, we were going to use hooking up an event listener to the load event on our window. That is not going to work properly for the app. So, instead, we're going to listen for document and on device ready. And that's it. If it had been playing nicely with the latest version of Xcode, I would be able to run this. But, unfortunately, now, it just comes up with a blank screen because it doesn't bundle the resources properly. But you can grab the code from GitHub, try this out. There are basically just two things that you need to do to turn that little HTML thing into an iOS app. And three things. That is, create a project. You can go to the Cordova homepage to see a tutorial on how to do that. And change those two things in here. One, remember to include the Cordova JavaScript file. And two, just change the main JavaScript file to, instead of listening to the window load event, listen for document on device ready, which is a phone specific event. And then you would have a native application that you are free to submit to the iOS app store. And best of all, this being HTML5, you could do this for Android, Windows Phone, and just about any mobile platform that you like. And that is where HTML5 comes in as a good tool set for creating things like games. Now, I think that for most mobile apps, you probably would like to use something like Samarin Studio to get real native apps written in C sharp, where you can share lots of code across. But you want that native look and feel on the different platforms. This game thing is an entirely different matter. Because here, you don't want it to look like the native platform. You want a complete custom look for a game. And you want that game to be the same across all of your devices. And using HTML is a really easy way to do that. You can deploy your code just about anywhere. So that was just about all of the stuff that I was planning on showing you, except for actually deploying this on a phone as well, which unfortunately weren't available able to do today. So I don't know, do you guys feel like going home and sitting down creating a game? It's basically kind of easy. You can do this in an evening. It's a fun pet project. If you're not that good at drawing, I recommend finding a friend who is. And the real challenge, as I said, is coming up with a good idea for a game. But once you have that, who knows, maybe one of you guys is sitting on the next Angry Birds or something like that. And this is a good platform for doing something like that. Any of you guys have any questions? Yep? Sorry. The question was, does this support multi-touch? Yes. I'm going to go back into... Just find the right window. Come on. So we're going to go way back to the beginning here. So we're not using that a lot here, but Quintus has a module called Touch. And that gives you all the touch events for the scene. So you would be able to do multi-touch on a touch device. Yes. So just head on over to the Quintus homepage, which you'll find here, html5quintus.com. The entire source code is also up at GitHub. And you'll find actually rather good documentation on how to use all of the different features. And there are a few example games there as well. There's an entire clone of the classic breakout game, if anyone remembers that. Any other questions? No? You're awfully quiet. Anyone looking forward to the party? Sort of in this old school gaming vibe, press play on tape, are playing there. Anyone heard those guys before? A few people. I've seen them before. They're absolutely incredible. It's a Danish band doing classic Commodore 64 game tunes in a rock tradition. So it's a rock band playing all chip tunes. It's mind-blowing. It's real good fun. So you guys have one more talk to see today than you get to enjoy that. So thanks for stopping by. If you guys create any games, please let me know about them. You'll find me at Twitter. I'm at ANORUS. Thanks for stopping by, guys. You've been an awesome audience.
 Okay guys, good afternoon. We're sort of halfway through the conference. Have you guys been  having a good time so far? No? No? Is it all that boring? Yeah, there's one thumb up at  the back there anyway. So, welcome to this talk. I'm Anders Nouros. This is where you  find me on the intwebs. This is going to be a talk about HTML5 game programming. And  speaking of games, I do work for ITERRA as their CTO. We get a booth down there and we got this  awesome little flipper pinball game, all ITERRA themed. So, I suggest you guys go down there and  play a couple of rounds. There are some pretty awesome prizes for you if you've managed to get  the high score on. So yeah, game on. Now, most of you guys who have seen me talk before, always  see me doing talks about like enterprise style web development and things like that. And that's  mainly what I do at work. But once in a while, I actually get the opportunity to do something fun  and something different. And a while back, I actually worked with one of our clients who wanted  to do something with mobile web. And one of their ideas they had was creating some games. So,  that's basically where all this started. And that sort of fits nicely in with where I'm coming  from. Now, the day before the conference, I don't know if you guys know, but the NDC did  something really, really awesome this year. They had this kids code club here in Oslo. And they  hosted a hackathon for kids aged 8 to 18 over at the top floor at Oslo Plus. And there were like  150 kids in there learning how to code. And I think that is a brilliant thing to do. It's a good  thing to do for the community. And you also have something called Riverside down in the expo area,  which is a youth club. And they're also working with NDC and working with companies here in  Oslo to teach kids how to actually use computers in a creative way. So, I figured this is a good  opportunity to show you guys what I was up to when I was a kid. So, I'm actually going to start off  by showing you something that I created back in 1991, I believe. So, I was part of the demo scene.  So, this was built on an Atari ST computer. I don't know if any of you guys have ever seen that.  Yeah. That's a classic computer. I just have to hit play again here. So, this was built in 1991.  I think I was like 14 at the time or something like that. And this is where I started out programming.  So, while back this was all Motorola 68000 K assembler. And this was kind of hard to do at the time.  So, we had to teach ourselves maths and all that stuff. And many of the guys I used to hang out with  and do this stuff with went on to start in the game industry. Like one of my friends from the time,  he actually failed in maths at high school because he insisted on doing maths with 512 degrees in the  circle. It didn't really matter much to him if he failed in maths because he actually got picked up  by Sony and started working on the PlayStation team as soon as he was finished high school.  So, this was the kind of stuff we did back then. And I always had this little fascination with  doing things with low tech stuff. So, these days, if you look at the demo scene, you can actually do  just about anything. So, what fascinates me these days is what amazing things people managed to  squeeze into like 64 kilobytes of code. That's less than your average web page. So, what you can do  with limited means is kind of interesting. And that sort of brings us to developing games in the  browser. Because the browser has always been also kind of limited. So, I think for today, we're going  to do something a bit retro and kick it all school. So, we're going to be using a gaming engine called  Quintus. You'll find it here on the web. And it's actually a very simple little thing. So, the first  thing we have to do when we're going to create a game is that we have to create our world to actually  have our game in. So, let's just dive right into the code. So, what we need to do is that we need to  actually listen for the load event on the window. So, let's do that. Hook up this and just pass in  a function. I'm not using jQuery for this because this is actually the only thing that we need to  do the stuff that jQuery would help us with. So, I'm kicking it all school this way as well.  And let's just go and create an instance of the Quintus. Let's assign that to window key as well.  And create the actual gaming engine. Now, we're going to need a couple of things. And the Quintus  is very module-based. So, we have to include the modules that we're going to be using. And I'm just  going to get them all straight away. So, we're going to be working with sprites. And, actually,  what we're building right now is the scene. So, we're going to need scenes. We're going to need  a way to interact. So, we're going to need inputs. We're going to make a two-dimensional platform  of games. So, let's bring in the 2D module, the animation module. The touch module will come  nicely in. And the UI. And maybe some audio towards the end as well. Let's add that.  We have to set up the engine as well. So, let's just do maximize and true. So, it runs full screen.  And then, start to controls. Oh, snap. Okay. Seems like... Well, seems like Chrome is acting up.  Let's just bring it back in. The magical thing when Chrome crashes is that it writes all the code  for you. So, yeah. So, I was somewhere in this area writing some code. And then Chrome went ahead  and did this for me. So, I'm just going to walk you through what Chrome did. So, up here, we set up  our engine that we're going to be using. And then Chrome added this thing down here, whether it's  actually loading the assets that we're going to need throughout the game. So, the tiles ping file  is a set of small little bits that we can build the scene from. And the level one collision  JSON file is the actual map. We're going to look at this in a moment. And the next thing Chrome did  was that it went in here and compiled a spreadsheet for the tiles. And that is going to be known as  tiles from now on. It uses the tiles ping file. And it just tells the engine the size of each of  the sprites in there. And then I think it went ahead and did this thing, which is creating an  actual scene object. So, this scene is going to be known as level one. And it's going to have a  collision layer. Now, collision layer is something that detects if something collides with it. So,  it goes with the name. And that is going to be a tile layer. And it has a data asset, which is  this little JSON file. And it's going to use the tiles sheet. Finally, Chrome went ahead and staged  the scene. So, let's just go ahead and look at what it made. So, we have this. We have sort of  something that could resemble ground. I think this kind of looks like a classic Commodore 64 game  called Boulder Dash. More or less. Anyone play that? Oh, yeah. Oh, lots of old-school gamers in  the house. You guys like that? Because I remember when that game came out, it was like, wow, the  graphics in this thing is awesome. So, now that's the key for you guys to say, wow, the graphics up  there are awesome. Yeah. So, yeah, the spreadsheets. So, the spreadsheet for this actually looks like  this. This is something that I picked up from an online resource for creating RPG games. There are  lots of communities there who share creative commons, licensed stuff. It's a good place to go  if you're a bit wishy-washy inclined and not that good at drawing, where you can get awesome graphics.  So, this is what the spreadsheet for this looks like. And that is actually built into this little  map that we're seeing by using a tile map. Now, I know the text is real small. And that's because  I wanted to show a whole lot of stuff on her at the same time. But whenever there's a zero in here,  so this is an array of arrays. And whenever there's a zero, it's going to be a blank space. But  whenever there's something different, it's going to be something there. And all these numbers,  like 160, that corresponds with that little sprite which is shown here, which incidentally is at  location 160 in this file. So, it's just numbers. Creating these tile maps, it's kind of tedious.  What you do is set it around. You tweak this, hit reload, and sort of build this up. If you're  thinking about building something serious like a big game, you probably won't be doing this for too  long before you actually find it a good time to sit down and write a little tool to actually build  these things. So, if you guys are looking to pick up on this afterwards and create your own little  game, tell me how far into the process you got before you actually took time to do that.  Yeah, so that's the tile map. Well, no game is really any good without someone to control  around on the board. So, let's go ahead here. And I think that actually Chrome has gone in here  and actually written some code for us here as well now. So, I'm not going to rewrite all of this  for you. Instead, I'm going to just walk you through the process of this. So, we have like all  of the things from before. So, the main new thing that's on here is this one that we actually  create a sprite. And this is the first place where you actually get to meet the object system of  Quintus. So, Quintus borrows that little concept from underscore.js, but it's not using underscore  with using an extend method. Now, there is one thing for those of you who are... So, where did  my picture go? I have video here. So, my Mac has a blue screen, but this thing has. Could we get  some visuals back? Something happened. It detected. Yeah. There it is. Okay. Thanks. Wherever that  technician is. Okay. So, yeah. The way that the object system in Quintus works is that when I  specify a string here with the name, that actually becomes the name of the JavaScript object later.  So, that's a bit odd. That was the first for me. I haven't seen anyone do it in a similar way. So,  it's a nice thing to be aware of. Apart from that, this is the old JavaScript extends object  orientation pattern. So, I just pass in a hash here, which is where I implement my different  methods. And for this one, I'm just implementing the init thing, which is where I set up all of  the controls for this thing. Another thing is that I've also added here a hero ping file,  which is the actual sprite, and compile the sprite sheet for that. So, when this sets up,  Quintus uses the convention of underscore super to call the super class. And I can delegate  everything up to the Quintus framework for setting this up. So, I just pass in the sprite  and tell Quintus which sprite sheet to use, which is the hero sprite sheet, which we loaded for the  down. And the position in our world, the x, y coordinates to where to place this one. And  finally, I go in and add a couple of modules to that sprite element. Now, these two modules will  give me a couple of things. Let's start with the last one here. The platformer controls is actually  going to enable me to move this thing around in the world. And the first one gives us all of the  2D controls. So, things like gravity, which is sort of essential. Otherwise, you'll fly up in  there, or you need negative gravity to do that, so you'll be standing still. It's handled by that  module. And finally, we do this thing by creating an instance of our hero and just insert that into  the stage. So, here you can see that we're referencing the hero object or the hero class,  which we created by using a string further up. So, this is a bit odd. As I said, this is the  only place I've seen this done this way in JavaScript. There might be others doing it similarly.  And finally, I'm adding a viewport to our stage. And I'm telling that viewport to follow the hero  around. So, just go in here. I'm going to reload this frame. There. So, we have this little guy  on there. And I'm actually able to control them around and jump and do all of those things.  So, you can see that when I jump, we got this nice little curve, which is all handled by the 2D  module, which this is where gravity comes into the picture. So, yeah. But he was a bit static.  So, we need to add some animation to this. And we're not going to be using an animated  gift for that. So, we're going to do it in that way that I've seen a lot of websites do to actually  get embedded animation within web pages. You see this at the Apple website all the time. So,  whenever they want to have video, which is not video, they actually do this image manipulation  where they play, where they have this of the images and just move things around on a canvas.  And it's basically the same technique that we're going to be using here.  So, and this is where this little animation module comes into play. So, what we do is that I've set  up this little scheme of animations. So, I create a set of different animations for something called  People. And I do that by passing in a hash. Now, we're going to have four different modes for  this little hero character of ours. It's going to be able to run to the left, run to the right,  and stand facing left, and stand facing right. Now, all I need to do to make that happen is that I  need to reference some frames. And if you recall when we looked at that tile sheet, this broad  sheet for our hero character looks exactly the same. There are just little boxes with different  versions of that sprite in there. So, when running left, we're going to be showing in order,  sprite 0, 1, and 2, and then looping it around again. And we're going to be animating this at  the rate of 1 divided by 8, which is going to be the animation speed of this. This is usually a  property that you need to fiddle around a little bit with, depending on how many frames you have  for your animation, how fast it's going to be moving, and things like that, for it to look  natural, more or less. Similarly, to run right, we go for frames 3, 4, and 5. So, these are stacked  on top of each other. And we're just showing one frame when it's standing still. For a bit more  advanced game, you probably would like to have some animation there. So, you see, like,  sprite standing like that's ready to move, like, real ego. But here, we're not doing that, and then  we're setting the loop property to false. So, it's just going to play this and not loop around.  The only things that I've done with the actual sprite object here is to add a reference to this  animation configuration that we just saw, and then also go here and add in the animation module,  so that this sprite has this. One fun thing, though, is that I've added a new method called step.  This method here is going to be called by Quintus whenever it redraws the world. So, whenever there  is an animation step, this is going to be called. And what's happening here is that we reference  the actual player object or the sprite object, and we look at the velocity on the vertical axis.  So, the VX property here is the vertical velocity of this sprite. If that is larger than zero,  we know this sprite to be moving to the right. So, then we queue the run right animation by  calling the play method and passing that in. Otherwise, if it's less than zero, we notice  it's moving right. Otherwise, in which case it would be zero, we want this to stand still.  If it's not moving, we need to know which way it's going to be facing, if it's left or right.  We actually have that as a property as well. So, we have a direction property on here.  And since I named these things stand left and stand right, we know this property to return  left or right. So, we just concatenate that with a stand string there. And that's just about it.  So, if I go here, I'm going to have to reload this frame again. There it is. Just click in here.  And as you might notice, it's kind of subtle, but it's moving. It's moving its little,  tiny little arms and legs around. So, starting to look like something, but it's not much of a game.  So, we need some opponents as well. And we're sort of getting into this little  wizard-send fantasy kind of thing here. So, let's add a little knight sprite to this.  So, this is going to be the same thing all over again as we did with our hero. So, we're  having, including another sprite asset and creating a sprite sheet for that.  And creating a new class called knight. There's one more thing here because this guy is not going  to be controlled by us. He's going to have a mind of his own. So, we're adding some AI for this  little character. And for a game like this, it's really an easy way to just make him think  is to include the AI bounce module. Now, the way that works is that whenever he's walking over and  he's going to hit something, he's going to turn around and then just continue walking straight  ahead until he hits something and turns around. So, it's going to create some life, but it's going  to be kind of simple. And again, he has the exact same step animation feature here. One more thing  that we need to do is that this guy has got to hit the ground running. So, we're specifying the  vertical velocity as soon as this thing is created just to have them moving straight away.  So, inserting this into the stage is just like inserting the hero sprite. We just create an  instance, specify the location where it's going to be, and insert it using the stage insert.  One final thing is that we... This is a really, really evil night. So, whenever our wizard  bumps into him, we sort of have a game over situation. So, that is handled by this little hit  event handler here. So, the Quintus game engine has tons of different events that are related to  what you want to be doing in the game. And what events you have are really defined by what modules  you include. Now, since I have the 2D and platformer things in here, I'm going to have a hit event.  So, this is whenever the hero object hits something else. This event is going to be  invoked. We get paused in a collision object, which is whatever he bumps into. And then we  can just go ahead and ask if the collision object is a night. So, it's got this nice little  very readable interface. So, it has a fluency to it. Kind of like that. And if that is the case,  for now, we'll just grab hold of the stage and pause that. So, the game sort of ends.  You're going to have to hit reload again here.  There. You can see the bad guy down there heading away from us. But we really don't have any way  to beat him up at the moment. So, I'll try to jump over him. Ah, no. I didn't manage to jump over him,  which made this hit event occur and our game stopped. Ah, game over. Okay.  We need to be able to give this guy a bit of a beating, I think. So,  for next step, let's, since we have a wizard, I think wizards are pretty cool if you throw fireballs.  So, for that, we are going to create yet another sprite.  And we have fireball ping. This is a bit different size than the other one. And that goes for night  as well. So, even if the tiles in the background are like 32 times 32 pixels, you can actually have  sprites who don't fit in with that pattern. The only thing you have to think about is,  like, when I had this rocky roof, you need to be able to place things in your tile sheet in a way  that you actually have room for the sprites to pass through. Because the collision detection is  going to bump into anything. It uses a masking algorithm to see if this thing hits something  else. So, again, the fireball is a bit smaller. For creating the fireball object, it's yet another  case of extending the sprite object and creating a fireball. For this, we actually go ahead and set  the gravity to zero. Because otherwise, whenever this wizard throws the fireball, and that could  be a bit cool as well, it drops down into the floor. But we want to have this really powerful  fireball thing. So, when it throws it away, it's going to fly ahead. So, and for it not to drop to  the floor, because everything is affected by gravity, we set the gravity to zero. Now, this is  something that you would need to do if you are creating something like Mario. So, whenever Mario  wants to jump up and pick up those coins, you want to have these little coins flying around in there,  you need to set the gravity to zero and all those things as well.  Okay. So, similar to how we handled bumping into that wizard, we also had a hit event for our  fireball object. So, this is going to be cool whenever the fireball hits something, where we can  can wreak havoc and have massive destruction of things. And in this case, we're just checking if  we if we hit the night. And destruction is handled through destroy. So, what basically  happens here is that we take our collision object, refer to the actual object within it,  and which is going to be the sprite, and that is going to be a night in this  instant, and destroy that sprite, which will remove it from our play field. Otherwise, if this  hits something different, and in most cases here, that would be a wall or some kind of brick, we just  destroy the sprite itself. And similar to the animation step for this one, it's going to be  a bit simpler, because this is going to be moving all the time, so we don't need to stand still.  So, it's either going to fly right or fly left. But the mats behind this is just the same thing.  But that's just a fireball. It's our hero who's going to throw this fireball. So, let's head on down  here to our hero class. Now, we included the input module, and that is going to have events as well.  So, fire is an event that will fire whenever I hit the spacebar here. But this also handles things  like dpad controls, if you have something that I hooked up. So, it sort of abstracts that.  So, whenever this fires, it's going to run this function. And what we're going to do then is,  on the stage, we're going to insert a new fireball. And the position is going to be the position  of our hero added based on the direction we're either going to add this to the left or the  right-hand side of them. So, if our hero is facing left, we're going to subtract a little,  like 32 pixels. So, we do that by adding minus 32. Otherwise, we add 32. And since this  sprite is a bit smaller than our really tall wizard, we add a little to the Y coordinates as well  to sort of center this. And finally, based on the direction again, we're going to set the  velocity of this. And we're having a fairly high number here to have this thing fly across.  And that's basically it. So, let's go ahead and reload the frame again.  It just takes a little while.  There we go. And I'm going to be able to jump and should be able to fire fireballs. Yeah, well,  pretty awesome, isn't it? And we actually managed to kill our opponent. So, the knight is gone.  I'm going to be just filming a couple more. Yeah. And as you might notice, you have that  little spinning animation to that as well. But I think one of the things that is missing here is  that we should probably have some sound. And we have an audio module that we can add to this,  which takes care of playing sounds for us. This is one of the things where you need to think about  what browsers you're going to be supporting. Because this is the HTML5 audio API. And  different browsers don't really support the same types of files. So, I've taken the simple way out  here and just using mp3s. They're actually missing. So, I'm going to go and add those. I'm going to add  jump, mp3, and fireball, mp3, to have those resources loaded for me by the Quintus resource loader.  And, but for if you want this to work in Safari, you can't use those mp3 assets. So,  you would have to use something like an Agwarpis file. So, you would also have to have an Ag  asset for that. So, since those who are missing us suspect that we're going to be missing a couple  of other things as well. So, we had two sound effects. We have jump and fireball. So, the first  one is our hero sprite. So, whenever he jumps, we are going to play a little sound. So,  we're going to, oops, input, jump. We're going to have queue and ask the  audio module to play our jump mp3. And the Quintus engine actually has this little mixer  running there. So, you can layer sounds on top of each other. Which is probably something that  if you would want to have some really good atmospheric background music for this, you could  set that up whenever you stage the scene for the level down here and just start playing that music  which would probably loop over and over and over. And still just use the play thing to  play the sound effects. And let's also do something whenever he fires a fireball. So, let's do  the play the fireball mp3. There. Apart from that, this is basically all the same thing as it was  earlier. While this is loading, I'm going to crank up the sound a little.  You can't, it seems like I don't have audio. Is there a possibility to get  audio on the, there? No, if you just keep real, real quiet, you can hear this down there.  That's a nice sound, isn't it? And there's no awesome fireball sound. So, it goes with that  big fireball. So, adding sound effects is super easy with this. So, we sort of have  like a complete game now, but to be honest, it doesn't really look like much. So,  it's time to add a bit of polish. Now, and if we go way back here to our little spreadsheet,  there are so many goodies in here that we haven't used yet. So, basically, we're only using these  things here. So, let's add some of the other stuff. And this is where the real tedious work comes in.  And I'm not going to do that live for you. But if you recall that we had that tile layer  that we created to create the collision layer, what we do to add more depth to our play field  is that we just add in a bunch of other tile layers. So, we have a background and then we have  the collision, which is one we've been using all the time. And we also create a foreground. So,  we can stack this on top of each other. Order matters here because the set index of things  is going to be the order that you're added to the stage in. So, that's why we're adding the background  to first, to have that first back. Then we add the collision layer, which is this one. This is  the background. And then we add all of our sprites. And then we add the foreground to have those  rendered in front of the sprites as well. There is one more thing that we're doing here is that  we're adding also something called a repeater. And a repeater is something that takes one of these  tile blocks and just repeats it vertically and horizontally and vertically. You can also control  that. But you can also set the horizontal and vertical speeds of that. Now, the value here,  one, would correspond with the foreground and the viewport. But setting that to a  smaller number than one is going to add this quite nice parallax scrolling effect so that  things move in different speeds, adding depth to our little game. One more thing that I figured  that we could add is that if you recall, whenever I bumped into this night, the game just stopped.  And it would be really good if we could say that the game has ended. So, game over. Just bring the  bad news to the player. And the way you do that is that you create another scene for the game.  And here I've created one called game over. And for this stage, I'm going to just insert a bit of  text. And that is done by creating a Quintus UI text object for creating all the different elements.  This is probably something that you want to do if you want to keep track of scores or things like  that. Have that up in the left-hand corner or something like that. You would use a similar  stage to have a heads-up display. And then you just place this using X and Y coordinates. You  tell it what kind of fun family you want, the size, and what message you want to show.  So, to actually show this thing, I've altered the hit event handler for our hero object a little.  So, if our hero bumps into a night, we're going to stage the game over scene as scene number one.  So, that is going to be displayed on top of the other one. You can stack scenes on top of each  other. And as we did earlier, we're going to grab hold of the stage zero and just pause that.  And if I go ahead here and reload this,  this, we have something that is more visually appealing. And if I actually go  move around here, you see that little parallax scrolling effect.  And I'm sort of tempted to throw fireballs at this guy, but that one then enabled me to show you  that little game over scene. So, I'm going to run away. There's actually something blocking my path.  Oh, no. Game over. So, yeah, we sort of have not very entertaining, but still a playable and more  or less complete game. We could probably just continue ahead adding like little charms and  things that we could go around pick up. We could probably place a princess on here and have our  little wizard run along to save the princess from all of the evil knights. But I'm not going to  do that. I'm going to leave that up to you. You can go and grab this code at GitHub. Because  all of that, adding that stuff, you've already seen what you need to do. It's all about basically  going into here, creating sprites. So, if we wanted to have a princess on here, you could more or  less copy this code. Create a princess sprite. Create a little princess sprite sheet. Add that  to the resources that's loaded here. Compile it. And then when you set the scene, just add that  sprite onto there. And if you want to have her in the cage, you can do that. That's just editing  the tile layer behind the scenes. And that's really the tedious work. So, the thing is,  when creating games, it's not something that is at least not these kinds of games. It's not  something that is taxing on you as a developer. It's not hard to write the code. The real work  is actually creating all the graphics and actually coming up with a good idea for things. Probably  a better idea than what I have now, which is sort of basic. But one thing which is kind of nice  with all this being HTML is that it's good to play on your phone. And I was actually planning to  create a native iOS app for this. But then yesterday, I was stupid enough to update Xcode. And there  is a bug in the Apache library that I would be using to do that. So, Xcode actually doesn't  compile anything now. But this is HTML5. So, that doesn't really matter. Let's bring up Safari.  And I'll go to go up here and reload this. So, probably rotate this device. And I want to surrender  properly. So, let's go this way. And you can see Quintus knows about phones. I want that to go away.  So, when this runs on something like an iPhone, you get these little control pads down here.  Now, naturally, this is much better if you have thumbs to play around with. But you do have controls.  And it runs straight away on the phone. I have to kill them. And this is going to work regardless  of what phone you have. So, whatever, if what you have supports HTML5, it's going to run straight  away. And if, as soon as the Apache Quartival guys gets their libraries sorted out, you can  actually very simply compile this into a mobile application. Now, that is not going to work.  But since we have like 50 minutes time, I don't know, we could show you how we would go about  doing that. You guys up for that? Yeah? Okay. I'm just going to clear this. And probably just up the  font size and my, uh, change font and my terminal a bit. Okay. So, I'm just going to see where I am.  Beauty. Okay. So, I was spending some time with Chris Hardy and Jonas trying to get Xcode to behave  properly earlier. So, we're no luck. So, I have to remove what stuff that we did. So, just going to go  back in time a little. I'm probably not on the right tab. Just give me a second. Wait a minute.  Tab is open. Yeah. Okay. So, the first thing that I'm going to do is I'm going to use the  code of create command to just create a new project for me. And I'm going to have to remove that.  Boom. It all goes away.  Okay. Then I'm going to open the game Xcode project. So, we now I'm going to just have to clean this  to tidy up whatever stuff we did earlier. This is actually going to compile the default  application that we got. And I'm running the iPad now. So, yeah, it starts an app on iOS. I'm just  going to switch this to a iPhone device instead. Okay. Let's go start it again. But that doesn't  really do much. So, let's just go into our game folder here and look at what's in there. We have  a folder called dub, dub, dub. So, let's go in there. And that's actually our little web app.  Or the web app that Cordova created for us. So, I'm going to do away with all of the  default files here. I'm going to remove the CSS, the images, and the index HTML. The JS things,  let me resource is be and then take away the specs. So, this is now kind of empty.  I'm going to head on over to GitHub and go to my undersea demo.  Just copy that thing from there and go here and do a git clone on that into  the undersea demo. You guys can go to GitHub as well to get all of the source code for this game.  So, I'm going to put that link out on Twitter as well. So, now we have that. I'm going to just  move anything within our undersea demo to our current directory.  And let's get rid of our undersea demo folder. So,  if we head on back to Xcode now, we should see all of the files in here. Unfortunately,  it's not going to build it. But there are a couple of things that we need to do.  So, let's open the index HTML file. Probably increase the font sizes a bit here as well.  That's a nice thing with there is no easy way to change all of the text in.  We'll do this a different way. So, this is the HTML code for the game that you just saw.  So, to get this running on iOS, we're going to need to have a reference to  Cordova. Apache Cordova, which is the tool that I was intending to use to get this to run on  iOS. So, we have to do that there. That's one little change that we need to make. And we also  need to go into our JavaScript folder. This looks like crap after I changed that font setting.  So, originally, we were going to use hooking up an event listener to the load event on our window.  That is not going to work properly for the app. So, instead, we're going to listen for document  and on device ready. And that's it. If it had been playing nicely with the latest version of  Xcode, I would be able to run this. But, unfortunately, now, it just comes up with a  blank screen because it doesn't bundle the resources properly. But you can grab the code from  GitHub, try this out. There are basically just two things that you need to do to turn that little  HTML thing into an iOS app. And three things. That is, create a project. You can go to the Cordova  homepage to see a tutorial on how to do that. And change those two things in here. One, remember  to include the Cordova JavaScript file. And two, just change the main JavaScript file to, instead  of listening to the window load event, listen for document on device ready, which is a phone  specific event. And then you would have a native application that you are free to submit to the  iOS app store. And best of all, this being HTML5, you could do this for Android, Windows Phone,  and just about any mobile platform that you like. And that is where HTML5 comes in as a good tool  set for creating things like games. Now, I think that for most mobile apps, you probably would  like to use something like Samarin Studio to get real native apps written in C sharp, where you  can share lots of code across. But you want that native look and feel on the different platforms.  This game thing is an entirely different matter. Because here, you don't want it to look like the  native platform. You want a complete custom look for a game. And you want that game to be the same  across all of your devices. And using HTML is a really easy way to do that. You can deploy your  code just about anywhere. So that was just about all of the stuff that I was planning on showing you,  except for actually deploying this on a phone as well, which unfortunately weren't available  able to do today. So I don't know, do you guys feel like going home and sitting down creating a game?  It's basically kind of easy. You can do this in an evening. It's a fun pet project.  If you're not that good at drawing, I recommend finding a friend who is. And the real challenge,  as I said, is coming up with a good idea for a game. But once you have that, who knows, maybe one of  you guys is sitting on the next Angry Birds or something like that. And this is a good platform  for doing something like that. Any of you guys have any questions? Yep?  Sorry. The question was, does this support multi-touch?  Yes. I'm going to go back into...  Just find the right window. Come on.  So we're going to go way back to the beginning here. So we're not using that a lot here, but  Quintus has a module called Touch. And that gives you all the touch events for the scene.  So you would be able to do multi-touch on a touch device. Yes. So just head on over to  the Quintus homepage, which you'll find here, html5quintus.com.  The entire source code is also up at GitHub. And you'll find actually rather good documentation on  how to use all of the different features. And there are a few example games there as well.  There's an entire clone of the classic breakout game, if anyone remembers that.  Any other questions? No? You're awfully quiet. Anyone looking forward to the party?  Sort of in this old school gaming vibe, press play on tape, are playing there. Anyone heard  those guys before? A few people. I've seen them before. They're absolutely incredible.  It's a Danish band doing classic Commodore 64 game tunes in a rock tradition. So it's a rock band  playing all chip tunes. It's mind-blowing. It's real good fun. So you guys have one more talk to  see today than you get to enjoy that. So thanks for stopping by. If you guys create any games,  please let me know about them. You'll find me at Twitter. I'm at ANORUS.  Thanks for stopping by, guys. You've been an awesome audience.
Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_0_2411.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_2412_5783.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_5784_9719.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_9720_9839.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_9840_12335.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_12336_14063.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_14064_16943.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_16944_18275.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_18276_18827.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_18828_18947.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_18948_19007.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_19008_20483.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_20484_23363.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_23364_23411.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_23412_28763.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_28764_31367.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_31368_31415.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_31416_31967.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_31968_32363.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_32364_37487.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_37488_38351.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_38352_41543.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_41544_46823.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_46824_47639.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_47640_47831.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_47832_48155.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_48156_53999.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_54000_54479.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_54480_54527.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_54528_54899.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_54900_54971.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_54972_59987.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_59988_60935.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_60936_60995.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_60996_64355.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_64356_64583.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_64584_65867.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_65868_68171.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_68172_68483.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_68484_68651.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_68652_68699.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_68700_69707.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_69708_69791.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_69792_69899.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_69900_70691.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_70692_70811.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_70812_70871.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_70872_71195.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_71196_71375.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_71376_71423.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_71424_71735.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_71736_72863.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_72864_73007.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_73008_73055.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_73056_73235.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_73236_73319.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_73320_73403.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_73404_73943.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_73944_74195.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_74196_74255.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_74256_74903.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_74904_75275.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_75276_75323.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_75324_75491.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_75492_75899.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_75900_76067.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_76068_76271.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_76272_76751.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_76752_76943.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_76944_77063.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_77064_77111.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_77112_77399.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_77400_77447.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_77448_77951.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_77952_82055.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_82056_82295.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_82296_82343.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_82344_82391.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_82392_82763.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_82764_85019.png Anders_Nor__s_-_Game_on_-_Developing_HTML5_games-68331934_85020_85426.png
Okay guys, good afternoon. We're sort of halfway through the conference. Have you guys been having a good time so far? No? No? Is it all that boring? Yeah, there's one thumb up at the back there anyway. So, welcome to this talk. I'm Anders Nouros. This is where you find me on the intwebs. This is going to be a talk about HTML5 game programming. And speaking of games, I do work for ITERRA as their CTO. We get a booth down there and we got this awesome little flipper pinball game, all ITERRA themed. So, I suggest you guys go down there and play a couple of rounds. There are some pretty awesome prizes for you if you've managed to get the high score on. So yeah, game on. Now, most of you guys who have seen me talk before, always see me doing talks about like enterprise style web development and things like that. And that's mainly what I do at work. But once in a while, I actually get the opportunity to do something fun and something different. And a while back, I actually worked with one of our clients who wanted to do something with mobile web. And one of their ideas they had was creating some games. So, that's basically where all this started. And that sort of fits nicely in with where I'm coming from. Now, the day before the conference, I don't know if you guys know, but the NDC did something really, really awesome this year. They had this kids code club here in Oslo. And they hosted a hackathon for kids aged 8 to 18 over at the top floor at Oslo Plus. And there were like 150 kids in there learning how to code. And I think that is a brilliant thing to do. It's a good thing to do for the community. And you also have something called Riverside down in the expo area, which is a youth club. And they're also working with NDC and working with companies here in Oslo to teach kids how to actually use computers in a creative way. So, I figured this is a good opportunity to show you guys what I was up to when I was a kid. So, I'm actually going to start off by showing you something that I created back in 1991, I believe. So, I was part of the demo scene. So, this was built on an Atari ST computer. I don't know if any of you guys have ever seen that. Yeah. That's a classic computer. I just have to hit play again here. So, this was built in 1991. I think I was like 14 at the time or something like that. And this is where I started out programming. So, while back this was all Motorola 68000 K assembler. And this was kind of hard to do at the time. So, we had to teach ourselves maths and all that stuff. And many of the guys I used to hang out with and do this stuff with went on to start in the game industry. Like one of my friends from the time, he actually failed in maths at high school because he insisted on doing maths with 512 degrees in the circle. It didn't really matter much to him if he failed in maths because he actually got picked up by Sony and started working on the PlayStation team as soon as he was finished high school. So, this was the kind of stuff we did back then. And I always had this little fascination with doing things with low tech stuff. So, these days, if you look at the demo scene, you can actually do just about anything. So, what fascinates me these days is what amazing things people managed to squeeze into like 64 kilobytes of code. That's less than your average web page. So, what you can do with limited means is kind of interesting. And that sort of brings us to developing games in the browser. Because the browser has always been also kind of limited. So, I think for today, we're going to do something a bit retro and kick it all school. So, we're going to be using a gaming engine called Quintus. You'll find it here on the web. And it's actually a very simple little thing. So, the first thing we have to do when we're going to create a game is that we have to create our world to actually have our game in. So, let's just dive right into the code. So, what we need to do is that we need to actually listen for the load event on the window. So, let's do that. Hook up this and just pass in a function. I'm not using jQuery for this because this is actually the only thing that we need to do the stuff that jQuery would help us with. So, I'm kicking it all school this way as well. And let's just go and create an instance of the Quintus. Let's assign that to window key as well. And create the actual gaming engine. Now, we're going to need a couple of things. And the Quintus is very module-based. So, we have to include the modules that we're going to be using. And I'm just going to get them all straight away. So, we're going to be working with sprites. And, actually, what we're building right now is the scene. So, we're going to need scenes. We're going to need a way to interact. So, we're going to need inputs. We're going to make a two-dimensional platform of games. So, let's bring in the 2D module, the animation module. The touch module will come nicely in. And the UI. And maybe some audio towards the end as well. Let's add that. We have to set up the engine as well. So, let's just do maximize and true. So, it runs full screen. And then, start to controls. Oh, snap. Okay. Seems like... Well, seems like Chrome is acting up. Let's just bring it back in. The magical thing when Chrome crashes is that it writes all the code for you. So, yeah. So, I was somewhere in this area writing some code. And then Chrome went ahead and did this for me. So, I'm just going to walk you through what Chrome did. So, up here, we set up our engine that we're going to be using. And then Chrome added this thing down here, whether it's actually loading the assets that we're going to need throughout the game. So, the tiles ping file is a set of small little bits that we can build the scene from. And the level one collision JSON file is the actual map. We're going to look at this in a moment. And the next thing Chrome did was that it went in here and compiled a spreadsheet for the tiles. And that is going to be known as tiles from now on. It uses the tiles ping file. And it just tells the engine the size of each of the sprites in there. And then I think it went ahead and did this thing, which is creating an actual scene object. So, this scene is going to be known as level one. And it's going to have a collision layer. Now, collision layer is something that detects if something collides with it. So, it goes with the name. And that is going to be a tile layer. And it has a data asset, which is this little JSON file. And it's going to use the tiles sheet. Finally, Chrome went ahead and staged the scene. So, let's just go ahead and look at what it made. So, we have this. We have sort of something that could resemble ground. I think this kind of looks like a classic Commodore 64 game called Boulder Dash. More or less. Anyone play that? Oh, yeah. Oh, lots of old-school gamers in the house. You guys like that? Because I remember when that game came out, it was like, wow, the graphics in this thing is awesome. So, now that's the key for you guys to say, wow, the graphics up there are awesome. Yeah. So, yeah, the spreadsheets. So, the spreadsheet for this actually looks like this. This is something that I picked up from an online resource for creating RPG games. There are lots of communities there who share creative commons, licensed stuff. It's a good place to go if you're a bit wishy-washy inclined and not that good at drawing, where you can get awesome graphics. So, this is what the spreadsheet for this looks like. And that is actually built into this little map that we're seeing by using a tile map. Now, I know the text is real small. And that's because I wanted to show a whole lot of stuff on her at the same time. But whenever there's a zero in here, so this is an array of arrays. And whenever there's a zero, it's going to be a blank space. But whenever there's something different, it's going to be something there. And all these numbers, like 160, that corresponds with that little sprite which is shown here, which incidentally is at location 160 in this file. So, it's just numbers. Creating these tile maps, it's kind of tedious. What you do is set it around. You tweak this, hit reload, and sort of build this up. If you're thinking about building something serious like a big game, you probably won't be doing this for too long before you actually find it a good time to sit down and write a little tool to actually build these things. So, if you guys are looking to pick up on this afterwards and create your own little game, tell me how far into the process you got before you actually took time to do that. Yeah, so that's the tile map. Well, no game is really any good without someone to control around on the board. So, let's go ahead here. And I think that actually Chrome has gone in here and actually written some code for us here as well now. So, I'm not going to rewrite all of this for you. Instead, I'm going to just walk you through the process of this. So, we have like all of the things from before. So, the main new thing that's on here is this one that we actually create a sprite. And this is the first place where you actually get to meet the object system of Quintus. So, Quintus borrows that little concept from underscore.js, but it's not using underscore with using an extend method. Now, there is one thing for those of you who are... So, where did my picture go? I have video here. So, my Mac has a blue screen, but this thing has. Could we get some visuals back? Something happened. It detected. Yeah. There it is. Okay. Thanks. Wherever that technician is. Okay. So, yeah. The way that the object system in Quintus works is that when I specify a string here with the name, that actually becomes the name of the JavaScript object later. So, that's a bit odd. That was the first for me. I haven't seen anyone do it in a similar way. So, it's a nice thing to be aware of. Apart from that, this is the old JavaScript extends object orientation pattern. So, I just pass in a hash here, which is where I implement my different methods. And for this one, I'm just implementing the init thing, which is where I set up all of the controls for this thing. Another thing is that I've also added here a hero ping file, which is the actual sprite, and compile the sprite sheet for that. So, when this sets up, Quintus uses the convention of underscore super to call the super class. And I can delegate everything up to the Quintus framework for setting this up. So, I just pass in the sprite and tell Quintus which sprite sheet to use, which is the hero sprite sheet, which we loaded for the down. And the position in our world, the x, y coordinates to where to place this one. And finally, I go in and add a couple of modules to that sprite element. Now, these two modules will give me a couple of things. Let's start with the last one here. The platformer controls is actually going to enable me to move this thing around in the world. And the first one gives us all of the 2D controls. So, things like gravity, which is sort of essential. Otherwise, you'll fly up in there, or you need negative gravity to do that, so you'll be standing still. It's handled by that module. And finally, we do this thing by creating an instance of our hero and just insert that into the stage. So, here you can see that we're referencing the hero object or the hero class, which we created by using a string further up. So, this is a bit odd. As I said, this is the only place I've seen this done this way in JavaScript. There might be others doing it similarly. And finally, I'm adding a viewport to our stage. And I'm telling that viewport to follow the hero around. So, just go in here. I'm going to reload this frame. There. So, we have this little guy on there. And I'm actually able to control them around and jump and do all of those things. So, you can see that when I jump, we got this nice little curve, which is all handled by the 2D module, which this is where gravity comes into the picture. So, yeah. But he was a bit static. So, we need to add some animation to this. And we're not going to be using an animated gift for that. So, we're going to do it in that way that I've seen a lot of websites do to actually get embedded animation within web pages. You see this at the Apple website all the time. So, whenever they want to have video, which is not video, they actually do this image manipulation where they play, where they have this of the images and just move things around on a canvas. And it's basically the same technique that we're going to be using here. So, and this is where this little animation module comes into play. So, what we do is that I've set up this little scheme of animations. So, I create a set of different animations for something called People. And I do that by passing in a hash. Now, we're going to have four different modes for this little hero character of ours. It's going to be able to run to the left, run to the right, and stand facing left, and stand facing right. Now, all I need to do to make that happen is that I need to reference some frames. And if you recall when we looked at that tile sheet, this broad sheet for our hero character looks exactly the same. There are just little boxes with different versions of that sprite in there. So, when running left, we're going to be showing in order, sprite 0, 1, and 2, and then looping it around again. And we're going to be animating this at the rate of 1 divided by 8, which is going to be the animation speed of this. This is usually a property that you need to fiddle around a little bit with, depending on how many frames you have for your animation, how fast it's going to be moving, and things like that, for it to look natural, more or less. Similarly, to run right, we go for frames 3, 4, and 5. So, these are stacked on top of each other. And we're just showing one frame when it's standing still. For a bit more advanced game, you probably would like to have some animation there. So, you see, like, sprite standing like that's ready to move, like, real ego. But here, we're not doing that, and then we're setting the loop property to false. So, it's just going to play this and not loop around. The only things that I've done with the actual sprite object here is to add a reference to this animation configuration that we just saw, and then also go here and add in the animation module, so that this sprite has this. One fun thing, though, is that I've added a new method called step. This method here is going to be called by Quintus whenever it redraws the world. So, whenever there is an animation step, this is going to be called. And what's happening here is that we reference the actual player object or the sprite object, and we look at the velocity on the vertical axis. So, the VX property here is the vertical velocity of this sprite. If that is larger than zero, we know this sprite to be moving to the right. So, then we queue the run right animation by calling the play method and passing that in. Otherwise, if it's less than zero, we notice it's moving right. Otherwise, in which case it would be zero, we want this to stand still. If it's not moving, we need to know which way it's going to be facing, if it's left or right. We actually have that as a property as well. So, we have a direction property on here. And since I named these things stand left and stand right, we know this property to return left or right. So, we just concatenate that with a stand string there. And that's just about it. So, if I go here, I'm going to have to reload this frame again. There it is. Just click in here. And as you might notice, it's kind of subtle, but it's moving. It's moving its little, tiny little arms and legs around. So, starting to look like something, but it's not much of a game. So, we need some opponents as well. And we're sort of getting into this little wizard-send fantasy kind of thing here. So, let's add a little knight sprite to this. So, this is going to be the same thing all over again as we did with our hero. So, we're having, including another sprite asset and creating a sprite sheet for that. And creating a new class called knight. There's one more thing here because this guy is not going to be controlled by us. He's going to have a mind of his own. So, we're adding some AI for this little character. And for a game like this, it's really an easy way to just make him think is to include the AI bounce module. Now, the way that works is that whenever he's walking over and he's going to hit something, he's going to turn around and then just continue walking straight ahead until he hits something and turns around. So, it's going to create some life, but it's going to be kind of simple. And again, he has the exact same step animation feature here. One more thing that we need to do is that this guy has got to hit the ground running. So, we're specifying the vertical velocity as soon as this thing is created just to have them moving straight away. So, inserting this into the stage is just like inserting the hero sprite. We just create an instance, specify the location where it's going to be, and insert it using the stage insert. One final thing is that we... This is a really, really evil night. So, whenever our wizard bumps into him, we sort of have a game over situation. So, that is handled by this little hit event handler here. So, the Quintus game engine has tons of different events that are related to what you want to be doing in the game. And what events you have are really defined by what modules you include. Now, since I have the 2D and platformer things in here, I'm going to have a hit event. So, this is whenever the hero object hits something else. This event is going to be invoked. We get paused in a collision object, which is whatever he bumps into. And then we can just go ahead and ask if the collision object is a night. So, it's got this nice little very readable interface. So, it has a fluency to it. Kind of like that. And if that is the case, for now, we'll just grab hold of the stage and pause that. So, the game sort of ends. You're going to have to hit reload again here. There. You can see the bad guy down there heading away from us. But we really don't have any way to beat him up at the moment. So, I'll try to jump over him. Ah, no. I didn't manage to jump over him, which made this hit event occur and our game stopped. Ah, game over. Okay. We need to be able to give this guy a bit of a beating, I think. So, for next step, let's, since we have a wizard, I think wizards are pretty cool if you throw fireballs. So, for that, we are going to create yet another sprite. And we have fireball ping. This is a bit different size than the other one. And that goes for night as well. So, even if the tiles in the background are like 32 times 32 pixels, you can actually have sprites who don't fit in with that pattern. The only thing you have to think about is, like, when I had this rocky roof, you need to be able to place things in your tile sheet in a way that you actually have room for the sprites to pass through. Because the collision detection is going to bump into anything. It uses a masking algorithm to see if this thing hits something else. So, again, the fireball is a bit smaller. For creating the fireball object, it's yet another case of extending the sprite object and creating a fireball. For this, we actually go ahead and set the gravity to zero. Because otherwise, whenever this wizard throws the fireball, and that could be a bit cool as well, it drops down into the floor. But we want to have this really powerful fireball thing. So, when it throws it away, it's going to fly ahead. So, and for it not to drop to the floor, because everything is affected by gravity, we set the gravity to zero. Now, this is something that you would need to do if you are creating something like Mario. So, whenever Mario wants to jump up and pick up those coins, you want to have these little coins flying around in there, you need to set the gravity to zero and all those things as well. Okay. So, similar to how we handled bumping into that wizard, we also had a hit event for our fireball object. So, this is going to be cool whenever the fireball hits something, where we can can wreak havoc and have massive destruction of things. And in this case, we're just checking if we if we hit the night. And destruction is handled through destroy. So, what basically happens here is that we take our collision object, refer to the actual object within it, and which is going to be the sprite, and that is going to be a night in this instant, and destroy that sprite, which will remove it from our play field. Otherwise, if this hits something different, and in most cases here, that would be a wall or some kind of brick, we just destroy the sprite itself. And similar to the animation step for this one, it's going to be a bit simpler, because this is going to be moving all the time, so we don't need to stand still. So, it's either going to fly right or fly left. But the mats behind this is just the same thing. But that's just a fireball. It's our hero who's going to throw this fireball. So, let's head on down here to our hero class. Now, we included the input module, and that is going to have events as well. So, fire is an event that will fire whenever I hit the spacebar here. But this also handles things like dpad controls, if you have something that I hooked up. So, it sort of abstracts that. So, whenever this fires, it's going to run this function. And what we're going to do then is, on the stage, we're going to insert a new fireball. And the position is going to be the position of our hero added based on the direction we're either going to add this to the left or the right-hand side of them. So, if our hero is facing left, we're going to subtract a little, like 32 pixels. So, we do that by adding minus 32. Otherwise, we add 32. And since this sprite is a bit smaller than our really tall wizard, we add a little to the Y coordinates as well to sort of center this. And finally, based on the direction again, we're going to set the velocity of this. And we're having a fairly high number here to have this thing fly across. And that's basically it. So, let's go ahead and reload the frame again. It just takes a little while. There we go. And I'm going to be able to jump and should be able to fire fireballs. Yeah, well, pretty awesome, isn't it? And we actually managed to kill our opponent. So, the knight is gone. I'm going to be just filming a couple more. Yeah. And as you might notice, you have that little spinning animation to that as well. But I think one of the things that is missing here is that we should probably have some sound. And we have an audio module that we can add to this, which takes care of playing sounds for us. This is one of the things where you need to think about what browsers you're going to be supporting. Because this is the HTML5 audio API. And different browsers don't really support the same types of files. So, I've taken the simple way out here and just using mp3s. They're actually missing. So, I'm going to go and add those. I'm going to add jump, mp3, and fireball, mp3, to have those resources loaded for me by the Quintus resource loader. And, but for if you want this to work in Safari, you can't use those mp3 assets. So, you would have to use something like an Agwarpis file. So, you would also have to have an Ag asset for that. So, since those who are missing us suspect that we're going to be missing a couple of other things as well. So, we had two sound effects. We have jump and fireball. So, the first one is our hero sprite. So, whenever he jumps, we are going to play a little sound. So, we're going to, oops, input, jump. We're going to have queue and ask the audio module to play our jump mp3. And the Quintus engine actually has this little mixer running there. So, you can layer sounds on top of each other. Which is probably something that if you would want to have some really good atmospheric background music for this, you could set that up whenever you stage the scene for the level down here and just start playing that music which would probably loop over and over and over. And still just use the play thing to play the sound effects. And let's also do something whenever he fires a fireball. So, let's do the play the fireball mp3. There. Apart from that, this is basically all the same thing as it was earlier. While this is loading, I'm going to crank up the sound a little. You can't, it seems like I don't have audio. Is there a possibility to get audio on the, there? No, if you just keep real, real quiet, you can hear this down there. That's a nice sound, isn't it? And there's no awesome fireball sound. So, it goes with that big fireball. So, adding sound effects is super easy with this. So, we sort of have like a complete game now, but to be honest, it doesn't really look like much. So, it's time to add a bit of polish. Now, and if we go way back here to our little spreadsheet, there are so many goodies in here that we haven't used yet. So, basically, we're only using these things here. So, let's add some of the other stuff. And this is where the real tedious work comes in. And I'm not going to do that live for you. But if you recall that we had that tile layer that we created to create the collision layer, what we do to add more depth to our play field is that we just add in a bunch of other tile layers. So, we have a background and then we have the collision, which is one we've been using all the time. And we also create a foreground. So, we can stack this on top of each other. Order matters here because the set index of things is going to be the order that you're added to the stage in. So, that's why we're adding the background to first, to have that first back. Then we add the collision layer, which is this one. This is the background. And then we add all of our sprites. And then we add the foreground to have those rendered in front of the sprites as well. There is one more thing that we're doing here is that we're adding also something called a repeater. And a repeater is something that takes one of these tile blocks and just repeats it vertically and horizontally and vertically. You can also control that. But you can also set the horizontal and vertical speeds of that. Now, the value here, one, would correspond with the foreground and the viewport. But setting that to a smaller number than one is going to add this quite nice parallax scrolling effect so that things move in different speeds, adding depth to our little game. One more thing that I figured that we could add is that if you recall, whenever I bumped into this night, the game just stopped. And it would be really good if we could say that the game has ended. So, game over. Just bring the bad news to the player. And the way you do that is that you create another scene for the game. And here I've created one called game over. And for this stage, I'm going to just insert a bit of text. And that is done by creating a Quintus UI text object for creating all the different elements. This is probably something that you want to do if you want to keep track of scores or things like that. Have that up in the left-hand corner or something like that. You would use a similar stage to have a heads-up display. And then you just place this using X and Y coordinates. You tell it what kind of fun family you want, the size, and what message you want to show. So, to actually show this thing, I've altered the hit event handler for our hero object a little. So, if our hero bumps into a night, we're going to stage the game over scene as scene number one. So, that is going to be displayed on top of the other one. You can stack scenes on top of each other. And as we did earlier, we're going to grab hold of the stage zero and just pause that. And if I go ahead here and reload this, this, we have something that is more visually appealing. And if I actually go move around here, you see that little parallax scrolling effect. And I'm sort of tempted to throw fireballs at this guy, but that one then enabled me to show you that little game over scene. So, I'm going to run away. There's actually something blocking my path. Oh, no. Game over. So, yeah, we sort of have not very entertaining, but still a playable and more or less complete game. We could probably just continue ahead adding like little charms and things that we could go around pick up. We could probably place a princess on here and have our little wizard run along to save the princess from all of the evil knights. But I'm not going to do that. I'm going to leave that up to you. You can go and grab this code at GitHub. Because all of that, adding that stuff, you've already seen what you need to do. It's all about basically going into here, creating sprites. So, if we wanted to have a princess on here, you could more or less copy this code. Create a princess sprite. Create a little princess sprite sheet. Add that to the resources that's loaded here. Compile it. And then when you set the scene, just add that sprite onto there. And if you want to have her in the cage, you can do that. That's just editing the tile layer behind the scenes. And that's really the tedious work. So, the thing is, when creating games, it's not something that is at least not these kinds of games. It's not something that is taxing on you as a developer. It's not hard to write the code. The real work is actually creating all the graphics and actually coming up with a good idea for things. Probably a better idea than what I have now, which is sort of basic. But one thing which is kind of nice with all this being HTML is that it's good to play on your phone. And I was actually planning to create a native iOS app for this. But then yesterday, I was stupid enough to update Xcode. And there is a bug in the Apache library that I would be using to do that. So, Xcode actually doesn't compile anything now. But this is HTML5. So, that doesn't really matter. Let's bring up Safari. And I'll go to go up here and reload this. So, probably rotate this device. And I want to surrender properly. So, let's go this way. And you can see Quintus knows about phones. I want that to go away. So, when this runs on something like an iPhone, you get these little control pads down here. Now, naturally, this is much better if you have thumbs to play around with. But you do have controls. And it runs straight away on the phone. I have to kill them. And this is going to work regardless of what phone you have. So, whatever, if what you have supports HTML5, it's going to run straight away. And if, as soon as the Apache Quartival guys gets their libraries sorted out, you can actually very simply compile this into a mobile application. Now, that is not going to work. But since we have like 50 minutes time, I don't know, we could show you how we would go about doing that. You guys up for that? Yeah? Okay. I'm just going to clear this. And probably just up the font size and my, uh, change font and my terminal a bit. Okay. So, I'm just going to see where I am. Beauty. Okay. So, I was spending some time with Chris Hardy and Jonas trying to get Xcode to behave properly earlier. So, we're no luck. So, I have to remove what stuff that we did. So, just going to go back in time a little. I'm probably not on the right tab. Just give me a second. Wait a minute. Tab is open. Yeah. Okay. So, the first thing that I'm going to do is I'm going to use the code of create command to just create a new project for me. And I'm going to have to remove that. Boom. It all goes away. Okay. Then I'm going to open the game Xcode project. So, we now I'm going to just have to clean this to tidy up whatever stuff we did earlier. This is actually going to compile the default application that we got. And I'm running the iPad now. So, yeah, it starts an app on iOS. I'm just going to switch this to a iPhone device instead. Okay. Let's go start it again. But that doesn't really do much. So, let's just go into our game folder here and look at what's in there. We have a folder called dub, dub, dub. So, let's go in there. And that's actually our little web app. Or the web app that Cordova created for us. So, I'm going to do away with all of the default files here. I'm going to remove the CSS, the images, and the index HTML. The JS things, let me resource is be and then take away the specs. So, this is now kind of empty. I'm going to head on over to GitHub and go to my undersea demo. Just copy that thing from there and go here and do a git clone on that into the undersea demo. You guys can go to GitHub as well to get all of the source code for this game. So, I'm going to put that link out on Twitter as well. So, now we have that. I'm going to just move anything within our undersea demo to our current directory. And let's get rid of our undersea demo folder. So, if we head on back to Xcode now, we should see all of the files in here. Unfortunately, it's not going to build it. But there are a couple of things that we need to do. So, let's open the index HTML file. Probably increase the font sizes a bit here as well. That's a nice thing with there is no easy way to change all of the text in. We'll do this a different way. So, this is the HTML code for the game that you just saw. So, to get this running on iOS, we're going to need to have a reference to Cordova. Apache Cordova, which is the tool that I was intending to use to get this to run on iOS. So, we have to do that there. That's one little change that we need to make. And we also need to go into our JavaScript folder. This looks like crap after I changed that font setting. So, originally, we were going to use hooking up an event listener to the load event on our window. That is not going to work properly for the app. So, instead, we're going to listen for document and on device ready. And that's it. If it had been playing nicely with the latest version of Xcode, I would be able to run this. But, unfortunately, now, it just comes up with a blank screen because it doesn't bundle the resources properly. But you can grab the code from GitHub, try this out. There are basically just two things that you need to do to turn that little HTML thing into an iOS app. And three things. That is, create a project. You can go to the Cordova homepage to see a tutorial on how to do that. And change those two things in here. One, remember to include the Cordova JavaScript file. And two, just change the main JavaScript file to, instead of listening to the window load event, listen for document on device ready, which is a phone specific event. And then you would have a native application that you are free to submit to the iOS app store. And best of all, this being HTML5, you could do this for Android, Windows Phone, and just about any mobile platform that you like. And that is where HTML5 comes in as a good tool set for creating things like games. Now, I think that for most mobile apps, you probably would like to use something like Samarin Studio to get real native apps written in C sharp, where you can share lots of code across. But you want that native look and feel on the different platforms. This game thing is an entirely different matter. Because here, you don't want it to look like the native platform. You want a complete custom look for a game. And you want that game to be the same across all of your devices. And using HTML is a really easy way to do that. You can deploy your code just about anywhere. So that was just about all of the stuff that I was planning on showing you, except for actually deploying this on a phone as well, which unfortunately weren't available able to do today. So I don't know, do you guys feel like going home and sitting down creating a game? It's basically kind of easy. You can do this in an evening. It's a fun pet project. If you're not that good at drawing, I recommend finding a friend who is. And the real challenge, as I said, is coming up with a good idea for a game. But once you have that, who knows, maybe one of you guys is sitting on the next Angry Birds or something like that. And this is a good platform for doing something like that. Any of you guys have any questions? Yep? Sorry. The question was, does this support multi-touch? Yes. I'm going to go back into... Just find the right window. Come on. So we're going to go way back to the beginning here. So we're not using that a lot here, but Quintus has a module called Touch. And that gives you all the touch events for the scene. So you would be able to do multi-touch on a touch device. Yes. So just head on over to the Quintus homepage, which you'll find here, html5quintus.com. The entire source code is also up at GitHub. And you'll find actually rather good documentation on how to use all of the different features. And there are a few example games there as well. There's an entire clone of the classic breakout game, if anyone remembers that. Any other questions? No? You're awfully quiet. Anyone looking forward to the party? Sort of in this old school gaming vibe, press play on tape, are playing there. Anyone heard those guys before? A few people. I've seen them before. They're absolutely incredible. It's a Danish band doing classic Commodore 64 game tunes in a rock tradition. So it's a rock band playing all chip tunes. It's mind-blowing. It's real good fun. So you guys have one more talk to see today than you get to enjoy that. So thanks for stopping by. If you guys create any games, please let me know about them. You'll find me at Twitter. I'm at ANORUS. Thanks for stopping by, guys. You've been an awesome audience.
Anders Nouros. This is where you find me on the kids how to actually use computers in a creative two-dimensional platform of games. So, let's your own little game, tell me how far into the using underscore with using an extend method. jump mp3. And the Quintus engine actually has the way you do that is that you create another entertaining, but still a playable and more or don't know, we could show you how we would go this being HTML5, you could do this for Android, you'll find here, html5quintus.com. The entire