quinta-feira, 5 de junho de 2008

Desenhado uma Imagem na tela

Tutorial nível: Fácil

Para este tutorial você precisa:
ter instalado o MS XNA GSE 2.0


Desenhando uma imagem na tela

Nesse projeto apenas iremos desenhar uma imagem na tela.


Primeiro passo crie um projeto, eu criei um projeto WindowsGame.

Criado o projeto ele vem assim(Na versão de XNA 2.0):



using System;
using System.Collections.Generic;

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.Net;
using Microsoft.Xna.Framework.Storage;

namespace WindowsGame1
{
/// <summary>
/// This is the main type for your game
/// </summary>
public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;

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

/// <summary>
/// Allows the Game to perform any initialization it needs to before starting to run.
/// This is where it can query for any required services and load any non-graphic
/// related content. Calling base.Initialize will enumerate through any components
/// and initialize them as well.
/// </summary>
protected override void Initialize()
{
// TODO: Add your initialization logic here

base.Initialize();
}

/// <summary>
/// LoadContent will be called once per Gameand is the place to load
/// all of your content.
/// </summary>
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 Gamecontent here
}

/// <summary>
/// UnloadContent will be called once per Gameand is the place to unload
/// all content.
/// </summary>
protected override void UnloadContent()
{
// TODO: Unload any non ContentManager content here
}

/// <summary>
/// Allows the Game to run logic such as updating the world,
/// checking for collisions, gathering input, and playing audio.
/// </summary>
/// <param name="gameTime">Provides a snapshot of timing values.
protected override void Update(GameTime gameTime)
{
// Allows the Game to exit
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
this.Exit();

// TODO: Add your update logic here

base.Update(gameTime);
}

/// <summary>
///
This is called when the Gameshould draw itself.
/// <summary>
/// <param name="gameTime">Provides a snapshot of timing values.
protected override void Draw(GameTime gameTime)
{
graphics.GraphicsDevice.Clear(Color.CornflowerBlue);

// TODO: Add your drawing code here

base.Draw(gameTime);
}
}
}




Eu sempre prefiro apagar os comentários para ficar mais fácil de trabalhar deixando assim:



using System;
using System.Collections.Generic;
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.Net;
using Microsoft.Xna.Framework.Storage;

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

public Game1 ()
{
graphics = new GraphicsDeviceManager(this);
Content.RootDirectory = "Content";
}
protected override void Initialize()
{
base
.Initialize();
}
protected override void LoadContent()
{
spriteBatch= new SpriteBatch(GraphicsDevice);
}
protected override void
UnloadContent()
{
}
protected override void Update(GameTime gameTime)
{
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
this.Exit();base.Update(gameTime);
}
protected override void Draw(GameTime gameTime)
{
graphics.GraphicsDevice.Clear(Color.CornflowerBlue);
base.Draw(gameTime);
}
}
}

Primeiro passo vamos incluir no nosso projeto uma imagem de um carro para podermos desenhá-la na tela, então salve essa imagem para podermos ultiliza-la:


Então vá no Solution Explorer(Se não estiver aparecendo use o Hotkey “Ctrl W, S”) clique com o botão direito sobre a pasta Content então clique em Add depois em Existing Item.

Clicado em Add Existing Item agora procure a imagem selecione-a e adicione ao projeto.

Fazendo isso você irá adicionar ao seu projeto um arquivo já existente, ou seja, uma imagem alocada em seu PC, agora dê o endereço da imagem que eu disse para você salvar e clique em Add para adiciona-la no nosso projeto.

Agora no arquivo Game1.cs e no inicio do código adicione uma Texture2D para armazenarmos nossa imagem.Então abaixo da linha:
SpriteBatch spriteBatch;
Escreva:
Texture2D car; //--> comando para adicionar a variável onde iremos armazenar nossa imagem
Então ficara assim:


using System;
using System.Collections.Generic;
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.Net;
using Microsoft.Xna.Framework.Storage;

namespace WindowsGame1
{
public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
Texture2D car; //--> comando para adicionar a variável onde iremos armazenar nossa imagem

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



Agora vamos ler a imagem e armazena-la na nossa variável car que acabamos de criar para guardar-la, então no método protected override void LoadContent() que como nome já diz é o espaço para lermos qualquer tipo de conteudo que iremos usar então logo após a linha:
spriteBatch = new SpriteBatch(graphicsDevice);
vamos escrever:
car = Content.Load<Texture2D>(@"car"); //--> comando para lermos nossa imagem e armazena-la na variavel car

Então ficara assim o método LoadContent:

protected override void LoadContent()
{
spriteBatch = new SpriteBatch(graphicsDevice);
car = Content.Load<Texture2D>(@"car"); //--> comando para lermos nossa imagem e armazena-la na variavel car
}



Agora nós só precisamos desenhar nossa imagem na tela, então no método protected override void Draw(GameTime gameTime) primeiro nós precisamos começar o nosso SpriteBatch, já existente no projeto com o nome de spriteBatch(com primeiro caractere em minúsculo) com o método Begin, e ai sim podemos desenhar nossa imagem com o método Draw do SpriteBatch e depois nós precisaremos fechar nosso SpriteBatch com o método End. Então precisaremos escrever depois da linha:
graphics.GraphicsDevice.Clear(Color.CornflowerBlue);
Escreveremos:
spriteBatch.Begin();
Depois o complexo método Draw:
spriteBatch.Draw(car,new Rectangle(20,20,car.Width,car.Height),Color.White);

Preste atenção nos parametros que o método Draw pede no mínimo 3 parametros:

1° ele pede o Textura2D texture, que será a imagem que planejamos desenhar, então nós indicamos a nossa Texture2D chamada car

2° ele pede o Rectagle destinatioRectangle, que nada mais é o retangulo em que desenharemos a imagem na tela, então criaremos um novo retangulo com as sguites especificações ele vai começar no ponto (20,20) da tela, terá de largura a largura de nossa imagem e de altura terá tambem a altura de nossa imagem

3°ele pede Color color, que nada mais é a cor para imagem, então passamos o branco pois o branco contém todas a cores(Ex.: Se você passar o vermelho nossa imagem não possuirá tons de verde e nem de azul, ou seja só possuirá tons de vermelho, e para amarelo ele posuirá tons de verde e vermelho) então após esse método escreveremos:
spriteBatch.End();
Então ficara assim o método Draw:



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

spriteBatch.Begin();
spriteBatch.Draw(car,new Rectangle(20,20,car.Width,car.Height),Color.White);
spriteBatch.End();

base.Draw(gameTime);
}


Pronto! Desenhamos uma imagem na tela!



Espere pelos próximos tutoriais!


Código completo:


using System;
using System.Collections.Generic;
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.Net;
using Microsoft.Xna.Framework.Storage;

namespace WindowsGame1
{
public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
Texture2D car; //--> comando para adicionar a variável onde iremos armazenar nossa imagem

public Game1 ()
{
graphics = new GraphicsDeviceManager(this);
Content.RootDirectory = "Content";
}
protected override void Initialize()
{
base
.Initialize();
}
protected override void LoadContent()
{
spriteBatch= new SpriteBatch(GraphicsDevice);
car = Content.Load<Texture2D>(@"car"); //--> comando para lermos nossa imagem e armazena-la na variavel car
}
protected override void
UnloadContent()
{
}
protected override void Update(GameTime gameTime)
{
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
this.Exit();base.Update(gameTime);
}

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

spriteBatch.Begin();
spriteBatch.Draw(car,new Rectangle(20,20,car.Width,car.Height),Color.White);
spriteBatch.End();

base.Draw(gameTime);
}
}
}



Nenhum comentário: