How to create GoogleMaps-like camera for simple 2D strategy game? [closed]

Question

I am just starting in game development (with web programming background). I want to know how to create 2D game with camera that can zoom in/out and can be moved like map in Google Maps. Could you help me with advise where to look for this, please? Thank you

Answer 1

If you have have a way of resizing your canvas, you can implement this easily.

Create a camera class (or constructor function, in the case of JavaScript), and make it have properties like zoom, position, maybe even speed and acceleration.

Then, when you are rendering it, call this:

canvas.draw(entity.image, 
    entity.position.x - camera.position.x,
    entity.position.y - camera.position.y)

You can now move your camera around the world, without actually moving the world.

And for zooming... You must have a way of scaling your entire canvas, before/after of rendering anything:

canvas.scale(camera.zoom, camera.zoom)

There are different implementations of the scale function though. This one assumes that each time you scale, you scale from the default scale (1).

In most implementations, though, you'd want to save the state of the canvas, scale, render, and then load the state back. Why? Because scaling with a factor of 0.5 two times in a row wouldn't give you a picture two times larger, but a picture 4 times larger. You're not setting a constant scaling factor by calling scale, but actually rescaling everything. So, by setting the camera.zoom to anything except 1, the camera would appear to be constantly zooming/unzooming, because you're scaling each frame.

Notice how camera.zoom is a scalar, not a vector.

I suggest you don't scale every frame though. Scale only if the camera.zoom has changed.