• ← 前回
• 連載 INDEX

　今回は、「RippleEffect」という波紋を起こさせるトランジション（Transition）を使って、空中タッチした画像の位置に波紋を発生させるWPFアプリを作成する。さっそく、その開発内容を説明していこう。

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

　今回のLeap MotionアプリもWPFで作成する。これまでの連載の手順と同様に、Visual Studio 2012（以下、VS 2012）のIDEを起動してVisual Basicの「WPFアプリケーション」テンプレートで新規プロジェクトを作成する。［名前］欄には、ここでは「RippleEffectLeapMotion」と指定する。

　ソリューションエクスプローラーでプロジェクト内にImageフォルダーを作成して、1枚の画像を配置しておく。読者は自分の好きな画像を配置するといい。できれば画像サイズは640×480pxが望ましい。画像の種類はPNGでもJPEGでもOKだ。

　WPFの基本的な作成手順は、第1回と同じ手順となるので、説明を割愛する。具体的な手順は、第1回の「参照の追加」「プロジェクトのルートに「LeapCSharp.dll」と「Leapd.dll」を追加する」「プロパティを設定する」を参考にしてほしい。

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

　今回のアプリは、表示させた画像の上で、タッチ動作を行うと、画像の上に波紋が発生するアプリだ（次の画面を参照）。

　この波紋にはRippleEffect効果を使用している。

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

　VS 2012のデザイン画面上に、「image」という名前のImageコントロールを1個配置する。そのWidthプロパティには「640」、Heightプロパティには「480」を指定し、SourceプロパティにImageフォルダーに取り込んでおいた画像を指定する。

　一番前面に（つまり最後の行に）、「paintCanvas」という名前のInkPresenterを配置する。これはタッチ・ポイントを表示するためのものだ。

　書き出されるXAMLコードは次のリストのようになる。

Blendを起動してストーリーボードを作成

　次に、アニメーションのためのストーリーボードを作成する。

　まずはBlendを起動する（起動手順は、第3回を参考にされたい）。なお、実際にBlendを起動する前に、必ずVS 2012でプロジェクトをビルドしておこう。

　Blendが起動したら、［プロジェクトを開く］から、現在作成している「RippleEffectLeapMotion.sln」ファイルを指定して開く。

　Blendの［アセット］パネルをクリックし、［コントロール］から「Ripple」を検索して表示させる。「検索」欄に「Ripp」と入力すると、Rippleが表示される（次の画面を参照）。

　表示されたRippleを「オブジェクトとタイムライン」内のimage要素上にドラッグ＆ドロップする（次の画面を参照）。

　追加したRippleEffectを選択して表示されるプロパティの、［名前］に「myRippleEffect」と指定し、［Frequency］に「0」、 ［Magnitude］に「0」、 ［Phase］に「0」と指定しておく（次の画面を参照）。Frequencyにはシェーダー内の周波数の値を指定する。Magnitudeにはシェーダー内の振幅の値を指定する。Phaseにはシェーダー内のフェーズ値を指定する。

ストーリーボードの作成

　「RippleEffectStoryboard」というストーリーボードを作成する（作成手順は「MSDN： ストーリーボードの作成、変更、または削除」を参照されたい）。

　［オブジェクトとタイムライン］の下にあるストーリーボードの［新規作成］アイコン（＋）をクリックし、「RippleEffectStoryboard」というストーリーボードを作成する。

　アートボード上の画面全体が赤の枠線で囲まれ、「●RippleEffectStoryboardタイムライン記録オン」に変わる。この状態でタイムラインの記録が可能になる。

　これから以下の作業は、再生ヘッドの位置に応じて、各プロパティの値を設定する作業となる。これらのプロパティ値は、表1にまとめているので、そちらを参考に値を設定してほしい。

　［Frequency］、［Magnitude］、［Phase］を選択して表示されるプロパティの［EasingFunction］に、「CubicInOut」を選択する（次の画像を参照）。［Frequency］、［Magnitude］、［Phase］全てに対して設定する。

　Blendを終わらせて、VS 2012に戻る。保存と適用のメッセージが出るが、保存して適用させる。

　またストーリーボードのコードの下に、次のリストのコードが追加されているので、このコードは削除する。このコードを残したままにしておくと、アプリを実行した際に、即！ストーリーボードが実行されてしまう。

　MainWindow.xamlファイル内に<Image>要素が次のリストのように書き出されている。ここでさらに。<ee:RippleEffect>要素のx:Name属性に「myRiffleEffect」を指定して、名前を付けておく。

プログラムコード（MainWindow.xaml.vb）

　では、次にプログラムコード（MainWindows.xaml.vbファイル）を見ていこう。

　プログラムコードも、タッチ処理以外は第1回と基本的に同じ内容となるので、説明を割愛する。まずは第1回の「名前空間の読み込み」「メンバー変数の宣言」「MainWindow_Loadedメソッドの処理」「Updateメソッドの処理」の開発手順を参考にタッチ処理の前までを実装してほしい。相違点として、下記の3点を修正してほしい。

　（1）ストーリーボードを扱うため、System.Windows.Media.Animation名前空間を読み込む。

　（2）Storyboardクラス型のメンバー変数「Public stb As Storyboard」を宣言する。

　（3）「Private x As Integer」、「Private y As Integer」、「Private tx As Double」、「Private ty As Double」、「Private FingersCount As Integer」、「Private Message As String」、「Private Index As Integer」の行は、今回は不要なので削除する。

MainWindow_Loadedメソッドの処理

　～第1回目と同じ処理の解説になるので割愛する。～

Updateメソッドの処理

　～第1回目と同じ処理の解説になるので割愛する。～

Updateメソッドの処理（タッチ処理部分）

　次にLeap Motionのタッチ処理になる。

　タッチのイメージについては、第5回の「Updateメソッドの処理（タッチ処理部分）」を参考にしてほしい。

　まずホバーの場合は、表示されている円がBlueの色になるだけで、何も起きない。具体的には下記のコードのようになる。

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

　円の色が赤から青に変化した瞬間（＝空中タッチした指を手前に引っ込めた瞬間）にRippleEffect効果が発生する。空中タッチした円の色が赤の状態では、まだRippleEffect効果は表れないので、注意してほしい。青に変わった時点で発生する。

　ポインターのX座標の値をimageコントロールのWidthプロパティの値である「640」で除算し、現在のポインターのX座標の値とする。取得したポインターのY座標の値をimageコントロールのHeightプロパティの値である「480」で除算し、現在のポインターのY座標の値とする。これらのX／Y座標をmyRippleEffectオブジェクトのCenterプロパティの値に指定する。「Me.Resources("RippleEffectStoryboard")」というコードで、Windows.Resource内のストーリーボードを取得して、変数「stb」に格納する。その変数のBeginメソッドでストーリーボードを開始する。タッチした点の周囲に波紋が広がる。

　具体的には以下のコードになる。

　このサンプルのコードは下記よりダウンロードできる＊1。

• http://2008r2.projectkyss.net/BuildInsider/sample_09.zip

■

　RippleEffectの波紋が、タッチしたポイントを中心に発生しない点が、ちょっと気に入らないが、WPFのストーリーボードと絡めるとこのようなこともできるのは示せただろう。コードはダウンロードできるので、タッチした点を中心に波紋が発生するよう、読者の皆さんにも挑戦していただきたい。

　さて、Leap Motionのサンプルは、今回で最終回だ。いかがだっただろうか？ Leap Motionには、もっともっと無限の可能性が秘められていると思う。その無限の可能性は、皆さんのアイデアの中にある。この連載をきっかけに、ぜひLeap Motionのアプリ作成に挑戦していただきたい。

　またLeap Motionをお持ちでない方も、このサンプルを見て、自分も購入して、アプリ開発をやってみようかな……と思われたなら、この連載は成功だ。そうなれば筆者としてもうれしいのだが、いかがだっただろうか。

　またお会いできる日を楽しみしておこう。

• ← 前回
• ▼ この記事の連載 INDEX ▼ 連載 RSS