# Zooming in/out on a 2d Map

This topic is 4832 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

I'm developing a Master of Orion like game. I'm coding the galaxy screen part and I'm encountering a simple problem that I can't seem to solve. The galaxy map is structured like a grid where each individual cell can contain either a solar system, a nebula tile, nothingness or something else. I'm trying to add the usual zoom in/out feature via the mousewheel but I would like that the center point of the screen remained fixed. I'm using Managed DirectX so to do the actual zooming I'm using this: sprite.Transform = Matrix.Scaling(zoomFactor, zoomFactor, 0); zoomFactor is a float which gets decreased/increased (by 0.1) each time the player moves the mousewheel. When 1 it means that no zooming is applied, when < 1 it means that we are zooming out, when > 1 it means that we are zooming in. Let's say that the whole map is 1024 x 768 at zoomFactor 1. When I zoom out, the image is scaled by 10% (zF = 0.9) so it now becomes 922 x 692 and it is placed in the topleft corner of the screen. The other 10% of the screen remains black (it is just an example, in the real situation, this part that now is black will be covered by the rest of the map that couldn't fit in a whole screen). If I wanted to keep the zoomed image at the center of the screen I would simply need to translate the image with these deltas: x: 0.1 x 1024 / 2 = 51 y: 0.1 x 768 / 2 = 38 And it works correctly: the image seems to be placed at the center of the screen. The algorithm should remain the same even with a zoomFactor < 0.9 & > 1.1 but something must happen to the coordinate system because it doesn't work anymore with that fixed delta increment/decrement. So I thought that I should increase the delta of the translation depending on the zoom factor, but while the problem is less evident, at higher levels of zoom the background images migrates to the top left corner and does not stay fixed in the center. I'm using these formulas:
[SOURCE]

// Pseudo real code
// width is the screen width
// height is the screen height
// zoomDelta is the fixed amount that will be added/subtracted to the
// zoomFactor (0.1)
// zoomFactor is the current zoomValue

float deltaX = width * (zoomDelta * 1 / zoomFactor);
float deltaY = height * (zoomDelta * 1 / zoomFactor);

if (mouseWheelUp) {
zoomFactor += zoomDelta;
float dX = width * zoomDelta/2;
float dY = height * zoomDelta/2;
vScrollOffset += new Vector3(dX, dY, 0);
}
else {
zoomFactor -= zoomDelta;
float dX = width * zoomDelta/2;
float dY = height * zoomDelta/2;
vScrollOffset -= new Vector3(dX, dY, 0);
}

[/SOURCE]
[/source] I would like to achieve the effect that you can see in applications like Microsoft Autoroute, or World Wind for example. Thanks in advance!

##### Share on other sites
Sorry, this is irrelevant to your question, but I have to ask:

float deltaX = width * (zoomDelta * 1 / zoomFactor);
float deltaY = height * (zoomDelta * 1 / zoomFactor);

I'm confused here why the * 1 step. I guess the compiler optimizes that away but why write this obsure code? Even if the 1 / zoomFactor was placed within parenthesis it would matematically cancel out to zoomDelta / zoomFactor.

##### Share on other sites
That was due to an old formula that I was using instead of that one.. Since I was making some experiments, to avoid losing what was written there I simply added the 1 /.

Anyway I kind of solved this problem but have found another one.
I was using sprite.Transform = Matrix.Translation * Matrix.Scaling
I swapped their order and now it correctly zooms on the center point of the screen. But If I scroll the map, it doesn't zoom on the relative center point of the screen but on the absolute one. If for example I try to scroll down, and then zoom up, it tries to reach the point that was the center so instead of only zooming it scrolls a bit up.

1. 1
2. 2
Rutin
20
3. 3
khawk
17
4. 4
A4L
14
5. 5

• 12
• 16
• 26
• 10
• 44
• ### Forum Statistics

• Total Topics
633759
• Total Posts
3013720
×