Wyświetlanie tekstu półprzezroczystego
streszczenie
Sprawia, że tekst wydaje się półprzezroczysty.
Środowisko pracy
Warunki wstępne
| Obsługiwane wersje XNA |
|
| Obsługiwane platformy |
|
| Wymagana wersja cieniowania wierzchołków systemu Windows | 2.0 |
| Wymagana wersja Pixel Shader w systemie Windows | 2.0 |
Środowisko pracy
| podest |
|
substancja
Stosując krycie 0,0~1,0 do struktury koloru określonej przez metodę SpriteBatch.DrawString, można narysować tekst w półprzezroczystości. Większość kolorów już zdefiniowanych we właściwościach struktury Kolor nie jest ustawiona na nieprzezroczystość, więc można ustawić je jako półprzezroczyste przez zastosowanie krycia.
// 半透明の文字(75%)
this.spriteBatch.DrawString(this.font,
"Draw transparent text. (75%)",
new Vector2(50.0f, 100.0f), Color.White * 0.75f);
Color konstruktor
Ustaw kolor. Istnieje również konstruktor zmiennoprzecinkowy 0.0~1.0.
| r | bajt | Określ kolor czerwony od 0 ~ 255. |
| g | bajt | Określ zielony kolor jako 0 ~ 255. |
| b | bajt | Określ kolor niebieski od 0 ~ 255. |
| a | bajt | Określ krycie (składnik alfa) od 0~255. |
Nawiasem mówiąc, metoda określania półprzezroczystego koloru sprite'ów zmieniła się od czasu XNA Framework 4.0 i aby określić format taki jak "new Color(255, 255, 255, 192)" używany w XNA Framewrok 3.1 i wcześniejszych, musisz określić stan mieszania SpriteBatch za pomocą "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));
Ponieważ jednak formuła obliczania koloru wyjściowego została zmieniona, krawędź znaku będzie wyświetlana w stanie przyciemnionym.
Informacje o kolorze wyjściowym
W poprzednich poradach użyliśmy dwóch wzorców mieszania, aby wyświetlić tekst jako przykład. Z drugiej strony, piękny, półprzezroczysty tekst został wyświetlony zgodnie z oczekiwaniami. Z drugiej strony krawędzie tekstu zostały przyciemnione. Wynika to z faktu, że formuła wyprowadzania koloru różni się w zależności od użytego stanu mieszania.
Ustaw parametry wyrażenia na
- wynik: Ostateczny kolor wyjściowy
- źródło : Kolor tekstury, którą próbujesz narysować
- miejsce docelowe : Kolor tła miejsca docelowego
- RGBA: Składowe odpowiednio R (czerwony), G (zielony), B (niebieski) i A (alfa (nieprzezroczystość))
Zgodnie z definicją, wzór obliczeniowy dla dwóch stanów mieszania jest następujący.
- BlendState.AlphaBlend (wartość domyślna o wartości null) (pomnożona wartość alfa)
- wynik = source.rgb + destination.rgb * (1 - source.a) // Jednak source.rgb jest już zastosowany alfa
- BlendState.NonPremultid (interpolowany alfa)
- wynik = source.rgb * source.a + destination.rgb * (1 - source.a)
W rzeczywistości, jeśli znajdziesz go za pomocą tej formuły, wartość wyniku będzie taka sama w obu przypadkach. Jeśli jednak korzystasz z filtrowania dwuliniowego, powyższe obliczenia są wykonywane po interpolacji kolorów z sąsiednimi pikselami w module cieniującym piksele, więc ostateczny wynik wyjściowy będzie inny.
Ze względu na to chciałbym zrobić kilka obliczeń. Jeśli kolor tekstu jest biały (Color.White), każdy składnik koloru piksela, w którym jest wyświetlany tekst, ma wartość (r:255, g:255, b:255, a:255). Piksele, które nie wyświetlają tekstu, to (r:0, g:0, b:0, a:0). Jeśli sprawimy, że tekst będzie półprzezroczysty na poziomie 50% i wstawimy go z wartością pośrednią tych dwóch pikseli (tj. krawędzią znaku), jak powyższe dwa równania zmienią wynik?
Nawiasem mówiąc, kolor tła to (r:0, g:0, b:255, a:255). (Obliczenia są wykonywane na białym tekście i niebieskim tle)
Interpolacja z BlendState.AlphaBlend (pomnożona alfa)
Ponieważ alfa jest wcześniej stosowana do każdego elementu koloru tekstu, kolor tekstu jest zmniejszany o połowę o 255 (r:128, g:128, b:128, a:128) (Color.White * 0.5f"). Piksele, które nie mają wyświetlanego tekstu, pozostawia się bez zmian (r:0, g:0, b:0, a:0).
Ponieważ formuła filtru dwuliniowego jest wykonywana, zanim stan mieszania obliczy kolor tła, kolor krawędzi tekstu wynosi (r:64, g:64, b:64, a:64), co jest wartością pośrednią między (r:128, g:128, b:128, a:128) a (r:0, g:0, b:0, a:0).
W tym miejscu wyrażenie
- wynik = source.rgb + destination.rgb * (1 - source.a)
Jeśli zastosujesz go do:
- Wynik = (R:64, G:64, B:64) + (R:0, G:0, B:255) * (1 - 0.25) // 0.25 wskazuje, że a:64 to 25% a:255
a końcowy kolor kompozytowy z kolorem tła to (r:64, g:64, b:255).
Interpolacja z BlendState.NonPremultid (interpolowana alfa)
Kolor tekstu jest biały (r:255, g:255, b:255), a tylko alfa jest zmniejszona o połowę, aby uczynić go półprzezroczystym, więc wartość piksela, w którym wyświetlany jest znak, wynosi (r:255, g:255, b:255, a:128) (nowy Kolor(255, 255, 255, 128)). Piksele, które nie wyświetlają tekstu, pozostają takie same (r:0, g:0, b:0, a:0).
Ponieważ formuła filtru dwuliniowego jest wykonywana, zanim stan mieszania obliczy kolor tła, kolor krawędzi tekstu wynosi (r:128, g:128, b:128, b:128, a:64), co jest wartością pośrednią między (r:0, g:0, b:0, a:0).
W tym miejscu wyrażenie
- wynik = source.rgb * source.a + destination.rgb * (1 - source.a)
Jeśli zastosujesz go do:
- Wynik = (r:128, g:128, b:128) * 0.25 + (r:0, g:0, b:255) * (1 - 0.25)
a końcowy kolor kompozytowy z kolorem tła to (r:32, g:32, b:224).
rozwaga
Ponieważ kolor tła to (r:0, g:0, b:255), interpolacja z BlendState.AlphaBlend (r:64, g:64, b:255) umożliwia piękne wyrażenie przezroczystego koloru tekstu bez utraty pigmentu koloru tła. Jednak w przypadku interpolacji z BlendState.NonPremultid (r:32, g:32, b:224) niebieski składnik jest ciemniejszy niż kolor tła, więc krawędzie tekstu wydają się być przyciemnione (oczywiście).
Czerwony, zielony jest ciemniejszy niż BlendState.AlphaBlend.)
Ta domyślna zwielokrotniona alfa z XNA Framework 4.0 jest szczegółowo opisana na blogu "Hinikeni XNA", więc jeśli chcesz dowiedzieć się więcej, zapoznaj się z poniższym linkiem. Tam jest to opisane jako przykład narysowania czerwonego elementu na białym tle.
Wszystkie kody
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);
}
}
}