Leap Motion + Android

Introduction

Thanks for the hints of using node.js server as proxy. I have come up to a smooth acceptable solution to make LeapMotion work on Android (indirectly).

Pre-requisites

  - A PC or a Mac with npm as the "PROXY"
  - npm install binaryjs
  - npm install sleep
  - An Android device with Wi-fi capability ("DEVICE")
  - Leap Motion device ("LEAP MOTION") connected to the "PROXY"
  - Wi-fi LAN connection between the "DEVICE" and "PROXY"

The basic idea of this solution is to use the PROXY to make the impossible (Android+LeapMotion) to become possible. The PROXY will read the data from LEAP MOTION using the Javascript SDK and stream (ya, it's streaming rather than posting) the data to node.js instance running on it.

The DEVICE will connect to the PROXY and stream (ya, it's again streaming rather than polling) the hand position data and present it as a red circle on screen.

Step-by-step guide

1. Download the PROXY project here

2. Extract the project

3. Run in on your instance of node.js server on your PC or Mac (e.g. `node index.js`)

4. Mark down the IP of the PROXY

5. Open your browser (Chrome and Safari are proven working) and browse `http://localhost:5000` to verify it is running

6. Download the Android project for your DEVICE here

7. Import the project in ADT

8. Open strings.xml to modify the IP address to the IP address of PROXY

9. Run the project on YOUR DEVICE

10. Move your hand above the LEAP MOTION and see the red circle moving according to your hand's direction

Enjoy!

Designing the "engine"

After knowing how to invoke the application, it's time to have a detailed plan to get things done. The Canvas of the MXML should contain a UIComponent to hold the IsoView of the as3isolib. The view serves as a viewport which is movable around the scenes inside. To make it simple, there's always only one IsoScene inside the view. Inside the scene, there'll be a background, grid (for dragging) and buildings loaded from database.

All graphics are saved in separate SWF files. I prepared a class called "DynamicLoader" which looks up a class from different SWF files. For example, when I say I need the movie clip of a building called "building.WoodHouse", the instance will find and load the movie clip from "building.swf" and invoke a callback with the loaded MovieClip object. "DynamicLoader" is a singleton which contains a mapping indicating which prefix a SWF file represents.

To display buildings inside the scene, I created a class, IsoBuilding, a subclass of IsoBox. Its constructor requires a parameter which contains the attributes a building. When IsoBuilding is instantiated, it uses DynamicLoader to load the MovieClip and provides a callback to DynamicLoader. Once the loading is completed, the callback is invoked, the MovieClip will be added to an IsoSprite as an attribute of IsoBuilding object.

Getting started with as3isolib

This is not only about as3isolib but also the whole game built on ActionScript 3.0.

It's been 3 months since kickstarting with as3isolib. It's cool that it's free, it's open source and many people use it. My aim is to build an isometric social game. It's always the most difficult to start from scratch. I didn't know anything about Flash/ActionScript 3.0 before then. What I knew was Java EE, JDBC, Javascript and HTML. When you want to do something and you really do something to achieve it, one day you will make it. So let's start to see how it works.

Tools

If you want to do something well, you must have good tools. Luckily I developed my previous projects on Eclipse IDE and I found that there's a plugin called Flash Builder. I just googled it, downloaded it and get it installed. Then the problem comes when I was confused with "Flex project", "Flash professional project" and etc. And very soon I found that "Flex project" is a better choice that it supports RPC while no "Flash Professional" is needed.

As my aim is to build a social game, it would be better to have data interchange pipeline with a back-end to store user data. There are several ways getting it done, say "HTTP", "AMF" and etc. In the earlier stage I tried out HTTP but very soon I found the configuration costs a lot of time for every new class I create. Then I switched to "AMF", which is Adobe Message Format. There are several data service I can choose to integrate with my JavaEE back-end, say "BlazeDS", "GraniteDS" etc. I gave myself 1 day to look into each and successfully setup "BlazeDS" on my Tomcat 5.5. It just works.

Entry point

Immediately after creating the Flex project, I got my main MXML file named as "Main.mxml". It consists of a Canvas. I tried to run it, it shows me a blank screen. That means it works. By adding a createComplete event handler to the MXML, I implemented my first ActionScript function which contanis a "trace()". When I ran it, nowhere shows a message. And it takes me several hours to find out that I need 2 tools: Firefox and Flash Player Debugger. Before that I used Chrome as my default browser and found that the Flash Builder just couldn't connect to the Flash Player Debugger. Anyways, get these tools ready and I see my first "trace()"