SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

SilverlightとXNAを融合させてWindows Phoneアプリケーションを開発しよう

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

XNAでSilverlightのUIを描画する

 UIElementRendererクラスを利用すると、SilverlightのUIをXNAの画像データに変換することが可能となります。これにより、XNAで2D画像を描画するのと同様の方法で、SilverlightのUIをXNAで描画することが可能となります。それでは、「GamePage.xaml.cs」に対してUIElementRendererクラスを実装する手順を以下に記載します。

 まずは、UIElementRendererクラスをフィールドに定義します。

UIElementRenderer elementRenderer;

 つぎに、コンストラクタ内でPhoneApplicationPage.LayoutUpdatedイベントを登録し、イベントハンドラ内でUIElementRendererクラスを初期化します。このイベントは、Silverlightのビジュアルが変化したときに発生するイベントであり、UIElementRendererクラスは、UIの再描画が必要となったタイミングで再構築する必要があります。この際、UIElementRendererクラスのコンストラクタには、引数としてSilverlightのUI要素とそのサイズを指定します。

public GamePage()
{
    …中略…
    
    LayoutUpdated += new EventHandler(GamePage_LayoutUpdated);
}

private void GamePage_LayoutUpdated(object sender, EventArgs e)
{
    if (elementRenderer != null)
    {
        elementRenderer.Dispose();
    }
    elementRenderer = new UIElementRenderer(this,
        SharedGraphicsDeviceManager.Current.GraphicsDevice.Viewport.Width,
        SharedGraphicsDeviceManager.Current.GraphicsDevice.Viewport.Height);
}

 あとは、GameTimer.DrawイベントでUIElementRenderer.Renderer()メソッドを実行し、SpriteBatchクラスを用いてUIElementRenderer.Textureプロパティを描画します。UIElementRenderer.Renderer()メソッドを実行すると、初期化時に指定したSilverlightのUI要素がXNAで描画可能な画像データに変換されて、UIElementRenderer.Textureプロパティに格納される仕組みとなっています。

private void OnDraw(object sender, GameTimerEventArgs e)
{
    …中略…

    elementRenderer.Render();
    spriteBatch.Begin();
    spriteBatch.Draw(elementRenderer.Texture, Vector2.Zero, Color.White);
    spriteBatch.End();
}

 これにより、XNAで描画している画面の上に、SilverlightのUIコントロールを重ねて描画することが可能となります。

UIElementRendererを追加したSilverlight/XNAプロジェクトの実行結果
UIElementRendererを追加したSilverlight/XNAプロジェクトの実行結果

UIElementRendererとイベントハンドリング

 このように、UIElementRendererクラスを利用すれば、同一の画面でSilverlightとXNAを融合させることが可能となります。この際、SilverlightのUIコントロールから発生する各種イベントを利用することも可能です。それでは、UIElementRendererクラスを利用して画面を描画する場合、Silverlightのイベントをどの程度まで利用することができるのでしょうか?

 以下の動画では、Silverlight/XNAプロジェクトを新規に作成し、「GamePage.xaml」に「MainPage.xaml」のUIを複製して実行しています。この際、UIElementRendererクラスは利用していません。

Silverlight/XNAにおけるSilverlightのイベントハンドリング(再生時間:1分12秒)

 このため、当然ながら水色の画面(GamePage)においてSilverlightのUIは描画されません。しかしながら、本来ボタンが表示されるであろう箇所をクリックすると、しっかりとイベントが発生していることが分かります。つまり、SilverlightのUIはあくまで画面に描画されていないだけであり、裏ではしっかりと動作しているのです。

 このことからも、UIElementRendererクラスの役割は、SilverlightのUI要素を画像に変換するだけであることがお分かりいただけると思います。よって、UIElementRendererクラスを利用する場合、Silverlightのイベントはすべて利用することが可能であるといえます。

次のページ
まとめ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Windows Phone 7.5でつくる3Dアプリケーション連載記事一覧

もっと読む

この記事の著者

もとひろん(モト スクウェア ソリューション)

自営業でシステムエンジニアを営んでおります。主に.NETテクノロジによるシステム開発を得意としておりますが、いざとなれば何でもやります。ふつつかものですが、よろしくお願い致します!WebサイトMOTO SQUARE SOLUTIONTwitter@MOTOSQUARE 

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6244 2011/11/04 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング