2D World design question

Question

I'm facing a problem which is probably extremely common in game-design.

1. Let's assume that we've got a 2D world
2. The world's size is M x N rect
3. The world may contain some items in it
4. The items have (x,y) coords
5. The world can be browsed via a window that is physically (m x n) large.
6. The browser window can be zoomed in / out
7. The browser window can be panned up/down + left right, while in the extents of the world's rect.

How should I go about implementing this? I'm especially concerned about the browser window. Can anyone recommend any good reads ?

This is not a homework - it's more of a task which I've set myself to complete.

Answer 1

http://web.archive.org/web/20100111062144/http://www.parallelrealities.co.uk/tutorials/

Answer 2

Implement it like you'd implement Google Maps with special markers.

Answer 3

Basically you are mapping a rectangular subset of one area to another rectangle, ie. the browser window. This is essentially just 2 operations - one of translation, to position the viewed area within the world, and then one of scaling, to take that arbitrary viewable area and scale it to the window. Separate to that is the issue of zooming in and out, which is essentially modifying the size of the viewed area.

In game development there are several ways to approach this. Generally you'd customise a view projection to show as much of the world as you need (ie. transform from world-coordinates to viewing coordinates, typically an orthographic projection) and simply translate the world or view to place the viewport such that it is pointing towards what you want to see. Providing you've set the positions of your objects correctly the 3D hardware will draw what you expect.

Answer 4

You might be able to get away with dhtml, but flash or silverlight would be much easier to implement something like this.

Take a look at the code behind google maps for some inspiration. They are doing somthing similar to what you want in pure html.