Monthly Archives: July 2011

Hack This Game: Hackasaurus game sprint Aug 8 – 12

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!

10 inspiring examples of where the web is headed

HTML5 Star Wars

Mozilla’s “International Developer Evangelist” evangelist Christian Heilmann blew some minds in Monday’s MozNewsLab, outlining the potential of HTML5 with fantastic demos and examples that seemed too good not to share more widely.

HTML5 and where the web is headed

You need the audio and Chris’s context to really do this justice — but even just clicking through his links and examples provide a mini tour of where the web is headed.

  • Video archive of Chris’s presentation. (With introduction from Phillip Smith and the Mozilla Foundation’s Mark Surman. Skip to 31:36 for Chris.)
  • Etherpad with links, resources and lecture questions and answers.
  • HTML version of Chris’s slides

HTML5's potential

WebGL

http://bodybrowser.googlelabs.com
WebGL enables 3D interfaces right in the browser. Google’s “body browser” demo allows you to zoom into and explore the human body.
WebGL

Wheels of Steel

http://wheelsofsteel.net
Mix and scratch DJ decks in the browser. Uses CSS3 and HTML5 (with Flash for some audio).
Wheels of Steel

20 Things I Learned About the Web

http://20thingsilearned.com
Interactive book from Google explaining web basics, including the benefits of HTML5.
20 Things I Learned

Animatable

http://animatable.com
Interface for creating CSS3 animations that work across all HTML5 browsers.
Animatable

Mediaqueries and “responsive design”

http://jasonweaver.name
Mediaqueries allow developers to test how big the user’s screen is, or what kind of device they’re using. And then change the design and layout accordingly — “responsive design.”
Mediaqueries

HTML5 video + canvas

http://thisshell.com
This demo uses HTML5 Video and Canvas to turn a music video into movable puzzle pieces. Solve the puzzle and download the song for free.
HTML5 video + canvas

SVG

http://mbostock.github.com/d3/
The d3 Javascript library turns HTML data tables into beautiful visualizations and graphs. Uses SVG and Canvas, making it easy to dynamically adjust color and style.
SVG

High charts

http://highcharts.com
HighCharts.js takes it further, creating beautiful animated charts and graphs, all using open technology — formerly the terrain of closed tech like Flash and Silverlight.
High charts

Drag and manipulate files in the browser

http://c64.superdefault.com/
Drag files from your desktop right into the browser and manipulate them in real time. This demo allows you to drag an image of yourself into the browser and convert it into Commodore 64 format.
C-64

Popcorn.js

http://popcornjs.org/
A Javascript library that allows you to synch video content with dynamic web content. “Hyper-video.”
Popcorn.js

Hackasaurus in the Board Room

As Mark Surman’s blog post explains, Mozilla’s Hackasaurus project has been crisping up its story for high-level stakeholders like the Mozilla Board and our colleagues at the MacArthur Foundation. This post shares some of those talking points for “c-level,” Board-type audiences. More mainstream messaging is available on the Hackasaurus web site.

Mozilla: Creating a generation of web makers with Hackasaurus

  • Hackasaurus makes it easy for youth to learn about, explore and make stuff on the web.
  • Out-of-school web-making for tweens. Digital literacy through tinkering and messing around with the online spaces kids already hang out in.
  • Play with the web like Lego. Use real HTML, not simplified sandbox or toy language. Like “Scratch for the web.”
  • Face-to-face design jams plus online games at Hackasaurus.org. With learning pathways that invite kids to mess around with the web, and then help them move to high-level skills.

Kid-friendly tools + hack jams + online community

  • Hackasaurus includes three main offerings: 1. Kid-friendly software, 2. Local workshop curriculum, 3. An online community where kids can earn badges, find local design jams and share their work.
  • Software includes “X-ray Goggles” that make it easy to see and remix how web sites are put together. And a “WebPad” that makes it easy to make your own web pages.

Digital literacy through making and tinkering

  • Hackasaurus aims to help kids see the web as remixable by all of us. Like Lego or magic ink — as opposed to something passively consumed, like TV.
  • Longer term: on-ramp for youth to take deeper interest in web development. Geeking out with their own web projects and making, focused on their interests and passions.
  • Filling a gap in the market. There’s broad interest in digital literacy and maker kids, but few good programs. Hackasaurus brings both.

Progress to date:

  • Promising alpha software and successful events.
  • Alpha software and basic curriculum already developed.
  • Kids are participating as co-designers. Constant learner feedback via hack jams.
  • Have run 20+ hack jams so far in 2012. NYC, Chicago, Brussels, Birmingham.
  • Strong partnership with New Youth City Learning Network. Serving as lab for Hackasaurus.

What’s next?

1) Move from prototype to product. 2) Share with learning networks & partners. 3) Scale.

  • Improve UX and functionality of software. Becomes like Scratch for the Web. (2011/12)
  • Build out curriculum/pathway. Package so it can be replicated and self-organized. (2012)
  • Hackasaurus badges. Incentive and scaffolding for complete web-making pathway. (2012)
  • New learning networks. Rolled out to new YouMedia and Hive cities as they come online. (2012/13)
  • Create online community to help kids share their work, learn more, join clubs. (2012/13)
  • Global partners. Localization. Local clubs. (2013)

Risks and challenges

  • Gap between prototype and massively scalable product. There’s a significant gap between what we have now vs. program that can serve millions of kids. Need to draw on Mozilla’s product design and scaling skills, advice from Firefox and Mozilla Labs teams.
  • Getting beyond the “gee whiz” factor. Kids and adults say “wow” when we do the first hack jam. Need more. Plan to develop game-like pathways that map to real learning outcomes. Also, specific interest-driven modules (e.g. fashion, hip hop).

Presentation slides & video