方法: Windows Phone アプリケーションで Silverlight と XNA Framework を組み合わせる

2012/02/09

このトピックでは、Silverlight および XNA Framework を組み合わせて基本的なアプリケーションを作成する手順を示します。完成した Silverlight/XNA Framework サンプルは、「Windows Phone のコード サンプル」トピックにあります。また、Silverlight の入力システムからのジェスチャに応じて XNA Framework のコンテンツを更新する方法を示すページには、MyLittleTeapot という名前のより複雑なサンプルもあります。

ヒントヒント:

先に進む前に「Silverlight と XNA Framework を組み合わせるプロジェクト テンプレートの使用」に目を通し、この記事で使用するプロジェクト テンプレートによって作成されるコードを確認してください。

以前は、Silverlight または XNA フレームワークを使用して Windows Phone アプリケーションを構築するかどうかを決定する必要がありました。フレームワーク間で複数のクラスを共有できますが、ビジュアルとして使用できるフレームワークは 1 つだけです。Windows Phone OS 7.1 以降では、新しい SharedGraphicsDeviceManager クラスと UIElementRenderer クラスを使用することで 1 つのアプリケーションに Silverlight と XNA Framework を組み合わせられるようになりました。

注注:

次の手順は、Visual Studio 2010 Express for Windows Phone 向けです。 Visual Studio 2010 Professional や Visual Studio 2010 Ultimate のアドインを使用している場合は、メニュー コマンドやウィンドウのレイアウトが多少異なる場合があります。

Windows Phone Silverlight アプリケーションを作成する最初の手順として、新しいプロジェクトを作成します。

新しいプロジェクトを作成するには

  1. Windows Phone SDK をダウンロードし、インストールしていることを確認します。詳細については、「Windows Phone SDK のインストール」を参照してください。

  2. Windows の [スタート] メニューから [Visual Studio 2010 Express for Windows Phone] を起動します。[登録] ウィンドウが表示される場合、登録するか、または一時的にウィンドウを閉じることができます。

  3. [ファイル]、[新しいプロジェクト] の順にメニュー コマンドを選択して、新しいプロジェクトを作成します。

  4. [新しいプロジェクト] ウィンドウが表示されます。Visual C# のテンプレートを展開してから、Silverlight for Windows Phone のテンプレートを選択します。

  5. Windows Phone Silverlight and XNA Application テンプレートを選択します。プロジェクトの [名前] に任意の名前を入力します。

    GetStartedNewProjectSilverlightXNA
  6. [OK] をクリックします。Visual Studio で新しいプロジェクトが作成され、MainPage.xaml が Visual Studio デザイナー ウィンドウで開きます。

    プロジェクトを作成すると、[警告] ウィンドウに "プロジェクト 'SilverlightXNAAppLib' を参照できません。参照先のプロジェクトは、別のフレームワーク ファミリ (.NETFramework) をターゲットにしています。" というような項目が表示されることがあります。このエラーは無視してかまいません。これは、Silverlight と XNA Framework の間でアセンブリの命名方法が異なることを表しているだけです。

  7. Visual Studio の上部にあるターゲットのドロップダウンで [Windows Phone エミュレーター] が選択されていることを確認します。

  8. F5 キーを押して、Windows Phone エミュレーターのプロジェクトを実行します。

  9. エミュレーターで [ゲーム ページに変更] ボタンを押します。

既定のプロジェクトは、XNA Framework を使用して Windows Phone 画面をクリアし、[コーンフラワーブルー] 色で塗りつぶします。ここでは、以下を行います。

  • 画面の四角形をアニメーション表示するコードを追加する

  • 四角形の色を変更するためのカラー パネルを作成する Silverlight ボタン コントロールを追加する

  • カラー パネルの表示設定を切り替えるボタンを追加する

XNA Framework は、上記のコントロールとアニメーション表示される四角形をレンダリングします。

異なる色の四角形を作成し、プロジェクトのライブラリ コンテンツに追加します。

新しいグラフィックス ライブラリ コンテンツを作成するには

  1. 次のグラフィックスを右クリックし、[名前を付けて画像を保存] を選択します。

    赤色の四角形
  2. [画像の保存] ダイアログでプロジェクトを作成したディレクトリに移動します。

  3. 画像を redRect.jpg という名前で XxxxLibContent ディレクトリに保存します。ここで、Xxxx はこのトピックの前のセクション「新しいプロジェクトの作成」の手順 5 で入力したプロジェクトの名前になります。

  4. 次の 2 つのグラフィックスに対しても同じ手順を繰り返し、それぞれ greenRect.jpg および blueRect.jpg という名前で保存します。

    緑色の四角形

    青色の四角形
  5. ソリューション エクスプローラーで [XxxxLibContent (Content)] を右クリックします。ここで、Xxxx は前のセクション「新しいプロジェクトの作成」の手順 5 で入力した名前になります。

  6. コンテキスト メニューで [追加] > [既存の項目…] の順に選択します。

  7. [既存の項目の追加] ダイアログで CTRL キーを押しながら、blueRect.jpggreenRect.jpg、および redRect.jpg をクリックして 3 個のファイルをすべて選択します。

  8. [追加] ボタンをクリックし、グラフィックス ファイルをプロジェクトに追加します。

このセクションでは、四角形をグラフィックス コンテンツとして読み込み、選択中の四角形をアニメーション化します。

グラフィックスを読み込んでアニメーション表示するには

  1. ソリューション エクスプローラーGamePage.xaml の左にある三角形をクリックして展開します。

  2. コード エディターで GamePage.xaml.cs をダブルクリックして開きます。

  3. 4 個の Texture2D 変数を GamePage クラスのクラス スコープで宣言します。

    // The current rectangle
    Texture2D texture;
    
    // A variety of rectangle colors
    Texture2D redTexture;
    Texture2D greenTexture;
    Texture2D blueTexture;
    
  4. OnNavigatedTo メソッドが表示されるまで下にスクロールします。

  5. TODO: コメントの後に以下のコードを追加します。

    // If texture is null, we've never loaded our content.
    if (null == texture)
    {
        redTexture = contentManager.Load<Texture2D>("redRect");
        greenTexture = contentManager.Load<Texture2D>("greenRect");
        blueTexture = contentManager.Load<Texture2D>("blueRect");
    
        // Start with the red rectangle.
        texture = redTexture;
    }
    
  6. 2 個の Vector2 変数を GamePage クラスのクラス スコープで宣言します。

    // Used to move the rectangle around the screen
    Vector2 spritePosition;
    Vector2 spriteSpeed = new Vector2(100.0f, 100.0f);
    
  7. OnUpdate メソッドのコンテンツを以下のコードで置き換えます。

    // Move the sprite by speed, scaled by elapsed time.
    spritePosition += spriteSpeed * (float)e.ElapsedTime.TotalSeconds;
    
    int MinX = 0;
    int MinY = 0;
    int MaxX = SharedGraphicsDeviceManager.Current.GraphicsDevice.Viewport.Width - texture.Width;
    int MaxY = SharedGraphicsDeviceManager.Current.GraphicsDevice.Viewport.Height - texture.Height;
    
    // Check for bounce.
    if (spritePosition.X > MaxX)
    {
        spriteSpeed.X *= -1;
        spritePosition.X = MaxX;
    }
    
    else if (spritePosition.X < MinX)
    {
        spriteSpeed.X *= -1;
        spritePosition.X = MinX;
    }
    
    if (spritePosition.Y > MaxY)
    {
        spriteSpeed.Y *= -1;
        spritePosition.Y = MaxY;
    }
    else if (spritePosition.Y < MinY)
    {
        spriteSpeed.Y *= -1;
        spritePosition.Y = MinY;
    }
    
  8. OnDraw メソッドのコンテンツを以下のコードで置き換えます。

    SharedGraphicsDeviceManager.Current.GraphicsDevice.Clear(Color.Black);
    
    // Draw the sprite
    spriteBatch.Begin();
    
    // Draw the rectangle in its new position
    spriteBatch.Draw(texture, spritePosition, Color.White);
    
    spriteBatch.End();
    
  9. ターゲットとして [Windows Phone Emulator] を選択し、F5 キーを押してアプリケーションを実行します。[ゲーム ページに変更] ボタンをクリックすると、次のイメージとほぼ同じものが表示されます。

    Silverlight XNA アプリケーションのアニメーション化した四角形

このセクションでは、XAML を使用して Silverlight Button コントロールのパネルを作成します。このボタンは、ユーザーが四角形の色を変更できるようにします。コントロール パネルを表示するかどうかを切り替えるボタンも追加します。これらのコントロールは UIElementRenderer クラスを使用して Texture2D にレンダリングされ、次に OnDraw メソッドの SpriteBatch オペレーションで画面に描画されます。

Silverlight コントロールを追加するには

  1. ソリューション エクスプローラーGamePage.xaml をダブルクリックしてデザイナーで開きます。

  2. ここでは XAML を使用するため以下のコメントは、

    <!--No XAML content as the page is rendered entirely with XNA-->
    

    以下の XAML コードで置き換えます。

    <!-- LayoutRoot is the root grid where all page content is placed. -->
    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
    
        <!-- Toggle the visibility of the ColorPanel. -->
        <Button Grid.Row="0" x:Name="ColorPanelToggleButton" Click="ColorPanelToggleButton_Click" Margin="1,0,-1,0">Toggle Color Panel</Button>
    
        <!-- Arrange buttons in a horizontal line by using StackPanel. -->
        <StackPanel x:Name="ColorPanel" Grid.Row="2"  Height="100" Orientation="Horizontal" HorizontalAlignment="Center" Visibility="Visible">
            <!-- Buttons to set the rectangle to specific colors -->
            <Button Click="redButton_Click" HorizontalAlignment="Center" Height="75" VerticalAlignment="Center" BorderThickness="3" Background="Red" Width="75" />
            <Button Click="greenButton_Click" HorizontalAlignment="Center" Height="75" VerticalAlignment="Center" BorderThickness="3" Background="Lime" Width="75" />
            <Button Click="blueButton_Click" HorizontalAlignment="Center" Height="75" VerticalAlignment="Center" BorderThickness="3" Background="Blue" Width="75" />
        </StackPanel>
    </Grid>
    

    この XAML コードは、その他すべての要素を格納する Grid 要素を作成します。最初に、3 つの行を持つ Grid を定義します。Auto キーワードを使用することによって、1 行目と 3 行目の Height プロパティは、そのコンテンツによって定義されます。2 行目の Height プロパティにアスタリスク (*) を使用することによって、この行は他の 2 行の間の残りのすべてのスペースを占めます。

    次に、XAML は ColorPanelToggleButton_Click と呼ばれるメソッドに Click イベント ハンドラーが設定された Button を定義します。

    その後、XAML はカラー パネルを構成する Button 要素を格納する StackPanel を定義します。StackPanelx:Name プロパティは ColorPanel に設定されています。この名前は、このパネルの表示設定を切り替えるために C# コードで使用します。

    それぞれの Button 要素には Background の色が設定されていて、Click イベント ハンドラーが指定されています。

    次の図は、アプリケーションがデザイナーでどのように表示されるかを示しています。

    GetStartedSilverlightXNALayout

コントロールを追加し、Click イベント ハンドラーの名前を割り当てたら、ハンドラー メソッドを実装する必要があります。

イベント ハンドラーを追加するには

  1. Visual Studio コード エディターで GamePage.xaml.cs を開くか、または切り替えます。

  2. ファイルの下部にある OnDraw メソッドの後まで、下にスクロールします。

  3. OnDraw メソッドの直後に以下のコードをコピーして貼り付けます。

    // Toggle the visibility of the StackPanel named "ColorPanel".
    private void ColorPanelToggleButton_Click(object sender, RoutedEventArgs e)
    {
        if (System.Windows.Visibility.Visible == ColorPanel.Visibility)
        {
            ColorPanel.Visibility = System.Windows.Visibility.Collapsed;
        }
        else
        {
            ColorPanel.Visibility = System.Windows.Visibility.Visible;
        }
    }
    

    このコードは、XAML コードで「ColorPanel」という名前を付けた StackPanel 内の Visibility プロパティを切り替えます。

  4. ControlPanelToggleButton_Click ハンドラーの後に、XAML で宣言した色の Button 要素のために次の 3 つの Click ハンドラーをコピーして貼り付けます。

    // Switch to the red rectangle.
    private void redButton_Click(object sender, RoutedEventArgs e)
    {
        texture = redTexture;
    }
    
    // Switch to the green rectangle.
    private void greenButton_Click(object sender, RoutedEventArgs e)
    {
        texture = greenTexture;
    }
    
    // Switch to the blue rectangle.
    private void blueButton_Click(object sender, RoutedEventArgs e)
    {
        texture = blueTexture;
    }
    

    これらのイベント ハンドラーは、画面に四角形を描画するために使用する "texture" と呼ばれる Texture2D オブジェクトが、OnNavigatedTo メソッドで読み込まれた適切な色付きの四角形を指し示すように設定します。

これでコントロールの作成とイベント ハンドラーのコーディングが完了したので、後はこれらを画面にレンダリングする必要があります。

Silverlight コントロールをレンダリングするには

  1. GamePage.xaml.cs ファイルの GamePage クラスのクラス スコープ レベルで UIElementRenderer を宣言します。

    // For rendering the XAML onto a texture
    UIElementRenderer elementRenderer;
    
  2. GamePage クラス コンストラクターで LayoutUpdated イベント ハンドラーを宣言します。

    // Use the LayoutUpdate event to know when the page layout 
    // has completed so that we can create the UIElementRenderer.
    LayoutUpdated += new EventHandler(GamePage_LayoutUpdated);
    
  3. GamePage_LayoutUpdated イベント ハンドラーを実装します。UIElementRenderer コンストラクターの呼び出しに含まれる this パラメーターは、GamePage.xaml ファイルの XAML コードで部分的に定義された GamePage クラスを参照しています。UIElementRenderer クラスは、UIElement から派生した XAML 要素を受け取り、これらを Texture2D オブジェクトにレンダリングします。

    void GamePage_LayoutUpdated(object sender, EventArgs e)
    {
      // Create the UIElementRenderer to draw the XAML page to a texture.
    
      // Check for 0 because when we navigate away the LayoutUpdate event
      // is raised but ActualWidth and ActualHeight will be 0 in that case.
      if ((ActualWidth > 0) && (ActualHeight > 0))
      {
        SharedGraphicsDeviceManager.Current.PreferredBackBufferWidth = (int)ActualWidth;
        SharedGraphicsDeviceManager.Current.PreferredBackBufferHeight = (int)ActualHeight;
      }
    
      if (null == elementRenderer)
      {
        elementRenderer = new UIElementRenderer(this, (int)ActualWidth, (int)ActualHeight);
      }
    }
    
    注注:

    ビジュアル ツリーから、UIElementRenderer コンストラクターに指定された Silverlight UIElement を削除することはできません。

  4. 次に、UIElementRenderer インスタンスを使用して Silverlight コントロールを画面に描画します。GamePage.xaml.cs ファイルで OnDraw メソッドを探します。spriteBatch.Begin の呼び出しの前に以下のコード行を追加します。このコードは、UIElementRendererTexture プロパティからアクセスできる XAML を実際にバッファーにレンダリングするコードです。

    // Render the Silverlight controls using the UIElementRenderer.
    elementRenderer.Render();
    
  5. また、OnDraw メソッドの spriteBatch.BeginspriteBatch.End の呼び出しのに以下のコードを行を追加します。

    // Using the texture from the UIElementRenderer, 
    // draw the Silverlight controls to the screen.
    spriteBatch.Draw(elementRenderer.Texture, Vector2.Zero, Color.White);
    
  6. ターゲットとして [Windows Phone Emulator] を選択し、F5 キーを押してアプリケーションを実行します。次のイメージのように表示されます。

    GetStartedSilverlightXNARunning
  7. アプリケーションの下部にあるカラー パネルのボタンをクリックし、アニメーション表示された四角形の色を切り替えます。

  8. アプリケーションの上部にある [Toggle Color Panel] ボタンをクリックしてカラー パネルを非表示または表示します。

表示: