Wii Internet Channel and Nintendo DS/DSi Browser Homebrew

The popular Wii Opera SDK has been opened to the general public by popular demand, allowing anyone with knowledge in HTML and JavaScript to take on the task of creating homebrew games and software for the Wii's Internet Channel. Previous to this release, the Wii Opera SDK was only available by request.

For the past eight months, this software library has grown from a simple Wii Remote reader to a full-blown package that allows 3D and texture-mapped graphics and multiuser communication in the Opera-based Web browser known simply as the Internet Channel. In addition, the Wii Opera SDK was the first such software library of any type which read from all four Wii Remotes and the Nunchuk attachments for the second through fourth Wii Remotes. It was also the first to include limited motion sensing based on the pointer control.

Although its main focus is the Wii, everything in the SDK, with the exception of the Wii Remote interaction, will work in any modern Web browser that supports the canvas tag, meaning games and software can be developed and used by millions more!

The first game playable by the general public that makes use of the Wii Opera SDK is HullBreach Online, which is showcased at http://hullbreachonline.com , the SDK's home site. Several viewable demos and the SDK itself can be found at http://hullbreachonline.com/wii/sdk.html .

-- end --

Did you know that games with advanced graphics and controls are possible on the Wii's Internet Channel (Opera 9.0) using nothing but HTML and efficiently-coded Javascript? I'm not talking about Pong, either. I'm referring to games with graphics that rival those of Starfox for the SuperNES or the original Wolfenstein 3D for the PC. This is the first in a three-part article that will help you achieve just that. This article focuses on thinking in the mindset of optimizing your Javascript code as much as possible for both speed and memory in areas specific to the Wii. Articles already exist on the Wii Remote and the canvas object, so I will not spent a great deal of time on the specifics of those but will dive right into the meat of the topic.

Integer Math

Whenever time-critical calculations must be made, it is a good idea to work in integer-only math. (Plus, pixels are integer coordinates, anyways.) Since javascript variables are all of one type, there is no specific integer variable, so tricks must be employed to pull the extra speed boost from integer calculations over floating-point ones. There are a few ways to do this:

scale = Math.floor((x2-x1)/img.width);
scale = ((x2-x1)/img.width)>>0;
scale = ((x2-x1)/img.width)|0;

For calculations of our needs, always avoid the first example. Javascript's built-in Math class is very slow compared to bit shifts or bit comparisons. If all values are integers already, then conversions are only needed on divides. For rounding numbers, add half of the denominator to the numerator before dividing. The second example leads us into bit shifting over division and multiplications. Divides (and to a lesser extant: multiplies) can be processor-intensive when used repeatedly, so always use bit-shifts when an integer is going to be multiplied or divided by a power of two, like so:

centerx = (x1+x2)/2;
centerx = (x1+x2)>>1;

Inner-Loop Optimization

With pixel and scanline plotting, there will almost always be some kind of looping structure that passes between two bounds to complete a final image on the screen. These will always be time-critical when animations and interactions are concerned. Take the wall texture-mapping example below (which will be covered in-depth in a future article):

while(Math.abs(tempX)<=absdx){
destH2 = (destH*tempX+dy1)|0;
this.context.drawImage(img, (sourceX*tempX/destH2)|0, 0, 1, sourceH, tempX+x1, (destY*tempX+y1)|0, absscale, destH2);
tempX+=fullscale;
}

Most of the variable calculations were moved outside the loop, leaving only the ones that absolutely had to be recalculated on each iteration of tempX, which is the scanline variable. Other tricks for speed boosts include avoiding global and outside-scope variables if at-all possible (No, it was not possible to avoid this.context.drawImage.) because javascript checks for the narrowest scoped variable of the given name first, then progressively broadens, leading to slowdowns.

Memory Optimization

The Wii has considerably less RAM than today's home computers, plus it lacks virtual memory, meaning the free RAM it has is the absolute limit. There are many ways to reduce the RAM footprint to avoid the dreaded out-of-memory system hang. Below is a list of those optimizations and examples, starting with the most beneficial:

Image Resolution - When texturing, why use an image that's larger than the canvas?
Image Compression - Choose a format that best fits the job based on bitdepth, transparency, and clarity.
Garbase Collection - When an array is no longer needed, null it.
Imported Code - If you're not using all functions in a file, create a new file with just what's needed.
Code Efficiency - Compact code as much as possible
Whitespace - Avoid excessive whitespace between lines

Graphical Optimization

This Wii also is slow than many of today's home computers, so any tweaks to graphics that increase speed is greatly beneficial. Below are some examples of such optimizations in no particular order:

Opacity - Avoid opacity unless it is absolutely needed.
Z-Sorting - Sorting as little as 100 polygons inefficiently can be very noticeable.
Hidden Surfaces - Skip drawing elements that are outside bounds or facing away.
Image Resolution - Use low-res images if higher-res ones are not absolutely needed.
Page Layout - Avoid repeated page layout changes like motion, hiding, z-index changes, etc.

Closing

I've gathered some of these optimization techniques over the years, but most have come from the School of Hard Knocks while developing the Wii Opera SDK. As I find more tweaks, I will be sure to include them in future articles. Thank you for taking time to read this. I will see you next time in the second article of the series which will focus on plotting solid triangles in 3D space on a canvas.

--Daniel Gump, HullBreachOnline.com

*** Press Release ***

Valparaiso, FL
21 Aug 2007

The Wii Opera SDK has been gaining much popularity over the past few months for its ability to greatly aid programmers in creating high-quality, advanced games for the Nintendo Wii's Internet Channel. As of 21 Aug 2007, these are the functionalities the Wii Opera SDK allows developers of Internet Channel Javascript games to have in their projects:

Wii Remote and Nunchuk Detection
- A, B, +, -, <, >, ^, v, 2, for all Wii Remotes
- 1, C, Z, for all Wii Remotes except the primary
- Cursor coordinates for all Wii Remotes
- Z tilt for all Wii Remotes
- Z position for all Wii Remotes

General Graphics
- Geometric primitive drawing and filling
- Image rotation and scaling
- Clipping and masking

Texture-Mapping
- Z-corrected wall texturing
- Z-corrected floor texturing
- Sphere texturing (too slow for games at the moment)

3D Math
- Triangle and rectangle polygon manipulation
- Fast Z-sorting
- 3D to 2D projection
- Auto-clipping
- Hidden surface removal
- Scene or object rotation, scaling, and moving

Multiuser Environments
- Virtually unlimited online players in a game
- Database access for each game
- User-definited variable length arrays for communication

There are currently no other development kits in existence for creating Internet Channel games of the caliber possible with the Wii Opera SDK. Those interested in taking part in the project or creating a project of their own using the SDK can contact the development team at http://hullbreachonline.com/wii/sdk.html.

-Daniel Gump, hullbreachonline.com

*** End ***

This is just a quick update, but I feel it's worth posting: The Wii Software Gallery main page has been slightly updated with the following changes:

- Updated thumbnail images for the Wii Opera SDK and Spacefox: Dogfighting
- A now-active link to the preview of Spacefox: Dogfighting

Well, that's it for now. More work will be done Sunday, so stay tuned!

This is the first blog for the Wii Opera SDK group at My Opera, so I thought I'd start with a status report on the SDK as of today:

So far the SDK has classes for the following:
- Wii Remote button press detection
- Cursor detection
- 3D polygon rotation and moving
- Z-sorting
- Hidden surface detection
- Canvas drawing
- Wireframe and filled triangles and quadrilaterals
- Geometric primitives
- Sphere-mapping (very very slow at the moment)
- Image placement and rotation

Items in the process of being added:
- Wii Remote gesture recognition
- Tiled graphics
- Multiuser communication
- Database savestates for software
- Texture-mapping for triangles, quadrilaterals, and walls
- Gaurad shading

You can read some information on the SDK at http://hullbreachonline.com/wii/sdk.html and see a Starfox demo at http://hullbreachonline.com/wii/canvas.html meant for desktop testing and a simple one controlled with the Wii Remote at http://hullbreachonline.com/wii/spacefox.html.