A Simple Example of Textures and Sprites in WP7

In this example we will look at how to write a simple word with the help of textures and graphics. Here we write the word (TEA) like this:

For this use these steps.

Step 1

First we select File :-> New Project. The following window may be shown:

Step 2

Now we add a class (by right-clicking on the WindowsPhoneGame1 in the Solution Explorer like this:

Here we add a class and name it SpriteInfo.cs. This class is used to add the information about Texture and Vector Size, which will be used in the Draw Method to draw the Text.

Step 3

Now we write the following code in the SpriteInfo.cs class

public class SpriteInfo

{

public Texture2D Texture2D { protected set; get; }

public Vector2 BasePosition { protected set; get; }

public Vector2 PositionOffset { set; get; }

public static float X { set; get; }

public SpriteInfo(Texture2D mytexture2D, int x, int y)

{

Texture2D = mytexture2D;

BasePosition = new Vector2(x, y);

}

public Vector2 Position

{

get

{

return BasePosition + X * PositionOffset;
}
}
}
}

Here Texture2D is basically a Bitmap. It is used to represent an image in various sizes. And the Position is used to show the point on the display, where the Upper Left corner of the Texture will be available.

Step 4

Now we will take two images, to create our text. (One is horizontal and the other one is vertical.) In this example, HLine.png and VLine.png are the images we will use. We add these images in the WindowsPhoneGame1Content (Content part) of the Solution Explorer like this:

Step 5

Now we will write the code on the Game1.cs page like this:

GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
Viewport viewport;
List<SpriteInfo> spriteInfos = new List<SpriteInfo>();
Random rand = new Random();
const int SpaceBetweenCharacters = 5;
public Game1()
{
graphics = new GraphicsDeviceManager(this);
Content.RootDirectory = "Content";
// Frame rate is 30 fps by default for Windows Phone.
TargetElapsedTime = TimeSpan.FromTicks(333333);
}
protected override void Initialize()
{
base.Initialize();
}
Now we will write the code for LoadContent() like this
protected override void LoadContent()
{
spriteBatch = new SpriteBatch(GraphicsDevice);
viewport = this.GraphicsDevice.Viewport;
Texture2D hLine = Content.Load<Texture2D>("HLine");
Texture2D vLine = Content.Load<Texture2D>("VLine");
int x = (viewport.Width - 5 * hLine.Width - 4 * SpaceBetweenCharacters) / 2;
int y = (viewport.Height - vLine.Height) / 2;
int xRight = hLine.Width - vLine.Width;
int yMiddle = (vLine.Height - hLine.Height) / 2;
int xMiddle = (hLine.Height - vLine.Height) / 13;
int yBottom = vLine.Height - hLine.Height;
int xBottom = hLine.Height-vLine.Height;
//T
x += hLine.Width + SpaceBetweenCharacters;
spriteInfos.Add(new SpriteInfo(hLine, x, y));
spriteInfos.Add(new SpriteInfo(vLine, x + 16, y));
spriteInfos.Add(new SpriteInfo(hLine, x, y));
// E
x += hLine.Width + SpaceBetweenCharacters;
spriteInfos.Add(new SpriteInfo(vLine, x, y));
spriteInfos.Add(new SpriteInfo(hLine, x, y));
spriteInfos.Add(new SpriteInfo(hLine, x, y + yMiddle));
spriteInfos.Add(new SpriteInfo(hLine, x, y + yBottom));
//A
x += hLine.Width + SpaceBetweenCharacters;
spriteInfos.Add(new SpriteInfo(vLine, x, y));
spriteInfos.Add(new SpriteInfo(hLine, x, y));
spriteInfos.Add(new SpriteInfo(hLine, x, y + yMiddle));
//spriteInfos.Add(new SpriteInfo(hLine, x, y + yBottom));
spriteInfos.Add(new SpriteInfo(vLine, x + xRight, y));

}

Here we load the Images in the Texture2D Part and we call the spriteInfos method in the SpriteInfo.cs Class. In this Add Method we specify the Texture and Position which we want to specify for our characters in the text.

Now we will write the Draw Method; see:

protected override void Draw(GameTime gameTime)

{

GraphicsDevice.Clear(Color.AntiqueWhite);

spriteBatch.Begin();

foreach (SpriteInfo spriteInfo in spriteInfos)

{

spriteBatch.Draw(spriteInfo.Texture2D, spriteInfo.Position, null,

Color.Lerp(Color.Red, Color.PapayaWhip, SpriteInfo.X));

}

spriteBatch.End();

base.Draw(gameTime);

}

Here we specify the Color, Texture and the Position, to draw the text like this (the output of the Program):