Kinect v2の音声認識で「仮面」を選んで変身してみる

2015年1月6日(火)
薬師寺 国安

今回のサンプルは、画面のリストボックスに表示されている仮面を音声認識で選んで、その仮面をプレイヤーが装着するというものです。

今回のプログラムも、WPFアプリケーションとして作成します。まずはプロジェクトからの作成です。

プロジェクトを作成する

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

画像などの追加

ソリューションエクスプローラー内の「MaskChange」を選択し、マウスの右クリックで表示されるメニューから、[追加]ー[新しいフォルダー]と選択し、「Images」というフォルダーを作成します。作成した「Images」フォルダーを選択し、マウスの右クリックで表示されるメニューから、[追加]−[既存の項目]と選択して仮面のPNG画像を3枚追加しておきます。

また今回は、音声認識を使用していますので、ソリューションエクスプローラー内に「DLL」というフォルダーを作成し、「KinectAudioStream.dll」を配置しています。これらは、ダウンロードしたサンプルファイルに含まれていますので、ご確認ください。

その他に必要となるMicrosoft.Kinect.dllやMicrosoft.Speech.dll、KinectAudioStream.dllは、「参照の追加」から追加していきます。手順については、連載の第2回目で詳説していますので、そちらを参照してください。

コントロールの配置

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

  1. Windows.Resourcesプロパティ要素内に、DataTemplate要素を配置して、Key名を「ListBoxTemplate」としておきます。このDataTemplate要素の子要素としてImage要素を配置し、WidthとHeightプロパティを設定します。Sourceプロパティには、「画像名」をバインドしておきます。この「画像名」は、コードの中のクラスで定義されたプロパティ名です。
  2. Kinect v2センサーからのRGB画像を表示する「Image」には、名前に「roomImage」と指定しておきます。
  3. 関節を取得して、人物の上に表示するための「Canvas」を配置し、名前に「CanvasBody」としておきます。この関節は透明化して表示させますので、目には見えません。
  4. リストボックスから音声によって選択されたマスクを表示する「Canvas」を配置し、名前に「CanvasBody2」と指定しておきます。
  5. マスクを表示する「ListBox」を配置します。名前に「ListBox1」と指定し、ItemTemplateにStaticResourceを使用して、(1)で定義した「ListBoxTemplate」を参照させます。背景色(Background)には、Transparentを指定して透明化しています。

全て設定すると図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">
    <Window.Resources> ■(1)
        <DataTemplate x:Key="ListBoxTemplate"> ■(1)
            <Image Width="60" Height="75" Source="{ Binding 画像名}"/> ■(1)
        </DataTemplate> ■(1)
    </Window.Resources> ■(1)
    <Grid>
        <Image x:Name="roomImage" Width="512" Height="424"/> ■(2)
        <Canvas x:Name="CanvasBody" Width="512" Height="424"  /> ■(3)
        <Canvas x:Name="CanvasBody2" Width="512" Height="424"  /> ■(4)
        <ListBox x:Name="ListBox1" Margin="394,68,10,44" ItemTemplate="{StaticResource ListBoxTemplate}" Background="Transparent"/> ■(5)
    </Grid>
</Window>

XMLファイルの作成(Mask.xml)

VS2013メニューの[プロジェクト]ー[新しい項目の追加]と選択し、表示される画面から「データ」を指定し、表示される項目から「XMLファイル」を選択します。名前を「Mask.xml」と指定し、「追加」ボタンをクリックするとXMLエディターが起動しますので、リスト2のXMLを記述します。

リスト2:Mask.xml

<?xml version="1.0" encoding="utf-8" ?>
<マスク>
  <画像名>mask_02.png</画像名>
 <画像名>鬼.png</画像名>
 <画像名>般若.png</画像名>
</マスク>

追加したXMLファイルを選択してプロパティを表示します。「ビルドアクション」に「コンテンツ」、「出力ディレクトリーコピー」に「常にコピーする」と指定して下さい。

この設定を忘れるとエラーが表示されますので、注意してください。

  • 音声認識で仮面を装着するKinect v2プログラム

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

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

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