Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have a texture2d loaded and wish at a certain moment to make a sort of zoom on the texture2d. explanation

As you can see in the image i would like to expand my red square to the resolution of the black square. The aspect ratio is the same.


if it isn't clear, the question is how can i make that zoom?

share|improve this question
There is no actual question in your post. You need to give more details on what your having difficulties with before anyone can help you – Daniel Carlsson Feb 29 '12 at 10:19
up vote 0 down vote accepted

In your draw method you have a destination rectangle and source rectangle, use them.

Source is related to your texture, it would be the red box.

Destination is related to your screen.

share|improve this answer
Rectangle screenRectangle = new Rectangle(0, 0, 800, 480); spriteBatch.Draw(backgroundTexture, screenRectangle, new Rectangle(0, 0, 400, 240), Color.White); – Alex Feb 29 '12 at 10:50

That can be done with transforms (like OpenGL does for example) to your viewport coordinates. It's just 2D geometry math.

Zoom is essentially a division. A 200x200 viewport with 2x zoom is actually 100x100 size in your texture (which will be expanded to fill the 200x200 viewport, effectively zooming.) After that, you just have to apply a translation to offset your zoomed area, which is a simple sum.

If you use the same zoom for both X and Y coordinates, you'll keep the aspect ratio the same. Here's some pseudocode for zooming into a full-screen texture (hence the windowX.)

backgroundX = windowX/zoom + translationX;
backgroundY = windowY/zoom + translationY;

Bear in mind you need some kind of interpolation (graphic cards can do it for you) because 1 pixel without zoom will be split into two half-pixels with 2x zoom (1px/2 = 0.5px size each fragment.) If you use nearest neighbor for interpolation, the zoomed image will be pixelated (which may be the effect you intend.)

I always implemented this myself on shaders. Here is a section of a shader of mine that zooms a texture applied to a full-screen quad, in case it helps:

uniform ivec2 resolution; // board size (for normalization)
uniform ivec3 camera;     // xy = offset, z = zoom

vec2 p = (gl_FragCoord.xy/resolution - vec2(0.5))/camera.z + camera.xy/(float)resolution;

Now p holds my texture coordinate (in [0..1] range, that's why I need the texture resolution) for the fragment at gl_FragCoord in screen. If you're not drawing a full-screen quad, you have to replace gl_FragCoord with your texture coordinate (passed as a uniform or with glTexCoord in fixed-pipeline OpenGL.)

I substract 0.5 from the fragment coordinate to center the zoom direction on screen (otherwise you would zoom into the bottom-left corner.) You don't need this, since you could also add resolution/2 to your camera offset in your application, but I prefer using the center of the screen as the origin (for convenience.)

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.