Tag / wiiflash

by Matt

SCOMaster – WiiFlash mulitplayer learning game

SCOMaster screen shot

After a week and a half I finally finished my first real WiiFlash game – SCOMaster. It’s a competative, 2 player learning game designed to be played in a group setting. It illustrates the concepts of assembling a course in an LMS system. Bonus points are awarded for content reuse – they are SCOs after all! Unneeded objects and faulty objects can be sent back to the development team to be reworked – but at a cost.First one to build a completed activity tree wins.

Ben Hutchens, our graphic designer, created the art work for it. It took about 60 hours to program it using the WiiFlash classes that I had developed earlier in the year.

by Matt

WiiFlash Tip #4 – Revisiting Wii-mouse in a multiplayer scenario

In February, I posted about using the Wii remote as a virtual mouse in Flash. While that approach seems to work just fine in a simple single player application, I found that it breaks really badly when you another player to it. I just completed my first two player WiiFlash game and I’ll document a few things that I had to differently.

Originally,  based all of the interaction with the cursors off of the typical mouse events (rollover, rollout, etc.), but this did allow for find out which player rollover the sprite or which player “clicked” on the sprite.

Each player’s cursor is just a sprite itself, so I switched to using the hitTestObject function against each players cursor sprite and the object sprite on a mouse event. This returns which of the cursors interacted with the object. Additionally, since the cursor sprites are big, you do have to see them from a distance, I found that I needed to add an additional sprite to the cursor – the cursor “point” – at 0,0 and use that for the hitTest rather than the actual big cursor sprite. If the “tail” of the cursor arrow is still over the object sprite, you shouldn’t count that as a roll over, since the point of the arrow is the important part.

So here are the functions for a rollover:

 private function onItemOver(e:MouseEvent):void {
var wm:Array = whichWiiMotesAreOverMe(Sprite(e.target))
for (var i:int = 0; i < wm.length; i++) {
_WiiMotes[wm[i]].doRumbleSeconds(.1);
_WiiMotes[wm[i]].cursorState = WiiCursorView.CURSOR_POINT;
}
}

// returns array of which wiimote cursors are over the sprite
private function whichWiiMotesAreOverMe(tgt:Sprite):Array {
var a:Array = new Array();
// _WiiMotes is an array of Wii controller objects
for (var i:int; i < _WiiMotes.length; i++) {
if (tgt.hitTestObject(_WiiMotes[i].cursorPoint)) {
a.push(i);
}
}
return a;
}

The functions for a mousedown are:

private function onItemDown(e:MouseEvent):void {
// gets the index of the _WiiMote object that clicked the sprite
var wm:int = whichWiiMoteClickedMe(Sprite(e.target));
}

// returns index of which wii mote cursor is over with the A button down
private function whichWiiMoteClickedMe(tgt:Sprite):int {
var wm:Array = whichWiiMotesAreOverMe(tgt);
for (var i:int = 0; i < wm.length; i++) {
if (tgt.hitTestObject(_WiiMotes[wm[i]].cursorPoint)) {
if (wm.length == 1) {
// simple test if only one cursor is over
if(_WiiMotes[wm[i]].isADown) return wm[i];
} else {
// little harder if 2+ are over, _LastClickWMIdx is the last Wii mote to have pressed a button
if(_WiiMotes[wm[i]].isADown && _LastClickWMIdx==wm[i]) return wm[i];
}
}
}
return -1;
}

This method, while probably not the best way, turned out to work really well in the game.

by Matt

WiiFlash Tip #2 – Smoothing out the edges

This is tip #2 in my series on WiiFlash.

Once you have data coming in the from a Wii controller, the first thing you’ll notice is how precise it is. I don’t have it in front of me, but the precision goes about 15 places past the decimal (4.042584267432343…). If you just convert the data from radians to degrees, WiimoteObj.roll*(180 / Math.PI), and apply it to a sprite with an enter frame event, you’ll see it wobble all like mad.

There are two things that you must smooth out to best use the Wii controller – the roll, pitch and yaw of the controller, and the animation of the Wii mouse pointer.

1 – Smoothing Roll, Pitch and Yaw Data

I’m only going to demonstrate for the roll value – it’s the same for pitch and yaw. There are probably numerous ways to optimize this code, but it’s working me right now. My method involves comparing the current value to the last value and checking to see if it’s outside of a tolerance value. If so, then the value is updated, if not, then it’s ignored. I’ve found that 10 degrees works well for me, but you can change it depending on how precise you need it to be. This code assumes that you have an instance of the Wiimote class, WiimoteObj, and have the listeners set up to call the updateWiiMoteData function when the WiimoteEvent.UPDATE event occurs.

private var WiiMPitchDeg:int;
private var WiiMPitchDegPrev:int;
// to convert radians to degrees
private static const TO_DEG:Number = 180 / Math.PI;
// smoothes out roll, pitch and yaw values, smaller = more precision
private static const WIGGLE_TOL:int = 10;

private function updateWiiMoteData(pEvt:WiimoteEvent):void {
WiiMRollDeg = int(WiimoteObj.roll*TO_DEG);
var rDelta:Number = Math.abs(Math.abs(WiiMRollDegPrev) – Math.abs(WiiMRollDeg));
if(rDelta < WIGGLE_TOL) WiiMRollDeg = WiiMRollDegPrev;
}

As you can see it’s pretty simple and works well.

2 – Smoothing out the Wii mouse cursor

This one is very easy. All that you need to do is to slightly tween your cursor sprite from it’s current location to the location that the Wii more is pointing to. Here’s my function, same assumptions as above. wiiPoint is a Point object containing the location you calculated for where the controller is pointing to. I’m using Tweener for the animation.

 private function updateCursor():void {
var newx:int = 0;
var newy:int = 0;
var newr:int = 0;
try {
newx = wiiPoint.x;
newy = wiiPoint.y;
newr = WiimoteObj.roll;
} catch (e:*) {
// no good data – the ‘mote hasn’t seen the IR points
newx = 0;
newy = 0;
newr = 0;
}
Tweener.addTween(CursorSprite, {x:newx, y:newy, rotation:newr, time:.1, transition:”easeOutQuad” } );
}

For your VirtualMouse object, be sure to set it’s x and y properties to the location of the cursor sprite, not where your code says the Wii is pointing at.