One of my electives – 2D Games Design and Development – utilises an online game engine called Flowlab.io. It has been great to see my students learn the mechanics of 2D games design (typically platform games but we have attempted 2.5D RPG style games and a side scrolling shooter) without having to worry too much about the game art. In term 2 I wanted to focus on media elements in games design: primarily sound and sprites.
We used Piskel (www.piskelapp.com) to create individual 8 bit sprites and animations, exporting them as sprite sheets to use in Flowlab. However I was inspired by the following video which gave the students a better insight into computer game art in the 80s,90s and early 00s:
The following lesson I set up a green screen and asked students to record videos of each other walking across the green screen from left to right and the other way. After downloading these videos to the school network the students utilise the chroma key effect in Serif MoviePlus X6 (yes it’s old but it worked brilliantly) before cropping the rest of the classroom out of the video.
I knew that Piskel allowed for easy import of animated GIFs so used the online converter EZ GIF (www.ezgif.com) to transform the student video clips into GIFs. Once they were saved in this format I returned to Piskel and imported the GIF as a sprite sheet.
The final stage was to edit each frame so that the student was in the centre of the animation rather than walking across it. The effect, when complete, is similar to watching someone on a treadmill. Any frames which were blank or were of the student entering or leaving the shot were deleted. Then the edited sprite sheet was exported as a ZIP file.
Importing the individual frames into an animation in Flowlab was easy and, once basic behaviour was added to play the animation, the project was complete.
It gave my students a great insight into the work required to digitise actors in a real games company while remaining attainable within classroom and technological boundaries. I was really impressed by the finished sprites and hope that some of the students include this method of motion capture in their final prototypes.
If it was good enough for Mortal Kombat, it’s good enough for us!
Hackable Classroom 