The full blog and resources are 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.).

“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.

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.

We finished it pretty early in the session so we moved on to programming the Arduino which uses a similar syntax/environment to Processing. We progressed through the “Blink” and “Button” tutorials covering basic electronics, resistors, variable resistors, LEDS and more.

In the end we had three LEDs that had several different lighting modes that could be cycled through by the press of the button. It was nice to show him how to do one setup and then ask him how to do the next, he is very keen to learn, he worked fast and answered the question correctly. I know he is learning, as even in some of the more difficult situations in the code he was able to elaborate on it himself correctly. I always find people learn much better when it is something they want to learn, so he’ll be fine.

I think it has been useful for both of us as I usually teach either younger children or degree level students it is always good to know how much a young person in that age range can take on, in one day. I feel we both achieved and learned something today which is always a nice thing, he hes gone home with some components and an Arduino and has already started to tinker. Who knows what he will ask to learn about next time I teach him.

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.

We have five weeks to make three web apps and they already have their ideas in place, next week we will look at interface design and start to draw the buttons and the screens for the apps. The ideas are great but you’ll have to wait to see them. It was interesting that they all wanted them to be social apps or at least involve more than one person participating.

We started with variables.

int XPOS,YPOS;

and moved on to arrays, multi-dimension arrays, then to booleans and so on.

We then learnt how to draw

//Makes background black
background(0);
//Makes the drawing colour white
stroke(255);
//Fills in shapes with the colour white
fill(255);

//Draws a nice box
line (10,10,290,10);
line (290,10,290,290);
line (290,290,10,290);
line (10,290,10,10);

Gradually the plan moved to turning the box into a grid and the plan was to make a TIC TAC TOE game. We then moved on to “for” loops and loops within loops and then functions. This function clears the board.

void clearBoard(){
for (YPOS=0; YPOS<3; YPOS++){
for (XPOS=0; XPOS<3; XPOS++){
BOARD[YPOS][XPOS]=0;
WIN=false;
}
}
}

We also covered conditionals i.e. ifs and else ifs, this checks for the reset button press.

if (mouseX > 76 && mouseX<223 && mouseY> 322 && mouseY <400){
clearBoard();
}

All in all it was a good four hours of tutoring and I think he was amazed at how these little blocks of code can be put together, you can see the code here and the full .zip file with all the assets here.  We plan to finish the game next Friday, this code does look and finds a winner it just doesn’t do anything with that information yet. We will also try and make it into a web app if possible, well see.

It was nice to work with a group of people who are very passionate about the work they do, the GLA staff were helpful, friendly and polite at every stage. Opening up your work place to a group of “hackers” can sound a bit risky but all of the developers/designers brought in by Rewired State soon proved their worth. Tearing through .xls spreadsheets that were too big in some cases to be opened by some software/hardware combinations, the hackers were able to look at the data with a fresh approach, not only to its use but also its possible future collection.

For the event I put one forward one hack on my own and one with Josh Pickett  @lordjawsh on Twitter.

Tree-o-pets

Tree-o-pets was a mobile phone app which allowed users to plant virtual trees using GPS and Augmented Reality. The premise is a simple one you take your phone to a place you want to plant a tree, plant it and return to care for it, you could also share your plants location via Facebook and Twitter. You had to take care of your tree as anyone logging on to the webpage or in to the app could see it’s owner and how well you care for it. The initial data was based on where Mayor Boris Johnson plans to plant his future trees.

Your Journey

I wanted to create a way to explain and to get people to engage with the data the GLA have on various environmental topics.

Your Journey was a 90 second video game on the iPhone which provided as snapshot of the postcode you gave it.

As “Boris” you cycle through the city, collecting rubbish, avoiding potholes and caring for the specially planted “Boris Trees”. The data from the GLA was used to piece together how many trees and how many recycling bins you saw in you 90 second journey. The clouds were coloured and calculated by the air quality data, notable public buildings which the GLA had power consumption date on were also pointed out to you on your journey.

It was lovely to take part it, was also nice to win an award for “Your Journey” for “Most Innovative Use of Environmental Data”. There were some excellent other projects with “100ktrees.com” coming up top trumps literally in the overall best prize. “Got Wood?” was also great social app helping you locate your nearest tree and “check in”. It was a long two days for me commuting from Ipswich and working til very late but it was worth it.

Well done Adam McGreggor @adamamyl and Emma Mulqueeny @hubmum for organising another great and successful event and well done for GLA for taking those bold first steps to opening up the vast amounts of data they have. There were some interesting and useful points very raised by the “hackers” which will hopefully benefit GLA further in their future work.

It was also very nice to work at City Hall.

When making games with students I let them use a bit of custom graphics software that I have coded (in Processing) it doesn’t have a name, but it does a lot. Firstly, I give each student a number, they put that in and it automatically saves all files with that number in the title i.e. good1.PNG for the good guy so I know it belongs to student number 1. It is extremely useful when dealing with so many graphics from so many games. Secondly it saves everything for them,  generates a background colour and crops the images for compositing later when put into the game engine. Thirdly it limits the graphic size 64×64 pixels maximum keeping the game retro in style and finally it only allows the use of 16 colours again for making it all very retro. Very simply you click a colour and click where you want it to go, one pixel at a time, sound laborious but it make the students really think about each one of their pixels when transferring their paper sketches into a computer.

But there is one thing it doesn’t do.

A lot of the games in this group for some reason or another feature doughnuts, subconsciously it entered the minds of around five of the twelve game designers and now we have them in the games. Repeatedly throughout the session I was asked “How do you draw a circle?” which struck me as odd. Odd because I grew up in pixels, I have been sketching out characters on graph paper since the 80′s (I spent most of my school days drawing sprites btw). So I had to stop the lesson and explain how to draw circle one pixel at a time. It turns out that the students are very fluent in Microsoft Paint which is great and some of them have even ventured in to Adobe Photoshop which is fantastic, the more varied software the better. The one thing these wonderful pieces of software feature is pre-made shapes that you can re-size. It was a wonderful “digital” moment, but is this a skill that has been lost? Drawing the doughnuts was tricky because they were circles with smaller circles in them, but we got through it. The question is are “hand-made” graphics becoming a lost skill?

I am certainly not about to add circles and squares to the software, because I really want them to think about how each pixel effects the overall sprite design, but this was an unintended bonus in terms of preserving a “old school” way of doing things.