Using the Leap Motion Controller Plugin

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 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.

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.

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.

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.

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.

 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!

Hint: Try using the roll, pitch or yaw properties of a hand object.
Share the joy
Comments 4
  1. 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).

  2. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">