Looping Map Scrolling

# This article was originally posted on twitter as a series of posts while this project was still being made. I approach these blogs this way so people can see me experiment and discover things in-the-moment while I work on projects.

#Attempt 1

# I’m making looping maps in my game. I have some code that takes a snapshot of the other side of the map and draws it on the edge you’re near. I’ve only added looping for the left and right edges so far. It’s tricky to program because of all the matrix math.

img

# It wouldn’t be so bad if I didn’t have to program separate looping code for all 4 directions and each of the 4 corners. I should try breaking down the math steps more to see if I can find common code I can re-use.

img

# . . .

#Let’s Re-think This

# I’ve decided to re-think my approach to looping map scrolling. It turns out I’ve already programmed something like this before when I made the 3D map system.

# I have a rule of thumb:
“Don’t make it a hack, make it a feature”

img

# It means that when I change things in programming, I shouldn’t alter something’s behavior using outside code. I should just add it to the original code as a built-in feature. This might seem like feature-creep, but it means the new behavior isn’t going to break when I change things later.

img

#Attempt 2 (The Right Way)

# So instead of having some outside code making a bunch of draw() calls to paint additional screenshots of the map on top of the actual map system to simulate a looping scroll, it’ll be better to have the map itself handle this, and it would actually be much simpler to do.

img

# Just tell the map to re-display additional copies of its existing bitmaps on all of its corners. If I use the cacheAsBitmap flag this won’t slow down render performance because Flash is just referencing the same data behind-the-scenes. I could display the same picture a thousand times and it wouldn’t matter.

img

# And I can continue using scrollRect for fast scrolling the same way I already do instead of making additional draw() calls, so the performance will stay exactly the same.

img

# This new approach to looping scrolling is much simpler to do, performs much faster, and won’t be a fragile hack. Win-win-win!

img

#The Result

# Aaaaaand… done! The only tricky part was changing the collision system to sometimes let the player walk outside the map. The scroll system instantly moves the player to the other side of the map and then tells the map to scroll to that spot. The effect is seamless.

img