Hello! I 'm Chloe Varelidi and this is my blog. I design and produce games, products and events. These days I mostly write about my work at Mozilla's Open Badges and things like playfulness, learning and the open web.
“Hackable Games" is kind of a new (made-up) term that we have been using here at Mozilla for the last couple of months to describe games that like the web itself are hackable by design. However, as you already know if you are a gamer, “hackability” in games is not something new.
From the early days of Text Adventures and Starcarft to recent hits like Little Big Planet and Minecraft (umm have you seen WesterosCraft this week?) people enjoy modding, remixing and hacking games to make their own versions.
In this post I will share some games I am currently playing that I find so hackabl-y inspiring. I hope you enjoy playing them and use them as an inspiration to go hack some games yourself.
#1 Twine by Chris Klimas.
Twine is a tool that lets you generate sort of Choose Your Own Adventure games. It has a super simple interface that looks like this;
and is perfect for building narrative based games by twining and un-twining your story parts together. Once you are done you can publish your story as a series of HMTL pages.
If you want to get started with Twine Anna Anthropy has shared some awesome tutorials on her site. Meanwhile you should play The Vermin Throne a great Twine game that came out of last weekends Global Game Jam.
Vermin Throne Photo Credits: PC gamer
#2 Storyteller by Daniel Benmergui
This award winning gem of a game by Daniel Benmergui, who you might also know from I Wish I Were the Moon, is a puzzle game where you build your own visual stories. This game stands out not only for the elegant comic like way of stitching your stories together but also the smart and funny constraints it gives you to kickstart your game-making; for example each level has a goal like “make a murder of jealousy.”
#3 ROM Check Fail by Farbs
Fellow Mozillian Bobby Richter introduced me to this game last week and it’s concept won me over. It was like a Hackable Gamers’ dream… if loud and glitchy graphics are your style anyway. ROM Check Fail is a mashup of all your favorite arcade games together randomly alternating between levels.
#4 Wave Trip by Lucky Frame
Combining music creation with game making is as good as it gets IMHO. In this minimal game you control a mysterious and wonderful geometric astronaut as she travels through worlds of unimaginable beauty and danger, saving her friends through the medium of awesome tunes.
Meanwhile you can create your own levels just like writing a piece of music.
If you like this sort of games, you should also check out the critically acclaimed and beautifully designed Soundshapes.
#5 Katamari Hack by Alex Leone, David Nufer, and David Truong
In Katamari Hack you roll a ball just like in Katamari Damacy to collect all the text and images in your webpage. (Below I just killed the NYT page)
Similar to the viral KickAss App and the internetz favorite for the week "New Anonymous Hack Lets You Shoot Up Government Sites with a Nyan Cat Spaceship" , this kinds of games have been super inspiring to me lately- so much that I started doodling around with some ideas here. I love the concept of looking at ordinary web pages through a creative lens and using the web as a game canvas.
I am hoping to start prototyping these ideas soon, meanwhile looking forward to any additions for games with a hackable alter ego in the comments below. Till next time I leave you with a bonus item; this Retro Unicorn Swim game has the bestest & brightest hackable alter ego of them all :)Comments
"Describes the particular components of the game, at the level of data representation and algorithms."
Mechanics are a games’ backbone. They are the actions that define gameplay; for example shuffling cards or shooting at enemies. In a digital game those actions are programmed.
As far as hackable games go those mechanics are actions related to, well… “hacking” - which at Mozilla we define as remixing code. Let’s break those down even more to linear actions like; typing(code), copy&pasting (assets), tinkering (to see if something works or not) and building (your final game).
"Describes the run-time behavior of the mechanics acting on player inputs and each others outputs over time."
This is how the player interacts with the mechanics of the system.Often dynamics involve emergent behaviors and are probably the biggest unknown when designing a game. When playing Werewolf for example the dynamics of the game involve things like “bluffing” and “backstabbing.”
In hackable games the dynamics we want to see include things like self-expression and “geeking out”. Part of the beauty of dynamics though is that they are unexpected and emerge out of the players interpretation of the mechanics and the aesthetics, that we will talk about below.
"Aesthetics describe the desirable emotional responses evoked in the player, when she interacts with the game system.”
I have to admit, that so far Mechanics and Dynamics of Hackable games don’t seem such fun- but that is all good, because “fun” happens in Aesthetics. In particular, according to LeBlanc there are not one but eight (!) types of fun. Those are;
Take "Final Fantasy" for example, we could say it evokes fun in the realms of Fantasy, Narrative, Expression, Discovery, and Challenge.
As designers, more often than not, we start the game design process by thinking backwards and exploring the aesthetics of the game we want to create.
The Aesthetics of hackable games is something that has been in my mind for some time now. I have been thinking that in order to create an emotional response of what is basically “curiosity” (to tinker with a programming language) and “creativity” (to make your own new version of a game) we want to create aesthetics that are on the verge of “half-finished looking” yet “has the potential to become my own shinny game that I am proud about.”
So how do we do that? What are the kinds of fun we want to generate? Discovery, Expression and Fellowship seem to be the more appropriate. A game that makes you curious to discover more and express your own creativity alongside others.
This last question is what I will start exploring in my next post, taking some examples of games that do that really well, exploring their aesthetics and thinking of their hackable alter egos.
Till then, looking forward to your comments and thoughts :)
Yup I know - it is 2013 already. But;
a) 2012’s end was just insanely busy with launching Game On.
b) ok fine- i m Greek and I m always a wee-bit late and what can we do, that’s part of my charm :)
c) I rely on the fact that not so many people read this blog and hence the chances of you actually caring for me being late with such a post, are *very* slim.
With all that said, here are my top 2012 games; hope you play them if you haven’t already and that you enjoy them as much as I did.
1. Super Hexagon, Terry Cavanagh
This heart-pounding, minimal, brilliantly addictive game has the power of making you feel like a genius for completing a level - while simultaneously making it brutally painful to miss.
I first played Super Hexagon on my way back from Nottingham’s Game City Festival - where everyone was talking about it. It took me the whole trip back to London (2h) to go past the line level and then about two transatlantic flights to pass the game’s first level, poignantly named “hard”.
I don’t think I have heard “Game Over” more times in my life than when playing Super Hexagon and despite the small likelihood of me ever passing Hyper Hexagonest I still believe that if I keep trying, one day- I will succeed.
2. Zombies Run, Six to Start
I am not really into Zombie games. Or into gamification apps, that try to motivate you to do everyday routines. But I am very much into running, I do it almost everyday, and a fan of the british Six to Start team which has a knack for great story-telling & pervasive games.
Zombies Run is an ARG- esque mobile game where you run away from zombies while mixing in your favorite playlist. The game’s narrative is genuinely good and the fact that I am running in a park full of happy baby strollers and serene dog walkers while escaping brutal attacks from zombies is well… awesome.
The game also does a pretty good job of tracking your runs stats if you are into that sort of thing.
3. Turtle Wushu, Invisible Playground
Ok, If you know me you know that I have been obsessed with Turtle Wushu this year. I first played it at the Playpublic festival in Berlin and have been playing it with friends and colleagues ever since. I even made everyone at Mozfest play it.
A wonderful group game with a subtle narrative (naming your turtle is crucial) which also doubles as a metagame; my favorite part about it is when people take out their turtle in random moments and challenge each other in an impromptu match of turtle wushu.
As a street games festival organizer, I also have to say that this has been the easiest game to ever setup and run, all you need is tiny turtles and someone to show you the rules. So double kudos to the awesomest Invisible Playground team for it.
4. Dys4ia, Anna Anthropy
Dys4ia is an extremely elegant, moving and honest storytelling game about going through the process of hormone replacement therapy while dealing with the social implications of being transgendered. Aside from being a powerful narrative with impeccable semiotics in it’s graphics and gameplay - Dys4ia is about an experience that is not really dealt with in the medium of games. It is valuable as an empowerment for others to seek more diversity in games and the stories they tell.
5. Journey, thatgamecompany
I am cheating a bit on this, since I first played Journey in a demo Kellee Santiago gave at NYU in March of 2011. But I never finished the game until this summer when I replayed it during a warm and lazy summer night in Athens.
Journey is as effortless and lyrical a game can be. Following an incredibly minimal yet seductive narrative (only one line of text appears throughout the course of the game, that is “Journey” in the beginning) you get lost in a dessert of sand smoothly moving towards the mountain, through eye-watering landscapes. At the end you emerge in a state that is close to having gone through a metaphysical experience.
What I love about Journey beyond the astonishing beauty and serenity it transcends is the way you learn how to do things in the game; not always obvious or easy you slowly navigate Journey’s systems seamlessly and intuitively.
6. Fez, Phil Fish
On the topic of stunning games, the much anticipated Fez was a feast. A mind-boggling puzzle game in a 3D world where you actually explore everything in a 2D view as you turn the world around on an axis to navigate and discover objects. Fez’s puzzles are also super hard to solve (and endless). Like Super Hexagon is has the quality of turning frustration into enjoyment for playing more. And you probably don’t need me to tell you how gorgeous the graphics are. I have never imagined more plush toys and cute t-shirts coming out of a game.
2012 was a banner year for indie game developers, I am hoping for more of that in 2013 as well as experiencing more games on the web and exploring all the new mechanics and potential it has to offer. I also promise to do more of this sort of thing here on my blog- and write about games I play. Till then, have a happy & game-full new year.
So Boom! Mozilla Festival (Mozfest) just happened. And Hackable Games from being a seed of a somewhat unclear idea went to super blasting with playable prototypes Ravesbourne’s 8th floor. It was three amazing days and my post-MozFest tired brain will do it’s best to capture all that went on in the Hackable Games planet.
Umm… so what are Hackable Games again?
Let’s start with the basics; If you are a gamer, you know that games are awesome interactive experiences. They engage us in hours of obsessing over things like throwing …Angry Birds, shooting Portals in walls and building weird looking Minecraft landscapes. They bring us together online and offline and fuel our imagination in unique ways.
But in their majority games are closed systems. It’s a “play and move to the next game" kind of experience. Not to mention that game platforms such as consoles and phones place anything between the code that makes the game and the game play experience, hidden in a black box of fear (most likely connected to the super brain of the Megazords who made it).
Hackable Games are Open Systems
So what if we looked at the web as an open gaming platform. And what if we looked at games that like the web itself are hackable by design; games that let their players fork the code and customize the assets in order to create new games.
Games that empower players to become makers of games and learn how to code and design amazing games along the way. As a result we would have games that are closer to what the players like and who they are. We would have more innovative gameplay mechanics and more diverse characters.
Mike Hoye’s story of hacking Zelda so that Link is a girl character and not a boy tells the story best. “I’m not having my daughter growing up thinking girls don’t get to be the hero and rescue their little brothers”
Hackable Games are Learning Engines
If you play games you might also have a hunch about what great learning engines they can be; Skyrim might seem like it’s just about killing dragons but if you look closer it requires some serious resource management and critical thinking to level up.
By default when playing a game you have to master certain skills in order to advance. Moreover games have their players fail multiple times in order to master such skills through experimentation and tinkering.
Now if you think about it that process is quite similar to the way we learn how to code. We tinker again and again, probably write a bunch of nonfunctional code and eventually master a programming language.
So what if we seized the power of (hackable) games to teach the world how to to code?
Mozilla Festival: #mozgames stories
I have highlighted some stories from MozFest below to give you a glimpse of all that took place during the weekend
Hacking Pong and Amira’s Guinea Pings
We are asking you to use bleeding edge Web technologies to invent new game mechanics, create new story lines, engage diverse audiences, introduce aesthetically challenging content.
- Make browserbased mobile games, hackable gamesand games for learning
- Win a trip to Game Developers Conference to meet industry pioneers.
- Mozilla Marketplace
- Submissions open on 2012 and close
So if all this is getting you as excited as this Gangham Style Pikachu ==> here is how you can be part of it;
I will close this blogpost with a specially themed Zelda tune to get you all inspired to go make them games ^^
ps. a special shout out to fellow Mozillians for pulling this launch together so fast and furiously, helping one way or another with their expertise; Ross Bruniges, Chris Appleton, Ben Moskowitz, Matt Thompson, Rob Hawkes, Dees Chinniah, John Bevan, Erin Knight, Ryan Merkley, Sean Martell, Jamie Lockwood and Julie Choi.
Sketch by Mark Surman
Photo by MozillaEU
But before we go deeper into what we will be doing in the Hackable Games Lab at Mozilla, let’s take a step back and talk about why you should not just play video-games; why you should hack them to make your own.
Growing up I used to spend my afternoon playing with my friends in the (car-free at the time) streets of our Athenian neighborhood. We would all meet when done with homework (or pretending to anyway) and play different versions of hide and seek, capture the flag and hopscotch. The one game though that we all loved to play again and again was tag, especially customized for different times of the day and seasons. There was the after dark version of tag, an especially adventurous game played in the one empty lot of the neighborhood, that looked especially creepy at the age of seven. Then there was my personal favorite; water tag, the perfect game for a hot summer day (which was practically EVERY day, during the Greek summer).
And then it was Christmas of 1989 and everyone in my neighborhood got a Gameboy as a gift. Thank god I got one too, otherwise it would have been a struggle to fit into what was our new daily routine; still meeting after school but this time to play endless hours of Tetris, Super Mario Land and Final Fantasy Legend. Final Fantasy was definitely my favorite one that year, since I loved the role playing aspect of it and the fact that you had choices in the game. Also there was a forbidden love story involved which I could relate to as a teenager. I remember wishing I could customize my character or add new worlds to the game. This seemed impossible at the time; sure making my own version of tag was a nobrainer, but making my own version of Final Fantasy Legend? oh god no! In my mind that was a sacred task left to god like Japanese Legends- indeed-.
Photo by Claudio Midolo
Fast forward years later, and I was working at Institute of Play in NYC teaching 6th graders game design at Quest to Learn; one of the first activities we did together at the time was to draw a storyboard that would answer the question; “What are the steps a game designer takes to make a new game? “. The goal of the activity was for the kids to theorize on the process of game creation, preparing them to go through it themselves. Looking at their storyboards at the end of the activity, I remember that what hit me was the way the students depicted the game designers; like me at their age, most of them had drawn this image of a game designer being something close to a god looking character. Also in all 60 drawings of them, the game designer was a guy.
Unlike my 8 year old self though who would have never even conceived as possible or even *real* the career of a game designer; the Quest to Learn kids took on the identity of game creators throughout the year - boys and girls with equal passion- by eventually making their own full fleshed games. However, for the majority of youth who has never taken a game design class or has met an actual game designer (do they really exist?) moving from players of games to actual makers of games seems like a giant leap. So giant it remains inconceivable.
I will make the argument at this point, that we are at a pivotal point were this perception of game development being something immensely hard to achieve as a young person is changing; and there are many reasons for this shift:
One is that more and more mainstream games include mods and level editors, such as the giga hits Little Big Planet and Minecraft that only prove how much players like to be creators of their own game world.
Screenshot of the Little Big Planet 2 editor by @kirkhamilton
I am flying to Toronto this week for the Mozilla All Hands and I am sure I will be writing plenty of updates soon about all the Hackable Games Lab soon-to-be-launched quests; including a Game Arcade at Mozfest and the sequel of the successful Game On competition that Mozilla Labs run in 2010. Meanwhile here is the full prezi that I plan to give at All Hands and you should feel free to drop in our next Hackable Games Call on the 19th of September at this Etherpad.
And since today is the 46th anniversary of Star Trek, I leave you with an appropriate group picture of the Hackable Games Lab crew.
One of the (endless, really) reasons I love my job at Mozilla is that it is driven by a global community of webmakers from places that range from Nigeria, to Australia, to…Greece! During our Summer Code Party we have seen this community in action organizing Mozparty events in more than 70 countries. In that spirit, it was especially exciting for me to see an event organized in my home country of Greece- by an inspiring project called Future Libraries.
Funded by the Stavros Niarhos Foundation Future Libraries is part of an initiative that aims to bring youth together to tinker with media and technology, become makers and grow a community of connected learners.
What makes the collaboration with the Future Library in Veria, Greece unique ( aside from my obvious enthusiasm for working with Greek educators) is that it was an opportunity for our Learning Team to localize and integrate Thimble content to an interest driven event.
When we first started talking with George Bikas, one of the superstar mentors at the library, he explained to us that he had planned a Robotics workshop and was looking to integrate a Thimble activity in his curriculum. Together we chose to hack the Make your own web-based “how-to” Thimble project and adapt it to what he wanted to do.
Thimble’s Make Your Own Web-Based How To, localized in Greek
A few days later, we had a Greek version, simply made by directly editing into Thimble in order to translate the comments and fonts, then publishing and using that link as a new project (Check it out here). Pierros a MozRep from Athens (also known amongst the Learning Team as “The Awesome Pierros”) who was vacationing close to Veria (extra MozRep points of incredible commitment) came to help George with the facilitation. A great week of making followed with the kids creating tutorials for others on how to assemble their own “professional” as they stated robot.
Robot Maker in action, Picture by Veria Public Library
One of the tutorials made by the youth who participated
In the next months we will be working closely with George and Dimitris from Future Library as the Hive Pop-Up in Athens will also start taking shape (more exciting Greek stuff there). In the meantime, this is an inspiring story for our community on how we can easily localize content to make it relevant and accessible to local communities. Also as we are designing new Thimble projects it is good to keep in mind ways to include modular projects like the above one, that can be easily included in an interest driven curriculum.
And if it’s not all Greek to you, you can check some of the links below from the webpages the kids made, kindly collected by George.Comments
A few weeks ago we talked about Alchemy as a metaphor for designing the mozbadges assessment system. Now that we have reached the middle of August and that the perspective of spending a few days away from the big city to enjoy say Mediterranean waters and a sky full of stars, it seems like a good time to write about constellations - as one should. Constellations of badges that is. In specific, I will share in this post some sketches and ideas for what Mozbadges we want to release in the course of the next year- and yes they look like constellations.
Why constellations you might ask? Well aside from being inspired by summer escapades and the fact that I played A LOT of Skyrim this past winter- we always describe web literacies in the Learning team as a system; A system of interconnected and ever-evolving skills. A system with many entrance points and different pathways to mastery. One defined by the learners’ choices and what the community values as important. A system that in my head looks like a constellation of badges.
Skyrim Skills Constellation, Image by Eric Guzman
Enough with the dreamy part of the post and time to get into specifics; we are imagining three release phases for rolling out Mozbadges. In the sketches below I will show some first ideas of how the system will evolve throughout each phase (low, medium and high bar). Then I will guide you through the mozbadges that we are considering for the first “low bar” phase.
So, first thing first; in the “low bar” we are designing a constellation of stealth (automatic) mini badges issued through Thimble & Popcorn, that accumulate to lightweight skill badges like a badge recognizing HTML mastery. Additionally we are suggesting peer badges that can be issued directly from one peer to another via email. The web literacy track that we are assessing through this phase is “Author”. (Check Doug’s post for more on the other tracks)
Below an image illustrating the constellation (click here to see it bigger on Flickr)
For the next phase, what we call “medium bar”, we are designing a constellation of stealth (automatic) mini badges that are issued through Thimble and Popcorn, that accumulate to bigger skill badges recognizing for example CSS & HTML mastery. These badges will accumulate in different levels, will be assessed by peers through endorsements and rubrics and will connect to a big web literacy badge such as the Owl (Authoring) badge (see below) and the Dolphin (Exploring) badge.
Below an image illustrating the constellation (click here to see it bigger on Flickr)
For the last phase, what we call “high bar”, we are designing a system of different constellations made of stealth (automatic) mini badges, peer assessed skill badges and web literacy badges . Those badges are connected and once a learner obtains a series of them she unlocks new learning pathways. During this phase we will design assessments for all the web-literacy tracks (Authoring, Exploring, Building, Communicating,Protecting).
Below an image illustrating the constellation (click here to see it bigger on Flickr)
Now that you got a glimpse of the big picture for each of these phases, you can also read below to get a better idea for the specific mozbadges that we are considering creating for the “low bar” phase.
*Alert: these are presented in working format, they are preliminary ideas and names for mozbadges subjected to iteration and community input. Please be oh so kind and leave your feedback in the comments at the end.
MINI BADGES: These are issued through Thimble & Popcorn, to provide the learner with dynamic feedback as they go and have small value in the ecosystem.
In this category, here are some sample mozbadges;
• What is it: a badge that recognizes fixing broken code (i.e. Map of Arcade)
• How do you get it: a user fixes syntax errors such as open tags etc.and gets this badge on publish/ validation
• What is it: a badge that recognizes adding explanatory comments into a page
• How do you get it: a user adds new comments in the page and gets this badge on publish/ validation
• What is it: a badge that recognizes adding/editing accessibility content to a page
• How do you get it: a user adds/edits tags that ensure accessibility for hearing (transcripts, volume options), vision (descriptive alt text tags, type size), mobility (large links) and gets this badge on publish/ validation
HTML mini badges
• What is it: a badge that recognizes adding an image/ using the <img> tag into a page
• How do you get it: a user adds a new <img> tag or changes the link within the code
• What is it: a badge that recognizes adding/editing an <i frame> into a page
• How do you get it: a user adds/edits a new <i frame> tag and gets this badge on publish/ validation
• What is it: a badge that recognizes adding/editing an <audio> tag into a page
• How do you get it: a user adds/edits a new <audio> tag and gets this badge on publish/ validation
• What is it: a badge that recognises adding/editing an <p>, <h1> into a page
• How do you get it: a user adds/edits a new <p>, <h1> tag and gets this badge on publish/ validation
• What is it: a badge that recognizes adding/editing a <a href> into a page
• How do you get it: a user adds/edits a new <a href> tag and gets this badge on publish/ validation
• What is it: a badge that recognises adding/editing <ul>, <ol> and <li> into their code
• How do you get it: a user adds/edits a list and gets this badge on publish/ validation
CSS mini badges
• What is it: a badge that recognizes adding/editing the <style> section of a page
• How do you get it: A user gets this when they change one or more of the following; the positioning values, hex numbers/color, fonts/sizes.
• What is it: a badge that recognizes adding/editing a <div> into their code
• How do you get it: a user adds/edits a <div> and gets this badge on publish/ validation
• What is it: a badge that recognizes adding/editing a <class> into their code
• How do you get it: a user adds/edits a new <class> and gets this badge on publish/ validation
Popcorn mini badges
Achievement mini badges
• What it is: a badge that recognizes publishing a Thimble project
• How do you get it: A user gets this when they publish a project. The badge could be associated to a specific project i.e. #mememaker #bakerybasher
• What it is: a badge that recognizes publishing a popcorn project
• How do you get it: A user gets it when they publish a project in popcorn
CUMULATIVE BADGES; These are stealth (automatic) accumulative badges issued through Thimble & Popcorn. They hold higher value in the constellation.
In this category, here are some sample mozbadges;
1) HTML Basic
• What is it: a badge that recognizes understanding of various HTML tags and syntax.
• How do you get it; A user gets this when they have received a combination of X number of the HTML mini badges above.
2) CSS Basic
• What is it: a badge that recognizes understanding of CSS syntax.
• How do you get it; A user gets this when they have received a combination of X number CSS mini badges.
• What is it: a badge that recognizes understanding of telling a story through video.
• How do you get it; A user gets this when they have received a combination of X number of the Popcorn mini badges.
• What is it: a badge that recognizes publishing x projects
• How do you get it: OpenBadger tracks the achievement mini badges you’ve gotten and once you’ve earned x #, you are issued the #iamawebmaker badge.
PARTICIPATION/ CONTRIBUTION BADGES: These are manually issued badges through OpenBadger recognizing participation and contribution in the community.
• What is it: badge for being part of the community
• How do you get it: Mozilla issues through OpenBadger based on email address (manual), you claim through OpenBadger with claim code
• What is it: badge for participating in a SCP or other webmaker event
• How do you get it: Mozilla issues through OpenBadger based on email address (manual), then you claim it through OpenBadger with claim code.
• What is it: badge for being part of the community
• How do you get it: Mozilla issues through OpenBadger based on email address (manual), then you claim it through OpenBadger with claim code
Meanwhile, if you want to get a full on blast presentation, Erin and team will be guiding you through the mozbadges plan in tomorrow’s Mozilla Webmaker Community Call. You should also most DEFINITELY check Jess’s post including a brilliant cover of Lionel Richie’s “Hello” explaining how this is going to work in Thimble as well as how it fits in the grand Open Badges scheme.
So- if you made it thus far in the post, you deserve the theme song for today performed by Moby, a favorite choice for a starry summer night.