Before you read this tutorial, make sure that you already read Getting To Know XNA at the xna 2D webpage.
So lets Begin, create a project and name it whatever you want.
First of all, download or get any texture you want.
Since we are trying to learn step by step, please download this texture..
[Right Click > save image as ]
Name the image "test"
So what we want to do is first import the image to the game project content, this can be done by:
On your Solution Explorer, Right click the content > add > Existing item > browse and find test image on your download folder.
To view the Solution Explorer, at the top left corner of your visual studio select VIEW > Solution Explorer
Once we successfully imported or added the texture, you'll see the contents at the bottom of the project(Content)
Now we're ready to code a simple process.
So first at the top of your class, under
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
//CREATE A NEW TEXTURE2D - texture2d is the datatype for pictures
Textured2D texture;
Vector2 texturePosition = Vector2.Zero;
//vector 2 is a collection of 2 floating point data (x,y)
//since we are dealing with 2D, we need a variable that will hold the x and y position of the texture2D
//we assigned the texture position to vector2.zero which means x =0, y=0
Now, to load the asset into the texture variable, in loadcontent. Add this line..
texture = Content.Load<Texture2D>("test");
texturePosition = new Vector2(100,100);
So here, we assigned the asset on our texture variable using the
ContentImporter "Content.Load<datatype>("filename")
And the texturePosition to x=100, y=100;
Now that have set all the values we need for a basic drawing of texture ( position and texture or picture)
In the DRAW method, we will use the spriteBatch..
the spriteBatch is the class for drawing 2D objects such as text and images..
To draw a texture, we need to do 3 STEPS;
First: spriteBatch.Begin();
>We are telling the game to start drawing 2D files,
Second: spriteBatch.Draw(texture,texturePosition,Color.White);
>What am i going to draw? where am i going to draw it? what Color?
Last: spriteBatch.End()
>End drawing textures
So if we run the project (F5)
We have drawn the texture at 100,100 of the screen..
As you noticed we only draw the object, what we want to do is to make it move next.
so go to your Update method and add these lines
if (texturePosition.X < 400)
{
texturePosition.X++;
texturePosition.Y++;
}
else
{
texturePosition = new Vector2(-1, -1);
}
As I said, vector two contains x and y.
we can set the values of each of its coordinates by
texturePosition.X = value;
texturePosition.Y = value;
or
texturePosition = new Vector2(value,value);
now run the game and you'll see it move (update)
SOURCE CODE
public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
Texture2D texture;
Vector2 texturePosition = Vector2.Zero;
public Game1()
{
graphics = new GraphicsDeviceManager(this);
Content.RootDirectory = "Content";
}
protected override void Initialize()
{
base.Initialize();
}
protected override void LoadContent()
{
spriteBatch = new SpriteBatch(GraphicsDevice);
texture = Content.Load<Texture2D>("test");
texturePosition = new Vector2(100, 100);
}
protected override void UnloadContent()
{
}
protected override void Update(GameTime gameTime)
{
if (texturePosition.X < 400)
{
texturePosition.X++;
texturePosition.Y++;
}
else
{
texturePosition = new Vector2(-1, -1);
}
base.Update(gameTime);
}
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
spriteBatch.Begin();
spriteBatch.Draw(texture, texturePosition, Color.White);
spriteBatch.End();
base.Draw(gameTime);
}
}
