PR

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

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

Think IT会員限定特典
  • 音声認識で仮面を装着する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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

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

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