あいてぃーとふぼふ

Windows Phone!そういうのもあるのか!

第77回codeseek勉強会&第17回日本C#ユーザー会 勉強会」に参加された皆様、お疲れ様でした~!(*≧∀≦)ノ

勉強会はいいものですね!

わたし自身、久しぶりの勉強会でしたので、色々な技術に触れられてとても楽しかったです!でも、色々な方々から刺激を受けられるということが、勉強会における一番の醍醐味ですよね~。スピーカーとしても、もっと笑えて楽しいお話ができるように今後とも精進致します。

資料はこちらから!

私のセッションで利用した資料は、以下のサイトから閲覧することが可能です。その他のスピーカーの方々の資料も閲覧することができるので必見です!

第77回codeseek勉強会&第17回日本C#ユーザー会 勉強会レポート

ソースコードはこちらから!

セッションで利用したアプリケーション(上記画像)のソースコード及び3Dモデルは、以下のリンクからダウンロードすることが可能です。ご覧いただけるとわかると思いますが、基本的にはプロジェクトテンプレートから生成される雛形に対して、3Dモデルを追加してGamePageに処理を実装しているだけです。これだけで3Dアプリが作れてしまうのは、Windows Phoneの強みですよね!
レッツ、パンチラ!

codeseek_csharp.zip

3Dモデルを作成してWPアプリで描画しよう!

CodeZineにおいて連載している「Windows Phone 7.5でつくる3Dアプリケーション」の第3回「3Dモデルを作成してWindows Phoneアプリケーションで描画しよう」が公開されました~!(*≧∀≦)ノ

今回のテーマは?

連載3回目となる今回は、Windows Phoneで利用できる3Dモデルの作成手順と、作成した3Dモデルを読み込んで描画するアプリケーションの作成方法をご紹介します。いよいよオーラスということで、やっと3Dアプリらしい内容になってきました~(T△T)

なお今回も、ライブコーディング的な演出を狙って、作成手順を記録した動画を公開していますので、不明な点はそちらで補っていただけると思います。今回は、イチから3Dモデルを作成する手順と、作成した3Dモデルを描画するアプリをイチから作成する手順を動画にしております。どちらも再生時間は4分程度ですので、カップラーメンが完成するまでの暇つぶしにでもご覧いただけましたら幸いです(麺やわめ)。

動画の効果は?

…もっとも、今までの記事でも同様に動画を掲載してはいるのですが、再生回数はイマイチ芳しくありません(T△T)。何とか見ていただけるように、再生時間を明記したりとか、マウス操作を中心とした手順を記録するなど、色々と工夫したりはしているのですが…現状では100人に1人が見てくれているかどうかといった感じです…orz。動画撮るの…結構大変なんだけどにゃー…(TωT;)

最終回は?

…というわけで、最終回となる次回は今回作成したサンプルを基にして、右記のような3Dアプリケーションを作成する手順を解説します。実際にSilverlight/XNAを利用する上で大切なポイントを紹介したり、SilverlightからXNAを操作してみたり、XNAからSilverlightを操作したりする実例をご紹介する予定です。たとえば、右記の3Dアプリでは、3Dモデルをリストボックスにバインドしたり、選択された3Dモデルのパーツを発光させたりしています。この3Dアプリのソースコードもすべてダウンロードできるようにする予定ですので、最終回もどうぞお楽しみに…してただけましたら幸いです!(*´∀`*)ノ
どうぃ~~~ん☆

WP7.5でつくる3Dアプリケーション☆連載開始!

なななんとっ!このたび、CodeZine様で連載させていただくことが決定致しました~!…といいますか、すでに第1回が本日公開となっております。関係者の皆様には、この場をお借りして深くお礼申し上げます!やった~!
。゚(゚ノД`゚)゚。

Windows Phone 7.5でつくる3Dアプリケーション!

本連載では、Windows Phone 7.5で新たに追加された新機能である「SilverlightとXNAの相互運用」について、その概要と実装方法をご紹介させていただきます。現状では全4回を予定しておりまして、SilverlightとXNAの基礎にはじまり、2つのフレームワークを融合させる方法や、3Dモデルを作成して描画する方法に触れつつ、最後に3Dアプリケーションの開発方法をご紹介していきたいと思います。

Windows Phoneは、まだ発売されて日の浅いプラットフォームですので、なんといっても日本語による情報が圧倒的に少ないです。それでも、基礎的な情報はそれなりに日本語化されているのですが…少し込み入ったことをやろうとすると途端に情報が少なくなります。よしんば、日本語化されていたとしても…、MSDNの記事とかって文字だらけで読み辛いですし…実際にどうすればいいの?っていう情報がスゴク読み取りずらいです…@私的に

そこで本連載では、そんな教訓を活かしつつ、動画やサンプルプログラムなどを交えながら、わかりやすくて実践的な内容をお送りしたいと思います。アーキテクチャがどうとか、そういった小難しいことは極力避けつつ(…というか出来ませんので)、どうすれば利用できるのか、どんな点に気を付ければいいのかなど、実戦向きの連載にしていきたいと考えております。

恐らく、隔週ごとの掲載になると思いますので、最後まで気長にお付き合いいただけましたら幸いです!(T△Tゞ

どぅぃーんって…ちょっと古くない?

描いたときは…旬なネタだったんです…。
元ネタをご存じない方は、以下の動画をご覧ください。

Windows® Phone「どうぃ〜〜〜ん☆TV Shopping」

ということで!Windows Phoneでつくる3どうぃ~~~ん…、もとい、3Dアプリケーション!この連載をぜひ…お見逃しなく!(*≧∀≦)ノ

Mango対応版 Windows Phone Toolkit!

WindowsPhone7のSilverlightアプリケーション開発に利用できるライブラリである「Silverlight for Windows Phone Toolkit」が更新されました!これによりWP7.5ことMango対応アプリケーションの開発が正式にサポートされました。

新機能が盛りだくさん!

今回のToolkitでは、新たにHubTileExpanderViewLockablePivotMultiselectListなどのコントロールが追加されています。特に、HubTileとExpanderViewは非常に有益なコントロールだと思いますので、時間があればじっくりと検証してみたいところです。また、不具合修正なども行われており、以前ご紹介したTransitionのバグもしっかりと修正されていることを確認しました。こんなライブラリが無償で使えるんだからスゴイです!

DatePickerの挙動が…

こんな素晴らしいToolkitなのですが、DatePickerやTimePickerの挙動が若干変わっているのが気に掛かりました。たとえば、リストを斜め上にフリックした場合、従来のToolkitおよびOS標準のDatePickerでは、一覧がスラ~っと回転するのですが、今回のToolkitに含まれるDatePickerでは、リストが1項目ずつ進みます。別にどちらの仕様が良いとか悪いとは言いませんが…勝手に挙動を変えられてしまうのは少し困りものですね。

少し調べた限りでは、挙動の互換性を保つプロパティなども存在していません。目くじらを立てるような変更ではありませんが、お客様にNoと言われれば修正せざるを得ないのが、開発現場の実情ですので…(T△T)

ビルドが通らない…

もちろん今回のToolkitも、ソースコードとサンプルが公開されています。ただしこのサンプル、そのままビルドするとビルドエラーが発生しました@わたしの環境では。エラーの内容は「Xap packaging failed. Object reference not set to an instance of an object.」とのことです。あ~そうかなるほど!全ッ然わかりません!( ´∀`)b

結論から申しますと、プロジェクト内の画像ファイルが文字コードの影響でうまく読み込めていないため、ビルドエラーとなっているようです。このため、左図に記載した2つの画像をプロジェクトから削除すれば、とりあえずビルドが通りました。ちなみに、これらの画像は「HubTileSample.xaml」から利用されていますが、別に画像がなくても問題なく動作するようです。

わくわくしてきた~!

いよいよWindouwPhone7.5対応アプリの開発環境が整いつつありますね!あとは開発環境であるWPSDKのRTM(その前にRC?)を待つばかり。今回追加されたHubTileを使うだけでも、色々と面白いことができそうです!(///ω///)ムフフ

WP7アプリケーション「MetroGnome」公開中!

MOTO SQUARE SOLUTION(モトスクウェアソリューション)は、WindowsPhone7用のゲームアプリケーションとして「MetroGnome(メトロノーム)」を開発しました。英語圏のマーケットプレイスにおきまして無料で公開しておりますので、WP7をお持ちの方は是非ともプレイしていただければ幸いです~♪以下に、アプリケーションの簡単な概要を記載しましたので、参照にしていただけるとうれしいです!≧∀≦)

ゲーム内容について

このアプリケーションは、音楽にあわせてボタンを押していくリズムゲームです。画面上方から落下してくる「アップル」だったり「ドロイド」てきな”なにか”を、画面下部の丸ボタンに重なるタイミングでタップしてください。その”なにか”は、BGMのリズムに合わせてどんどん落下してきますので、タイミングよく”ツブして”いきましょう!

ただし、BGMが終わるまでに画面右上のMarketShareを70%以上にできないとゲームオーバーとなりますのでご注意ください。

モードについて

モードは「ストーリー」と「アタック」の二種類をご用意しています。

ストーリーモードでは、平和なスマフォランドに起きたにんげんたちの反乱を、スマフォのお姫様「メトロ」がなんとかする物語です。「アップル」と「ドロイド」にそそのかされてしまったというにんげんたちを救うため、メトロはアップルとドロイドに戦いを挑みます!すべてのてきをたおして、スマフォランドに平和を取り戻しましょう!

また、ストーリーモードでクリアした楽曲は、アタックモードでいつでもプレイすることが可能です。たくさん練習して高得点を狙いましょう!

素材について

本アプリケーションで使用しているフォントとBGMは、以下のサイト様(順不同)で公開されている素晴らしいフリー素材を使用させていただきました。この場を借りて改めてお礼申し上げます。

さいごに

本アプリケーションは、WindowsPhone7用アプリケーションのテストベットとして作成しました。このため、不具合などにより多々ご迷惑をお掛けするかとは存じますが、何卒ご容赦くださいますようお願い申し上げます…と、先に謝っておきます。また、マーケットプレイスに公開されるアプリケーションは、日本にお住いの方々はもちろん、海外の皆さんにもご利用いただくことが可能です。このため、外国の人たちが日本の素晴らしいフリー素材を活用したアプリで楽しんでくれるかも?…なんて考えるだけで、なんだかうれしいですよね~♪

なお、アプリケーションのインストールは右記のリンク、もしくはマーケットプレイスの[Game]-[Music]カテゴリ、もしくは検索から実施することが可能です。

ということで、「MetroGnome」をひとつよろしくお願い致します~(*≧∀≦)ノ

WP7のゲームループはUIスレッド?(後編)

前回の検証結果(左記の画像)より、XNAのゲームループ(GameTimerクラスのイベントハンドラ)はUIスレッド上で動作することがわかりました。でも、これには大きな危険が潜んでいます。

UIスレッドの占有はダメ!

お気づきの方も多いと思いますが、この事実から読み取れる危険…、それはUIスレッドの占有には今まで以上に注意しなくてはならないということです。何を当たり前のことを…と思うかもしれませんが、ちょっと待ってください!たとえば、SilverlightのUIコントロールのイベントハンドラにおいて長時間処理を実行した場合、そのぶん、同様にUIスレッドを利用するGameTimerクラスのイベント発行が遅延してしまいます。このため、ゲームループのFPS(1秒間に処理する回数)が低下しますよね。この際に厄介なのは、OnUpdateイベントまでもがUIスレッドで動作するという事実です。これはつまり、UIスレッドの占有による弊害は、描画のコマ落ちなんて生易しいものではなく、ゲームの処理落ちに直結するということです。

XNAのみを利用する場合、処理に時間を喰ってしまった際は、意図的に描画処理をスキップして更新処理を優先させたりします。こうすることにより、描画のコマ落ちは発生しますが、ロジックの処理落ち(ボタンを押したのに認識されない等)を回避させることは可能です。ただしSilverlightと相互運用させる場合、こういう危険性を理解しないまま使用してしまうと後々厄介なことになりそうです。

まとめ!

後編に引っ張りましたけど、いいたいことはこれだけです。う~…ん、個人的にはOnUpdateイベントがUIスレッドである必要性が理解できません。Silverlightコントロールから値を取得するだけならば別段UIスレッドである必要はないわけですし…。でも、UpdateとDrawの実行順序を保証させたいがためだとすれば…なんとなく理解できるかも?いやでも…なんでかなー…。

ということで、全体的な完成度は少し残念な感じの「WPDT 7.1β」ではありますが、ことSilverlightとXNAの相互運用に関してはホント素晴らしいと思います。 SilverlightとXNAの共存なんて、まるで夢物語のようですね~♪いうなれば、仮面ライダーBLACKとシャドームーンが共闘するくらいアツイ 展開!…かな?かな?

WP7のゲームループはUIスレッド?(前編)

「WPDT 7.1β」では、SilverlightとXNAを相互運用することが可能となりました。この機能を利用することにより、例えばSilverlightのコントロールとXNAのゲームロジックを同一の画面内で共存させることが可能となります。個人的にイチ押しの機能です。

ちなみにこの機能は、Silverlight5のDrawingSurfaceクラスにおいて、より洗練された形で実装されています。ですがそれでも、利用する際にはXNAに関する知識が少なからず必要となります。また、WP7も将来的にはSilverlight5ベースになるでしょうし、今のうちからXNAの使い方を理解しておくのも良いと思います。

話が少しそれましたが、左記画像のアプリではこの機能を利用して、UIコントロールをSilverlightで制御し、ローザさんの3DモデルをXNAで制御しています。メッシュデータの利用方法など、XNAの基礎知識に関してはまた別の機会にご紹介するとして、今日の本題はXNAのゲームループからSilverlightのUIコントロールを操作することは可能か?という内容です。たとえば、3Dモデルのアニメーションが終わったらUIコントロールの状態を変更する、みたいなことが可能かどうかということですね。

まずはおさらい!

SilverlightとXNAを相互運用する場合、WP7.1ではGameTimerクラスを利用します。早い話、このタイマーがOnUpdateイベントとOnDrawイベントを交互に発行…つまりゲームループを発生してくれるので、これらのイベント内でXNAの更新処理と描画処理をしてあげればよいわけです。概略は右記画像のとおりです。仕組みは単純ですね~!このため、当然ではありますが、SilverlightのUIコントロールをXNAのゲームループから参照しても、別にビルドエラーにはなりません。でもじゃあ実行時に、XNAのゲームループ内からSilverlightのUIコントロールを操作した場合は…一体どうなるのでしょう?

やってみよう!

ということで、やってみました!結論から先に申しますと、XNAのゲームループからSilverlightのUIコントロールを操作することは可能です!やったね、たえちゃん!…ん?でも待てよ。たしかSilverlightのUIコントロールはUIスレッド以外から操作することはできないはず…。なのにうまく動くのは…なぜ?

調べてみよう!

これを検証するために、左記のようなコードにおいて、SilverlightのイベントハンドラとXNAのゲームループのスレッドIDを取得し比較してみました。すると面白いことに、上記のスレッドIDは完全に一致します。このことから、XNAのゲームループはUIスレッド上で実行されていることがお分かりいただけると思います。GameTimerクラスは、普通のTimerというよりはむしろDispatcherTimerに近い感じなんですね。ともあれこれで、XNAのゲームループ内からSilverlightコントロールをガンガン更新しても何ら問題ないことがわかりました。実際に、最大FPSで回しているゲームループからテキストボックスのテキストを(1秒間に数十回)変更しても、問題なく更新されます。

潜む危険…

…でも、この事実に喜んでばかりもいられません。なぜなら、この事実にはある重大な危険性が潜んでいるからです。ということで、続きは次回の投稿で!

WP7のバリデーション(改良編)

前回のサンプルプログラムでは、テキストを変更したタイミングでOKボタンの活性状態が変化しないことが問題でした。今回はこれを解決してみましょう。

なんでこうなるの?

この問題は、WP7ではない普通のSilverlightでも同様に起こります。なぜなら、Textプロパティにバインドしたソースの更新タイミングは LostFocusが既定値となっているためです。このタイミングは、Bindingクラスの『UpdateSourceTrigger』を利用することにより指定することが可能であり、既定値である『Default』値の振る舞いはコントロールごとに異なります。たとえばIsCheckedなどの依存関係プロパティでは、更新タイミングが『PropertyChanged』であるのに対し、Textプロパティだけは、パフォーマンスを考慮して更新タイミングが『LostFocus』となっているのです。この辺りの詳細はMSDNをご覧くださいね。

つまり、テキストが変更されるたびに検証処理を実施(OKボタンの活性状態を更新)するためには、TextプロパティのBindingのUpdateSourceTriggerをPropertyChangedに指定すれば解決できそうですね。以下のような感じです。さっそくやってみましょう!

でもね、できません(´・ω・`)!だってね、Silverlightで指定できるUpdateSourceTriggerの値はDefaultとExplicitだけなんです!って、なんじゃそらー!(`Д´)

ならどうするの?

ということで、毎度おなじみBehaviorを使用して解決しましょう!やるべきことはいたってシンプルで、テキストボックスのTextChangedイベントが発生したときに、Textプロパティのバインディングソースを更新します。これにより、UpdateSourceTriggerにPropertyChanged値を指定した場合と同様の効果を得ることができます。

Behaviorの実装方法とXAMLはこんな感じになります。なお、このBehaviorを利用した場合はバインディングソースがBehavior内で更新されるため、TextプロパティのUpdateSourceTriggerには『Explicit』を指定してあげると尚良しです。これで納得の挙動になりました!

サンプルプログラム!

改良版のサンプルプログラムは以下からダウンロードすることが可能です。
ValidationSample(v2)