Vis halvgennemsigtig tekst

resumé

Få teksten til at se halvgennemsigtig ud.

Driftsmiljø

Forudsætninger

Driftsmiljø

stof

Ved at anvende en opacitet på 0,0~1,0 på den farvestruktur, der er angivet af metoden SpriteBatch.DrawString, kan du tegne teksten i halvgennemsigtighed. De fleste af de farver, der allerede er defineret i egenskaberne for farvestrukturen, er ikke indstillet til uigennemsigtige, så de kan gøres halvgennemsigtige ved at anvende opacitet.

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

Color konstruktør

Indstil farven. Der er også en 0,0~1,0 flydekonstruktør.

Forresten er metoden til at angive den gennemsigtige farve på sprites ændret siden XNA Framework 4.0, og for at angive et format som "new Color(255, 255, 255, 192)" brugt i XNA Framewrok 3.1 og tidligere, skal du angive blandingstilstanden for SpriteBatch med "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));

Men da formlen til beregning af outputfarven er blevet ændret, vil kanten af tegnet blive vist i en mørk tilstand.

Om outputfarven

I de foregående tip brugte vi to blandingsmønstre til at vise tekst som et eksempel. På den anden side blev smuk gennemsigtig tekst vist som forventet. På den anden side var tekstens kanter mørkere. Det skyldes, at formlen for udskrivning af farven varierer afhængigt af den anvendte blandingstilstand.

Indstil parametrene for udtrykket til

• resultat: Endelig outputfarve
• kilde : Farven på den tekstur, du prøver at tegne
• destination : Baggrundsfarven på destinationen
• RGBA: Komponenter af henholdsvis R (rød), G (grøn), B (blå) og A (alfa (opacitet))

Og som defineret er beregningsformlen for de to blandingstilstande som følger.

BlendState.AlphaBlend (null-standard) (ganget alfa)

result = source.rgb + destination.rgb * (1 - source.a) // source.rgb er dog allerede alfa-anvendt

BlendState.Ikke-præmultipliceret (interpoleret alfa)

resultat = kilde.rgb * kilde.a + destination.rgb * (1 - kilde.a)

Faktisk, hvis du finder det med denne formel, vil værdien af resultatet være den samme i begge tilfælde. Men hvis du bruger bilineær filtrering, udføres ovenstående beregninger efter farveinterpolation med tilstødende pixel i pixelshaderen, så det endelige outputresultat bliver anderledes.

Jeg vil gerne lave nogle beregninger for den sags skyld. Hvis tekstens farve er hvid (Color.White), er hver farvekomponent i den pixel, som teksten vises i, (r:255, g:255, b:255, a:255). Pixels, der ikke viser tekst, er (r:0, g:0, b:0, a:0). Hvis vi gør teksten halvgennemsigtig ved 50 % og interpolerer den med mellemværdien af disse to pixels (dvs. kanten af tegnet), hvordan ændrer de to ovenstående ligninger resultatet

Baggrundsfarven er i øvrigt (r:0, g:0, b:255, a:255). (Beregninger udføres på hvid tekst og blå baggrund)

Interpolation med BlendState.AlphaBlend (multipliceret alfa)

Da alfa anvendes på hvert element i tekstfarven på forhånd, halveres tekstfarven med 255 (r:128, g:128, b:128, a:128) (Farve.Hvid * 0,5f"). Pixels, der ikke har vist tekst, efterlades som de er (r:0, g:0, b:0, a:0).

Da den bilineære filterformel udføres, før blandingstilstanden beregner baggrundsfarven, er farven på tekstens kant (r:64, g:64, b:64, a:64), som er en mellemliggende værdi mellem (r:128, g:128, b:128, a:128) og (r:0, g:0, b:0, a:0).

Her er udtrykket

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

Hvis du anvender det på:

• Resultat = (R:64, G:64, B:64) + (R:0, G:0, B:255) * (1 - 0,25)      // 0,25 angiver, at A:64 er 25 % af A:255

og den endelige sammensatte farve med baggrundsfarven er (r:64, g:64, b:255).

Interpolation med BlendState.NonPremultiplied (interpoleret alfa)

Farven på teksten er hvid (r:255, g:255, b:255), og kun alfaen er halveret for at gøre den halvgennemsigtig, så værdien af den pixel, som tegnet vises i, er (r:255, g:255, b:255, a:128) (ny farve(255, 255, 255,  128)). Pixels, der ikke viser tekst, forbliver de samme (r:0, g:0, b:0, a:0).

Da den bilineære filterformel udføres, før blandingstilstanden beregner baggrundsfarven, er farven på tekstens kant (r:128, g:128, b:128, b:128, a:64), som er en mellemliggende værdi mellem (r:0, g:0, b:0, a:0).

Her er udtrykket

• resultat = kilde.rgb * kilde.a + destination.rgb * (1 - kilde.a)

Hvis du anvender det på:

• Resultat = (R:128, G:128, B:128) * 0,25 + (R:0, G:0, B:255) * (1 - 0,25)

og den endelige sammensatte farve med baggrundsfarven er (r:32, g:32, b:224).

overvejelse

Da baggrundsfarven er (r:0, g:0, b:255), gør interpolation med BlendState.AlphaBlend (r:64, g:64, b:255) det muligt at udtrykke tekstens gennemsigtige farve smukt uden at miste baggrundsfarvens pigment. Men i tilfælde af interpolation med BlendState.NonPremultiplied (r:32, g:32, b:224) er den blå komponent mørkere end baggrundsfarven, så tekstens kanter ser ud til at være mørkere (selvfølgelig).
Rød, grøn er mørkere end BlendState.AlphaBlend.)

Denne standard multiplicerede alfa fra XNA Framework 4.0 er beskrevet detaljeret i bloggen "Hinikeni XNA", så hvis du vil vide mere, henvises til linket nedenfor. Derovre beskrives det som et eksempel på at tegne et rødt element mod en hvid baggrund.

• Hvad er multipliceret alfa? Del 1: Problemer med interpolation alfa

Alle koder

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