PR

Kinect v2で実現する打楽器のバーチャル演奏

2014年12月22日(月)
薬師寺 国安

今回のサンプルは、画面上に置かれた太鼓とドラムをセンサーで映し出されたプレイヤーがたたくと、それぞれの音が奏でられるというものです。

まずはプロジェクトの作成から始めます。

プロジェクトを作成する

VS2013メニューの[ファイル]ー[新しいプロジェクト]と選択し、表示される画面から、「テンプレート」に「Visual Basic」を指定し、「WPF アプリケーション」を選択します。名前に「TaikoSound」と指定し、「OK」ボタンをクリックします。

画像やサウンドの追加

ソリューションエクスプローラー内の「TaikoSound」を選択し、マウスの右クリックで表示されるメニューから、[追加]ー[新しいフォルダー]と選択し、「Images」というフォルダーを作成します。作成した「Images」フォルダーを選択し、マウスの右クリックで表示されるメニューから、[追加]−[既存の項目]と選択して太鼓とドラムのPNG画像を2枚追加しておきます。
また、同様に「WAV」というフォルダーを作成して、太鼓やドラムのサウンドファイルである、wavファイルを取り込んでおきます。
これらのファイルは、ダウンロードしたサンプルファイルに含まれていますので、ご確認ください。

参照設定

ソリューションエクスプローラー内の「全てのファイルを表示」アイコンをクリックして、「参照設定」を表示させます。表示された「参照設定」を選択し、マウスの右クリックで表示される「参照の追加」をクリックして、「参照マネージャー」を表示します。一度Kinectへの参照を追加しておいた場合は、この画面に「Microsoft.Kinect.dll」が表示されていますので、これを選択して「OK」ボタンをクリックしてください。
表示されていない場合は、連載の第2回目を参考にして「参照」ボタンから追加してください。

ここまでの詳細な解説については、第2回目で解説していますので、よく分からない方はそちらも参照してみてください。

コントロールの配置

最初に「MainWindow.xaml」画面内にコントロールを配置して、画面を設計します。「ツールボックス」から「Image」コントロールを3個、「Canvas」コントロールを1個、「MediaElement」を2個配置します。

  1. 全体をGridではなくCanvasで囲みます。
  2. Kinect v2からのRGB画像を表示する「Image」には、「roomImage」という名前を指定してします。
  3. プレイヤーの関節の位置を表示させる「Canvas」には「CanvasBody」という名前を付けておきます。但し、関節の色には透明色を使っていますので、関節の位置自体は表示されているのですが、ユーザーからは見えません。
  4. 太鼓とドラムの画像を表示する「Image」には、それぞれ「Image1」「Image2」という名前を付けています。
  5. 太鼓とドラムの音を鳴らす「MediaElement」には、それぞれ「MediaElement1」「MediaElement2」という名前を指定し、Sourceプロパティには太鼓またはドラムのwavファイルを指定しています。MediaElementのLoadBehaviorとUnloadBehaviorには、「Manual」を指定しておいてください。この指定がないとエラーになりますので、注意してください。
    LoadBehaviorプロパティはメディアの読み込み時の動作の MediaState を、UnloadBehaviorプロパティは、メディアのアンロード動作の MediaState をそれぞれ取得します。

全てを設定すると図1のようになります。

全てのコントロールを配置した

図1:全てのコントロールを配置した

これらのコードを書き出すとリスト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="424" Width="512">
    <Canvas> ■(1)
        <Image x:Name="roomImage" Width="512" Height="424"/> ■(2)
        <Canvas x:Name="CanvasBody" Width="512" Height="424"  /> ■(3)
        <Image x:Name="Image1" HorizontalAlignment="Left" Height="218" VerticalAlignment="Top" Width="204" Source="Image/太鼓.png" Canvas.Left="79" Canvas.Top="175"/> ■(4)
        <Image x:Name="Image2" HorizontalAlignment="Left" Height="142" VerticalAlignment="Top" Width="251" Source="Image/ドラム.png" Canvas.Left="243" Canvas.Top="251"/> ■(4)
        <MediaElement x:Name="MediaElement1" Height="29" Canvas.Left="389" Canvas.Top="338" Width="77" LoadedBehavior="Manual" UnloadedBehavior="Manual" Source="WAV/Taiko.wav"/> ■(5)
        <MediaElement x:Name="MediaElement2" Height="29" Canvas.Left="389" Canvas.Top="338" Width="77" LoadedBehavior="Manual" UnloadedBehavior="Manual" Source="WAV/Drum SE01-2.wav"/> ■(5)
      </Canvas> ■(1)
</Window>
Think IT会員限定特典
  • Kinect v2で実現する打楽器のバーチャル演奏のサンプル

    『作りながら学ぶKinect v2プログラミング開発』 第3回のサンプルプログラムです。
薬師寺国安事務所

薬師寺国安事務所代表。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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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