Learn how two people created a fun online game to teach HTML and CSS.
If you don’t know, Erase All Kittens is probably the most fun (and silliest) way to learn HTML and CSS, the technologies used to create web pages. The masterminds behind Erase All Kittens got dressed up like their characters to talk about how they came up with the idea, the characters, and overall design of their website.
Did you have any specific goals or ideas to get girls more involved with coding?
Dee: Essentially we just wanted all kids to want to play the game. Most code games are not actually fun. We wanted to make Erase All Kittens really fun, to get more kids to want to learn.
Where did the original idea for the game design come from?
Joe: I originally started work on what kind of turned into EAK when I was supposed to be studying for a maths exam. It was an idea, could I put a physics engine on a web page and have you be able to play with the web page? It was only after that it developed into a coding game idea. And later on when me and Dee met she kind of came up with this crazy idea of rescue kittens with coding powers and all of the stories of the game. Actually it was kittens from the start but originally the story was you were the at symbol from an email that got lost. Or something like that. I can’t really remember. Dee’s story is better than whatever I came up with before.
Dee: We came up with lots of different stories and that seemed the best one. That seems such a long time ago.
How long ago was that?
Joe: Well, it was probably about a year and a half? A bit more than that?
Joe, your background is in programming?
Before this project full time, I had one year professional experience and had done the occasional freelance thing while still in college. I’m definitely not an academic type person, never had any formal tuition for what I do. It’s stuff I picked up from reading a lot online, a long time experimenting with things, learning on my own terms rather than going to university for programming.
And Dee what is your background?
Dee: My background is in advertising, coming up with concepts for ads, art direction, and writing. I worked in London for about four years and then moved to France for a year. I quit my job about a year and a half ago. I just felt it was quite frustrating to work long hours but not be completely in control of what gets made. So I just wanted to do something different for awhile.
I didn’t have it in my head at all I wanted to start my own company or anything like that. It all just happened quite by accident. So a few months later I met Joe and he said, “I’ve got this idea,” and so I started working with him. And it was just really good fun, working on the side with him.
So Dee, when you were twelve you were doing advertising?
Dee: Oh no. I was always really into art and English at school. I used to write stories on the side quite a lot. Somehow I ended up in advertising. I didn’t think about doing that when I was younger.
The artistic path leads to some interesting and amazing places. But programming is creative, too, in its own way.
Dee: They are so linked. I never really realized that. There is a whole misconception that coding and maths and the arts are so separate, that it’s all different sides of the brain. I have met so many programmers who are actually really creative and have their own ideas and get to make whatever they think of online. And it’s a really good thing for kids to have those skills.
Did you meet Joe at a pub?
Dee: Uh, no.
Joe: Where did we meet?
Dee: Um, it was actually just online.
Joe: Maybe it was the frozen yogurt place, across the road from where your old flat was?
Dee: Yeah, maybe.
Joe: We’ll say that. Seriously, we were introduced by Dee’s sister, Anika. She and I both used to work at the same company.
Dee: A few weeks after I’d moved back from France, we met at a mutual friend’s boat party in the middle of the Thames. Amazingly, we were both wearing the exact same cape, but in slightly different shades of purple — I think mine was more of a burgundy.
We had a bit of a laugh about our capes then walked up to the top deck and started talking about other things — I’d quit my job as an advertising creative in Paris to look for other opportunities and Joe was looking for a creative to work with on a game to teach kids to code. Perfect timing! We threw our canapes overboard and high-fived, just as the band below started playing Always by Erasure.
Although I missed living in Paris and witnessing daily dramas like poodles getting trapped in revolving doors, I was really happy with the work I was doing with the game. My first job was to come up with an original idea for a storyline, and Joe’s was to work on the technical aspects of the gameplay. His idea was to encourage players to hack into the game using code, in order to complete the levels. Brilliant.
So I was just thinking what became Erase All Kittens would be a cool fun side thing. And it got more recognition, a couple of tech festivals we showcased at, and then people were asking us, “Who are you guys?” We came up with a company name for now. So that was quite fun as well, although it was quite difficult.
Joe: We spent months trying to think of a good company name. In fact, we changed to Drum Roll HQ at the last minute. For ages we were going to be I Draw Potatoes. We were going to have a go with that one.
Dee: Unicorn Joust.
Joe: And Unicorn Joust was the one we eventually settled on and bought the domain name. And then a few weeks later, Leonie our designer came up with this idea for business cards where you can play the card like a drum roll. So we decided to call the company Drum Roll HQ. Just from the business card idea.
Does Tarquin Qlitterquiff actually exist?
Joe: Tarquin actually is the embodiment of startup people. We’ve been encountering quite a few of these startup people. A lot of them are lovely. But a few of them are not. Tarquin is kind of based on some of the amusing things people we’ve encountered say and do. His first appearance in the game is as the owner of a new run down space cruise venture. Which is going to be showing up in our new version. We’re writing the story at the moment.
He’s the serious side of our company but he’s not very serious.
How did your Erase All Kittens system design scale as you became popular?
Joe: It’s pretty lightweight. The actual game itself runs in the browser. Everything is served from Amazon Web Services. The newer version you’ll be able to save games and that sort of thing. So we’re going to have to figure some more complicated stuff out for that. What we have so far for that is still pretty simple, pretty lightweight.
How did you design the characters of the game?
Dee: The story is quite simple, coming up with that right at the beginning. The actual characters used to be really simple, just in black and white. It wasn’t anywhere near as designed as it is now. It was quite a few months before we got Leonie on board. We were kind of thinking, “Hey what can we do to make this look a lot better? With more details?” Then we advertised for an art worker and it worked out perfectly — we started working together with Leonie straightaway. We both draw characters, then Leonie does all of the computer artwork. All of us bounce ideas together.
How did you create the story?
Dee: We created the story as we went along. Now we’re just really getting stuck into the story structure, how everything works right from the beginning. Awhile ago, actually a few weeks ago, we went through everything and I’m writing all that up at the moment. It’s a lot more organized now.
Joe: We had the premise of the story previously but we’ve just, as Dee said, in the last couple of weeks started actually figuring out all of the rules of the universe in which the game is set, figuring out what our individual characters are going to be like and how they’re going to develop over the course of this game, and that sort of thing.
Dee: It is set in this fantasy internet universe that formed from fragments of what we humans have uploaded. So much of what you find there is based on distorted and remixed reflections of our own culture. When something is uploaded over and over again, like kitten gifs, they can enter the internet universe as a whole object. That’s where the kittens in the game come from.
So it’s sort of like we have this world which is separate from the human world and we have to figure out how everything works, and it’s actually got really in depth just having conversations.
We’re also now using really immersive interactive dialogue. Players get to choose Arca’s response in conversations, and characters will remember and form opinions about the player over time. We want players to feel like they’re really part of the story, and to feel a genuine connection to the characters in the game.
Which is better, writing story on the fly or from something you’ve thought through and written down?
Dee: Yeah, it’s definitely better that way, written down. Recently we’ve been so caught up in trying to get funding and all this other stuff that we have to do, because there’s only three on our team, we have to divide responsibilities up quite a lot. And now we’ve just started to get really back into the story and the creative work.
Do you have an office? How do you work together?
Joe: We did have an office with the accelerator program, Emerge Education, for three months recently. Now that’s stopped, we’re having a mixture of working remotely and occasionally using Mozilla’s offices in London to collaborate in. Mozilla has a great policy in a lot of their spaces where they have a community part of the space where anyone who is part of that community can every now and then come in and use the space.
Are there things you wish did differently? What you look forward to?
Joe: I certainly have things I wish I’d done differently, in terms of the technical side of things. When I started this as I said, I was procrastinating from studying for exams, it wasn’t something I was thinking I would be basing a company off of or anything like that. In fact, the first year of working on this project it was a very casual sort of side project type thing. I used the project to try out different ways of doing things, different coding styles, different experiments. We have a lot of technical debt in the system because of all of these experiments I did before. They’re kind of slowing us down a little now.
We’ve learned so so much in the last year and a half. Neither of us had built a game or a company before.
So you’re going in and redesigning the system and refactoring code?
Joe: The design of the product has changed and what might have been a good solution for one version has been squished into the version we have now. If I were to design this from scratch, I would do it differently.
Dee, how do you feel about the process looking back? And forward?
Dee: Story-wise, it’s the same thing. We made up a lot of it as we went along, the characters, the design, and the actual story. We’ve had to go back and revamp everything so it makes sense in the whole internet universe.
It’s been really fun although I’ve also had to focus a lot on other things, like speaking to advisors and raising funds. In a way, that’s been really great as well — I’ve met so many interesting people since we started working on this project. So I wouldn’t have done that differently. I’ve made some good friends and the contacts we’ve made have been really helpful.
Joe: We have these cards, have you seen these Valentine’s Day cards?
Yes, they’re brilliant and lots of fun.
Joe: They were fun. It was nice to kind of having a week to work on something different.
Are you doing Easter cards for April?
Dee: We have this character who is like an egg, kind of like an oracle in the game, so I’m sure there’s stuff we can do with him.
Joe: He’ll deliver wise proverbs when you click on him probably.
Erase All Kittens
Drum Roll HQ
Also In The April 2015 Issue
The history of the font and the reasons people hate Comic Sans are great ways to learn about typography.
Learn typography online and practice basic typography skills.
Design basics for developers who do not have a designer around to say "no comic sans!"
Librarian Mary Glendening describes how they created their library makerspace.
Learn how two people created a fun online game to teach HTML and CSS.
Apple's new Swift programming language is an interesting language to study and learn, plus an opportunity to watch a new language evolve.
A real life case study to explore online security, privacy, and the law.
How to create secure passwords, manage your email accounts, securely backup data, and more.
Interesting stories about computer science, software programming, and technology.
Learn without a computer or programming language. Includes exercises.
Links from the bottom of all the April 2015 articles, collected in one place for you to print, share, or bookmark.
Problems software programmers can do to practice their skills, from beginner to advanced.
How programmers use design patterns and anti-patterns to develop software.
This website lets anyone practice their coding and design skills.