Vamos aprender XNA? – Parte 18 – Mixing 2D Text (Sprites) with 3D models

Olá pessoal, tudo certo?

Depois de um tempo afastado dessa série, volto a escrever um pouco sobre XNA. Aliás, nunca é muito lembrar que estarei falando sobre XNA no TechEd.

Como usual, todo o código-fonte está disponível no Github.

O que desejamos fazer?

Nosso objetivo é mesclar conteúdo 2D (texto) com modelos 3D. Observe:

Como você pode imaginar, o texto permanece “parado” no centro da tela enquanto a animação continua funcionando.

Para escrever um texto, precisamos definir uma fonte

Para poder escrever textos em 2D em XNA, precisamos definir uma fonte. Para isso, basta adicionar uma “Sprite Font” na Content Pipeline.

O nome dado ao arquivo não é tão relevante. Mas, por favor, recomendo nomes mais significativos. O arquivo adicionado é um XML (mostrado abaixo, sem os comentários, para economizar espaço).

  
    Courier New
    32
    0
    true
    
    
      
         
        ~
      
    
  

Como você pode ver, podemos definir todas as propriedades da fonte. Fino!

Carregando dados da fonte no Game

Já definimos a fonte, agora precisamos carregar esta fonte no jogo. Isso é feito dentro do método LoadContent. Observe:

protected override void LoadContent()
{
        // ...
    spriteBatch = new SpriteBatch(GraphicsDevice);
    font = Content.Load("CourierNew");
    textPosition = new Vector2(
        GraphicsDevice.Viewport.Width / 2,
        GraphicsDevice.Viewport.Height / 2
        );
}

Por objetividade, preservei apenas o conteúdo relacionado ao post de hoje. Voltamos a precisar de um “SpriteBatch” (usado para desenhar conteúdo 2D). Além disso, repare que calculei a posição desejada para o texto (centro da tela).

Desenhando o texto

Já definimos a fonte. Já carregamos dados relacionados a fonte no Game. Agora, vou mostrar como fazer o desenho. É bem simples. Observe:

protected override void Draw(GameTime gameTime)
{
    GraphicsDevice.Clear(Color.Black);

    GraphicsDevice.BlendState = BlendState.Opaque;
    GraphicsDevice.DepthStencilState = DepthStencilState.Default;
    GraphicsDevice.SamplerStates[0] = SamplerState.LinearWrap;

    DrawScene(spaceship.Camera);

    spriteBatch.Begin();

    var output = "Drawing Text with Sprite";
    Vector2 offset = font.MeasureString(output) / 2;
    spriteBatch.DrawString(
        font, output, 
        textPosition, 
        Color.White, 
        0, offset, 
        1.0f, SpriteEffects.None, 0.5f);

    spriteBatch.End();

    base.Draw(gameTime);
}

Dois pontos a observar:

1. O texto é desenhado utilizando o método DrawString do objeto SpriteBatch.
2. Preciso restaurar alguns states pois eles são “modificados” pelo SpriteBatch.

Missão cumprida!