Download - センサーやカメラを使った Windows Phone のための アプリケーション開発
センサーやカメラを使った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
ハイ パフォーマンスなゲーム2 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