Mon 15 August 2011

Using Javascript to control the Nintendo Wii

The Nintendo Wii was released around the end of 2006. That's a solid four years now; an amazing amount of time in the lifespan of a technological device these days. Often overlooked is the fact that the Wii has a web browser, which is in fact a build of Opera, offering support for canvas, CSS3, and more advanced aspects of HTML5. This should be incredible; why does nobody develop more for it?

The Ugly Truth

The chief portion is the target market; with so many internet enabled devices laying around these days, the Wii's browsing experience is one that tends to fall a little short. This was further compounded by a small incident wherein, once the Wii's browser was released, an article went up on Opera's official website about responding to Wii remote commands in Javascript - Nintendo later demanded that they take it down, and to this date I've never seen any official reasoning put forth by either company.

With that said, I don't think the Wii (and the browser therein) are 100% lost potential. One of my goals in life is to examine and improve the methods with which we teach programming to children, and I believe the Wii can work very well for these purposes. Typically, young children don't have their own computers, and from what I've found the recurring issue here is that when they're using their parents computers, they don't have creative freedom to do something that carries with it the idea of being possibly "destructive".

The Wii, on the other hand, is generally thought of as the "kids" device - it has a limited set of functionality that kids grasp pretty well right off the bat, and coupled with the concept of "ownership" they'd get out of this device it stands to reason they're more likely to experiment on it.

There used to be various Wii javascript libraries/SDKs laying around, but most of them are woefully incomplete or no longer available. So with that all in mind, I set out to build a library that allows simple, easy, event-based interaction with the Wii's browser, hiding away the somewhat insane complexities of reading the remote codes.

Enter: wii-js

You can check out wii-js over on GitHub; it's entirely open source and released under an MIT-style license. While the repository has in-depth documentation of library usage, check out the example below and see how simple this has become:

 *    Two wii remote instances; first one tracks the first
 *    controller (held horizontally), the second one tracks
 *    the second controller (held vertically).
var wiimote = new Wii.Remote(1, {horizontal: true}), 
    wiimote2 = new Wii.Remote(2, {horizontal: false});

 *    Listen for the "A button pressed" event on each wiimote.
wiimote.when('pressed_a', function() {
    alert('Wii Remote #1 pressed A!');

wiimote2.when('pressed_a', function() {
    alert('Wii Remote #2 pressed A!');

 *    Start the system!

This example showcases how to set up basic controller instances, and respond to events that they fire. Most button combinations are supported (check the docs on GitHub for up-to-date event listings), but sadly this library can only work with the actual Wii-remote. Nintendo (or Opera, it's unknown who) opted not to provide controller mappings for anything else, be it classic controllers or Gamecube controllers. All Wii remote instances, with the exception of the first one, can get controller events from the nunchuk; there doesn't appear to be a way around this, which is nothing short of a shame.

That said, even with these limitations, it remains a pretty versatile library. The next steps for it are bundling in some basic sound/game engine support to make it even easier for kids to jump in and create. Follow the project on GitHub to see updates!

A Note About Performance

Sadly, the Wii isn't the most performant device. It has significantly less memory than most devices on the market today; due to this, it's possible to get under-performant pretty quickly. While it does support the canvas element, it appears you can't force a repaint any faster than in 100ms intervals - anything lower and the Wii begins to choke repeatedly. This isn't really fast enough for games; canvas may be useful for other techniques, but for the most part any game engine that's done outside of Flash needs to be using HTML or SVG. SVG seems promising in recent tests, and it has a side benefit of reacting to DOM events like HTML based scenarios do.

Opera on the Wii also appears to have some level of support for Server-Sent Events, which could possibly prove useful for enabling lightweight two player interaction. The performance considerations here are currently unknown at this time.

The Future

Nintendo recently announced their new console, the Wii U. Whether it will keep the Opera web browser is anyone's guess; it's worth noting that the new 3DS replaced the Opera browser used on previous DS incarnations with an engine similar to that of the PSP. There aren't too many usage metrics which we can use to draw predictions from, either, so at the moment it's a bit of "wait and see".

I'm going to continue developing the library and concepts surrounding it during my free time, and ideally want to try teaching a small class or two once I've further refined it. If you're interested in helping out, fork away on GitHub!

Ryan around the Web