矩形に色を設定して描画

説明の画像

XNA の Direct3D でトライアングルを組み合わせた矩形に色を設定して描画します。

前田稔(Maeda Minoru)の超初心者のプログラム入門

プログラムの説明

  1. XNA では三次元座標を定義して、ポイントやラインやポリゴンを描画することが出来ます。
    Triangle(三角形)を二個組み合わせた矩形に色を設定して描画してみましょう。
  2. Game1.cs を編集して、次の領域を宣言して下さい。
    vertexDeclaration は頂点座標の形式を定義する領域です。
    vertex には三次元座標だけで無く、色や法線ベクトルやテクスチャ座標を含めることが出来ます。
    今回は三次元座標と色を設定して描画します。
    他の領域の説明は「ポイントプリミティブの描画」を参照して下さい。
        GraphicsDeviceManager graphics = null;
        VertexDeclaration vertexDeclaration = null; // 頂点データ定義
        VertexBuffer vertexBuffer = null;           // 頂点バッファ
        BasicEffect basicEffect = null;             // 基本エフェクト
        
  3. 矩形を描画するための準備処理(初期化)を LoadContent() に集約してみました。
    vertexDeclaration に頂点データの形式(VertexPositionColor)を設定します。
    頂点データの形式は「ポイントプリミティブの描画」を参照して下さい。
    今回は頂点座標と色を設定しています。
    basicEffect を生成して VertexColorEnabled を true に設定します。
    basicEffect.View に View 座標を設定します。
    basicEffect.Projection に Projection を設定します。
    矩形の頂点座標と色を定義する vertices[] を用意します。
    TriangleStrip で描画するので、頂点の個数は4個になります。
    TriangleStrip の説明は 前田稔の超初心者のプログラム入門 から DirectX9 講座を参照して下さい。
    vertexBuffer を生成して vertices[] に設定された頂点データを書き込みます。
        protected override void LoadContent()
        {
            // 頂点定義データを作成
            vertexDeclaration = new VertexDeclaration(
                GraphicsDevice, VertexPositionColor.VertexElements);
            // エフェクトを作成
            basicEffect = new BasicEffect(GraphicsDevice, null);
            // エフェクトで頂点カラーを有効にする
            basicEffect.VertexColorEnabled = true;
            // ビューマトリックスをあらかじめ設定 ((0, 0, 10) から原点を見る)
            basicEffect.View = Matrix.CreateLookAt(
                new Vector3(0.0f, 0.0f, 10.0f),
                Vector3.Zero,
                Vector3.Up );
            // プロジェクションマトリックスをあらかじめ設定
            basicEffect.Projection = Matrix.CreatePerspectiveFieldOfView(
                MathHelper.ToRadians(45.0f),
                (float)GraphicsDevice.Viewport.Width / (float)GraphicsDevice.Viewport.Height,
                1.0f, 100.0f );
            // 頂点データを作成する
            VertexPositionColor[] vertices = new VertexPositionColor[4];
            vertices[0] = new VertexPositionColor(new Vector3(-2.0f, 2.0f, 0.0f), Color.Blue);
            vertices[1] = new VertexPositionColor(new Vector3(2.0f, 2.0f, 0.0f), Color.Green);
            vertices[2] = new VertexPositionColor(new Vector3(-2.0f, -2.0f, 0.0f), Color.Red);
            vertices[3] = new VertexPositionColor(new Vector3(2.0f, -2.0f, 0.0f), Color.Yellow);
            // 頂点バッファ作成
            vertexBuffer = new VertexBuffer(GraphicsDevice,
                VertexPositionColor.SizeInBytes * 4, BufferUsage.None);
            // 頂点データを頂点バッファに書き込む
            vertexBuffer.SetData<VertexPositionColor>(vertices);
        }
        
  4. Draw() メソッドで、TriangleStrip を使って頂点に色を設定した矩形を描画します。
    GraphicsDevice.VertexDeclaration に頂点データの形式を設定します。
    GraphicsDevice.Vertices[0].SetSource() で vertexBuffer を設定します。
    GraphicsDevice.DrawPrimitives() で TriangleStrip で矩形(二個の三角形)を描画します。
        protected override void Draw(GameTime gameTime)
        {
            // 画面を指定した色でクリアします
            GraphicsDevice.Clear(Color.CornflowerBlue);
    
            // 描画する頂点データの定義を設定
            GraphicsDevice.VertexDeclaration = vertexDeclaration;
    
            // 頂点バッファをセットします
            GraphicsDevice.Vertices[0].SetSource( vertexBuffer, 0,
                VertexPositionColor.SizeInBytes );
    
            // エフェクトの使用を開始します
            basicEffect.Begin();
    
            // パスの数だけ繰り替えし描画
            foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)
            {
                // パスの開始
                pass.Begin();
    
                // ポリゴン描画する
                GraphicsDevice.DrawPrimitives(PrimitiveType.TriangleStrip, 0, 2);
    
                // パスの終了
                pass.End();
            }
    
            // エフェクトの使用を終了する
            basicEffect.End();
    
            // 登録された DrawableGameComponent を描画する
            base.Draw(gameTime);
        }
        

【演習】

  1. 頂点の色を変えて描画して下さい。
  2. カメラを近づけて(引いて)、大きく(小さく)描画して下さい。

前田稔(Maeda Minoru)の超初心者のプログラム入門

超初心者のプログラム入門(XNA(C#) game program)