Fast map scrolling with Javascript

Chatting about moving objects around on an html page with Xalthorn the other day we came to an interesting conclusion. There is indeed a method available that works (almost) independently of  the number of objects to be moved around. There are certain restrictions to this method however.

This article aims to provide a short overview over the pros and cons of using an elements scroll property rather than its children's style attribute.

The Problem

To move a map around inside your view window usually takes the map tiles, sets a new position and then hides what's off screen and shows what's likely to come into view. This utilizes the DOM methods of changing style properties and attaching or detaching DOM elements. Because this might influence a number of other objects and cause (at least) partial repaint of the document, this method can become quite slow if you're moving more than just a handful of objects. Even moving a small map with 20 x 20 tiles can max out your processor. and that is before you even moved  any character or checked any game state.

The Solution

Instead of moving the map inside it's container, we could utilize a common (yet nonstandard)  object method inside JavaScript.

The methods element.scrollTop and element.scrollLeft  are present in lots of modern browsers today (including Safari, Opera, Mozilla and Internet Explorer). So although it is not present in any standard and should be avoided for normal use, a special case like a tile based browser game might greatly benefit from this technique.

The biggest benefit of the scroll properties is speed. Consider the following map structure with a size of 50x50 tiles (2500 tiles):

Moving this in the regular way, changing the style.topand style.left properties of the map div this map hardly scrolls at all. Using the scrollTop and scrollLeft of the mapCanvas element instead lets the map glide about inside the view.

Problems and Restrictions

This method is great if you want to scroll things like a text or an element within it's boundaries, it would be suited well for JavaScript sprite animations or scrolling a map. The restriction though is that you can't scroll beyond the contents. You can't move an element out of view using this method while using the style properties lets you move an element virtually anywhere.

This method is also nonstandard so it might not be available in certain browsers.

I still have to run some tests for compatibility, yet I found this concept important enough to share. If you have any ideas to improve this or have questions, let me know.

Tags: code performance, Games, tile graphics