Poolläbipaistva teksti kuvamine

Kokkuvõte

Muutke tekst poolläbipaistvaks.

Töökeskkond

Eeltingimused

Töökeskkond

aine

Rakendades läbipaistmatust 0,0 ~ 1,0 meetodiga SpriteBatch.DrawString määratud värvistruktuurile, saate teksti joonistada poolläbipaistvalt. Enamik värvistruktuuri omadustes juba määratletud värve ei ole seatud läbipaistmatuks, nii et neid saab läbipaistmatuse abil poolläbipaistvaks muuta.

// 半透明の文字(75%)
this.spriteBatch.DrawString(this.font,
    "Draw transparent text. (75%)",
    new Vector2(50.0f, 100.0f), Color.White * 0.75f);

Color ehitaja

Määrake värv. Samuti on olemas 0.0~1.0 ujukikonstruktor.

Muide, spraitide poolläbipaistva värvi määramise meetod on alates XNA Framework 4.0-st muutunud ja selleks, et määrata XNA Framewrok 3.1-s ja varasemas versioonis kasutatav formaat nagu ""new Color(255, 255, 255, 192), peate täpsustama SpriteBatchi segu oleku "BlendState.NonPremultiplied".

// スプライトの描画準備
this.spriteBatch.Begin(SpriteSortMode.Deferred, BlendState.NonPremultiplied);

// 半透明の文字(75%)
this.spriteBatch.DrawString(this.font,
    "Draw transparent text. (75%)",
    new Vector2(50.0f, 100.0f), new Color(255, 255, 255, 192));

Kuna väljundvärvi arvutamise valemit on muudetud, kuvatakse märgi serv tumenenud olekus.

Väljundvärvi kohta

Eelmistes näpunäidetes kasutasime näitena teksti kuvamiseks kahte segumustrit. Teisest küljest kuvati ilus poolläbipaistev tekst ootuspäraselt. Teisest küljest olid teksti servad tumedamad. Seda seetõttu, et värvi väljastamise valem erineb sõltuvalt kasutatud segu olekust.

Avaldise parameetrite seadmine väärtusele

• tulemus : Lõplik väljundvärv
• allikas : tekstuuri värv, mida proovite joonistada
• sihtkoht : sihtkoha taustavärv
• RGBA: vastavalt R (punane), G (roheline), B (sinine) ja A (alfa (läbipaistmatus)) komponendid

Ja nagu määratletud, on kahe segu oleku arvutusvalem järgmine.

BlendState.AlphaBlend (vaikimisi null) (korrutatud alfa)

tulemus = source.rgb + destination.rgb * (1 - source.a) // Kuid source.rgb on juba alfa-rakendatud

BlendState.NonPremultiplied (interpoleeritud alfa)

tulemus = source.rgb * source.a + destination.rgb * (1 - source.a)

Tegelikult, kui leiate selle valemiga, on tulemuse väärtus mõlemal juhul sama. Kui aga kasutate bilineaarset filtreerimist, tehakse ülaltoodud arvutused pärast värvi interpoleerimist pikslite varjundis külgnevate pikslitega, nii et lõplik väljundtulemus on erinev.

Tahaksin selle nimel teha mõned arvutused. Kui teksti värv on valge (Color.White), on selle piksli iga värvikomponent, milles tekst kuvatakse, (r:255, g:255, b:255, a:255). Teksti mittekuvavad pikslid on (r:0, g:0, b:0, a:0). Kui muudame teksti poolläbipaistvaks 50% juures ja interpoleerime selle nende kahe piksli vahepealse väärtusega (st märgi servaga), siis kuidas ülaltoodud kaks võrrandit tulemust muudavad?

Muide, taustavärv on (r:0, g:0, b:255, a:255). (Arvutused tehakse valge teksti ja sinise taustaga)

Interpoleerimine BlendState.AlphaBlendiga (korrutatud alfa)

Kuna alfa rakendatakse eelnevalt teksti värvi igale elemendile, vähendatakse teksti värvi poole võrra 255 võrra (r:128, g:128, b:128, a:128) (värv.valge * 0,5f"). Pikslid, millel pole teksti kuvatud, jäetakse sellisteks, nagu nad on (r:0, g:0, b:0, a:0).

Kuna bilineaarne filtrivalem viiakse läbi enne, kui segu olek arvutab taustavärvi, on teksti serva värv (r:64, g:64, b:64, a:64), mis on vaheväärtus (r:128, g:128, b:128, a:128) ja (r:0, g:0, b:0, a:0) vahel.

Siin on väljend

• tulemus = allikas.rgb + sihtkoht.rgb * (1 - allikas.a)

Kui rakendate seda:

• tulemus = (r:64, g:64, b:64) + (r:0, g:0, b:255) * (1 - 0,25)      // 0,25 näitab, et a:64 on 25% a:255-st

ja lõplik komposiitvärv taustavärviga on (r:64, g:64, b:255).

Interpoleerimine BlendState'iga.NonPremultiplied (interpoleeritud alfa)

Teksti värv on valge (r:255, g:255, b:255) ja ainult alfa on poolläbipaistev, et muuta see poolläbipaistvaks, nii et selle piksli väärtus, milles märk kuvatakse, on (r:255, g:255, b:255, a:128) (new Color(255, 255, 255, 128)). Pikslid, mis ei kuva teksti, jäävad samaks (r:0, g:0, b:0, a:0).

Kuna bilineaarne filtrivalem viiakse läbi enne, kui segu olek arvutab taustavärvi, on teksti serva värv (r:128, g:128, b:128, b:128, a:64), mis on vahepealne väärtus (r:0, g:0, b:0, a:0).

Siin on väljend

• tulemus = source.rgb * source.a + destination.rgb * (1 - source.a)

Kui rakendate seda:

• tulemus = (r:128, g:128, b:128) * 0,25 + (r:0, g:0, b:255) * (1 - 0,25)

ja lõplik komposiitvärv taustavärviga on (r:32, g:32, b:224).

Kaalutlus

Kuna taustavärv on (r:0, g:0, b:255), võimaldab interpoleerimine BlendState.AlphaBlendiga (r:64, g:64, b:255) teksti läbipaistvat värvi kaunilt väljendada, kaotamata taustavärvi pigmenti. Interpoleerimise korral BlendState.NonPremultipliediga (r:32, g:32, b:224) on sinine komponent taustavärvist tumedam, nii et teksti servad näivad olevat tumedamad (muidugi).
Punane, roheline on tumedam kui BlendState.AlphaBlend.)

Seda vaikimisi korrutatud alfa XNA Framework 4.0-st on üksikasjalikult kirjeldatud blogis "Hinikeni XNA", nii et kui soovite rohkem teada saada, vaadake palun allolevat linki. Seal kirjeldatakse seda kui näidet punase elemendi joonistamisest valgel taustal.

• Mis on korrutatud alfa? 1. osa: Alfa-interpolatsiooni probleemid

Kõik koodid

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

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

        /// <summary>
        /// スプライトでテキストを描画するためのフォント
        /// </summary>
        private SpriteFont font = 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.font = this.Content.Load<SpriteFont>("Font");
        }

        /// <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);

            // スプライトの描画準備
            this.spriteBatch.Begin();

            // 通常の文字
            this.spriteBatch.DrawString(this.font,
                "Draw normal text.",
                new Vector2(50.0f, 50.0f), Color.White);

            // 半透明の文字(75%)
            this.spriteBatch.DrawString(this.font,
                "Draw transparent text. (75%)",
                new Vector2(50.0f, 100.0f), Color.White * 0.75f);

            // 半透明の文字(50%)
            this.spriteBatch.DrawString(this.font,
                "Draw transparent text. (50%)",
                new Vector2(50.0f, 150.0f), Color.White * 0.5f);

            // 半透明の文字(25%)
            this.spriteBatch.DrawString(this.font,
                "Draw transparent text. (25%)",
                new Vector2(50.0f, 200.0f), Color.White * 0.25f);

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

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