Tile locator/mapper
The other day I thought about how I should be able to detect what tile the user selected in the editor. The problem is that the leveleditor will have a level map of any size, so it might not fit the screen - or should I say it never will!

So I'm going to use some scrollbars that enables the level designer to move around on the level. This works pretty much like any window, but the window has a certain size. We will call this the viewport.

Let's say the viewport can show 5x4 tiles, shown below as the green line.

But I need some way of knowing that I pressed the tile at position 1, 1 in the viewport

Anisotropic mapping
The way the tile position is calculated is called anisotropic mapping. Being a total idiot at math I have no idea what that means, I just saw it in a book and tried to create this applet :)
You can have a look at the source for the applet, I don't think it's too hard to understand.

If you place the mouse over the applets at the end of this page, you will notice that the first coordinates (screen) is diffent for each of the applets because they have diffent sizes. But if you place the mouse at the buttom-right of each of the applets, you'll see that they all have the 10, 7 coordinate (10.0, 7.4968).

The size of the applet is doubled for each of them, but the So what do we have now?

  • A 2 dimensional array the makes up the level.
  • A viewport that keeps track of where it is in the level.

    That's all we need for now to scroll around on the level! If we say something like...


    selectedTile = levelStructure[viewportX + TileCoordinateX][viewportY + TileCoordinateY];

    The viewport keeps track of where in the level structure it is, that would be the (2,2) coordinate (the top left corner of the viewport, also marked as (0,0)). The TileCoordinateX and TileCoordinateY are the values calculated using the anisotropic mapping technique.

    So if we use the figure above as an example we get:


    selectedTile = levelStructure[2 + 1][2 + 1];

    So the tile returned is the one at position (3,3) in the level, the right one!
    But but, please note that this does NOT implement smooth scrolling of the level, that another story. Actually we're scrolling 1 tile at a time so it can look pretty funny. We can however use this technique when we're implementing collision detection, but that's also another story to tell. But there's still much to do before we get there, so patience please...

    And now, try the applets! or download the source.

    200x150 Applet

    400x300 Applet

    800x600 Applet
  • Use cases ready!
    First version of the use cases finished
    Download here
    Simple classes ready!
    First version of the classes is finished
    Download here

    Developer Diary
    Wee! My first entry in th...
    Hello?... Is this thing o...