情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

Windows Phone 8 用の初めての XNA Game Studio 4.0 アプリを作成する方法

2014/06/18

対象: Windows Phone OS 7.1

このトピックでは、Windows Phone の最初の XNA Game Studio 4.0 アプリを作成するための手順を順番に説明します。完成版の Hello XNA Framework サンプルをダウンロードすることも可能です。

Windows Phone OS 7.1 向けの XNA Game Studio 4.0 アプリは、これまでどおり完全にサポートされており、Windows Phone 8 デバイスでも実行できます。ただし、Windows Phone OS 8.0 を対象として XNA Framework アプリをコンパイルまたはアップグレードすることはできません。Windows Phone 8 での XNA Framework アプリのサポートの詳細については、「Windows Phone 8 の XNA Framework とアプリの開発」を参照してください。

メモメモ:

この手順は Visual Studio Express 2012 for Windows Phone 用です。Visual Studio で既にウィンドウ レイアウトかメニューをカスタマイズした場合、または Visual Studio Professional 以上を使用している場合、メニュー コマンドかレイアウトが一部異なることがあります。

このトピックは、次のセクションで構成されています。

Windows Phone 用の XNA Game Studio 4.0 アプリ作成の最初の手順として、新しいプロジェクトを作成します。

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

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

  2. Windows のスタート画面から Visual Studio を起動します。登録ウィンドウが表示された場合、製品を登録するか、一時的にウィンドウを閉じます。

  3. [ファイル] メニューの [新しいプロジェクト] をクリックして、新しいプロジェクトを作成します。[新しいプロジェクト] ウィンドウが表示されます。

  4. Visual C# テンプレートの一覧の [XNA Game Studio 4.0] グループ内で、[Windows Phone Game (4.0)] テンプレートを選択します。[新しいプロジェクト] ウィンドウのプロジェクトの [名前] は、WindowsPhoneGame1 のままでかまいません。

    GetStartedNewProjectXNA
  5. [OK] をクリックします。Windows Phone OS 7.1 を対象とした XNA Framework アプリのみを作成できるので、Windows Phone の [プラットフォームの選択] ダイアログ ボックスは表示されません。

  6. 新しいプロジェクトが作成され、Visual Studio デザイナーに Game1.cs が表示されます。

次の手順では、ソリューションにグラフィック オブジェクトとサウンド ファイルを追加します。

コンテンツを追加するには

  1. ソリューション エクスプローラーが Visual Studio に表示されていることを確認します。表示されていない場合は、[表示] メニューの [ソリューション エクスプローラー] を選択してソリューション エクスプローラーを表示します。

  2. ソリューション エクスプローラーに、アプリのコンテンツを格納するための 2 つめのプロジェクトが作成されていることに注目してください。既定のプロジェクト名を使用した場合、このコンテンツ プロジェクトは WindowsPhoneGame1Content (Content) として表示されます。この手順では、このプロジェクトにコンテンツ ファイルを追加します。

  3. 最初にグラフィック ファイルを追加します。既定で新しいプロジェクトに追加された PhoneGameThumb.png を使用するか、独自のグラフィック ファイルを使用します。グラフィック オブジェクトのサイズは 64 x 64 ピクセル程度が最適です。

    ソリューション エクスプローラーで、コンテンツ プロジェクトのプロジェクト ノードを右クリックし、[追加] の [既存の項目] をクリックします。[既存項目の追加] ダイアログ ボックスで、ファイルの種類の一覧から [イメージ ファイル] を選択します。目的のグラフィック ファイルを参照して選択し、[追加] をクリックします。グラフィック オブジェクトがプロジェクトに追加されます。

    ソリューション エクスプローラーでこのグラフィック ファイルを選択します。次に、[プロパティ] ウィンドウでファイル プロパティを確認します。グラフィック オブジェクトのアセット名PhoneGameThumb であることを確認します。

  4. 次に、サウンド ファイルを追加します。この例では、Windows に付属する Windows Ding.wav サウンド ファイルを使用します。独自のサウンド ファイルを使用することもできます。1 秒程度の短いサウンドを推奨します。

    ソリューション エクスプローラーで、コンテンツ プロジェクトのプロジェクト ノードを右クリックし、[追加] の [既存の項目] をクリックします。[既存項目の追加] ダイアログ ボックスで、ファイルの種類の一覧から [オーディオ ファイル] を選択します。C:\Windows\Media を参照して Windows Ding.wav を選択し、[追加] をクリックします。サウンド ファイルがプロジェクトに追加されます。

    ソリューション エクスプローラーでこのサウンド ファイルを選択します。次に、[プロパティ] ウィンドウでファイル プロパティを確認します。サウンド ファイルのアセット名Windows Ding であることを確認します。

    次の図に、グラフィック ファイルとサウンド ファイルが含まれているコンテンツ プロジェクトを示します。

    GetStartedPropertiesXNA

この手順では、2 つのグラフィック オブジェクトを画面上で移動させ、それらが衝突したことを検出し、衝突時にサウンドを再生するコードを追加します。新しいプロジェクトには既定でゲーム アプリのフレームワークが提供されます。以降の手順では、次のタスクを実行します。

  • 変数の追加

  • LoadContent メソッドでのグラフィック オブジェクトとサウンド アセットの読み込み

  • Draw ループでの画面上へのグラフィック オブジェクトの描画

  • Update ループでのグラフィック オブジェクトの位置の更新と衝突の検出

コードを追加するには

  1. Game1 クラスに以下の変数をコピーして貼り付けます。これらの変数は、既存の SpriteBatch spriteBatch 変数宣言の後に置きます。それぞれのグラフィック オブジェクトとその位置、速度、高さ、幅を追跡する変数のペアがあります。また、サウンド効果を参照する 1 つの変数があります。

    
            Texture2D texture1;
            Texture2D texture2;
            Vector2 spritePosition1;
            Vector2 spritePosition2;
            Vector2 spriteSpeed1 = new Vector2(50.0f, 50.0f);
            Vector2 spriteSpeed2 = new Vector2(100.0f, 100.0f);
            int sprite1Height;
            int sprite1Width;
            int sprite2Height;
            int sprite2Width;
    
            SoundEffect soundEffect;
    
    
  2. LoadContent メソッドを以下のコード行で置き換えます。このコードは、グラフィック オブジェクトを 2 回読み込みます。各グラフィック オブジェクトの画面上の初期位置が指定され、それぞれの高さと幅が計算されます。

    protected override void LoadContent()
    {
        // Create a new SpriteBatch, which can be used to draw textures.
        spriteBatch = new SpriteBatch(GraphicsDevice);
    
        texture1 = Content.Load<Texture2D>("PhoneGameThumb");
        texture2 = Content.Load<Texture2D>("PhoneGameThumb");
      
        soundEffect = Content.Load<SoundEffect>("Windows Ding");
    
        spritePosition1.X = 0;
        spritePosition1.Y = 0;
    
        spritePosition2.X = graphics.GraphicsDevice.Viewport.Width - texture1.Width;
        spritePosition2.Y = graphics.GraphicsDevice.Viewport.Height - texture1.Height;
    
        sprite1Height = texture1.Bounds.Height;
        sprite1Width = texture1.Bounds.Width;
    
        sprite2Height = texture2.Bounds.Height;
        sprite2Width = texture2.Bounds.Width;
    }
    
    
  3. Draw メソッドを以下のコード行で置き換えます。このコードは、各グラフィック オブジェクトをそれぞれの現在位置で画面上に描画します。各グラフィック オブジェクトは、それぞれ違って見えるように、異なる BlendState を指定します。

    protected override void Draw(GameTime gameTime)
    {
        graphics.GraphicsDevice.Clear(Color.CornflowerBlue);
    
        // Draw the sprite.
        spriteBatch.Begin(SpriteSortMode.BackToFront, BlendState.AlphaBlend);
        spriteBatch.Draw(texture1, spritePosition1, Color.White);
        spriteBatch.End();
    
        spriteBatch.Begin(SpriteSortMode.BackToFront, BlendState.Opaque);
        spriteBatch.Draw(texture2, spritePosition2, Color.Gray);
        spriteBatch.End();
    
        base.Draw(gameTime);
    
    }
    
    
  4. Update メソッドを以下のコード行で置き換えます。また、このコードで、UpdateSpriteCheckForCollision メソッドを追加します。Update メソッドの新しいコードでは、それぞれのスプライトの位置を UpdateSprite メソッドで更新します。UpdateSprite メソッドでは、スプライトが画面の側面に衝突したかどうかも確認します。スプライトが画面の側面に衝突した場合、スプライトの移動方向を変更します。最後に、Update メソッドで CheckForCollision メソッドを呼び出して、2 つのグラフィック オブジェクトの跳ね返りが互いに交差するかどうかを確認します。跳ね返りが交差する場合は、サウンド ファイルを再生します。

    protected override void Update(GameTime gameTime)
    {
        // Allow the game to exit.
        if (GamePad.GetState(PlayerIndex.One).Buttons.Back ==
            ButtonState.Pressed)
            this.Exit();
    
        // Move the sprite around.
        UpdateSprite(gameTime, ref spritePosition1, ref spriteSpeed1);
        UpdateSprite(gameTime, ref spritePosition2, ref spriteSpeed2);
        CheckForCollision();
    
        base.Update(gameTime);
    }
    
    void UpdateSprite(GameTime gameTime, ref Vector2 spritePosition, ref Vector2 spriteSpeed)
    {
        // Move the sprite by speed, scaled by elapsed time.
        spritePosition +=
            spriteSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds;
    
        int MaxX =
            graphics.GraphicsDevice.Viewport.Width - texture1.Width;
        int MinX = 0;
        int MaxY =
            graphics.GraphicsDevice.Viewport.Height - texture1.Height;
        int MinY = 0;
    
        // 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;
        }
    
    }
    
    void CheckForCollision()
    {
        BoundingBox bb1 = new BoundingBox(
            new Vector3(spritePosition1.X - (sprite1Width / 2), spritePosition1.Y - (sprite1Height / 2), 0),
            new Vector3(spritePosition1.X + (sprite1Width / 2), spritePosition1.Y + (sprite1Height / 2), 0));
    
        BoundingBox bb2 = new BoundingBox(
            new Vector3(spritePosition2.X - (sprite2Width / 2), spritePosition2.Y - (sprite2Height / 2), 0),
            new Vector3(spritePosition2.X + (sprite2Width / 2), spritePosition2.Y + (sprite2Height / 2), 0));
    
        if (bb1.Intersects(bb2))
        {
            soundEffect.Play();
        }
    
    }
    
    

これでアプリは完成です。次にアプリのビルド、実行、デバッグを行います。

アプリを実行するには

  1. [ビルド] メニューの [ソリューションのビルド] をクリックして、ソリューションをビルドします。

    エラーが発生した場合、[エラー一覧] ウィンドウにエラーが表示されます。[エラー一覧] ウィンドウが開いていない場合、[表示] メニューの [エラー一覧] をクリックして開くことができます。エラーがある場合、上記の手順を確認し、エラーを修正した後、もう一度ソリューションをビルドします。

  2. 標準ツール バーで、アプリの配置対象が Emulator WVGA など、Windows Phone Emulator の値の 1 つに設定されていることを確認します。

    Target on Standard Toolbar selecting emulator

  3. F5 キーを押すか [デバッグ] メニューの [デバッグの開始] をクリックして、アプリを実行します。これによってエミュレーター ウィンドウが開き、アプリが起動します。2 つのグラフィックが画面上で飛び跳ね、互いに交差するとサウンドが再生されます。

    GetStartedFirstAppRunningXNA
  4. ロック画面になった場合、エミュレーターのロックを解除するには、画面の下部をクリックして上方にスワイプします。

  5. デバッグを停止するには、[デバッグ] メニューの [デバッグの停止] を選択します。

これで、Windows Phone 用の基本的な XNA Game Studio 4.0 アプリが作成されました。XNA Game Studio 開発の詳細については、次のトピックを参照してください。

表示: