Hack this Game: Portal for the Web

August 4, 2011 § 2 Comments

Portal” and “Portal 2” are mind-bending and addictive. There’s something magical about firing your first “portal gun,” hacking through the fabric of everyday space to unlock whole new dimensions and possibilities.

What if we could do the same thing to the web? Making it easy for players to “fire a portal gun” at everyday web pages, using the Hackasaurus X-Ray Goggles to uncover easter eggs, solve puzzles and run through “hack mazes.” Using cool new tools like WebGL and Tilt in the background to bring cinematic transitions and game-like effects to familiar web pages. Like “Where in the World is Carmen San Diego” meets the hacking the Matrix.

Hackasaurus game challenge: Build a “hack maze” for the X-Ray Goggles

That’s the Minimum Viable Prototype idea I’d like to submit as part of the “Hack this Game” design challenge and hack sprint. Why is it a good fit for the Hackasaurus project and road map right now? Because it seems:

  • Doable. All we need for a prototype is one or two hack mazes, consisting of three or four web pages a piece. Plus some cool early examples of what the HTML5 transitions and effects could look like.
  • Familiar. Players, game designers and developers are already familiar with the Portal game, making it easier to explain and wrap our minds around.
  • Participatory. In the medium-term, we can make it easy for players to create and share their own hack mazes. This gives Hackasaurs an easy pathway beyond messing around: building mazes and worlds out of your hacks, and sharing them with friends.
  • Builds off what we’ve already got. Hackasaurs are already using the X-Ray Goggles to create and share their “hacks” — remixed versions of everyday web pages. This adds a game layer over top of them, and a more compelling reason to storify and share your remixes with others.
  • Fun (?). That’s the #1 requirement! I don’t think we’ll know whether it’s genuinely fun until we build a prototype. If we succeed, we’ll weave basic HTML right into the game-play, as the means by which players solve puzzles and advance. All sugar, no medicine.

X-Ray Goggles: coolest invention since the Portal Gun?

In the same way that the portal gun alters your sense of reality, so do the X-Ray Goggles — revealing the web as something malleable, tinkerable, made by all of us. With glowing bits of Matrix-like code just under the surface that we can mess and play around with. Safely experimenting, remixing and breaking things to see how they tick.

This turns the open web itself one giant game. We can build on the basic game mechanics of hack mazes to lay the foundation for David Humphrey’s larger vision: turning the open web into one giant gamespace or Alternate Reality Game (ARG).

Running through hack mazes

What would the basic game mechanics consist of? Players would use the X-Ray Goggles to solve puzzles and advance through a hack maze. These mazes can be created by us to start, but ultimately be created by players / educators / game designers / interactive storytellers / anyone.

Spot and unlock hacks to advance. In the same way that Portal presents you with a locked room and a portal gun to try and get out of it, Hackasaurus would give you a familiar-looking web page — but with a difference. One of the elements is different. Something’s been altered or remixed somehow. Maybe the photo on that New York Times page has been changed to a picture of somebody’s Cocker Spaniel. Or maybe the Google logo has been transformed into a sock monkey.

Can you spot the hack — and use the X-Ray Goggles to change it back? Or remix it yourself? Once you do, the page itself can start spinning and twisting and come to life in crazy ways (using WebGL, Tilt and other HTML5 magic behind the screen). A portal opens up around your hack, and it feels like you’re stepping through the guts and DOM of the web page itself. Like seeing the glowing green code behind the Matrix, sucking you through the web to the next page in the maze.

How would players create hack mazes?

What would the basic steps in the user experience for creating a hack maze look like?

  1. Bust a hack with the X-Ray Goggles. Go to any web page and use the X-Ray Goggles to remix something. Change the photo on a friend’s web site. Alter some text on a Wikipedia page, etc.
  2. Repeat. On to the next page. The user making the maze goes to a new page and repeats the process. By repeating this process three or four or however many times, you’ve created a “Hack Maze” — a series of hacks strung together across multiple pages. (Ideally with some kind of X-Ray Goggles “Maze-Maker” functionality tracking the process and making it easy in the background.)
  3. Publish and share your maze with others. Congratulations! You just made a hack maze! Now why not share it with friends? Maybe it’s a “flags of the world” maze or a LOLcats maze or a politically subversive re-imagining of the Tea Party maze. Hackasaurus mazes would be limited only by the maze-maker’s imagination.

Play as participation, participation as play

The best mazes can become popular games and puzzles for Hackasaurus. Hack Mazes could have themes, learning outcomes, or just be hilarious. An educator could, for example, create a Hack Maze on geography, where flags or labels on a map are re-arranged and students have to use the X-Ray Goggles to put them back. Or you could create a Hack Maze for School of Webcraft that teaches the basics of HTML, CSS or Javascript along the way. The beauty is in letting players decide and make up and share their own experiences. Play as participation, participation as play.

Wow factor = bringing familiar pages to life in strange new ways

  • The wow factor will come from using HTML5 effects and transitions to blow players’ minds. Bringing everyday web pages to life in crazy ways no one’s seen before. Pages can change color, spin, and twist apart in three dimensions as you successfully open a portal. Or pages could break into a million pieces like jagged glass, or literally “explode” if you use the X-Ray Goggles wrong. (Check out Tilt or the effects section at Three.js for inspiration.)
  • Make failure fun. Like Jane McGonigal‘s example from “Super Monkey Ball 2,” a which makes throwing a gutter ball hilarious and by extension, makes failing fun. Let’s follow the same principle to make HTML less intimidating and make breaking stuff fun.
  • Make HTML and the web’s building blocks more tangible. Less like code, more like Lego. The transitions and effects — by exploding or stretching the DOM of the page in 3D, for example — can make the web seem more tangible, craft-like and malleable.
  • Play with a Matrix-like sense of uncanny and mind-bending.  Imagine you’re sitting in your living room knowing that *one* element is suddenly different. Maybe there’s a red ruby slipper suddenly hidden in the top drawer of your desk. Or the picture of your family has been mysteriously swapped with a Selleck waterfall sandwich. That’s the sensibility we can bring to players’ own everyday online reality. Imparting a sense of wonder, magic, and Matrix-like mind-bending.

Build this game: Want to get involved?

Hackasaurus will be running an ongoing “Hack This Game” design and developer challenge. To create and share games and puzzles for the X-ray Goggles, making web-making and tinkering fun for kids aged 11 – 16 (and ideally adults as well).

We’re looking to get game designers, web developers and HTML5 enthusiasts together to swap ideas and code. The only restriction: game concepts have to involve the X-Ray Goggles in some way. Here’s how to get involved:

  • Our first Hackasaurus game sprint is happening Aug 8 – 12. With more sprints to follow. See this post for details.
  • If you’re interested in participating at any point, please get in touch through the Hackasaurus mailing list, or join a weekly Hackasaurus community call.
  • Share your prototype ideas and goals for the sprint as comments on this post, or on the Game Sprint etherpad. Linking to your own blog posts, tools, napkin sketches, etc.
  • The Hackasaurus web site and project page have plenty of project links and tools.
  • We’ll turn up the volume and engage kids, game designers and developers at the Mozilla Festival in London this November.


Hack This Game: Hackasaurus game sprint Aug 8 – 12

July 29, 2011 § 16 Comments

Web-making and remixing as game

HTML5 opens up amazing new gaming and storytelling potential. What if we could combine that potential with Hackasaurus to turn web-making, remixing and learning basic HTML and CSS into awesome game-like experiences? Where kids use the X-Ray Goggles as a controller / magic wand / portal gun to unlock hidden dimensions, solve puzzles, and sharpen their web-maker kung fu to level-up and advance through the game?

HTML5 games: A buncha cool cats converging

That’s the discussion a bunch of interesting folks in and around Mozilla had in last week’s Hackasaurus community call. A number of us have been dreaming up  HTML5 game ideas, all messing with the idea of the open web as a giant Alternate Realty Game.

  • David Humphrey is interested in building HTML5 games that break out of the usual gamespace box, using the open web itself as the game world — plus enabling greater collaboration amongst standalone HTML5 game projects.
  • Atul Varma wants to turn the Hackasaurus X-Ray Goggles into a “controller” for web games, creating an API that makes this easier for developers, and experimenting with web literacy puzzles like “The Parable of the Hackasaurus.”
  • Jono Xia has been teaching a School of Webcraft course on HTML 5 game development, and wants to reduce the barrier to entry for novice game developers.
  • Jess Klein has worked at Sesame Street creating games for smartphones and is interested in ARGs for Hackasaurus jams and storytelling.
  • Brett Gaylor has been exploring the gaming potential of Popcorn.js, thinking about a comic-book / WebGL hybrid, and possibly adapting a property like Cory Doctorow’s Little Brother into an interactive gaming experience.
  • Anna Debenham is interested in learning more about how kids can build their own games, instead of just consuming them.
  • Geoff MacDougall has spent 10 years in the game industry (mostly around MMOs) and is interested in helping to make introductions and find additional funding or resources to support these efforts.
  • Ben Moskowitz is interested in adapting classic arcade games like Pac Man or Asteroids for Hackasaurus, and drawing on our Knight-Mozilla innovation challenge model for Hackasaurus design challenges.
  • Plus many, many others… many of whom we haven’t even met yet. (Like you?)

Next steps: how do we work together?

Games are a core part of what Hackasaurus is building. So how do we capitalize on all this momentum and interest? We need a framework for effective collaboration, while also giving everyone the freedom and flexibility they need to purse their own projects. Here’s the plan we landed on in our community call:

  1. Document our thinking. Too much of this stuff exists in our heads — we need to get it down on paper and in blog posts.
  2. Run a hack sprint. Come together to build a minimum viable game prototype, using the X-Ray Goggles as the play device. A bunch of us are going to be in Toronto Aug 8 – 12, so let’s try then.
  3. Launch a more robust “Hack This Game” innovation challenge for Hackasaurus later in Q3 / Q4. Probably with the launch of Hackasaurus Beta in September. This will establish some open innovation infrastrucutre and web presence, making it easier for designers and developers to share ideas and code.
  4. Turn up the volume at the Mozilla Festival In London this November. We can showcase our early progress, and use that as a jumping off point for more hack sprints and testing with kids and game designers. Dovetail with what Jono’s already planning there.
  5. Constantly involve kids. That’s the secret sauce for Hackasaurus generally. Whatever we do — as Jess Klein keeps reminding us — we need to constantly involve kids as co-designers and testers to increase the awesome.

“Hack this Game:” Design challenge and hack sprint | Aug 8 – 12

With that in mind, a bunch of us will gather August 8 – 12 for a game design and hack sprint. We’ll use the new Mozilla Toronto office as home base, and do our best to enable effective remote participation as well.

How do we make the game sprint as successful as possible?

  • Start sharing ideas for a minimum viable game prototype. Let’s start sharing ideas and documentation for the prototype we want to build in the sprint. The one major requirement: use the X-Ray Goggles as part of the game mechanics.
  • Keep it simple and focused. The key will be coming up with something we can prototype effectively in 3 – 5 days. A lot of people have ambitious ideas — but the art will be quickly building a single atomic unit of fun.
  • Involve youth effectively. We’ll need to involve kids at the right points in the process, so that it isn’t boring or ineffective.
  • Encourage side-by-side collaboration. The key to past successful sprints we’ve done is having developers work side-by-side with filmmakers, educators, etc. We’ll need to do the same with game designers and players.
  • Share cool assets & tools for developers to play with. Like:

Want to get involved?

  • Physical space is limited, so if you’d like to participate in the Toronto sprint, please get in touch with me through matt [at] mozillafoundation [dot] org.
  • If you’re interested in participating remotely, please get in touch through the Hackasaurus mailing list.
  • I’ve started an etherpad for folks to self-organize and help work out logistics here.
  • Please share your prototype ideas and goals for the sprint as comments here, or on the Game Sprint etherpad, linking to your own blog posts, napkin sketches, etc.
  • We can work out further details in Tuesday’s Hackasaurus community call. See you there!

Where Am I?

You are currently browsing entries tagged with games at o p e n m a t t.