This workshop introduces the Future Makers to the basics of games design in a fun way.  The Erase All Kittens [E.A.K] web game teaches them the basic HTML skills, working in teams to develop game ideas and working together to code and design content for a small ‘30 second’ web game.

“One child couldn’t stop thanking me for helping him use variables to calculate and display a score in his game. How often would you hear a child thank a maths teacher for explaining variables?”
Craig Steele, Coderdojo Scotland

“I’m going to have my own gaming company. I’ll do all the design and coding myself and my games will be worth millions.”
Future Maker, 9.CreativeGames03 - RC

Many Future Makers had an interest in a career in games development however they lacked an understanding of what that involved. Many games developers work in large multidisciplinary teams and complex games can be in development for several years. It’s a good idea to invite industry experts to talk about what their work involves. It is important to stress that it is an interdisciplinary environment and can involve careers in many fields, such as development, story, marketing and sales.

In this session, the Future Makers will:

  • Learn basic HTML through an interactive web game.
  • Explore the creative side of games design.
  • Build their ideas into a ‘30 second’ web game in groups.
  • Publish their games online so anyone can play.

For detailed instructions see the Drumroll Erase All Kittens Activity Guide and download the additional documentation.

Discover the game
Generate ideas
Develop the game

Erase All Kittens Game [E.A.K] (25 min)

E.A.K. teaches code using ‘stealth learning’ – the goal is to provide learners with their first steps towards digital literacy in the most entertaining way possible. By changing the source code of the levels – written in HTML and CSS, just like a web page – players must rescue kittens to complete the game.

Watch the E.A.K Video and the Get the Future Makers to individually visit eraseallkittens.com. Click ‘Play the Demo’ to start the game and follow the onscreen instructions.

Generate Ideas (30 min)CreativeGames22---RB

In small teams the Future Makers will create a concept for a game that can be played in 30 seconds, later they will make content and build the code for the game.

Steps for the Activity:

Divide the Future Makers into groups of 3 or 4.
Working separately, keeping their ideas secret for now, each member is assigned one of the following aspects of the game to design; (2 mins).

  • a rule (e.g. you can’t touch the sides).
  • a victory condition, i.e. how you win the game (e.g. find the wisest broccoli).
  • a theme (e.g. unicorns vs. kittens).
  • a location (e.g. Mars).

Supply some extra rules (mainly to steer them towards games that actually can be built in a few hours). Ex: you must be able to play the game in 30 seconds, the game must be in 2D.

Now, working with their teams, they need to combine these into coherent game ideas. They need to decide on a basic story, and roughly how the game is going to be played.

Pass round paper and pens etc. and help them work on their ideas. Encourage the Future Makers to draw characters, locations, a poster or write a concise introduction or description.

The key thing here is to stress that the games are going to be very minimalist and focused – an MVP (Minimum Viable Product) that we can play-test and get validation for.

Lunch (45 min)

Develop the Game (4h)

In teams Future Makers will create a short game based on the concepts they generated earlier. Web games like E.A.K are made up of three things: HTML for content, CSS for design and JS for behaviour/interaction.

CreativeGames12 - RC

Steps for the Activity:

Create Artwork (30 Minutes) Characters and background can be made using free online tools such as make 8 bit art.

Write basic HTML, so we have a static layout for our game ready (15 Minutes).

HTML and CSS: hands on (45 Minutes). Future Makers use HTML and CSS to add art assets into the game code and start prototyping a game.

JS Part 1 (15 Minutes) Use Javascript to make characters move and jump.

Programming: hands on (45 Mins). Continue to build game code. Future makers can implement the equivalent code from Pig Panic (link) on their games.

JS Part 2 (15 Mins). Create a scoring system for the game.

Programming: hands on (1hour 30 Mins). Complete the code for the games and test that they work correctly. A fair bit of support will be needed. The teams will likely develop roles – some will be programming, some will be making artwork, etc. Spare programmers can work on menus / a website for the game. This step isn’t really structured – make sure everyone is staying on track.

Demos (25 Mins). Split up the teams into new groups with one member of each team in each group. The groups should rotate round, trying out all the games.

Discussion:

Which games design role did you enjoy the most? Programming? Artwork? Narrative?

Click here for part 7 – Hack Day

Go back to part 5 – Wearable Technology