How to scale a sprite with its center as origin?

Question

I'm trying to zoom-in a sprite gradually from 0% to 100% (a sprite called SelectionBox), so it zooms from the middle of the sprite, not from the upper-left corner. I'm almost there, but I'm having problems with the sprite origin - it's not positioning it in the spot I told it to.

What's wrong with this code?

SpritePosition_FirstBox = New Vector2(15, 50)
MiddleOrigin = New Vector2(CSng(Texture_SelectionBox.Width / 2), CSng(Texture_SelectionBox.Height / 2))

spriteBatch.Draw(Texture_SelectionBox, SpritePosition_FirstBox, Nothing, Color.White, 0, MiddleOrigin, ScaleValue, SpriteEffects.None, 0.94)

Answer 1

It has to do with where you're placing the origin relative to the scale factor. Take this for example:

SpriteBatch.Draw(myTexture, // Texture
    new Vector2(0, 0),      // Position
    Nothing,                // Source rectangle
    Color.White,            // Color
    0,                      // Rotation
    new Vector2(5, 5),      // Origin
    new Vector2(0.5, 0.5),  // Scale
    SpriteEffects.None,     // Mirroring effect
    0.94);                  // Depth

Here we're drawing at position 0,0 from origin point 5,5 with a scale factor of 0.5, 0.5, right? And in the following:

SpriteBatch.Draw(myTexture, // Texture
    new Vector2(0, 0),      // Position
    Nothing,                // Source rectangle
    Color.White,            // Color
    0,                      // Rotation
    new Vector2(5, 5),      // Origin
    new Vector2(1, 1),      // Scale
    SpriteEffects.None,     // Mirroring effect
    0.94);                  // Depth

We're now drawing at a scale factor of 1,1 but we're still drawing from the same origin. So instead, you should try something like this:

Vector2 scaleFactor = new Vector2(0.5, 0.5);
Vector2 origin = new Vector2(myTexture.Width / 2 * scaleFactor.X, myTexture.Height / 2 * scaleFactor.Y);
SpriteBatch.Draw(myTexture, // Texture
    new Vector2(0, 0),      // Position
    Nothing,                // Source rectangle
    Color.White,            // Color
    0,                      // Rotation
    origin,                 // Origin
    scaleFactor,            // Scale
    SpriteEffects.None,     // Mirroring effect
    0.94);                  // Depth

That way you're expanding from the center of the texture relative to it's current size.

Answer 2

I found out what was missing:

Instead of

SpritePosition_FirstBox = New Vector2(15, 50)

It should be

SpritePosition_FirstBox = New Vector2(CSng(15 + (Texture_SelectionBox.Width / 2)), CSng(50 + (Texture_SelectionBox.Height / 2)))