Dessiner des sprites transparents et semi-transparents

Page mise à jour :
Date de création de la page :

résumé

Dessinez une texture semi-transparente.

透明・半透明のスプライトを描画する

Environnement d’exploitation

Conditions préalables

Versions XNA prises en charge
  • 2.0
  • 3.0
  • 3.1
  • 4.0
Plates-formes prises en charge
  • Windows (XP SP2 ou version ultérieure, Vista, 7)
  • Xbox 360
  • Windows Phone 7
Version du Vertex Shader requise par Windows 2.0
Version du Pixel Shader requise par Windows 2.0

Environnement d’exploitation

plateforme
  • Windows 7
  • Xbox 360
  • Émulateur Windows Phone 7

substance

Si vous utilisez un fichier image qui contient des informations semi-transparentes telles que des valeurs alpha, vous pouvez créer des textures avec des informations semi-transparentes, et les sprites peuvent également être dessinés en semi-transparence. Dans ce cas, j’utilise une image PNG comme celle ci-dessous pour créer la texture (bien que l’image ci-dessous ait elle-même un fond noir pour la rendre plus facile à voir).

アルファ付き PNG ファイル

Bien qu’il s’agisse d’un programme, en fait, il est possible de dessiner un sprite en semi-transparence même avec le code sur la page « Afficher le sprite » tel quel. À l’origine, il n’est pas possible de dessiner de manière transparente à moins de spécifier un état de fusion qui peut être traité translucide, tel que « BlendState.AlphaBlend » dans la méthode « SpriteBatch.Begin », mais comme cette option est définie par défaut, elle peut être dessinée de manière transparente même avec le code tel quel.

Dans le code ci-dessous, nous spécifions explicitement « BlendState.AlphaBlend » pour la méthode « SpriteBatch.Begin ».

// BlendState.AlphaBlend(デフォルト) を指定してスプライトを透過させます
this.spriteBatch.Begin(SpriteSortMode.Deferred, BlendState.AlphaBlend);

SpriteBatch.Begin méthode

Appelez-le avant de dessiner le sprite. En interne, nous effectuons les réglages nécessaires pour dessiner des sprites.

sortMode SpriteSortMode Spécifie l’ordre dans lequel les sprites sont tirés de l’énumération SpriteSortMode. La valeur par défaut est SpriteSortMode.Deferred, qui est dessinée dans l’ordre dans lequel la méthode SpriteBatch.Draw est appelée.
blendState BlendState (en anglais) Comment mélanger la couleur du sprite à dessiner avec la couleur de fond. Par défaut, BlendState.AlphaBlend est spécifié pour le dessin semi-transparent.

La formule de calcul de la couleur avec BlendState.AlphaBlend est la suivante : (Toutes les couleurs doivent être dans la plage de 0,0 ~ 1,0)

résultat = source.rgb + destination.rgb * (1 - source.a)

  • résultat : Couleur de sortie finale
  • source : La couleur de la texture que vous essayez de dessiner
  • destination : La couleur de fond de la destination
  • RGBA : composantes de R (rouge), G (vert), B (bleu) et A (alpha (opacité)) respectivement

Tous les codes

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;
#if WINDOWS_PHONE
using Microsoft.Xna.Framework.Input.Touch;
#endif

namespace AlphaBlendSprite
{
    /// <summary>
    /// ゲームメインクラス
    /// </summary>
    public class GameMain : Microsoft.Xna.Framework.Game
    {
        /// <summary>
        /// グラフィックデバイス管理クラス
        /// </summary>
        private GraphicsDeviceManager graphics = null;

        /// <summary>
        /// スプライトのバッチ化クラス
        /// </summary>
        private SpriteBatch spriteBatch = null;

        /// <summary>
        /// テクスチャー
        /// </summary>
        private Texture2D texture = null;


        /// <summary>
        /// GameMain コンストラクタ
        /// </summary>
        public GameMain()
        {
            // グラフィックデバイス管理クラスの作成
            this.graphics = new GraphicsDeviceManager(this);

            // ゲームコンテンツのルートディレクトリを設定
            this.Content.RootDirectory = "Content";

#if WINDOWS_PHONE
            // Windows Phone のデフォルトのフレームレートは 30 FPS
            this.TargetElapsedTime = TimeSpan.FromTicks(333333);

            // バックバッファサイズの設定
            this.graphics.PreferredBackBufferWidth = 480;
            this.graphics.PreferredBackBufferHeight = 800;

            // フルスクリーン表示
            this.graphics.IsFullScreen = true;
#endif
        }

        /// <summary>
        /// ゲームが始まる前の初期化処理を行うメソッド
        /// グラフィック以外のデータの読み込み、コンポーネントの初期化を行う
        /// </summary>
        protected override void Initialize()
        {
            // TODO: ここに初期化ロジックを書いてください

            // コンポーネントの初期化などを行います
            base.Initialize();
        }

        /// <summary>
        /// ゲームが始まるときに一回だけ呼ばれ
        /// すべてのゲームコンテンツを読み込みます
        /// </summary>
        protected override void LoadContent()
        {
            // テクスチャーを描画するためのスプライトバッチクラスを作成します
            this.spriteBatch = new SpriteBatch(this.GraphicsDevice);

            // テクスチャーをコンテンツパイプラインから読み込む
            this.texture = this.Content.Load<Texture2D>("Texture");
        }

        /// <summary>
        /// ゲームが終了するときに一回だけ呼ばれ
        /// すべてのゲームコンテンツをアンロードします
        /// </summary>
        protected override void UnloadContent()
        {
            // TODO: ContentManager で管理されていないコンテンツを
            //       ここでアンロードしてください
        }

        /// <summary>
        /// 描画以外のデータ更新等の処理を行うメソッド
        /// 主に入力処理、衝突判定などの物理計算、オーディオの再生など
        /// </summary>
        /// <param name="gameTime">このメソッドが呼ばれたときのゲーム時間</param>
        protected override void Update(GameTime gameTime)
        {
            // Xbox 360 コントローラ、Windows Phone の BACK ボタンを押したときに
            // ゲームを終了させます
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
            {
                this.Exit();
            }

            // TODO: ここに更新処理を記述してください

            // 登録された GameComponent を更新する
            base.Update(gameTime);
        }

        /// <summary>
        /// 描画処理を行うメソッド
        /// </summary>
        /// <param name="gameTime">このメソッドが呼ばれたときのゲーム時間</param>
        protected override void Draw(GameTime gameTime)
        {
            // 画面を指定した色でクリアします
            this.GraphicsDevice.Clear(Color.CornflowerBlue);

            // BlendState.AlphaBlend(デフォルト) を指定してスプライトを透過させます
            this.spriteBatch.Begin();

            // スプライトを描画する
            this.spriteBatch.Draw(this.texture, new Vector2(50.0f, 50.0f), Color.White);

            // スプライトの一括描画
            this.spriteBatch.End();

            // 登録された DrawableGameComponent を描画する
            base.Draw(gameTime);
        }
    }
}