Pusiau skaidraus teksto rodymas

suvestinė

Padarykite tekstą pusiau skaidrų.

Darbo aplinka

Būtinosios sąlygos

Darbo aplinka

medžiaga

Taikydami 0,0 ~ 1,0 neskaidrumą spalvų struktūrai, nurodytai SpriteBatch.DrawString metodu, galite piešti tekstą pusiau skaidriai. Dauguma spalvų, jau apibrėžtų spalvų struktūros ypatybėse, nėra nepermatomos, todėl jas galima padaryti pusiau skaidrias, taikant neskaidrumą.

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

Color Konstruktorius

Nustatykite spalvą. Taip pat yra 0.0 ~ 1.0 plūduriuojantis konstruktorius.

Beje, permatomos spritų spalvos nurodymo metodas pasikeitė nuo XNA Framework 4.0, ir norint nurodyti tokį formatą kaip "new Color(255, 255, 255, 192)", naudojamą XNA Framewrok 3.1 ir ankstesnėse versijose, turite nurodyti SpriteBatch maišymo būseną su "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));

Tačiau, kadangi išvesties spalvos apskaičiavimo formulė buvo pakeista, simbolio kraštas bus rodomas tamsesnėje būsenoje.

Apie išvesties spalvą

Ankstesniuose patarimuose naudojome du maišymo šablonus, kad tekstas būtų rodomas kaip pavyzdys. Kita vertus, gražus permatomas tekstas buvo rodomas taip, kaip tikėtasi. Kita vertus, teksto kraštai buvo patamsėję. Taip yra todėl, kad spalvos išvedimo formulė skiriasi priklausomai nuo naudojamos mišinio būsenos.

Išraiškos parametrų nustatymas į

• rezultatas : Galutinė išvesties spalva
• šaltinis : tekstūros, kurią bandote nupiešti, spalva
• paskirties vieta: paskirties vietos fono spalva
• RGBA: atitinkamai R (raudona), G (žalia), B (mėlyna) ir A (alfa (neskaidrumas)) komponentai

Kaip apibrėžta, dviejų mišinio būsenų skaičiavimo formulė yra tokia.

BlendState.AlphaBlend (neapibrėžtasis numatytasis nustatymas) (padaugintas iš alfa)

rezultatas = source.rgb + destination.rgb * (1 - source.a) // Tačiau source.rgb jau taikomas alfa

BlendState.NonPremultiplied (interpoliuotas alfa)

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

Tiesą sakant, jei jį rasite su šia formule, rezultato vertė abiem atvejais bus tokia pati. Tačiau, jei naudojate dvilinijinį filtravimą, aukščiau pateikti skaičiavimai atliekami po spalvų interpoliacijos su gretimais pikseliais pikselių šešėlyje, todėl galutinis išvesties rezultatas bus kitoks.

Dėl to norėčiau atlikti keletą skaičiavimų. Jei teksto spalva yra balta (Color.White), kiekvienas pikselio, kuriame rodomas tekstas, spalvos komponentas yra (r:255, g:255, b:255, a:255). Pikseliai, kuriuose nerodomas tekstas, yra (r:0, g:0, b:0, a:0). Jei mes padarysime tekstą pusiau skaidrų 50% ir interpoliuosime jį su šių dviejų pikselių tarpine verte (t. Y. Simbolio kraštu), kaip pirmiau minėtos dvi lygtys keičia rezultatą?

Beje, fono spalva yra (r:0, g:0, b:255, a:255). (Skaičiavimai atliekami baltame tekste ir mėlyname fone)

Interpoliacija su BlendState.AlphaBlend (padaugintas alfa)

Kadangi alfa iš anksto taikoma kiekvienam teksto spalvos elementui, teksto spalva sumažinama perpus 255 (r:128, g:128, b:128, a:128) (Spalva.Balta * 0,5f"). Pikseliai, kuriuose nerodomas tekstas, paliekami tokie, kokie yra (r:0, g:0, b:0, a:0).

Kadangi dvilinijinio filtro formulė atliekama prieš suliejimo būsenai apskaičiuojant fono spalvą, teksto krašto spalva yra (r:64, g:64, b:64, a:64), kuri yra tarpinė reikšmė tarp (r:128, g:128, b:128, a:128) ir (r:0, g:0, b:0, a:0).

Čia išraiška

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

Jei ją taikote:

• rezultatas = (r:64, g:64, b:64) + (r:0, g:0, b:255) * (1 - 0,25)      // 0,25 rodo, kad a:64 yra 25% a:255

ir galutinė kompozicinė spalva su fono spalva yra (r:64, g:64, b:255).

Interpoliacija su BlendState.NonPremultiplied (interpoliuotas alfa)

Teksto spalva yra balta (r:255, g:255, b:255), ir tik alfa sumažinama perpus, kad jis būtų pusiau skaidrus, todėl pikselio, kuriame rodomas simbolis, vertė yra (r:255, g:255, b:255, a:128) (nauja spalva(255, 255, 255, 128)). Pikseliai, kuriuose nerodomas tekstas, išlieka tie patys (r:0, g:0, b:0, a:0).

Kadangi dvilinijinio filtro formulė atliekama prieš maišymo būsenai apskaičiuojant fono spalvą, teksto krašto spalva yra (r:128, g:128, b:128, b:128, a:64), kuri yra tarpinė reikšmė tarp (r:0, g:0, b:0, a:0).

Čia išraiška

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

Jei ją taikote:

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

ir galutinė sudėtinė spalva su fono spalva yra (r:32, g:32, b:224).

svarstymas

Kadangi fono spalva yra (r:0, g:0, b:255), interpoliacija su BlendState.AlphaBlend (r:64, g:64, b:255) leidžia gražiai išreikšti skaidrią teksto spalvą neprarandant fono spalvos pigmento. Tačiau interpoliacijos su BlendState.NonPremultiplied (r:32, g:32, b:224) atveju mėlynas komponentas yra tamsesnis nei fono spalva, todėl teksto kraštai atrodo tamsesni (žinoma).
Raudona, žalia yra tamsesnė nei BlendState.AlphaBlend.)

Šis numatytasis padaugintas alfa iš "XNA Framework 4.0" yra išsamiai aprašytas tinklaraštyje "Hinikeni XNA", todėl, jei norite sužinoti daugiau, žiūrėkite toliau pateiktą nuorodą. Ten jis apibūdinamas kaip raudono elemento piešimo baltame fone pavyzdys.

• Kas yra padaugintas alfa? 1 dalis: Problemos, susijusios su alfa interpoliacija

Visi kodai

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