HTML5 = new world of hackable games

I believe HTML5 will create a new class of games: webbish games that, like the web itself, are hackable by design. These games will let you pull assets and data from across the web into your game world. And, they will let you remix, fork and share to your heart’s content. The result will be fun for people who like games — and huge potential for webmaking and learning.

The first glimpse I got of this was Jono Xia’s RunJumpBuild, a very simple side scroller level editor. While RunJumpBuild is rudimentary at this point, it shows an important idea: web games can pull anything with a URL into a game. A picture. A sound. A video. Data. RunJumpBuild is designed to let people create game levels that are made up of the web.

This may sound like no big deal. This is how millions of everyday web pages already work: displaying an image from Flickr; embedding a video from YouTube; pulling in Twitter and RSS data. But, just like movies, most games don’t work this way. Games tend black boxes, firewalled off from the social and creative assets of the web. IMHO, this is a missed opportunity for fun and creativity.

The other thing we’re starting to glimpse is games where ‘the web is the level editor‘. Of course, hackable games are nothing new. There is a long history of game modding. However, most modding uses level editors designed for a single game or game engine. HTML5 games will change this: the web programming stack (HTML, CSS, JavaScript) will become a universal level editor.

Enchant.js is an early example of this. It’s a rudimentary JavaScript framework for making 2D games. What’s notable is the invitation to ‘fork’ that is included in all the sample games. Press the ‘fork’ button and you get pushed into an editor that lets you work with the HTML, CSS and JS code that makes up the game.

While these developments are nascent at best, I believe they hold great potential for Mozilla’s webmaking work and for our efforts to promote HTML5 games through our app store. At the webmaking level, the potential is obvious:

  • Games are where the people are
  • Hackable games can teach people basic web mechanics
  • -> e.g. a URL is how the web knows where things are
  • They could also teach HTML / CSS / JS to non-programmers
  • -> games = motivation to learn the ‘universal level editor’

With this in mind, we’re starting a number of HTML5 game experiments as part of our webmaking work. The most significant is Gladius, a game engine which uses the web’s most popular 3D game libraries. We’ll use Gladius to build sample games with a web native level editor as a way to test out the ‘hackable web games’ idea. We’re also considering hackable game experiments built around basic 2D game archetypes and learning-oriented game experiences using Processing.js. All of this is in very early stages of development.

Obviously, there are a bunch of big design questions that will come with this work. How do you use content from across the web to add fun and playability into a game? How do we create simple UX to onramp people who have never edited HTML / CSS / JS before? And how do you layer in the learning angle? The good news is we have many of the same questions with Hackasaurus and Popcorn, so we’ve got a head start.

As an example: we’ve already done alot of work with Popcorn to build an ecosystem of plug-ins that pull services and data into a web native video production. We have plugins that make it easy to throw Twitter, Flickr or GoogleMaps into or around your video. We should do the same with games.

Why does this matter? Because much of the HTML5 talk today treats games like a black box — using things like Google’s NaCl to port existing C++ games to the web. This is similar when we first started Popcorn, a time when the web was seen simply as a distribution channel for a black boxed video. Now we’re starting to show that video on the web can be about something totally new. We can do the same with games: to seed a whole new class of games that are actually designed from the ground up to work like the web, and that are more fun because of this.

Rumour has it that Dan Mosedale, Alan Kligman, Bobby Richter and Rob Hawkes are going to be blogging about some of our plans in this area in coming days. So watch for that. Also, if you know other examples of hackable HTML5 games please let us know about them. We want to work with any and all people who are exploring this space.

PS. Yes, there is a typo in the word ‘learning’ in the diagram above. That’s part of my charm.

Comments

  1. Joe replied on | Reply

    Another site you might be interested in is Play My Code. I am one of the co-founders and am in charge of the technical side. It is all HTML5 powered, and allows you to edit/fork anyone’s project.

    We also run classes teaching kids to code using it, and for that we have found the fact that all the games can be edited is a *huge* benefit. It provides a really powerful feedback loop as they are coding, and the fact that it is a game is instantly more rewarding.

    We often get kids to mess around on the site during the first or last 5 minutes, so they can see more of it. During these non-programming bits I’ve seen as much as half the class decide to edit games as they play them, often doing stuff I hadn’t thought of doing.

    We have personally seen a huge benefit from making our content hackable!

  2. cyborgDino replied on | Reply

    Great idea, never thought about how html5 is going to let people have open rain on game assets and code. Currently I am writing a series on how to dev a 3D game in WebGL. Trying to get people up to speed on every aspect of developing a polished game. Would be great to work on the project and see the assets remixed in interesting ways. Always down with teaching, learning and hacking 🙂

  3. julio Poisot replied on | Reply

    I’m working on Edulu, an Internet platform to integrate assets and contents into videogames (http://edulu.tm.com.mx)
    The sending part Is targeted to teachers and parents who wants to make videogames to reinforce school contents and activities.
    The system gives a code for the delivered content so children use that code to play.
    I’m at an early stage, but you can try a few proof of concept games.
    Next stage is about giving individual accounts to manage scores and statistics.
    Further in the roadmap is the involvement of kids in asset design and development of games in Panther, a modified Scratch dialect that can communicate with an API.

  4. dmose2 replied on | Reply

    @surman: Indeed; Gladius blog posts will be forthcoming before long. We’re in the midst of putting all of our collateral for 0.1 together, and some blog posts will shake out of that.

    @cyborgDino: if you’re interested in poking at Gladius (still in a pre-0.1 state), stop by #games in irc.mozilla.org, and we can direct you to the code.

    @julio: You might consider using Mozilla Persona (nee BrowserId) to authenticate folks to your leaderboard accounts. If you’re considering implementing this in JavaScript (i.e. Node.js), I’d love to chat me, and you can reach me at dmose@mozilla.org.

  5. html5player (@html50000) replied on | Reply

    cool demonstration! eventhough HTML5 audio player might not pack all of the features it works well.. it let’s iOS folk hear the mp3, tho the player will launch in a new webpage; and to return to your original page, html5 music player

  6. Web Development Kent replied on | Reply

    Really interesting read. Passed it on to a friend who found it very useful! Thanks

Add a Comment