centeredfont.zip 44206 bytes

O cenário é simples: você quer desenhar um texto no meio da tela.

Vamos supor que:

·       ÂVocê já sabe desenhar textos com fontes no XNA (caso não, leia o artigo do Shinji sobre isso e volte para cá depois)

·       ÂVocê adicionou uma spritefont ao seu jogo chamada, por exemplo, Arial.

·       ÂVocê já carregou um objeto SpriteFont e SpriteBatch para o desenho, como mostra o código abaixo:

public class Game1 : Microsoft.Xna.Framework.Game {

      Â

 ÂSpriteBatch spriteBatch;

 ÂSpriteFont arialFont;

    Â

 Â...

 

 Âprotected override void LoadGraphicsContent(bool loadAllContent) {

    ÂspriteBatch = new SpriteBatch(graphics.GraphicsDevice);

    ÂarialFont = content.Load<SpriteFont>("Arial");

 Â}

 

 Â...

}

 

Qual o código a ser inserido no método Draw do seu jogo para desenhar um texto no meio da tela? O primeiro passo é descobrir o ponto central da tela: basta obter a largura e altura do viewport de desenho e dividir cada um deles por 2:

protected override void Draw(GameTime gameTime) {

 Âfloat posX = graphics.GraphicsDevice.Viewport.Width / 2;

 Âfloat posY = graphics.GraphicsDevice.Viewport.Height / 2;

 ÂVector2 position = new Vector2(posX, posY);
 Â...
}

Entretanto, o ponto position acima representa o começo do desenho (canto superior esquerdo do mesmo) . Fazer o desenho passando esse ponto como parâmetro não causará o efeito de centralização desejado:

protected override void Draw(GameTime gameTime) {

 Â...

 Âstring text = "Text to be centralized";

 Âgraphics.GraphicsDevice.Clear(Color.CornflowerBlue);

 ÂspriteBatch.Begin();

 ÂspriteBatch.DrawString(arialFont, text, position, Color.White);

 ÂspriteBatch.End();

 Âbase.Draw(gameTime);

}

 

 

Está claro que deveríamos ter começado a desenhar o texto em uma posição mais à esquerda. O problema é: o quanto mais a esquerda? Através de tentativa e erro, você poderia chegar a uma posição fixa, hard-coded, que fosse satisfatória. Porém, se considerarmos que o texto a ser desenhado pode mudar, teremos um problema e tanto.

A solução para isso está no método MeasureString, da classe SpriteFont. Esse método recebe um texto como parâmetro e retorna, em uma estrutura Vector2, a largura e altura desse texto nessa fonte.

Vector2 textSize = arialFont.MeasureString(text);

De posse dessa informação, basta agora recuar a posição inicial de desenho (position) pela metade da largura e metade da altura do texto a ser desenhado. Isso fará com que o meio do texto seja o meio do ponto desejado (que no nosso caso, é o ponto central da tela do jogo).

position.X -= textSize.X / 2;

position.Y -= textSize.Y / 2;

Confira o código completo abaixo:

protected override void Draw(GameTime gameTime) {

 Âfloat posX = graphics.GraphicsDevice.Viewport.Width / 2;

 Âfloat posY = graphics.GraphicsDevice.Viewport.Height / 2;

 ÂVector2 position = new Vector2(posX, posY);

 

 Âstring text = "Text to be centralized";

 ÂVector2 textSize = arialFont.MeasureString(text);

 Âposition.X -= textSize.X / 2;

 Âposition.Y -= textSize.Y / 2;

 

 Âgraphics.GraphicsDevice.Clear(Color.CornflowerBlue);

 ÂspriteBatch.Begin();

 ÂspriteBatch.DrawString(arialFont, text, position, Color.White);

 ÂspriteBatch.End();

 Âbase.Draw(gameTime);

}

E, por fim, o texto centralizado, como desejado:

 
Alterando o texto, o mesmo continua sendo desenhado de maneira centralizada: 

É importante ressaltar que estamos desenhando o texto centralizado em relação ao centro da tela. Entretanto, o texto poderia estar centralizado em relação a qualquer outro ponto especificado por você através das coordenadas posX e posY do código acima.

Jogar bem!

[]s
-- AFurtado
http://afurtado1980.spaces.live.com