by Uditha Sampath Bandara

Earlier games were made using sprites (images) because 3d graphics were not available at that time. So all the top selling games made using sprites, sometimes with the low hardware capabilities it’s hard to implement more sprites at the same time. But with the technology improvements change all that to make games much easier.

After this tutorial you will have the basic knowledge to create 2d games for

XBOX360.That means games like Super Mario by Nintendo or Final Fantasy by Square Enix. Also you need to have the knowledge of 2d art creation. Otherwise you will not be able to create assets for the games.

So this month we`ll dicuss about the code and steps to draw 2d images on a XBOX360 2d games.

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 screan.

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>("game");

then in the Draw()method 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 Xbox360_2DGraphics

{

    /// <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>("game");

        }

        /// <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 initilize a float variable to the animation.

 float val = 0.0f;

Then in Update()method increment the valuve to change the position.

val = val + 0.3f;

Finally in the Draw()method 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 defining a float value and rectangle method gets int value.So we need to cast float to int.

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 Xbox360_2DGraphics

{

    /// <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>("game");

        }

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

Now it`s your time to create a Sri Lankan version of Mario.

Form next tutorial you learn about working with 3d graphics for XBOX360.