Desenhando Bitmaps com XNA no Windows Phone 7

  • Article

Hora de mergulhar no mundo dos Bitmaps!

Um bitmap é uma imagem 2D e também serve para ser utilizado como textura na programação 3D. Os mais comuns tipos de arquivos para esta finalidade são BMP, PNG e JPG.

Programação bitmap foi o percursor da programação Sprite, e é neste segundo que desejamos nos aprofundar mais pra frente.

Acredito que você já saiba o suficiente sobre Sprites a esta altura, mas caso negativo, sugiro que faça a leitura no post Crie seu primeiro projeto XNA 4.0 para Windows Phone 7 pois nele faço uma pequena explanação sobre o tema.

É impossível criar um objeto 3D somente com uso de bitmaps, contudo eles são utilizados no momento que este objeto é renderizado.

A textura trabalha como uma capa ao objeto 3D, um invólucro, mas que não tem forma 3D, pelo contrario, está lá para adquirir esta forma.

Falar em bitmaps pode parecer um assunto extremamente simples, principalmente para desenvolvedores, certo? Mas não se engane, um dos assuntos mais complexos do mundo 3D é o tratamento de texturas, mas que para nossa sorte, começaremos pelo básico, mas posteriormente entraremos em texturas avançadas, luzes, efeitos especiais.. e ai que a coisa complica. Mas vamos continuar simples por enquanto.

Ansioso para colocar a mão na massa? Vamos lá..

Crie um novo projeto para Windows Phone e chame-o de Bitmap Demo. Obs: não se esqueça, aqui estamos utilizando XNA e não Silverlight.

Crie um bitmap ou importe algum que você já tenha. Eu aqui acabei me empolgando e investi 30 minutos na criação do meu bitmap (estava inspirado Smiley ) Se quiser utiliza-lo, pode baixar minha nave inspirada na seria Battlestar Galactica de 1979.

 

Você pode fazer o download! O PNG (já com canal Alpha) está no meu Skydrive, acesse https://skydrive.live.com/redir.aspx?cid=eeb5559a340ed502&resid=EEB5559A340ED502!214&parid=root

Botão direito no projeto Content , Add, Existing Item.. E então uma janela será apresentada para que selecione nossa nave ou outro fantástico Bitmap que tenha criado.

Se a janela de propriedades do Visual Studio não estiver visível, vá em View e ative-a em Properties Window.

Quando você seleciona um ativo (que a partir deste momento chamaremos somente de Asset) suas propriedades tornam-se visíveis.

Repare, acessando as propriedades do nosso bitmap, que tanto em Content Importer como Content Processor nossa imagem já foi reconhecida como uma textura.

Neste drop-down, veja também que temos as opções:

  • Effect – XNA Framework
  • Autodesk FBX (estou doido para falar deste aqui, assunto muito rico e interessante!) – XNA Framework
  • Sprite Font Description – XNA Framework
  • WAV Audio File – XNA Framework
  • WMA Audio File – XNA Framework
  • WMV Video File – XNA Framework
  • XACT Project – XNA Framework
  • X File – XNA Framework
  • XML Content – XNA Framework – XNA Framework

Estes são os tipos de Assets que o XNA reconhece automaticamente, mas saiba que você pode criar seu próprio conteúdo e tipo de conteúdo personalizado (tipos diversos de data files) mas provavelmente tentaremos trabalhar com os tipos mais comuns nestes posts.

Diferente de outras ferramentas, dentro do XNA framework (ou Game Studio, o que preferir) o nome dos nossos Assets são muito mais importantes que suas extensões. Você perceberá isto com o tempo.

Verá que o nome do Asset é mantido o tempo todo, e gerenciado tanto pelo XNA quanto seu código, porém a extensão receberá alterações quando o projeto for compilado.

Mão no código. Vá na definição da classe Game1 (onde outras variáveis globais já foram criadas) e adicione um novo tipo.

O tipo Texture2D é uma classe para bitmaps. Já a Vector2 nos permite manter o controle da posição do nosso bitmap em relação a ela.

 

 

 public class Game1 : Microsoft.Xna.Framework.Game
    {
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;

        //texture variable
        Texture2D shipImage;

        //position variable
        Vector2 shipPos;


        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";

            // Frame rate is 30 fps by default for Windows Phone.
            TargetElapsedTime = TimeSpan.FromTicks(333333);

            // Extend battery life under lock.
            InactiveSleepTime = TimeSpan.FromSeconds(1);
        }

 

 

Variáveis definidas, agora vamos carregar nossos Assets. Onde faço isso?...

Se respondeu no método LoadContent() sua resposta está certíssima! Iremos Carregar o Asset e já "setar" sua aposição.

 

 

 protected override void LoadContent()
        {
            // Create a new SpriteBatch, which can be used to draw textures.
            spriteBatch = new SpriteBatch(GraphicsDevice);

            // TODO: use this.Content to load your game content here
            
            //load our super spaceship or something that you have created
            shipImage = Content.Load<Texture2D>("naveXNA");
            //as you can see just the file's name is called all the time!
            //one more thing, we have been using english all the time because C# is english based as well, that is the reason
            //get used to use english in the development world, that is SUPER IMPORTANT to become easier the learning process
            //but if you are reading that, that point is already ok to you :)

            shipPos = Vector2.Zero;
            
        }

 

 

Pronto! Agora rode o nosso game e veja nosso bitmap!

Nada apareceu certo? Sabe me dizer o motivo?
Se você sabe, ótimo! Se não, a razão é bem  simples.

Criamos as variáveis. Definimos algumas propriedades. Carregamos nossos Assets porém ainda não utilizamos o comando para apresentar na tela nosso bitmap!

Onde executamos este comando?

Se respondeu que é dentro do método Draw() você já está entendendo a lógica e um pouco da arquitetura do XNA Smiley

 

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

            // TODO: Add your drawing code here
            //bewgin drawing
            spriteBatch.Begin();

            //draw the bitmap
            spriteBatch.Draw(shipImage, shipPos, Color.White);

            //finish drawing
            spriteBatch.End();

            base.Draw(gameTime);
        }

 

 

Agora sim! F5 no VS! (não precisa chamar de Visual Studio 2010 Ultimate.. a esta altura você e ele já são amigos íntimos Smiley

 

 

 

Bacana não é mesmo?

Faça novos testes, crie outros bitmaps, defina diferentes propriedades.. não se preocupe em acertar ou errar. Mais importante que isto é você adquirir cada vez mais experiência e familiaridade com as tecnologias citadas aqui.

Você não está aprendendo a pilotar um avião. Se fosse, aí sim erros seriam fatais.

Aqui meu querido amigo, se você errou, Ctrl Z .

Ficou totalmente perdido? Feche tudo, abra o Visual Studio novamente e crie um novo projeto.. simples assim.

Inspire-se com o poder do XNA no Windows Phone 7!

[]`s!