meta data for this page

HTML 5 Game development - Learning diary of Tuomas Kujala

0. Optional Javascript Crash Course
1. Canvas
2. Atlases
3. Input
4. Entities

0. Optional Javascript Crash Course

Class completed 10. & 17.2.2013

General thoughts

  • Ajax stuff is mostly new to me, so this introduction was informative. Learned about XMLHttpRequest and a little about inheritance in Javascript. The DOM side was more familiar.
  • I decided to copy and save all tasks on my computer for me to view later on. Turned out to be a good decision. Development suggestion: Make all previously written code easily browsable (without having to always skip the videos). Also the answers by the creators would be nice to have access to.
  • I did this class in two different sessions. Did some googling and self educating while doing the tasks. Total time elapsed: 3 hours

First task

  • I was a little out of it what I had to do so I checked the instructions again. Still getting used to this web based teaching method with videos ebedded.
  • After the second view I got the hang of it. Had to google how to print to console. Task solved.

Second task (XMLHttpRequest basics)

  • Had to check the instructions again to remember how to define the onload function.
  • First try: 8 errors out of 8.
  • Cannot define the weaponXHR correctly. Have to sign off for now.
  • Continued another day: Got stuck on an annoying typo which led to misleading error messages. Finally solved the task.

Third task (XMLHttpRequest responseType)

  • Got an (misleading) error when using quotation marks instead of apostrophes. Solved.

Fourth task (using XMLHttpRequest)

  • Solved pretty easily.

Fifth task (DOM basics)

  • This is familiar stuff, so solved easily

Sixth task (inheritance in Javascript)

  • New stuff for me in Javascript but an easy copy/paste task.

1. Canvas

Class completed 18. & 21.2.2013

General thoughts

  • Interesting stuff. Knew nothing about the canvas element before. WebP format is also news to me. Learned about canvas and animation. The last task was a bit more challenging which is a good thing. Total time elapsed: 2,5 hours
  • The submitting of these tasks was a bit frustrating because they changed the unit tests from jasmine to mocha. Some of the variable names changed and all the image urls were different. Got all finally submitted with a little help from the discussion section.

First task (canvas basics)

  • Simple task. “Test run” button doesn't work and the solution cannot be submitted. Seems to be an issue with other users as well.
  • Got it submitted two weeks later.

Second task (loading an image)

  • Seemed simple but same problems as before. There seems to be something wrong with this class (or the whole site). Have to continue later.
  • (..continued) Still same problem with the site. Moving on, I'll try to submit the answers later.
  • Got it submitted two weeks later.

Third task (drawing images)

  • Seems easy. Had to google the parameters for drawImage.

Fourth task (animation)

  • This is more challenging task. Took a while to understand what exactly am I supposed to do. Not sure if it works correctly, have to wait for the broken site to be repaired.
  • Submission bug still not fixed after a couple of days (snowflake). Got it solved with a little help from the answer video and by making a simple test.html on my comp:
  • <html><head></head>
    <body id="body">
    <script language="javascript" type="text/javascript" src="1_4_animate.js"></script>
  • Had to change the source script as well a bit by declaring the body object and changing the image urls a bit:
  • var body = null;
    var assets = ['',
  • Got it submitted two weeks later.

2. Atlases

Class completed 10.3.2013

General thoughts

First task (parsing texturepacker output)

  • Easy task. Nice way of teaching this bit by bit, easy to follow.

Second task (rendering texturepacker output)

  • Got stuck on calling the __drawSpriteInternal function, had to take a peek at the right answer. A-ha. I had a “break” instead of “return” in the for loop. Also didn't have a clue that the position in the canvas was supposed to be the position + sprite center point. Maybe a bit clearer instructions would've helped.

Third task (parsing trimmed textures)

  • Twisted my brain trying to think this too difficult. Had to cheat and look at the answer.

Fourth task (loading map data)

  • Had to do some thinking back how to use callback functions (with correct syntax). A good reminder.

Tasks 5-10 (tiled map)

  • Parsing tiled output: Easy.
  • Loading tileset data: Minor difficulties with javascript, otherwise easy.
  • Tileset array: Having trouble figuring out numXTiles and numYTiles. Not sure what are we calculating here (the big picture is vague). Got it right by looking at the error message and guessing.
  • Tile packet: Got really lost with the math part. Having a better idea of the map structure would have helped, maybe I should've drawn this on paper. Watching the answer video made “the big picture” a bit clearer.
  • Drawing tiles: This one was easy (no math involved, hehe).
  • Actually drawing tiles: Achievement! Got it passed on the first try without looking the answer. Although the tiles seem to be in a bit random order. Took a peek: I used tile ID instead of tile index in calculating the drawX and drawY. Fixed this and now it looks right.

3. Input

Class completed 16.3.2013

General thoughts

  • Never used listeners in javascript before, only user input handling I've used before are the basic onclick events etc. So I learned about that. This class takes a step to more actual gameplay programming. The latter half of the tasks was a bit too copy-pasteish for my liking. Using lots of objects and classes in the game engine that we have no idea of. Total time elapsed: 2,5 hours

First task (event listening)

  • Seems easy but not working, why?!? The Chrome dev tools console shows the error message: [red]Uncaught TypeError: Object #<HTMLCanvasElement> has no method 'addEventHandler'[/red]. So the instructions are wrong: there is no addEventHandler method, but addEventListener. Works now. clientX/Y and keyID I have used before, but eventListener was new.

Second task (Keyboard input manager)

  • Fairly easy task. Had to fix the bug in the creator's code though (add “this” in front of the functions when adding event listeners).

Third task (Keymapped input)

  • Had to look at the answer because I really had no idea what was supposed to be done. The “action” array was never initialized, so that threw me off a lot.

Fourth task (Physics engine API)

  • Lots of new elements thrown here in this task (player, physics, …) Task itself was easy though. Got the x axis incrementation and deduction the wrong way.

Fifth task (Mouse firing)

  • The task was a lot easier than I feared when watching the instruction video. Solved on the first try. …Although the answer video showed a bit different kind of solution.

Sixth task (Keyboard firing)

  • A bit too easy copy-paste task.

4. Entities

Class completed 17.3.2013

General thoughts

  • What is an entity? Hmm.. don't remember it being discussed in this consept. Now I now, though. This class handles a lot of actual game play logic in small steps. So in that light this is a nice way of learning the big picture, piece by piece. The tasks themselves were pretty easy (except for the last two). Learned about what entities are and how they are created and controlled. In practice, learned how to use factories to create dynamic objects in javascript. Also learned a new way to loop arrays in javascript. Total time elapsed: 2 hours
  • Data driven desing is very familiar to me from work. Very important not to hard code file paths etc. but use parameter files instead.

Tasks 2-4

  • Tasks were fairly easy. Using factory is new stuff for me, had some syntax problems there.

Tasks 5-7

  • Easy tasks, nothing new here.

Tasks 8-10

  • Defer killing entities: Easy task.
  • Entity render class: Seemed easy, passed the test with a blank draw function. After looking at the answer I realized I should've used the “drawSprite” function we did before. I had no recollection of a “drawSprite” funtion.
  • Implementing Z-ordering: Some exotic javascript here, at least for me. No idea what bucketing is. The “entities_bucketed_by_zIndex” variable messed me up with the curly brackets… Yeah, it's a multi dimensional array. Solved with a little help from the Google guys.