Question Designing a 2D Game Where You can Zoom In / Zoom Out

Hi all,

I'm designing a 2D strategy game that is set in space. The gameboard is a grid of squares where each square may contain a planet, a rocketship, a comet, a UFO, etc. Here's what it looks like currently in Unity:

As you can see, there's the Gridboard and there's the background, currently that picture of a galaxy. I really like how this looks.

When I started to design the game's units, I realized that they are visually detailed. The player may want to zoom in for inspection, and then zoom out to see the whole gameboard. I would want the zoom to be a fluid, smooth, continuous motion, not an automatic jump from magnification x1 to x5 or something like that. And when the player zooms in, I imagine that the Gridboard zooms in quickly, while the galaxy image zooms in more slowly, to give the impression that it is very far away:

I imagined that conceptually, my game might look like this:

It goes without saying that the Gridboard has its own Layer, and the background is assigned to a separate Layer. Those are the only two Layers that I anticipate using in this game, BTW.

So I created my Unity project as a 2D game, set up the Gridboard and the Galaxy background, and set the Layers and Transform.positions accordingly. Through experimentation, I eventually assigned the Main Camera a position.Z value of -10, the Gridboard a position.Z value of 0, and the galaxy background a position.Z value of 10. It all looked pretty good. For reference, here's the Main Camera's Transform component at the start of the game:


So far, so good. Next I set up some C# code to zoom the camera in and out when the player rolls their mouse wheel. What I found is that as I rolled my mouse wheel, I could watch the Camera's Z value change as I rolled the mouse, but there was no visual change in the camera's perspective. When the Camera's Z value went above 0, the Gridboard simply winked out. And when the Z value went above 10, the galaxy also vanished. So that's not great.

I switched my project from 2D to 3D under the Edit>Project Settings>Editor menu. But that had no effect. I clearly underestimated this challenge.

So I'd like to ask the forum: How would you guys approach this problem? I don't even know with what terms I should use to do some Google searches here. Is there a tutorial or something that someone could recommend? Any advice or criticism is greatly appreciated. Thank you.

 

I think you should read about orthographic projection. When you use it (I assume you do) objects are always same size no matter how far camera is. That’s why your code doesn’t work (I mean… it works but changes wrong values). To achieve effect you talk about I would change orthographicSize on camera. In fact on two cameras, one for a grid and one for a galaxy. When player scrolls both cameras have different interpolation of orthograficSize. This will give you effect of depth.