In this tutorial we will go over how to use the LeapMotion plugin for Kiwi.JS. It requires you to have a Leap Motion Controller. To set up your Leap Motion Controller please visit leapmotion.com/setup. This tutorial will cover downloading and installing the plugin into your game and some of the basic functions it provides. Shown below is a simple game using the LeapMotion plugin.
Below is a game where you control a plane with your hand and try to dodge missiles that are being launched from the right.
Download the source code for this tutorial here
Downloading and Adding the Plugin
Download the Leap Motion Plugin from here. Once you have downloaded the plugin, extract the contents of the folder to the location of your game (We recommend keeping all of your plugins in a separate plugin folder). Inside the LeapMotion folder you will find two Javascript files, a readme.txt file, and an example folder. Inside the readme.txt is an overview of the plugin and how it works. We will be using the leapMotion-0.1.3 file for our game as it contains the plugin. There is also a minified version of the plugin if you prefer.
We first need to add the leap.js library and the LEAPController plugin to our game in the html file.
|
1 |
<script src="http://js.leapmotion.com/leap-0.6.0.js"></script> |
|
1 |
<script src="plugins/LeapMotion/LeapMotion-0.1.3.js"></script> |
We also need to call the plugin in our game’s options variable. Here we specify that we are using one plugin which is called ‘LeapMotion’, which corresponds to the unique name located inside the plugin. This will boot the plugun and add it to our game so we can access it easily.
|
1 |
var myGame = new Kiwi.Game( '', 'myGame', myState, { plugins:’LeapMotion’] } ); |
Now that we have added our LeapMotion plugin let us look at how to start using it!
Creating a Controller
The first thing we need to do is initialize the controller object. We will initialize this controller inside of the create method of a Kiwi.State. This object keeps track of all of the data sent from the Leap Motion Controller to the computer.
|
1 |
this.myControl = Kiwi.Plugins.LeapController.createController(); |
Once the controller has been initialized it keeps track of the location of both hands and fingers that are in front of the Leap Motion Controller.
Using a Hand Object
To use the values of a hand object you have access the specific hand you want inside the hands array of the controller object.
|
1 2 |
this.myControl.hands[0].posX this.myControl.hands[0].posY |
This will return values of the x and y position of the first hand in the hands array.
Using a Pointable (Finger) Object
Pointable object are very similar to a Hand Object. The main difference between the two is that the pointable object belongs to a hand. Therefore to access a pointable object you have to specify which hand that the pointable object belongs to and access it from there. Below is an example on how you would access the x and y properties of a finger on the second hand.
|
1 2 |
this.myControl.hands[1].pointables[2].tipX this.myControl.hands[1].pointables[2].tipY |
Just for Fun!
If you are looking for something a bit more challenging you can try to rotate the plane in the game so it’s the same as the rotation of your hand!
Keep in mind that both hands[0] and hands[0].pointables[2] may or may not be present — if the user doesn’t put their hand into the detection region, it won’t be in the array, and if the Leap Motion controller doesn’t detect more than one finger, there may not be two pointables in the region.
Also, you may want to qualify your control item by position — the hand closest to the center, or the right, or the pointable closest to the screen (by position[2] == z).
Thanks for the comment Dave.
We are currently working on qualifying the position of the hand. I am thinking of implementing a sector object which would detect if a hand in currently inside. This would hopefully make multi-hand support easy to implement. This plugin is still being developed so we still have lots to do.