[XNA] Movendo um sprite na tela com o teclado

Neste rápido tutorial você verá como mover um sprite pela tela. Vamos começar então ?

Passo 1: Inicie um novo projeto e chame-o de MeuPrimeiroMovimento, e copie a imagem abaixo para dentro da pasta Content do projeto. E adicione a imagem ao projeto do jogo.

fantasma.png

Passo 2: Faça as seguintes declarações na classe principal do jogo (“Game1.cs”)

namespace MeuPrimeiroMovimento
{
    public class Game1 : Microsoft.Xna.Framework.Game
    {
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;
        // Textura que vai ser desenhada na tela
        Texture2D fatasma;
        // Posicao da textura na tela. x = 100, y = 100
        Vector2 position = new Vector2(100, 100);
        // Teclado a ser usado
        KeyboardState keysboardState;
        // A velocidade que vamos movimentar a textura
        float speed = 5.0f;
        .
        .
        .

Passo 3: Carregue a textura (imagem) no método LoadContent()

protected override void LoadContent()
{
    spriteBatch = new SpriteBatch(GraphicsDevice);

    // Carregando a textura do fastama .PNG
    fantasma = Content.Load<Texture2D>("fantasma");
}

Passo 4: No método Update(GameTime gameTime), vamos inserir toda lógica de movimento do sprite

protected override void Update(GameTime gameTime)
{
    // Declaramos o teclado
    keysboardState = Keyboard.GetState();
    // Tecla para cima
    if (keysboardState.IsKeyDown(Keys.Up))
    {
        position.Y -= speed;
    }
    // Tecla para baixo
    if (keysboardState.IsKeyDown(Keys.Down))
    {
        position.Y += speed;
    }
    // Tecla para esquerda
    if (keysboardState.IsKeyDown(Keys.Left))
    {
        position.X -= speed;
    }
    // Tecla para direita
    if (keysboardState.IsKeyDown(Keys.Right))
    {
        position.X += speed;
    }

    base.Update(gameTime);
}

Passo 5: Vamos desenhar o sprite no método Draw(GameTime gameTime)

protected override void Draw(GameTime gameTime)
{
    GraphicsDevice.Clear(Color.CornflowerBlue);
    spriteBatch.Begin();
    spriteBatch.Draw(fantasma, position, Color.White);
    spriteBatch.End();
    base.Draw(gameTime);
}

Pronto, agora é só executar o programa e ver o resultado.

Segue código completo do tutorial:

using System;
using System.Collections.Generic;
using System.Linq;
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.Media;
using Microsoft.Xna.Framework.Net;
using Microsoft.Xna.Framework.Storage;
<pre>namespace MeuPrimeiroMovimento
{
    public class Game1 : Microsoft.Xna.Framework.Game
    {
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;
        // Textura que vai ser desenhada na tela
        Texture2D fatasma;
        // Posicao da textura na tela. x = 100, y = 100
        Vector2 position = new Vector2(100, 100);
        // Teclado a ser usado
        KeyboardState keysboardState;
        // A velocidade que vamos movimentar a textura
        float speed = 5.0f;
        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }

        protected override void Initialize()
        {
            base.Initialize();
        }

        protected override void LoadContent()
        {
            spriteBatch = new SpriteBatch(GraphicsDevice);
            // Carregando a textura do fastama .PNG
            fantasma = Content.Load<Texture2D>("fantasma");
        }

        protected override void UnloadContent()
        {

        }
        protected override void Update(GameTime gameTime)
        {
            // Declaramos o teclado
            keysboardState = Keyboard.GetState();
            // Tecla para cima
            if (keysboardState.IsKeyDown(Keys.Up))
            {
                position.Y -= speed;
            }
            // Tecla para baixo
            if (keysboardState.IsKeyDown(Keys.Down))
            {
                position.Y += speed;
            }
            // Tecla para esquerda
            if (keysboardState.IsKeyDown(Keys.Left))
            {
                position.X -= speed;
            }
            // Tecla para direita
            if (keysboardState.IsKeyDown(Keys.Right))
            {
                position.X += speed;
            }

            base.Update(gameTime);
        }
        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);
            spriteBatch.Begin();
            spriteBatch.Draw(fantasma, position, Color.White);
            spriteBatch.End();
            base.Draw(gameTime);
        }
    }
}

Você pode fazer o download do projeto completo aqui.

Abraços e até a próxima.

[XNA] Colocando seu primeiro sprite na tela

Olá caro leitor que esta acompanhando este blog. Hoje vamos aprender como colocar nosso primeiro sprite na tela. Você está com dúvida do que é sprite ? então vamos a uma breve descrição do que seria.

Em computação gráfica, um sprite (do latim spiritus, significando “duende”, “fada”) é um objeto gráfico bi ou tridimensional que se move numa tela sem deixar traços de sua passagem (como se fosse um “espírito”).

Os sprites foram inventados originalmente como um método rápido de animação de várias imagens agrupadas numa tela, em jogos de computador bi-dimensionais, usando hardware especial. A medida que a performance dos computadores melhorou, esta otimização tornou-se desnecessária e o termo evoluiu para referir-se especificamente às imagens bi-dimensionais que eram integradas numa determinada cena, isto é, figuras geradas por hardware ou software eram todas referenciadas como sprites. A medida que gráficos tridimensionais tornaram-se mais comuns, o termo passou a descrever uma técnica elementar de simulação de imagens em 2.5D ou 3D que prescinde do uso de renderizações complexas.

Vamos começar ?

Crie um novo projeto como visto na aula anterior, ou abra um projeto já existente. E agora salve a imagem abaixo dentro da pasta Content do projeto que você acaba de criar.

helloworld.png

Agora conforme a imagem, clique com o botão direito do mouse na pasta Content, selecione Add -> Existing Item. Então selecione a imagem desejada, no nosso caso selecionaremos a imagem que copiamos.

Vamos agora usar esta bela imagem na nossa janela azul. Porém antes de usá-la vamos entender o que esta será feito. Primeiro precisamos declarar um objeto Texture2D para armazenar a imagem 2D, está classe Texture2D o XNA já nos dá. Declarado o objeto, precisamoss então carregar a imagem nesse objeto, através do método Load<Template>(AssetName) da classe.  E por fim, agora é só desenhar na janela. Simples você não acha ?

Então vamos para o primeiro passo, precisamos declarar nosso objeto do tipo Texture2D, que se chamara image. Veja como fica o código.

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

Nosso próximo passo, precisamos carregar a imagem para dentro deste objeto criado. Para carregar algo (imagens, modelos, músicas, etc..) isso é realizado dentro do método LoadContent. Veja o código.

protected override void LoadContent()
{
    spriteBatch = new SpriteBatch(GraphicsDevice);
    image = Content.Load<Texture2D>("helloworld");
}

E por fim, é só desenhar a imagem na janela. Isso deve ser feito dentro do método Draw da classe, veja como fica o passo final.

protected override void Draw(GameTime gameTime)
{
    GraphicsDevice.Clear(Color.CornflowerBlue);
    spriteBatch.Begin();
    spriteBatch.Draw(image, new Vector2(0, 0), Color.White);
    spriteBatch.End();
    base.Draw(gameTime);
}

Agora é só executar o programa e ver um resultado como este abaixo.

Código completo da aplicação:

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

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

        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = Content;
        }
        protected override void Initialize()
        {
            base.Initialize();
        }

        protected override void LoadContent()
        {
            spriteBatch = new SpriteBatch(GraphicsDevice);
            image = Content.Load<Texture2D>("helloworld");
        }

        protected override void UnloadContent()
        {

        }

        protected override void Update(GameTime gameTime)
        {
            base.Update(gameTime);
        }

        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);
            spriteBatch.Begin();
            spriteBatch.Draw(image, Vector2.Zero, Color.White);
            spriteBatch.End();
            base.Draw(gameTime);
        }
    }
}

Agora que você já sabe como colocar uma imagem na tela, faça alguns testes modificando o valor de Vector2 e da Color para ver os resultados. Ou até mesmo colocando outras imagens.

NOTAS:

O método de desenho do objeto SpriteBatch usado, possui 7 sobrecargas, mas usamos somente uma delas.

• spriteBatch.Draw(Texture2D <textura>, Vector2 <vector2>, Color <cor>);

Referência:

André Luiz Battaiola, Rodrigo de G. Domingues, Bruno Feijó, Dilza Scwarcman, Esteban Walter G. Clua, Lauro Eduardo Kosovitz, Marcelo Dreux, Carlos André Pessoa, Geber Ramalho. Desenvolvimento de Jogos em Computadores e Celulares. UFSCar, PUC-Rio,UFPE. Em RITA, vol. VIII, n. 2, outubro de 2001.