Pixelh8

Pixelh8 @ Springfield Juniors Web Apps Project Session 3

March 19th, 2012

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.

Posted in Educational, Lectures & Workshops, Programming in Schools, Software, Springfield Junior School Workshops |

Pixelh8, Tic Tac Toe V2, Arduino and the student

March 9th, 2012

So today was the second session with the private student (see first blog). We finished up TIC TAC TOE and you can play it online here, it includes the source code with full code and graphics here in a zip file. It was good fun to finish and upload it, it always gives you a sense of achievement to do so.

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.

Posted in Educational, Lectures & Workshops, Software |

Pixelh8 @ Springfield Juniors Web Apps Project Session 2

March 8th, 2012

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.

Posted in Educational, Lectures & Workshops, Programming in Schools, Software, Springfield Junior School Workshops |

Pixelh8 @ Springfield Juniors Web Apps Project Session 1

March 2nd, 2012

So today was the start of the the new project with Springfield Junior School, not animation, not game design but web apps. The projects we have done in the past were great but we wanted to do something bang up to date. The school is very fortunate in that it has a few iPads for the students to use and I make apps all the times  so I thought why not make some apps.  Today was all about introductions and brainstorming dividing the 12 8 to 9-year-olds in to three groups it soon became quite apparent that they already had a good idea of what they want to make and they soon set to work.

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.

Posted in Educational, iPhone Apps, Software, Springfield Junior School Workshops |

Pixelh8, Tic Tac Toe and the student

February 24th, 2012

I was recently asked to take on a (15-year-old) student for programming by a family friend so I decided the best place to start was Processing. I need to say this right now before I get emails, tweets and various comments, this isn’t the best code in the world as it was gradually built upon and when we started we had no idea what we were going to make. It was a brilliant day and I think he learned quite a lot. Although he knows a fair bit about computers, he runs his own “Minecraft” server and a bit about HTML he hadn’t done any programming like this before.

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.

 

Posted in Educational, Software |

Pixelh8 @ Springfield Juniors Animation Project Session 5 and Video

February 11th, 2012

Today was the final session of the animation group, last week they worked really hard at making all the characters for their scenes today was all about using the animation skills they had learnt throughout the five week course.

Today was run a bit different and for the best, instead of all 12 at once I had one group at a time for 20-25 minutes in which time they had to animate and narrate their clip.

Below is the end result I hope you enjoy it, they were a great bunch of students to work with and they learnt, applied and achieved so much.

I love the fact that when we the student where making Scene three the student realised to make a good fire he needed to make multiple drawing of fires “like what we did with the panels on the robot, we will have to keep swapping them out”.

I love the fact that they were so confident in animating they even added little touches in the background look out for a rabbit in the forest, a mouse on the fire place, look out for the axe being raised as the wolf is chased.

I love the fact that while we were animating one of the boys parents came in to see him complete the work and told me “this is all he has been on about, these lessons, he tells me how different cartoons are made, he loves it, he has been showing everyone in family the other video helped make on the internet”.

How we did it. The course took place over five weeks.

Week one was Silhouette animation and cut out animation we looked at works by Lotte Reigner and watched Charlie and Lola respectively. We also animated a cut-out robot and built a Thaumatrope.

Week two was stop-frame animation we looked at Shaun the Sheep, Trap Door, Morph, Bob the Builder we also made egg box characters and animated them.

Week three was cel-frame animation we looked at Phineas and Ferb, compared first series Spongebob Sqaurepants (cel-frame) to later series 6 (cel shaded animation), we also made Zoetropes.

Week four we planned out the scenes for Red Riding Hood and made all the characters in the cut-out style and stored them together.

Week five we animated and narrated.

I then took all the footage and audio home and edited it and shazam! A masterpiece. It was a great project and I look forward to running simiar workshops with other schools in the future. Be sure to follow me on twitter @pixelh8

 

 

Posted in animation, Educational, Springfield Junior School Workshops |

Pixelh8 @ Springfield Juniors Video Game Project Session 5 “Group 2″

February 9th, 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.

 

Posted in Educational, Programming in Schools, Springfield Junior School Workshops |

Global Games Jam @ University Campus Suffolk

February 2nd, 2012

On the 29th of January, 2012 I was asked to be a judge at the Global Games Jam at University Campus Suffolk organised by the staff of the B.A. Games Design course. It was a great event and the ideas were top notch, making the judging quite difficult.

It was also nice to see some of my former students and see how they are progressing as designers and their keeness to point out their use of sound in their new creations. More info on the event can be found here and here with details of the winners.

I wish them all the best and look forward to working with them in the future.

Posted in Educational, Visits |

Pixelh8 @ Springfield Juniors Animation Project Session 3

January 27th, 2012

Todays session was about “cel-frame” animation, again we looked at some examples of contemporary cartoons they know and love and then took to making our own animation loops based on a stick man running.

As the group is quite young i.e. 7-year-olds I had to make up 12 Zoetropes in preparation for the lesson, this was no easy or quick feat by any stretch of the imagination. It was however quite simply worth it, for the looks on their faces when they got to see their characters come to life. They sketched out their charcaters, coloured them in,  stuck them together to make the loops and they were great.

I even learned something today, I learned how to animate a cape flapping behind a running super-hero.

Next week we will be planning out our animation, we are planning to re-make “Little Red Riding Hood” with each group making a scene each, they will be divided into groups and given roles.  We will storyboard it, build sets, animate, edit, narrate and score it all in 4 weeks (8 hours).

Posted in animation, Educational, Springfield Junior School Workshops |

Pixelh8 @ Springfield Juniors Video Game Project Session 3 “Group 2″

January 26th, 2012

I haven’t blogged about this group because I blogged about the first group in detail, but these guy are certainly worth mentioning as they are a group of 12 7-year-old game designers and they have been spot on with their work.

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.

Posted in Educational, Lectures & Workshops, Software, Springfield Junior School Workshops |

« Previous Entries Next Entries »