Note: You can also read this post on http://students.netindonesia.net/blogs/mrjimoy_05/archive/2011/08/10/a-simple-graphic-movement-build-on-xna.aspx

XNA is a set of tools with a managed runtime environment provided by Microsoft that facilitates video game development and management (Wikipedia.com). This article will covered the very basic of game development before you can building the real game :)

It will be very simply displaying a moving graphic on the screen from left to right. If you are familiar with HTML then it will be so easy, just adding a snippet code <marquee> and close it with the </marquee> and voila!

Although you have installed Visual Studio 2010 for Windows Phone on your computer, you needs a software called Zune. While you’re running the solution without the application, you will receive an error message. Zune is used for all data transfer and synchronization between your PC and your device (Phone/Emulator). Moreover, Zune is a great application you can used for playing your library content such as MP3, your video, pictures, etc. You can download it on http://www.zune.net/.

Open your Visual Studio 2010 for Windows Phone, select the XNA Game Studio 4.0 (Visual C#) and then select the template for Windows Phone Game (4.0), and give your project and solution a name, or just leave it default, then click OK. Right-click the content project node on Solution Explorer, sort “Add” then select “Existing Item“. Choose a graphic file, for example a round image or others. Select “Add”.

Based on the figure above, I am using smiley.png as my graphic file. Make sure your Game1.cs open in the code editor. The object type for the graphic file we stored is Texture2D. Declare the Texture2D object below the spriteBatch declaration.

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

        private Texture2D _smileyTexture; // the Texture2D object for the graphic
        private Vector2 _smileyPosition; // a variable to hold the position of the graphic
        // ... //

Set the initial position for the graphic by creating a new procedure called ResetGame.

private void ResetGame()
        {
            // Set the initial smiley position
            _smileyPosition = new Vector2(100, 100);
        }

To get this code to run, call the procedure from the existing Initialize procedure.

protected override void Initialize()
        {
            // TODO: Add your initialization logic here            
            ResetGame(); // Reset the game

            base.Initialize();
        }

Then, we need to load the graphic into the variable that we’ve created on LoadContent procedure (note this procedure has been generated automatically).

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

            _smileyTexture = Content.Load<Texture2D>("smiley"); // load your content here
        }

The next step is to display the content loaded on the screen on Draw procedure.

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

            // Declare a position for the graphic using a Vector2 structure
            Vector2 position = new Vector2(100, 100);

            // Begin a sprite batch
            spriteBatch.Begin();
            spriteBatch.Draw(_smileyTexture, _smileyPosition, Color.White);
            spriteBatch.End(); // End a sprite batch

            base.Draw(gameTime);
        }

Set the back buffer size and orientation on Game1() class contructor, below the TargetElapsedTime.

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

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

            // Set backbuffer size and orientation
            graphics.PreferredBackBufferWidth = 480;
            graphics.PreferredBackBufferHeight = 800;
        }

Finally, we need to change the position stored in the _smileyPosition variable so the graphic moves. The bigger value you provide, it looks faster the graphic moves. So, we will try to give it 5 and will move on Y axis. If you want to moves your graphic horizontally, then try to changes Y to X.

protected override void Update(GameTime gameTime)
        {
            // Allows the game to exit
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
                this.Exit();

            // Update the game state
            _smileyPosition.Y += 5;
            if (_smileyPosition.Y >= Window.ClientBounds.Bottom) _smileyPosition.Y = 0;

            base.Update(gameTime);
        }

Run it!

If you get your graphic moves, then you have succeed to create your application :)

Thanks for reading.

Notes: If you have anything to say about the article, please leave a comment. Please show a detail explanation (just like if you’ve got any error, attach the error message) so it should be easier for me to help you.
(attach the file if needed (Only: jpg, jpeg, png, gif, zip files can be uploaded)).