Sniper Rifle Zoom Effect

[Dr. Peeps]

My 2D game involves various sprites moving around at multiple "depths" of a parallax backdrop. What I'd like to do is add a "sniper rifle" lens effect so the player can zoom in on one area. Lots of 3D games do this of course:



The issue is that looking through this zoom lens should cause the field of view and the perspective to change somewhat (so simply scaling up part of the screen won't do). In a 3D game, this is easily done by adding a second "camera" with modified parameters. But I'm not sure of what the best method might be in this 2D world. Since LÖVE doesn't use Z positions, I guessing there is no way to set a camera and just have things magically fall into place.

I'm thinking what I'll have to do is draw the world once for the outside-the-lens parts of the screen, then draw the entire thing again with some transformations applied for the inside-the-lens part. Can anyone offer any guidance here? Thanks!

[pgimeno]

The issue is that looking through this zoom lens should cause the field of view and the perspective to change somewhat (so simply scaling up part of the screen won't do).

Why not? That's exactly how to do it, and what a FOV change produces, even in 3D. It may look not so good because of pixelation or blurriness (i.e. lack of resolution when zoomed), depending on your graphics and the zoom factor, but otherwise that's how to implement a lens view. You may also want to add a lens effect, probably with a shader, like in the image you've posted, but that's a separate issue.

Edit:

Ok, I see the issue. I was thinking about zooming always the centre of the screen, which is what changing the FOV does, but you want to zoom any part of it. Well, the problem is that you can't rotate the camera in 2D: it must always look perpendicular to the screen plane; otherwise it would distort the aspect ratio (if orthographic) or look like a photograph in perspective (if 3D).

One solution would be to prohibit rotation: your character would have to move sideways in order to point to a different place of the screen. Then you can apply the parallax displacement as the player moves.

But that of course is ugly and inconvenient. So, the best solution is to just pretend that the screen is projected in a sphere centred in the player's eye, so that rotation consists of focusing a different area, and zoom it. Which is basically what I said above: just apply a zoom to the desired screen area.

[Dr. Peeps]

Why not? That's exactly how to do it, and what a FOV change produces, even in 3D.

You're right! I was thinking of lens compression, where objects appear nearer to each other with longer lenses:



But this only happens when the camera also changes position, which wouldn't be happening in my case, so I've over-complicated things for nothing.

But back to the zoom issue itself. I guess this could easily be handled by using something like hump.camera? (Which is still basically re-drawing the world using a different scale factor and drawing it to a smaller "window"?)

[Dr. Peeps]

Ok, I see the issue. I was thinking about zooming always the centre of the screen, which is what changing the FOV does, but you want to zoom any part of it. Well, the problem is that you can't rotate the camera in 2D: it must always look perpendicular to the screen plane; otherwise it would distort the aspect ratio (if orthographic) or look like a photograph in perspective (if 3D).

One solution would be to prohibit rotation: your character would have to move sideways in order to point to a different place of the screen. Then you can apply the parallax displacement as the player moves.

But that of course is ugly and inconvenient. So, the best solution is to just pretend that the screen is projected in a sphere centred in the player's eye, so that rotation consists of focusing a different area, and zoom it. Which is basically what I said above: just apply a zoom to the desired screen area.

I agree that's the only solution here. This 2D world is a flat plane, so there is no rotation problem; the player really is just moving a lens around on a flat image. Think of this game as more of a simple "shooting gallery" - there is no player movement. The parallax is only there as a slight 3D effect, and I don't believe looking through the sniper scope should change any positioning - if a mountain is directly behind a barn, it should still be directly behind the barn when looked at through the lens!

Thanks for making me think more clearly about this.

[pgimeno]

But this only happens when the camera also changes position,

Exactly. These pictures are taken at different distances of the glass. The top one is closest, the bottom one is farthest. You can perceive that in the 3D distortion of the bottom of the glass, which gets flatter as the camera distance and focal length both increase (but the photographer has done a great job making everything look just about the same).

But back to the zoom issue itself. I guess this could easily be handled by using something like hump.camera? (Which is still basically re-drawing the world using a different scale factor and drawing it to a smaller "window"?)

I guess you can use that. I haven't used it.

[raidho36]

Your original idea of simply rendering it twice with different magnification levels is what you should do. One of the simpler approaches would be to render background normally, then set up a stencil of the same shape as the scope viewport, adjust camera settings to emulate the scope (zoom, position, etc) and render the world again. Everything that wasn't inside the stencil wouldn't be drawn. Then you apply scope texture on top and it's finished. You can use the same approach to render scopes in 3d, as opposed to using render textures for the purpose (it doesn't exactly produces correct results anyway).

[drunken_munki]

I did a mock up last night then realised that you wanted some sort of depth changes not just zooming. I tried a few shaders to make an effect but failed and the experiment took too long so I've stopped and just reverted to the plain zoom example.

This uses a canvas twice, once for the game and then again with a stencil and translate/scaling about the mouse to give the zoom effect.

Do as you wish with the code, the image is from someone else.

You can change the zoom with 1-4 and change the size of the 'scope' with - or = (+).

[Dr. Peeps]

I did a mock up last night then realised that you wanted some sort of depth changes not just zooming.

Hey, this is awesome munki - thanks! Simple zooming like this is actually all I need.