Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

share|improve this question

closed as not a real question by jcora, Trevor Powell, Byte56, Josh Petrie, bummzack Dec 16 '12 at 13:18

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.If this question can be reworded to fit the rules in the help center, please edit the question.

This is a pretty ambiguous question, dangerously close to "How do I make a game?". – jcora Dec 5 '12 at 20:36
I understand this and I am really sorry. Just point me where to look for this, please. I have already realized that I should use tiled map but I am still looking for how to move the camera. – Shkarik Dec 5 '12 at 20:42
up vote 2 down vote accepted

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:

    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.

share|improve this answer

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