センサーやカメラを使ったWindows Phone のための

アプリケーション開発

日本マイクロソフト株式会社

デベロッパーエバンジェリスト

太田　寛

D1-401

セッションの目的Windows Phone のセンサー、カメラ、 XNA の使用方法を理解いただく

Windows Phone のセンサー、カメラ、 XNA 機能のデモ

セッションのゴールWindows Phone のセンサー、カメラ機能を活用したアプリケーション開発ができるようになる

Windows Phone の Silverlight と XNA を組合せ、高品質な描画を行うアプリケーション開発ができる

セッションの目的とゴールSession Objectives and Takeaways

本セッションで説明するアプリケーション最終形Windows Phone のカメラ機能を使うWindows Phone のセンサー機能を使うXNA 機能の活用Silverlight と XNA を組合せる

アジェンダ

本セッションで説明する　　アプリケーション最終形

ShutterCompass

カメラによる画像キャプチャ AR （仮想現実）

下向き（重力）はどっち？

方向（東西南北）はどっち？

アプリケーション構成要素

実画像の取り込み

デバイスを取巻く環境情報の取込み

ハイパフォーマンス 3D 画像ShutterCompass

カメラ

センサー

XNA

動画静止画オートフォーカスフラッシュ画質・色調整Picture Hub への格納他アプリケーション連携Web へのアップロード

Windows Phone のカメラ機能

デフォルト Task に含まれたカメラ機能を起動名前空間 Microsoft.Phone.Tasksクラス CameraCaptureTask

デフォルトのカメラ機能を利用

• デフォルトのカメラ機能をアプリケーションから起動

• 操作性はデフォルトの機能と同一

• 戻り操作で、アプリケーションロジックに復帰

カメラ デバイスから画像をアプリケーションに取り込む

名前空間 Microsoft.Devicesクラス PhotoCamera

カメラ機能の活用

ShutterCompass

• アプリケーションからカメラ デバイスを起動• Silverlight コントロールへの画像の貼付け• フォーカス、画質、色の制御• 静止画、動画の取り込み• Picture Hub や、 Web への画像格納

• アプリケーション ロジックによる細かな制御

カメラデバイス制御

ShutterCompass

XAML によるUI 定義

<Canvas …>　 <Canvas.Background>　　<VideoBrush x:Name="viewfinderBrush"/> 　 </Canvas.Background></Canvas>

1. カメラ インスタンスの作成2. カメラ デバイス状態変化通知用ハンドラ登録3. VideoBrush のソースにカメラを登録

静止画を撮る場合CaptureImage()

状態管理、画像修正、格納処理など

ボタン クリックなど カメラ デバイスから

加速度重力を含む加速度

ジャイロデバイスの移動角速度

モーションデバイスの向き

デバイスにかかる加速度

デバイスの移動角速度

コンパス方向

Windows Phone 搭載センサー

センサー毎に用意されたクラスを利用名前空間： Microsoft.Devices.Sensorsクラス

加速度センサーAccelerometerジャイロ Gyroscopeモーション Motionコンパス Compass

各種センサーの使い方

IsSupport プロパティで、搭載されていることを確認

CurrentValueChanged イベントにイベントハンドラーを登録

イベント ハンドラー

計測値更新

各種ロジック

センサーの計測値と座標

Pitch

Yaw

Roll

地軸の北極地磁気の北極

加速度、角速度、磁界方向

角度

コンパス

モーションのデバイス方向

+Y

-Y

+X-X

+Z

-Z

ハイ パフォーマンスなゲーム２ D 、 3D グラフィックステクスチャやアニメーションなど凝った表示

XNA 紹介

XNA の動作モデル

OnUpdate

OnDraw

実時間タイマー 一定時間ごとにコール

描画内容更新

描画実行

描画で使うコンテンツを

ロード

描画フレーム レートが決まっているグラフィックス アクセラレーターの活用

Silverlight の動作モデル

イベントソース

イベントハンドラ

描画コントロール

メインプログラム1.

イベントソースにハンドラー登録

2-1.イベント発生時

ハンドラーをコール

2-2.各種ロジック

実行

2-3.表示更新

繰り返し• XAML による GUI 定義• デバイスの全機能利用可能• 処理時間を考慮

Silverlight の特徴XAML で UI を定義し、イベント駆動フレームワークを利用

RIA （ Rich Internet Application ）スタイルの UI を素早く作成

Windows Phone の 各種コントロールを利用する

ビデオ画像を埋め込む

HTML Web ブラウザを埋め込む

XNA と Silverlight の組み合わせ

Silverlight＋ XNAハイパフォーマンスなゲーム制御用のフレームワークを使う

マルチスクリーン 2D 、 3Dゲームを RIA スタイルの UI で操作

グラフィックスや各種効果、アニメーションを活用

グラフィックス画像に Silverlight のテキスト描画機能で文字を描画

XNA アプリケーションにページナビゲーションを追加するWindows Phone Silverlight/XNA アプリケーション

プロジェクトテンプレートを使用

XNA フレームワークSilverlight フレームワーク

XNA と Silverlight の統合

MainPage.xaml

GamePage.xaml

コンストラクター• ContentManager 取得• ゲーム タイマー生成• 描画用ハンドラー登録

OnNavigateTo メソッド• コンテンツ ロード• ゲーム タイマー起動

LayoutUpdate メソッド• 表示サイズ調整

・ OnUpdate 描画コンテンツ・ OnDraw 実際に描画

OnNavigateFrom メソッド• ゲームタイマーの停止

XNA と Silverlight の描画合成

XNA のスプライト

XNA のスプライト

Silverlightの画面

TextBlock

XNAGraphicDevice クラスで描

画

UIElementRenderer SpriteBatch

XNA Texture2Dオブジェクトに変換（ Render() ）

TextureDraw()

スクリーンに描画

セッションの目的Windows Phone のセンサー、カメラ、 XNA の使用方法を理解いただく

このセッションで持ち帰っていただきたいモノセンサーやカメラ機能の基本的な使い方と TipsSilverlight と XNA を組み合わせたグラフィックス描画方法とコツ

Windows Phone 向けの、高品位な魅力あるアプリケーションを開発するための基本技術

セッションのまとめSession wrap up

関連セッションD1-301 ： Windows Phone 7.5 のアプリケーション開発概要

D1-302 ： Windows Phone 7.5 のデータ アクセスとクラウド連携

リファレンス

Windows Phone デベロッパーセンターhttp://msdn.microsoft.com/japan/windowsphone

Windows Phone 開発者登録http://create.msdn.com/ja-jp/

.Windows Phone 技術情報http://msdn.microsoft.com/en-us/library/ff402535(v=VS.92).aspx

日本マイクロソフト UX チーム Facebook ページhttp://www.facebook.com/mswinux

スピーカー ブログhttp://blogs.msdn.com/hirosho

ご清聴ありがとうございました

アンケートにご協力くださいD1-401