by Uditha Sampath Bandara

This month we`ll discuss about the code and steps to draw 2d image on the XNA game.

First you need to load an image to the content folder.

Right click on the content folder and Add->existing items

And select an image form the hard drive.

It could be .bmp,.png,.jpg ,.dds,.tga

Now in the Game 1.cs you need to write code to draw the image in the screen.

First create a object form Texture2D to handle the image.

Texture2D mytx;

Then in the LoadContent() method you can load the image.

mytx = Content.Load<Texture2D>("img");

then in the Draw() metord you can draw the image in the screen.

spriteBatch.Begin();   / /start the sprite batch process to draw font

   

spriteBatch.Draw(mytx,new Rectangle(100,100,600,400), Color.White);

//Draw() method is getting parameters for texture, rectangle positions which contains x y positions and width and height and finally refresh color of the image.

spriteBatch.End();   //end the sprite batch process

now you can run the project by pressing F5 or by clicking the run button.

   

Final code of Game1.cs

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 image_draw

{

    /// <summary>

    /// This is the main type for your game

    /// </summary>

    public class Game1 : Microsoft.Xna.Framework.Game

    {

    GraphicsDeviceManager graphics;

    SpriteBatch spriteBatch;

    Texture2D mytx;

    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 game and 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);

    mytx = Content.Load<Texture2D>("img");

  

    }

    /// <summary>

    /// UnloadContent will be called once per game and is the place to unload

    /// all content.

    /// </summary>

    protected override void UnloadContent()

    {

 

    }

    /// <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.</param>

    protected override void Update(GameTime gameTime)

    {

    // Allows the game to exit

    if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)

    this.Exit();

    base.Update(gameTime);

    }

    /// <summary>

    /// This is called when the game should draw itself.

    /// </summary>

    /// <param name="gameTime">Provides a snapshot of timing values.</param>

    protected override void Draw(GameTime gameTime)

    {

    GraphicsDevice.Clear(Color.Black);

    spriteBatch.Begin();

    spriteBatch.Draw(mytx,new Rectangle(100,100,600,400), Color.White);

    spriteBatch.End();

    base.Draw(gameTime);

    }

    }

}

Modify the code for 2d animation.

Also you can create 2d animation to this example using these lines of codes.

First initialize a float variable to the animation.

 float val = 0.0f;

then in Update() metord increment the valuve to change the position.

val = val + 0.3f;

finally in the Draw() metord increment the x y positions of the image.

spriteBatch.Draw(mytx,new Rectangle(100+(int)val,100+(int)val,600,400), Color.White);

note that we are define a float valuve and rectangle methord is gets int value.So we need to cast float to int.

then after you press F5 you are ready to play the animation.

Final code of Game1.cs with a 2d animation

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 image_draw

{

    /// <summary>

    /// This is the main type for your game

    /// </summary>

    public class Game1 : Microsoft.Xna.Framework.Game

    {

    GraphicsDeviceManager graphics;

    SpriteBatch spriteBatch;

    Texture2D mytx;

    float val = 0.0f;

    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 game and 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);

    mytx = Content.Load<Texture2D>("img");

  

    }

    /// <summary>

    /// UnloadContent will be called once per game and is the place to unload

    /// all content.

    /// </summary>

    protected override void UnloadContent()

    {

 

    }

    /// <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.</param>

     protected override void Update(GameTime gameTime)

    {

    // Allows the game to exit

    if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)

    this.Exit();

    val = val + 0.3f;

     

    base.Update(gameTime);

    }

    /// <summary>

    /// This is called when the game should draw itself.

    /// </summary>

    /// <param name="gameTime">Provides a snapshot of timing values.</param>

    protected override void Draw(GameTime gameTime)

    {

    GraphicsDevice.Clear(Color.Black);

    spriteBatch.Begin();

    spriteBatch.Draw(mytx,new Rectangle(100+(int)val,100+(int)val,600,400), Color.White);

    spriteBatch.End();

    base.Draw(gameTime);

    }

    }

}

This is the end of the draw image and 2d animation tutorial.

Form next tutorial you learn about working with 3d graphics in XNA.

                                                                                              Previous article