エクスポート (0) 印刷
すべて展開

最初のゲーム - 2D の XNA Game Studio

次の手順を実行して、XNA Game Studio を使用してスプライト ベースの単純なゲームを作成します。これらのサンプル コードは、Windows Phone を含めてすべてのプラットフォームで動作します。

Bb203893.note(ja-jp,XNAGameStudio.40).gifNote
スプライトは、SpriteBatch.Draw の呼び出しを使用して画面上に表示される単純な 2D グラフィック (ビットマップなど) です。

完全なサンプル コード

このチュートリアルのコードは、このチュートリアルの本文で説明する手法を実際に示したものです。このチュートリアルの完全なサンプル コードをダウンロードできます。ダウンロード内容には、完全なソース コードと、このサンプルに必要な追加のサポート ファイルが含まれます。

ステップ 1 : ソフトウェアのインストール

作業を開始する前に、サポートされているバージョンの Microsoft Visual Studio ツールや XNA Game Studio などの必要なソフトウェアがすべてインストールされていることを確認してください。必要なプログラムの一覧については、「ソフトウェアのインストール要件」を参照してください。

ステップ 2 : 新しいプロジェクトの作成

  1. [スタート] メニューの [すべてのプログラム] をポイントし、[XNA Game Studio 4.0] フォルダーをクリックします。次に、サポートされているバージョンの Microsoft Visual Studio ツールをクリックします。

  2. スタート ページが表示されたら、[ファイル] メニューの [新しいプロジェクト] をクリックします。

    ダイアログ ボックスが開き、左側のペインに [プロジェクトの種類] の一覧がツリー構造で表示されます。

  3. ツリーで [Visual C#] ノードの下の [XNA Game Studio 4.0] ノードを選択します。

    利用可能な一連のプロジェクトが右側のペインに表示されます。

  4. ダイアログ ボックスの右側のペインで [Windows ゲーム (4.0)] をクリックし、プロジェクトのタイトル (「MyFirstGame」など) を [名前] ボックスに入力します。

  5. プロジェクトを保存する場所へのパスを [場所] ボックスに入力し、[OK] をクリックします。

    新しいプロジェクトを作成した後で、ゲームのコード ビューが表示されます。

ステップ 3 : コードの表示

困難な作業のいくつかはあらかじめ完了されています。これからゲームを構築して実行すると、GraphicsDeviceManager によってスクリーン サイズが設定され、空白画面がレンダリングされます。ゲームが自動的に実行および更新されます。必要に応じて、ゲームをおもしろくするためのコードを自由に挿入できます。

ゲームを開始および実行するコードの大半は既に記述されています。ここで、独自のコードを挿入できます。

  • Initialize メソッドでは、GraphicsDevice の初期化を必要としないアセットを初期化できます。
  • LoadContent メソッドでは、モデルやテクスチャーなどの必要なゲーム アセットを読み込みます。
  • UnloadContent メソッドでは、ゲーム アセットを解放できます。不要になったアセットは自動的に解放されるので、通常はここに追加コードは必要ありません。
  • Updateループは、次のゲーム ロジックの更新に最適です。オブジェクトの移動、プレイヤー入力の取得、オブジェクト間の競合の結果の判断などです。
  • Draw ループは、画面上のすべてのオブジェクトおよび背景のレンダリングに最適です。

ステップ 4 : スプライトの追加

次のステップでは、画面に描画できるグラフィックを追加します。小さい .bmp ファイルや .jpg ファイルなど、小さいグラフィックを使用します。独自のグラフィックを作成することもできます。さらに、見た目をよくするために隠しておきたい部分 (エッジやコーナー) を "非表示にする" スプライトを作成することもできます。

コンピューターからグラフィックを選択した後で、以下の手順を実行します。

  1. プロジェクトのソリューション エクスプローラーがウィンドウの右側に表示されていることを確認します。表示されていない場合は、[表示] メニューの [ソリューション エクスプローラー] をクリックします。

    表示されたソリューション エクスプローラーには、プロジェクトに関連付けられたファイルがツリー構造で示されています。ツリー内に [Content] というノードが表示されます。

  2. [Content] ノードを右クリックして、[追加][既存の項目] の順にクリックして、目的のグラフィックを探します。

    ファイルが 1 つも表示されていない場合は、[ファイルの種類] 選択ボックスの値を [テクスチャー ファイル] に変更してください。

  3. グラフィック ファイルをクリックし、[追加] をクリックします。

    グラフィック ファイルのエントリがソリューション エクスプローラーに表示されます。

  4. ソリューション エクスプローラーでグラフィックのエントリをクリックします。エントリが表示されていない場合は、[Content] ノードの左側のプラス記号 (+) をクリックしてこのノードを展開し、[Content] ノードの下に表示されるエントリをクリックしてください。

    追加したグラフィック ファイルは、XNA Framework Content Pipeline に自動的に追加されます。これにより、迅速かつ簡単にグラフィックをゲームに読み込むことができます。

    ソリューション エクスプローラーの [プロパティ] ウィンドウで、"Asset Name" プロパティを探します。名前をメモします。グラフィックをロードするコードでこの名前を使用して、ゲームにグラフィックを表示できます。

  5. [プロパティ] ウィンドウが表示されていない場合は、F4 キーを押すか、または [表示] メニューの [プロパティ ウィンドウ] をクリックします。

    次に、スプライトをロードして画面に表示するためのコードを記述する必要があります。

  6. ゲームのコード ビューに戻り、LoadContent メソッドを探して、そのメソッド内とメソッドの前に次のように行を追加します。

    // This is a texture we can render.
    Texture2D myTexture;
    
    // Set the coordinates to draw the sprite at.
    Vector2 spritePosition = Vector2.Zero;
    
    protected override void LoadContent()
    {
        // Create a new SpriteBatch, which can be used to draw textures.
        spriteBatch = new SpriteBatch(GraphicsDevice);
        myTexture = Content.Load<Texture2D>("mytexture");
    }
    

    親の Game クラスの Content プロパティが提供する ContentManager クラスによって、ゲーム アセットを読み込むことができます。

    前の手順で [プロパティ] ウィンドウに表示されていた "Asset Name" が、Content.Load の呼び出しで使用されていることを確認します。このコードにより、グラフィックをロードして描画の準備を行います。グラフィック デバイスがリセットされた場合 (ゲーム ウィンドウのサイズが変更された場合など) はグラフィックを再ロードします。

  7. 続いて、次に示すように Draw ループにコードを追加します。

    protected override void Draw(GameTime gameTime)
    {
        graphics.GraphicsDevice.Clear(Color.CornflowerBlue);
    
        // Draw the sprite.
        spriteBatch.Begin(SpriteSortMode.BackToFront, BlendState.AlphaBlend);
        spriteBatch.Draw(myTexture, spritePosition, Color.White);
        spriteBatch.End();
    
        base.Draw(gameTime);
    }
    

    このコードは、フレームごとにスプライトを画面に描画します。

    Begin メソッドによって渡されるパラメーター BlendState.AlphaBlend に注意してください。このパラメーターにより、Draw メソッドがソース カラーのアルファ チャンネルを使用して透明度エフェクトを作成し、デスティネーション カラーがソース カラーを通して表示されるようにします。

  8. ゲームを構築して実行します。

    スプライトが表示されます。

ここで動きを追加してみましょう。

ステップ 5 : スプライトの移動および方向反転

  • Update メソッド内のコード行を次のように変更します。

    void UpdateSprite(GameTime gameTime)
    {
        // Move the sprite by speed, scaled by elapsed time.
        spritePosition +=
            spriteSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds;
    
        int MaxX =
            graphics.GraphicsDevice.Viewport.Width - myTexture.Width;
        int MinX = 0;
        int MaxY =
            graphics.GraphicsDevice.Viewport.Height - myTexture.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;
        }
    }
    

これでフレームごとにスプライトを動かすロジックが少し追加され、スプライトがゲーム ウィンドウのエッジに当たった場合に向きが変更されるようになりました。

  • ゲームを構築して実行します。

スプライトは、画面全体を動き回り、ゲーム ウィンドウのエッジに当たると向きが変更されます。

ステップ 6 : 追加の作業

ここからは、自由に作業してください。

このサンプルを拡張する方法をいくつか紹介します。

コミュニティの追加

追加
表示:
© 2015 Microsoft