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
public class Game1 : Microsoft.Xna.Framework.Game
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
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
protected override void Initialize()
// TODO: Add your initialization logic here
ResetGame(); // Reset the game
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
protected override void Draw(GameTime gameTime)
// Clear the background
// Declare a position for the graphic using a Vector2 structure
Vector2 position = new Vector2(100, 100);
// Begin a sprite batch
spriteBatch.Draw(_smileyTexture, _smileyPosition, Color.White);
spriteBatch.End(); // End a sprite batch
Set the back buffer size and orientation on
Game1() class contructor, below the
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)
// Update the game state
_smileyPosition.Y += 5;
if (_smileyPosition.Y >= Window.ClientBounds.Bottom) _smileyPosition.Y = 0;
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)).