Lining up sprites with scale and rotation around arbitrary point

Question

I have 2 sprites which when drawn together make up the correct image on the screen. Drawing them both at the same time is not an option.

Imagine this class:

class MyImage
{
    Vector2 drawOffset;  // this gets added before the image is drawn
    Vector2 sourceRect;  // this is where it is on the source texturepage

    void Draw(Vector2 position)
    {
        position = position + drawOffset;
        spriteBatch.Draw(sourceTexture, position, sourceRect, Color.White);
    }
}

And this code calling into it:

MyImage a = new MyImage();  // assume they get initialised correctly
MyImage b = new MyImage();  // with different drawOffsets and sourceRects

a.Draw(position);  // this composes the final
b.Draw(position);  // screen image from the 2 source images

Now I'd like to add scale and rotation to the Draw() function, but am having real trouble getting the parameters to the SpriteBatch.Draw function correct. This would be the version which takes scale, rotation and an origin. I need the final composed image to scale and rotate correctly (around some arbitrary centre) but can't for the life of me work out how to manipulate the scale, rotation and origin parameters to make the 2 images appear to scale and rotate in concert. Has anyone done something like this before? Happy to mod the question based on feedback if anything's unclear. If images would help I can get them posted somewhere...

I've looked at rotation around point xna 2D but am still stumped.

Cheers, Charlie.

Thanks so much for the answer below - using it I've managed to get the images rendering correctly. One other issue remains, which is that I seem to need to use a lot of spritebatch.Begin/End pairs (one per image render). I don't have a way to measure performance on this device yet and the framerate's not chugging so I guess it's not a problem.

Here's my code:

// gr is the graphic object:
// gr.position is the location of the image in the atlas
// gr.DrawOffset is the draw offset so the image is placed correctly in it's virtual box
// gr.pageIndex is the index into the texture/atlas array
// hw,hh are half the width/height of the image (it always rotates around it's centre in fact)

Matrix m = Matrix.CreateTranslation(-hw, -hh, 0) *
    Matrix.CreateRotationZ(rotation) *                   // rotation : parameter
    Matrix.CreateScale(scale) *                          // scale : parameter
    Matrix.CreateTranslation(pos.X + hw, pos.Y + hh, 0); // pos : parameter!

spriteBatch.Begin(SpriteSortMode.Deferred, null, null, null, null, null, m);
spriteBatch.Draw(page[gr.pageIndex].texture, gr.DrawOffset, gr.position, color);
spriteBatch.End();

Chris Taylor Chris Taylor · Accepted Answer · 2011-05-27T18:34:49

If you are going to work with the SpriteBatch.Draw to draw the textures I would suggest that you forgo trying to manipulate the origin, scale arguments to try an achieve this, simply I doubt it can be done this way. But you do have an alternative, you can manipulate the SpriteBatch Matrix.

Here is a quick and dirty example, note that the texture I used here is 128x96 so I hard coded the values for that image size. Do not look for any best practices in this code, I wrote it to try and show the concept as cleanly as possible.

using System;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;

namespace WindowsGame1
{
  /// <summary>
  /// This is the main type for your game
  /// </summary>
  public class Game1 : Microsoft.Xna.Framework.Game
  {
    GraphicsDeviceManager graphics;
    SpriteBatch spriteBatch;

    private Texture2D _texture;

    private MyImage _image1;
    private MyImage _image2;

    // Attributes of the composed sprite
    private float _angle = 0.0f;
    private Vector2 _position = new Vector2(100, 100);
    private Vector2 _rotationPoint = new Vector2(96, 48);

    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);

      _texture = Content.Load<Texture2D>("Gravitar");

      // Create the two MyImage instances
      _image1 = new MyImage(_texture, Vector2.Zero, Vector2.Zero);
      _image2 = new MyImage(_texture, new Vector2(64, 0), new Vector2(64, 0));
    }

    /// <summary>
    /// UnloadContent will be called once per game and is the place to unload
    /// all content.
    /// </summary>
    protected override void UnloadContent()
    {
      // TODO: Unload any non ContentManager content here
    }

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

      float elapsedTime = (float)gameTime.ElapsedGameTime.TotalSeconds;

      _angle += 0.5f * elapsedTime;

      if (Mouse.GetState().LeftButton == ButtonState.Pressed)
      {
        _angle = 0.0f;
      }

      if (Keyboard.GetState().IsKeyDown(Keys.Left)) 
        _position += new Vector2(-10, 0)*elapsedTime;

      if (Keyboard.GetState().IsKeyDown(Keys.Right)) 
        _position += new Vector2(10, 0) * elapsedTime;

      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.CornflowerBlue);

      // Setup the sprite batch matrix      
      // Notice that we first translate to the point or rotation
      // then rotate and when we translate to the desired position we
      // need to compensate for the first translation so that the texture
      // appears at the correct location
      Matrix m = 
        Matrix.CreateScale(1.5f) 
        * Matrix.CreateTranslation(-_rotationPoint.X, -_rotationPoint.Y, 0) 
        * Matrix.CreateRotationZ(_angle) 
        * Matrix.CreateTranslation(_position.X + _rotationPoint.X, _position.Y + _rotationPoint.Y, 0);

      // Begin the SpriteBatch passing the matrix
      spriteBatch.Begin(SpriteSortMode.Deferred, null, null, null, null, null, m);
      _image1.Draw(spriteBatch);
      _image2.Draw(spriteBatch);            
      spriteBatch.End();

      base.Draw(gameTime);
    }

    class MyImage
    {
      Vector2 _drawOffset;
      Vector2 _sourcePoint;
      Texture2D _sourceTexture;      

      public MyImage(Texture2D sourceTexture, Vector2 sourcePoint, Vector2 drawOffset)
      {
        _drawOffset = drawOffset;
        _sourcePoint = sourcePoint;
        _sourceTexture = sourceTexture;
      }

      public void Draw(SpriteBatch spriteBatch)
      {      
        spriteBatch.Draw(_sourceTexture, _drawOffset, 
          new Rectangle((int)_sourcePoint.X, (int)_sourcePoint.Y, 64, 96), 
          Color.White);
      }
    }
  }
}

Lining up sprites with scale and rotation around arbitrary point

1 Answers