Dessiner du texte en contexte
résumé
Utilisez la valeur de profondeur du calque pour contextualiser le texte. Dans l’écran ci-dessous, il semble qu’un rectangle rempli soit dessiné, mais « ◆ » avec une taille de police plus grande est dessiné de sorte que le chevauchement du texte est facile à comprendre.
Environnement d’exploitation
Conditions préalables
Versions XNA prises en charge |
|
Plates-formes prises en charge |
|
Version du Vertex Shader requise par Windows | 2.0 |
Version du Pixel Shader requise par Windows | 2.0 |
Environnement d’exploitation
plateforme |
|
substance
Normalement, lorsque vous dessinez du texte, il dessine ce qui vient plus tard afin qu’il soit mis au premier plan, mais en triant par valeur de profondeur, vous pouvez clairement voir le contexte quel que soit l’ordre dans lequel la méthode SpriteBatch.DrawString est appelée.
Pour trier par valeur de profondeur de texte, spécifiez « SpriteSortMode.BackToFront » comme premier argument de la méthode « SpriteBatch.Begin ». Le deuxième argument est « BlendState », mais ici la valeur par défaut est null.
// 奥から描画するようにソート
this.spriteBatch.Begin(SpriteSortMode.BackToFront, null);
SpriteBatch.Begin
méthode
Appelez-le avant de dessiner le sprite. En interne, nous effectuons les réglages nécessaires pour dessiner des sprites.
sortMode | SpriteSortMode | Spécifie l’ordre dans lequel les sprites sont tirés de l’énumération SpriteSortMode. Ici, 0.0 est traité comme le premier plan et 1.0 est traité comme le plus profond, nous allons donc dessiner à partir du sprite à l’arrière et dessiner sur le sprite au premier plan, donc spécifiez SpriteSortMode.BackToFront. |
blendState | BlendState (en anglais) | BlendState spécifie la façon dont la couleur se fond avec l’arrière-plan lors du dessin. Si null est spécifié, BlendState.AlphaBlend est utilisé. |
Ensuite, lorsque vous dessinez le texte, spécifiez la valeur de profondeur dans le neuvième argument de la méthode SpriteBatch.DrawString. Les valeurs qui peuvent être définies ici sont dans la plage de 0,0 ~ 1,0, 0,0 étant dessiné au premier plan et 1,0 à l’arrière.
// 手前に描画(白)
this.spriteBatch.DrawString(this.font, "◆",
new Vector2(150.0f, 100.0f), Color.White, 0.0f, Vector2.Zero,
1.0f, SpriteEffects.None, 0.0f);
// 奥に描画(赤)
this.spriteBatch.DrawString(this.font, "◆",
new Vector2(150.0f, 140.0f), Color.Red, 0.0f, Vector2.Zero,
1.0f, SpriteEffects.None, 1.0f);
// 2つの文字の間に描画(青)
this.spriteBatch.DrawString(this.font, "◆",
new Vector2(190.0f, 115.0f), Color.Blue, 0.0f, Vector2.Zero,
1.0f, SpriteEffects.None, 0.5f);
SpriteBatch.DrawString
méthode
Dessinez une ficelle.
spriteFont | SpriteFont | Spécifie le SpriteFont qui contient l’image de chaîne. |
SMS | corde | Spécifie le texte à afficher. |
position | Vecteur2 | Position à laquelle afficher le texte. Spécifiez les coordonnées à l’écran par rapport au coin supérieur gauche de l’écran. L’origine du texte se trouve en haut à gauche du premier caractère. |
Couleur | Couleur | Couleur du texte |
rotation | flotter | L’angle de rotation du texte. Les unités sont spécifiées en radian. L’axe de rotation se trouve en haut à gauche du texte. |
origine | Vecteur2 | Spécifie la position de l’axe de rotation lors de la rotation du texte. Vous spécifiez la position du texte qui correspond à l’axe de rotation, mais en réalité, l’axe de rotation est fixé en haut à gauche du texte et la position d’affichage du texte est déplacée par -origin. |
écaille | flotter | Spécifie l’agrandissement du texte. En utilisant 1.0 comme référence, mettez l’échelle verticalement et horizontalement. L’origine de l’extension se trouve en haut à gauche du texte. Il y a deux façons de le spécifier : float spécifify, qui est égal à la hauteur et à la largeur, et Vector2, qui peut être spécifié avec différents grossissements |
Effets | SpriteEffets | Spécifie l’effet de l’inversion de l’affichage du texte. Si vous ne faites rien d’autre, spécifiez SpriteEffects.None. |
layerDepth | flotter | Spécifie la profondeur à laquelle le texte est affiché. Il est principalement utilisé pour afficher du texte au premier plan ou à l’arrière-plan. Spécifiez dans la plage de 0,0 ~ 1,0, où 0,0 est l’avant et 1,0 est l’arrière. |
Dans le programme ci-dessus, la méthode SpriteBatch.DrawString est appelée dans l’ordre « blanc », « rouge » et « bleu », mais chaque valeur de profondeur est définie sur « blanc (0,0) », « rouge (1,0) » et « bleu (0,5) », de sorte que vous pouvez voir que le rouge est dessiné à l’arrière et le blanc est dessiné au premier plan.
Tous les codes
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 LayerDepthText
{
<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(SpriteSortMode.BackToFront, null);
// 手前に描画(白)
this.spriteBatch.DrawString(this.font, "◆",
new Vector2(150.0f, 100.0f), Color.White, 0.0f, Vector2.Zero,
1.0f, SpriteEffects.None, 0.0f);
// 奥に描画(赤)
this.spriteBatch.DrawString(this.font, "◆",
new Vector2(150.0f, 140.0f), Color.Red, 0.0f, Vector2.Zero,
1.0f, SpriteEffects.None, 1.0f);
// 2つの文字の間に描画(青)
this.spriteBatch.DrawString(this.font, "◆",
new Vector2(190.0f, 115.0f), Color.Blue, 0.0f, Vector2.Zero,
1.0f, SpriteEffects.None, 0.5f);
// スプライトの一括描画
this.spriteBatch.End();
// 登録された DrawableGameComponent を描画する
base.Draw(gameTime);
}
}
}