Leap Motionのスクリーン・タップを使った音声の再生と画像の表示

ScreenTapActionメソッドの処理

ScreenTapDirection列挙体の値がScreenTapであった時の処理を記述します。

Leap Motionのフレームを表すFrame型（Leap名前空間）の変数「frame」を宣言します。InteractionBox型（Leap名前空間）の変数「interactionBox」を宣言し、そこにleap.Frame.InteractionBoxプロパティからInteractionBoxオブジェクトを取得します。InteractionBoxオブジェクトは、Leap Motionで認識できる可動範囲となります。InteractionBoxオブジェクトを使用することで、指やツール（＝ペンなど）の位置を実際のディスプレイの座標系に変換できます（リスト5を参照）。詳細な図については、Build Insiderの記事「Leap Motionでのタッチ操作はどう開発するのか？」を参照してください。

次に、Leap.Frame.Pointablesプロパティで得られるPointableListオブジェクト内を変数「Pointable」で反復処理しながら、1つずつPointableオブジェクトを処理し、それぞれのタッチ位置を取得していきます。

interactionBoxオブジェクトのNormalizePointメソッドに引数としてPointable.StabilizedTipPositionプロパティ値を渡し、ポインター上の位置を取得します。

変数「windowWidth」と「windowHeight」で表されたクライアント領域のウィンドウがある場合、以下のコードで示す計算式を使用してこのウィンドウ内のタッチ・ポイントの2D座標を得ることができます。

  tx = normalizedPosition.x * windowWidth
  ty = windowHeight - normalizedPosition.y * windowHeight
  touchPoint = New StylusPoint(tx, ty)

dispatcher.Invokeを使って、ワーカースレッドからUIスレッドに処理を任せます。

新しいMediaElementのインスタンス、myMediaオブジェクトを作成します。
LoadBhhaviorとUnloadBehaviorにManualを指定します。これを指定しなければ、エラーが発生するので注意してください。Sourceプロパティに、ソリューション・エクスプローラー内のWAVフォルダ内にある「.wavファイル」を指定します。Playメソッドで「.wavファイル」を再生すると、銃声が鳴ります。

次にImageのインスタンスmyImageオブジェクトを作成します。WidthとHeightに50を指定し、Sourceプロパティに、ソリューション・エクスプローラー内のImageフォルダ内にあるpng画像ファイルを指定します。「銃弾の跡」の画像です。

SetValueメソッドでmyImageオブジェクトの表示されるTopとLeftの位置を指定します。

MainWindowにアクセスし、MainWindowのShowAreaという名前のCanvasにmyImageオブジェクトを追加していきます。これで、銃声とともに銃弾の跡が無数に表示されます。

具体的なコードはリスト5のようになります。

リスト5　空中タップした位置に銃声とともに銃弾の跡の表示されるScreenTapActionメソッドの処理

Private Sub ScreenTapAction(ByVal sd As ScreenTapDirection)
        Select Case sd
        Case ScreenTapDirection.ScreenTap
          Dim frame As Leap.Frame = leap.Frame

          '  Leap Motionで認識できる可動範囲を取得する
          Dim interactionBox As InteractionBox = leap.Frame.InteractionBox
          For Each Pointable As Pointable In leap.Frame.Pointables
            Dim normalizedPosition As Leap.Vector = interactionBox.NormalizePoint(Pointable.StabilizedTipPosition)
 
            tx = normalizedPosition.x * windowWidth
            ty = windowHeight - normalizedPosition.y * windowHeight

            '  ウィンドウ内のタッチ・ポイントの位置を取得する
            touchPoint = New StylusPoint(tx, ty)
          Next

'　ワーカースレッドからUIスレッドに処理を任せる
          dispatcher.Invoke(Sub()
            ' MediaElementのインスタンスを作成する。
                  myMedia = New MediaElement
                  myMedia.LoadedBehavior = MediaState.Manual
  　              myMedia.UnloadedBehavior = MediaState.Manual
        myMedia.Source = New Uri("WAV/bigshot1.wav", UriKind.Relative)
        myMedia.Play()

' Imageのインスタンスを作成する。
        myImage = New Image
        With myImage
          .Width = 50
          .Height = 50
          .Source = New BitmapImage(New Uri("Image/銃弾.png", UriKind.Relative))

' 銃弾の画像が表示される位置を設定する。
          .SetValue(Canvas.TopProperty, touchPoint.Y)
          .SetValue(Canvas.LeftProperty, touchPoint.X)
        End With

' MainWindowにアクセスする。
        Dim myMainWindow As MainWindow = DirectCast(Application.Current.MainWindow, MainWindow)
  
myMainWindow.ShowArea.Children.Add(myImage)
                                   End Sub)
        Exit Select
    End Select
    End Sub
  ・・・・以下コード略・・・・
End Class

MainWindow.xaml内に[gunModel]を取り込む

まず名前空間として「xmlns:local="clr-namespace:gunLeapMotion"」を定義します。

次にプロパティ要素内に「」と記述します。MainWindow.xaml内に「gunModel」クラスが取り込まれます。リスト6のようになります。

リスト6　「UpDownMode」を取り込んだMainWindo.xaml

<Window x:Class="MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:gunLeapMotion"
  Title="MainWindow" Height="1080" Width="1920" WindowState="Maximized">
  <Window.DataContext>
      <local:gunModel/>
  </Window.DataContext>
    <Canvas>
      <Canvas x:Name="ShowArea"/>
    </Canvas>
</Window>

MainWindow.xaml.vbには何も記述しません。

※注意
サンプルをダウンロードして動かす場合は、「LeapCSharp.NET4.0.dll」や「LeapCSharp.dll」、「Leap.dll」を読者自身のフォルダ内にあるDLLファイルに指定し直さなければ動かない可能性があるので、動かない場合は再指定してください。