Game On 2010, Example Code: Multitouch Gestures

While my previous code example showed how to recreate the past, this next example points out the possibilities of the future — Multitouch gesture interfaces, on the web!

The UI designer in me is chafing at the bit to start giving people web-apps with multitouch-based interfaces. The possibilities are enormous, and the advantages of multitouch UI – rich input, direct manipulation, natural mappings, fewer widgets, instant feedback, and a certain fun factor – are many.

But unfortunately, since this is still an emerging technology, it’s not exactly a standard yet. It’s not available on all hardware. On hardware where it is available, it’s not always made available through the browser. Different browsers expose multitouch events to web content in different ways, if they expose them at all. For this reason, the demo I’m about to show you won’t work on all browsers, sadly. So far, I’ve only been able to make it work using the Firefox 4 beta and only on multitouch-enabled computers running Windows 7 – which drastically limits the audience that will be able to try out this demo, I’m afraid.

So, I’m sorry to give you a demo that’s not fully cross-browser-compatible or standards-compliant. But! I think multitouch will become standardized, and soon. It won’t be too many more years before multitouch input becomes an everyday part of the Web experience on all platforms. So why not start experimenting with it now? We can start trying out new interface possibilities now, and work towards full cross-browser compatibility as the standards emerge.

And what better forum for experimenting with interface possibilities than the Game On 2010 contest?

Anyway, here’s the demo:

Multitouch Gesture Interpretation Demo

 

Game On 2010, Example Code: Old-School RPG Map

Mozilla Labs has announced Game On 2010, our first-ever game development contest.

To support Game On 2010, I’ve been working on some sample code that demonstrates how to accomplish common game programming techniques using only open Web standards and no plug-ins. For those who are thinking about entering but don’t know where to get started developing a game engine in HTML and Javascript, read on.

My first example is a set of classes for implementing a top-down, tile-based map screen that scrolls to follow the player’s movement. If you, like me, wasted your youth playing 8-bit and 16-bit console RPGs (like Dragon Warrior, Ultima, and my favorite under-appreciated classic: Phantasy Star) then this ought to look a bit familiar:

Old-School RPG Map Demo

Move the character around with the arrow keys, and notice how the screen scrolls when you get close to the edge.

 

Better mental hygene with Firefox profiles

I admit it: I have problems staying focused sometimes. I work on the Web all day, and the Web is full of distractions. The Firefox awesome bar doesn’t help matters — all I have to do is type a couple of letters into the awesome bar and it shows me suggestions of all sorts of fascinating, amusing, non-work-related websites. Total distraction is always just a few keystrokes away.

If only I could separate all my websites into ‘work’ websites and ‘fun’ websites, and somehow ensure that when I’m at work, Firefox only suggests the work websites, but when I’m at home, it suggests the fun websites.

Last week, I realized there’s actually a pretty easy way to do this, by splitting my Firefox profile into two profiles. It’s been working out pretty well for me so far; my random websurfing at work has gone way, way down.

Firefox profiles are an extremely powerful feature, but unfortunately many people who could make use of profiles don’t know they exist, because the interface to the feature is hidden. The rest of this post will walk you through the steps to enable profiles, split your profile into a ‘work’ and a ‘fun’ profile, and then purge all of the non-work-related stuff out of the ‘work’ profile.

 

Changing Ubiquity Starting Keystrokes

WordPress tells me that the fourth most common search string that leads people to this site is “changing ubiquity starting keystrokes”. Huh. That’s interesting. The fact that it’s such a common question probably means that the feature is too hard to discover. But as long as people are asking it, maybe this site should, you know, answer it or something.

Do the “Help” command in Ubiquity. A page will open; in the upper-left corner of this page there is a widget for setting they keystroke combination that activates Ubiquity.

If you can’t bring Ubiquity up, because its default keystroke combination doesn’t work on your computer for whatever reason, then you can get to the same page by typing about:ubiquity into your URL bar.

Hope that helps.

 

Making Prototypes with Canvas

For my second Design Challenge tutorial session, I did a presentation on how to make interactive prototypes with Canvas. After all, not every prototype needs to be done as a Firefox extension. Canvas prototypes are far quicker and easier to make, and although more limited, are also more flexible in some ways.

What’s Canvas? Canvas is an HTML tag, part of the HTML 5 standard:

<canvas></canvas>

By itself, it does nothing. But Javascript running in the page can treat the Canvas element as a freeform drawing area, and dynamically fill it with whatever combination of graphics and text you want. Things that would previously require a plugin like Flash, such as freeform animation and interactivity (although not sound), can be done easily in Canvas.

The advantage is that you can draw to the Canvas using Javascript, a language you probably already know if you’re a web developer, instead of learning a new domain-specific plugin language. Users of your page can interact with it without needing to have any plugins installed, and since it’s all part of the page they can see the source code simply by choosing “View Source”. (Though the last can be either an advantage or a drawback, depending on whether you intend to be open-source or not…)

Here are some examples of cool things you can do with Canvas:

• Bespin is entirely done in Canvas.
• I did these Pie Menu prototypes in Canvas.
• This tutorial shows you how to make a Breakout game in Canvas.

One major drawback is that although Canvas works in Firefox, Opera, Safari, and Chrome, it is not yet supported by Internet Explorer. However, there are workarounds for this, such as Explorer Canvas.

Here are the presentation links:

• The video of me giving the presentation, on Vimeo. (Thanks, Pascal, for editing it.)
• A ZIP file containing the source files for the presentation.
• The text of the presentation, in web-page form.
• The Developer.mozilla.org Canvas tutorial, to which I owe pretty much all my own knowledge of the subject.

The presentation is aimed at total beginners, so you should be able to get something out of it even if you barely know any Javascript yet.

 

Stupid Extension Tricks

Back in — oh, I think it was around 1991 — I had a book called Stupid Mac Tricks, which came with a 3.25 inch floppy disk of INIT files that you could drop into the System Folder on your (or your victim’s) Mac to make it do strange, funny, annoying, and useless things. It was a cool demonstration of what the Mac was capable of, and it inspired me (at age 11) to start on the road to hackerdom.

Stupid Mac Tricks was the inspiration for a presentation I did last Monday for the Design Challenge. It featured the following extensions:

1. Menubar Madness, which turns all your menus names backwards.
2. Dodgy Navbar, which makes the buttons in your navigation bar randomly reorder themselves when you click on them.
3. Kittens Everywhere, which replaces every image on the web with random LOLcats images.
4. Bookmarks and Preferences, which… actually, this one doesn’t do anything too wacky, it just shows how an extension can set bookmarks and preferences.

For each extension, I took the students through the source code, explained how it worked, and had them do a few simple modifications on each one to get a little hands-on experience. Even though you would never want to, you know, install any of these extensions (at least not on any copy of Firefox you want to be able to actually use…), each one demonstrates techniques that are very useful for advanced extension development. My intention was to make a follow-up to Myk’s Extension Development Bootcamp. Techniques demonstrated include dynamic manipulation of both the XUL and HTML DOM trees, using XPCOM, setting up event handlers, using overlays to replace attributes of XUL elements, using DOM Inspector to find elements you want to overlay, running code on page load, and using XmlHttpRequest. That’s a lot of stuff! I probably erred on the side of trying to cram too many contents into one presentation.

Oh well. It’s all online now, so you can peruse it if you’re interested in learning more about extension development. Here’s the links:

• The web page of the presentation
• All the extension source code files plus documentation in one download
• The video of me giving the presentation, on Vimeo (Thanks Pascal for editing this).
• all of the Design Challenge seminar videos on one page

 

Extension Development Boot Camp

Labs is currently running a Design Challenge, in which design students from around the world are taking their ideas for the interfaces of the future from the initial concept through to a working prototype.

We’re doing a series of web seminars to help these students learn the skills they’ll need to complete their prototypes.

One of these tutorial sessions, taught by Myk Melez, is now up on the web in video form for public consumption:

Extension Bootcamp: Zero to Hello World! in 45 Minutes

If you’ve ever been interested in writing a Firefox extension, but never knew how to get started, then this is the one for you. Despite the title, it’s actually over 90 minutes long. Nevertheless, I highly recommend finding 90 spare minutes to follow along with Myk’s awesomely thorough tutorial. I honestly don’t think there’s ever been a better way to learn the basics of extension development.

 

Weaving Your Own

We talk a lot about Ubiquity being easy to extend, what with the ease of writing your own commands and so on.

But did you know that Weave is also built to be extended?

Weave uses a generic syncing algorithm which uses plug-ins called Engines to handle different data types. The following engines are built into Weave:

• Bookmarks (fully functional)
• History (fully functional)
• Stored Passwords (currently being revamped for 0.3)
• Tabs (being revamped)
• Form Field Entries (being revamped)
• Cookies (being revamped)

But since the syncing algorithm is fully generic, it will work with any data you give it. Therefore, you can write a sync engine to synchronize any data you want, as long as that data is accessible from Mozilla extension javascript. Your sync engine just has to extend some existing Javascript prototypes and add some logic for reading, writing, and updating your data type. The Weave core will do the rest.

It’s more work than writing a Ubiquity command, but not as much as writing a whole new extension.

Last night I finished writing the Weave client-side API documentation that describes, in excruciating detail, how to write your own sync engine.

I hope having this API documented will inspire some people to try their hand at weaving together their own data types!

(If there’s any part of the documentation that doesn’t make sense, leave a comment or visit #weave on irc.mozilla.org and let us know how it could be made clearer.)

 

Ubiquity command development tutorial part 1

This is a tutorial I made to walk new command developers through the process of writing a Ubiquity command and sharing it on the Web.

Ubiquity Command Development Tutorial 1 (on Vimeo).

You’ll notice that I break my own rule here and give the command a hyphenated name. That’s because I did the recording several weeks ago, before I started working on the naming conventions stuff, and only today got around to finishing the video editing. I’ll fix the command’s name when I make part 2 of the tutorial, which will explain how to use noun-types, asynchronous requests, and other advanced stuff.

EDIT: If the vimeo link above doesn’t work for you, try this one instead.