inkubator <

Creating a Game in 8 Hours - Phaser / Mightyfinger.


The next instalment of inkubator workshops was to address the rising consideration for our students whether illustrator, designers or makers to be able to consider the game as a communication tool, with the success of Diogo last year and his game WSA students had started to become aware of this tool beyond entertainment and perhaps as something more.

picture of Diogo lopes talking to games students in 2014 lecture

Session 1 - Think/ Create

Of course the output should be appropriate to the content but hey who wouldn't want to know how to make a game in 8 hours from zero to release ! So we (Sarah Langford, Nick White and myself) set up and created two half day workshop's that could allow illustrators and games design & art students to work in teams to make a simple "single screen game".

Plan of attack (1/2)

  1. 20mins - (me) Intro
  2. 40mins - Concept / aims / sketches
  3. 30mins (depend on numbers) - Present / finalise

In Part 1 I outlined what a game prototype could be and the type of games we would be making and then we had 40 minutes to create the concept, the aim and sketch out the characters and environment. After showing a quick slidedeck and some videos of the type of games we were aiming for, each team (2/3's) worked to create a concept that revolved around one good character and one bad character and their motivations and aim of the "single screen game".

"Find the fun." — Shigeru Miyamoto

Each team then presented the idea to extol the "fun" aspect and to whittle down the core concept into a short simple presentation.

Plan of attack (2/2)

  1. 14:30 - 14:45 - (me) Demo / Illustrator
  2. 14:45 - 15:30 - Make stuff
  3. 15:30 - 15:50 COFFEE BREAK
  4. 15:50 - 17:00 - Make stuff

Creating assets for these types of games is in fact really straight forward but has a very methodical process, although there are numerous types of software that could produce sprite sheets, Illustrator as personally one of Adobe's best tools was the one we choose to work with and you can now watch a tutorial on how we used Illustrator to create sprite sheets and pixel art. Due to Illustrator being a vector based tool the designs can be quickly scaled up or down.

The rest of the day was used to completed the sheets and export them as PNGs.

Session 2 - Create/ Play

To make the games we are using the Phaser library via the Mightyfingers editor, this enables students to create a host of code via a visual editor, as with our html projects this really breaks the barrier to get up and running and then delve into the code, Unity 3d is another excellent app for this within game making but was beyond the scope of our workshop. Limits and the ease of a browser based (yes browser based!) editor made the mightyfingers editor a fantastic tool of choice.

During the gap of a week and understanding the type of games students wanted to created I took my set of sample scripts to apply them some of the assets to demonstrate and showcase there assets.

Click for focus / cursor keys to move / spacebar to reset

After seeing this rudimental demo the students could see the potential of there own work already and so we walked through how to set up this simple game and building the scripting up one part at a time.

For students with very little coding even simple Javascript can seem daunting however the effort to reward ratio within Mighty Editor is pretty high, however this was the most intense part of the workshop and I would add more time and structured resources to this part, as it can be quite hard to get three games up and running with only one tutor proficent in code (and even then I'm pretty hacker in my mind set)

I have however put together another group of short tutorials on getting up and running within Mighty Editor that you can all watch.

The session went well and most of the three games by the end had gotten to the state of level design, character movement and simple physics.

With a few extra hours work to get them ready here is playable prototypes of

Game links live ASAP (16thDec2014)

Feel free to tweet @_inkubator your comments

Additional References