Game On 2010 – a preview of my HTML 5 webapp, Pencilbox

Hey, Game On 2010 contest participants — how are those HTML 5 games coming along? I can’t wait for January 2010 when I can finally see what you’ve made.

I’ve been doing some HTML 5 experimentation of my own. What I’m working on is not a game, but it is a graphical HTML 5 webapp that uses several tricks that may be of interest to game developers. It’s easier to show it in action than to tell you about it, so watch this video (hosted on Vimeo since WordPress won’t let me embed) for a preview of Pencilbox and an explanation of how it works.

Note: this is not a Mozilla project — this is a personal project I’ve been hacking on in my free time.

I’m not yet ready to put the app itself on a public webserver where you can play with it, nor have I set up a public code repository yet. (Like I said, it’s a side project, so I haven’t had time to work on the infrastructure stuff.) When I do have it set up properly, I’ll let you know. In the meantime, here’s a tarball of the source code, which is under a Mozilla tri-license. It may be of some interest if you wish to achieve a similar effect in your Game On 2010 submission and you want to see how I did it.

Happy hacking!

 

Pie Menu evolves into Grid Menu!

Response to my post about pie menus was overwhelming! There were way too many comments for me to reply to each one individually, so instead I’ll respond to the general ideas in follow-up posts.

I’ve put up a new and improved pie menu demo that solves some of the usability problems with the previous version. Although, given the shape, perhaps “Grid Menu” might be a more descriptive name for this new style.

This version solves the following problems that people pointed out in the previous version:

1. It’s difficult to lay out text in pie wedges: this version uses squares. It’s still the case that every item is just a short movement in a unique direction from the starting point, so the benefits of the circular menu are still preserved.
2. The number of items can grow without bound, but usability suffers with more than eight choices: this version can handle hierachical sub-menus (and sub-sub-menus). Try mousing over the item in the bottom-right of the menu to see this in action.
3. Some items are unreachable if the pie menu is invoked near the edge of the screen: this version pushes the menu grid inward from the edge so that all items stay visible.
4. Many people aren’t used to holding the mouse button down while navigating the menu: this version respects click-move-click style interaction in addition to click-drag-release style interaction.

I’ve also added the names and icons of some actual Ubiquity commands, just to make the demo look more like what you might see in an upcoming version of Ubiquity — if we decide to include it.

Still a problem: if the original menu is invoked too close to the bottom-right of the area, there is sometimes not room for the sub-menu or sub-sub-menu. I’ll need to come up with a smarter positioning algorithm in order to deal with this problem.

You can try out new demo here.

 

Pie In The Sky

This blog post is a hands-on experiment. If you have Firefox 3, before you read any further, please go to this page and try out the demo.

(Unfortunately, the demo will only work in Firefox 3.0 and later, because it uses some cutting-edge features of the Canvas object that aren’t supported in Internet Explorer, Safari, or older versions of Firefox. I believe strongly in presenting web content in a cross-browser compatible way, but sometimes for feature demos, requiring Firefox is unavoidable. This is Mozilla labs, after all.)

Anyway, the demo presented two different styles of pop-up menus and asked you to repeatedly select the same menu item.

Which menu style made the task easier? Why do you think that was?