# How to scale a sprite with its center as origin?

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)

• What parameters does the draw function take? Mar 24, 2013 at 19:43
• @Polar You can see here.. Is it still zooming towards the center or somewhere else? Are your Battle.Texture_SelectionBox size properties set to what you expect? Mar 24, 2013 at 20:41
• @Mikec Right now, it's 'stretching' the image from the top-left and it keeps getting bigger until it reaches the sprite's original size (which is not very big) - via the ScaleValue variable. I want it to 'stretch' or 'zoom' (keep getting bigger) from the center, not from the top-left. Battle.Texture_SelectionBox is already at the size I expect. Mar 24, 2013 at 22:12
• @MikeC Thanks, I didn't realise it was a standard XNA function (or that this question was about XNA). Mar 25, 2013 at 8:33

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.

I found out what was missing:

SpritePosition_FirstBox = New Vector2(15, 50)

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