Using Shape class to display and scale graphics in XNA, WPXNA (3)

Introduction/Catalog

I has developed some games on Windows Phone. Here, I'll share my experiences and gradually to upload some classes, no good name, I just call it WPXNA. (Some example code may not be stringent enough.)

• Making
• Shape
• Display
• Scaling and Moving

Making

Some elements in the game are not suitable as a sprite, such as buttons and labels, I named them as making. Here we first establish a base class:

internal abstract class Making
 : IDisposable
{
 protected readonly string resourceName;
 internal readonly string Name;

 protected bool isVisible = true;
 internal virtual bool IsVisible
 {
  get { return this.isVisible; }
  set { this.isVisible = value; }
 }

 protected Making ( string name, string resourceName )
 {
  this.Name = name;
  this.resourceName = resourceName;
 }

 internal virtual void InitResource ( ResourceManager resourceManager )
 { }

 public virtual void Dispose ( )
 { }

}

I defined resourceName and Name. The field resourceName is the Name field of Resource structure. For example, if a making using a picture, you will need the associated resource name of the picture. The Name field must be unique.

The IsVisible property of Making is used to control whether the making is displayed, you can access this property in a derived class to decide whether or not to display.

InitResource method is used to get the resources they need from the ResourceManager, the derived class will determine what resources are loaded.

Making implemented the IDisposable interface, it used to release the unwanted contents, but you don't need to release the resources obtained from ResourceManager, since these resources should be managed by the ResourceManager.

Shape

The Shape class derived from Making, it used to display a graphic on the screen, and this is a simple class.

internal class Shape
 : Making
{

 internal static void Draw ( Shape shape, GameTime time, SpriteBatch batch )
 {

  if ( !shape.isVisible )
   return;

  batch.Draw ( shape.Texture, shape.location * World.Scale, null, Color.White, 0, 
         Vector2.Zero, World.TextureScale, SpriteEffects.None, shape.order );
 }

 internal Texture2D Texture;

 protected Vector2 location;
 public virtual Vector2 Location
 {
  get { return this.location; }
  set { this.location = value; }
 }

 protected readonly float order;

 // ...
 internal Shape ( string name, string resourceName, Vector2 location, float order )
  : base ( name, resourceName )
 {
  this.location = location;
  this.order = order;
 }

 internal override void InitResource ( ResourceManager resourceManager )
 { this.Texture = resourceManager.GetTexture ( this.resourceName ); }

}

Shape class contains a Texture2D field, it is our graphic to be drawn, the field will be initialized in the InitResource method, we get resource from ResourceManager.

Location property indicates the position of a shape, you can modify the position at any time. Order field is a reserved field, no effect.

Using the static method Draw to complete the final drawing tasks, we also determine whether to display the graphic. Note that the Scale and TextureScale fields in the Draw method, they represent the proportion of the whole game and image.

Display

Finally, we display the graphics, first define the ResourceManager and Shape, and initialize them.

private readonly ResourceManager resourceManager;
private readonly Shape birdShape;

public World ( Color backgroundColor )
 : base ( )
{
 // ...

 this.resourceManager = new ResourceManager ( new Resource[] {
  new Resource ( "bird", ResourceType.Image, @"image\bird" )
 } );
 this.resourceManager.World = this;

 this.birdShape = new Shape ( "shape.bird", "bird", new Vector2 ( 50, 50 ) );
}

We use the ResourceManager to define the resources we need, although we didn't call LoadContent method to load the resources, but you can create any making, here we create a Shape class for the bird.

protected override void OnNavigatedTo ( NavigationEventArgs e )
{
 // ...

 this.resourceManager.LoadContent ( );
 this.birdShape.InitResource ( this.resourceManager );

 base.OnNavigatedTo ( e );
}

When we call the LoadContent method, we need to use the InitResource method to get the resources from ResourceManager, or the drawing will receive an error.

private void OnDraw ( object sender, GameTimerEventArgs e )
{
 this.GraphicsDevice.Clear ( this.BackgroundColor );

 this.spiritBatch.Begin ( );
 Shape.Draw ( this.birdShape, new GameTime ( e.TotalTime, e.ElapsedTime ), this.spiritBatch );
 this.spiritBatch.End ( );
}

Finally, we use the Draw method of Shape to draw the graphics, you can set the second parameter to null, because we don't need it here. Need to be aware of is that you still need to call the Begin and End methods.

Scaling and Moving

By setting the TextureScale and Scale fields of the World, you can control the scaling of the game. In the following code, I will halve the size of the game.

public partial class World
 : PhoneApplicationPage
{

 internal static float TextureXScale = 1;
 internal static float TextureYScale = 1;
 internal static Vector2 TextureScale = new Vector2 ( TextureXScale, TextureYScale );

 internal static float XScale = 1;
 internal static float YScale = 1;
 internal static Vector2 Scale = new Vector2 ( XScale, YScale );
 internal static Vector2 FlipScale = new Vector2 ( YScale, XScale );
 
 public World ( Color backgroundColor )
  : base ( )
 {
  // ...

  TextureXScale = 0.5f;
  TextureYScale = 0.5f;
  TextureScale = new Vector2 ( TextureXScale, TextureYScale );

  XScale = 0.5f;
  YScale = 0.5f;
  Scale = new Vector2 ( XScale, YScale );
  FlipScale = new Vector2 ( YScale, XScale );
 }

}

Modify the Location property of the Shape class, you can move the image.

private void OnUpdate ( object sender, GameTimerEventArgs e )
{
 this.birdShape.Location += new Vector2 ( 1f, 1f );
}

Here, we adjusted the Scale, so the birds do not move 1 pixel on the screen, but 0.5 pixel.

Get code here，http://wp-xna.googlecode.com/, more contents, please visit WPXNA.