Ponto V!

SpriteFont – Escrevendo na tela do seu jogo com XNA Escrito por Kleber Andrade

Olá leitores, neste tutorial aprenderemos como escrever textos na tela do jogo usando SpriteFont. Este recurso é muito utilizado nos jogos para informar ao jogador a quantidade de vidas, munição, posição do jogador, tempo, pontuação e até mesmo informações para debug do seu jogo. Este tutorial foi testado no XNA 3.1.

Adicionando um arquivo do tipo SpriteFont ao seu projeto

1º Passo: Crie um novo projeto ou abra um já existente. Logo em seguida, criaremos um SpriteFont que é um arquivo XML que contém as informações sobre o tipo da fonte, tamanho, espaçamento entre as letras, etc. Então para criar um SpriteFont, clique com o botão direito do mouse pasta Content do seu projeto no Solution Explorer e selecione “Add --> New Item”.

2º Passo: Na tela que abrir, clique em SpriteFont e na caixa de dialogo Name, coloque um nome amigável para sua fonte mantendo sua extensão spritefont. No meu caso vou chamá-la de myFont, então o nome dela vai ficar myFont.spritefont. Agora clique em Add.

3º Passo: Ao cria o novo SpriteFont, ele automaticamente será aberto (arquivo XML) para fazer modificações (Se você não conhece XML não se assuste, este é bem simples). Abaixo segue as linhas principais do XML, o resto é comentário por isso eu eliminei.

<XnaContent xmlns:Graphics="Microsoft.Xna.Framework.Content.Pipeline.Graphics">
  <Asset Type="Graphics:FontDescription">
    <FontName>Arial</FontName>
    <Size>40</Size>
    <Spacing>0</Spacing>
    <UseKerning>true</UseKerning>
    <Style>Regular</Style>
    <CharacterRegions>
   <CharacterRegion>
     <Start> &#32; </Start>
    <End>&#126; </End>
   </CharacterRegion>
</CharacterRegions>
    
  

4º Passo: Mude o necessário no código XML de sua SpriteFont.

• FontName: nome da fonte, ou seja, aqui você pode usar qualquer fonte que seu computador tenha. No meu caso eu mudei para Arial.
• Size: tamanho da fonte, eu coloquei 40.
• Spacing: espaçamento entre as letras, mantenha 0.
• UseKerning: true (verdadeiro), ou seja, as letras são igualmente espaçadas, levando em conta a diferença de largura, exemplo a letra “I” e a letra “W”.
• Style: estilo da letra, Regular, Bold, Italic.

OBS: MUITAS PESSOAS DIZEM QUE O XNA NÃO PERMITE O USO DE ACENTUAÇÃO NO JOGO, ISSO É MEIO QUE VERDADE, PORÉM EXISTE UMA MANEIRA DE ADICIONAR PALAVRAS ACENTUADAS NO SEU TEXTO. COMO?

O trecho do código XML acima indica que você pode usar caracteres ASCII que vão do valor 32 ao valor 126, o que quer dizer que nenhum desses valores compreendem acentos. Se você adicionar os acentos, mude o valor final para 255, conforme o código abaixo.

<CharacterRegions>
   <CharacterRegion>
     <Start> &#32; </Start>
    <End>&#255; </End>
   </CharacterRegion>
</CharacterRegions>

Usando a SpriteFont criada para escrever na tela

1º Passo: Uma vez tendo seu arquivo XML de spritefont criado, vamos adicionar uma variável do tipo SpriteFont no projeto, no meu caso chamarei minha variável de sFont.

SpriteFont sFont;

2º Passo: A classe SpriteFont é responsável por gerenciar o conteúdo carregado do nosso arquivo de fonte. Da mesma forma como carregamos uma textura, modelo, sons, vamos carregar nossa fonte em nossa variável (objeto) no método LoadContent().

protected override void LoadContent()
{
    spriteBatch = new SpriteBatch(GraphicsDevice);
    sFont = Content.Load<SpriteFont>(@"myFont");
}

3º Passo: Agora tudo que precisamos fazer é desenhar o nosso texto na tela através do método DrawString do objeto SpriteBatch respeito os parâmetros, uma vez que o método possui 5 sobrecargas. Neste tutorial iremos usar o mais simples. O código abaixo deve ser colocado no método Draw() entre os métodos Begin() e End(). Falaremos para o spriteBatch, desenhar uma string “Hello World!” e depois “Olá Mundo!” na tela usando o arquivo XML que criamos e carregamos na variável sFont. Logo na sequência passamos uma posição e uma cor.

protected override void Draw(GameTime gameTime)
{
    GraphicsDevice.Clear(Color.CornflowerBlue);
    spriteBatch.Begin();
    spriteBatch.DrawString(sFont, "Hello World!", new Vector2(100.0f, 50.0f), Color.White);
    spriteBatch.DrawString(sFont, "Olá Mundo!", new Vector2(100.0f, 200.0f), Color.White);    spriteBatch.End();
    base.Draw(gameTime);
}

4º Passo: Pronto, agora é só compilar (F5) e se tudo estiver corretamente, você verá o seguinte resultados conforme a figura abaixo. O que fizemos então, pedimos para o spriteBatch, desenhar uma string “Hello World!” e depois “Olá Mundo!” na tela usando o arquivo XML que criamos e carregamos na variável sFont. Logo na sequência passamos uma posição e uma cor.

Caros leitores, este tutorial não para por aqui, agora vamos ver algo mais interessante ainda para os seus jogos, que são as fontes customizadas, ou seja, fontes com efeitos coloridos, bordas, etc.

Criando um SpriteFont customizado

Para criarmos nossa fonte customizada, vamos fazer download de um software que irá facilitar nossas vidas. Esse software é o SpriteFont2, com ele você pode criar texturas fonte para jogos e aplicativos multimídia.

Características do Software:

• Pixel precisa bitmaps caráter
• Fonte e seleção de estilo da fonte
• Cor sólida e escovas de bitmap
• Sólido de cor e linhas bitmap
• Drop efeito de bitmap sombra
• Outer glow efeito de bitmap
• Bevel efeito de bitmap
• Blur efeito de bitmap
• Grava efeito de bitmap
• Saída de formatos de imagem: BMP, GIF, JPEG, PNG, TIFF, WMP
• Seleção de caracteres exportados
• Métricas da fonte de Exportação (posição e tamanho dos caracteres)
• Carregar e salvar as configurações

1º Passo: Fazer download do software (Preço: Freeware) - Ultima versão: V2.0.1

• Instalador do Windows [Download](1,15MB)
• Programa executável sem precisar instalar [Download](763 KB)

2º Passo: Abra o software e edite uma fonte. Na primeira tela ao abrir o software, você pode escolher a fonte, estilo, tamanho, etc. No meu caso eu modifiquei os seguintes parâmetros:

• Font: Arial
• Font size: 40

Na próxima aba Brush Settings, você pode alterar a cor da fonte, cor da borda e até mesmo adicionar texturas.

A próxima aba é a de Efeitos, no qual você pode adicionar sombras e outros efeitos interessantes.

Logo em seguida temos a tela de seleção de caracteres, aqui funciona da mesma forma que o e do XML que vimos, se você quiser acentos, você deve mudar o valor to key para 255 ao invés de 126.

A próxima tela é de visualização da fonte, no caso eu coloco o fundo (background) todo transparente.

E por fim, agora é só selecionar o destino final da sua imagem e dar um nome para ela, no meu caso chamei de myCustomFont e mandei salvar no Desktop para ficar fácil encontrar ela depois.

Ao conclui clique em export e você terá um arquivo texture da sua fonte final para ser carregado no nosso caso no XNA. Se você adicionar o fundo transparente na fonte, não esqueça de salvar como .PNG para que o canal alpha funcione.

3º passo: Após criar sua fonte customizada, é hora de inserir no projeto, mas agora de uma maneira um pouco diferente. Clique com o botão direito do mouse na pasta Content do seu projeto no Solution Explorer e selecione “Add --> Existent Item” e selecione sua fonte customizada, importando-a assim para o seu projeto.

4º Passo: Um grande detalhe é agora. Após importar sua fonte customizada, clique com o botão direito em cima dela no Solution Explorer e mande exibir suas propriedades e defina a propriedade do Content Processo como Sprite Font Texture conforme a figura abaixo.

5º passo: Uma vez com a nossa fonte dentro de nosso projeto e com sua propriedade de processamento correta, vamos criar uma variável do tipo SpriteFont. No meu caso chamarei minha variável de sCustomFont.

SpriteFont sCustomFont;

6º Passo: Da mesma forma que carregamos o arquivo XML de spritefont, vamos carregar o nosso arquivo .png também. Então nosso método LoadContent agora ficara dessa forma.

protected override void LoadContent()
{
    spriteBatch = new SpriteBatch(GraphicsDevice);
    sFont = Content.Load<SpriteFont>(@"myFont");
    sCustomFont = Content.Load<SpriteFont>(@"myCustomFont");
}

7º Passo: Agora tudo que precisamos fazer é desenhar o nosso texto na tela através do método DrawString do objeto SpriteBatch respeito os parâmetros, uma vez que o método possui 5 sobrecargas. Neste tutorial iremos usar o mais simples. O código abaixo deve ser colocado no método Draw() entre os métodos Begin() e End().

protected override void Draw(GameTime gameTime)
{
    GraphicsDevice.Clear(Color.CornflowerBlue);
    spriteBatch.Begin();
    // Usando arquivo XML de sprite fonte
    spriteBatch.DrawString(sFont, "Hello World!", new Vector2(100.0f, 50.0f), Color.White);
    spriteBatch.DrawString(sFont, "Olá Mundo!", new Vector2(100.0f, 200.0f), Color.White);
    // Usando a fonte customizada
    spriteBatch.DrawString(sCustomFont, "Hello World!", new Vector2(100.0f, 100.0f), Color.White);
    spriteBatch.DrawString(sCustomFont, "Olá Mundo!", new Vector2(100.0f, 250.0f), Color.White);
    spriteBatch.End();
    base.Draw(gameTime);
}

8º Passo: Pronto, agora é só compilar (F5) e se tudo estiver corretamente, você verá o seguinte resultados conforme a figura abaixo.

Últimas Considerações

Como a maioria dos tipos de software, arquivos de fonte são licenciados e não vendidos. As licenças das fontes variam de fornecedor para fornecedor, mas a maioria não permitir a redistribuição das fontes, e isso inclui a redistribuição de reproduções, tais como mapas de bits que contém o conjunto de caracteres rasterizados. Isto é mesmo verdade de muitas das licenças que cobrem as fontes que as fontes com as aplicações Microsoft e Windows. Tenha cuidado, portanto, garantir que você tenha os direitos de licença necessária para redistribuir qualquer fonte que incluem como um bitmap que contém o conjunto de caracteres rasterizados em seu jogo! Se você quer conhecer as fontes que podem ser redistribuídas com os seus jogos em XNA, acesse este link.

Download

Para fazer download do exemplo criado neste tutorial clique no ícone de download abaixo.

Conclusão

Agora quando vocês precisarem escrever na tela do jogo utilizando uma fonte comum ou alguma fonte customizada vocês já sabem como fazer. Espero que tenham gostado e que seja de grande valia para seus projetos no futuro. Abraços e até a próxima.