Puscaurspīdīga teksta parādīšana

Kopsavilkuma

Padariet tekstu daļēji caurspīdīgu.

Darbības vide

Priekšnoteikumi

Darbības vide

viela

Piemērojot necaurredzamību 0,0 ~ 1,0 krāsu struktūrai, kas norādīta ar SpriteBatch.DrawString metodi, jūs varat uzzīmēt tekstu puscaurspīdīgumā. Lielākā daļa krāsu, kas jau ir definētas krāsu struktūras īpašībās, nav iestatītas uz necaurspīdīgām, tāpēc tās var padarīt daļēji caurspīdīgas, izmantojot necaurredzamību.

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

Color Konstruktors

Iestatiet krāsu. Ir arī 0.0~1.0 pludiņa konstruktors.

Starp citu, sprites caurspīdīgās krāsas norādīšanas metode ir mainījusies kopš XNA Framework 4.0, un, lai norādītu formātu, piemēram, ""new Color(255, 255, 255, 192), ko izmanto XNA Framewrok 3.1 un agrāk, jums jānorāda SpriteBatch maisījuma stāvoklis ar "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));

Tomēr, tā kā izvades krāsas aprēķināšanas formula ir mainīta, rakstzīmes mala tiks parādīta tumšā stāvoklī.

Par izvades krāsu

Iepriekšējos padomos mēs izmantojām divus sapludināšanas modeļus, lai parādītu tekstu kā piemēru. No otras puses, skaists caurspīdīgs teksts tika parādīts, kā gaidīts. No otras puses, teksta malas tika aptumšotas. Tas ir tāpēc, ka krāsas izvadīšanas formula atšķiras atkarībā no izmantotā maisījuma stāvokļa.

Izteiksmes parametru iestatīšana uz

• Rezultāts : Gala izvades krāsa
• avots : Tās tekstūras krāsa, kuru mēģināt uzzīmēt
• galamērķis : Galamērķa fona krāsa
• RGBA: attiecīgi R (sarkans), G (zaļš), B (zils) un A (alfa (necaurredzamība)) komponenti

Un, kā definēts, aprēķina formula abiem maisījuma stāvokļiem ir šāda.

BlendState.AlphaBlend (noklusējums null) (reizināts ar alfa)

rezultāts = source.rgb + destination.rgb * (1 - source.a) // Tomēr source.rgb jau ir alfa lietots

BlendState.NonPremultiplied (interpolēts alfa)

rezultāts = source.rgb * source.a + destination.rgb * (1 - source.a)

Faktiski, ja jūs to atradīsiet ar šo formulu, rezultāta vērtība abos gadījumos būs vienāda. Tomēr, ja izmantojat bilineāro filtrēšanu, iepriekš minētie aprēķini tiek veikti pēc krāsu interpolācijas ar blakus esošajiem pikseļiem pikseļu ēnotājā, tāpēc galīgais izejas rezultāts būs atšķirīgs.

Es gribētu veikt dažus aprēķinus tā dēļ. Ja teksta krāsa ir balta (krāsa.balta), katrs pikseļa krāsas komponents, kurā tiek parādīts teksts, ir (r:255, g:255, b:255, a:255). Pikseļi, kas nerāda tekstu, ir (r:0, g:0, b:0, a:0). Ja mēs padarām tekstu daļēji caurspīdīgu pie 50% un interpolējam to ar šo divu pikseļu starpvērtību (t.i., rakstzīmes malu), kā iepriekš minētie divi vienādojumi maina rezultātu?

Starp citu, fona krāsa ir (r:0, g:0, b:255, a:255). (Aprēķini tiek veikti uz balta teksta un zila fona)

Interpolācija ar BlendState.AlphaBlend (reizināta alfa)

Tā kā katram teksta krāsas elementam iepriekš tiek piemērots alfa, teksta krāsa tiek samazināta uz pusi par 255 (r:128, g:128, b:128, a:128) (Krāsa.Balta * 0,5f). Pikseļi, kuriem netiek rādīts teksts, tiek atstāti tādi, kādi tie ir (r:0, g:0, b:0, a:0).

Tā kā bilineārā filtra formula tiek veikta, pirms sapludināšanas stāvoklis aprēķina fona krāsu, teksta malas krāsa ir (r:64, g:64, b:64, a:64), kas ir starpvērtība starp (r:128, g:128, b:128, a:128) un (r:0, g:0, b:0, a:0).

Šeit izteiksme

• rezultāts = source.rgb + destination.rgb * (1 - avots.a)

Ja jūs to izmantojat:

• rezultāts = (r:64, g:64, b:64) + (r:0, g:0, b:255) * (1 - 0,25)      // 0,25 norāda, ka a:64 ir 25% no a:255

un galīgā kompozītmateriāla krāsa ar fona krāsu ir (r:64, g:64, b:255).

Interpolācija ar BlendState.NonPremultiplied (interpolēts alfa)

Teksta krāsa ir balta (r:255, g:255, b:255), un tikai burts tiek samazināts uz pusi, lai padarītu to puscaurspīdīgu, tāpēc pikseļa vērtība, kurā tiek parādīta rakstzīme, ir (r:255, g:255, b:255, a:128) (jauna krāsa(255, 255, 255, 128)). Pikseļi, kas nerāda tekstu, paliek nemainīgi (r:0, g:0, b:0, a:0).

Tā kā bilineārā filtra formula tiek veikta, pirms sapludināšanas stāvoklis aprēķina fona krāsu, teksta malas krāsa ir (r:128, g:128, b:128, b:128, a:64), kas ir starpvērtība starp (r:0, g:0, b:0, a:0).

Šeit izteiksme

• rezultāts = source.rgb * source.a + destination.rgb * (1 - source.a)

Ja jūs to izmantojat:

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

un galīgā kompozītmateriāla krāsa ar fona krāsu ir (r:32, g:32, b:224).

Atlīdzību

Tā kā fona krāsa ir (r:0, g:0, b:255), interpolācija ar BlendState.AlphaBlend (r:64, g:64, b:255) ļauj skaisti izteikt teksta caurspīdīgo krāsu, nezaudējot fona krāsas pigmentu. Tomēr interpolācijas gadījumā ar BlendState.NonPremultiplied (r:32, g:32, b:224) zilais komponents ir tumšāks par fona krāsu, tāpēc teksta malas, šķiet, ir aptumšotas (protams).
Sarkans, zaļš ir tumšāks nekā BlendState.AlphaBlend.)

Šis noklusējuma reizinātais alfa no XNA Framework 4.0 ir detalizēti aprakstīts emuārā "Hinikeni XNA", tādēļ, ja vēlaties uzzināt vairāk, lūdzu, skatiet tālāk norādīto saiti. Tur tas tiek raksturots kā piemērs sarkana elementa zīmēšanai uz balta fona.

• Kas ir reizināts alfa? 1. daļa: Problēmas ar alfa interpolāciju

Visi kodi

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