2
\$\begingroup\$

I'm trying to implement zooming on my 2D game. Since it's using orthographic projection, I thought it would be easy to implement zooming. After looking around the internet, I found a bunch of explanations and samples on how to do this if (0,0) is the center of the screen with the orthographic projection. The problem is, my ortho projection has (0,0) at the top-left (similar to XNA/Monogame, and a couple others). I could not find any examples about how to implement zooming to the center of the screen when the center is not (0,0).

And help/links/code examples would be greatly appreciated.

\$\endgroup\$
  • 5
    \$\begingroup\$ Translate the scene so that your center is at 0,0. Then zoom like you've found examples of. Then translate back. \$\endgroup\$ – MichaelHouse Sep 19 '13 at 5:13
2
\$\begingroup\$

there are two solutions:

first:

translate your coordinate system into a coordinate system with it's origin at the center of the screen, scale it, translate it back again. If you modes this with matrices, you can combine all steps into a single matrix multiplication

second:

change your setup into so coordinate system that has it's origin at the center. scale it.

no matter what you choose, knowing linear algebra and matricas will help you alot to make this kind of problems much easier.

\$\endgroup\$
0
\$\begingroup\$

As Byte56 pointed out in his comment, it would be the easiest to create a function where you just enter in-game-coordinates and get out the screen-coordinates. That would be the most flexible. But as you asked how to achieve this with (0|0) being the upper left, I'll give you the answer although it isn't intelligent to implement it like this (sorry I can't give you code but I think this won't be too difficult to achieve). So let's just say your zoom var stores the number of screen pixels per in-game unit. To make things easier, let's say, it's initial value is 100 and the screen measures 1000|1000. Not that complicated, is it? So, to keep things easy, let's say you want to zoom in to let zoom be 200. So what you know have to do is to tell the var that stores where the (0|0) point of the screen is on the map (let's call it *upper_left*) to increase so you zoom to the center of the map and not to the upper-left (which would look just silly). So what you have to do is to calculate the amount of game units the screen was width before you did the zooming (that's quite easy: 1000 / 100 = 10) and the amount after the zooming (not that complicated: 1000 / 200 = 5). So to get the new x-value for *upper_left*, just subtract the second value from the first (10 - 5 = 5) and divide it by two (5 / 2 = 2.5). Now, you're almost done. Just simply add that value to the X-coordinate of *upper_left* and you're done. repeat that procedure for the y-coordinate and you've done everything.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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