The learning diary of Markku Painomaa

0. Optional Javascript Crash Course

“Easy stuff I've coded javascript before”, I thought, but this wasn't that easy :P Also made me remember how ugly language javascript was, i didn't like the syntax earlier either.

About 1h of doing + <1h of frustration before realising that this will only work in Chrome.

Parsing JSON? Ok. I did already know somewhat what JSON is. It's like xml but not so bloated. So, parse json? If i only knew how to USE json. Let's see google, the video didn't tell anything else but “parse x coordinate from json and return it”.

Damn, the tutorials from google aren't helping. Let's try something and test run it… wait what? “Server error something something”. Hell with this, i skip to the first real lesson.

Hm, i'm sure that canvas code is correct but still “server error”. I'm looking for some forums and IRC and they suggest that Chrome should work. Curses. I ain't going to install some Chrome just for this, Firefox is ok, why to change? HAH. That lecturer guy is actually wearing a Chrome logo t-shirt… i see. Let's then install that Chrome aaaand the canvas code is working! Maybe i'll try that 0. course again.

Well, after all the parsing was just JSON.parse(whateverJSON); just like the lecturer said. I thought it would be something way more complex.


instructions were clear and all tests passed. i only didn't know the syntax for changing responseType; but it was just passing an “arraybuffer” string to it. Those videos really are short and dirty sometimes, i mean you run through new things in few minutes. i'm used to longer and more thorough tutorials.

1. Canvas

Videos loading and jamming all the time. It makes me anxious. just waiting for the next moment when it stops than following the guy.

About 1h

Mostly no problems, clear instructions.

Well except the last one. The man said himself that this was tricky. I've coded some animations myself and knew the principles so the problem was again the syntax. i don't know it exactly and the video takes less than a minute (53 secs.) to explain the thing. yeah.

ok, for-loops here and there. but how do i load those assets? try something. nope. and how do i set the interval? of course by setInterval(); i should have known.

Atlasing 1/2

time 1.5h

Task 1 (parsing texture)

This should've been easy, parsing JSON as in crash course 0. I had an idea of solution but syntax revealed to be mystery again. i tried first something like var x = sprite[“frame”][“x”]. But in answer was shown that i can use also straightforward sprite.frame.x

Task 2 (rendering)

This was very complex. All these gSpriteSheet, sheets, sprites and whatnot. Instructions told me that “Call the drawImage method of our canvas context”. Well, I supposed that context is already there because they didn't tell me to create one. BUT context.drawImage() doesn't work and the error message didn't imply that either. So sneek-peek into answer tells me to use ctx.drawImage(). i couldn't have known that otherway than guessing… fffffu. in the forums the people were also confuzed about that.

Task 3 (trim)

Not even this was that easy. first i tried e.g. sprite.frame.spriteSourceSize.x and got cryptic error of something-something. the right way was to use just sprite.spriteSourceSize.x

Atlasing 2/2

time 2h

Task 4 (loading map data)

This needed just one line of code and still gave me gray hair to get it working.

Task 5 (parsing Tiled output)

After first try&failure, I'm not going to even try again. Given gMap variable seems to works randomly, sometimes it gives error sometimes not. Eventually, i got this working.

Task 6 (loading tileset data)

More gray hair. I almost got it right on the first try. Just for-loop and creating images, problem was i always forgot this keyword.

Task 7 (tileset array)

Super frustration. I usually got the right idea but get messed with the javascript syntax. This time i put “;” instead of “,” inside the var ts union.

Task 8 (tile packet)

I give up, just copy-paste. no idea what they want me to do. I have a look into JSON file but still no idea how to parse things from whatnot?

Task 9 (drawing tiles) & Task 10 (actually drawing tiles)

I don't care anymore. Copy-paste.


time 1.5h

Finally someting else than JSON parsing. Input should be easier to understand! But, in the first quiz everything went even more apeshit, in summary just read it here →

And in the second quiz I was goddamn sure this time my code is correct. and it complained about ReferenceError: onMouseMove is not defined. Well, it definitely is defined. Found from the forum that one particular piece of code is missing, guess what?, the this keyword.

Rest of the quizzes were easier. Now i'm feeling like learning something. On the first try the code didn't work, but it was usually just forgotten this keyword.

Two last quizzes Um. … the answer code was already there and the quiz passes automatically. Also the last quiz passes without making any changes into code. But I did the changes anyway.


time 1.5h

something new, first was checkbox quiz of “what all entities need to do”. first i checked all but google+. finally the right answer was just “keeping position track” and “thinking”. in my opininon every entity needs to know also when to die and what sounds to play, but that's maybe the matter of implementation.

this was easy and interesting lesson. coding was mostly just for-looping entity lists. only difficult was the last one. i knew little about js array methods.


time 3h

Checkbox quizzez. 5th quiz was outright stupid: “do you want to see how far the rabbit hole goes?: yes/no?” that was a matter of opinion but there was a right answer.

I used farseer physics engine some time ago, so box3d seemed familiar. no problems.


time 2h

Well 4/10 of the quizzes passed so far. the coding was right but the unit tests are flawn. it complains about not setting clip.l = true; eventhou it is. “Fortunately” the tests seem to pass randomly, so i got one quiz passed by chance.