PR

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

2013年10月18日(金)
薬師寺 国安

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ファイルに指定し直さなければ動かない可能性があるので、動かない場合は再指定してください。

  • Leap Motionのスクリーン・タップで音声再生と画像を表示するプログラム

薬師寺国安事務所

薬師寺国安事務所代表。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メルマガ会員のサービス内容を見る

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