Scrolling background
I knew we were going to need a scrolling background and had some ideas how to implement it, but decided to do some research beforehand. I found this nice wiki page that explains few different scrolling concepts and we ended up using a variation of one of the solutions presented in that article. Just had to modify it a little so that it scrolls all the way from outside of the view to the other side.
Owl flies
Next it was time to add the owl. As I said in the previous post, we had two owls, one that sits on a tree branch and the one that flies. Adding the sitting owl was simple, just drag it to the correct position and scale it to appropriate size. We decided that pressing space bar starts the game, so we hide it when that happens. Because lots of other stuff also needs to happen as the game starts, I thought it would be good to implement the game start as an event that is broadcast from one place. We discussed few different analogies for the broadcasting of an event, she seemed to like the idea of sending a message by mail the most. So, when the game starts we broadcast an event "lennä" which is Finnish for "fly" (in imperative form).
The flying owl required some more coding. It needed to appear when the sitting owl disappears and then start moving. Because we have a scrolling background, our owl can remain static horizontally and only move vertically. We decided to use the space bar key for flying as well, so that the owl descends if the space key is not pressed and ascends if it is pressed. This logic required a simple loop that runs as long as the game is playing and inside it a simple if condition; if space key pressed, then move owl up, else move owl down. Also needed a small wait inside the loop so it doesn't run too fast. After that it took us some experimentation to get the right "speed" for the owl's ascend and descend and smoothness of the movement by adjusting the wait time and the amount of pixels for the movements. But it was fun to do and we had a few laughs while making the owl or the background move too fast.
 |
| Code for our flying owl. |
Sound effects
Sound effects are always a fun part of creating a game. This time Kaisla wanted that I do the owl sounds and she does mosquito buzzing. We recorded the sounds in Scratch, edited them a little bit and added some to the game right away.
The owl is hungry
Now that we have a flying owl, we can finally get to the actual objective of the game: catching mosquitoes. Kaisla hadn't drawn an image of a mosquito, so we looked for one in the Scratch sprite library and found one that was good enough for our use. Maybe we will add a custom image later.
We needed multiple mosquitoes on the screen and they needed to scroll with the background (to appear staying static) so we took the scrolling logic from the background and modified it a little bit so we can set a custom starting point for the image to appear. Kaisla decided that the owl needs to catch 10 mosquitoes, but that sounded like too much to be on the screen at the same time so I thought that maybe we could have only a few sprites that we can reuse, by positioning them again after being eaten.
For this we needed to explore a new concept, randomization. After being eaten, we move the mosquito to a new position that is outside of the screen horizontally and then assign it a random position vertically. We encountered a few bugs while coding this that caused for some funny side effects, like the mosquito getting "stuck" to the owl's beak. But we finally got it working well and now the game could actually be played.
Because Kaisla is so careful about the details, she soon pointed out that there are too many mosquitoes because she had decided there should only be ten. So we needed a way to count the number of mosquitoes the owl has eaten. We had explored the concept of variables a few times before and she didn't have much trouble grasping the idea when I explained it as something like writing down a note on a piece of paper so it can be looked up later. We also discussed variable naming and I said that it's always good to name them after the values stored in them so that it's easier to understand later. She seemed to grasp this concept well and named the variable "hyttysiä syöty" (Finnish for "mosquitoes eaten").
Scratch has a nice feature where you can choose that it shows the contents of a variable on screen while playing so we didn't have to implement that by ourselves to see the value increase as intended.
 |
| Kaisla explaining the game to her little sister. |
Finishing touches
We still had a few items left on our TODO list, like making the owl flap it's wings and making the owl go back to sitting on the tree branch after it has eaten 10 mosquitoes. We have since added the wing flapping effect by creating a second "costume" for the flying owl that we change in the loop. I just cut out the wings in an image editor and rotated them to create another one with the wings in a more upright position. It took a little tweaking until I got it to look good enough for her but I think it came out quite nice in the end.
We haven't done any coding for a while now and the owl returning to the branch is still not done. But we'll get to it sometime in the near future. Here is the game in it's current state, so you can check out all of the code, or just try it out. And why not leave a comment if you like it.
Update: And as I just discovered that Scratch games have embed codes, here is the game inline so you can try it out right here (if you're on a browser that supports Flash).
