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

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

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

まず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
  • 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メルマガ会員のサービス内容を見る

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