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

今回紹介するのは、画面をスクリーン・タップ（画面を垂直に突くような動作）すると、銃声とともに、画面上に無数の銃弾の跡が表示されるアプリです。早速開発手順を見ていきましょう。記事の最後ではサンプルプログラムを紹介します。

まずWPFプロジェクトを作成しよう

今回のLeap MotionアプリもWPFで作成します。

これには、Visual Studio 2012（以下、VS 2012）のIDEを起動して、メニューバーから［ファイル］−［新規作成］−［プロジェクト］と選択して、それにより表示される［新しいプロジェクト］ダイアログで「Visual Basic」のテンプレートから「WPF アプリケーション」を選択します。

※Leap Motionは、.NET Framework 3.5と4.0に対応しています。しかし、.NET Framework 4.5でも動作します。今回のアプリは全て.NET Framework 4.5で作成しています。しかし、あくまでも対応しているのは、.NET Framework 3.5と4.0です。心配な方は、.NET Framework 4.0で作成すると安心でしょう）。［名前］欄には、ここでは「gunLeapMotion」と指定します。

ソリューション・エクスプローラー内にImageというフォルダを作成して、銃弾の跡となるpng画像を配置しておきます。

またWAVというフォルダを作成して、銃声となるwavファイルも配置しています。

ダウンロードされたサンプルファイルには、これらのファイルは追加済みです。

銃声となるbigshot1.wavファイルは.EXEファイルと同じフォルダに常に配置したいので、［ソリューション・エクスプローラー］で「bigshot1.wav」項目の右クリック・メニューで［プロパティ］を実行し、［プロパティ］ウィンドウの［ビルド アクション］の値を「コンテンツ」に、また［出力ディレクトリにコピー］の値を「常にコピーする」に変更しておきます。

WPFの基本的な作成手順は、「画面上の図形を5本の指で操作する基本的なLeap Motionプログラムを作る」と同じ手順となるので、説明を割愛します。具体的な手順は、第1回の「参照の追加」「プロジェクトのルートに「LeapCSharp.dll」と「Leapd.dll」を追加する」「プロパティを設定する」を参考にしてください。

今回のLeap Motionアプリについて

今回のアプリは、画面を空中で垂直に突いて引く動作をすると、銃声とともに銃弾の跡が表示されるアプリです。スクリーン・タップを使用していますが、この動作は慣れるまでは、ちょっとコツが必要かもしれません(図1参照)。

図1：TYPESCREENTAPで銃声とともに銃弾の跡が表示された（クリックで拡大）

実際に動かした動画は下記です。

今回も「コールバック方式」を用いています。第1回のサンプルの「コールバック方式の採用」を参照してください。またコールバックメソッド等については、Build Insiderの「C#開発者から見たLeap Motion開発のファースト・インプレッション」を参照してください。

画面のレイアウト（MainWindow.xaml）

「ShowArea」という名前のCanvasコントロールを配置しています(リスト1)。

リスト1 (MainWindow.xaml)

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

画面上には何も表示はされないので、レイアウト図は省略します。

クラスの作成（ScreenTapDirection.vb）

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

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

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

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

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

Public Enum ScreenTapDirection
  ScreenTap
End Enum