テクスチャーの基本

矩形にテクスチャーを貼り付て描画します。

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

プログラムの説明

  1. Triangle(三角形)を二個組み合わせた矩形にテクスチャーを貼り付て描画します。
    テクスチャーを貼り付ける基本プログラムです。
    テクスチャーとして貼り付ける画像ファイルをプロジェクトの Content のフォルダーに格納して下さい。
    詳細は 画像をリソースとして組み込む を参照して下さい。
  2. Game1.cs を編集して、次の領域を宣言して下さい。
    vertexDeclaration は頂点座標の形式を定義する領域です。
    vertex には三次元座標だけで無く、色や法線ベクトルやテクスチャ座標を含めることが出来ます。
    他の領域の説明は「ポイントプリミティブの描画」を参照して下さい。
        GraphicsDeviceManager graphics; 
        Texture2D           texture;
        BasicEffect         basicEffect; 
        VertexDeclaration   vertexDeclaration; 
        VertexBuffer        vertexBuffer; 
        
  3. コンストラクタで RootDirectory を設定して下さい。
        public Game1() 
        { 
            graphics = new GraphicsDeviceManager( this ); 
            Content.RootDirectory = "Content";
        } 
        
  4. LoadContent() で矩形を定義して、テクスチャー座標を設定して、描画の準備を整えます。
    vertexDeclaration に頂点データの形式(VertexPositionTexture)を設定します。
    今回は頂点座標とテクスチャー座標を設定します。
    basicEffect を生成して TextureEnabled を true に設定します。
    basicEffect.View に View 座標を設定します。
    basicEffect.Projection に Projection を設定します。
    矩形の頂点座標とテクスチャー座標を定義する vertices[] を用意します。
    TriangleStrip で描画するので、頂点の個数は4個になります。
    テクスチャー座標は画像サイズに関係なく相対的に次のようになっています。

    一方、三次元座標は左下を基点にして、座標が大きくなる方向は「右(X座標), 上(Y座標)」です。
    vertexBuffer を生成して vertices[] に設定された頂点データを書き込みます。
    texture に画像(Ayu.jpg)を入力して basicEffect.Texture に設定します。
        protected override void LoadContent()
        {
            // 頂点定義データを作成
            vertexDeclaration = new VertexDeclaration(
                GraphicsDevice, VertexPositionTexture.VertexElements);
    
            // エフェクトを作成
            basicEffect = new BasicEffect(GraphicsDevice, null);
    
            // テクスチャーの使用を許可する
            basicEffect.TextureEnabled = true;
    
            // ビューマトリックスをあらかじめ設定 ((5, 2, 10) から原点を見る)
            basicEffect.View = Matrix.CreateLookAt(
                new Vector3(5.0f, 2.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);
    
            // 頂点バッファ作成
            vertexBuffer = new VertexBuffer(GraphicsDevice,
                VertexPositionTexture.SizeInBytes * 4, BufferUsage.None);
    
            // 頂点データを作成する
            VertexPositionTexture[] vertices = new VertexPositionTexture[4];
    
            vertices[0] = new VertexPositionTexture(new Vector3(-2.0f, 2.0f, 0.0f), new Vector2(0.0f, 0.0f)); //左上
            vertices[1] = new VertexPositionTexture(new Vector3(2.0f, 2.0f, 0.0f),  new Vector2(1.0f, 0.0f)); //右上
            vertices[2] = new VertexPositionTexture(new Vector3(-2.0f, -2.0f, 0.0f),new Vector2(0.0f, 1.0f)); //左下
            vertices[3] = new VertexPositionTexture(new Vector3(2.0f, -2.0f, 0.0f), new Vector2(1.0f, 1.0f)); //右下
    
            // 頂点データを頂点バッファに書き込む
            vertexBuffer.SetData<VertexPositionTexture>(vertices);
    
            // テクスチャー画像の読み込み
            //texture = Texture2D.FromFile(graphics.GraphicsDevice, "c:\\data\\test\\Ayu.jpg");
            texture = Content.Load<Texture2D>("Ayu");
    
            // エフェクトにテクスチャーをセットする
            basicEffect.Texture = texture;
        }
        
  5. 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, VertexPositionTexture.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)