So this morning I spent two hours or more precisely two lots of approximately 55 minutes teaching two nine year old girls how to use Game Maker. I am currently in the process of making free downloadable resources for the Creative Computer Club here. (The blog is currently locked and invite only for funders, sponsors, press, parents and participants only for the first eight weeks and will then go public. This was the reward you got for helping fund the club on Peoplefund.it.) The resources are for any and everyone to use under a creative commons license and will be available in around 8 weeks time. You can find more information about the Creative Computing Club here.

The hour long plan has notes and a slide show to accompany it and it takes you through the basics of a platform game, with items to collect, level progression and bad guys. It was great going through it twice as I found a few typos to neaten up, but most importantly it was perfect for the job. It was the right amount of time and depth of information for an introduction to Game Maker. The two girls now understood what was going on behind the scenes of games. It is important to note they only had five minutes max in the session to draw out the characters as this was not Game Design, but game programming. Despite this constraint they managed to make some lovely little characters.

The lesson plan is only an introduction it doesn’t feature sound, backgrounds or animation those things however should become fairly obvious after working your way through the lesson. Many thanks to YoYoGames for sponsoring Creative Computing Club with a copy of their excellent software and thanks to all those who helped fund it, it is going to be an amazing project.

Today was the day the kids got to see the three web apps they designed , I am really pleased with how they all turned out and the kids were too. It is really nice to see something they designed running on a bang-up-to-date iPad, (imagine being nine and already have your first web app out). We naturally spent the first twenty minutes of the session playing through all the apps, they were too excited to do anything else, we quickly followed this with short written reviews and comments about each others games and now that they have finished, what if anything they would have done differently. We then moved on to designing a print logo for each game, trying to encapsulate as much of the game in just the logo alone. At the end of the session they were allowed to return to their apps for 10 minutes as they had worked so very hard.

“Electric Zombie Inc.” has released “Warfare: Revenge of Germany” here, “Monkey Business” has released  “Animal Time” here and finally “Rainbow Buddies” released “Dress Up Pets” here. They will only be up for a short period of time as already they have been pushing my server to its limits. We may be tweaking them a bit soon as well, you’ll soon be able to control “W:ROG” with keys as well as the touchscreen and “Animal Time” may get a few more levels too.  I am really pleased I got to do this project with Springfield Junior School and the fact they can access it in both a browser and iPad is amazing. So just to recap 12, 9-year-olds spent two hours a week with me for five weeks (10 hours total, 8 hours designing, discussing, drawing, animating and brainstorming and 2 hours of playing and discussion today) and I think they did a pretty good job of it too. I really must thank YoYo Games again for their support and for making Game Maker HTML 5 so useful. Let us know what you think of the games @pixelh8 on twitter.

I have been asked by several people how I go about teaching young children computing and for the most part I have never written anything down. I keep it all in my head as it allows me to adapt to the situation quicker, different age students move at different rates and have different interests. I have learnt a lot from working at Springfield Junior School and just seeing the difference in ages between 6 and 10 years old. Today I worked with two 9-year-olds, one boy and one girl. We used (and you’ll need to re-create it) an Arduino (we used a MEGA), the usb cable for it, three 220 ohm resistors (although we didn’t use these today), one red, one green and one blue LED or just three different colour LEDs if you can’t find blue Yellow is fine too (that is what we used). I must point out that although nothing bad happened during our sessions you follow these instructions at your own risk.

So Install Arduino as per their instructions. The first thing we did was go through an adaptation of the “Blink” tutorial and gradually altered it. It very simple turns on a LED and back off again. I have annotated it here and then altered it below, my annotations are in blue. and changes to the code are in red. The comments after the “//” symbols are just comments and are ignored by the computer. The same is true of comments that occur between “/*” and “*/” symbols. Here is the hardware set up done using Fritzing.

/*
Blink
Turns on an LED on for one second, then off for one second, repeatedly.
This example code is in the public domain.
*/

//The set up area runs once at the beginning of the program.
void setup() {
// initialize the digital pin as an output.
// Pin 13 has an LED connected on most Arduino boards:
pinMode(13, OUTPUT);
}

//The loop area loops again and again.
void loop() {
digitalWrite(13, HIGH);   // set the LED on //HIGH applies the current
delay(1000);              // wait for a second
digitalWrite(13, LOW);    // set the LED off //LOW removes the current
delay(1000);              // wait for a second
}

//End of program

This program does exactly the same thing but is just slightly easier to read. Get the student to type in the changes. Changing the “13″ to “Red” They are gonna want to move on from this example pretty quickly it is after all just a flashing light. The good thing about it is that it introduces the use of variables in a meaningful way what is pin 13 to them? but red links the code to the red LED.

/*
Blink V2.0
Turns on an LED on for one second, then off for one second, repeatedly.
This example code is in the public domain.
*/

//We are creating a variable called red and giving it the value of 13.

//This helps the younger kids grasp every time we are referring to 13 we actually mean the red LED. 
int red =13;

//The set up area runs once at the beginning of the program.
void setup() {

// initialize the digital pin as an output.
// Pin 13 has an LED connected on most Arduino boards:

pinMode(red, OUTPUT);
}

//The loop area loops again and again.
void loop() {
digitalWrite(red, HIGH);   // set the LED on //HIGH applies the current
delay(1000);              // wait for a second
digitalWrite(red, LOW);    // set the LED off //LOW removes the current
delay(1000);              // wait for a second
}

//End of program

Ok so all we have done is remove the “13″ from being used so much and replaced it with the word “red”, it helps it really does. Especially when we begin to add the “green” and “yellow” or whatever colour LEDS you have. We have in this example used pins 9 and 11 and not 12 and 11 to allow space between the components for inexperienced users, giving them a bit of space so they don’t cross or short circuit. You can use whatever digital pins you like just change the code to reflect that. Get them to type in the changes, get them to re-arrange the chunks of code that turn on and off the light so they flash in a different order. Experiment. The LEDs all share a common Ground or GND, taken from the breadboard back to the Arduino. The kids will soon start to have their own ideas about what they might want to do next and again you’ll move on from this example quickly.

//This program adds two other colours.

/*
Blink V3.0
Turns on several LEDs on, then off.
*/

//We are creating a variable called red and giving it the value of 13.

//This helps the younger kids grasp every time we are referring to 13 we actually mean the red LED and the same is now true for 11 and 9 for green and yellow.
int red =13;

int green = 11;

int yellow = 9;

//The set up area runs once at the beginning of the program.
void setup() {

// initialize the digital pin as an output.
// Pin 13 has an LED connected on most Arduino boards:

pinMode(red, OUTPUT);

pinMode(green, OUTPUT);

pinMode(yellow, OUTPUT);
}

//The loop area loops again and again.
void loop() {

//This sequence will turn on the red, then turn it off, turn on the green, then off and then yellow, then off and back to the beginning again.
digitalWrite(red, HIGH); // set the LED on //HIGH applies the current
delay(1000); // wait for a second
digitalWrite(red, LOW); // set the LED off //LOW removes the current
delay(1000); // wait for a second

//These control the Green
digitalWrite(green, HIGH);
delay(1000);
digitalWrite(green, LOW);
delay(1000);

//These control the Yellow
digitalWrite(yellow, HIGH);
delay(1000);
digitalWrite(yellow, LOW);
delay(1000);

}

//End of program

In this alteration we set up the variable time and set it to 1000, we also subsequently change all of the “1000″‘s in the code to “time”. As it is it will be exactly the same as the last example, however you can then get them to change the value of time try 100ms, try 10ms, try 1ms. We found we actually couldn’t notice the flashing until around 3ms. We also took this opportunity to swap out one of the LEDs with a infrared LED to look at it through the iPhone, which lead to a discussion about being able to transmit message secretly, by flashing morse code on the infrared LED that people couldn’t see with the naked eye. Again, Experiment.

/*
Blink V4.0
Turns on several LEDs on, then off and allows the easy change of time.
*/

//We are creating a variable called red and giving it the value of 13.
//This helps the younger kids grasp every time we are referring to 13 we actually mean the red LED and the same is now true for 11 and 9 for green and yellow.
int red =13;
int green = 11;
int yellow = 9;

int time =1000;

//The set up area runs once at the beginning of the program.
void setup() {

// initialize the digital pin as an output.
// Pin 13 has an LED connected on most Arduino boards:

pinMode(red, OUTPUT);
pinMode(green, OUTPUT);
pinMode(yellow, OUTPUT);
}

//The loop area loops again and again.
void loop() {

//This sequence will turn on the red, then turn it off, turn on the green, then off and then yellow, then off and back to the beginning again.
digitalWrite(red, HIGH); // set the LED on //HIGH applies the current
delay(time); // wait for a second
digitalWrite(red, LOW); // set the LED off //LOW removes the current
delay(time); // wait for a second

//These control the Green
digitalWrite(green, HIGH);
delay(time);
digitalWrite(green, LOW);
delay(time);

//These control the Yellow
digitalWrite(yellow, HIGH);
delay(time);
digitalWrite(yellow, LOW);
delay(time);

}

//End of program

I hope this helps, the key is to be willing and ready to change to keep their enthusiasm up.  Sure it is just flashing a LED, but it soon becomes their LED, their choice of time to flash, their order of flashing and once they take ownership over the learning they begin to think about what they can change. They very quickly start to think about applications for flashing lights, how they can incorporate this new knowledge in to solving an existing problem. I really like working in small groups, I know it is an ideal situation but working with one or two students at a time means in just around 90 minutes we can cover this area pretty thoroughly and answer a lot of questions they might have. Any questions just tweet me on twitter @pixelh8. I am also running a Creative Computer Club in Ipswich fro 12 to16-year-olds more info here.

Recently I was asked to help out at Parkside School in Ipswich to help the students make a video game. “Parkside provides an alternative learning environment for students, at Key Stage 4, who have emotional difficulties, and other health problems, which prevent them from accessing mainstream education.” It was great fun and for many it was an eye opener. The school does a great many excellent and varied ICT activities but this is one of the first in which they were actively encouraged to be a bit “silly” in ICT. The excellent ICT teacher they has has been running several different projects but this time I was in charge of helping them shape their ideas in to a platform video game and it was wonderful to see although none of them had any prior experience in making games they were able to focus and create interesting ideas. We are running it in two sessions as the students are much older than the normal age range I work with and have been getting on with the work a lot quicker. I look forward to going back in a few weeks time and seeing what else they have created, and to help them bring their video game ideas to life.

So today was the final session where the students could add things to their games and it was amazing to hear how organized they were. I said at the start of the session that they had one and a half hours left to draw everything they need, so they didn’t rush to get started with the computers they first discussed “priorities”. They had a chat in their groups about what stage everything was at and what things were more or less important if they get done or not. It was amazing to see. As you can see the graphics are stunning and I genuinely mean that, the games are really well planned out, with a lot of attention to detail.

It was good session and although they are a little sad that they won’t see me again for two weeks they are happy that when I return they will be able to play on their web apps / games, and hopefully you will to. So I have two weeks to make three simple web apps using all of their assets, design guides and flow charts.

This weeks session was all about the assets the apps are to have, the backgrounds, the buttons, the characters, so it was a lot of computer graphics based stuff. It was amazing to see how skilled the students were at using different graphics software, bearing in mind that they are only 8 t 9-years-old. I can confirm that the different “companies” or groups have their names and debut title names ready, and they are as follows. “Electric Zombie Inc.” will be releasing “Warfare: Revenge of Germany”, “Monkey Business” will be releasing “Animal Time” and finally “Rainbow Buddies” will be releasing “Dress Up Pets”. Three very different apps and groups. One group all girls, one group all boys and the last group has two of each. I have to say some of the character designs are so good I could actually see them being used in a “commercial” game, absolutely brilliant. Our last session will be this Thursday after which I will code the apps with all their ideas and reveal it to them on the 12th of April. The games should go live to the public shortly after that, pending a child safety review.

Today was fantastic, the students really impressed me. Today’s session was all about analysing existing apps we looked at Angry Birds Seasons, Where’s My Water, Moshi Monsters, Cut the Rope, Solving Maths, Maths Brain and OCARBOT. We looked at how different screens are laid out, the sequence of them, and even made flow charts of how different screens interact with others. We looked at the generic conventions of icons in popular games; a cog means “settings”, an arrow pointing left means “back”, and arrow going round in a circle means “reset the level”. We looked at company splash screens, game start screens, world and level select screens. Main game screens, pause screens and options screens.

Through prior exposure to the generic conventions of both layout and icon design the students were able to deduce what would happen on each button press even on games they weren’t familiar with. Have you noticed Angry Birds Seasons, Where’s My Water, & Cut the Rope all use padlocks for locked levels, you also have to collect three items either stars or ducks per level. Why do companies put their logos at the beginning of games? Why do we have loading bars? In Solving Maths and Maths Brain colours were shown to be important; Green was used on notifications and buttons for Go, Good, and other positive affirmations while Red was Stop, Bad and negative outcomes. A student noticed back buttons were often used in the far corner of games. We discussed where the “resume”, “back” and “pause” icons originate from and if they are used in anything else like DVD players, CD players? We also discussed why it is helpful to the user to sometimes use familiar icons to help them learn their way around a game.

It was a step-by-step screen by screen analysis of different games and although some of these things are obvious to us as consumers, even subconscious at times, it is important to say them out loud and discuss them when you are planning to make your own app. After the talk the students took to drawing their own buttons and company logos, several students made flow charts of the apps life-cycle which would put many degree students I know to shame. Overall I was really impressed that they were able to stay focused during such a long session of contextual analysis, well done to the year 4s (8-year-olds). It was the first time I have ever got to teach with an iPad and it was great to let them all have a go to see how the machine worked and what it can do.

The picture in the top left is the company logo for “Rainbow Buddies” there is also “Electrical Zombies Inc.” and “Monkey Business” expect major web app releases from them early spring 2012.

Today was the last session for group 2; they were a group of 12 year 3′s (7 year olds), six boys and six girls.

They did really well, in five sessions (approx 10 hours total) they were able to take a game from concept to complete game. 12 games in total were made.

I got there early today and had the completed games loaded up on the computers ready for them to play. It was wonderful to see them come in the room to discover their game had been compiled and was ready to play on. I let them play on the games that eachother had made and it was really good to hear them compliment one another on their work.

They were a wonderful group, it is still hard to believe they were seven when you think about how much they achieved (sketching the concept, writing the story, drawing the graphics, doing the level design, designing the box and even a short instruction manual).

It was nice to see that when I asked them who wanted to go on to make games as a job 8 out of 12 raise their hands, 5 boys and 3 girls which is fantastic. Five weeks a go they never thought they could even make a game and now their games will be presented to them in an achievement assembly in front of the whole school.

I am not sure of the exact numbers I’ll have to check it but I think I have now taught around 600 hundred kids to make games, by this estimate and by the time I get to Games Brittania in July I will be teaching my 1000th game designer! Be sure to check out the website as I will be running courses for both teachers and students to get involved in making games.

Today was the last of this groups game design sessions, with the group of  “future game designers”.

I have to say this first before I move on to the rest of the blog, they were an excellent group and it was a real privilege to work with them over a extended period of time.

Today was just inputting the rest of the level designs in to the game engine and finishing the game boxes (see picture), although they didn’t get to play on the game, they did get to see what it looks like on a huge screen. The game will be presented to them on CD tomorrow morning in assembly and I hope they feel proud of what they have acheived when they collect them.

We also had a long discussion about the project as a whole; what they liked, what they didn’t, what could be improved over time. I explained to them, that the only difference between what they did in these sessions and what professional game makers do, is have more time. They had 10 hours in total to create a concept, design it and create it as well as consider the marketing behind it.  I then went on to explain that 10 hours is something that a professional game maker may spend on creating a tiny element in a game like a layout of an options screen. The other factor I got them to consider was they were working alone on this project (except for one pair), in some major games there are hundreds of  people involved, designers programmers, designers, musicians, marketing. They were year 6 students and they made a whole game in 10 hours.

I hope more than anything, they have gained confidence from these sessions, this is another thing they “can do”, this “is” an option for them in their future. There are so many great game companies in the UK I know some of these students are destined to be their future designers.

Recently I was asked to run a workshop in a high school for year 11 students, and when they explained it would be for my old High School Chantry, I jumped at the chance.

It was quite apparent upon my arrival at the school that things had moved on a bit since I attended there circa 1993, long gone were the 286′s and RM machines. All the staff had pretty much been replaced too.

Today I had a huge class of 28 students much larger than my normal game workshop, but that is fine as we had lots to do and I divided them in to eight groups. I had four hours with them today, so the work had to be fast and furious, luckily the students were “fired up” as the ICT Carol Skeates put it, and they were able to get on with it and quick too.

I took them through the history of platform games and about some of the work I had done, then on to their designs on paper, then on computer, they even designed a DVD case for their game too!

All the graphics and level designs are now done (see Level Editor in picture), so it is just up to me to compile and test it and deliver it to them on Friday.

They were a great bunch of students who produced a high standard of work and I suspect quite a few might be interested in getting in to games development and taking what they have learned further. It was also nice to do the workshop at Chantry High School, I know I would have loved to do stuff like this when I was a student there, it just didn’t really exist then. Thanks to Carol Skeates and Mr Andrew Fell for letting me come by and run the workshop.