Game on: Developing HTML5 games
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 150 | |
| Author | ||
| License | CC Attribution - NonCommercial - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/51536 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
00:00
Game theoryComputing platformComputer programmingGame theoryEndliche ModelltheorieTouch typingSpeech synthesisAssembly languageKey (cryptography)QuicksortModule (mathematics)Game controllerRoundness (object)Arithmetic meanBuildingWeb browserMedical imagingAverageCodeNeuroinformatikMereologyMatching (graph theory)Multiplication signWindowState of matterDemo (music)Instance (computer science)DemosceneWeb pageOrder (biology)Mobile WebMoving averageBitNetwork topologyDegree (graph theory)Web 2.0CircleSoftware developerEnterprise architectureFitness functionClient (computing)Sound effectTouchscreenDifferent (Kate Ryan album)Web-DesignerMathematicsTwo-dimensional spaceMilitary baseThumbnailAtari STEvent horizonHookingStructural loadLimit (category theory)Computer animation
06:29
Function (mathematics)Level (video gaming)DemosceneoutputTouch typingDegree (graph theory)Computer clusterCAN busMaxima and minimaAmsterdam Ordnance DatumSpreadsheetCodeAreaInclined planeBitLevel (video gaming)TesselationBuildingObject (grammar)Projective planeRight angleCollisionGame theoryMultiplication signDisk read-and-write headGraphical user interfaceClassical physicsCrash (computing)Moment (mathematics)Uniform resource locatorQueue (abstract data type)Commodore VIC-20Different (Kate Ryan album)NumberObject-oriented programmingQuicksortWhiteboardDemosceneProcess (computing)Real numberForm (programming)SpacetimeFamilyACIDComputer fileArray data structureSet (mathematics)Computer animation
12:11
Function (mathematics)DemosceneoutputTouch typingMaxima and minimaGUI widgetLevel (video gaming)Annulus (mathematics)Frame problemBit rateLoop (music)Uniform resource nameVideoconferencingElectronic mailing listVisualization (computer graphics)Medical imagingFluid staticsWindowDirection (geometry)Frame problemModule (mathematics)Point (geometry)BitWeb pageWebsiteForm (programming)Process (computing)Multiplication signString (computer science)Object (grammar)CASE <Informatik>Right angleArmCategory of beingRoundness (object)GravitationOrder (biology)Level (video gaming)View (database)Bit rateEndliche ModelltheorieRevision controlVelocityGame controllerCuboidDifferent (Kate Ryan album)Position operatorProjective planeOptical disc driveInstance (computer science)Set (mathematics)Numbering schemePattern languageScripting languageGame theorySoftware frameworkComputing platformHash functionLoop (music)ReliefAsynchronous Transfer ModeQuicksortElement (mathematics)Interior (topology)Social classCartesian coordinate systemConfiguration spaceDark energyObject-oriented programmingTesselationDigitale VideotechnikComputer animation
20:27
Touch typingoutputFrame problemBit rateLevel (video gaming)Function (mathematics)Maxima and minimaShared memoryFrictionJava appletGravitationFunctional (mathematics)Object (grammar)Event horizonInsertion lossSocial classModule (mathematics)VelocityUniform resource locatorGame theoryBitMultiplication signPattern languageLevel (video gaming)Collision detectionQuicksortMoment (mathematics)Category of beingString (computer science)ArmTesselationAlgorithmGravitationDirection (geometry)CASE <Informatik>Computing platformInterface (computing)Different (Kate Ryan album)CollisionGroup actionEndliche ModelltheoriePixelVideo gameInstance (computer science)Term (mathematics)Wave packetProjective planeMassComputer animation
28:17
Function (mathematics)VacuumExecution unitDemosceneoutputTouch typingMaxima and minimaFrame problemBit rateLevel (video gaming)Loop (music)GUI widgetInclusion mapComputer-generated imageryDilution (equation)outputPixelHydraulic jumpQuicksortVelocityNumberSound effectModule (mathematics)Web browserPosition operatorBootingRight angleGame theoryObject (grammar)MP3Field (computer science)CASE <Informatik>MathematicsSpacetimeComputer fileDemosceneLevel (video gaming)CollisionDisk read-and-write headAbstractionSocial classEvent horizonGoodness of fitMusical ensembleArmMultiplication signBitCoefficient of determinationComplete metric spaceGraphics tabletBoss CorporationFrame problemDirection (geometry)Procedural programmingEndliche ModelltheorieMereologyControl flowType theoryOrder (biology)Moving averageFunctional (mathematics)Computer animation
36:06
Function (mathematics)Touch typingDemosceneoutputMaxima and minimaFrame problemBit rateGravitationLevel (video gaming)DualismGamma functionGame theoryGame theoryLevel (video gaming)TesselationCodeGoodness of fitSound effectQuicksortDemosceneStack (abstract data type)Coordinate systemFamilyMessage passingEvent horizonObject (grammar)Element (mathematics)TrailDisk read-and-write headSubject indexingNumberSet (mathematics)Order (biology)CollisionBlock (periodic table)1 (number)Field (computer science)Multiplication signBitSoftware bugLibrary (computing)Computer fileoutputMobile appCheat <Computerspiel>Software developerElectronic visual displayComputer animation
43:55
NP-hardGastropod shellMathematicsGame theoryGame controllerDefault (computer science)Game theoryGraphics tabletCartesian coordinate systemThumbnailMobile appoutputMultiplication sign2 (number)Projective planeLibrary (computing)MathematicsRadical (chemistry)Type theoryQuicksortFrequencyComputer animation
47:35
Execution unitAutoregressive conditional heteroskedasticityGame theoryPrice indexSubject indexingMedical imagingGame theoryDefault (computer science)Computer fileWeb applicationComputer animation
48:40
CloningObject (grammar)Image resolutionTwitterDemo (music)Game theorySource codeDirectory serviceLink (knot theory)Ocean currentCloningSource code
49:28
Menu (computing)Maxima and minimaContent (media)Clique-widthScripting languageMeta elementGame theoryDemosceneSimulationSocial classSource codeSoftware frameworkProduct (business)Software development kitPrice indexBit rateoutputTouch typingInclusion mapGUI widgetFrame problemFunction (mathematics)Computer fileCodeoutputMathematicsEvent horizonWindowMobile appBitSubject indexingSet (mathematics)Structural loadGame theoryPatch (Unix)ExergieForm (programming)Computer fontGoodness of fitRevision controlSource codeComputer animation
51:17
Level (video gaming)Gauge theoryWechselseitige InformationAugmented realitySpecial unitary groupBit rateHill differential equationExecution unitLemma (mathematics)Revision controlProjective planeTouchscreenFiber bundleCodeoutputMobile appWindowStructural loadLatent heatEvent horizonShared memoryComputing platformComputer fileHome pageGame theoryDifferent (Kate Ryan album)Complete metric spaceMachine codeAndroid (robot)Forcing (mathematics)AuthorizationMereologyInsertion lossScripting languageComa BerenicesProcess (computing)Computer animation
54:52
Function (mathematics)Goodness of fitModule (mathematics)TwitterEvent horizonEntire functionSource codeTouch typingMusical ensembleGame theoryTunisReal numberCloningClassical physicsQuicksortTape drivePlanningEndliche ModelltheorieDemosceneWeb pageRow (database)Commodore VIC-20Coma BerenicesJSONXML
Transcript: English(auto-generated)
00:02
Okay guys, good afternoon. We're sort of halfway through the conference, have you guys been having a good time so far? Not? Not? Is it all that boring? Yeah, there's one thumb up at the back there anyway. So, welcome to this talk. I'm Anders Noors. This is where you find me on the interwebs. This is going to
00:24
be a talk about HTML5 game programming. And speaking of games, I do work for Terra as their CTO. We get a booth down there and we got this awesome little flipper pinball game, all Terra themed. So, I suggest you guys go down there
00:42
and play a couple of rounds. There are some pretty awesome prices for you, if you manage 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
01:02
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 the ideas they had was creating some games. So, that's basically where all
01:23
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
01:49
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
02:01
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 there in Oslo to teach kids how to actually use computers in a creative way. So, I figured this is a good
02:21
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
02:40
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'll 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. A while back,
03:01
this was all Motorola 68000K 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
03:21
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
03:41
on the PlayStation team as soon as he finished high school. So, this was the kind of stuff where 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
04:03
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
04:23
browser. Because the browser has always been also kind of limited. So, I figured for today, we're going to do something a bit retro and kick it off at 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
04:43
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
05:01
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 off school this way as well. And let's just go and create an instance of the Quintus.
05:25
Let's find out the window key as well. And create the actual game engine. Now, we're going to need a couple of things. And the Quintus is very module based. So, we have to include the
05:41
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 a 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 platformer game. So, let's bring in the 2D module. The animation module. The touch
06:03
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 the
06:28
controls. Oh, snap. Okay. It seems like, well, it seems
06:40
like Chrome is acting up. Let's just bring it back in. 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
07:09
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
07:20
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 sprite sheet for the tiles. And that is
07:43
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
08:01
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
08:22
going to use the tiles sheet. Finally, Chrome went ahead and staged the scene. So, let's just go ahead, look at what it made. So, we have this. We have sort of something that could resemble ground. I think this kind of
08:41
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
09:01
that's the cue 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
09:22
stuff. It's a good place to go if you're a bit visually 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
09:43
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
10:00
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
10:25
these tile maps, it's kind of tedious. What you do is that you sit around, you tweak this, hit reload, and sort of build this up. If you're thinking about building something serious like a big game up, you probably won't be doing this for
10:43
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
11:00
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
11:24
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
11:43
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
12:02
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
12:21
Mac isn't blue screen, but this thing has. Could we get some visuals back? Something happened. It detected. Yeah, there is. Okay, thanks. Wherever
12:44
that technician is. Okay, so yeah. The way that the object system in Quintus works is that when specify a string here with the name, that actually becomes the name of the JavaScript object later.
13:03
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 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,
13:21
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
13:41
the actual sprite and compile the sprite sheet for that. So, when this sets up, Quintus uses the conventional 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 sprites and tell Quintus which
14:06
sprite sheet to use, which is the hero sprite sheet, which we loaded further down. And the position on inner world, the XY coordinates to where to place this one. And finally, I go in and add a couple of modules to that sprite
14:23
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
14:43
essential. Otherwise, you'll fly up in the air 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
15:02
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 others doing it similarly. And finally, I'm adding
15:23
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. Suddenly, we have this little guy on
15:43
there. And I'm actually able to control him around and jump and do all of those things. 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
16:02
static. So, we need to add some animation to this. And we're not going to be using an animated GIF 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
16:24
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 difs of the images and just move things around on the canvas. And it's basically
16:43
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
17:00
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
17:22
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
17:40
sprite 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 zero, one, and two, and then looping it around again. And we're going to be
18:01
animating this at the rate of one divided by eight, 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 this to look the way, for it
18:22
to look natural, more or less. Similarly, to run right, we go for frames three, four, and five. So, these are like stacked on top of each other. And we're just showing one frame when it's standing still. For a bit more advanced game,
18:40
you probably would like to have some animation there, so you see like sprites standing like that, ready to move, like real eager. 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
19:02
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 final thing, though, is that I've added a new
19:20
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
19:41
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 the sprite. If that is larger than zero, we know this sprite to be moving to the
20:02
right. So, then we queued the runRight animation by calling the play method and passing that in. Otherwise, if it's less than zero, we know this to be moving right. And otherwise, in which case it would be zero, we want this to stand
20:21
still. But if it's not moving, we need to know which way it's going to be facing, if it's left or right. And we actually have that as a property as well. So, we have a direction property on here. And since I named these things standLeft and standRight, we know this property to return
20:44
left or right, so we just concatenate that with the 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
21:05
clicking here. And as you might notice, it's kind of subtle, but he's moving. He's moving his 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
21:23
as well. And we're sort of getting into this little wizards and fantasy kind of thing here. So, let's add a little night sprite to this.
21:41
So, this is going to be the same thing all over again as we did with our hero. So, we're including another sprite asset and creating a sprite sheet for that. And creating a new class called night. There's one more thing here
22:05
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
22:20
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
22:41
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.
23:00
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 him moving straight away. So, inserting this into
23:26
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
23:40
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
24:01
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
24:23
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 knight. So, it's got this nice
24:40
little very readable interface. So, 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. Going to have to hit
25:01
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. I did manage to jump over
25:23
him, which made me, made this hit event occur and our game stopped. Game over. Okay. We need to be able to give this guy a bit of a beating, I think. So, for the
25:47
next step, let's, since we have a wizard, I think wizards are pretty cool if they throw fireballs. So, for that we are
26:01
going to create, use yet another sprite. And we have a fireball ping. This is a bit different size than the other one. And that goes for knight 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
26:23
that pattern. The only thing you have to think about is, like when I had these rocks, like 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
26:40
detection is going to bump into anything. It uses sort of 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
27:00
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, like, really powerful fireball thing. So, when he throws it
27:22
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
27:41
those coins, so you want to have these little coins flying around in the air, you need to set the gravity to zero and all those things as well. Okay, so, similar to how we handled bumping into that
28:01
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 wreak havoc and have massive destruction of things. And in this case, we're just checking if
28:22
we hit the knight. 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 knight in this
28:41
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.
29:06
similar to the step, 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 really need to stand still, so it's either going to fly right or fly left, but the maths behind this is just the same
29:22
thing. But that's just a fireball, it's our hero who is 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
29:41
going to have events as well. So, fire is an event that will fire whenever I hit the space bar here, but this also handles things like d-pad controls, if you have something like that hooked up, and so it sort of abstracts that.
30:03
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
30:21
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 small,
30:40
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 we're having a fairly high number here to have this thing fly across.
31:08
And that's basically it. So, let's go ahead and reload the frame again. It just takes a little while.
31:26
There we go. And I'm going to be able to jump, and should be able to fire five balls. Yeah! Whoa! It's pretty awesome, isn't it? And we actually managed to kill our opponent. So, the knight is gone.
31:44
I'm going to be just throwing 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.
32:06
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
32:21
are 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
32:41
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. But if you want this to work
33:01
in Safari, you can't use those MP3 assets. So, you would have to use something like an Ogg warbis file. So, you would also have to have an Ogg asset for that. So, since those were missing, I suspect
33:22
that we're going to be missing a couple other things as well. So, we had two sound effects. We have jump and fireball. So, the first one is our hero sprite. So, he, whenever he jumps,
33:44
we are going to play a little sound. we're going to, oops, input.
34:00
Jump, we're going to have Q and ask the audio module to play our
34:23
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
34:41
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.
35:02
So, let's do 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
35:27
going to crank up the sound a little. Ah, you can't, it seems like I don't have audio out. Is there a possibility to get audio on the
35:40
there? No, if you just keep real, real quiet, you can hear this down there. That's a nice sound, isn't it? And ah, there's an awesome fireball sound. Sort of goes with that big fireball. So, adding sound effects is super easy with this. So, we sort of
36:04
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
36:21
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.
36:44
And this is where the really 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
37:06
we just add in a bunch of other tile layers. So, we have a background and then we have the collision which is the 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
37:23
because the set index of things is going to be the order that they're added to the stage in. So, that's why we're adding the background to first have that first back. Then we add the collision layer,
37:42
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 and that is that we're adding also something called a repeater. And a repeater is
38:02
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
38:22
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.
38:42
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
39:01
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
39:22
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
39:41
using X and Y coordinates. You tell it what kind of fun family you want. The size. And what message you want to show. To actually show this thing, I've altered the hit event
40:02
handler for our hero object. A little. So if our hero bumps into a knight, we're going to stage the game over scene as scene number one. So
40:20
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 here and reload this, we have
40:53
something that is more visually appealing. And if I actually go move around here, you
41:01
see that little parallax scrolling effect. And I'm sort of tempted to throw fireballs at this guy, but that one enabled me to show you that little game over scene. So I'm going to run away. Ah, there's actually something blocking my path. Oh, no.
41:23
Game over. So yeah, we sort of have a not very entertaining, but still a playable and more or less complete game. We could probably just continue ahead adding like little charms
41:41
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
42:01
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
42:22
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
42:44
the tedious work. So the creating games is 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
43:01
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
43:20
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
43:42
bug in the Apache Cordova library that I would be using to do that. So Xcode actually doesn't compile anything now. But this is HTML file. So that doesn't really matter. Let's bring up Safari. And I'll go to go up here and
44:01
reload this. Probably to 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 in a second. So when this runs
44:20
on something like an iPhone, you get this little control pads down here. 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 fucking kill him. And
44:41
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 as soon as the Apache Cordova guys gets their libraries sorted out, you can
45:00
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
45:22
just going to clear this. And probably just up the font size in my change font, in my
45:40
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
46:01
trying to get Xcode to behave properly earlier. So with no luck, so I have to remove the stuff that we did. So just going to go back in time a little. I'm
46:23
probably not on the right tab. Just give me a second. Way too many tabs open. Yeah. Okay. So the first thing that I'm going to do is that I'm going to use the Cordova
46:40
create command to just create a new project for me. And I'm going to have to remove that. It all goes away. Then I'm going to open the game
47:04
Xcode project. So we now I'm going to just have to clean this to tidy up whatever stuff we did earlier. This
47:22
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.
47:42
Quit. 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
48:01
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
48:20
the index HTML, the JS things. Let's leave the resources 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
48:46
my NDC demo. Just copy that thing from there and go here and do a git clone on that into NDC demo. You guys can go to
49:01
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 we have that. I'm going to just move anything within our NDC demo to our current directory and
49:21
let's get rid of our NDC 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
49:42
open the index HTML file. Probably increase the font sizes a bit here as well. That's a nice
50:01
thing. There is no easy way to change all of the text in and do this a different way. So this is the HTML code for the game that you just saw. So to get this running
50:22
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
50:41
little change that we need to make. And we also need to go into our JavaScript file. Now this looks like crap after I changed that font setting. So originally we were hooking up an event listener to the load event on our window. That is not going to work
51:00
properly for the app. So instead we're going to listen for documents and on device ready. And that's it. If Cordova had been playing nicely with the latest version of Xcode, I
51:20
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 you need to do
51:40
to turn that little HTML thing into a iOS app. And three things. That is create a project. You can go to the Cordova home page to see a tutorial on how to do that. And change those two things in here. One,
52:01
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
52:20
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
52:41
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 Xamarin Studio to get real native apps written in C sharp,
53:00
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 entirely complete custom look for a game, and you want that game to be the same across all of your
53:21
all of your devices. And using HTML, is a really easy way to do that. It's 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 the phone
53:40
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.
54:01
If you're not that good at drawing, I'd 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
54:20
Angry Birds or something like that. And this is a good platform for doing something like that. And if you guys have any questions? Sorry, could you yeah, so the question was, does this support multi-touch? Yes,
54:41
I'm going to I'm going to go back into just find the right window. Ah, come on. So, we're going to go
55:00
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 for the scene. So,
55:20
you would be able to do multi-touch on a on a touch device. So, just head on over to the Quintus home page, which you'll find here. HTML5Quintus.com. The entire source code is also up at GitHub. And you'll find
55:40
actually rather good documentation on how to to use all of the different features. And there there are a few example games there as well. There's an entire clone of the classic Breakout game if you if anyone remembers that. Any other questions? No? You're awfully awfully quiet.
56:01
And if anyone looking forward to the party sort of in this old school gaming web, press play on tape are playing there. Anyone heard of those guys before? Few people. I've seen them before. They're absolutely incredible. It's a Danish band doing classic Commodore 64 game tunes
56:21
as in a rock tradition. So, it's a rock band playing old chip tunes. It's mind-blowing. It's real good fun. So, you guys have one more talk to see today and then you get to enjoy that. So, thanks for stopping by. If you guys create any games,
56:41
please let me know about them. You'll find me at Twitter. I'm at A. Norris. Thanks for stopping by guys. You've been an awesome audience.