Menu

Start
Why tiles?
Map format
More Maps
Creating tiles
More tiles
The Hero
Keys to Move
Hit the wall
Open the door
Jumping
Clouds
Ladders
Stupid enemy
More on enemy
Shoot him
Getting items
Moving tiles
Scrolling
More scrolling
Depth
Isometric view
Mouse to move
Iso mouse
Iso scroll
Rotated hero
Rotated ground
Pathfinding
More pathfinding
Slopes
Hextiles

Source flas

Links

Creative Commons License
All content on the "Tile based games" website (including text, actionscript code, and any other original works), is licensed under a Creative Commons License.



More scrolling

Keeping the hero in the center is all fine until we move at the border of map, then we start to see some ugly background outside of the map. You can make this problem disappear, if you build wall tiles inside your map, preventing heros approaches to the edge. But that will need additional planning in the maps, and it adds unnecessary empty area around them. Much better idea is to scroll the background only when hero is not near the edge. Like this:

How far is too far?

Hero will always move, only difference is, that when he reaches the edge of map, we wont scroll the background tiles anymore, making it not scroll. In the left picture hero is from the left edge "halfvisx" number of tiles away. If hero would move more left and the map would scroll, it would reveal an area not covered by the map and the tiles:

In the right ricture hero is from the bottom edge "halfvisy" number of tiles away. No more scrolling should happen when hero moves down.

We have to consider the new positions of hero also when we first build the map. If hero starts near the map edge, he cant be placed in the center. What actually happens, is that we will shift all the tiles, included hero by certain amount when placing them with buildMap function.

After placing tiles clip and calculating values for halfvisx/halfvisy in the buildMap function add code:

game.mapwidth=map[0].length;
game.mapheight=map.length;

game.mapwidth will have be the number of horisontal tiles on current map and game.mapheight is number of vertical tiles. We will use those to determine, if hero is near the right or bottom edge of map. Now lets calculate how much we have to move tiles when hero starts near the edge:

if(game.halfvisx>char.xtile){
  var fixx=char.xtile-game.halfvisx;
  var fixx1=0;
}else if(char.xtile>game.mapwidth-game.halfvisx-1){
  var fixx=char.xtile-game.mapwidth+game.halfvisx+1;
  var fixx1=1;
}
if(game.halfvisy>char.ytile){
  var fixy=char.ytile-game.halfvisy;
  var fixy1=0;
}else if(char.ytile>game.mapheight-game.halfvisy-1){
  var fixy=char.ytile-game.mapheight+game.halfvisy+1;
  var fixy1=1;
}

fixx and fixy will have value of number of tiles needed to shift everything to make hero appear in the correct position. First line checks if hero is near the left edge, it happens only when xtile is less then halfvisx and then we move tiles by the amount of xtile-halfvisx. In the right edge hero stands only if xtile is more then mapwidth-halfvisx.

Variables fixx1 and fixy1 (sorry for not using clear and understandable variable names) will be used in the loop when going through the tiles. Without those the code would still trying to place tiles outside of the map area, when hero stands near the right or bottom edge.

Now we add fixx/fixy to the position of tile:

game.clip._x = game.centerx-((char.xtile-fixx)*game.tileW)-game.tileW/2;
game.clip._y = game.centery-((char.ytile-fixy)*game.tileH)-game.tileH/2;

and we also have to add fixing variables to the loops for creating visible tiles.

To make sure we start to count from the right tile, add those fix variables to the xstep and ystep too:

char.xstep=char.x-(fixx+fixx1)*game.tileW;
char.ystep=char.y-(fixy+fixy1)*game.tileH;

Thats about building the map. Now lets move on to move the hero.

Moving on the edge

In the moveChar function we first calculate the fixx and fixx1 variables same way as in buildmap function. Then we put the scrolling part of the code into if statements, which is only true in case hero is far enough from the edge of the map. Same way we modify vertical movement too.

Since sometimes changeTile function is still called to change tile that doesnt actually exist, we apply quick and dirty fix. If the old tile doesnt exist, return without doing anything:

if(game[nameold].walkable==undefined){
  return;
}

Thats all from the scrolling department, next we will look at the depth of movie clips and something very scary called "z-sorting".

You can download the source fla with all the code and movie set up here.

This chapter was rewritten in 9/apr/2004 because the original code failed in the right and down edge of the map. Thanks to Dave for finding the bug.

Next: Depth.

Top