Scrolling Map Display Tests

Sometimes, playing with a concept and coding things to prove it will work can take a heck of a long time and prove to be a major distraction, bringing progress on the main project to a grinding halt.

I’ve hit one of those.

One thing that has been bugging me for a while is how I want to display the player and their surrounding area, giving as much control of the view as possible to the player.

The current test generates a 50×50 tile map and displays it in a flat rectangle (no isometric yet). The viewport is set to 400×400 pixels with a thumbnail of 100×100 beside it. The map can be scrolled by dragging on the viewport, or moving the highlighted area on the thumbnail.

The plan was always to allow the user to select the zoom level which would determine the size of the images used to draw the map. Currently the three variations are 25×25, 50×50, and 100×100.

Displaying the map and thumbnail in the first place, with accurate and smooth scrolling was a hard and annoying process even though looking back at the code now, it all seems so easy. This was mainly due to the method used to actually move the map around.

Initially, I followed the generally accepted approach of changing the style of the map container to move it around (element.style.left and element.style.top). This worked but I found that the map juddered and was just not responsive enough.

The eventual solution was to use element.scrollLeft and element.scrollTop which made a huge difference when you’re moving a couple of thousand DIVs around.

Misha3D and I came to the conclusion that this was because rather than just moving an element on the page, we were modifying a style which could have had implications on every child within that element, which caused the delay. We could be wrong, but it made sense at the time.

Once the map was being displayed and could be scrolled around, the next step was to allow the size of the images to be changed by the user. Diving straight in, I placed three buttons on the page and had each one run some code that would essentially destroy and recreate the map display by setting the innerHTML of the map DIV.

In hindsight it wasn’t a very clever plan. Sure enough it worked, but the time it took to rebuild the map was irritating and I was only messing around with a test. I dread to think how many potential players would run away screaming after trying to use it in a game.

I considered doing some tests with a more reasonable map size. Something smaller than 50×50 and more the sort of size that the game would actually use. Thankfully I stopped myself, realising that I was trying to avoid the problem by changing the test parameters rather than make the code work properly.

So I knuckled down and had another think. After a bit of messing around, I found a nice workable solution that only had a brief delay when changing the size of the images. The solution I’m currently uses modifies the style of the map tiles rather than rebuilding them.

After all, all we’re doing is changing the appearance of the tiles rather than the content, so why should be have to rebuild the structure.

Now that works to an acceptable standard, I still have more work to do on the map display routines. I need to give the option to view the map in isometric view at the push of a button and I need to plan and test some actual content on the map beyond a few people.

After that I can then tidy the routines up and throw a test together that allows the user to move around a map stored on the server, with some basic interaction.