views:

171

answers:

4

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.

A: 

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.

Byron Whitlock
let's assume that I'm html-impaired, honestly I hate diggin though it lol
Maciek
+1  A: 

http://www.parallelrealities.co.uk/tutorials/

James Morris
right, I do realize that I'll need to perform some scaling, translating etc. I'm not sure about the order of it though
Maciek
A: 

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

Anthony Mills
and how would I implement google maps ? lol
Maciek
Well, you have a div (with `position: relative`) with a bunch of world tiles inside (`position: absolute`). Those get moved around relative to your character's position in the world. When the user's viewport goes outside the current set of loaded tiles, you add more tiles (and delete tiles as they get hidden). Your world tiles are one layer (`z-index: 1`), your enemies are in another layer (`z-index: 2`), your character is in another layer (`z-index: 3`). The tiles in each get moved (`position: absolute; top: 39px; left: 107px`) according to your game logic.
Anthony Mills
+1  A: 

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.

Kylotan