내보내기(0) 인쇄
모두 확장

방법: Windows Phone 응용프로그램에서 Silverlight 및 XNA Framework 결합

2012-02-09

이 항목에서는 Silverlight와 XNA Framework를 결합하는 기본 응용프로그램을 만드는 단계별 지침을 제공합니다. Windows Phone용 코드 샘플 항목에서 이러한 완료된 Silverlight/XNA Framework 샘플을 확인할 수 있습니다. 동일한 페이지에 보다 정교한 샘플인 MyLittleTeapot도 있으며, 이 샘플은 Silverlight 입력 시스템의 제스처에 응답하여 XNA Framework 콘텐츠를 업데이트하는 방법을 시연합니다.

팁팁:

계속하기 전에 Silverlight 및 XNA를 결합하는 프로젝트 템플릿 사용을 읽어보고 이 문서에서 사용된 프로젝트 템플릿으로 생성되는 코드에 대해 이해하십시오.

과거에는 Windows Phone 응용프로그램을 빌드하는 데 Silverlight를 사용할지 아니면 XNA Framework를 사용할지를 결정해야 했습니다. 일부 클래스를 여러 프레임워크 사이에 공유할 수 있는 반면, 비주얼에는 프레임워크 한 개만 사용할 수 있습니다. Windows Phone OS 7.1 부터 새 SharedGraphicsDeviceManagerUIElementRenderer 클래스를 사용하여 Silverlight와 XNA Framework를 단일 응용프로그램에 결합할 수 있습니다.

참고참고:

다음 절차의 단계는 Windows Phone용 Visual Studio 2010 Express에 적용됩니다. Visual Studio 2010 Professional 또는 Visual Studio 2010 Ultimate용 추가 기능을 사용하는 경우에는 메뉴 명령이나 창 레이아웃에서 일부 소규모 변형이 나타날 수 있습니다.  

Windows Phone Silverlight 응용프로그램을 만드는 첫 단계는 새 프로젝트를 만드는 것입니다.

새 프로젝트를 만들려면

  1. Windows Phone SDK 를 다운로드하여 설치했는지 확인합니다. 자세한 내용은 Windows Phone SDK 설치를 참조하십시오.

  2. Windows 시작 메뉴에서 Windows Phone용 Visual Studio 2010 Express 를 시작합니다. 등록 창이 나타나면 등록하거나 창을 일시적으로 취소할 수 있습니다.

  3. 파일 | 새 프로젝트 메뉴 명령을 선택하여 새 프로젝트를 만듭니다.

  4. 새 프로젝트 창이 표시됩니다. Visual C# 템플릿을 확장하고 Windows Phone용 Silverlight 템플릿을 선택합니다.

  5. Windows Phone Silverlight 및 XNA 응용프로그램 템플릿을 선택합니다. 프로젝트 이름에 원하는 이름을 입력합니다.

    GetStartedNewProjectSilverlightXNA
  6. 확인을 클릭합니다. Visual Studio 에서 새 프로젝트가 생성되고 Visual Studio 디자이너 창에 MainPage.xaml이 열립니다.

    프로젝트를 만든 후 경고 창에 다음과 유사한 항목이 표시될 수 있습니다. "'SilverlightXNAAppLib' 프로젝트를 참조할 수 없습니다. 참조된 프로젝트가 다른 프레임워크 패밀리(.NETFramework)를 대상으로 합니다." 이 오류는 무시해도 됩니다. 단순히 Silverlight 및 XNA Framework 어셈블리 간의 이름 지정 차이점을 나타내는 것입니다.

  7. Visual Studio 상단의 대상 드롭다운에서 Windows Phone 에뮬레이터가 선택되어 있는지 확인합니다.

  8. Windows Phone 에뮬레이터 아래에서 F5 키를 눌러 프로젝트를 실행합니다.

  9. 에뮬레이터에서 게임 페이지로 변경 버튼을 누릅니다.

기본 프로젝트가 XNA Framework를 사용하여 Windows Phone 화면을 CornflowerBlue 색으로 전환합니다. 이후에 추가될 항목은 다음과 같습니다.

  • 화면에 사각형 애니메이션을 적용하는 코드 추가

  • Silverlight Button 컨트롤을 추가하고 사각형의 색을 변경하는 색 패널 만들기

  • 색 패널의 표시 여부를 설정/해제하는 버튼 추가

XNA Framework는 이러한 컨트롤과 애니메이션 적용된 사각형을 렌더링합니다.

다양한 색의 사각형을 만들어 프로젝트의 라이브러리 콘텐츠에 추가합니다.

새 그래픽 라이브러리 콘텐츠를 만들려면

  1. 다음 그래픽을 마우스 오른쪽 버튼으로 클릭하여 다른 이름으로 사진 저장…을 선택합니다.

    빨간색 사각형
  2. 사진 저장 대화 상자에서 프로젝트를 만든 디렉터리를 탐색합니다.

  3. 사진을 XxxxLibContent 디렉터리에 redRect.jpg로 저장합니다. 여기서 Xxxx는 이 항목 앞부분의 새 프로젝트 만들기 섹션에 나오는 5단계에서 입력한 프로젝트 이름입니다.

  4. 다음 두 그래픽에도 동일한 작업을 수행한 후 두 그래픽을 각각 greenRect.jpgblueRect.jpg로 저장합니다.

    녹색 사각형

    파란색 사각형
  5. 솔루션 탐색기에서 XxxxLibContent (Content)를 마우스 오른쪽 버튼으로 클릭합니다. 여기서 Xxxx는 이 항목 앞부분의 새 프로젝트 만들기 섹션에 나오는 5단계에서 입력한 프로젝트 이름입니다.

  6. 상황에 맞는 메뉴에서 추가 > 기존 항목…을 선택합니다.

  7. 기존 항목 추가 대화 상자에서 Ctrl 키를 누른 상태에서 blueRect.jpg, greenRect.jpgredRect.jpg를 클릭하여 세 파일을 모두 선택합니다.

  8. 추가 버튼을 클릭하여 그래픽 파일을 프로젝트에 추가합니다.

이 단원에서는 그래픽 콘텐츠로 사각형을 로드하고 현재 선택된 사각형에 애니메이션을 적용합니다.

그래픽을 로드하고 애니메이션 효과를 주려면

  1. 솔루션 탐색기에서 GamePage.xaml 왼쪽의 삼각형을 클릭하여 확장합니다.

  2. 코드 편집기에서 GamePage.xaml.cs를 두 번 클릭하여 엽니다.

  3. GamePage 클래스의 클래스 범위에서 4개의 Texture2D 변수를 선언합니다.

    // 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. GamePage 클래스의 클래스 범위에서 두 개의 Vector2 변수를 선언합니다.

    // 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 에뮬레이터를 선택하고 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 요소를 만듭니다. 먼저 행이 세 개인 Grid를 정의합니다. Auto 키워드를 사용하여 맨 위의 행과 맨 아래 행의 Height 속성이 해당 콘텐츠를 기준으로 정의됩니다. 가운데 행 Height 속성에 별표(*)를 사용하면 해당 행이 다른 두 행 사이의 나머지 공간을 모두 차지합니다.

    다음으로 XAML은 Click 이벤트 처리기를 ColorPanelToggleButton_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"이라는 StackPanelVisibility 속성을 간단히 설정/해제합니다.

  4. XAML에서 선언한 색 Button 요소에 대한 다음 세 개의 Click 처리기를 복사하여 ControlPanelToggleButton_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.Begin 호출과 spriteBatch.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 에뮬레이터를 선택하고 F5 키를 눌러 응용프로그램을 실행합니다. 다음 이미지와 매우 비슷한 내용이 표시될 것입니다.

    GetStartedSilverlightXNARunning
  7. 색 패널에서 응용프로그램 맨 아래에 있는 버튼을 클릭하여 애니메이션 적용 사각형의 색을 전환합니다.

  8. 응용프로그램 상단에 있는 색 패널 설정/해제 버튼을 클릭하여 색 패널을 표시하거나 숨깁니다.

표시:
© 2014 Microsoft