張子の虎をキー・タップすると頭が上下に動くLeap Motionプログラムを作る

2013年11月15日(金)
薬師寺 国安

プログラム・コード(MainWindow.xaml.vb)

では、次にプログラム・コード(MainWindows.xaml.vbファイル)を見ていきましょう。

コードは4回のコードと似通っている部分については割愛します。4回のコード説明を参照してください。異なる部分のみ解説します。

名前空間の読み込み

「Imports Leap」と「Imports System.Windows.Ink」名前空間の他に、Storyboardを使用するため「Imports System.Windows.Media.Animation」を読み込んでおきます。

メンバー変数の宣言

次にメンバー変数を宣言します。

「leap」、「touchIndicator」、「touchPoint」、「windowWidth」、「windowHeight」、「x」、「y」、「tx」、「ty」、「FingersCount」等のメンバー変数については4回と同じのため、そちらを参照してください。但し今回は、windowWidthを525、windowHeightを350で初期化しています。

モジュールの作成

VS2012メニューから[プロジェクト]−[モジュールの追加]と選択して、[名前]が「Module1.vb」という名前のモジュールを作成します(リスト3)。

リスト3 (Modeule1.vb)

1Imports System.Windows.Media.Animation
2 
3Module Module1
4  Public Index As Integer
5  Public strb As Storyboard
6End Module

MainWindow_Loadedメソッドの処理

4回と同じにつき割愛します、該当記事を参照してください。

Updateメソッドの処理

先頭に、

strb = TryCast(Me.Resources("Storyboard1"), Storyboard) ' strbに「Storyboard1」を取得して格納する

と記述し、モジュール変数strbに「Storyboard1」を取得して格納しておきます。

次にLeap Motionのタッチ処理になります。タッチのイメージは次の図4のようなイメージです。

Updateメソッドの処理(ホバー処理)

図4:Leap Motionのタッチ検出イメージ(Leap Motion SDKのAPIドキュメントから引用)(クリックで拡大)

まずホバーの場合は、表示されている円がBlueの色になります。タッチ・ポイントの位置をメンバー変数「x」と「y」に格納します。

画面に表示されている指の数をleap.Frame.Fingers.Countプロパティで取得して、メンバー変数「FingersCount」に格納しておきます(リスト3)。

リスト3 ホバー時の処理(MainWindow.xaml.vb)

01For Each Pointable As Pointable In leap.Frame.Pointables
02  ……コード略(前述)……
03  If Pointable.TouchDistance > 0 AndAlso Pointable.TouchZone <> Global.Leap.Pointable.Zone.ZONENONE Then
04         touchIndicator.Color = Colors.Blue
05  
06         x = touchPoint.X
07         y = touchPoint.Y
08         Index=0
09         FingersCount = leap.Frame.Fingers.Count' 表示されている指の本数を取得して、メンバー変数FingersCountに格納しておく
10  ……コード略(続きは後述)……
11  End If
12Next

次にタッチした処理になります。タッチした場合は、表示されている円が赤に変わります。

Updateメソッドの処理(タッチ処理)

指が1本認識されている場合は、虎の頭(head)部分の座標値を取得し、モジュール変数Indexを1で初期化します。その他の場合はIndexを0で初期化しストーリーボードを停止します(リスト4)。

リスト4 タッチとタッチ以外の処理(MainWindow.xaml.vb)

01If Pointable.TouchDistance > 0 AndAlso Pointable.TouchZone <> Global.Leap.Pointable.Zone.ZONENONE Then
02  ……コード略(前述)……
03  ElseIf Pointable.TouchDistance <= 0 Then
04   touchIndicator.Color = Colors.Red
05      If FingersCount = 1 Then
06                If x > head.GetValue(Canvas.LeftProperty) And x < head.GetValue(Canvas.LeftProperty) + head.Width AndAlso y > head.GetValue(Canvas.TopProperty) And y < head.GetValue(Canvas.TopProperty) + head.Height Then ' headの座標値を取得して、Indexを1で初期化する
07                  Index = 1
08                Else
09                  Index = 0
10                  strb.Stop()
11                End If
12              End If
13       Else
14              touchIndicator.Color = Colors.Gold
15              Index=0
16              strb.Stop()
17      End If
18    Next
19  End Sub

ここまでは、ポーリング処理になります。次にコールバック処理を記述します。

クラスの作成(TapDirection.vb)

では、次にクラスを作成していきます。ソリューション・エクスプローラー内のToraTapLeapMotionプロジェクトを選択して、マウスの右クリックで表示されるメニューから[追加]−[クラス]と選択します。表示される画面から[クラス]を選択し、[名前]に[TapDirection.vb] と指定して[追加]ボタンをタップします。

ScreenTapDirection.vbのプログラム・コード

Enum列挙体は値を定義するための入れ物として使用する、特殊なクラスです。列挙体が便利なのはプログラム中に入力候補が自動的に表示される点です。

TapDirection.vb列挙体の中に、Tapという値を入れておきます(リスト5参照)。

リスト5(TapDirection.vb) 列挙体を記述したコード

1Public Enum ScreenTapDirection
2  Tap
3End Enum

クラスの作成(LeapListener.vb)

次に、第1回でSwipeDirection.vbを作成した方法で、LeapListener.vbクラスを作成しますが、第1回のサンプルと同じコードが含まれているので第1回のLeapListener.vbクラスを使用します。

ソリューション・エクスプローラー内で、ToraTapLeapMotionプロジェクトを選択し、マウスの右クリックで表示されるメニューから、[追加]−[既存の項目]と選択して、第1回で作成しておいたLeapListener.vbを取り込みます。

以下、第1回のサンプルのLeapListener.vbと異なる点のみ解説します。

(1)OnConnectコールバックメソッド内で、GestureTypeにTYPEKEYTAPを指定します。
(2)OnFrameコールバックメソッド内で、GestureType.TYPESWIPEの個所を、GestureType.TYPKEYTAPに変更します。
(3)If (swipe.Direction.y > 0) ThenからEnd Ifまでを削除し

1If gst.Type = Gesture.GestureType.TYPEKEYTAP Then
2  TapAction(fingers, TapDirection.Tap)
3End If

と記述します。

(4)デリゲートのコードを「Public Delegate Sub TapEvent(ByVal sd As TapDirection)」と記述します。
(5)「Public Event LeapSwipe As SwipeEvent」の部分を「Public Event LeapTap As TapEvent」に書き換えます。
(6)「ScreenTapAction」メソッド内の「Case SwipeDirection.Up」の部分を「Case TapDirection.Tap」に書き換えます。
(7)「RaiseEvent LeapSwipe(SwipeDirection.Up)」に関する個所を「 RaiseEvent LeapTap(TapDirection.ScreenTap)」に書き換えます。

上記の変更を行った後、リスト6のコードを作成します。

  • 張子の虎をキー・タップで動かすLeap Motionプログラム

    『新世代モーションコントローラー Leap Motion -Visual Basicによる実践プログラミング-』 第6回のサンプルプログラムです。
薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています