Only a few days after I tweeted about porting Gamepad over to haXe, I see a tweet from Philippe Elsass saying he has added an on-screen joystick to the library. This is great, because it was the next thing on my list after sorting out some issues with getting accelerometer data from my Android device with NME. Open-source is fantastic btw!

I just merged this update with my main branch on GitHub and had a good play, so thought I would give a quick run down on how to use it. Philippe has done a great job, so it’s pretty simple, but even looking at his code has taught me quite a bit about haxe.

First thing you need a Gamepad instance

[actionscript3]var gamePad:Gamepad = new Gamepad(stage, false, 0.4);[/actionscript3]

Then you need something to control with the joystick, a Car possibly:

[actionscript3]var car:Sprite = new Sprite();
car.graphics.beginFill(0xFF6600, 1);
car.graphics.drawRect(-25, -50, 50, 100);
car.graphics.endFill();
car.x = 300;
car.y = 200;
addChild(car);[/actionscript3]

Before we can create the on-screen joypad, we need to get some graphics ready to use for the controls. We need a background and a thumb to touch or click on and drag around.

[actionscript3]var thumb:Sprite = new Sprite();
thumb.graphics.beginFill(0xFF6600);
thumb.graphics.drawCircle(25,25,25);
var bg:Sprite = new Shape();
bg.graphics.beginFill(0xFF6600, 0.3);
bg.graphics.drawCircle(50, 50, 50);[/actionscript3]

Now we can add the on-screen joypad and pass the gamepad, and the two graphic assets to it.

[actionscript3]var gamePadView:OnScreenJoystick = new OnScreenJoystick();
gamePadView.init(gamePad, 50, thumb, bg);
gamePadView.x = 440;
gamePadView.y = 330;
addChild(gamePadView);[/actionscript3]

So now we have everything set up that we need. All we need to do is handle the update tick. The OnScreenJoystick needs its update method called to keep it in sync with the Gamepad. The OnScreenJoystick will automatically update the Gamepads properties, so we can use the Gamepad the same way we always do from this point.

[actionscript3]private function onTick():Void
{
gamePadView.update();

car.rotation += gamePad.x * -gamePad.y * 2;

var carAngle:Float = -car.rotation * (Math.PI / 180);
car.x += Math.sin(carAngle) * gamePad.y * 5;
car.y += Math.cos(carAngle) * gamePad.y * 5;
}[/actionscript3]

Now when you run the app you should have a car that you can drive around with your on-screen joystick. Easy!

All this example code is either from Iain Lobb’s original Gamepad testers or from Philippe Elsass’ modifications for the on-screen joystick. You can have a play for yourself with the Gamepad example tests, or get the source, which comes with the tests.