透明色を設定した画像ファイルを描画する

XNA で透明色やアルファチャンネルを設定した画像を描画します。

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

プログラムの説明

  1. 前回作成した画像ファイルを描画するプロジェクトをコピーして、名前を ImgAlph に変更して下さい。
    Game1.cs を編集して、透明色やアルファチャンネルを設定した画像を描画します。
    プログラムは 画像ファイルを描画する に比べて次の一行が変わるだけです。
    「画像ファイルを描画する」のソースコード
    spriteBatch.Begin(SpriteBlendMode.None);
    透明色やアルファチャンネルを設定するソースコード
    spriteBatch.Begin(SpriteBlendMode.AlphaBlend);
  2. 透明色を設定した画像ファイルは png または dds で作成して下さい。
    png 形式で透明色を設定して保存するツールは、インターネットで検索すればすぐ見つかるはずです。
    gif でも透明色の設定が出来るのですが、残念ながら gif 形式は使えないようです。
    アルファチャンネル(透明色を含む)を設定した DDS ファイルの作成は 前田稔の超初心者のプログラム入門 から DirectX9 講座を参照して下さい。
    BMP 形式で透明色を使う方法は【NOTE】を参照して下さい。
  3. プログラムは「画像ファイルを描画する」とほとんど同じですが、主要な所だけもう一度掲載します。
    LoadContent() メソッドに画像ファイルを入力するコードを追加します。
    kishi.png または ffx2s.dds が画像ファイルの名前で c:\\data\\test\\ はファイルが格納されているパスです。
            protected override void LoadContent()
            {
                // Create a new SpriteBatch, which can be used to draw textures.
                spriteBatch = new SpriteBatch(GraphicsDevice);
    
                // TODO: use this.Content to load your game content here
                Mytexture = Texture2D.FromFile(graphics.GraphicsDevice, "c:\\data\\test\\kishi.png");
                //Mytexture = Texture2D.FromFile(graphics.GraphicsDevice, "c:\\data\\test\\ffx2s.dds");
            }
        
  4. Draw() メソッドです。
    同じ画像を Color(ブレンドする色)を変えて、縦に三枚並べてみました。
            protected override void Draw(GameTime gameTime)
            {
                graphics.GraphicsDevice.Clear(Color.CornflowerBlue);
    
                // TODO: Add your drawing code here
                // オプションでアルファ・ブレンディングを有効にしている
                spriteBatch.Begin(SpriteBlendMode.AlphaBlend);
                spriteBatch.Draw(Mytexture, new Vector2(0.0f, 0.0f), Color.White);
                spriteBatch.Draw(Mytexture, new Vector2(0.0f, 200.0f), Color.Green);
                spriteBatch.Draw(Mytexture, new Vector2(0.0f, 400.0f), new Color(0x80, 0xFF, 0x80));
                spriteBatch.End();
    
                base.Draw(gameTime);
        
  5. メニューの [デバッグ] から [デバッグ開始] または [デバッグなしで開始] を選択すればコンパイルされ、エラーが無ければ実行されます。
    透明色が設定された部分は、背景が透けて見えることを確認して下さい。

【演習】

  1. 透明色を設定した png 画像を作成して描画してみて下さい。
  2. アルファチャンネルを設定した dds 画像を作成して描画してみて下さい。
  3. キャラクタのエッジがギザギザして気になるときも、アルファチャンネルを設定した画像を使います。
    キャラクタのエッジをぼかした画像(dds)を作成して描画して下さい。
    画像の作成方法は 前田稔の超初心者のプログラム入門 から DirectX9 講座などを参考にして下さい。

【NOTE】

  1. bmp 形式では透明色に「紫(R=255, G=0, B=255)」を使うのですが、透明にするには画像をリソースとして組み込まなければならないようです。
  2. Color(赤,緑,青)に加えて、アルファ値を指定すると背景色とブレンドされるので試して下さい。
    128, 64, 32 がアルファ値です。
        spriteBatch.Draw(texture, new Vector2(400.0f, 0.0f), new Color(255, 255, 255, 128));
        spriteBatch.Draw(texture, new Vector2(400.0f, 200.0f), new Color(255, 255, 255, 64));
        spriteBatch.Draw(texture, new Vector2(400.0f, 400.0f), new Color(255, 255, 255, 32));
        

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

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