From idea to owl - designing our second Scratch game

Few weeks ago we started designing our second Scratch game. We were outside walking home from the playground and we started discussing something about games and the conversation led to us deciding to build another game. I asked if she had any ideas for the game and it only took her a couple of seconds to come up with an idea for a game where an owl flies and catches mosquitoes. The level of detail that comes with her ideas is always very rich and I have to try and keep it simple so it's actually something we can accomplish with any decent amount of work.

I instantly started thinking it would be easy to implement such a game with a scrolling background, so I tried to explain the concept to her a little bit. But I sensed it was not going down that well so we talked about the details for the background graphics for a bit more before we were home.

Graphic design

Demonstrating
scrolling background.

We decided to draw the graphics on paper again. She started with the backgrounds (we needed two so we could make them scroll) and they came out really well. I decided to illustrate the background scrolling effect to her again, but this time show it by example. So we also made a "screen" by drawing a frame on paper and cutting out the middle with scissors. Then she held the frame little bit above the table surface and I moved the background drawings beneath it. I think she understood the concept this time and was excited about how it will look on the computer.

But first we needed to draw the owl. Or actually we also needed two owls, because even though I tried to keep things simple as I said above, she was adamant that the owl must first sit on a tree branch and only start flying after a button has been pressed.

She was a little nervous about whether the owl would come out good enough, so I suggested we look up some example pictures from the internet. We headed to Google image search and found some nice colourful owl pictures. She needed a bit of help to get the body shape right on the symmetrical sitting owl, but it came out amazing, much better than what I had expected. And then she drew the flying owl all by her self, without any help from me. That one also came out amazing and she was very pleased with herself and ran to show it to her mummy.

With the drawings done, she was already eager to start coding, but we didn't have time to start right away. I took pictures of the drawings and later processed them on an image editor. Nothing much, just stuff like cut out the owls and straighten the backgrounds and some small color corrections etc.

Next time we'll fire up Scratch and start with the actual coding. But all of the designing, preparing and modelling is also fun so we had really good time.

Rapunzel climbs - our first Scratch game

After learning about some basic programming concepts with other tools and environments (more about these in the Introduction post), I thought we'd try out Scratch and see how it goes. It was over six months ago, so I don't remember exactly what conversations we had and whether we talked about game development before or after looking around in Scratch. But I do remember it didn't take long for her to come up with an idea for a game.

Graphics

I thought it would be nice to combine the "real" world with the digital game a little bit, so I suggested that she draws the background on paper and then I'll "move the picture inside the computer". She was really enthusiastic about the idea and started drawing immediately. The game is about the princess Rapunzel climbing up her tower, so she needed to draw the tower.

She was a little concerned that the lines for the tower walls would not be straight, so I suggested that she could try to use a ruler. We hadn't used a ruler that much before, so it was a nice exercise and the tower came out really well. She was very focused on the drawing and it came out really nice, much more details than what she normally otherwise draws. I only helped a little bit with the roof tiles.

Then of course we needed Rapunzel and also Flynn (the thief from Rapunzel movie) and some rope. I found some images from the internet and cut out backgrounds with an image editor.

Game mechanics

The  actual game mechanic is pretty simple, move the Rapunzel characters sprite up when space button is pressed. Kaisla also wanted to add some sound effects, so we recorded some sound inside Scratch and added them to few key points, like the beginning of a new game and then my voice if Flynn wins (saying "eka ylhäällä", which is "first on top" in Finnish) and her voice if Rapunzel wins (saying "minä voitin", which is "I won" in Finnish).

My daughter working on a Rapunzel game on #Scratch. With proper attire, of course. pic.twitter.com/nBvtAa0oAU
— Carl Vuorinen (@cvuorinen) July 28, 2014

Multiplayer

At first we had made Flynn climb by himself, with a loop that moves him up a bit and waits a second. But later we decided to make a multiplayer version so that I can play with Flynn and we can compete against each other. So we changed it so that pressing the up arrow key moves Flynn up. This turned out better than I had expected, it has been really fun to play after that. We have played it many times just for fun, without any programming. And Kaisla has also played it with her little sister Sohvi.

You can check out the final game here: Tähkäpää kiipeää (Rapunzel climbs). Why not try it out and leave a comment if you like it.Click the green flag to start a new game (and the blue rectangle on top left corner to make it bigger).

Introduction

This is a blog about the adventures I have with my daughter Kaisla as we learn to code and do other computer related stuff. She is 5 years old (at the time of writing this in March 2015) and we have been doing little "computer exercises" for a while already, mostly inspired by the Girls Can't Code blog and with some iPad apps etc. In this introduction post I will go through what kind of things we have already done together and what we have learned along the way.

I think it was a little over a year ago when we first started. She seemed quite interested whenever she saw me working on my computer and sometimes asked if she could "write on daddy's computer". I let her type with Word (put CapsLock on, big font size and pink color) and she would happily spend 20 minutes typing big bright letters on the screen.

After a while we started to really use the computer and I created a profile for her on my Ubuntu laptop. She was quite excited to pick her own password and desktop background image (nice butterfly we found using Google image search). Then we fired up the Terminal and started to explore the wonders of command-line. We learned how to create and edit text files with nano and I also created an alias "sano" (Finnish for "say") to espeak with Finnish language switch so we could make the computer speak. This was really exciting and would provide lots of fun for many "lessons".

And of course we explored the true power of Unix command-line by combining our skills with the pipe operator, we saved words to a file with nano and then piped that to "sano" which would then speak the file contents. Oh, what a joy when the file from earlier computer lesson would still be there next time and could be spoken out again. Our favourite one was a file with "1 2 3 4 5 6 7 8 9 10 täältä tullaan" (Finnish for "here I come", what you say after counting when playing hide and seek).

Getting started with programming

After a while it was time to get our hands dirty and start coding. I think the first programming we ever did was with Turtle Roy, a nice browser based programming environment where you can make a turtle (or other characters) move and draw on the screen. It is text based programming, but we were already quite used to typing commands as text after using the command-line. We have also used other, more graphical programming environments like Scratch and Lightbot game on the iPad. I have listed these and more links in Resources page.

She really likes Lightbot and has gotten pretty good at it, last time we did a recursive function which was loads of fun. We also go back to Turtle Roy every now and then, it's nice how it's so visual even though it's text based programming and every time she wants to draw more complex shapes with it so we have to learn some geometry to get all the shapes and angles right etc.

Taking things apart

Hardware work with little sister.

Many people today, even young people who use computers every day and are thought to be computer savvy, don't really know how they work inside. When I was a kid we always assembled our computers together with my dad. And we learned a lot about how they work while doing that. Today when people have their iPads and MacBooks, it's not that easy to really get a look inside a computer and take it apart. Luckily there are thinks like the Raspberry Pi that don't try to hide the computer inside a pretty shell that cannot be opened.

After we had started saving files on the computer, we started talking about how the computer memory and hard drive works. This naturally led to me promising her that we'll open up a computer and look inside. We first dismantled an old desktop computer to get a better look at how everything is wired together and discussed what each component does. Later I also let Kaisla and her little sister take apart my old laptop which wasn't working any more (picture above).

Game development

Once we started exploring Scratch, it didn't take long until she started thinking about developing a game. You can read more about our first game in a separate post.

We are currently developing our second game and I think I need to write at least a few posts about that too (Update: From idea to owl - designing our second Scratch game). Developing games together has been very entertaining and we have learned a lot. More info coming in future posts. Another dad developing Scratch games with his son has also inspired me to create this blog, so check out Games by Devon.

Closing thoughts

Learning about computers and coding has been very educational and we have had a lot of fun together, but most importantly I have spent time together with my daughter. Obviously it's not the only thing we do together and sometimes there are weeks or even a month when we don't do anything with computers, but so far we have always come back, either by her request or by my suggestion. It's something that I am interested in, and she enjoys it also. Programming is not for everyone and I'm not saying every parent with 5 year old kids should teach them programming, especially if the kid does not seem interested in it. But it's a great way to spend time together and learn new things if it's something that both enjoy.

If you have any thoughts, experiences with similar things or just comments about anything, please leave a comment below. And check back later for new posts.